جاوااسکریپت چیست؟ چه کارهایی می‌توانید با آن انجام دهید؟

در این مقاله به بررسی جاوااسکریپت از دید کلی می‌پردازیم و به پرسش‌هایی همچون «جاوااسکریپت چیست؟» و «چه کارهایی می‌توانید با آن انجام دهید؟» پاسخ خواهیم داد و اطمینان حاصل می‌کنیم که با هدف جاوااسکریپت به خوبی آشنا شوید.

پیش‌نیازها: درک اولیه‌ای از HTML و CSS.

هدف: آشنایی با مفهوم جاوااسکریپت، توانایی‌های آن و چگونگی استفاده آن در یک وب‌سایت.

تعریف کلی

جاوااسکریپت یک زبان برنامه‌نویسی یا اسکریپت‌نویسی است که به شما امکان می‌دهد ویژگی‌های پیچیده‌ای را در صفحات وب پیاده‌سازی کنید—هر زمان که یک صفحه وب بیشتر از نمایش اطلاعات ثابت کاری انجام می‌دهد—مثل به‌روزرسانی محتوای به‌موقع، نقشه‌های تعاملی، انیمیشن‌های دو بعدی و سه بعدی، یا پخش ویدیوها—می‌توانید مطمئن باشید که جاوااسکریپت در این فرآیند دخالت دارد. این زبان، لایه سوم از تکنولوژی‌های استاندارد وب است. دو لایه دیگر (HTML و CSS) را در بخش‌های دیگر منطقه آموزشی به تفصیل بررسی کرده‌ایم.

HTML زبان نشانه‌گذاری است که ما از آن برای ساختاردهی و معنی‌بخشی به محتوای وب استفاده می‌کنیم، مانند تعریف پاراگراف‌ها، عناوین و جدول‌های داده، یا قراردادن تصاویر و ویدیوها در صفحه.

CSS زبانی است که با استفاده از آن، به محتوای HTML سبک‌های گرافیکی اعمال می‌کنیم، برای مثال تنظیم رنگ‌های پس‌زمینه و فونت‌ها و چیدمان محتوا در چند ستون.

جاوااسکریپت زبانی است که به شما امکان می‌دهد محتوای پویا ایجاد کنید، چندرسانه‌ای را کنترل کنید، تصاویر را متحرک کنید و تقریبا هر چیزی را پیاده‌سازی کنید.

این سه لایه به خوبی بر روی یکدیگر ساخته می‌شوند. بیایید یک دکمه را به عنوان مثال در نظر بگیریم. ما می‌توانیم با HTML به آن ساختار و معنا بدهیم:

<button type="button">بازیکن ۱: کریس</button>

سپس می‌توانیم با CSS آن را زیباتر کنیم:

button {
font-family: "helvetica neue", helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
border: 2px solid rgb(200 200 0 / 60%);
background-color: rgb(0 217 217 / 60%);
color: rgb(100 0 0 / 100%);
box-shadow: 1px 1px 2px rgb(0 0 200 / 40%);
border-radius: 10px;
padding: 3px 10px;
cursor: pointer;
}

و در نهایت، با جاوااسکریپت رفتاری پویا به آن اضافه کنیم:

const button = document.querySelector("button");
button.addEventListener("click", updateName);

function updateName() {
const name = prompt("نام جدیدی وارد کنید");
button.textContent = `بازیکن ۱: ${name}`;
}

پس جاوااسکریپت واقعاً چه کاری می‌تواند انجام دهد؟

زبان جاوااسکریپت سمت کاربر شامل برخی ویژگی‌های برنامه‌نویسی متداول است که به شما امکان می‌دهد کارهایی مانند زیر را انجام دهید:

• ذخیره مقادیر مفید در متغیرها. به عنوان مثال در کد بالا، از کاربر درخواست می‌شود که نام جدیدی وارد کند و سپس آن نام در متغیری به نام name ذخیره می‌شود.
• انجام عملیات بر روی رشته‌های متنی (که در برنامه‌نویسی به آن‌ها “رشته” گفته می‌شود). در مثال بالا، رشته “بازیکن ۱: ” را با متغیر name ترکیب کرده و برچسب متنی کامل را ایجاد می‌کنیم، مثل “بازیکن ۱: کریس”.
• اجرای کد در پاسخ به وقوع رویدادهایی خاص در یک صفحه وب. در مثال بالا از رویداد click برای تشخیص زمان کلیک بر روی برچسب و سپس اجرای کدی که برچسب را به‌روز می‌کند، استفاده کرده‌ایم.

و خیلی بیشتر از این‌ها!

مقاله مرتبط: جاوا اسکریپت یا پایتون: کدام برای من مناسب تر است؟

اما چیزی که حتی هیجان‌انگیزتر است، قابلیت‌هایی است که بر پایه زبان جاوااسکریپت سمت کاربر ساخته شده‌اند. اصطلاحاً به این قابلیت‌ها رابط‌های برنامه‌نویسی کاربردی (APIs) گفته می‌شود که به شما قدرت‌های اضافه‌ای برای استفاده در کد جاوااسکریپت‌تان می‌دهند.

APIها چه کار می‌کنند؟

APIs مجموعه‌های از پیش آماده‌ای از بلوک‌های کد هستند که به یک توسعه‌دهنده امکان می‌دهند برنامه‌هایی را پیاده‌سازی کند که در غیر این صورت انجام آن‌ها دشوار یا غیرممکن است. این APIها مشابه کیت‌های آماده مبلمان هستند که برای ساخت کتابخانه به جای طراحی و بریدن قطعات چوب خودتان، فقط قطعات از قبل آماده را سرهم می‌کنید.

APIها به طور کلی به دو دسته تقسیم می‌شوند:

• APIهای مرورگر که در مرورگر شما تعبیه شده‌اند و می‌توانند داده‌هایی از محیط کامپیوتر اطراف یا کارهای پیچیده مفید انجام دهند. برای مثال:
• API DOM (مدل شیء سند) به شما اجازه می‌دهد تا HTML و CSS را تغییر دهید، عناصری را اضافه یا حذف کنید، سبک‌های جدیدی به صورت پویا به صفحه اعمال کنید و غیره. هر بار که پنجره‌ای به صورت پاپ‌آپ ظاهر می‌شود یا محتوای جدیدی نمایش داده می‌شود (مثل همان دمو ساده‌ای که در بالا دیدیم)، این API در حال کار است.
• API موقعیت‌یابی جغرافیایی (Geolocation) اطلاعات جغرافیایی را بازیابی می‌کند. این همان چیزی است که به گوگل مپ امکان می‌دهد موقعیت شما را پیدا کرده و روی نقشه نشان دهد.
• APIهای Canvas و WebGL به شما اجازه می‌دهند که گرافیک‌های دو بعدی و سه بعدی متحرک ایجاد کنید. مردم با استفاده از این تکنولوژی‌های وب کارهای شگفت‌انگیزی انجام می‌دهند—به عنوان مثال می‌توانید به پروژه‌های Chrome Experiments و نمونه‌های WebGL نگاهی بیندازید.
• APIهای صوت و ویدئو مانند HTMLMediaElement و WebRTC به شما امکان می‌دهند کارهای جالبی با چندرسانه‌ای انجام دهید، مثل پخش صوت و ویدئو در یک صفحه وب، یا گرفتن ویدئو از دوربین وب و نمایش آن در کامپیوتر دیگری (دموی ساده ما به نام Snapshot را امتحان کنید تا ایده‌ای بگیرید).
• APIهای شخص ثالث به صورت پیش‌فرض در مرورگر وجود ندارند و شما معمولاً باید کد و اطلاعات آن‌ها را از جایی در وب دریافت کنید. برای مثال:
• API توییتر به شما امکان می‌دهد تا کارهایی مانند نمایش آخرین توییت‌های خود در وب‌سایتتان را انجام دهید.
• APIهای گوگل مپ و OpenStreetMap به شما اجازه می‌دهند که نقشه‌های سفارشی را در وب‌سایت خود جاسازی کنید و امکانات دیگری را نیز ارائه می‌دهند.

