[color="YellowGreen"]الدرس الخامس
المزيد من الأحداث Events
تعرفنا في الدرس السابق علي الأحداث (Events) وعرفن أنها لا تستخدم الا داخل أوامر ال HTML ولاتكتب بين الوسومين <******> و <******/> .
في هذا الدرس نتعرف علي المزيد من الأحداث والتي لا تخلوا صفحة ويب منها . وتلك الأحداث هي :
onClick , onFocus , onBlure , onChange , onSelect , onSubmit , onLoad , onUnload
--------------------------------------------------------------------------------
الحدث onClick :
لقد تعرفنا في الدرس الرابع علي الحدث onMouseOver والذي يمثل حدث مرور مؤشر الماوس علي وصلة تشعبية وعرفنا أن ذلك الحدث لا يستخدم إلا داخل أمر ال HTML الخاص بالوصلة التشعبية . هناك حدث آخر يستخدم مع الوصلة التشعبية وهو الحدث onClick .... ومن إسم الحدث نستنتج أنه الحدث المتعلق بنقرة الماوس (Clicking) فوق الوصلة التشعبية .
سوف أستخدم هنا منهج (Method) جديد يسمي ()alert . وهذا المنهج يظهر صندوق رسائل يحتوي علي النص الموجود بين الأقواس . وهذا المنهج يستخدم بمفرده ولا يرتبط بكائن (Object) كما سوف تشاهد في المثال التالي :
< A HREF = "http://www.mostashfa.com "
onClick=" alert ('أنقر هنا < "; ('سوف تنتقل لموقع مستشفي الإنترنت < /A >
وهذا هو نتيجة ذلك الكود (أنقر علي الوصلة التالية لتشاهد النتيجة ولا تنسي أن تعود إلينا ثانية لنستكمل الدرس ) :
أنقر هنا
--------------------------------------------------------------------------------
الحدث onFocus :
هذا الحدث يستخدم مع أوامر ال HTML الخاصة بالنماذج (Forms) ويستخدم مع الأشكال (Types) :
select boxes , text boxes , textarea boxes
(أنقر هنا إذا لم تكن تعرف ماذا تعني هذه الأشياء)
الحدث onFocus هو الحدث الخاص بالتركيز علي صندوق النصوص (أي أنه حدث النقر بمؤشر الماوس داخل صندوق النصوص إستعدادا للكتابة بداخله) . اليك هذا المثال :
< Form >
< INPUT TYPE="text" SIZE="30"
onFocus = " window.status = 'أكتب في صندوق النصوص' ; " >
< /Form >
وهذا هو نتيجة ذلك الكود (أنقر داخل صندوق النصوص وأنظر إلي شريط الحالة بأسفل) :
أعتقد أن الأمر داخل علامتي التنصيص بعد علامة المساواة أصبح مألوفا ومفهوما .
--------------------------------------------------------------------------------
الحدث onBlur :
هو عكس الحدث onFocus ويستخدم أيضا مع النماذج (Forms) . وهو حدث إزالة التركيز (كأن تنقر خارج صندوق النصوص في المثال السابق) .
فلتري ذلك المثال :
< Form >
< INPUT TYPE="text" SIZE="40"
Value="أدخل إسمك ... ثم أنقر خارج صندوق النصوص "
onBlur = " alert ('لقد غيرت محتوي صندوق النصوص'); " > < /Form >
النتيجة (غير محتوي صندوق النصوص ثم أنقر خارجه ولاحظ ماذا يحدث ) :
--------------------------------------------------------------------------------
الحدث onChange :
هذا الحدث هو تماما مثل الحدث onBlur إلا أن هناك فارق ضئيل بينهما . لكي تعرف الفارق اليك المثال التالي :
< Form >
< INPUT TYPE="text" SIZE="40"
Value="أدخل إسمك ... ثم أنقر خارج صندوق النصوص "
onChange = " alert ('لقد غيرت محتوي صندوق النصوص'); " > < /Form >
النتيجة (جرب أن تنقر داخل الصندوق ثم أنقر خارجه بدون تغييره ثم أعد تحميل الصفحة وجرب أن تنقر داخل الصندوق وغير محتواه ثم أنقر خارجه ... جرب نفس الشيء في المثال السابق ولاحظ الفرق ) :
--------------------------------------------------------------------------------
الحدث onSelect :
هذا الحدث يعمل بنفس طريقة عمل الأحداث الثلاثة السابقة . وهو يمثل حدث تحديد نص داخل صندوق نصوص
سأتركك تعمل هذا الكود كتمرين بحيث تكون نتيجته هي : (قم بتحديد النص داخل الصندوق ولاحظ)
إتبع نفس القواعد التي أتبعناها في الأمثلة السابقة .
--------------------------------------------------------------------------------
الحدث onSubmit :
هذا الحدث يسمح لك بتحديد ما تريد حدوثه عند الضغط علي زر الإدخال (Submit Button) وهو أحد أشكال النماذج (Forms) ... في المثال التالي أمرت المتصفح بأن ينتقل للصفحة الرئيسية للموقع عند الضغط علي زر الإدخال :
< Form >
< INPUT TYPE="submit"
onSubmit="parent.********='base1.htm';" >
< /Form >
نتيجة الكود (أنقر فوق زر الإدخال) :
في الكود (******) بأعلي يوجد بعض الأوامر الجديدة :
Parent.******** هو شكل عرفناه في الدروس السابقة وهذا الأمر يبدو كما لو كان parent عبارة عن كائن (Object) و ******** عبارة عن خاصية (Property) من خواص ذلك الكائن . ولكنها ليست كذلك .
هذا الأمر حالة خاصة ويستخدم للإنتقال إلي عنوان صفحة أخري .
أنا دائما أتذكر ذلك الشكل : " = parent.******** " تعني دائما وصلة تشعبية (Link) . (إحفظه هكذا) .
--------------------------------------------------------------------------------
الحدثان onLoad و onUnload :
لا توجد أمثلة لهذان الحدثان ولكننا سوف نستخدمهما لاحقا .
كلاهما يستخدمان داخل الأمر في مستند ال HTML . والحدث onLoad هو الحدث الخاص بتحميل الصفحة والحدث onUnload هو الخاص بمغادرة الصفحة . وكلاهما في غاية الأهمية وسنستخدمهما لاحقا عندما نتحدث عن الدوال (Functions) .
الآن ... أريدك أن تستخدم الأحداث السابقة لتحدد أفعال أخري غير التي حددتها أنا في الأمثلة بأعلي . وستجد أنه يمكنك عمل الكثير بإستخدام الأحداث (Events) . وإلي اللقاء في الدرس القادم .[
منقول
منقول/COLOR]
فلنتعلم معا جافا سكريبت
لنشير إلي نهاية السطر .
