دورة جافا سكربت - Javascript الدرس الثاني عشر | مدونة علم البرمجة والحاسوب

الفصل الثاني عشر

محتوى الفصل

*** الاحداث الخاصه بعمليات النقر على الماوس (حدث click)
*** تحديد موضع المؤشر باستخدام حدث MouseMove
*** التعرف على حدث MouseOver
*** التعرف على حدث MouseOut
*** اهميه حدثي Mouse Cown و MouseUp
*** تحديد ازرار الماوس التي تم ضغطها
*** التعرف على حدثى Key Up و Key Down
*** اكواد المفاتيح
*** حدث Load
*** حدث Unload
*** حدث Focus
*** حدث Blur
*** التعريف على حدث Change
*** التعريف على حدث Reset
*** حدث Submit
*** حدث Abort
*** حدث Resize

الاحداث الخاصه بعمليات النقر على الماوس (حدث click)

يعتبر حدث click اكثر الاحداث التفاعليه مع الكمبيوتر ويظهر عندما يقوم المستخدم

بالضغط على الزر الايمن للماوس عندما يكون مؤشر الماوس على زر في مستند ويب ويتم

تحديد معالج الحدث onclick في علامه الترميز <input> الخاصه بـ html والمتعلقه

بالزر مع سمه onclick الخاصه بـ html وتعتبر القيمه التي تم تحديدها لسمه html

بمثابه استدعاء للداله التي ستقوم بتنفيذ العبارات البرمجيه في لغه جافا سكربت

ويقوم المثال التالي باستدعاء داله جافا سكربت عندما يقوم المستخدم بالنقر على

الزر وادخال قيمه الوسيط لاستخدامه في الداله التي تم استدعاؤها

كود:

<SCRIPT TYPE="text/javascript">

<!--

function doclick(str){

document.n.txt.value=str;

}

//-->

</SCRIPT>

<FORM NAME="n">

<INPUT TYPE="text"NAME="txt"VALUE="">

<INPUT TYPE="button"VALUE="Do Click"ONCLICK="doclick('JavaScript in easy steps')">

</FORM>

تحديد موضع المؤشر باستخدام حدث MouseMove

من الافضل ان تعرف مكان المؤشر عند استخدام جافا سكربت في عمليات كتابه النص

البرمجي باستخدام dhtml وعندما يقوم المستخدم بتحريك المؤشر فانه يتم تشغيل

حدث MouseMove وهذه العمليه يتم توجيهها بواسطه جافا سكربت من اجل استخدامها

مع معالج الحدث onmousemove يوضح المثال التالي طريقه مفيده في تحديد احداثي

الشاشه x-y عند تطوير نصوص البرمجه بلغه dhtml وعندما يتم توجيه MouseMove

ان معالج الحدث onmousemove يقوم بعرض احداثي x-y بشكل ديناميكي

كود:

<SCRIPT TYPE="text/javascript">

<!--

if(document.layers)

document.captureEvents(Event.MOUSEMOVE);

if(document.all||document.layers)

document.onmousemove=track;

function track(e){

var x=(document.all)?event.x:e.pageX;

var y=(document.all)?event.y:e.pageY;

document.n.txt.value="X="+x+"Y="+y;

}

//-->

</SCRIPT>

<FORM NAME="n">

<INPUT TYPE="text"NAME="txt"VALUE="">

<INPUT TYPE="text"NAME"txt">

</FORM>

التعرف على حدث MouseOver

يتم تشغيل حدث MouseOver عندما يضع المستخدم المؤشر على ارتباط تشعبي على صفحة الويب

ويمكن لعلامات الترميز <a> و <area> ان تقوم بتحديد معالج الحدث بالنسبة لحدث MouseOver

من خلال تحديد استدعاء دالة في جافا سكربت لسمة onmouseover الخاصة بعلامات الترميز

ويقوم معالج الحدث بابدال الصور من خلال النقر على الصور الحالية لعرض الصورة التالية

ولكن من الممكن تنفيذ اية عبارة برمجية ويقوم المثال التالي بتحديد قيمة عبارة سلسلة

الحرفية في المدخلات الخاصة بمربع النص عند وضع المؤشر على الصورة

كود:

<SCRIPT TYPE="text/javascript">

<!--

function domouseover(){

document.n.txt.value="Mouse is Over the link";

}

//-->

</SCRIPT>

<A HREF="target.html"ONMOUSEOVER="domouseover()">

<IMG NAME="star"SRC="star.gif"WIDTH="34"HEIGHT="34"ALT=""></A>

