أين نضع الشيفرة
تعرف الآن أن JavaScript يضيف سلوكاً للصفحة. السؤال التالي عملي: أين تضع الشيفرة حتى يجدها المتصفح، وحتى يكون العنصر الذي تريد تغييره موجوداً مسبقاً؟
أين يجب وضع JavaScript في صفحة HTML؟
ضع JavaScript داخل عنصر <script> — إما مضمّناً بين الوسمين، أو خارجياً عبر src يشير إلى ملف .js. للعمل اليومي للمبتدئ الذي يلمس الصفحة، ضع السكربت قبل </body> مباشرة حتى يكون HTML أعلاه جاهزاً. عندما يكبر الكود، انقله إلى ملف خارجي مع الإبقاء على عادة نهاية الجسم (وستتعلم defer لاحقاً).
ثلاث خيارات للمكان بنظرة واحدة
📊 أين يمكن أن يعيش JavaScript
| الخيار | أين يقع | أفضل استخدام للمبتدئ |
|---|---|---|
| مضمّن في الرأس | <script> داخل <head> |
إعداد صغير فقط؛ خطر إن لم توجد العناصر بعد |
| مضمّن في نهاية الجسم | <script> قبل </body> مباشرة |
الافتراضي لعروض قصيرة تغيّر عنواناً أو نصاً |
ملف .js خارجي |
<script src="app.js"> (غالباً نهاية الجسم) |
الافتراضي حين يكبر المنطق أو تعيد استخدام الملف |
سكربت في الرأس (اعرفه واستخدمه بحذر)
سكربت الرأس يعمل مبكراً بينما المتصفح ما زال يقرأ المستند. قد يؤخر المحتوى المرئي. إذا بحثت فوراً عن عنصر بـ 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>
متى يكون سكربت الرأس مناسباً
- تسجيل رسالة أو قيمة بسيطة لا تحتاج DOM
- تحميل مكتبة بسمات حديثة (ستقابل
defer/asyncلاحقاً) - ليس افتراضك لعروض «غيّر هذه الفقرة» في هذه الدورة
سكربت في نهاية الجسم (افتراضي المبتدئ)
ضع أولاً الوسم الذي يحتاجه الزائر. ثم شغّل السكربت. العناصر ذات 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، أو تنتظر اكتمال المستند. وضع السكربت في نهاية الجسم هو الطريقة البسيطة لضبط الترتيب.
جرّب بنفسك
- أنشئ
where.htmlبمثال نهاية الجسم. افتحه وتأكد من تحديث العنوان. - غيّر سلسلة
textContent، احفظ، وحدّث الصفحة. - أنشئ
app.jsبشيفرة المثال الخارجي. غيّرwhere.htmlلتحميل<script src="app.js"></script>قبل</body>دون شيفرة مضمّنة. - أعد تسمية
app.jsمؤقتاً أو أكسر مسارsrc، حدّث، وراقب Console — ثم أصلح المسار. - اختياري: انقل نفس السكربت إلى الرأس (بدون
defer) ولاحظ أنgetElementByIdقد يفشل حتى ترجعه لنهاية الجسم.
أخطاء شائعة
- وضع سكربت يحدّث DOM في الرأس فيعمل
getElementByIdقبل وجود العنصر - ربط
<script src="app.js">بخطأ إملائي أو مجلد خاطئ — الصفحة تبدو سليمة ولا يعمل شيء - ترك مئات الأسطر مضمّنة في كل HTML بدل
.jsمشترك - خلط هذه الجلسة بتوصيل CSS: الأنماط عبر
<link>/<style>؛ السلوك عبر<script>
ملخص
- يعيش JavaScript داخل
<script>— مضمّناً أو عبرsrcإلى ملف.js - نهاية الجسم افتراض ودّي للمبتدئ حين يلمس الكود عناصر الصفحة
- سكربتات الرأس تعمل مبكراً؛ تجنّب تحديث DOM هناك حتى تعرف سمات التحميل
- الملفات الخارجية افتراض المشروع حين تكبر العروض
- ترتيب السكربت يتبع ترتيب المستند ما لم تستخدم خيارات تحميل متقدمة لاحقاً
- تمرّن بفصل عرض مضمّن يعمل إلى HTML +
app.js
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى