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

محتوى الفصل التاسع

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

عملية التاكيد

تعتبر خاصيه alert() بمثابه تقنيه تابعه لكائن window ولذلك ويمكن كتابتها كالاتي

window.alert() وتعتبر تقنيه window.confirm بمثابه التقنيه الاولى في التقنيتين

الخاصتين بكائن window والتي تعرض مربعات نصيه عند استدعائها ويمكن استخدامها للحصول

على تاكيد من المستخدم في مربع الحوار الذي يحتوي على زر Ok الذي يقوم بعرض true

اوزر Cancel الذي يقوم بعرض false للنص البرمجي يجب ان يتم تعيين وسيط واحد في

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

التالي تقنيه window.confirm التي تقوم بالتقسيم الشرطي لتحديد سلسله الرساله

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

كود PHP:

  var ask = comfirm("Do you wish to proceed?"); 



var msg; 



if(ask)msg="OK button was pushed"; 



else msg = "Cancel button was pushed"; 

document.write(msg);

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

وفي هذا المثال تعتبر ask بمثابه اختصار لـ (true==ask)

عمليه الادخال

تستخدم تقنيه window.prompt() لاتاحه امكانيه ادخال البيانات الخاصه بالمستخدم

من لوحه المفاتيح عبر مربع حوار يحتوي على زري OK و Cancel وتحتاج هذه التقنيه الى

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

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

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

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

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



var user = prompt("Please enter your name...",""); 



if(user==null||user=="")user="visitor"; 

document.write("Hi "+user+",welcom to this page"); 

//--> 

</SCRIPT>

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

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

اهميه تحديد موضع الاطار

يحتوي كائن window.location على العنوان الكامل الخاص بالمستند الذي يتم تحميله في المتصفح

كما انه يقوم بتخزين العنوان الكامل في خاصيه window.location.herf وتحديد قيمه جديده

له او الكائن window.location نفسه الذي سيقوم بتحميل العنوان في المتصفح ويتكون العنوان

المثالي من الاجزاء التاليه :

كود PHP:

protocol://host/pathname?#hash

ويتم عرض كل اجزاء العنوان المخزنه في كائن window.location بطريقه فرديه باستخدام

خاصيه location المناسبه كما هو موضح في المثال التالي

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



var locn = "Href:"+location.href; 



var port = "Protocol:"+location.protocol; 



var host = "Host:"+location.host; 



var path = "Path:"+location.pathname; 



var hash = "Hash:"+location.hash 



alert(locn+"\n"+port+"\n"+host+"\n"+path+"\n"+hash); 

//--> 

</SCRIPT>

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

عند تحديد قيمه جديده لخاصيه location.hash يتنقل المتصفح الى الموقع المحدد في الصفحه

الانتقال بين الصفحات

يحتوي كائن window.history على مصفوفه خاصه بعناوين المواقع التي قمت بزيارتها سابقا

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

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

بكائن window.history بنفس وظيفيه ازرار Backward و Forward في المتصفح ويمكن الحصول

على مزيد من المرونه في عمليه الانتقال باستخدام تقنيه window.history.go التي تقوم

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

الوسيط 1- بالعوده الى الصفحه السابقه وتعمل قيمه 2- على اعاده فتح الصفحه التي تسبقها

وبنفس الطريقه فان قيمه الوسيط window.history.go(1) ستنتقل الى الصفحه التاليه في مصفوفه

history الخاصه بالعناوين ويعمل استدعاء قيمه الوسيط window.history.go على اعاده تحميل

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

باسترجاع الصفحه السابقه من اجل تكمله حقل النص

كود PHP:

if(required_input=="")history.go(-1);

التحميل

يستخدم كائن window.onload في تحديد اسم الداله التي يتم استدعاؤها في الحال بعد ان

يتم تحميل المستند في المتصفح وتقوم الداله init() بتعيين قيمة للكائن وغالبا ما تستخدم

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

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

الضروري ان تقوم بانهاء التحميل قبل ان يبدا تشغيل النص وتقوم سمه onload في html

التي قد تكون مدرجه في علامه الترميز body بتحديد داله onload ولذلك يجب ان تكون حذرا

حتى لا تقوم بحذف الداله بالاخرى من خلال الكتابه عليها وينطبق هذا على كائن

window.onunload وسمه onload التي تقوم بتحديد الداله بهدف استدعائها عندما ينتقل

المستخدم الى الموقع الجديدويقوم كائن window.onunload باستدعاء الداله التي تقوم

بانشاء اطار منبثق عندما يغادر المستخدم موقع الويب ويقوم المثال التالي بعرض مربع

حوار التحذير عندما يخرج المستخدم من هذه الصفحه

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



function goodbye(){ 

alert("Thanks for calling - Come back soon"); 



} 

window.onunload = goodbye; 

//--> 

</SCRIPT>

استخدام شريط الحاله

يمكن استخدام كائن window.status لعرض الرساله في شريط الحاله الخاص

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

في شريط الحاله او يتم ارجاع شريط الحاله الى الوضع الافتراضي يمكن تحديد

الرساله الافتراضيه باستخدام window.defaultStatus وحتى يمكن عرض الرساله عندما يقوم

المستخدم بوضع المؤشر على الارتباط التشعبي فان سمه html في onmouseover يجب ان

تقوم بتحديد الرساله حتى يتم عرضها كما انها يجب ان تقوم بعرض true لمنع عنوان

الرابط من الظهور في شريط الحاله كما يحدث دائما

يقوم هذا المثال الذي يستخدم جافا سكربت داخل علامات الترميز html بتحديد الرساله

الافتراضيه واضافه onmouseover للرابط الذي يقوم بعرض رساله اخرى اثناء وجود المؤشر

على الرابط

كود PHP:

  <BODY ONLOAD = "window.defaultStatus = 'Status Demo'"> 



<A HREF ="nextpage.htm" 

ONMOUSEOVERN ="window.status='Click Here';return true"> 

Hypertext Link</A>

الاطارات المنبثقه

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

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

window.open() التي تتطلب ثلاثه وسائط لتحديد عنوان الموقع الذي سيتم تحميله في الاطار

المنبثق وكذلك اسم الاطار والسمات المطلوبه وتعتبر الاطارات المنبثقه اصغر من الاطارات

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

على روابط خاصه بها في الصور الصغيره يقوم المثال التالي بفتح الاطار الفرعي

والذي يتبع في تحميله نفس خطوات الاطار الاول

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



function popup(){ 

window.open("popup.html","", 

"top=40,left=40,width=200,height=100"); 



} 

window.onload=popup; 

//--> 

</SCRIPT>

سمات الاطارات المنبثقه

قد يقوم الوسيط الثالث في تقنيه window.open بتحديد العديد من السمات التي سيتم ادراجها

في الاطار الجديد من القائمه

السمه Directories وظيفتها اضافه شريط الروابط

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

السمه Left وظيفتها احداثي x الخاص بالاطار على الشاشه

السمه Location وظيفتها اضافه شريط العنوان

السمه Menubar وظيفتها اضافه اشرطه القوائم القياسيه

السمه Resizable وظيفتها يسمح بالتحكم في حجم الاطار

السمه Scrollbars وظيفتها الحصول على اشرطه التمرير عند الحاجه اليها

السمه Status وظيفتها اضافه شريط الحاله

السمه Toolbar وظيفتها اضافه شريط الازرار مع كل من زر back وزر forward

السمه Top وظيفتها احداثي y الخاص بالاطار على الشاشه

السمه Width وظيفتها يتحكم في العرض باستخدام وحدات البكسل في مساحه المستند

تحتاج سمات الابعاد الخاصه بالارتفاع والعرض والطول الى تحديد قيمه وحدات البكسل

يمكن لجميع السمات الاخرى ان تحتوي على قيمه yes او no ولكن اذا ظهرت السمه في الوسيط

يتم تعيين yes كقيمه افتراضيه في الوسيط ولذلك فان القيمه لا تكون بحاجه لتحديدها

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

فانك ستكون بحاجه الى اضافه status الى قائمه السمات

كود PHP:

  function popup(){ 

window.open("popup.html","","top=40,left=40,width=200,height=100,status"); 



}

اغلاق الاطار المنبثق

يمكن للاطار ان يغلق نفسه من خلال استدعاء تقنيه windoe.close() ولكن اغلاق اطار منبثق يتطلب

ايضا الى جانب هذا مجهود بسيطا يجب ان يتم تخصيص الاستدعاء الاول لتقنيه window.open

لمتغير معين لانشاء كائن window ويكتسب كائن window الجديد تقنيه windoe.close

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

اطار منبثق قبل اغلاقه عندما يخرج المستخدم من الاطار الرئيسي

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



var popwindow; 



function popup(){ 

popwindow = window.open("popup.html","","top=40,left=40,width=200,height=100,directories,location,menubar,resizable,scrollbars,toolbar"); 



} 



