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

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

*** تحديد الوقت والتاريخ بما يتناسب مع زمن الاستخدام
*** معلومات خاصه بالتاريخ
*** معلومات خاصه بالوقت
*** التوقيت المحلي
*** التعرف على Universal Time Clock
*** المنطقه الزمنيه
*** ادخال قيم لتحديد الوقت والتاريخ
*** اسلوب تخزين القيم الخاصه بكائن date
*** استخدام System Clock
*** الغاء المؤقت الزمني
*** اهميه نظام جافا سكربت في Clock

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

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

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

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

الذي يقوم بتشغيل تطبيق في المتصفح الذي يتم تحميل النص فيه

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

ان يقوم النص اولا بانشاء كائن date

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

باستخدام الكلمه الرئيسيه new في لغه جافا سكربت ولكن لا يتم ذلك باستخدام

المنشئ Date() ويقوم المثال التالي باشناء وعرض كائن date الجديد

كود:

<SCRIPT TYPE="text/javascript">

<!--

var now=new Date();

alert(now);

//-->

</SCRIPT>

المعلومات الخاصه بالتاريخ

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

بعض الاجزاء الخاصه بمعلومات الوقت وتقوم بعض التقنيات بعرض

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

الى تغييرها في نص البرمجه

تقوم تقنيه date.getDay() بعرض اليوم كقيمه مسلسله بدايه من الاحد Sunday بالقيمه صفر

وحتى القيمه 6 السبت Saturday

وتقوم تقنيه date.getMonth() بعرض الشهر كقيمه مسلسله بدء من january تاخذ القيمه صفر

december تاخذ القيمه 11

كود:

<SCRIPT TYPE="text/javascript">

<!--

var days=new Array("sat","sun","mon","tue","wed","thu","fri");

var mons=new Array("jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec");

var now=new Date();

var yy=now.getYear();

var mm=now.getMonth();mm=mons[mm];

var dd=now.getDate();

var dy=now.getDay();  dy=days[dy];

alert(dy+""+dd+""+mm+""+yy);

//-->

</SCRIPT>

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

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

ولاحظ ايضا ان الايام والشهور في الفهرس تبدا بصفر

المعلومات الخاصه بالوقت

يحتوي كائن time على تقنيات خاصه تمكنك من الوصول الى المعلومات التي يحتويها

المثال التالي يوضح الساعات والدقائق والثواني والملي الثانيه من الساعه

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

كود:

<SCRIPT TYPE="text/javascript">

<!--

var now=new Date();

var hh=now.getHours();

var mn=now.getMinutes();

var ss=now.getSeconds();

var ms=now.getMilliseconds();
 
var hi="Good Morning";

if(hh>11)hi="Good Afternoon";

if(hh>17)hi="Good Evening";

var tim=hi+"\n";

tim+="Hours:"+hh+"\n";

tim+="Minutes:"+mn+"\n";

tim+="Seconds:"+ss+"\n";

alert(tim);

//-->

</SCRIPT>

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

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

بـ 24 ساعه

التوقيت الحالي

يمكن استخدام تقنيه في date.getTime() في جافا سكربت لمقارنه اثنين من

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

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

القيمه في كائن date منتصف الليل في الاول من يناير في عام 1970

المثال التالي يقوم بانشاء كائن time قبل وبعد تشغيل نظام التكرار ثم يقوم

بمقارنه القيم التي قامت تقنيه date.getTime() بعرضها من اجل حساب الوقت

المستهلك في تنفيذ نظام التكرار

كود:

<SCRIPT TYPE="text/javascript">

<!--

var start = new Date();

var msec1=start.getTime();

var num=0;

for(var i=0;i<250000;i++){

num++;

}

var stop=new Date();

var msec2=stop.getTime();

var diff=(msec2-msec1)/1000;

alert("Time elapsed:"+diff+"seconds");

//-->

</SCRIPT>

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

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

التكرار من 250000الى 5000

التعرف على Universal Time Clock

يعتبر Universal Time بمثابه التوقيت العالمي الذي يعمل طبقا لتوقيت

Greenwich Mean Time توقيت خط جرينتش وتقوم التقنيات الخاصه بكائن time

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

ولكن في بعض الاحيان يفضل استخدام التوقيت العالمي Universal Time

ولذلك فان كائن date يحتوي على سلسله من التقنيات التي تقوم

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

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

على الكمبيوتر الشخصي طبقا لـ Western European Time (التوقيت الغربي الاوربي)

كود:

<SCRIPT TYPE="text/javascript">

<!--

var now=new Date();

var hh=now.getHours();

var mn=now.getMinutes();

if(mn<=9)mn="0"+mn

var ss=now.getSeconds();

var utc_hh=now.getUTCHours();

var wet="athens time:"+hh+":"+mn+":"+ss+"\n\n";

var utc="Universal time:"+utc_hh+":"+mn+":"+ss;

alert(wet+utc);

//-->

</SCRIPT>

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

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

ولذلك فان نص البرمجه سيقوم باضافه صفر اليها

المنطقه الزمنيه

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

التقنيه date.getTimeOffest() وتقوم التقنيه بتحديد الوقت المحلي من كائن date

ثم يقوم بمقارنته بنظام UTC وتمثل القيمه الناتجة الفرق بين الوقتين

محددا بالدقائق لان الفرق بين بعض البلاد قد يصل الى ساعه كامله

المثال التالي تقوم تقنيه date.getTimezoneOffset() بتحديد المنطقه

الزمنيه الخاصه بالمستخدم

كود:

