أين تكتب كود JavaScript؟

الدرس 2 من 28 · JavaScript

قبل أن تكتب برامج حقيقية، يجب أن تعرف أين تضع الكود حتى يعمل. في هذا الدرس ستتعرف على ثلاثة أماكن لكتابة JavaScript، ومتى تستخدم كل واحد منها، وما هي الطريقة التي يعتمدها المحترفون.

المكان الأول: طرفية المتصفح (Console)

كل متصفح حديث فيه أداة مخفية للمطورين اسمها الطرفية (Console). تخيّلها مثل مسودة تجرّب فيها أفكارك بسرعة قبل أن تكتبها في الدفتر.

لفتحها:

اضغط F12 في لوحة المفاتيح، أو اضغط بزر الفأرة الأيمن على أي مكان في الصفحة واختر «فحص» (Inspect).
اختر التبويب Console.
اكتب أي سطر JavaScript واضغط Enter.

جرّب أن تكتب فيها:

console.log("أهلاً من الطرفية");
10 * 3

أهلاً من الطرفية
30

ستلاحظ أن الطرفية تعرض نتيجة السطر الثاني مباشرة حتى بدون console.log. هذه ميزة خاصة بالطرفية تساعدك على التجربة السريعة.

المكان الثاني: وسم script داخل HTML

لكي يصبح الكود جزءاً من صفحتك، تضعه داخل الوسم <script> في ملف HTML:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>صفحتي الأولى</title>
  </head>
  <body>
    <h1 id="title">مرحباً</h1>

    <script>
      console.log("تم تحميل الصفحة");
    </script>
  </body>
</html>

عندما يفتح المتصفح هذه الصفحة، يقرأها من الأعلى إلى الأسفل. يرسم العنوان أولاً، ثم يصل إلى الوسم <script> فينفّذ ما بداخله.

لماذا نضع script في آخر body؟

المتصفح يقرأ الصفحة بالترتيب، مثل شخص يقرأ كتاباً. إذا وضعت الكود في أعلى الصفحة، وحاول أن يغيّر عنوان الصفحة، فلن يجده، لأن المتصفح لم يصل إلى العنوان بعد!

لهذا اعتاد المبرمجون وضع <script> في آخر <body>، بعد كل عناصر الصفحة.

المكان الثالث: ملف JavaScript خارجي

عندما يكبر الكود، يصبح وضعه داخل HTML فوضوياً. الحل هو كتابته في ملف منفصل بامتداد .js، ثم ربطه بالصفحة:

console.log("تم تحميل الملف app.js");

<body>
  <h1>مرحباً</h1>
  <script src="app.js"></script>
</body>

الخاصية src تخبر المتصفح بمكان الملف. وهذا يشبه تماماً ربط ملف CSS بالصفحة.

مزايا الملف الخارجي:

التنظيم: HTML للهيكل، و JavaScript في ملفها الخاص.
إعادة الاستخدام: يمكن ربط نفس الملف بعشر صفحات بدلاً من نسخ الكود عشر مرات.
السرعة: المتصفح يحفظ الملف بعد أول تحميل، فتفتح الصفحات التالية أسرع.

الخاصية defer: الطريقة الحديثة

هناك طريقة أفضل من وضع السكربت في آخر الصفحة: ضعه في <head> وأضف له الخاصية defer:

<head>
  <meta charset="UTF-8">
  <title>صفحتي</title>
  <script src="app.js" defer></script>
</head>

كلمة defer تعني «أجِّل». فالمتصفح يبدأ تحميل الملف مبكراً في الخلفية، لكنه لا ينفّذه إلا بعد قراءة الصفحة كاملة. فتحصل على الميزتين: تحميل مبكر، وتنفيذ آمن بعد وجود كل العناصر.

تخيّل أنك طلبت طعاماً من مطعم وأنت في طريقك للبيت. الطعام يُجهَّز أثناء سيرك (التحميل في الخلفية)، لكنك لا تأكله إلا بعد أن تصل وتجلس (بعد اكتمال الصفحة).

جرّب بنفسك

هذه صفحة HTML كاملة فيها سكربت يغيّر نص العنوان. اضغط «شغّل»، ثم غيّر النص الموجود في السطر الأخير من السكربت وشغّل مرة أخرى. (لا تقلق من الأمر document.getElementById، سنشرحه بالتفصيل في درس التعامل مع الصفحة).

جرّب بنفسكHTML

أو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

وضع السكربت في head بدون defer: الكود يعمل قبل وجود عناصر الصفحة، فيظهر خطأ أو لا يحدث شيء. الحل: أضف defer، أو انقل السكربت لآخر <body>.
خطأ في مسار الملف: إذا كتبت src="App.js" والملف اسمه app.js، فقد لا يجده المتصفح. انتبه للحروف الكبيرة والصغيرة ولمكان الملف في المجلدات.
كتابة كود داخل وسم له src: هذا الكود يُتجاهل تماماً كما ذكرنا.

اختبر نفسك

سؤال

ماذا تفعل الخاصية defer في الوسم <script>؟

سؤال

أين يُفضَّل كتابة كود مشروع حقيقي؟

الخلاصة

الطرفية (F12 ثم Console) مكان للتجربة السريعة، وما تكتبه فيها لا يُحفظ.
يمكنك كتابة الكود داخل الوسم <script> في صفحة HTML.
الأفضل كتابته في ملف خارجي .js وربطه بـ src.
الخاصية defer تجعل الكود ينتظر حتى تكتمل الصفحة، وهي الطريقة الحديثة المفضلة.

عن مدرسة البرمجة

مدرسة البرمجة موقع عربي مجاني لتعليم البرمجة من الصفر، بدروس منظمة وأمثلة تجربها بنفسك. هدفنا أن يتعلم كل عربي البرمجة بلغته، خطوة بخطوة.