في هذا الدرس 6تصفّح المواضيع
عملت جميع الدوال التي كتبناها في دروس هذا الفصل فور تحميل السكربت، غير أن صفحات الويب الحقيقية تنبض بالحياة عند ربط الدوال بأحداث التفاعل (HTML Events)؛ وهي الإشارات التي يطلقها المتصفح كلما نقر الزائر زراً أو مرر المؤشر أو كتب في حقل إدخال.
تُعد سمة onclick="myFunc()" على عنصر الزر — أو إسناد مرجع الدالة برمجياً عبر btn.onclick = myFunc — أسرع مدخل عملي لرؤية دوالك تتفاعل مباشرةً مع المستخدم:
| سمة الحدث | لحظة إطلاق الإشارة في المتصفح | المهمة الشائعة للدالة المرتبطة |
|---|---|---|
onclick | نقر العنصر بالفأرة أو تفعيله بلوحة المفاتيح | حساب الفاتورة أو تبديل حالة عنصر |
onmouseover / onmouseout | دخول مؤشر الفأرة لحدود العنصر أو مغادرتها | عرض تلميح توضيحي سريع أو إخفاؤه |
oninput / onchange | الكتابة الفورية بالحقل أو اعتماد تغيير قيمته | حساب عدد الأحرف المتبقية أو تحديث السعر |
onload | اكتمال تحميل الصفحة ومواردها المرتبطة | تهيئة القيم الافتراضية للوحة التحكم |
function applyCoupon() {
const finalPrice = 200 * 0.85;
document.getElementById('ev-price').textContent = 'Discounted: ' + finalPrice + ' SAR';
}يتيح الجمع بين onmouseover وonmouseout تشغيل دالة تعرض وصفاً إرشادياً فور مرور المؤشر فوق العنصر، وإعادة النص الأصلي عند مغادرته.
تطلق حقول النماذج حدثين متكاملين: oninput الذي يعمل لحظياً مع كل حرف يكتبه المستخدم أو يلصقه، وonchange الذي ينتظر انتهاء التعديل ومغادرة الحقل النصي (أو اختيار عنصر من قائمة منسدلة).
function updateCounter() {
const box = document.getElementById('bio-in');
const len = box.value.length;
document.getElementById('char-out').textContent = 'Characters: ' + len + ' / 50';
}يطلق المتصفح حدث onload عند اكتمال تحميل المستند وكافة صوره وملفاته الفرعية. وتذكر أن وضع وسم السكربت قبل نهاية </body> أو استخدام سمة defer يضمن جاهزية العناصر مسبقاً لتشغيل دوال التهيئة بسرعة.
رغم بساطة سمات HTML المضمنة مثل onclick="..." في الأمثلة التمهيدية، تفصل المشاريع الاحترافية هيكل HTML عن سلوك JavaScript تماماً؛ لأن السمات المضمنة تتطلب دوال في النطاق العام وتخالف سياسات الأمان الصارمة (CSP). وفي الفصل التاسع القادم ستتقن التعامل الشامل مع شجرة DOM تمهيداً لاحتراف المستمع القياسي الحديث addEventListener في الفصل العاشر!
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ربطت في ختام فصل الدوال دوالك البرمجية بأحداث التفاعل الحية عبر onclick وأحداث المؤشر والكتابة الفورية oninput وجاهزية الصفحة onload، وأدركت مزايا فصل معالجات الأحداث عن وسوم HTML. الخطوة التالية: ابدأ الفصل التاسع بدرس «نموذج كائن المستند DOM في JavaScript» لاكتشاف كيف يبني المتصفح شجرة العناصر الحية بالذاكرة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML Event حدث المتصفح التفاعلي
- إشارة يطلقها المتصفح عند وقوع فعل من المستخدم كالنقر والكتابة أو اكتمال تحميل الصفحة لتشغيل دالة معالجة.
- للمراجعة
- 02 Event Handler دالة معالجة الحدث
- دالة JavaScript مخصصة للتشغيل التلقائي استجابةً لوقوع حدث معين على عنصر محدد في الصفحة.
- للمراجعة
- 03 oninput Event حدث الإدخال الفوري oninput
- حدث ينطلق لحظياً مع كل تغيير مباشر في قيمة حقل الإدخال سواء بالكتابة أو الحذف أو اللصق.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DOM DOM
- Document Object Model
- شجرة كائنات المستند الحية التي تتيح ربط الأحداث وتحديث العناصر برمجياً.
- للمراجعة
- 02 CSP CSP
- Content Security Policy
- سياسة الأمان القياسية التي تشجع فصل دوال الأحداث في ملفات JavaScript بدلاً من كتابتها داخل وسوم HTML.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال updateCounter في محرر التجربة واكتب عدة كلمات داخل الحقل لمشاهدة تحديث العداد مع كل حرف.
-
قارن بين التبويبين الأول والثالث في محاكي الأحداث لملاحظة سبب إسناد مرجع الدالة بدون أقواس.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.