و بسیاری APIهای دیگر نیز در دسترس است! اما هنوز خیلی هیجان‌زده نشوید. شما نمی‌توانید پس از یک روز مطالعه جاوااسکریپت، برنامه‌هایی مانند فیسبوک، گوگل مپ، یا اینستاگرام را بسازید—چون موارد زیادی برای یادگیری وجود دارند. و به همین دلیل است که شما اینجا هستید—بیایید ادامه دهیم!

مقاله مرتبط: REST API چیست؟

جاوااسکریپت در صفحه شما چه کاری انجام می‌دهد؟

در این بخش به بررسی کد واقعی می‌پردازیم و در حالی که این کار را انجام می‌دهیم، به چگونگی عملکرد جاوااسکریپت در صفحه وب شما نگاهی می‌اندازیم.

ابتدا به طور مختصر داستان بارگذاری یک صفحه وب در مرورگر را مرور می‌کنیم (این موضوع در مقاله «CSS چگونه کار می‌کند» مطرح شده است). هنگامی که شما یک صفحه وب را در مرورگر خود بارگذاری می‌کنید، کد شما (HTML، CSS و جاوااسکریپت) در محیط اجرایی مرورگر (برگه مرورگر) اجرا می‌شود. این مانند کارخانه‌ای است که مواد اولیه (کد) را می‌گیرد و یک محصول (صفحه وب) تولید می‌کند.

یکی از استفاده‌های متداول جاوااسکریپت، تغییر پویا HTML و CSS برای به‌روزرسانی رابط کاربری است، از طریق API مدل شیء سند (Document Object Model یا همان DOM) که قبلاً به آن اشاره شد.

امنیت مرورگر

هر برگه مرورگر یک فضای جداگانه برای اجرای کد دارد (این فضاها به اصطلاح “محیط اجرایی” نامیده می‌شوند) — به این معنا که کد در هر برگه به طور کامل به صورت جداگانه اجرا می‌شود و کد یک برگه نمی‌تواند به طور مستقیم بر کد برگه دیگر یا وب‌سایت دیگر تأثیر بگذارد. این یک اقدام امنیتی خوب است — اگر اینگونه نبود، ممکن بود هکرها کدی بنویسند که اطلاعات را از دیگر وب‌سایت‌ها سرقت کنند یا کارهای مخرب دیگری انجام دهند.

ترتیب اجرای جاوااسکریپت

هنگامی که مرورگر به یک بلوک جاوااسکریپت برخورد می‌کند، معمولاً آن را به ترتیب از بالا به پایین اجرا می‌کند. این بدان معناست که باید مراقب باشید ترتیب کارها را درست بچینید.

برای مثال، بیایید به بلوک جاوااسکریپت در اولین مثال‌مان بازگردیم:

const button = document.querySelector("button");
button.addEventListener("click", updateName);

function updateName() {
const name = prompt("نام جدیدی وارد کنید");
button.textContent = `بازیکن ۱: ${name}`;
}

در اینجا، ابتدا با استفاده از document.querySelector دکمه‌ای را انتخاب کرده و سپس با استفاده از addEventListener یک شنونده رویداد به آن اضافه می‌کنیم تا زمانی که دکمه کلیک شود، کد updateName() اجرا شود. بلوک کد updateName() از کاربر یک نام جدید می‌خواهد و سپس آن نام را در متن دکمه قرار می‌دهد تا نمایش به‌روز شود.

اگر ترتیب دو خط اول کد را عوض کنید، دیگر کار نخواهد کرد — در عوض خطایی در کنسول مرورگر به شما برگردانده می‌شود که می‌گوید: Uncaught ReferenceError: Cannot access ‘button’ before initialization (به معنای اینکه شیء button هنوز مقداردهی نشده است، بنابراین نمی‌توانیم یک شنونده رویداد به آن اضافه کنیم).

توجه: روش‌هایی برای ارسال کد و داده‌ها بین وب‌سایت‌ها یا برگه‌های مختلف به صورت ایمن وجود دارد، اما این‌ها تکنیک‌های پیشرفته‌ای هستند که در این دوره به آن‌ها نخواهیم پرداخت.

کد تفسیر شده در مقابل کد کامپایل شده

ممکن است در زمینه برنامه‌نویسی اصطلاحات تفسیر شده و کامپایل شده را شنیده باشید.