<FORM NAME="n">

<INPUT TYPE="text"NAME"txt">

</FORM>

التعرف على حدث MouseOut

يتم تشغيل حدث MouseOut عندما يحرك المستخدم المؤشر بعيد عن الرابط التشعبي على

صفحة الويب ويمكن لعلامات الترميز <a> و <area> ان تقوم بتحديد معالج الحدث بالنسبة

لحدث MouseOut من خلال استدعاء دالة في جافا سكربت بالنسبة لسمة onmouseout

الخاصة بعلامات الترميز ويقوم معالج الحدث بعرض الصور بشكل متتال حتى تعود الصور الى

وضعهاالاصلي الذي كانت علية ويعتبر المثال التالي تكملة للمثال السابق من خلال اضافة

معالج حدث onmouseout لتغيير قيمة مربع النص عندما يتحرك مؤشر الماوس بعيد عن الرابط

كود:

<SCRIPT TYPE="text/javascript">

<!--

function mousehandler(n){

with(document.n.txt){

if(n==1)value="Mouse is Over the link";

if(n==0)value="Mouse is Out of link area";}

}

//-->

</SCRIPT>

<A HREF="target.html"ONMOUSEOVER="mousehandler(1)"ONMOUSEOUT="mousehandler(0)">

<IMG NAME="star"SRC="star.gif"WIDTH="34"HEIGHT="34"ALT=""></A>

<FORM NAME="n">

<INPUT TYPE="text"NAME"txt">

</FORM>

اهمية حدثي Mouse Down و Mouseup

يتم تشغيل حدث MouseDown عندما يقوم المستخدم بالضغط على زر الماوس كما يتم تشغيل

حدث MouseUp عند اطلاق زر الماوس ويستخدم هذين الحدثين معا ولذلك فان النقرة الواحد

على الماوس ستؤدي الى استخدام معالجي حدث في هذة الحالة ويقوم هذا المثال بابدال الصورة

وتغيير قيمة مربع النص عند الضغط على زر الماوس ولكنة يعيد كلاهما الى وضعهما الاصلي

عند اطلاق زر الماوس

كود:

<SCRIPT TYPE="text/javascript">

<!--

function light(n){

if(n==1){

document.images.bulb.src="bulbon.gif";

document.n.txt.value="Mouse button is Down";}

if(n==0){

document.images.bulb.src="bulboff.gif";

document.n.txt.value="Mouse button is Up";}

}

//-->

</SCRIPT>

<IMG NAME="bulb"SRC="bulboff.gif"WIDTH="72"HEIGHT="72"ALT="">

<INPUT TYPE="text"NAME"txt"SIZE="18">

<INPUT TYPE="button"VALUE="light Switch"ONMOUSEDOWN="light(1)"ONMOUSEUP="light(0)">

تحديد ازرار الماوس التي تم ضغطها

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

بحدث MouseDown ويقوم زر الماوس الايسر بتخزين قيمة تقدر بواحد صحيح في خاصية event.button

الموجودة في انترنت اكسبلور ولكن هذه الخاصية تسمى بـ e.which في نت سكيب

كود:

<SCRIPT TYPE="text/javascript">

<!--

var msg="Right-Click Context Menu Is Disabled";

if(navigator.appName=="Netscape")

window.captureEvents(Event.MOUSEDOWN);

function stopmenu(e){

if(navigator.appName=="Netscape"&&(e.which==2||e.which==3)){

alert(msg);return false;}

if(navigator.appName=="Microsoft Internet Explorer"&&(event.button==2||event.button==3)){

alert(msg);return false;}

}

window.onmousedown=stopmenu;

document.onmousedown=stopmenu;

//-->

</SCRIPT>

حدثا KeyDown و KeyUp

يتم تشغيل حدث KeyDown عندما يقوم المستخدم بالضغط على زر Keyboard Key وكذلك

يتم تشغيل حدث KeyUp عند اطلاق هذا الزر ويستخدم هذين الحدثين معا ولذلك فان الضغط على

مفتاح واحد سيقوم باستخدام معالجي حدث ويقوم هذا المثال باستبدال الصورة وتغيير قيمة

مربع النص عند الضغط على اي زر كما انة يقوم باعادة كليهما الى الوضع الاصلي

عند اطلاق زر الماوس

كود:

<SCRIPT TYPE="text/javascript">

<!--

if(navigator.appName=="Netscape")

window.captureEvents(Event.KEYDOWN,Event.KEYUP);