function close_popup() { 



if(popwindow != null)popwindow.close(); 



} 

window.onload = popup; 

window.onunload = close_popup; 

//--> 

</SCRIPT>

ضبط الحجم

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

بكائن window.screen ونظرالان الاطار قد لا يتم تكبيره بشكل كلي يجب ان تقوم بتحديد

العرض الداخلي للاطار وتحتوي التشكيلات لخاصه بالكائن document في ادوات التصفح على

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

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

الداخلي للاطار لكل من المتصفحين

كود PHP:

  if(document.all){  //Internet Explorer 

var win_w = window.document.body.clientWidth; 



var win_h = window.document.body.clientHeight; 



} 



if(document.layers){ //Netscape 

win_w = window.innerWidth; 

win_h = window.innerHeight; 



} 



if(document.all || document.layers){ 



var scr_w = window.screen.width; 



var scr_h = window.screen.height; 



var res = "Resolution:"+scr_w+"x"+scr_h; 



var iwin = "Innerwindow:"+win_w+"x"+win_h; 

alert(res+"\n"+iwin); 



}

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

قم باستدعاء تقنيه window.print() لطبع المستند في اطار المتصفح

مصفوفه المقاطع

يحتوي كائن window.frames على مصفوفه خاصه بجميع المقاطع في الاطارات التي تم تعريفها

داخل علامات ترميز frameset الموجوده في html ويمكن للغه جافا سكربت ان تقوم بعرض

علامات الترميز من داخل اي مقطع باستخدام تركيب parent.window.frames ويمكن عرض المقاطع

الفرديه باستخدام ارقام الفهارس الخاصه بها في

المصفوفه او القيمه التي تم تحديدها في سمه name داخل علامه الترميز frame التي

كتابتها بلغه html ولذلك فان اي مقطع يحمل اسم main يمكن ان يتم عرضه من داخل اي مقطع

اخر عن طريق parent.window.frames.main ويتم تشغيل الكود في المثال التالي من

داخل المقاطع لقراءة الاسماء الخاصه بكل المقاطع في الاطار

كود PHP:

  var framenums = "No.frames:" 

+parent.window.frames.length; 



var framenames = "\nFrame1:" 

+parent.window.frames[0].name; 



var framenames+= "\nFrame2:" 

+parent.window.frames[1].name; 



var framenames+= "\nFrame3:" 

+parent.window.frames[2].name; 

alert(framenums+framenames);

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

عند تعيين اسماء لجميع العناصر التي تم كتابتها بلغه html حتى يتم استخدامها من خلال

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

كيفيه الوصول الى المقاطع داخل الاطار

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

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

الشاشه على ازرار تقوم عند الضغط عليها بتحديد عناوين المواقع الجديده للاطار الرئيسي

على الجانب الايمن من الشاشه ويقوم هذا المثال بتكمله المثال السابق الذي يقوم بعمليه

كتابه النص لمقطع hdr واضافه داله لتغيير الموقع الخاص بالمقطع btm

كود PHP:

  function next(){ 

parent.frames.btm.window.location = "nextpage.htm"; 



} 



function write_header(){ 



var msg = "Frame2<br>Written by Frame1"; 

parent.frames.hdr.window.document.write(msg); 



} 

window.onload = write_header;

معالجة الاخطاء

يمكن تعيين داله مخصصه للتعامل مع الاخطاء لكائن window.onerror من اجل تصحيح الاخطاء

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

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

فتح مربع حوار browser error وعند اكتشاف الخطا يتم عرض قيمه true في المتصفح

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

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

لمعالج الاخطاء حيث تحتوي هذه الوسائط على معلومات خاصه بنوع الخطأ وكذلك عنوان الموقع الخاص

بالملف الذي يحتوي على الخطأ ورقم السطر الفعلي في هذا الملف الذي يحتوي على الخطأ

وفي هذا المثال التالي يتم تعيين كل معلومه خاصه بالخطا في داله error-handler

من خلال المتصفح من اجل مصلحه المستخدم

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 

window.onerror = errorhandler; 



function errorhandler(msg,url,ln){ 

alert("Error:"+msg+"\nIn File:"+url+"\nAt Line:"+ln);  return true; 



} 

//This is a deliberate mistake 

document.form[theMistake].value="myButton"; 

//--> 

</SCRIPT>

انتهى الفصل التاسع

والله يوفق الجميع ان شاااااااء الله

دورة جافا سكربت - Javascript الدرس التاسع

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

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

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

من انا ؟