نادي الانترنت للمعلمين والمعلمات

الدرس الرابع

الأحداث Events

تعرفنا في الدروس السابقة علي المناهج (Methods) و الكائنات (Objects) . في هذا الدرس نتعرف علي الأحداث (Events) . الأحداث تعتبر جافاسكريبت , لكنها تستخدم داخل أوامر ال HTML ولا تستخدم بمفردها . أي أن الأحداث لا تكتب بين الأمرين <SCRIPT> و <SCRIPT/> .
إذن الأحداث بمفردها (Events) لا تعتبر جافاسكريبت . بل يجب أن تدمج داخل أوامر ال HTML لكي تفهم علي أنها جافاسكريبت . فكر في الأحداث علي أنها أشياء تحدث مثل : نقرة الماوس , ضغطة الزر , وغيرها من الأحداث . هناك الكثير من الأحداث والتي سنتعرض لها لاحقا ولكننا سنتعرض في هذا الدرس للحدث onMouseOver .... حسنا.. لنشاهد الكود (SCRIPT) التالي :

<A HREF="http://www.ayna.com"
onMouseOver="window.status='Go to ayna site';
return true">Click Here</A>

أكتب هذا النص في سطر واحد تجنبا للأخطاء .

نتيجة الكود (SCRIPT) :

Click Here

مرر الماوس فوق الوصلة التشعبية وأنظر لشريط الحالة (Status Bar) بأسفل .

تحليل الكود (Script) :

أعتقد أن هذا الأمر يشرح نفسه ولكن دعنا ننظر إليه نظرة سريعة : في الأمر إستخدمنا الحدث onMouseOver (لاحظ الحروف الكبيرة والصغيرة في إسم الحدث) . وهذا الحدث يستخدم مع الوصلات التشعبية (Hypertext Links) حيث يستخدم داخل أمر الHTML الخاص بالوصلة التشعبية بعد عنوان الموقع . إذن هذا الحدث هو الخاص بمرور الماوس فوق الوصلة التشعبية . ويتم ندائه بكتابة "=onMouseOver" . ثم بعد ذلك يتم كتابة ما نريده أن يحدث عن حدوث ذلك الحدث onMouseOver وهو في حالتنا هنا " 'window.status='go to ayna site" وهو شكل عرفناه من قبل ولكنه ليس كالأوامر التي إستخدمناها في الدروس السابقة . هنا window تعتبر كائن (Object) ... أعتقد أننا نعرف ذلك ... ولكن ماذا تكون كلمة status ؟ .. أسمع البعض يقول أنها منهج (Method) .. لا ليست كذلك . إن status تعرف علي أنها خاصة (Property) من خواص الكائن window .
هل حدث عندك إرتباك . حسنا .. أنظر دائما للنهج (Methods) علي أنه فعل .. مثل : أكتب(write) أحضر (get) . أما الخاصة (Property) فأنظر إليه علي أنه إسم لشيء موجود بالكائن مثل : status والموجود بالكائن المسمي window .


إذن تذكر :
- لغة الجافا سكريبت تستخدم أسلوب البرمجة بالكائنات (Object Oriented Programming) الذي يسمح بالتعامل مع البيانات علي شكل كائنات (Objects) مثل document و window ... ولكل كائن مناهج (Methods) وخصائص (Properties) خاصة به ... المناهج (Methods) يمكنك أن تنظر إليها علي أنها فعل مثل write و get ... أما الخصائص فيمكنك أن تنظر إليها علي أنها أشياء موجودة في الكائن كشريط الحالة وشريط الأدوات وكذلك هي الخواص الصفاتية التي تميز الكائن كاللون والإرتفاع والعرض . أما بالنسبة للفرق بين المناهج والخصائص من حيث الشكل في الكتابة فهو أن المنهج يتبعه دائما أقواس بدون علامة المساواة أما الخاصة (Property) يتبعه دائما علامة مساواة ثم علامات تنصيص إما مفردة أو مزدوجة حسب الحالة وقتئذ . إلا أن كلاهما يأتي دائما بعد الكائن (Object) يفصله عنه نقطة ( . )

هناك بعض المناهج (Methods) والتي تستخدم بمفردها داخل برنامج الجافا سكريبت بدون ربطها بكائن . وسوف نتعرف عليها لاحقا .

- الأحداث (Events) لاتستخدم إلا داخل أوامر ال HTML ولا تكتب بين الوسمين <SCRIPT> ...... <SCRIPT/> .

