الأحداث في JavaScript ومشروع عدّاد الضغطات

في الدرس السابق غيّرت الصفحة بـ JavaScript، لكن التغيير حدث مرة واحدة عند التحميل. المواقع الحقيقية تستجيب لك: تضغط زراً فيحدث شيء، وتكتب حرفاً فتظهر النتيجة. في هذا الدرس ستتعلم الأحداث (Events)، ثم تبني مشروعك الأول الكامل: عدّاد ضغطات.

ما هو الحدث؟

الحدث هو شيء يحدث في الصفحة: ضغطة زر، أو كتابة حرف، أو تحريك الفأرة. وJavaScript تستطيع أن «تستمع» لأي حدث، وتنفّذ دالة عندما يقع.

تخيّل جرس الباب: لا تقف أمام الباب طوال اليوم تنتظر الضيوف، بل تفعل أشياءك، وعندما يرن الجرس (الحدث) تقوم وتفتح (الدالة). وهذا بالضبط ما تفعله الصفحة.

addEventListener

لكي تستمع لحدث، اختر العنصر، ثم استدعِ addEventListener وأعطها اسم الحدث والدالة التي تُنفّذ:

const button = document.querySelector("#hello");

button.addEventListener("click", () => {
  console.log("تم الضغط على الزر!");
});

كلما ضغط المستخدم الزر، تُنفّذ الدالة. والدالة هنا سهمية، ويمكن أن تكون دالة عادية لها اسم:

function sayHello() {
  console.log("أهلاً!");
}

button.addEventListener("click", sayHello);

بدون أقواس!

لاحظ أننا كتبنا sayHello بدون قوسين. لو كتبت sayHello() لنُفّذت الدالة فوراً عند تحميل الصفحة، وليس عند الضغط. نحن نعطي المتصفح «الوصفة» لينفّذها لاحقاً، لا نطبخها الآن.

أحداث شائعة

الحدث	متى يقع؟
click	عند الضغط على العنصر
input	عند كل تغيير في حقل الكتابة
keydown	عند ضغط زر في لوحة المفاتيح
mouseover	عند مرور الفأرة فوق العنصر

كائن الحدث والكتابة في الحقول

الدالة تستقبل تلقائياً كائن الحدث (Event Object)، وفيه معلومات عما حدث. أهم خاصية فيه target، وهي العنصر الذي وقع عليه الحدث:

const nameInput = document.querySelector("#name");
const greeting = document.querySelector("#greeting");

nameInput.addEventListener("input", (event) => {
  const name = event.target.value;
  greeting.textContent = name ? `أهلاً يا ${name}!` : "اكتب اسمك";
});

مع كل حرف تكتبه، يقع حدث input، فنقرأ القيمة الحالية من event.target.value ونعرضها. ولاحظ أننا استخدمنا المعامل الثلاثي من درس سابق!

القيمة دائماً نص

ما تقرأه من value يكون نصاً دائماً، حتى لو كتب المستخدم أرقاماً. لتحسب به، حوّله أولاً: Number(input.value).

المشروع: عدّاد الضغطات

حان وقت تطبيق كل شيء. سنبني عدّاداً له ثلاثة أزرار: زيادة، ونقصان، وتصفير. ويتغير لون الرقم حسب قيمته.

الخطوة 1: HTML

<p id="count">0</p>
<button id="minus">−</button>
<button id="reset">تصفير</button>
<button id="plus">+</button>

الخطوة 2: المتغيرات واختيار العناصر

let count = 0;
const display = document.querySelector("#count");

الخطوة 3: دالة تحدّث الشاشة

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

function render() {
  display.textContent = count;
  if (count > 0) {
    display.style.color = "green";
  } else if (count < 0) {
    display.style.color = "crimson";
  } else {
    display.style.color = "gray";
  }
}

الخطوة 4: ربط الأزرار بالأحداث

document.querySelector("#plus").addEventListener("click", () => {
  count++;
  render();
});

وبنفس الطريقة لزري النقصان والتصفير. والآن جرّب المشروع كاملاً:

جرّب بنفسك

اضغط «شغّل»، ثم اضغط أزرار العدّاد في صندوق النتيجة. بعدها جرّب هذه التحديات:

1. اجعل العدّاد لا ينزل تحت الصفر.
2. أضف زراً يزيد العدد 10 مرة واحدة.
3. اطبع في الطرفية رسالة عندما يصل العدد إلى 10.

جرّب بنفسكJavaScript

محرر الكود (JavaScript)let count = 0; const display = document.querySelector("#count"); function render() { display.textContent = count; if (count > 0) { display.style.color = "green"; } else if (count < 0) { display.style.color = "crimson"; } else { display.style.color = "gray"; } } document.querySelector("#plus").addEventListener("click", () => { count++; render(); }); document.querySelector("#minus").addEventListener("click", () => { count--; render(); }); document.querySelector("#reset").addEventListener("click", () => { count = 0; render(); console.log("تم التصفير"); });

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• وضع قوسين بعد اسم الدالة: addEventListener("click", sayHello()) تنفّذ الدالة فوراً مرة واحدة. الصحيح بدون قوسين.
• كتابة اسم الحدث بـ on: اسم الحدث "click" وليس "onclick" عند استخدام addEventListener.
• الحساب بقيمة الحقل مباشرة: input.value + 1 تلصق النصوص، فتعطي "51" بدلاً من 6. استخدم Number(input.value) + 1.

اختبر نفسك

سؤال

أي سطر يجعل الدالة play تعمل عند الضغط على الزر btn؟

btn.addEventListener("click", play())btn.addEventListener("click", play)btn.addEventListener("onclick", play)

سؤال

ما نوع القيمة التي تقرؤها من input.value؟

نص دائماًرقم دائماًحسب ما يكتبه المستخدم

الخلاصة

• الحدث شيء يقع في الصفحة مثل click و input و keydown.
• element.addEventListener("click", دالة) تنفّذ الدالة كلما وقع الحدث.
• مرّر الدالة بدون أقواس، وإلا ستُنفّذ فوراً.
• كائن الحدث يحمل معلومات، و event.target.value تعطيك ما كتبه المستخدم كنص.
• فكرة «البيانات في متغير ودالة render تعرضها» تنظّم أي مشروع تفاعلي.

ماذا بعد؟

أنهيت أساسيات JavaScript: المتغيرات والشروط والحلقات والدوال والمصفوفات والكائنات، والتحكم في الصفحة والاستجابة للمستخدم. في الدروس القادمة ستتعمق أكثر: دوال المصفوفات المتقدمة، و JSON، والمؤقتات، ومعالجة الأخطاء، والوعود وجلب البيانات من الإنترنت.