در زبان‌های تفسیر شده، کد از بالا به پایین اجرا می‌شود و نتیجه اجرای کد بلافاصله برگردانده می‌شود. شما نیازی به تبدیل کد به فرم دیگری قبل از اجرای آن در مرورگر ندارید. کد به صورت متنی قابل خواندن برای برنامه‌نویس دریافت شده و به‌طور مستقیم پردازش می‌شود.

از سوی دیگر، زبان‌های کامپایل شده قبل از اجرا به فرم دیگری (کامپایل) می‌شوند. برای مثال، زبان‌های C/C++ به کد ماشین کامپایل می‌شوند و سپس توسط کامپیوتر اجرا می‌شوند. برنامه از فرم دودویی که از کد اصلی منبع تولید شده است، اجرا می‌شود.

مقاله مرتبط: تفاوت کامپایلر (compiler) با مفسر (interpreter)

جاوااسکریپت یک زبان برنامه‌نویسی تفسیر شده سبک‌وزن است. مرورگر، کد جاوااسکریپت را در فرم متنی اصلی دریافت کرده و آن را اجرا می‌کند.

از لحاظ فنی، بیشتر مفسرهای مدرن جاوااسکریپت از تکنیکی به نام کامپایل همزمان با اجرا (Just-In-Time Compilation) برای بهبود کارایی استفاده می‌کنند؛ کد جاوااسکریپت در حین استفاده به یک فرمت دودویی سریع‌تر کامپایل می‌شود تا بتواند با سرعت بیشتری اجرا شود. با این حال، جاوااسکریپت همچنان به عنوان یک زبان تفسیر شده در نظر گرفته می‌شود، زیرا کامپایل در زمان اجرا انجام می‌شود، نه قبل از آن.

هر دو نوع زبان مزایا و معایب خود را دارند، اما ما در اینجا به بررسی آن‌ها نمی‌پردازیم.

کد سمت سرور در مقابل کد سمت کاربر

همچنین ممکن است اصطلاحات کد سمت سرور و کد سمت کاربر را شنیده باشید، به ویژه در زمینه توسعه وب.

کد سمت کاربر کدی است که بر روی کامپیوتر کاربر اجرا می‌شود—زمانی که یک صفحه وب را مشاهده می‌کنید، کد سمت کاربر آن صفحه دانلود شده و در مرورگر شما اجرا و نمایش داده می‌شود. در این دوره ما به طور خاص در مورد جاوااسکریپت سمت کاربر صحبت می‌کنیم.

کد سمت سرور در سرور اجرا می‌شود و سپس نتایج آن دانلود و در مرورگر نمایش داده می‌شود. نمونه‌های محبوب زبان‌های سمت سرور شامل PHP، Python، Ruby، ASP.NET و حتی جاوااسکریپت است! جاوااسکریپت می‌تواند به عنوان یک زبان سمت سرور نیز استفاده شود، برای مثال در محیط محبوب Node.js — شما می‌توانید اطلاعات بیشتری در مورد جاوااسکریپت سمت سرور در موضوع برنامه‌نویسی سمت سرور – وب‌سایت‌های پویا ما پیدا کنید.

کد پویا در مقابل کد ایستا

اصطلاح پویا برای توصیف جاوااسکریپت سمت کاربر و زبان‌های سمت سرور استفاده می‌شود — این اصطلاح به توانایی به‌روزرسانی نمایش یک صفحه وب/اپلیکیشن اشاره دارد تا چیزهای متفاوتی را در شرایط مختلف نشان دهد، و محتویات جدید را در صورت نیاز تولید کند.

کد سمت سرور به صورت پویا محتویات جدیدی را در سرور تولید می‌کند، مثلاً داده‌ها را از یک پایگاه داده می‌کشد، در حالی که جاوااسکریپت سمت کاربر به صورت پویا محتویات جدیدی را در مرورگر بر روی کامپیوتر کاربر تولید می‌کند، مثلاً یک جدول HTML جدید ایجاد کرده، آن را با داده‌هایی که از سرور درخواست شده پر می‌کند و سپس جدول را در صفحه وب نمایش می‌دهد. مفهوم پویا در این دو زمینه کمی متفاوت است اما مرتبط و معمولاً هر دو رویکرد (سمت سرور و سمت کاربر) با هم کار می‌کنند.

