ما هو JavaScript، وأول سكربت لك · البرمجة مع مارتن

تعرّف على اللغة الثالثة للويب واكتب أول سكربت يتحدث مع console المتصفح.

اللغات الثلاث للويب

من المستوى 1 تعرف لغتين:

HTML – هيكل الصفحة (ما عليها)،
CSS – الشكل (كيف تظهر).

اللغة الثالثة والأخيرة هي JavaScript – السلوك (ماذا يحدث عندما…). عندما تضغط ▶ على YouTube ويبدأ الفيديو، عندما يحسب متجر سعراً، عندما تحتفظ لعبة بالنتيجة – كل ذلك JavaScript.

أين يعيش JavaScript

JavaScript يعيش في ملفه الخاص، مثل CSS. تخبر الصفحة عنه بوسم <script> – ضعه في نهاية <body> مباشرة، قبل </body>:

  ...page content...

  <script src="script.js"></script>
</body>

💡

لماذا في النهاية؟ المتصفح يقرأ الصفحة من الأعلى للأسفل. عندما يكون السكربت في النهاية، الصفحة كلها موجودة، والسكربت يمكنه العمل معها فوراً.

شاهد معي: أول سكربت لك

في مجلد my-web، أنشئ ملفاً اسمه script.js واكتب فيه:
```
console.log("Hi, this is your website!");
```
في index.html، أضف السطر <script src="script.js"></script> مباشرة قبل </body> واحفظ الملفين.
افتح الصفحة في متصفحك واضغط F12 (على Mac، Cmd+Alt+I). تفتح لوحة المطور – اضغط تبويب Console.

هل ترى “Hi, this is your website!”؟ أول JavaScript لك يعمل! 🎉

Console غرفة سرية في المتصفح حيث المبرمجون يتحدثون مع الصفحة. الزوار لا يرونها – فقط لك. console.log(...) يعني “اطبع هذا في console.” ستستخدمه طوال الوقت: أفضل طريقة لمعرفة ما يحدث داخل سكربتك.

Console يستطيع الحساب أيضاً

جرّب كتابة هذا مباشرة في console (اضغط Enter بعد كل سطر):

5 + 3
"Jake" + " is " + "awesome"
10 * 365

JavaScript آلة حاسبة أيضاً – يجمع الأرقام ويلصق النصوص (تسمى strings، تعرفها بعلامات الاقتباس) طرفاً إلى طرف.

دورك الآن 💪

أضف script.js إلى كل صفحة في موقعك (مثلما أضفت style.css مرة).
اجعل السكربت يطبع اسم موقعك في console ويحسب كم ساعة تبقى لعطلة الصيف – مثلاً، console.log("Hours left until vacation:", 48 * 24);.
ارتكب خطأ عمداً – احذف علامة اقتباس واحفظ. انظر كيف يبدو الخطأ في console (نص أحمر مع رقم سطر). ثم أصلحه. عادة مهمة: console سيخبرك دائماً أين المشكلة.

✅

تحقق من نفسك: عندما تفتح أي صفحة في موقعك، رسالتك تظهر في console. تعرف كيف تفتح console وكيف يبدو الخطأ. هذا الأساس كله – من الدرس القادم، نبدأ السحر على الصفحة.

ما ستخرج به من هذا الدرس

JavaScript = اللغة الثالثة للويب: السلوك. يُكتب في ملف script.js ويُربط بوسم <script src="..."> قبل </body>.
Console (F12) نافذتك إلى السكربت: console.log() يطبع، الأخطاء تظهر بالأحمر مع رقم سطر.
النص بين علامات اقتباس string، وstrings يمكن لصقها بـ +. الأرقام يمكن حسابها.