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

يحتوي على

*** منشئ الكائن
*** اكتساب الخصائص
*** التسلسل الخاص بـDOM
*** استعراض كائنات الصفحه
*** نوع المتصفح
*** التعرف على المتصفح
*** فحص نظام التشغيل
*** برنامج Shockwave
*** اسلوب التعامل مع الاخطاء في Java

منشئ الكائن

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

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

على سبيل المثال تقوم خاصيه array.length بعرض خاصيه الطول بالنسبه لكائن المصفوفه

ويمكن انشاء كائنات مخصصة جديدة بسهولة من خلال استخدام الكلمة الرئيسية new

في لغه جافا سكربت والمنشئ Object() من الممكن تحديد الخصائص بالنسبه للكائن

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

ويقوم المثال التالي يقوم بانشاء كائن جديد باسم car ويقوم بتحديد ثلاث خصائص لهذا

الكائن ذات قيم محددة

كود PHP:

  var car=new Objcet(); 

car.maker="Porsche"; 

car.model="Boxster"; 

car.color="Red"; 

alert(car.color+""+car.maker+""+car.model);

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

الكائن المخصص الذي تم انشاؤه حديثا كخاصيه في كائن اخر مخصص وفي هذه الحاله يتم

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

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

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

مع هذه الكائنات والخصائص في صفحات الويب

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

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

كود PHP:

  var mondeo=new Object(); 

mondeo.badge="Mondeo"; 

mondeo.body="Saloon"; 

mondeo.doors=4; 

mondeo.color="Red"; 

mondeo.engine="1.8 litre"; 



var car=new Objcet(); 

car.maker="Ford"; 

car.model=mondeo; 

alert(car.maker+""+car.model.badge+""+car.model.body);

التسلسل الخاص بــ DOM

يشير Document Object Model(DOM) في اي متصفح مجموعة من الكائنات في

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

اداء المستند الذي تم انشاؤه بلغه HTML وتتبع هذه الكائنات تسلسلا محددا بحيث

يكون كائن window في المستوى الاول ونظرا لان كائن window يتصدر القائمه يمكن

حذفه من العنوان وبذلك يمكن عرض خاصيه window.document.bgColor التي تقوم بتخزين

لون الخلفيه الحالي الخاص بقيمه الاطار كــ document.bgColor

وتمتلك العديد من كائنات DOM خصائص حتى يمكنها ان تشتمل على مصفوفة

من العناصر في صفحه الويب على سبيل المثال تستخدم مصفوفه images[] مع

document.images[] كخاصيه في كائن document الذي سيقوم

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

ويتم تخزين العنوان الخاص بالصورة الاولى في الكود الذي تمت كتابته بلغة html داخل

المصفوفه document.images[0] ثم يتم تخزين العنوان الخاص بالصور المتتابعه في فهارس

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

ادوات التصفح ولذلك فان Netscape DOM تختلف عن DOM الاكثر اشتمالا والتي يستخدمها

Microsoft Internet Explorer يقوم هذا المثال بتعيين قيمه لخاصيه document.bgColor

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 

document.bgColor = "black"; 

//--> 

</SCRIPT>

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

يمكن استخدام تركيب self لعرض الـ window مثل self.bgColor

استعراض كائنات الصفحة

يوضح النص البرمجي التالي كائنات window الافتراضيه في كل من اصداري المتصفحين

Internet Explorer 5.5 و Netscape 4.7

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



for(propertyName in window) 

document.write(propertyName+","); 

//--> 

</SCRIPT>

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

يمكن لهذا النص البرمجي ان يوضح المزيد من كائنات DOM عند استبدال كائن window

بكائن document لمعرفه المزيد

نوع المتصفح

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

لعرض المستند وتقوم خاصية navigator.appName بعرض اسم المتصفح

بينما تعرض خاصية navigator.appVersion بعرض رقم الاصدار الخاص بالمتصفح

وبالإضافه الى رقم الاصدار فان خاصيه navigator.appVersion تحتوي على مزيد من

التفاصيل الاختياريه وفي المثال القادم يتم عرض معلومات اضافيه للمستخدم خاصة

بنظام التشغيل كما يعرض المتصفح الخاص بك بشركه نت سكيب لغات خاصه بالمستخدم

