التعامل مع الأحداث في لغة جافا سكريبات

السلام عليكم ورحمة الله وبركاته


موضوعنا اليوم هام جدا لكل مطور عاهد نفسه على الارتقاء بأعماله و الاندفاع إلى التميز والتطوير . ومن هنا نريد أن نتكلم اكثر تحديد لتطوير تطبيقات تعمل على الإنترنت .
فكثير نسمع انه من الأسباب وراء نجاح أي موقع هو وجود طاب ديناميكي متجدد للموقع . فالمقصود من هذه العبارة ليس استخدامنا لغة معينه تطفئ على الموقع طابع من الديناميكا . ولكننا قصدنا التفاعل بين المستخدم والموقع . بغض النظر إلى اللغة المستخدمة أو المفضلة لد المصمم فهيا وسيلة لمحاكاة المستخدم داخل الموقع . هنا يشعر المستخدم بالتفاعل أي أنة عندما يفع شيء يظهر شيء أخر أو كما قال نيوتن (لكل فعل رد فعل) موضوعنا اليوم يتحدث عن هذا القانون وتطبيقه في البرمجة . واكثر اللغات انسيابا في التعامل مع أحداث المستخدم هي لغة الجافا سكريبت .
ولنبدأ بالتحدث بطريقة اكثر توضيحا . وكما نعلم أن لغة جافا سكريبت تعتبر من اللغات التي تعمل بشكل كبير في جانب العميل . أي أن المتصفح سيقوم بدور المعالجة للأحدث التي تصدر بواسطة المستخدم . فمثل عند الضغط فوق ربطة تشعبيه أو عندما تدخل بياناتك في Form فأن حدث معين قد يقع لأخبار المتصفح بنوع المعالجة المطلوبة لهذا الحدث .ثم الاستجابة للحدث ومعالجته , وهو ما يعرف باسم معالجة الأحداث .
ولنوضح مثالا بسيطا لفكرة معالجة الأحداث :
عند الضغط على رابطة في أي صفحة من المفترض أن يستجيب المتصفح لهذا الحدث بتحميل الصفحة المرتبطة بهذا العنوان URL ويعرضها , أما لو استخدمنا الأحداث في جافا سكريبت للتعامل مع هذه الوصلة . يمكن تغير هذا الأجراء الطبيعي بكتابة شفرة معالجة مختلفة . فمثلا يمكنك عرض مربع حوار قبل التوجه للوصلة أو إصدار صوت معين أو تحميل صورة متحركة أو ظهور نصوص في أماكن مختلفة من الصفحة أو إغلاق نافذة من نوع pop up . تتعدد الأحداث التي يمكن فعلها بكتابة شفرات معالجة للحدث.
وبصورة مختصرة تتمكن الأحداث في التعامل مع . الروابط والصور وخراط الصور والنماذج والنوافذ كما يمكنها التحكم في عناصر html الافتراضية لتجعلها تفعل أعمال مختلفة .
يوجد العديد من الأحداث داخل جافا سكريبت سوف اعرض اغلبها خلال هذه السلسلة لكن الآن اذكر لكم أهم هذه الأحداث وأكثرها انتشار .


من الأحدث التي يمكن لجافا سكريبت معالجتها :

MOUSEMOVE تحريك الماوس
CLICK نقر الماوس فوق رابطة
MOUSEDOWN ضغط زر الماوس والاستمرار في الضغط
MOUSEOVER تحريك الماوس فوق رابطة
MOUSEOUT تحريك الماوس من داخل رابطة إلى خارجها

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

تطبيق عملي :

نفترض انك تريد معالجة الحدث المرتبط بتحريك المستخدم فوق ربطة معينة فينبغي عليك ربط الحدث المطلوب بالوصلة .



<a href=http://www.c4arab.com onMouseOver=”كود معالجة الحدث”>
موقع الموسوعة العربية للكمبيوتر
</a>



يجب أن تقع شفرة معالجة الحدث onMouseOver بين علامات اقتباس .
يمكن أن نجعل الزائر عندما يمر فوق الرابطة تظهر لها نافذة Window باستدعاء الدالة alert الخاصة بالكائن window
شاهد المثال :

<a href=http://www.c4arab.com onMouseOver="alert('مرحبا بك في موقع الموسوعة العربية للكمبيوتر')">
موقع الموسوعة العربية للكمبيوتر
</a>



موقع الموسوعة العربية للكمبيوتر



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