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

✨ الأحداث في JavaScript للأطفال – الجزء الأول: أحداث الفأرة والأزرار

---

🎉 أهلاً أبطال البرمجة!

تخيل لو فتحت لعبة على الكمبيوتر وضغطت على زر "ابدأ" وما صار أي شيء 😅… أو حركت الفأرة فوق صورة وما تغير شكلها! أكيد رح تحس اللعبة مملة وما فيها حياة. طيب، كيف نخلي مواقع الويب تتحرك وتتفاعل معانا؟ الجواب هو: الأحداث (Events) في JavaScript.

الأحداث هي مثل "الإشارات" اللي بتحكي لبرنامجك: "هيه، في شخص عمل شيء! تعامل معه!". يعني لما تضغط بالماوس، أو تكتب بالكبورد، أو حتى تمرر إصبعك على الشاشة (لو على الموبايل)، الصفحة بتعرف إنه في حدث صار، وبعدين JavaScript بيقرر شو يعمل.

---

🔹 ما هو الحدث؟

الحدث هو أي شيء بيصير على صفحة الويب. خلينا نشوف بعض الأمثلة:

• 👆 Click: لما تضغط على زر أو صورة بالماوس.
• 🚶‍♂️ Mouse Move: لما تحرك الفأرة على الصفحة.
• ⬆️ Mouse Over: لما تمرر الفأرة فوق عنصر (زي صورة أو زر).
• ⬇️ Mouse Out: لما تبعد الفأرة عن العنصر.
• ⌨️ Keyboard Event: لما تكتب أو تضغط على زر في لوحة المفاتيح.

يعني ببساطة، أي حركة أو ضغط من المستخدم على الكمبيوتر أو الموبايل، JavaScript بقدر يسمعها ويرد عليها. مثل لما تلعب بلايستيشن: الأزرار اللي بتضغطها هي "أحداث"، واللعبة بتتفاعل معها. 🎮

---

🔹 أول تجربة: الضغط على زر

خلينا نبدأ بمثال بسيط جداً. بدنا نعمل زر، ولما نضغطه يطلع رسالة ترحيب.

<button onclick="alert('أهلاً بطل البرمجة!')">اضغطني</button>

لما تضغط على الزر، بتطلع نافذة صغيرة فيها الرسالة "أهلاً بطل البرمجة!". هذا مثال على حدث النقر (Click).

لكن 🤔، في مشكلة صغيرة! كتابة الكود بهالطريقة (داخل HTML) مش دايماً الأفضل. الأفضل نفصل بين HTML و JavaScript عشان يكون الكود منظم وأسهل للفهم.

---

🔹 الطريقة الأفضل: addEventListener

في JavaScript في أداة اسمها addEventListener. هاي الأداة بتخلي العنصر يسمع للحدث، ولما يصير الحدث، ينفذ الكود اللي نكتبه.

<button id="myBtn">اضغطني</button>

<script>
  let btn = document.getElementById("myBtn");

  btn.addEventListener("click", function() {
    alert("أهلاً بطل البرمجة! 😍");
  });
</script>

هنا قلنا للزر: "يا زر، لو حد ضغط عليك، اعرض رسالة ترحيب". وهيك صار الكود أوضح وأجمل. 👍

---

🔹 مثال ثاني: تغيير النصوص

بدل ما نظهر نافذة منبثقة، خلينا نغير النصوص في الصفحة.

<p id="demo">مرحباً!</p>
<button id="changeBtn">غيّر النص</button>

<script>
  let p = document.getElementById("demo");
  let button = document.getElementById("changeBtn");

  button.addEventListener("click", function() {
    p.innerHTML = "🎉 لقد ضغطت على الزر!";
  });
</script>

الآن عندنا فقرة وزر. لما نضغط الزر، النص يتغير فوراً. 😍 وكأن الزر عنده قوة سحرية يغير الكلام على الشاشة.

---

🔹 أحداث الفأرة (Mouse Events)

مش كل شيء ضغطة زر. الماوس فيه أحداث كثيرة: تمرير، دخول، خروج، تحريك… خلينا نجرب مثال ممتع:

