|
معالجة أحداث الروابط في "جافا سكريبت"
معالجة أحداث الروابط في "جافا سكريبت"
عنوان الدرس : معالجة أحداث الروابط
رقم الدرس : الأحداث في جافا سكريبت (2)
المستوى: متوسط
تكلمنا في الحلقة السابقة عن الأحداث بصورة عامة داخل جافا سكريبت وعرضنا نظرة عامة على أهميتها واليوم سنقوم بعرض قسم هام من أقسام معالجة الأحداث في javaScript والتي تنقسم إلى:-
1) معالجة أحداث الروابط .
2) معالجة أحداث النوافذ .
3) معالجة أحداث الصور .
4) معالجة أحداث النماذج.
ذكرنا في الحلقة السابقة أيضا مثال بسيط لمعالجة أحداث الروابط وكان يتعلق بالحدث onMouseOver وهنا سنتناول المزيد أن شاء الله في الأحداث بصفة عامة يتم ربط الحدث بعناصر html العادية . فمثلا أحداث الروابط تعالج أحداث المستخدم المتعلقة بالربطة التشعبية Link وهنا يتم إدراج هذه المعالجة داخل الوسم <a> هكذا.
<a Href=”http://www.c4arab.com “ OnmouseOver=”معالجة ما ”>الموسوعة العربية </a>
وهناك تسعة أحداث مرتبطة بالروابط وهم
احدث الروابط التي يمكن معالجتها داخل جافا سكريبت :-
|
م
|
المعـالجة
|
الحدث
|
|
1
|
نقر الماوس فوق رابطة
|
Click
|
|
2
|
نقر الماوس نقرة مزدوجة فوق رابطة
|
dblClick
|
|
3
|
ضغط زر الماوس والاستمرار في الضغط
|
MouseDown
|
|
4
|
إطلاق زر الماوس
|
MouseUP
|
|
5
|
تحريك الماوس فوق رابطة
|
mouseOver
|
|
6
|
تحريك الماوس من داخل رابطة إلى خارجها
|
mouseOut
|
|
7
|
ضغط المستخدم مفتاح من لوحة المفاتيح
|
KeyDown
|
|
8
|
إطلاق المستخدم المفتاح
|
KeyUP
|
|
9
|
ضغط المستخدم مفتاح و إطلاقه
|
KeyPress
|
سنشرح هنا وبشكل من التفصيل بعض الأحداث الأكثر استخداما في التعامل مع الروابط .
من الأحداث المهمة الحدث onClick فهو يعالج معالجة أخرى للروابط أي أنة يفعل أسلوب خاص عند نقر المستخدم لربطة فمثلا لو أعطت شفرة الحدث OnClick قيمة false فان العمل المرتبط بالنقر والذي يوجه المتصفح إلى الوصلة يلغى هذا التصرف الطبيعي .
فبواسطة هذا الحدث يمكنا صنع عبارات تأكيد تظهر للمستخدم تطلب منه التأكيد على عبور هذه الوصلة .
تستخدم مع الوصلات الأكثر أهمية والتي تحتاج إلى تأكيد من المستخدم مثل والوصلات الخاصة بحذف موضوع أو رسالة مثلا. تحتاج لرسالة تأكيد . هل تريد الحذف.
واليك مثال عملي يشرح هذا الحدث بوضوح .
<html >
<head >
<title>معالجة أحداث الروابط </title>
<meta name="author" content=Emad Adly>
</head >
<body >
<script language=”javascript”>
<!--
function ConfirmLink(){
alert(“درس مقدمة عن الأحداث ”)
return confirm(“هل تريد قراءة هذا الدرس ”)
}
.
</script>
<a href=”http://c4arab.com” onClick= “return ConfirmLink()”>الدرس الأول </a>
</body>
</html>
لمشاهدة عمل التمرين اضغط على هذه الوصلة.
<script language=”javascript”>
<!--
function ConfirmLink(){
alert(“درس مقدمة عن الأحداث ”)
return confirm(“هل تريد قراءة هذا الدرس ”)
}
//->
</script>
<a href=”http://c4arab.com” onClick= “return ConfirmLink()”>الدرس الأول </a>
شرح المثال :
في هذا التمرين قمنا بتعريف وظيفة خاصة بنا وهى ConfirmLink() وهى تقوم بتنبيه المستخدم على انه اختار الصفحة الخاصة ]بدرس مقدمة عن الأحداث [ ثم تسأله عن رغبته في الاتصال بالصفحة . بعد ذلك ينفذ ناتج الدالة ConfirmLink .
ملاحظة أيضا . عند استدعاء الدالة ConfirmLink قمنا باستخدام جملة return وذلك لكي تظهر نتائج Confirm والدالة ConfirmLink عند النقر والتي تنشط عندها شفرة المعالجة حتى تتمكن قيمة false من إلغاء الحدث المرتبط بالنقر على cancel .
جرب إزالة جملة إعطاء الناتج return واستدعاء confirmLink مباشرة وستجد أن إلغاء الرابطة لم يعد خيارا مفتوحا .
يمكنك التلاعب والتناغم مع باقي الأحداث المتعلقة بالروابط فيما يخدم مشروعك .
وهنا ننتهي من هذا الدرس إلى أن نعود مع نوع أخر من الأحداث في درس قادم أن شاء الله.
المزيد من المواضيع
الكائنات في جافا سكريبت
التعامل مع الاحداث (1)
كائنات جافا سكريبت (2)
أنواع المتغيرات في الجافاسكريبت ج2
أنواع المتغيرات في الجافاسكريبت ج1
وضع عبارات الجافا سكريبت في ملف خارجي
الوظائف , تعريفها وإستخداماتها
أساسيات اللغة
وضعية الكود في الصفحة
ماهية الجافا سكريبتس وعملها
|
