( admin )
بطاقة الشخصية
 شباب كول:
 | موضوع: سكربت الساعة  السبت سبتمبر 01, 2007 10:37 am | |
|
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
شرح سكربت الساعة
ماذا يفعل هذا السيكربت:
------------------------------
يقوم السيكربت بعرض مربع نصي، يقوم بعرض التوقيت الحالي، و يقوم بتغييره كل ثانية (أي انه يعرض الوقت الحالي ثانية بثانية).
السيكربت:
------------------------------
<head>
<****** ********="Java******">
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning) clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds <10>= 12) ? " P.M." : " A.M."
********.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock() {
stopclock();
showtime();
}
</******>
</head>
<BODY>
<FORM>
<input>
</FORM>
السيكربت:
------------------------------
قبل أن نبدأ بشرح السيكربت نفسه، أحب أن أوضح شيئاً بسيطاً بأن أقفز إلى نهاية الكود السابق و بالضبط حيث:
<BODY>
<FORM>
<input>
</FORM>
</BODY>
نلاحظ فيما سبق أننا قمنا باستخدام تأشيرات الهتمل لإنشاء فورم أسمينها clock و في داخل الفورم انشأنا حقلاً نصياً أسميناه face و جعلنا طوله 15 حرف، و القيمة المبدئية له: لاشيء: ""
و المبرمج ينوي كما هو واضح ان يستخدم هذا الحقل لعرض الوقت، أي سيستخدمه كساعة.
و الآن لننتقل إلى السيكربت نفسه. السيكربت مكتوب بلغة الجافا سيكربت وعند قراءتنا للسيكربت سنجد ان الكاتب وضع متغيرين عامين على جميع الوظائف و هما:
var timerID = null;
var timerRunning = false;
المتغير الأول: timerID فهو عبارة عن كائن سنستخدمه فيما بعد لتخزين الوقت.
المتغير الثاني: timerRunning عبارة عن متغير منطقي، سيتم استخدامه فيما بعد لمعرفة ان كان الوقت مازال يتغير، ام انه توقف لأي سبب من الأسباب.
يتكون من ثلاث وظائف، و هي: ()stopclock و ()showtime و ()startclock و هي موضحة باللون الأحمر في السكربت نفسه.
و سأبدأ الشرح من الوظيفة الأخيرة ترتيباً في السيكربت والأولى في التشغيل الفعلي، و هي: ()startclock
function startclock() {
stopclock();
showtime();
}
من اسم الوظيفة يتضع ان المبرمج ينوي استخدامها كزر تشغيل للساعة :-) او كوظيفة الانطلاق. وهي تحتوي على أمرين
اذا تم استدعاء هذه الوظيفة فهذا يعني اننا سبندأ ساعة، لذا علينا ان نوقف الساعة أولاً (بحيث اذا كانت هناك ساعة قديمة، نستبعدها. الأمر الثاني يقوم باستدعاء وظيفة عرض الوقت التي تحتوي فعلياً على الكود الأساسي لهذه الساعة.
فلنلق نظرة على وظيفة ()stopclock
function stopclock (){
if(timerRunning) clearTimeout(timerID);
timerRunning = false;
}
نلاحظ انه في أول سطر منها لدينا:
if(timerRunning) clearTimeout(timerID);
و هو هنا يقوم باختبار قيمة timerRunning المنظقية، فإذا كانت true سيقوم بتنفيذ الجملة التي تليه و هي:
clearTimeout(timerID);
و هذه الجملة تعني انا سنقوم بتنظيف كائن التوقيت timerID.
و لكن متى ستكون قيمة timerRunning تساوي true؟ سنفهم ذلك من خلال شرح الوظيفة الثالثة ()showTimer .
اذا المقصود بالجملة السابقة أنه اذا كان لديك ساعة فعالة، فأوقفها.
ثم ننظر للجملة التالية:
timerRunning = false;
و هي تعني اننا سنجعل القيمة للمتغير timerRunning تساوي false، بمعنى أنه لايوجد لدينا توقيت. (سنوقف الساعة)
ننتقل الآن للوظيفة الثالثة و الأخيرة: ()showtime، حيث نلاحظ في الأربع أسطر الأولى ما يلي:
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();</FONT>
و في الأسطر السابقة، قمنا باستخدام () new Date ذلك أن في الجافا سيكربت، يتم تخزين الوقت و التاريخ في أي عضو يتم استخراجه من الفئة Date. و هذا ما فعله المبرمج في السطر الأول، اذ استخرج عضواً من الفئة Date أسماه now. أو بصيغة اخرى تستطيعون القول انه أنشأ تاريخاً جديداً يحتوي التاريخ و الوقت الحالي.
ثم قام بانشاء المتغير الذي تلى و هو hours و وضع فيه القيمة ()now.getHours و نلاحظ هنا انه استغل كون now عضواً من الفئة Date و استخدم الوظيفة التي توفرها Date في لغة الجافا سيكربت لتعطينا الساعة الحالية. و بالمثل فعل مع المتغيرات التالية و هي minutes و seconds للحصول على قيمة الدقائق والثواني في التوقيت الحالي.
ثم قام بانشاء متغير آخر أيضاً في الجملة التالية:
var timeValue = "" + ((hours >12) ? hours -12 :hours)
ولعله استخدم في هذه الجملة اداة من ادوات الجافا سيكربت التي تختصر الكود قليلاً. و لنفهم هذه الجملة لنلق نظرة على الكود التالي:
timeValue= ""
if(hours>12) timeValue = hours-12
else timeValue = hours
لننظر إلى الكود السابق، في السطر الأول منه نرى اننا أنشأنا متغيراً اسميناه timeValue و وضعنا فيها نصاً فارغاً.
في السطر التالي قمنا بوضع جملة شرطة من جزئين. اننا نقارن قيمة الساعات و المخزنة في متغير hours فإذا كانت أكبر من 12 قمنا بتنفيذ السطر الوردي وهو الجزء الوردي. اما اذا لم تكن الساعات أقل من 12 فيتم تنفيذ الفرع else الذي يحتوي على الجزء الأزرق.
ان قيمة الساعات التي تعطى لنا من خلال ()getHours تعطى لنا بنظام الأربع و عشرين ساعة، أي انه اذا كانت الساعة الخامسة مساءاً فستعيد لنا القيمة 15. و هذا ما جعل المبرمج الكريم يقوم بهذه الخطوة حتى نظهر الساعات بنظام (مساءاً - صباحاً).
نعود الآن لجملة المبرمج:
var timeValue = "" + ((hours >12) ? hours -12 :hours)
إن هذه الجملة هي اختصار لما سبق. و تستخدم عندما تريد ان تعطي متغيراً قيمة من اثنتين بناء على شرط محدد. فالمتغير timeValue اما ان يأخذ قيمة الساعات او يأخذ قيمة الساعات التي تنقص بـ 12. و يتوقف ذلك علىالمتغير hours فإذا كان أكبر من 12 يتم تنفيذ ما يلي علامة الاستفهام و توضع القيمة في timeValue أما اذا كان غير ذلك، فيتم تنفيذ ما يلي النقطتان الرأسيتان و توضع القيمة في المتغير أيضاً. مع ملاحظة أنه وضع النص الفارغ في البداية حتى تؤخذ القيم الرقمية على شكل نصي.
و بالمثل فعل في الجملة التي تلت:
timeValue += ((minutes <10>12) ? hours -12 :hours)
و كذلك فيما يخص التحويل الوقتي بين Am و PM ليتم عرض الوقت بصورة جميلة:
timeValue += (hours >= 12) ? " P.M." : " A.M."
نلاحظ انه جمع كل ما سبق في قيمة واحدة هي timeValue و هي قيمة نصية قد تكون بهذا الشكل: 8:19:17 A.M.
و نقوم بطباعته بعد ان جهزناه بأن نضعه في القيمة للحقل النصي المسمى face في الفورم المسماه clock بهذه الصيغة:
********.clock.face.value = timeValue;
نأتي الآن للجملة المهمة للغاية:
timerID = setTimeout("showtime()",1000);
اننا بالطبع نريد ان يبقى السيكربت فعالاً و يتغير كل ثانية. لذا سنقوم بوضع توقيتاً محدداً باستخدام الوظيفة setTimeout المعرفة في الجافاسيكربت، و التي تقوم بالقفز إلى الوظيفةا لمحددة و هي في حالتنا ()showtime بعد مرور عدد من الملليسيكندز يتم تعريفه ثانيا، و هو في حالتنا 1000 و يعني ثانية واحدة فقط.
نلاحظ ان الوظيفة قد قامت باستدعاء نفسها من خلال هذا النداء. و هذا يعني انه سيتكرر كل ما سبق في الثانية القادمة.
بقيت لنا الخطوة الأخيرة في هذه الوظيفة و هي وضع القيمة true في المتغير timerRunning الذي يخبرنا ان الساعة شغّالة ة بنشاط، هكذا:
timerRunning = true;
بقي لنا أن نشغّل اشيكربت مع بدء فتح الصفحة، و ذلك باضافة السطر التالي:
<BODY>
و هكذا انتيهنا من شرح السيكربت.
------------------------------
الملاحظات:
------------------------------
نلاحظ أن بعض الجمل تنتهي لعلامة ( و بعضها لا ينتهي بهذه العلامة، و ذلك لأن لغة الجافا سيكربت، لغة حيوية و مرنة، و قد تقبل بوجود هذه العلامة الشهيرة في معظم لغات البرمجة. و عدم وجودها لا يؤثر على سير البرنامج.
استخدم المبرمج الأمر var عند انشاء المتغيرات. و يمكن الاستغناء عن هذا الأمر اذا شئنا أيضاً في هذا السيكربت.
نلاحظ ان السيكربت لايستخدم الوظيفة stopclock الا مع كل اعادة تحديث للصفحة :-)
عند انشائك للفورم التي ستستخدم هذه الساعة عليك الانتباه كل الانتباه لاسم الفورم واسم الحقل.
لا تنسى أن تضع ما هو ضمن تأشيرة الـ <head> في الهيد. و لكن يمكنك أن تضع الفورم نفسها في أي مكان في الصفحة.
يمكنك التحكم في ال style لهذا الحقل مع الحفاظ على اسمه، باستبدال الحقل الموجود في السيكربت السابق بهذا الكود:
<input>
حتى يخفي حقيقة استخدامنا لفورم في الصفحة لعرض الوقت :-)
أرجو ان يستفيد الجميع من الشرح.
تحياتى لكم
منقول | |
|
