کد را کجا بگذاریم
دیگر می‌دانید JavaScript به صفحه رفتار می‌دهد. سؤال بعدی عملی است: کد را کجا بگذارید تا مرورگر پیدایش کند و عنصری که می‌خواهید عوض شود، از قبل روی صفحه باشد؟
JavaScript را کجا در صفحهٔ HTML بگذاریم؟
کد را داخل تگ <script> می‌گذارید — یا همین‌جا داخل صفحه، یا با src به یک فایل .js بیرونی. برای کار روزمرهٔ مبتدی که صفحه را لمس می‌کند، اسکریپت را درست قبل از </body> بگذارید تا HTML بالای آن آماده باشد. وقتی کد بزرگ شد، همان عادت را با فایل خارجی نگه دارید (بعداً defer را هم می‌بینید).
سه انتخاب جا، یک نگاه
📊 جاهای رایج برای JavaScript
| انتخاب | کجا می‌نشیند | بهترین استفاده برای مبتدی |
|---|---|---|
| داخل head | <script> داخل <head> |
فقط راه‌اندازی خیلی کوچک؛ اگر عنصر هنوز در صفحه نیست، خطرناک است |
| انتهای body | <script> درست قبل از </body> |
پیش‌فرض دموهای کوتاه که تیتر یا متن را عوض می‌کنند |
فایل .js خارجی |
<script src="app.js"> (معمولاً انتهای body) |
وقتی منطق بزرگ شد یا چند صفحه یک فایل می‌خواهند |
اسکریپت در head (بشناسید؛ با احتیاط استفاده کنید)
اسکریپت داخل head زود اجرا می‌شود، وقتی مرورگر هنوز سند را می‌خواند. ممکن است دیدن محتوا را عقب بیندازد. اگر همان لحظه با getElementById دنبال عنصری بگردید که پایین‌تر است، هنوز وجود ندارد — نتیجه null است یا خطا می‌گیرید.
<!DOCTYPE html>
<html>
<head>
<title>Where To — Head</title>
<script>
console.log("Head script ran early");
</script>
</head>
<body>
<h1>Content comes after the head script</h1>
</body>
</html>
کی اسکریپت head بی‌اشکال است
- فقط لاگ یا مقدار ساده‌ای که به DOM نیاز ندارد
- بارگذاری کتابخانه با ویژگی‌های مدرن (بعداً
deferوasync) - برای دموی «این پاراگراف را عوض کن» در این کورس، پیش‌فرضتان نباشد
اسکریپت انتهای body (پیش‌فرض مبتدی)
اول نشانه‌گذاری‌ای را بگذارید که بازدیدکننده لازم دارد. بعد اسکریپت را اجرا کنید. عنصرهایی که id دارند و بالای اسکریپت‌اند، وقتی دستورها اجرا می‌شوند از قبل در سند هستند.
<!DOCTYPE html>
<html>
<head>
<title>Where To — Body End</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<p>HTML arrives first; then the script updates the heading.</p>
<script>
document.getElementById("title").textContent =
"Ready — script ran at the end of body";
</script>
</body>
</html>
چرا این عادت کمک می‌کند
- تیتر و پاراگراف می‌توانند قبل از کار اسکریپت دیده شوند
getElementById("title")یک گره واقعی پیدا می‌کند- دموهای کوتاه یک‌فایلی می‌مانند تا زبان را یاد بگیرید
- بعداً همان دستورها را بدون عوض کردن ایده به فایل خارجی می‌برید
فایل JavaScript خارجی (پیش‌فرض پروژه)
ساختار را در HTML نگه دارید و منطق را در app.js بگذارید. با src به فایل اشاره کنید. مسیر نسبت به فایل HTML است مگر پوشهٔ دیگری بدهید.
<!DOCTYPE html>
<html>
<head>
<title>Where To — External</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<script src="app.js"></script>
</body>
</html>
document.getElementById("title").textContent =
"Loaded from app.js";
چرا با بزرگ شدن کار، فایل خارجی می‌برد
- یک
.jsمی‌تواند چند صفحه را پوشش دهد - ویرایشگر در فایل جدا، JavaScript را بهتر رنگ‌آمیزی می‌کند
- بلوک‌های عظیم
<script>داخل نشانه‌گذاری جمع نمی‌شود - مسیر اشتباه
srcصفحه را خراب نشان نمی‌دهد، فقط هیچ‌چیز اجرا نمی‌شود — Console و Network را چک کنید
ترتیب مهم است
مرورگر از بالا به پایین می‌خواند. وقتی به اسکریپت برسد اجرا می‌کند (مگر بعداً ویژگی‌های پیشرفته بگذارید). اگر خط اول کد به #title نیاز دارد، آن عنصر باید بالای اسکریپت در HTML باشد، یا باید صبر کنید سند تمام شود. گذاشتن اسکریپت انتهای body همان راه ساده برای درست شدن ترتیب است.
خودتان امتحان کنید
- فایل
where.htmlرا با مثال انتهای body بسازید. باز کنید و ببینید تیتر عوض می‌شود. - رشتهٔ داخل
textContentرا عوض کنید، ذخیره کنید و صفحه را تازه کنید. app.jsرا با JavaScript مثال خارجی بسازید. درwhere.htmlفقط<script src="app.js"></script>را قبل از</body>بگذارید و کد داخل صفحه را بردارید.- موقتاً نام
app.jsرا عوض کنید یا مسیرsrcرا خراب کنید، تازه کنید و Console را ببینید — بعد مسیر را درست کنید. - اختیاری: همان اسکریپت را بدون
deferبه head ببرید و ببینیدgetElementByIdممکن است خطا بدهد؛ بعد برگردانید انتهای body.
اشتباهات رایج
- اسکریپت به‌روزرسانی DOM را در head گذاشتن تا
getElementByIdقبل از وجود عنصر اجرا شود <script src="app.js">با غلط املایی یا پوشهٔ اشتباه — صفحه درست به‌نظر می‌رسد اما هیچ‌چیز اجرا نمی‌شود- صدها خط را در هر HTML داخل صفحه نگه داشتن به‌جای یک
.jsمشترک - قاطی کردن این جلسه با اتصال CSS: ظاهر با
<link>/<style>است؛ رفتار با<script>
خلاصه
- JavaScript داخل
<script>زندگی می‌کند — داخل صفحه یا باsrcبه فایل.js - انتهای body برای مبتدی که عنصر صفحه را لمس می‌کند، پیش‌فرض خوب است
- اسکریپت head زود اجرا می‌شود؛ تا ویژگی بارگذاری را بلد نیستید آنجا DOM را عوض نکنید
- وقتی دمو بزرگ شد، فایل خارجی پیش‌فرض پروژه است
- ترتیب اجرا همان ترتیب سند است مگر بعداً گزینه‌های پیشرفته بگذارید
- با جدا کردن یک دموی inline کارآمد به HTML +
app.jsتمرین کنید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود