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

اليوم نبدا الفصل العاشر

محتوى الفصل

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

ضبط الالوان

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

عند استخدام جافا سكربت في تعيين قيمه جديده لخصائص كائن window.document فان هذا يؤدي الى قيام

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

قيم جديده لخاصيتين document.bgColor و document.fgColor اللتين تعملان على تغيير الوان

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

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

كود PHP:

  function setcolor() { 

window.document.bgColor = "black"; 

window.document.fgColor = "white"; 



}

انشاء محتوى فعال باستخدام جافا سكربت

تعتبر تقنيه write الخاصه بكائن window.document بمثابه سمه فعاله حيث تسمح للغه

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

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

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

في html من اجل تنسيق المحتوى وتحتوي تقنيه document.write داخل الكتله النصيه

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

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

سيؤدي الى كتابه المحتوى الذي تم تحديده في مستند خال جديد وبالتالي فانه سيحل

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

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

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

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

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



var n,ntype; 

n = Math.ceil(Math.random()*100); 

ntype = (n %2==0)?"Even":"Odd"; 

document.write("<h1>Number"+n+"is"+ntype+"</h1>"); 

//--> 

</SCRIPT>

التحكم في ملفات البيانات

ملفات البيانات(&@#&@#&@#&@#&@#&@#s) عباره عن ملفات بيانات صغيره الحجم يمكن انشاؤها بلغه

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

في استخدام هذه الملفات التي يصل حجمها الى 4 كيلوبايت كما ان ادوات التصفح الخاصه

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

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

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

window.document.&@#&@#&@#&@#&@#&@# والذي يتكون من ثنائي الاسم/القيمه بحيث لا تحتوي القيمه على ايه

فواصل منقوطه او فواصل عاديه او مسافات ويتم تخزين ثنائي الاسم/القيمه في الملفات الصغيره

من خلال عمل تحديدات اكثر لكائن document.&@#&@#&@#&@#&@#&@# يتم تحديد العمر الافتراضي لاستخدام

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

مالم يتم تحديد تاريخ لانتهاء صلاحيه استخدام الملف في المره الاولى عند انشائه

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

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

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

تقنيه date.toGMTString وتقوم عمليه الحساب في المثال التالي بجمع الايام والساعات والدقائق

والثواني والميلي ثانيه لزياده كائن date بحيث يصل الى اسبوع واحد ويقوم المثال التالي

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

لمده تصل الى سبعه ايام

كود PHP:

  var useraccount = "NaWaL NaNo,000456"; 



var expiry = new Date(); 

expiry.setTime()+(7*24*60*60*1000)); 

document.&@#&@#&@#&@#&@#&@# = "&@#&@#&@#&@#&@#&@#data="+escape(useraccount)+";"+"expires="+expiry.toGMTString()+";";

الحصول على ملفات البيانات

اذا تم تحديد ملف بيانات فان النتيجه التي ستعرضها خاصيه document.&@#&@#&@#&@#&@#&@# ستكون true

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

البيانات فان خاصيه document.&@#&@#&@#&@#&@#&@# تقوم بعرض سلسله بملفات البيانات المخزنه ويمكن استرجاع

اجزاء من البيانات من السلسله المخزنه استخدام تقنيات التعامل مع السلاسل المنظمه

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

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

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

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

ديناميكي مخصص

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



var username = "Guest" , useracct = "00000"; 



if(document.&@#&@#&@#&@#&@#&@#){ 



var &@#&@#&@#&@#&@#&@#data = unescape(document.&@#&@#&@#&@#&@#&@#); 



var userdata = &@#&@#&@#&@#&@#&@#data.spilt("="); 



if(userdata[0]=="&@#&@#&@#&@#&@#&@#data"){ 



var data = userdata[0].spilt(","); 

username = data[0]; 

useracct = data[1];} 



} 

document.write("Welcom "+username+"<br>"); 

document.write("Account number: "+useracct+"."); 

//--> 

</SCRIPT>

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

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

يتم عرض الاسماء الثنائيه المتعدده الخاصه بالاسم/القيمه بشكل تلقائي باستخدام

الفاصله المنقوطه التي تفصل كل اسم ثنائي استخدم تقنيه string.indexOf لتعريف

كل اسم ثنائي مطلوب

المصفوفه الخاصه بالصور

يعتبر كائن window.document.images بمثابه مصفوفه تحتوي على كائنات الصور الموجوده

في صفحه الويب بشكل مرتب والتي قام كود html باضافتها الى الصفحه ولذلك فان الصوره

الاولى في المثال يتم وضعها في عنصر المصفوفه الاولى ويمكن الاشاره اليها على هذا النحو

التالي document.images[0] من الممكن تحديد اسم لكل صوره من خلال تسميه name في html

وكذلك تحديد url لكل صوره تشتمل عليها المصفوفه وذلك معرفه اجمالي عدد العناصر او الصور

المشتمله عليها المصفوفه ايضا وفي الرسم التالي تعتبر اسماء الصور المعروضه هي تلك

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

كود PHP:

  var msg = "Total Images : "+document.images.length;msg 

+="\nMiddle Image Name : "+document.images[1].name;msg 

+="\nMiddle Image Source : "+document.images[1].src; 

alert(msg);

استخدام خاصيه Rollover

اذا تم تحديد اسم للصوره في كود html من خلال تحديد قيمه لسمه name داخل علامه

الترميز <img> فانه يمكن التعامل معها من خلال هذا الاسم في لغه جافا سكربت

كما ان التركيب سيكون بهذا الشكل document.images.imgname وعليه فاذا كانت الصوره

تحمل اسم click فان التركيب سيكون على النحو التالي document.images.click كما

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

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

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

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

الثانيه ثم يتم عرض الصوره الاصليه عند ابعاد المؤشر في مكان آخر قبل ان تقوم

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

المتساويه الابعاد يجب ان تكون علامه الترميز <imag> في لغه html مدرجه بين <> حتى

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

onmouseover او onmouseset كما هو موضح في المثال الذي يعرض خاصيه rollover

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



function swap(n){ 



if(n==0)document.images.click.src="off.gif" 

if(n==1)document.images.click.src="over.gif" 

} 

//--> 

</SCRIPT>  

<A HREF="link.htm" 



ONMOUSEOVER="swap(1)"ONMOUSEOUT="swap(0)"> 



<IMG NAME="click"SRC="off.gif" 



WIDTH="108"HEIGHT="24"ALT=""BORDER="0"></A>

المحتوى الديناميكي

تقوم تقنيه window.document.open بفتح مستند html جديد يمكن كتابته لاستخدامه

في التقنيه المألوفه window.document.write لانشاء المحتوى الديناميكي

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

window.document.close ويقوم المثال التالي بعمل مثال خاص بـ popup window

في الفصل الاخير من خلال كتابه المحتوى من جافا سكربت بدلا من تحميل مستند html الحالي

كود PHP:

  function popup(){ 



var popwindow= 

window.open("","","top=40,left=30,width=200,height=125"); 

popwindow.document.open(); 

popwindow.document.write("Dynameic JavaScript Page<p>"); 

popwindow.document.write("<img src='welcom.gif' width='145' height='49'>"); 

popwindow.document.close(); 



}

عمليه التحديث الاخيره

يمكن لكائن window.document.lastModified ان يقوم بتقديم المعلومات الخاصه بالوقت

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

document.lastModified من راس ملف http لذي تم ارساله بواسطه وحده خدمه الويب

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

document.lastModified في هذه الاحوال سيقوم بعرض قيمه 0 (صفر) وتستخدم هذه

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

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

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

من ان المعلومات قد تم توفيرها لكائن document.lastModified ثم يقوم بكتابه

البيانات في مستند html

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 



if(Date.pares(document.lastModified)!=0) 

document.write("Page last updated: "+document.lastModified); 

//--> 

</SCRIPT>

انشاء طبقات المتوافقه مع متصفح انترنت اكسبلور

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

لمتصفح انترنت اكسبلور من خلال استخدام تقنيه document.write لكتابه علامات الترميز

<div> التي تحتوي على السمات المناسبه للانماط التي يتم تعيينها كقيم داخل الخصائص

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

كود PHP:

  <SCRIPT TYPE="text/javascript"> 



<!-- 

document.write("<div id='layer1'style='position:absolute;top:20;left:20;width:150;height:80;background-color:black;z-index:10'>Layer#1</div>"); 

document.write("<div id='layer2'style='position:absolute;top:40;left:40;width:150;height:80;background-color:silver;z-index:20'>Layer#2</div>"); 

//--> 

</SCRIPT>

يقوم النص البرمجي بانشاء كائنين احدهما يسمى Internet Explorer.layer1 والاخر

window.layer2 حيث يتم تعيين قيم جديده لخصائصها من اجل احداث تاثير ديناميكي

على سبيل المثال حتى تقوم بتغيير موضع الطبقه السوداء الى اليسار بنسبه 120بكسل

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

كود PHP:

layer1.style.left=120;

انشاء طبقات متوافقه مع النت سكيب

من خلال استخدام تقنيه document.write لكتابه علامات الترميز <layers> التي تحتوي على

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

كود PHP:

  document.write("<layer id='layer1'top='20'left='20'width='150'height='80'bgColor='black'z-index='10'>Layer#1</layer>"); 

document.write("<layer id='layer2'top='40'left='40'width='150'height='80'bgColor='silver'z-index='20'>Layer#2</layer>");

تقوم نت سكيب باستدعاء كائني window.document.layer1 و window.document.layer2

بحيث يمكن تعيين قيم جديده لخصائصها لانشاء مؤثرات ديناميكيه

كود PHP:

document.layer1.left=120;

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

تستطيع نت سكيب التعرف على علامه الترميز <div> ولكنها تستخدمها فقط في الكتل النصيه وليس

في طبقات z-index

الطبقات المتوافقه مع ادوات التصفح

تقوم لغه جافا سكربت بالتاكد من وجود كائن document.all لتحديد ادوات التصفح انترنت

اكسبلور التي يتاح من خلالها استخدام الطبقات ويقوم كائن document.layers بتحديد ادوات

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

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

كود PHP:

  if(document.all)document.write("<div id='layer1'style='position:absolute;top:20;left:20;width:80;height:80;background-color:silver;z-index:10'>Layer</div>"); 



else if(document.layers)document.write("<layer id='layer1'top='20'left='20'width='80'leight='80'bgColo='silver'z-index='10'>Layer</Layer>"); 



else alert(navigator.appName+navigator.appVersion+"cannot display DHTML &@#&@#&@#&@#&@#&@#&@#.");

انتهى الفصل العاشر

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

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

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

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

من انا ؟