مقدمه
این مقاله مروری جامع درباره افزودن JavaScript به فایل‌های HTML شما فراهم می‌کند؛ با جزئیات سه روش اصلی: قرار دادن اسکریپت‌های درون‌خطی (Inline) در <head>، درون‌خطی در <body> و لینک کردن به فایل‌های خارجی .js. فراتر از «چگونه»، این مقاله به «چرا»ی حیاتی هم می‌پردازد و پیامدهای عملکردی قابل توجه هر رویکرد را توضیح می‌دهد؛ شامل مفاهیمی مانند Render-Blocking، کش مرورگر و استفاده از ویژگی‌های مدرن مثل defer و async.
برای پل زدن بین تئوری و عمل، آموزش شامل مثال‌های عملی و واقعی مانند ساخت تاگل حالت تاریک و اعتبارسنجی فرم وب است. در نهایت، بهترین روش‌های ضروری برای نوشتن کد تمیز و قابل نگهداری و راهنمای عیب‌یابی برای حل خطاهای رایج مبتدیان با استفاده از کنسول توسعه‌دهنده مرورگر به شما مجهز می‌کند؛ تا مطمئن باشید می‌توانید پروژه‌های توسعه وب خودتان را با اطمینان شروع کنید.
نیاز به دیپلوی سریع پروژه JavaScript دارید؟ پلتفرم اپ پارمین کلود را ببینید و پروژه JS را مستقیماً از گیت‌هاب در چند دقیقه دیپلوی کنید.
نکات کلیدی
- بهترین روش برای افزودن JavaScript، استفاده از فایل خارجی .js برای سازمان‌دهی، نگهداری و قابلیت استفاده مجدد بهتر است.
- قرار دادن تگ‌های
<script>در<head>برای عملکرد بدترین حالت است؛ چون Render-Blocking است و کاربران را وادار به دیدن صفحه خالی می‌کند. - استفاده از ویژگی
deferروی اسکریپت‌های خارجی، رویکرد مدرن توصیه‌شده برای عملکرد بهینه است. - فایل‌های JavaScript خارجی، جهش عملکردی قابل توجهی از طریق کش مرورگر فراهم می‌کنند؛ که اسکریپت‌های درون‌خطی ندارند.
- یک فایل .js منفرد را می‌توان بین چندین صفحه لینک کرد؛ که به‌روزرسانی و نگهداری را بسیار کارآمدتر می‌سازد.
- کنسول توسعه‌دهنده (F12) مهم‌ترین ابزار برای عیب‌یابی خطاهای رایج JavaScript است.
روش ۱: نحوه افزودن اسکریپت درون‌خطی به head
می‌توانید کد JavaScript را در سند HTML با استفاده از تگ اختصاصی HTML یعنی <script> که دور کد JavaScript می‌پیچد، اضافه کنید. تگ <script> را می‌توان در بخش <head> سند HTML یا بخش <body> قرار داد؛ بسته به اینکه بخواهید JavaScript کِی بارگذاری شود.
معمولاً، کد JavaScript می‌تواند داخل بخش <head> سند قرار گیرد تا مهارشده و خارج از محتوای اصلی سند HTML شما بماند.
بیایید سند HTML پایه زیر با عنوان مرورگریِ Today’s Date را در نظر بگیریم:
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>
</html>برای افزودن اسکریپتی که هشداری می‌سازد، می‌توانیم تگ <script> و کد JavaScript خودمان را زیر تگ <title> اضافه کنیم؛ مثل زیر:
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<script>
let d = new Date();
alert("Today's date is " + d);
</script>
</head>
<body>
</body>
</html>قرار دادن اسکریپت اینجا به مرورگر علامت می‌دهد که JavaScript را قبل از شروع رندر محتوا در <body> صفحه، پارس و اجرا کند.
این رویکرد برای اسکریپت‌هایی که نیازی به تعامل مستقیم با عناصر روی صفحه ندارند مناسب‌ترین است. وقتی اسکریپتی در <head> اجرا می‌شود، مرورگر هنوز مدل شیء سند (DOM) برای <body> را نساخته است. یعنی هیچ عنصر HTMLای مثل سرفصل‌ها، پاراگراف‌ها یا divها هنوز وجود ندارند. در نتیجه، کدی که سعی می‌کند این عناصر را پیدا یا تغییر دهد (مثلاً با استفاده از document.getElementById()) شکست می‌خورد. این روش بنابراین برای راه‌اندازی توابع و متغیرها برای استفاده بعدی، یا برای شامل کردن اسکریپت‌های تحلیلِ شخص ثالثی که باید تا جای ممکن زود بارگذاری شوند، ایده‌آل است.
وقتی صفحه را بارگذاری کنید، هشداری شبیه این دریافت می‌کنید:
روش ۲: نحوه افزودن اسکریپت درون‌خطی به body
تگ <script> را می‌توان در بخش <body> هم قرار داد. وقتی اسکریپتی اینجا قرار می‌گیرد، پارسر HTML کارش را برای اجرای اسکریپت در نقطه دقیق ظاهرشدنش در سند متوقف می‌کند. این روش لازم برای هر کد JavaScriptای است که باید فوراً عنصر HTMLای را پیدا و تغییر دهد.
یک روش رایجِ خوب، قرار دادن اسکریپت‌ها درست قبل از تگ بستن </body> است. این جای‌گذاری تضمین می‌کند همه عناصر HTML روی صفحه قبل از شروع اجرای اسکریپت، پارس و در DOM موجود شده باشند. هم‌چنین عملکرد ادراکی صفحه را بهبود می‌بخشد؛ چون مرورگر می‌تواند اول همه متن‌ها و تصاویر قابل‌مشاهده را رندر کند؛ که به کاربر اجازه می‌دهد محتوای صفحه را قبل از اجرای JavaScriptِ بالقوه زمان‌بر ببیند. این به محتوا اجازه می‌دهد بدون بلاک شدن توسط اجرای JavaScript نمایش یابد.
بیایید از این روش برای نوشتن مستقیم تاریخ در بدنه HTML استفاده کنیم.
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
</script>
</body>
</html>خروجی سند HTML بالا که از طریق مرورگر وب بارگذاری شده، شبیه زیر است:
اسکریپت‌هایی که کوچک‌اند یا فقط روی یک صفحه اجرا می‌شوند، می‌توانند داخل فایل HTML خوب کار کنند؛ اما برای اسکریپت‌های بزرگ‌تر یا اسکریپت‌هایی که روی بسیاری از صفحات استفاده می‌شوند، راه‌حل خیلی مؤثری نیست؛ چون شامل کردن‌شان می‌تواند حجیم یا دشوار برای خواندن و فهم شود. در بخش بعدی، نحوه کار با فایل JavaScript جداگانه در سند HTML خودتان را مرور می‌کنیم.
روش ۳: نحوه کار با فایل JavaScript جداگانه
برای اسکریپت‌های بزرگ‌تر یا کدهایی که باید بین چندین صفحه استفاده شوند، مؤثرترین و حرفه‌ای‌ترین راه‌حل، قرار دادن JavaScript در فایل جداگانه‌ای با پسوند .js است. سپس می‌توانید به این فایل خارجی از HTML خودتان با تگ <script> و ویژگی src (مبدأ) لینک کنید.
مزایای این رویکرد قابل توجه است:
- جداسازی دغدغه‌ها (Separation of Concerns): HTML را برای ساختار، CSS را برای استایل و JavaScript را برای تعاملی‌بودن در فایل‌های جدا نگه می‌دارد. این پروژه‌تان را تمیزتر، سازمان‌یافته‌تر و راحت‌تر برای دیباگ می‌کند.
- قابلیت استفاده مجدد و نگهداری: یک فایل اسکریپت منفرد، مثل main-navigation.js، می‌تواند از هر صفحه وب‌سایت‌تان لینک شود. اگر لازم باشد منطق ناوبری را به‌روزرسانی کنید، فقط باید آن یک فایل را ویرایش کنید.
- کش مرورگر: وقتی کاربر برای اولین بار سایت شما را بازدید می‌کند، مرورگرش فایل .js را دانلود می‌کند. در بازدیدهای بعدی یا هنگام ناوبری به صفحات دیگر که همان فایل را استفاده می‌کنند، مرورگر از نسخه ذخیره‌شده (کش‌شده)اش به‌جای دانلود مجدد استفاده می‌کند. این زمان‌های بارگذاری را به‌طور چشمگیری بهبود می‌بخشد.
برای نمایش نحوه اتصال سند JavaScript به سند HTML، بیایید پروژه وب کوچکی بسازیم. شامل script.js در دایرکتوری js/، style.css در دایرکتوری css/ و index.html اصلی در ریشه پروژه خواهد بود:
project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.htmlبیایید کد JavaScript خودمان که تاریخ را به‌عنوان سرفصل <h1> نشان می‌دهد به فایل script.js منتقل کنیم:
script.js
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"بعد، بیایید فایل style.css را هم با افزودن رنگ پس‌زمینه و استایل به سرفصل <h1> ویرایش کنیم:
style.css
body {
background-color: #0080ff;
}
h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}در نهایت، می‌توانیم هم به اسکریپت و هم به استایل‌شیت از فایل index.html خودمان ارجاع دهیم. از تگ <link> در <head> برای CSS و تگ <script> با ویژگی src در <body> برای JavaScript استفاده می‌کنیم.
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>حالا، با جای‌گذاری JavaScript و CSS، پروژه‌مان بسیار سازمان‌یافته‌تر است. وقتی صفحه index.html را در مرورگر وب بارگذاری می‌کنیم، باید صفحه استایل‌شده‌ای با تاریخ جاری ببینیم که شبیه زیر است:
حالا که JavaScript را در فایلی قرار دادیم، می‌توانیم به همان شکل از صفحات وب اضافی صدایش کنیم و همه را در یک مکان به‌روزرسانی نماییم. این روش سازمان‌یافته‌ترین و مقیاس‌پذیرترین راه برای مدیریت JavaScript در پروژه‌های وب شماست. برای کنترل بیشتر بر نحوه بارگذاری اسکریپت‌های خارجی، می‌توانید استفاده از ویژگی‌های async و defer روی تگ <script> را بررسی کنید.
مثال‌های دنیای واقعی چیستند؟
بیایید به چند نمونه واقعی بر اساس چیزهایی که تا حالا یاد گرفتیم نگاه کنیم.
۱. تاگل ساده حالت تاریک
تقریباً هر وب‌سایت یا اپ مدرنی حالت تاریک (Dark Mode) ارائه می‌دهد. این را می‌توان با تاگل کردن کلاس CSS با JavaScript به دست آورد.
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dark Mode</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button id="theme-toggle">Toggle Dark Mode</button>
<h1 id="title">Parmin Cloud</h1>
<p>This is some example text on the page.</p>
<script src="js/script.js"></script>
</body>
</html>CSS:
/* این کلاس توسط JavaScript اضافه یا حذف می‌شود */
.dark-mode {
background-color: #222;
color: #eee;
}JavaScript:
const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
});JavaScript اول دکمه را با شناسه‌اش پیدا می‌کند. سپس گوش‌دهنده رویدادی (Event Listener) وصل می‌کند که منتظر کلیک می‌ماند. وقتی دکمه کلیک شد، دستور classList.toggle('dark-mode') اجرا می‌شود. اگر عنصر <body> کلاس .dark-mode را نداشته باشد، JavaScript اضافه‌اش می‌کند. اگر از قبل داشته باشد، JavaScript حذفش می‌کند. مرورگر فوراً استایل‌های CSS مرتبط با آن کلاس را اعمال می‌کند.
۲. اعتبارسنجی پایه فرم
وب‌سایت‌ها باید مطمئن شوند کاربران فرم‌ها را درست پر می‌کنند قبل از اینکه قابل ارسال باشند. JavaScript می‌تواند این را بدون ریلود صفحه، فوراً چک کند.
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Validator</title>
</head>
<body>
<form id="contact-form">
<label for="email">Email:</label>
<input type="text" id="email" placeholder="you@example.com">
<button type="submit">Subscribe</button>
<p id="error-message" style="color: red;"></p>
</form>
<script src="js/script.js"></script>
</body>
</html>JavaScript:
const contactForm = document.getElementById('contact-form');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');
contactForm.addEventListener('submit', function(event) {
if (!emailInput.value.includes('@')) {
event.preventDefault();
errorMessage.textContent = 'Please enter a valid email address.';
} else {
errorMessage.textContent = '';
}
});اسکریپت به رویداد submit روی فرم گوش می‌دهد. وقتی دکمه «Subscribe» را کلیک می‌کنید، تابع اجرا می‌شود. اول چک می‌کند که متن داخل ورودی ایمیل شامل نماد @ هست یا نه.
- اگر نباشد،
event.preventDefault()رفتار پیش‌فرض ارسال فرم را متوقف می‌کند. سپس پیام خطای مفیدی به کاربر نمایش می‌دهد. - اگر باشد، اسکریپت کاری نمی‌کند و فرم طبق معمول ارسال می‌شود.
ملاحظات عملکردی هر روش چیست؟
بیایید ملاحظات کلیدی عملکرد برای هر یک از روش‌های بارگذاری JavaScript بحث‌شده را مرور کنیم:
اسکریپت درون‌خطی در head
مسئله اصلی: Render-Blocking (بلاک‌کننده رندر)
قرار دادن اسکریپت در <head> منفی‌ترین اثر را بر عملکرد دارد. مرورگر باید JavaScript را قبل از اینکه بتواند به رندر هر بخشی از <body> صفحه بپردازد، دانلود، پارس و اجرا کند. اگر اسکریپت‌تان بزرگ است یا کند اجرا می‌شود، کاربر به صفحه سفید خالی خیره می‌ماند تا اسکریپت تمام شود. این زمان تا اولین رندر محتوا (FCP) را افزایش می‌دهد؛ متریک تجربه کاربری حیاتی‌ای.
کش: هیچ
اسکریپت‌های درون‌خطی بخشی از خود سند HTML هستند. نمی‌توانند جداگانه توسط مرورگر کش شوند. هر بار که کاربر صفحه را بازدید می‌کند، اسکریپت همراه بقیه HTML دوباره دانلود و پارس می‌شود.
این روش عموماً برای عملکرد بدترین است و باید از آن اجتناب شود؛ مگر اینکه اسکریپت فوق‌العاده کوچک باشد و مطلقاً باید قبل از هر چیز دیگری اجرا شود.
اسکریپت درون‌خطی در body
مسئله اصلی: Render-Blocking جزئی
این روش بهبود بزرگی نسبت به قرار دادن اسکریپت در <head> است. مرورگر HTML را تا وقتی به تگ <script> برسد پارس و رندر می‌کند. در آن نقطه، رندر را برای اجرای اسکریپت متوقف می‌کند. با قرار دادن اسکریپت در انتهای <body> (درست قبل از تگ </body>)، اجازه می‌دهید کل صفحه قابل‌مشاهده اول رندر شود.
کش: هیچ
مثل اسکریپت‌های <head>، اسکریپت‌های درون‌خطی در <body> بخشی از HTML هستند و نمی‌توانند مستقل کش شوند.
قرار دادن اسکریپت در انتهای body، استراتژی خوبی برای بهبود ادراک سرعت است؛ چون محتوا سریع مرئی می‌شود. اما همچنان می‌تواند کامل تعاملی شدن صفحه را به تأخیر بیندازد.
فایل JavaScript خارجی
این روش بیشترین انعطاف و بهترین عملکرد را فراهم می‌کند؛ عمدتاً به‌دلیل دو عامل: کش مرورگر و ویژگی‌های بارگذاری خاص.
مزیت اصلی: کش و بارگذاری غیرهمگام
- کش: این بزرگ‌ترین برد عملکردی است. فایل .js خارجی در اولین بازدید یک‌بار دانلود می‌شود. برای همه صفحات بعدی که همان اسکریپت را استفاده می‌کنند، مرورگر فایل را از کش محلی‌اش بارگذاری می‌کند؛ که تأخیر شبکه را حذف و سایت را به‌طور قابل توجهی سریع می‌کند.
- ویژگی‌های defer و async: اسکریپت‌های خارجی استفاده از دو ویژگی قدرتمند را باز می‌کنند:
<script defer src="..."></script>: این به مرورگر می‌گوید اسکریپت را در پس‌زمینه دانلود کند در حالی که به پارس HTML ادامه می‌دهد. اسکریپت فقط بعد از پارس کامل سند اجرا می‌شود. این رویکرد مدرنِ توصیه‌شده است؛ چون غیربلاک‌کننده است و تضمین می‌کند اسکریپت به ترتیبی که در HTML ظاهر شده اجرا شود.<script async src="..."></script>: این هم اسکریپت را بدون بلاک کردن رندر در پس‌زمینه دانلود می‌کند. اما اسکریپت را به‌محض تمام شدن دانلود اجرا می‌کند؛ که هر زمانی می‌تواند اتفاق بیفتد و ممکن است رندر را قطع کند. برای اسکریپت‌های مستقلِ شخص ثالث (مثل تبلیغات یا تحلیل) بهترین است؛ جایی که ترتیب اجرا مهم نیست.
استفاده از فایل خارجیِ لینک‌شده با ویژگی defer بهترین روش برای عملکرد بهینه است. این، مزایای بارگذاری غیربلاک‌کننده را با کش قدرتمند مرورگر ترکیب می‌کند.
بهترین روش‌ها چیستند؟
اینجا برخی بهترین روش‌ها و نکات عیب‌یابی ضروری برای کار با JavaScript در فایل‌های HTML شما هست:
- JavaScript را در فایل‌های خارجی نگه دارید: همیشه لینک به فایل .js (
<script src="..."></script>) را به‌جای نوشتن مستقیم JavaScript در HTML ترجیح دهید. این کدتان را سازمان‌یافته، نگهداری‌اش را آسان‌تر و اجازه کش فایل توسط مرورگر برای بارگذاری سریع‌تر را می‌دهد. - اسکریپت‌ها را در انتهای body با defer بارگذاری کنید: برای بهترین تجربه کاربری، تگ‌های
<script>خود را درست قبل از تگ بستن</body>قرار و ویژگیdeferرا اضافه کنید. این تضمین می‌کند محتوای صفحه‌تان بدون بلاک شدن توسط JavaScript سریع بارگذاری و نمایش یابد. - کد خوانا بنویسید: از نام‌های شفاف و توصیفی برای متغیرها و توابع‌تان استفاده کنید (مثلاً calculateTotalPrice به‌جای calc). از کامنت‌های
//برای توضیح اینکه چرا تکه کدی را نوشته‌اید استفاده کنید؛ نه اینکه چه می‌کند. - خودت را تکرار نکن (DRY): اگر دیدید همان خطوط کد را در چندین جای مختلف می‌نویسید، آن کد را در تابعی بپیچید. سپس هر وقت لازم داشتید می‌توانید آن تابع را صدا بزنید؛ که کدتان را کوتاه‌تر و به‌روزرسانی‌اش را آسان‌تر می‌کند.
مسائل رایج چیستند و چطور عیب‌یابی‌شان کنیم؟
وقتی اسکریپت‌تان کار نمی‌کند، نترسید! ابزارهای توسعه‌دهنده مرورگر بهترین دوست شما هستند. F12 را فشار دهید (یا روی صفحه راست-کلیک و «Inspect» را انتخاب کنید) و روی تب «Console» کلیک کنید. بیشتر خطاها اینجا با رنگ قرمز ظاهر می‌شوند.
خطا: «Cannot read properties of null» یا «is not defined»
- معنی: JavaScript شما سعی کرده به عنصر HTMLای دسترسی پیدا کند که هنوز بارگذاری نشده.
- راه‌حل: این تقریباً همیشه یعنی تگ
<script>شما در<head>است یا خیلی بالای<body>. اسکریپت را به پایین<body>منتقل و ویژگیdeferرا اضافه کنید.
خطا: «Uncaught SyntaxError»
- معنی: در کدتان غلط تایپی دارید.
- راه‌حل: کنسول معمولاً شماره خطی می‌دهد. با دقت به آن خط برای پرانتزهای جاافتاده ()، آکولادهای {}، کوتیشن‌های “” یا غلط‌های تایپی دیگر نگاه کنید.
مشکل: اسکریپت اجرا نمی‌شود، خطایی در کنسول نیست.
- معنی: فایل HTML شما احتمالاً نمی‌تواند فایل .js شما را پیدا کند.
- راه‌حل: تب «Network» را در ابزارهای توسعه‌دهنده چک کنید. اگر فایل اسکریپت‌تان را با خطای 404 فهرست‌شده می‌بینید، مسیر فایل در ویژگی src اشتباه است. املا و ساختار پوشه را دوباره چک کنید (مثلاً
<script src="js/script.js"></script>).
مشکل: کد اجرا می‌شود اما آنچه انتظار دارم را انجام نمی‌دهد.
- معنی: این خطای منطقی است. سینتکس درست است اما مراحل غلط‌اند.
- راه‌حل: از
console.log()برای دیباگ استفاده کنید. آن را در کدتان قرار دهید تا مقادیر متغیرها را در مراحل مختلف چاپ کند. این به ردیابی منطق و دیدن دقیق جایی که اشتباه می‌شود کمک می‌کند.
let userRole = 'guest';
console.log('User role before check:', userRole); // ببین مقدار چیست
if (userIsAdmin) {
userRole = 'admin';
}سوالات متداول
۱. بهترین راه افزودن JavaScript به فایل HTML من چیست؟
بهترین راه، لینک به فایل خارجی .js با ویژگی defer و قرار دادن تگ اسکریپت درست قبل از تگ بستن </body> است (مثلاً <script src="path/to/script.js" defer></script>).
۲. آیا JavaScript را در head یا body بگذارم؟
تقریباً همیشه باید تگ‌های <script> JavaScript خود را در انتهای بخش <body>—درست قبل از تگ بستن </body>—قرار دهید.
قرار دادن اسکریپت‌ها در <head> رندر صفحه را بلاک می‌کند؛ یعنی کاربرانتان صفحه سفید خالی می‌بینند تا وقتی اسکریپت‌ها کاملاً دانلود و اجرا شوند. وقتی اسکریپت‌ها را در انتهای <body> قرار می‌دهید، مرورگر می‌تواند اول کل HTML و CSS را رندر کند؛ پس کاربران محتوای شما را خیلی سریع‌تر می‌بینند.
۳. آیا می‌توانم چند تگ اسکریپت در یک فایل HTML بگذارم؟
بله، می‌توانید هر تعداد تگ <script> که لازم دارید در فایل HTML منفردی شامل کنید. مرورگر آن‌ها را به ترتیبی که در سند ظاهر می‌شوند دانلود و اجرا می‌کند.
این معمولاً برای بارگذاری کتابخانه‌های شخص ثالث قبل از اسکریپت‌های سفارشی شما که به آن‌ها وابسته‌اند استفاده می‌شود:
<body>
<script src="library.js"></script>
<script src="my-app.js"></script>
</body>۴. تفاوت اصلی async و defer چیست؟
هر دو ویژگی اسکریپت‌ها را بدون بلاک کردن رندر صفحه بارگذاری می‌کنند. تفاوت کلیدی این است که defer تضمین می‌کند اسکریپت‌ها بعد از پارس کامل سند، به ترتیب ظاهرشدن‌شان اجرا شوند؛ در حالی که async اسکریپت را به‌محض دانلود شدن اجرا می‌کند؛ که می‌تواند با هر ترتیبی باشد.
۵. چطور JavaScriptای را که کار نمی‌کند دیباگ کنم؟
ابزارهای توسعه‌دهنده مرورگر را باز کنید (F12)، تب Console را برای پیام‌های خطا چک کنید، از تب Network برای تأیید بارگذاری فایل‌ها استفاده کنید و دستورات console.log() برای ردیابی مقادیر متغیرها اضافه نمایید.
نتیجه‌گیری
در این آموزش، سه روش اصلی افزودن JavaScript به HTML را یاد گرفتید: درون‌خطی در <head>، درون‌خطی در <body> و لینک به فایل خارجی .js. هم‌چنین پیامدهای عملکردی شامل Render-Blocking، کش مرورگر و ویژگی‌های defer و async را—به‌همراه مثال‌های واقعی و راهنمای عیب‌یابی با کنسول توسعه‌دهنده—کاوش کردید.
حالا می‌توانید استراتژی بارگذاری JavaScript درست را برای مورد استفاده‌تان انتخاب، کد تمیز و قابل نگهداری با فایل‌های خارجی بنویسید و خطاهای رایج را با ابزارهای توسعه‌دهنده مرورگر دیباگ کنید. استفاده از فایل خارجی .js با ویژگی defer، رویکرد توصیه‌شده برای بیشتر پروژه‌های وب پروداکشن است.