الأمر "window.status" متبوع بعلامة (=) هو الآخر ليشير إلي أن ما سيليه هو ما سيحدث . في حالتنا هنا ما بعد العلامة (=) هو نص بين علامتي تنصيص (مفردة) . وهذا النص سوف يظهر علي شريط الحالة (Status Bar) عند تمرير مؤشر الماوس علي اللإرتباط التشعبي . ثم وضعنا بعد ذلك الفاصلة المنقوطة (;) لنشير إلي نهاية السطر .

الأمر return true في السطر الأخير يشير الي السلوك الذي سيتبع عند المرور بمؤشر الماوس فوق الوصلة التشعبية وهذا السلوك يتبع المسار التالي : إذا كانت كلمات النص موجودة سيفحص الكود (SCRIPT) إذا كان شريط الحالة (Status Bar) موجودا . إذا كان موجودا سيكون الشرط return true قد تحقق وبالتالي سيتم حدوث الحدث . لاحظ أنك عندما تمرر مؤشر الماوس فوف الوصلة Click Here سيظهر النص علي شريط الحالة وسيلتصق به ولن يزول إلا إذا أعدت تحميل الصفحة .
ولكن ماذا سيحدث إذا إزلنا return true من الكود ؟ . حسنا دعنا نفترض ذلك . في هذه الحالة لن يتم أي فحص وسيظهر النص الإفتراضي الذي يظهر عند تمرير المؤشر علي أي وصلة .. وهو عنوان الصفحة التي تؤدي إليها تلك الوصلة التشعبية . وعندما تبعد مؤشر الماوس عن الوصلة التشعبية سيظهر النص الذي حددته في الأمر وسيتم حدوث الحدث . جرب الآن أن تمرر المؤشر عل الوصلة التشعبية التالية :

Click Here

هل لاحظت الفرق ؟ .

خصائص (Properties) أخري :

إذا كان للكائن window خصائص (Properties) فإن لكل كائن آخر خصائص (Properties) خاصة به . ما رأيك في لون خلفية الصفحة ؟ ... ألا تعتبر خاصة (Property) ؟ . في ال HTML الأمر الخاص بتغيير لون الخلفية هو BGCOLOR . هنا نفس الشيء 'bgColor' ولكن مع مراعاة الحروف الكبيرة في الإسم فكما تلاحظ الحرف C كبير . إذن ما رأيك في إنشاء إرتباط تشعبي .. عند تمرير المؤشر عليه يتغير لون الخلفية بإستخدام الحدث onMouseOver ؟

1-أولا نحن نريد إنشاء إرتباط تشعبي لذا فإننا سنستخدم الأمر الذي إستخدمناه بأعلي .
2- ثانيا ماهو الكائن الذي نريد تغيير خاصية لون الخلفية به ؟ .. طبعا هو الكائن document والذي يمثل الصفحة التي نعمل عليها . أي أننا هنا نستخدم الكائن document بدلا من الكائن window .
3- نحن نريد تغيير خاصية(Property) والمسماة ب (bgColor) . لذا فإننا سنستخدم bgColor بدلا من status .
4- ما نريد حدوثه عند تمرير الماوس فوق الوصلة هو تغيير لون الخلفية وليس إظهار نص . لذلك فإننا سنضع 'yellow' بدلا من النص في الأمر بأعلي .
5- عند تمرير المؤشر فوق الوصلة فإننا نريد أن يتغير لون الخلفية ويظل اللون كما هو بعد ذلك سواء مررنا المؤشر فوق الوصلة مرة أخري أم لا . لذا فإننا سنستخدم الأمر return true بعد الفاصلة المنقوطة (;) .

الآن هذا هو الكود بعد تلك التغييرات :

<A HREF="http://www.ayna.com"
onMouseOver="document.bgColor='yellow';
return true">Click Here</A>


لتري نتيجة ذلك الكود أنقر هنا

(هذه الوصلة سيفتح نافذة جديدة)


إذا أردت أن يحدث كلا الأثرين السابقين عند مرور المؤشر فوق الوصلة التشعبية فأستخدم الحدث onMouseOver مرتين مرة لكل تأثير علي أن تفصل بينهما بفاصلة (,) لكي يحدث كلا الحدثين في ذات الوقت . ويكون شكل الكود هكذا :

<A HREF="http://www.ayna.com"
onMouseOver="window.status='go to the ayna site';
onMouseOver="document.bgColor='yellow';
return true">Click Here</A>

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

نكتفي بذلك في هذا الدرس ولننتقل للدرس التالي .

إلي الدرس الخامس

المدينة المنورة1999/2000

 حقوق التصميم محفوظة للمحمدي