یک صفحه وب که هیچ محتوای پویایی ندارد به عنوان ایستا شناخته می‌شود—فقط همان محتوا را همیشه نشان می‌دهد.

چگونه جاوااسکریپت را به صفحه خود اضافه می‌کنید؟

جاوااسکریپت به همان روشی که CSS به صفحه HTML اعمال می‌شود، به آن اضافه می‌شود. در حالی که CSS از عناصر <link> برای اعمال استایل‌های خارجی و از عناصر <style> برای اعمال استایل‌های داخلی به HTML استفاده می‌کند، جاوااسکریپت فقط به یک دوست در دنیای HTML نیاز دارد — عنصر <script>. بیایید نحوه عملکرد آن را یاد بگیریم.

جاوااسکریپت داخلی

۱. ابتدا یک نسخه محلی از فایل مثال ما apply-javascript.html بسازید. آن را در پوشه‌ای مناسب ذخیره کنید.

۲. فایل را در مرورگر وب و ویرایشگر متن خود باز کنید. خواهید دید که HTML یک صفحه وب ساده ایجاد می‌کند که دارای یک دکمه قابل کلیک است.

۳. حالا به ویرایشگر متن خود بروید و کد زیر را در پایین قسمت <body>، درست قبل از بسته شدن تگ </body> اضافه کنید:

<script>
// جاوااسکریپت اینجا اضافه می‌شود
</script>

۴. توجه داشته باشید که کد موجود در اسناد وب شما به طور کلی به ترتیب ظاهر شدن در صفحه بارگذاری و اجرا می‌شود. با قرار دادن جاوااسکریپت در انتها، اطمینان حاصل می‌کنیم که تمام عناصر HTML بارگذاری شده‌اند. (همچنین به بخش استراتژی‌های بارگذاری اسکریپت در ادامه مراجعه کنید.)

۵. حالا مقداری جاوااسکریپت داخل عنصر <script> خود اضافه می‌کنیم تا صفحه کار جالب‌تری انجام دهد — کد زیر را درست زیر خط «// جاوااسکریپت اینجا اضافه می‌شود» اضافه کنید:

function createParagraph() {
const para = document.createElement("p");
para.textContent = "شما روی دکمه کلیک کردید!";
document.body.appendChild(para);
}

const buttons = document.querySelectorAll("button");

for (const button of buttons) {
button.addEventListener("click", createParagraph);
}

۶. فایل خود را ذخیره کرده و مرورگر را به‌روزرسانی کنید—حالا باید ببینید که وقتی روی دکمه کلیک می‌کنید، یک پاراگراف جدید تولید شده و در پایین صفحه قرار می‌گیرد.

جاوااسکریپت خارجی

این روش عالی است، اما اگر بخواهیم جاوااسکریپت خود را در یک فایل خارجی قرار دهیم چه؟ حالا این موضوع را بررسی می‌کنیم.

۱. ابتدا، یک فایل جدید در همان دایرکتوری که فایل HTML نمونه شما وجود دارد، ایجاد کنید. نام آن را script.js بگذارید — مطمئن شوید که این فایل پسوند .js دارد، زیرا این نحوه تشخیص فایل به عنوان جاوااسکریپت است.

۲. عنصر <script> خود را که در انتهای تگ <body> قرار داده‌اید حذف کنید و کد زیر را درست قبل از تگ بسته شدن <head> اضافه کنید (به این ترتیب مرورگر می‌تواند فایل را زودتر از زمانی که در پایین صفحه قرار می‌گیرد، بارگذاری کند):

<script type="module" src="script.js"></script>

۳. داخل فایل script.js، کد زیر را اضافه کنید:

function createParagraph() {
const para = document.createElement("p");
para.textContent = "شما روی دکمه کلیک کردید!";
document.body.appendChild(para);
}

const buttons = document.querySelectorAll("button");

for (const button of buttons) {
button.addEventListener("click", createParagraph);
}

