الدرس الثاني عشر: التعامل مع قاعدة بيانات Access باستخدام VBA

الدرس الثاني عشر: التعامل مع الأحداث في JavaScript – تفاعل المستخدم مع الصفحة 

الدرس الثاني عشر: التعامل مع الأحداث في JavaScript – تفاعل المستخدم مع الصفحة 🖱️✨

---

العنوان:

كيفية استخدام الأحداث (Events) لتصميم صفحات تفاعلية.

---

المقدمة:

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

---

ما هي الأحداث؟

الأحداث هي أنشطة أو أفعال يقوم بها المستخدم أو النظام على صفحة الويب.

أمثلة على الأحداث:

• الضغط على زر: click.
• تمرير الفأرة: mouseover.
• كتابة نص في حقل إدخال: input.
• تحميل الصفحة: load.

---

إضافة أحداث للعناصر:

الطريقة الأولى: خاصية HTML

يمكنك ربط الحدث مباشرة في العنصر.

<button onclick="alert('Button clicked!')">Click Me</button>

---

الطريقة الثانية: استخدام JavaScript

يمكنك ربط الحدث برمجيًا:

<button id="myButton">Click Me</button>
<script>
  let button = document.getElementById("myButton");
  button.onclick = function () {
    alert("Button clicked!");
  };
</script>

---

الطريقة الثالثة: باستخدام addEventListener

هذه الطريقة الأكثر مرونة.

<button id="myButton">Click Me</button>
<script>
  let button = document.getElementById("myButton");
  button.addEventListener("click", function () {
    alert("Button clicked!");
  });
</script>

---

أنواع الأحداث الشائعة:

1. أحداث الفأرة (Mouse Events):

• click: عند الضغط على العنصر.
• dblclick: عند الضغط مرتين متتاليتين.
• mouseover: عندما يتحرك الفأر فوق العنصر.
• mouseout: عندما يترك الفأر العنصر.

مثال:

<button id="hoverButton">Hover Over Me</button>
<script>
  let button = document.getElementById("hoverButton");
  button.addEventListener("mouseover", function () {
    console.log("Mouse is over the button!");
  });
});
</script>

---

2. أحداث لوحة المفاتيح (Keyboard Events):

• keydown: عند الضغط على أي مفتاح.
• keyup: عند رفع الإصبع عن المفتاح.
• keypress: عند الضغط على مفتاح (تم إلغاء دعمه في المتصفحات الحديثة).

مثال:

<input type="text" id="inputField" placeholder="Type something...">
<script>
  let input = document.getElementById("inputField");
  input.addEventListener("keydown", function (event) {
    console.log("Key pressed: " + event.key);
  });
</script>

---

3. أحداث النموذج (Form Events):

• submit: عند إرسال النموذج.
• change: عند تغيير قيمة عنصر.
• focus: عند تركيز المستخدم على عنصر إدخال.
• blur: عند مغادرة المستخدم لعنصر إدخال.

مثال:

<form id="myForm">
  <input type="text" name="username" placeholder="Enter your name">
  <button type="submit">Submit</button>
</form>
<script>
  let form = document.getElementById("myForm");
  form.addEventListener("submit", function (event) {
    event.preventDefault(); // لمنع إعادة تحميل الصفحة
    console.log("Form submitted!");
  });
</script>

---

إلغاء الحدث الافتراضي:

مثال على إلغاء إعادة تحميل الصفحة:

<a href="https://example.com" id="myLink">Click Me</a>
<script>
  let link = document.getElementById("myLink");
  link.addEventListener("click", function (event) {
    event.preventDefault(); // منع الانتقال للرابط
    console.log("Link clicked, but no navigation!");
  });
</script>

---

التعامل مع أحداث متعددة:

تشغيل أكثر من وظيفة على نفس الحدث:

<button id="multiButton">Click Me</button>
<script>
  let button = document.getElementById("multiButton");
  button.addEventListener("click", function () {
    console.log("First function executed!");
  });
  button.addEventListener("click", function () {
    console.log("Second function executed!");
  });
</script>

---

مشروع صغير: تغيير لون الخلفية عند الضغط على زر

الكود:

<button id="changeColorButton">Change Background Color</button>
<script>
  let button = document.getElementById("changeColorButton");
  button.addEventListener("click", function () {
    document.body.style.backgroundColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
  });
</script>

---

تمارين عملية:

1. أنشئ صفحة تحتوي على زر يطبع رسالة مختلفة كل مرة يُضغط عليه.
2. أضف حقل إدخال يعرض رسالة "شكراً" عند مغادرته باستخدام حدث blur.
3. صمم قائمة مهام (To-Do List) تتيح للمستخدم إضافة وحذف عناصر باستخدام الأحداث.

---

وختامًا:

تعلمنا في الدرس ده إزاي نتعامل مع الأحداث المختلفة لخلق صفحات تفاعلية. في الدرس القادم، هنركز على التعامل مع DOM، وده هيمكنك من تعديل العناصر على الصفحة برمجيًا. استعد للغوص أعمق في JavaScript! 🚀 

تعديل المقال