function isdown(){

document.images.bulb.src="bulbon.gif";

document.n.txt.value="Key is Down"; }

function isup(){

document.images.bulb.src="bulboff.gif";

document.n.txt.value="Key is Up"; }

document.onkeydown=isdown;document.onkeyup=isup;

//-->

</SCRIPT>

<IMG NAME="bulb"SRC="bulboff.gif"WIDTH="72"HEIGHT="72"ALT="">

<FORM NAME="n">

<INPUT TYPE="text"NAME="txt"SIZE="18"></FORM>

اكواد المفاتيح

يمكن استخدام حدث KeyDown ايضا من اجل الحصول على كود الحرف بالمفتاح الذي تم

الضغط عليه والذي هو عباره عن رقم موحد خاص بمفتاح الحرف ويقوم المثال بالبحث

عن اكواد الحرفين Y و N اذا كانا مكتوبين بحروف صغيره وكبيره ثم يقوم بتقسيم

النص البرمجي لتعيين قيمه لمربع النص الخاص بالنموذج

كود:

<SCRIPT TYPE="text/javascript">

<!--

If(document.layers)

window.captureEvents(Event.KEYDOWN);

function showkey(e){

var msg="";

var fwd="Y key pressed";

var hlt="N key pressed";

if(navigator.appName=="Netscape"){

if(e.which==89||e.which==121)msg=fwd;

if(e.which==78||e.which==110)msg=hlt;}

}

if(navigator.appName=="Microsoft Internet Explorer"){

if(event.KeyCode==89||event.KeyCode==121)msg=fwd;

if(event.KeyCode==78||event.KeyCode==110)msg=hlt;

if(msg!="")document.n.txt.value=msg;

}

window.onkeydown=showkey;

document.onkeydown=showkey;

//-->

</SCRIPT>

**** ملاحظه ****

Y=89 و N=78 و y=121 و n=110

حدث load

لا يتم تشغيل حدث load حتى يتم تحميل عناصر html على صفحه الويب ولذلك فان معالج

الحدث onload سيتم تشغيله بعد توافر جميع العناصر في الصفحه واذا كانت وظيفه

داله جافا سكربت الموجوده في راس المستند هي تعديل العناصر الخاصه بمضمون المستند

فان العناصر يجب ان يكون قد تم تحمليها لتجنب اي خطأ في النص البرمجي ويقوم معالج

الحدث onload استدعاء داله جافا سكربت التي غالبا ما تسمى بـ init والتي تقوم

بتخصيص مجموعه من القيم لتشغيل الصفحه ويقوم هذا المثال بتغيير الوان صفحه

html وتحديد قيمه للمتغير يتم تعيينها في مربع النص

كود:

<SCRIPT TYPE="text/javascript">

<!--

function init(){

document.bgColor="black";

document.fgColor="white";

var str="Page Loaded";

document.n.txt.value=str;

}

window.onload=init;

//-->

</SCRIPT>

<BODY BGCOLOR="white"TEXT="black">

<H2> Welcome to 3asfh.com...</H>

<FORM NAME="n">

<INPUT NAME="txt"TYPE="text"VALUE="">

</FORM>

**** ملاحظه ****

من الممكن ان تحل ادوات معالجه الحدث التي تم تحديدها لسمه onload الخاصه

بعلامه الترميز <tag> محل ادوات المعالجه المدرجه في النص البرمجي

حدث Unload

يتم تشغيل الحدث عندما يقوم المتصفح بالغاء تحميل المستند من الاطار او المقطع

وهذا يحدث عاده عندما ينتقل المستخدم الى موقع جديد ومن الممكن ان يقوم معالج

الحدث onunload باستدعاء داله جافا سكربت بهدف تشغيل قبل الغاء تحميل المستند

ويستخدم معالج حدث onunload في حفظ الحاله الاخيره للبيانات على هذه الصفحه في

ملف البيانات او بواسطه تقديمها لوحده الخدمه كما انه يستخدم ايضا في فتح الاطارات

المنبثقه الجديده التي تحتوي على مزيد من المعلومات التي قد ينتفع بها المستخدم

ويوضح المثال التالي استخدام المعالج حدث onunload لفتح اطار جديد منبثق

كود:

<SCRIPT TYPE="text/javascript">

<!--

function finally(){

var win=window.open("finally.htm","","top=50,left=50,width=297,height=90");

}

window.onunload=finally;

//-->

</SCRIPT>

حدث Focus