<SCRIPT TYPE="text/javascript">

<!--

var now=new Date();

var offset=now.getTimezoneOffset();

var msg;

switch(offset){

case 240:msg="East Coast";break;

case 300:msg="Central";break;

case 360:msg="Mountain";break;

case 420:msg="Pacific";break;

default:msg="all";

}

alert("Welcome to"+msg+"visitors.");

//-->

</SCRIPT>

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

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

الويب المحليه ايضا

ادخال قيم لتحديد التاريخ والوقت

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

باستخدام العديد من تقنيات date.set وتقوم هذه التقنيات السابقه بتوضيح تقنيات

date.get التي تستخدم في عرض بعض المعلومات الخاصه بكائن date ولكنها تستخدم هنا في وضع

قيم جديده المثال التالي يتم تخزين القيم الاوليه الخاصه بكائن date

في متغير orig ثم تقوم تقنيات date.set بادخال قيم جديده الى date

كود:

<SCRIPT TYPE="text/javascript">

<!--

var now=new Date();

var orig="Original:\n"+now.toString()+"\n\n";

now.setDate(21);

now.setMonth(1);

now.setHours(12);

now.setMinutes(30);

now.setSeconds(15);

now.setFullYear(2005);

var mod="Modified:\n"+now;

alert(orig+mod);

//-->

</SCRIPT>

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

تقوم تقنيه toString() المستخدمه هنا بعرض قيمه عباره عن سلسله حرفيه في كائنات

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

اسلوب تخزين القيم الخاصه بكائن date

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

من اجل تخزينها او استخدامها وتقوم تقنيه date.toString() في الصفحه المقابله

بتنفيذ هذه العمليه ولكن يفضل تخزين هذه المعلومات في وقت يتفق مع نظام UTC

القياسي تحتوي لغه جافا سكربت على تقنيه date.toGMTString() التي تقوم بتحويل

القيم الى سلاسل حرفيه وتقوم بتحويلها الى المنطقه الزمنيه GMT

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

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

الفتره الزمنيه الخاصه بملفات البيانات

مثال بسيط هنا لتوضيح تقنيه date.toGMTString() والتي تقوم بعمليات التحويل

في متصفح من مدينه الرياض

كود:

<SCRIPT TYPE="text/javascript">

<!--

var now=new Date();

var ksa="riyadh time :\n"+now.toString()+"\n\n";

var gmt="UTC time :\n"+now.toGMTString();

alert(ksa+gmt);

//-->

</SCRIPT>

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

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

غيرتها الى السعوديه المدينه الرياض

يجب ان تغير ksa في السطر الرابع والسطر الخامس الى الدوله التي انت فيها

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

استخدام ساعة النظام

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

الويب فان ساعه النظام يمكن استخدامها مع تقنيه setTimeout() الخاصه

بكائن window في جافا سكربت وتقوم هذه التقنيه بتشغيل الداله بعد فتره

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

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

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

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

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

المثال التالي يقوم باستخدام تقنيه window.setTimeout() من اجل عرض مربع حوار

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

كود:

<SCRIPT TYPE="text/javascript">

<!--

var num=0;

function annoy(){

num++;

alert("This is 10-Second Message No:"+num);

window.setTimeout("annoy()",10000);

}

annoy();

//-->

</SCRIPT>

الغاء المؤقت الزمني

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

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

الغاء تقنيه settim out() بسهوله من خلال استخدام تقنيه clear time out() الخاصه

بكائن window فلكي تقوم بحذف القيمه التي قمت بتحديدها في المؤقت الزمني بطريقه

صحيحه من الضروري ان تقوم بتحديد مركز الاستدعاء الاصلي لتقنيه setTimeout من

اي متغير بحيث يمكن للمتغير ان يتم ادخاله في الوسائط الخاصه بداله clearTimeout()

المثال التالي يقوم بعرض رساله مرتين ثم يقوم بعرض رساله اخيره

عند حذف ايه قيمه في المؤقت الزمني

كود:

<SCRIPT TYPE="text/javascript">

<!--

var num=0,tim;

function advise(){

num++;

if(num==3){

alert("Ok-Itold you twice");   window.clearTimeout(tim);

}else{

alert("This is 10-Second Message No:"+num);

tim=window.setTimeout("advise()",10000);}

}

advise();

//-->

</SCRIPT>

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

يطلق سم المتغير tim على متغير المؤقت الزمني timer

اهميه نظام جافا سكربت في clock

يمكنك من خلال كائن date كائن tim ان تقوم بانشاء عرض زمني يقوم

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

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

داخل نموذج تم انشاؤه باستخدام html

كود:

<HTML>

<BODY ONLOAD="tick()">

<SCRIPT>

<!--

function tick(){

var now=new Date();

var hh=now.getHours(); if(hh<=9)hh="0"+hh;

var mn=now.getMinutes(); if(mn<=9)mn="0"+mn;

var ss=now.getSeconds(); if(ss<=9)ss="0"+ss;

var tt=hh+":"+mn+":"+ss; document.f.clock.value=tt;

window.setTimeout("tick()",1000);

}

//-->

</SCRIPT>

<FORM NAME="f">

<INPUT NAME="clock"TYPE="text"SIZE="10">

</FORM>

</BODY>

</HTML>

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

افضل الاكواد جربها ;)

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

تحتاج الساعه الى ان تبدأ من استدعاء onload في علامه الترميز </BODY>

التي انشائها بلغه html

انتهى الفصل الخامس واتمنى انه اكون اضفت شيء مفيد لكم

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

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

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

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

من انا ؟