۴. فایل خود را ذخیره کرده و مرورگر را به‌روزرسانی کنید. خواهید دید که کلیک بر روی دکمه هیچ اثری ندارد، و اگر کنسول مرورگر خود را بررسی کنید، خطایی مانند “Cross-origin request blocked” دریافت می‌کنید. این به این دلیل است که مانند بسیاری از منابع خارجی، ماژول‌های جاوااسکریپت باید از همان مبدأ که HTML بارگذاری شده، لود شوند و آدرس‌های فایل file:// برای این کار مجاز نیستند. دو راه حل برای این مشکل وجود دارد:

• راه حل توصیه‌شده ما این است که دستورالعملی برای تنظیم یک سرور محلی دنبال کنید. با اجرای برنامه سرور و سرویس‌دهی فایل‌های apply-javascript-external.html و script.js در پورت ۸۰۰۰، مرورگر خود را باز کرده و به آدرس http://localhost:8000 بروید.
• اگر نمی‌توانید سرور محلی اجرا کنید، می‌توانید از <script defer src="script.js"></script> به جای <script type="module" src="script.js"></script> استفاده کنید. برای اطلاعات بیشتر به بخش استراتژی‌های بارگذاری اسکریپت در زیر مراجعه کنید. اما توجه داشته باشید که ممکن است ویژگی‌هایی که در بخش‌های دیگر آموزش استفاده می‌کنیم، نیاز به یک سرور HTTP محلی داشته باشند.

۵. حالا وب‌سایت درست مانند قبل کار می‌کند، اما این بار کد جاوااسکریپت ما در یک فایل خارجی قرار گرفته است. این معمولاً از نظر سازماندهی کد و قابل استفاده مجدد بودن آن در چندین فایل HTML ایده خوبی است. همچنین، HTML بدون وجود تکه‌های بزرگ کد در آن خواناتر می‌شود.

دستورات جاوااسکریپت داخلی

توجه داشته باشید که گاهی اوقات ممکن است با تکه‌هایی از کد جاوااسکریپت واقعی درون HTML مواجه شوید. ممکن است چیزی شبیه به این ببینید:

<button onclick="createParagraph()">روی من کلیک کنید!</button>

می‌توانید این نسخه از دمو ما را در زیر امتحان کنید.

این دمو دقیقاً همان عملکردی را دارد که در دو بخش قبلی دیدیم، به جز اینکه عنصر <button> شامل یک پردازشگر onclick داخلی است که وقتی دکمه فشرده می‌شود، تابع اجرا شود.

اما لطفاً این کار را انجام ندهید. قرار دادن کد جاوااسکریپت در HTML روش بدی است و ناکارآمد است — شما باید برای هر دکمه‌ای که می‌خواهید جاوااسکریپت به آن اعمال شود، ویژگی onclick="createParagraph()" را اضافه کنید.

استفاده از addEventListener به جای آن

در عوض، جاوااسکریپت خود را به صورت کاملاً جدا از HTML بنویسید. تابع querySelectorAll() به شما این امکان را می‌دهد که تمام دکمه‌های یک صفحه را انتخاب کنید. سپس می‌توانید به حلقه‌ای از دکمه‌ها پردازشگر رویداد اضافه کنید تا با استفاده از addEventListener() این کار انجام شود. کد مربوط به این روش به صورت زیر است:

const buttons = document.querySelectorAll("button");

for (const button of buttons) {
button.addEventListener("click", createParagraph);
}

این ممکن است کمی طولانی‌تر از استفاده از ویژگی onclick باشد، اما برای تمام دکمه‌ها — مهم نیست چند تا روی صفحه وجود دارند یا اضافه و حذف می‌شوند — کار خواهد کرد. نیازی به تغییر در جاوااسکریپت نیست.

استراتژی‌های بارگذاری اسکریپت

تمام HTML موجود در یک صفحه به ترتیبی که ظاهر می‌شود، بارگذاری می‌شود. اگر از جاوااسکریپت برای دستکاری عناصر در صفحه (یا به طور دقیق‌تر، مدل شیء سند یا DOM) استفاده می‌کنید، کد شما کار نخواهد کرد اگر جاوااسکریپت قبل از HTML مربوطه که قصد دارید با آن کار کنید، بارگذاری و تجزیه شود.

چند استراتژی برای اطمینان از اجرای جاوااسکریپت پس از تجزیه شدن HTML وجود دارد:

