دبلوم احتراف البرمجة التفاعلية: لغة JavaScript من الصفر.

🌟 مقدمة تحفيزية :

“مرحباً بك يا مهندس التفاعل ! هل لاحظت كيف يتغير لون الزر عند تمرير الماوس فوقه ؟

أو كيف يبدأ الفيديو بالعمل تلقائياً ؟ أو كيف تظهر رسالة تحذير إذا نسيت كتابة بريدك الإلكتروني ؟ كل هذه تسمى أحداثاً (Events) . اليوم في أكاديمية قياوي ، ستتعلم كيف تجعل موقعك ‘يراقب’ تصرفات الزائر ويرد عليها فوراً . أنت الآن تمنح موقعك القدرة على التواصل مع البشر !”

🏗️ 1 . ما هو الحدمث (Event) ؟ الحدث هو أي فعل يقوم به المستخدم على الصفحة . JavaScript تنتظر وقوع هذا الفعل لتنفذ كوداً معيناً .

أشهر أنواع الأحداث :

onclick : عند الضغط بالماوس .
onmouseover : عند مرور الماوس فوق العنصر .
onkeyup : عند الكتابة في لوحة المفاتيح .
onsubmit : عند إرسال نموذج (Form) .

💻 2 . كيف نبرمج الحدث؟ (الطريقة الاحترافية)

بدلاً من كتابة الكود داخل HTML ، نستخدم في المستوى المتقدم ما يسمى بـ “مراقب الأحداث” (EventListener) :

JavaScript

// 1. نمسك الزر
let myButton = document.getElementById("action-btn");

// 2. نطلب من الزر أن "ينصت" للضغطة
myButton.addEventListener("click", function() {
    alert("شكراً لضغطك على الزر في أكاديمية قياوي!");
});

🎨 3 . مثال تفاعلي : تغيير الصورة عند مرور الماوس

تخيل أنك تريد إظهار شعار الأكاديمية الملون عندما يحرك الطالب الماوس فوقه : JavaScript

let logo = document.getElementById("main-logo");

logo.addEventListener("mouseover", function() {
    logo.style.filter = "grayscale(0%)"; // جعل الصورة ملونة
});

logo.addEventListener("mouseout", function() {
    logo.style.filter = "grayscale(100%)"; // إعادتها للأبيض والأسود
});

💡 لماذا هذا الدرس هو جوهر موقع qiyaouiacademy.com ؟

الأحداث هي التي تجعل موقع يبدو كـ “تطبيق” وليس مجرد “صفحة” :

نماذج الاستشارات : التحقق من البيانات قبل إرسالها (Validation) .
الاختبارات : إظهار النتيجة فور اختيار الطالب للإجابة الصحيحة .
القوائم : فتح وإغلاق قوائم الدروس بلمسة واحدة .

🎯 تحدي المحترفين : “يا بطل ، قم بإنشاء مربع نص (Input) وزر .

اجعل الموقع يغير لون خلفية الصفحة إلى ‘الأخضر’ إذا كتب المستخدم كلمة ‘نجاح’ وضغط على الزر.

هل يمكنك فعل ذلك باستخدام ما تعلمناه في درس الشروط (If) وهذا الدرس ؟”

للتوضيح :

1️⃣ ما معنى Events ؟ في عالم الويب ، Event تعني حدث يقع في الصفحة بسبب فعل يقوم به المستخدم .

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

بمعنى بسيط : الحدث = فعل يقوم به المستخدم → فتستجيب الصفحة له .

2️⃣ مثال بسيط على Event ننشئ زر، وعندما يضغط عليه المستخدم تظهر رسالة .

HTML

<button onclick="alert('مرحبا بك في موقعي')">
اضغط هنا
</button>

ماذا يحدث هنا؟ onclick حدث يعني عند الضغط alert تظهر رسالة عندما يضغط الزائر على الزر → تظهر الرسالة .

3️⃣ أشهر الأحداث في HTML

🖱️ أحداث الفأرة

الحدث	ماذا يعني
onclick	عند الضغط
ondblclick	ضغط مرتين
onmouseover	مرور الفأرة فوق العنصر
onmouseout	خروج الفأرة

HTML

<p onmouseover="alert('مررت بالفأرة فوق النص')">
مرر الفأرة هنا
</p>

⌨️ أحداث لوحة المفاتيح

الحدث	ماذا يعني
onkeydown	عند ضغط زر
onkeyup	عند رفع الإصبع عن الزر

مثال : HTML

<input type="text" onkeyup="alert('كتبت شيئا')">

📄 أحداث الصفحة

الحدث	ماذا يعني
onload	عند تحميل الصفحة
onunload	عند مغادرة الصفحة

مثال : HTML

<body onload="alert('مرحبا بك في الموقع')">

4️⃣ مثال جميل: تغيير لون النص عند الضغط

HTML

<p onclick="this.style.color='red'">
اضغط على هذا النص ليتغير لونه
</p>

ماذا يحدث؟

this تعني العنصر نفسه
style.color تغيير اللون
عند الضغط يصبح النص أحمر

5️⃣ مثال تطبيقي كامل

HTML

<!DOCTYPE html>
<html>
<head>
<title>درس الأحداث</title>
</head>

<body>

<h2>جرب التفاعل</h2>

<button onclick="alert('مرحبا بك')">
اضغط هنا
</button>

<br><br>

<p onclick="this.style.fontSize='30px'">
اضغط لتكبير النص
</p>

</body>
</html>

6️⃣ لماذا الأحداث مهمة ؟

الأحداث هي أساس : النماذج (Forms) الألعاب التطبيقات المواقع التفاعلية التجارة الإلكترونية بدون Events يبقى الموقع ثابت فقط .

7️⃣ معلومة مهمة لك كمصمم مواقع

HTML تعطي الأحداث لكن التحكم القوي بها يكون عبر : JavaScript وسنصل إليها لاحقاً إن شاء الله .

💡 تمرين لك (مهم) حاول إنشاء صفحة فيها : زر يظهر رسالة نص يتغير لونه عند الضغط صورة تظهر رسالة عند المرور بالفأرة عليها .

من أفضل صيغ الصلاة على النبي لقضاء الحوائج هي الصلاة النارية: “اللَّهُمَّ صَلِّ صَلَاةً كَامِلَةً وَسَلِّمْ سَلَامًا تَامًّا عَلَى سَيِّدِنَا مُحَمَّدٍ، الَّذِي تَنْحَلُّ بِهِ الْعُقَدُ، وَتَنْفَرِجُ بِهِ الْكُرَبُ، وَتُقْضَى بِهِ الْحَوَائِجُ، وَتُنَالُ بِهِ الرَّغَائِبُ وَحُسْنُ الْخَوَاتِمِ، وَيُسْتَسْقَى الْغَمَامُ بِوَجْهِهِ الْكَرِيمِ، وَعَلَى آلِهِ وَصَحْبِهِ فِي كُلِّ لَمْحَةٍ وَنَفَسٍ بِعَدَدِ كُلِّ مَعْلُومٍ لَكَ”. يُنصح بتكرارها [4444] مرة.