يتم تشغيل الحدث عندما يقوم المستخدم بالنقر على عنصر في نموذج او على اطار

تحديد وجهة البيانات الخاصه بالمتصفح ويمكن لمعالج الحدث onfocus ان يقوم

باستدعاء داله جافا سكربت عند استقبال البيانات وفي المثال التالي يتم السلسله

الحرفيه في مربع النص عندما يقوم المستخدم بالنقر على مربع النص

كود:

<FORM NAME="n">

<INPUT NAME="txt"TYPE="text"VALUE="Enter data here"ONFOCUS="this.value"=""></FORM>

يمكن الاستفاده من تقنيه focus الخاصه بعنصر النموذج في تحريك المؤشر الى

المكان المطلوب الخاص بالتدخلات وفي هذا المثال اذا كانت القيمه التي تم

ادخالها عن طريق المستدعي ليست عباره عن رقم فانه يتم تحديد سلسله حرفيه

خاليه في مربع النص كما ان المؤشر يعود الى مربع النص

كود:

<SCRIPT TYPE="text/javascript">

<!--

function examine(val){

if(isNaN(val)){

document.n.txt.value="";document.n.txt.focus();}

}

//-->

</SCRIPT>

<FORM NAME="n">

<INPUT NAME="txt"TYPE="text"VALUE=""ONCLICK="examine(this.value)">

</FORM>

**** ملاحظه ****

لاحظ كيف تستخدم الكلمه الرئيسيه this في جافا سكربت في نقل رابط الكائن

الخاص بـ document.txt

حدث Blur

يتم تشغيل الحدث عندما يتحول التركيز في المتصفح بعيد عن عنصر في نموذج او

اطار معين ويقوم معالج الحدث onblur باستدعاء جافا سكربت وفي المثال التالي

يقوم المستخدم بادخال بعض البيانات في مربع النص الذي تركه منذ قليل

كود:

<SCRIPT TYPE="text/javascript">

<!--

function isentry(val){

if(val==""){

alert("Please enter data"); document.n.txt.focus();}

}

//-->

</SCRIPT>

<FORM NAME="n">

<INPUT NAME="txt"TYPE="text"VALUE=""ONBLUR="isentry(this.value)"></FORM>

كما يمكنك الاستعانه بتقنيه blur الخاصه بعنصر في النموذج في منع ادخال ايه بيانات

في المربعات النصيه المصممه للقراءه فقط ويقوم هذا المثال بالغاء التحديد الخاص

بالبيانات النصيه اذا حاول المستخدم ان يقوم بادخال ايه بيانات

كود:

<INPUT TYPE="text"VALUE="Read"ONFOCUS="blur(this)">

**** ملاحظه ****

تعمل تقنيه window.blur على تصغير الاطار

حدث Change

يتم تشغيل الحدث في حاله تغيير القيمه الخاصه بالبيانات النصيه او عند قيام

المستخدم بتحديد عنصر في قائمه الخيارات يمكن لمعالج الحدث onchange ان يقوم

باستدعاء جافا سكربت لتنفيذ بعض الاكواد عندما يتم تشغيل حدث change ويقوم المثال

التالي بضبط الخيار الاولي الذي تم تحديده على اللون الاخضر ثم يقوم بتعيين

معالج الحدث الذي يعرض القيمه المحدده في مربع النص عند تغيير التحديد

كود:

<SCRIPT TYPE="text/javascript">

<!--

function init(){

document.n.s.options[1].selected=true;

document.n.s.onchange=showselected;

}

function showselected(){

document.n.txt.value=document.n.s.options[document.n.s.selectedIndex].value;

}

window.onload=init;

//-->

</SCRIPT>

<FORM NAME="n">

<INPUT NAME="txt"VALUE="">

<SELECT NAME="s">

<OPTION VALUE="red">Red

<OPTION VALUE="green">Green

<OPTION VALUE="blue">Blue

</SELECT>

</FORM>

حدث Reset

يتم تشغيل الحدث عندما يقوم المستخدم بالضغط على زر reset الخاص بالنموذج

او عندما تقوم داله جافا سكربت بتنفيذ تقنيه form.reset وقد يقوم معالج الحدث

onerset باستدعاء داله جافا سكربت عندما يتم حدث reset وفي هذا المثال يتم

تحديد معالج الحدث لسمه onreset الخاصه بـ html في علامه الترميز <form>

ولذلك سيتم تغيير قيمه زر الاختيار كما سيتم عرض القيمه الخاصه بالسمه في مربع