وتفاصيل تتعلق بعمليه التشفير لمنع الوصول الى البيانات

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



var browser = navigator.appName; 



var version = navigator.appVersion; 

alert(browser+"\n"+version); 

//--> 

</SCRIPT>

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

ينتهي عرض البيانات في الشكل التالي بحرف "i" الكبير للدلاله على مستوى

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

التعرف على المتصفح

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

او تطبيق كود خاص بمتصفح معين باضافه خصائص جديده الى كائن document لتشغيل المؤثرات

الديناميكيه في dhtml وقدمت شركه Netscape خاصيه document.layers بينما قامت شركة

مايكروسوفت بانشاء خاصيه document.all ومن الافضل ان تقوم بفحص هذه الخصائص من

اجل التعرف على نوع المتصفح والتاكد من قدرته على الكتابه بلغه dhtml

ويقوم المثال التالي باختبار ادوات التصفح وفتح الصفحة الخاصه بالمتصفح طبقا لادوات

التصفح الحديثه والقديمه الخاصه بشركة Netscape وشركه Microsoft او الصفحه الافتراضيه

الخاصه بايه ادوات تصفح اخرى

كود PHP:

  if(document.all)window.location = "ie-dhtml.html"; 



if(document.layers)window.location = "nn-dhtml.html"; 



else { 



var oldnn = (navigator.appName == "Netscape" 

&& parseInt(navigator.appVersion)<4); 

location = (oldnn) ? "nn-old.html" : "default.html"; } 



}

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

تحتوي خاصيه الموقع التابعه لكائن window على موقع الصفحه الحالي ولذلك فان تغيير قيمتها

سيؤدي الى تحميل موقع جديد

فحص نظام التشغيل

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

لنقص الدعم في محتوى الصفحه ولذلك فان ايه صفحات ويب تحتوي على عنصر التحكم ActiveX

لن تعمل بالشكل المطلوب على هذا النظام كما ان مؤثرات dhtml التي تعمل بشكل جيد في

متصفح انترنت اكسبلور على نظام التشغيل المستخدم في الكمبيوتر الشخصي لن تعمل بنفس

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

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

navigator.paltform وتحتوي هذه الخاصيه على سلسله قصيره تقوم بعرض نظام التشغيل

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

في نظام التشغيل ويقوم المثال التالي بكتابه سطر من النص طبقا لنظام

التشغيل الذي تم تحديده

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



if(navigator.platform == "Win16")var os="Windows3.1"; 



if(navigator.platform == "Mac")os="MacOS"; 



if(navigator.platform == "Win32")os="Windows95"; 

document.write("Operating system is" +os); 

//--> 

</SCRIPT>

برنامج Schockwave

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

ان يقوم بعرض فيلم Flash Macromedia وتحميل ايه صفحة بديله اذا كان برنامج Schockwave

غير متاح ويمكن استخدام navigator.plugin في ادوات التصفح الخاصه بشركه النت سكيب من

اجل الحصول على برنامجي Flash و SchockKwave بطريقه مباشره ولكن هذخ الخاصيه

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

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

كود PHP:

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

&&navigator.appVersion.indexOf("Mac") ==-1 

&&navigator.appVersion.indexOf("3.1") == -1) 



|| 



(navigator.plugins&&navigator.plugins["Shockwave Flash"]) 



||navigator.pulgins["Shockwave Flash 2.0"]) window.location = "playflash.html"; 



else 

window.location = "noflash.html";

اسلوب التعامل مع الاخطاء في لغه جافا Java

يمكن تقيم مستوى كفاءة المتصفح باستخدام لغه جافا من خلال تقنية navigator.javaEnabled()

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

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

او اذا كان يجب تحميل صفحه اخرى بديله غير التي تم انشاؤها بلغه جافا ويوضح المثال التالي

كيفيه التعامل مع الاخطاء في لغه جافا

كود PHP:

  if(navigator.javaEnabled()) 

window.location = "javapage.html"; 



else 

window.location = "nonjavapage.html";

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

لاحظ ان javaEnabled() تعتبر بمثابه تقنيه خاصة بكائن navigator وليست مجرد خاصيه ولذلك فهي يجب ان تكون متبوعه باقواس

انتهى الفصل الثامن

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

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

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

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

من انا ؟