• در مثال جاوااسکریپت داخلی بالا، عنصر <script> در انتهای بدنه سند قرار داده شده و بنابراین تنها پس از اینکه تمام بدنه HTML تجزیه شد، اجرا می‌شود.
• در مثال جاوااسکریپت خارجی بالا، عنصر <script> در بخش <head> سند قبل از تجزیه بدنه HTML قرار گرفته است. اما از آنجایی که ما از type="module" استفاده می‌کنیم، کد به عنوان یک ماژول در نظر گرفته می‌شود و مرورگر تا زمانی که تمام HTML پردازش نشده باشد، اجرای ماژول‌های جاوااسکریپت را به تأخیر می‌اندازد. (همچنین می‌توانید اسکریپت‌های خارجی را در انتهای بدنه قرار دهید. اما اگر HTML زیادی وجود داشته باشد و شبکه کند باشد، ممکن است زمان زیادی طول بکشد تا مرورگر شروع به بارگذاری اسکریپت کند، بنابراین معمولاً بهتر است که اسکریپت‌های خارجی در بخش head قرار گیرند.)
• اگر همچنان بخواهید اسکریپت‌های غیر ماژول را در head سند قرار دهید، که ممکن است باعث مسدود شدن کل صفحه و ایجاد خطا شود، زیرا قبل از تجزیه HTML اجرا می‌شوند:
• برای اسکریپت‌های خارجی، باید ویژگی defer (یا اگر نیازی به آماده بودن HTML ندارید، async) را به عنصر <script> اضافه کنید.
• برای اسکریپت‌های داخلی، باید کد را داخل یک رویداد DOMContentLoaded قرار دهید.

این موضوع فراتر از محدوده این آموزش است، اما مگر اینکه نیاز به پشتیبانی از مرورگرهای بسیار قدیمی داشته باشید، نیازی نیست نگران این باشید و می‌توانید به سادگی از <script type="module"> استفاده کنید.

نظرات (کامنت‌ها)

همانند HTML و CSS، امکان نوشتن نظرات در کد جاوااسکریپت وجود دارد که توسط مرورگر نادیده گرفته می‌شود و به عنوان دستورالعمل‌هایی برای دیگر توسعه‌دهندگان (و حتی خودتان، اگر بعد از چند ماه به کدتان بازگردید و فراموش کرده باشید چه کاری انجام داده‌اید) عمل می‌کند. نظرات بسیار مفید هستند و باید از آن‌ها به وفور استفاده کنید، به خصوص در پروژه‌های بزرگ. دو نوع نظر وجود دارد:

• یک نظر تک‌خطی با استفاده از دو اسلش (//) نوشته می‌شود، به این شکل:

// من یک کامنت هستم

• یک نظر چندخطی بین دو رشته /* و */ نوشته می‌شود، به این شکل:

/*
من نیز یک
کامنت هستم
*/

برای مثال، می‌توانیم کد جاوااسکریپت آخرین دموی خود را با کامنت مانند زیر توضیح نویسی کنیم:

// تابع: یک پاراگراف جدید ایجاد کرده و آن را به انتهای بدنه HTML اضافه می‌کند.
function createParagraph() {
const para = document.createElement("p");
para.textContent = "شما روی دکمه کلیک کردید!";
document.body.appendChild(para);
}

/*
1. دسترسی به همه دکمه‌های صفحه در قالب یک آرایه.
2. حلقه‌ای از دکمه‌ها اجرا کرده و به هر یک از آن‌ها یک رویداد کلیک اضافه کنید.
هر دکمه‌ای که کلیک شود، تابع createParagraph() اجرا خواهد شد.
*/
const buttons = document.querySelectorAll("button");

for (const button of buttons) {
button.addEventListener("click", createParagraph);
}

توجه: به طور کلی، معمولاً کامنت بیشتر، بهتر است، اما اگر متوجه شدید که برای توضیح اینکه متغیرها چه هستند دارید زیادی کامنت می نویسید، شاید باید نام متغیرهایتان را توصیفی تر کنید، یا اگر دیدید که برای توضیح عملیات‌های بسیار ساده مجبورید کامنت های زیادی بنویسید، شاید کد شما بیش از حد پیچیده شده است و باید مراقب این موضوع باشید.