<div id="box" style="width:150px;height:150px;background:lightblue;"></div>

<script>
  let box = document.getElementById("box");

  box.addEventListener("mouseover", function() {
    box.style.background = "green";
  });

  box.addEventListener("mouseout", function() {
    box.style.background = "lightblue";
  });
</script>

شوف السحر ✨: لما تمرر الفأرة فوق المربع يصير لونه أخضر 🍀، ولما تبعد الفأرة عنه يرجع أزرق 💧. هذا شيء بسيط لكن ممتع!

---

🔹 لعبة صغيرة: مربع يتغير لونه

خلينا نلعب بلعبة! 🎮 رح نعمل مربع، وكل مرة نضغط عليه، يغير لونه عشوائياً.

<div id="colorBox" style="width:150px;height:150px;background:orange;"></div>

<script>
  let box2 = document.getElementById("colorBox");

  box2.addEventListener("click", function() {
    let colors = ["red", "blue", "green", "purple", "pink", "yellow", "black"];
    let randomColor = colors[Math.floor(Math.random() * colors.length)];
    box2.style.background = randomColor;
  });
</script>

كل نقرة تغير اللون إلى لون جديد! 🎨 ممكن تضيف ألوان أكثر وتخلي اللعبة ممتعة أكتر. حتى ممكن تتحدى أصحابك: "اضغط عشر مرات بسرعة، وشوف كم لون مختلف بيظهر!" 😆

---

🔹 تطبيق عملي: مصباح ينطفئ ويضيء

خلينا نعمل مثال ثاني مفيد. مصباح ممكن نضيئه ونطفئه بزر:

<button id="lampBtn">شغل/اطفئ المصباح</button>
<div id="lamp" style="width:100px;height:100px;background:gray;margin-top:10px;"></div>

<script>
  let lamp = document.getElementById("lamp");
  let lampBtn = document.getElementById("lampBtn");
  let isOn = false;

  lampBtn.addEventListener("click", function() {
    if (isOn) {
      lamp.style.background = "gray";
      isOn = false;
    } else {
      lamp.style.background = "yellow";
      isOn = true;
    }
  });
</script>

هيك صار عندك مصباح يتغير لونه كل ما تضغط الزر. هذا مثال عملي عن كيف ممكن الأحداث تخلي الصفحة فيها حركة وتفاعل.

---

🔹 ليش الأحداث مهمة؟

تخيل الإنترنت بدون أحداث… كل المواقع بتكون مثل كتاب مطبوع: بس نصوص وصور، بدون أي حركة أو استجابة. لكن مع الأحداث، المواقع بتصير مثل ألعاب أو تطبيقات، فيها حياة وحماس! ✨

الأحداث بتخلي المستخدم يحس إنه جزء من الصفحة: يضغط، يحرك، يكتب… وكل شيء يستجيب له. حتى المواقع الكبيرة زي YouTube أو Facebook أو ألعاب الويب، كلها تعتمد على الأحداث عشان تشتغل.

---

🔹 تحدي صغير لك

جرب تعمل صفحة فيها ٣ أزرار:

• زر يغير لون الخلفية للأحمر 🔴
• زر يغير الخلفية للأزرق 🔵
• زر يرجعها للأبيض ⚪

وهيك بتتعلم كيف الأحداث بتخلي الصفحات ممتعة وتفاعلية.

---

🎯 الخلاصة

اليوم تعلمنا:

• ما هو الحدث.
• كيف نكتب حدث بسيط.
• طريقة addEventListener.
• أحداث الفأرة مثل mouseover و mouseout.
• لعبة صغيرة تغير ألوان المربع.
• مثال مصباح يشتغل وينطفئ.

الآن صار عندك فكرة واضحة عن كيف الأحداث بتخلي صفحات الويب تفاعلية ومسلية! 😍 في الجزء القادم رح نتعرف على أحداث لوحة المفاتيح ونعمل ألعاب صغيرة نتحكم فيها بالكيبورد. 🎮