النص التابع للنموذج الثاني عندما يتم اعاده ضبط النموذج الاول

كود:

<SCRIPT TYPE="text/javascript">

<!--

function showvalue(){

document.n1.r[0].value="Salmon";

document.n2.txt.value=document.n1.r[0].value;

}

//-->

</SCRIPT>

<FORM NAME="n1"ONRESET="showvalue()">

<INPUT TYPE="radio"NAME="r"VALUE="Red"CHECKED>Red

<INPUT TYPE="radio"NAME="r"VALUE="Green">Green

<INPUT TYPE="radio"NAME="r"VALUE="Blue">Blue

<INPUT TYPE="reset"VALUE="Reset">

</FORM>

<FORM NAME="n2">

<INPUT TYPE="text"NAME="txt"VALUE="">

</FORM>

حدث Submit

يتم تشغيل الحدث عندما يقوم المستخدم بالضغط على زر submit في النموذج وعند

استدعاء معالج الحدث onsubmit لداله واحده لتاكيد صحه النموذج قبل التقديم

واذا قام معالج الحدث بعرض قيمه false فلن يتم ارسال بيانات النموذج يوضح

المثال عمليه تحقق من صحه عنوان بريد الكتروني ويقوم بعرض رساله تحذير

للمستخدم اذا ثبت خطأ هذا العنوان

كود:

<SCRIPT TYPE="text/javascript">

<!--

function validation(){

if(document.n.email.value.indexOf("@")==-1){

alert("Email address is absent or incorrect");

return false;}

}

//-->

</SCRIPT>

<FORM NAME="n"METHOD="post"ACTION="mailto:NaWaL2040@HotMail.Com"ENCTYPE="text/plain"ONSUBMIT="return validation()">Enter your email address:

<INPUT NAME="email"TYPE="text"VALUE="">

<INPUT TYPE="submit"VALUE="Submit">

</FORM>

حدث Abort

يتم تشغيل الحدث عندما يقوم المستخدم بالغاء تنزيل الصوره غالبا من خلال النقر

على زر stop الموجود في شريط الادوات الخاص بمتصفح الويب وقد يقوم معالج الحدث

onabort باستدعاء داله جافا سكربت في حاله الغاء تنزيل الصوره وقد يتم تحديد

معالج الحدث لسمه onabort في علامه الترميز <img> لخاصه بلغه html وفي المثال

التالي يقوم معالج الحدث بانشاء رساله تحذير تعمل على تاكيد الغاء عمليه التنزيل

كود:

<SCRIPT TYPE="text/javascript">

<!--

function abortmsg(){

alert("Image Download Aborted");

}

//-->

</SCRIPT>

<IMG SRC="bigpic.jpg"WIDTH="1024"HEIGHT="768"ALT=""ONABORT="abortmsg()">

حدث Resize

يتم تشغيل الحدث عندما يقوم المستخدم باعاده ضبط اطار المتصفح وبالتالي

يقوم معالج الحدث onresize بتنفيذ الكود حتى يجعل الصفحه مناسبه لحجم الاطار

الجديد ويمكن الاستفاده من ذلك في تغيير وضع محتويات صفحه dhtml كما هو موضح

في المثال التالي الذي سيقوم بانشاء طبقه في وضع المنتصف والتي سيتم تغييرها

في حاله حجم الاطار مره اخرى

كود:

<SCRIPT TYPE="text/javascript">

<!--

if(document.layers)document.write("<LAYER ID='lyr'TOP='20'BGCOLOR='silver'WIDTH='100'HEIGHT='50'Z-INDEX='10'>Layer</LAYER>");

if(document.all)document.write("<DIV ID='lyr'STYLE='position:absolute;top:20px;width:100px;height:50px;background-color:silver;z-index:10'>Layer</DIV>");

function fixpos(){

var innerwidth=(document.layers)?self.innerWidth:

document.body.clientWidth;

var fixleft=(innerwidth/2)-50;

(document.layers)?document.lyr.left=fixleft:lyr.style.left=fixleft;

}

fixpos()

window.onsize=fixpos;

//-->

</SCRIPT>

**** ملاحظه ****

تقوم داله fixpos() بتقسيم عرض الاطار الى اثنين لانشاء مركز الاطار الافقي

ثم يتم طرح عرض الطبقه لتحديد الوضع الايسر للطبقه

دورة جافا سكربت - Javascript الدرس الثاني عشر

بحث هذه المدونة الإلكترونية

اقسام المدونة

أرشيف المدونة الإلكترونية

من انا ؟