✨ JavaScript: السحر الذي يجعل صفحات الويب حية! 🧙‍♂️

مرحباً بك في عالم جديد! لقد تعلمنا في الدروس السابقة كيف نبني هيكل الصفحة بـ HTML ونزينه بـ CSS. لكن الصفحات حتى الآن كانت ثابتة مثل صورة مطبوعة 📄. ماذا لو أردنا أن تتفاعل مع المستخدم؟ أن تتحرك الأزرار، أن تتغير النصوص، أو أن تظهر رسائل ترحيبية؟ هذا هو بالضبط دور JavaScript!

تخيل أن HTML هو الهيكل العظمي للمنزل، و CSS هي الديكور والطلاء، أما JavaScript فهي الكهرباء والسباكة التي تجعل المنزل صالحاً للسكن! ⚡

🔍 ما هي لغة JavaScript؟

JavaScript (تُختصر غالباً JS) هي لغة برمجة تُستخدم لإنشاء محتوى ديناميكي وتفاعلي على صفحات الويب. هي لغة العميل (Client-side)، مما يعني أن المتصفح هو من يشغّلها، وليس الخادم.

ببساطة: JavaScript تضيف الذكاء والتفاعل لصفحتك.

مهام بسيطة يمكن لـ JavaScript القيام بها:

  • تغيير محتوى عنصر HTML.
  • تغيير نمط (Style) عنصر (مثل اللون، الحجم).
  • الرد على أفعال المستخدم (النقر، تمرير الماوس، الضغط على مفتاح).
  • إظهار أو إخفاء عناصر.
  • عرض رسائل تنبيه للمستخدم.

📝 كيف نضيف JavaScript إلى صفحة HTML؟

لإضافة كود JavaScript إلى صفحتنا، نستخدم العنصر <script>. وله طريقتان رئيسيتان:

1. JavaScript داخلي (Internal)

نكتب الكود مباشرة داخل وسم <script> في ملف الـ HTML نفسه. يُفضل وضعها قبل إغلاق وسم </body> لضمان تحميل كل عناصر الصفحة أولاً.

<!DOCTYPE html>
<html>
<head>
    <title>صفحتي الأولى مع JS</title>
</head>
<body>
    <h1 id="myHeading">مرحباً بالعالم!</h1>
    <button>انقر عليّ!</button>

    <!-- نضيف كود الجافا سكريبت هنا في الأسفل -->
    <script>
        // هذا تعليق بالعربية، ولن ينفذه المتصفح
        // الكود الإنجليزي بالأسفل هو الذي سيعمل
        console.log("أهلاً! هذه رسالة في Console.");
    </script>
</body>
</html>

2. JavaScript خارجي (External)

ننشئ ملفاً منفصلاً بامتداد .js (مثل script.js) ونربطه بصفحة الـ HTML. هذه هي الطريقة الأفضل والأكثر تنظيماً.

الخطوة 1: أنشئ ملفاً جديداً بجانب ملف index.html وسمّه script.js.

الخطوة 2: اكتب الكود التالي داخل script.js:

// هذا ملف JavaScript خارجي
alert("مرحباً! أنا جافا سكريبت من ملف خارجي!");

الخطوة 3: اربط الملف في صفحة الـ HTML باستخدام <script> مع السمة src:

<body>
    <!-- محتوى HTML -->
    <script src="script.js"></script>
</body>

🎯 خطواتك الأولى مع كود JavaScript

لنبدأ بأبسط الأمثلة لفهم كيفية عمل JS مع HTML.

المثال 1: التفاعل مع console.log()

أداة رائعة للمبرمجين لفحص الكود وكتابة رسائل غير ظاهرة للمستخدم النهائي. افتح أدوات المطور في المتصفح (F12) واذهب لتبويب Console لترى النتيجة.

<script>
    console.log("بدأت رحلتي مع JavaScript اليوم!");
    console.log(2 + 3); // سيطبع الرقم 5
</script>

المثال 2: التفاعل مع المستخدم عبر alert()

تعرض نافذة منبثقة تحتوي على رسالة للمستخدم.

<button onclick="sayHello()">قول مرحباً</button>

<script>
    function sayHello() {
        alert("أهلاً وسهلاً بك في موقعنا! 🌟");
    }
</script>

المثال 3: تغيير محتوى HTML ديناميكياً

هنا نستخدم خاصية innerHTML لتغيير النص داخل عنصر معين.

<p id="demo">هذا النص سيتغير.</p>
<button onclick="changeText()">غيّر النص</button>

<script>
    function changeText() {
        document.getElementById("demo").innerHTML = "لقد تغير النص بنجاح! 🎉";
    }
</script>

في المثال أعلاه:

  1. document.getElementById("demo") تجد العنصر الذي id له يساوي "demo".
  2. .innerHTML تصل إلى المحتوى الموجود داخل هذا العنصر.
  3. = "النص الجديد..." نغير هذا المحتوى إلى النص الجديد.