المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : شرح طريقة سكربت الساعة ..............



romaissa
10-31-2013, بتوقيت غرينيتش 11:10 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* ط³ظƒط±ط¨طھ ط§ظ„ط³ط§ط¹ط© .............. (http://www.dzbatna.com/t189045/)




ماذا يفعل هذا السيكربت:
------------------------------

يقوم السيكربت بعرض مربع نصي، يقوم بعرض التوقيت الحالي، و يقوم بتغييره كل ثانية (أي انه يعرض الوقت الحالي ثانية بثانية).
السيكربت:
------------------------------
<head>
<****** LANGUAGE=&quot;Java******&quot;>
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 = &quot;&quot; + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? &quot;:0&quot; : &quot;:&quot;) + minutes
timeValue += ((seconds < 10) ? &quot;:0&quot; : &quot;:&quot;) + seconds
timeValue += (hours >= 12) ? &quot; P.M.&quot; : &quot; A.M.&quot;
********.clock.face.value = timeValue;
timerID = setTimeout(&quot;showtime()&quot;,1000);
timerRunning = true;
}

function startclock() {
stopclock();
showtime();
}
</******>
</head>

<BODY onLoad=&quot;startclock()&quot;>
<FORM name=&quot;clock&quot;>
<input type=&quot;text&quot; name=&quot;face&quot; size=15 value=&quot;&quot;>
</FORM>




السيكربت:
------------------------------
قبل أن نبدأ بشرح طريقة السيكربت نفسه، أحب أن أوضح شيئاً بسيطاً بأن أقفز إلى نهاية الكود code السابق و بالضبط حيث:

<BODY onLoad=&quot;startclock()&quot;>
<FORM name=&quot;clock&quot;>
<input type=&quot;text&quot; name=&quot;face&quot; size=15 value=&quot;&quot;>
</FORM>
</BODY>

نلاحظ فيما سبق أننا قمنا باستخدام تأشيرات الهتمل لإنشاء فورم أسمينها clock و في داخل الفورم انشأنا حقلاً نصياً أسميناه face و جعلنا طوله 15 حرف، و القيمة المبدئية له: لاشيء: &quot;&quot;

و المبرمج ينوي كما هو واضح ان يستخدم هذا الحقل لعرض الوقت، أي سيستخدمه كساعة.

و الآن لننتقل إلى السيكربت نفسه. السيكربت مكتوب بلغة الجافا سيكربت وعند قراءتنا للسيكربت سنجد ان الكاتب وضع متغيرين عامين على جميع الوظائف و هما:

var timerID = null;
var timerRunning = false;

المتغير الأول: timerID فهو عبارة عن كائن سنستخدمه فيما بعد لتخزين الوقت.
المتغير الثاني: timerRunning عبارة عن متغير منطقي، سيتم استخدامه فيما بعد لمعرفة ان كان الوقت مازال يتغير، ام انه توقف لأي سبب من الأسباب.

يتكون من ثلاث وظائف، و هي: ()stopclock و ()showtime و ()startclock و هي موضحة باللون الأحمر في السكربت نفسه.

و سأبدأ الشرح طريقة من الوظيفة الأخيرة ترتيباً في السيكربت والأولى في التشغيل الفعلي، و هي: ()startclock



function startclock() {
stopclock();
showtime();
}


من اسم الوظيفة يتضع ان المبرمج ينوي استخدامها كزر تشغيل للساعة :-) او كوظيفة الانطلاق. وهي تحتوي على أمرين
اذا تم استدعاء هذه الوظيفة فهذا يعني اننا سبندأ ساعة، لذا علينا ان نوقف الساعة أولاً (بحيث اذا كانت هناك ساعة قديمة، نستبعدها. الأمر الثاني يقوم باستدعاء وظيفة عرض الوقت التي تحتوي فعلياً على الكود code الأساسي لهذه الساعة.


فلنلق نظرة على وظيفة ()stopclock



function stopclock (){
if(timerRunning) clearTimeout(timerID);
timerRunning = false;
}


نلاحظ انه في أول سطر منها لدينا:



if(timerRunning) clearTimeout(timerID);


و هو هنا يقوم باختبار قيمة timerRunning المنظقية، فإذا كانت true سيقوم بتنفيذ الجملة joomla التي تليه و هي:

clearTimeout(timerID);
و هذه الجملة joomla تعني انا سنقوم بتنظيف كائن التوقيت timerID.

و لكن متى ستكون قيمة timerRunning تساوي true؟ سنفهم ذلك من خلال شرح طريقة الوظيفة الثالثة ()showTimer .
اذا المقصود بالجملة joomla السابقة أنه اذا كان لديك ساعة فعالة، فأوقفها.

ثم ننظر للجملة joomla التالية:

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 للحصول على قيمة الدقائق والثواني في التوقيت الحالي.
ثم قام بانشاء متغير آخر أيضاً في الجملة joomla التالية:


var timeValue = &quot;&quot; + ((hours >12) ? hours -12 :hours)
ولعله استخدم في هذه الجملة joomla اداة من ادوات الجافا سيكربت التي تختصر الكود code قليلاً. و لنفهم هذه الجملة joomla لنلق نظرة على الكود code التالي:



timeValue= &quot;&quot;
if(hours>12) timeValue = hours-12
else timeValue = hours

لننظر إلى الكود code السابق، في السطر الأول منه نرى اننا أنشأنا متغيراً اسميناه timeValue و وضعنا فيها نصاً فارغاً.

في السطر التالي قمنا بوضع جملة joomla شرطة من جزئين. اننا نقارن قيمة الساعات و المخزنة في متغير hours فإذا كانت أكبر من 12 قمنا بتنفيذ السطر الوردي وهو الجزء الوردي. اما اذا لم تكن الساعات أقل من 12 فيتم تنفيذ الفرع else الذي يحتوي على الجزء الأزرق.

ان قيمة الساعات التي تعطى لنا من خلال ()getHours تعطى لنا بنظام الأربع و عشرين ساعة، أي انه اذا كانت الساعة الخامسة مساءاً فستعيد لنا القيمة 15. و هذا ما جعل المبرمج الكريم يقوم بهذه الخطوة حتى نظهر الساعات بنظام (مساءاً - صباحاً).
نعود الآن لجملة joomla المبرمج:


var timeValue = &quot;&quot; + ((hours >12) ? hours -12 :hours)

إن هذه الجملة joomla هي اختصار لما سبق. و تستخدم عندما تريد ان تعطي متغيراً قيمة من اثنتين بناء على شرط محدد. فالمتغير timeValue اما ان يأخذ قيمة الساعات او يأخذ قيمة الساعات التي تنقص بـ 12. و يتوقف ذلك علىالمتغير hours فإذا كان أكبر من 12 يتم تنفيذ ما يلي علامة الاستفهام و توضع القيمة في timeValue أما اذا كان غير ذلك، فيتم تنفيذ ما يلي النقطتان الرأسيتان و توضع القيمة في المتغير أيضاً. مع ملاحظة أنه وضع النص الفارغ في البداية حتى تؤخذ القيم الرقمية على شكل نصي.
و بالمثل فعل في الجملة joomla التي تلت:






timeValue += ((minutes < 10) ? &quot;:0&quot; : &quot;:&quot;) + minutes



نلاحظ انه وضع علامة =+ بدلاً من = و ذلك حتى يتم اضافة ما هو موجود على اليمين إلى القيمة الموجودة فعلاً في المتغير timeValue والتي نعرف انا وانتم انها تحتوي على نص يمثل رقم الساعات.
و بعد هذه العلامة وضع شيئاً لطيفاً. فإذا كان عدد الثواني أقل من 10 يضع 0: قبل الرقم، اما اذا كانت أكثر، فيكتفي بوضع الـ : لتسبق الدقائق.
ان مبرمجنا يقوم بكل هذا لضمان الناحية الشكلية للسيكربت. و لذلك قام بالمثل في النص الممثل بالثواني كما يلي:




var timeValue = &quot;&quot; + ((hours >12) ? hours -12 :hours)

و كذلك فيما يخص التحويل الوقتي بين Am و PM ليتم عرض الوقت بصورة جميلة:



timeValue += (hours >= 12) ? &quot; P.M.&quot; : &quot; A.M.&quot;



نلاحظ انه جمع كل ما سبق في قيمة واحدة هي timeValue و هي قيمة نصية قد تكون بهذا الشكل: 8:19:17 A.M.
و نقوم بطباعته بعد ان جهزناه بأن نضعه في القيمة للحقل النصي المسمى face في الفورم المسماه clock بهذه الصيغة:



********.clock.face.value = timeValue;

نأتي الآن للجملة joomla المهمة للغاية:



timerID = setTimeout(&quot;showtime()&quot;,1000);



اننا بالطبع نريد ان يبقى السيكربت فعالاً و يتغير كل ثانية. لذا سنقوم بوضع توقيتاً محدداً باستخدام الوظيفة setTimeout المعرفة في الجافاسيكربت، و التي تقوم بالقفز إلى الوظيفةا لمحددة و هي في حالتنا ()showtime بعد مرور عدد من الملليسيكندز يتم تعريفه ثانيا، و هو في حالتنا 1000 و يعني ثانية واحدة فقط.

نلاحظ ان الوظيفة قد قامت باستدعاء نفسها من خلال هذا النداء. و هذا يعني انه سيتكرر كل ما سبق في الثانية القادمة.
بقيت لنا الخطوة الأخيرة في هذه الوظيفة و هي وضع القيمة true في المتغير timerRunning الذي يخبرنا ان الساعة شغّالة ة بنشاط، هكذا:


timerRunning = true;
بقي لنا أن نشغّل اشيكربت مع بدء فتح الصفحة، و ذلك باضافة السطر التالي:



<BODY onLoad=&quot;startclock()&quot;>



و هكذا انتيهنا من شرح طريقة السيكربت.
------------------------------

الملاحظات:
------------------------------



نلاحظ أن بعض الجمل تنتهي لعلامة ( و بعضها لا ينتهي بهذه العلامة، و ذلك لأن لغة الجافا سيكربت، لغة حيوية و مرنة، و قد تقبل بوجود هذه العلامة الشهيرة في معظم لغات البرمجة. و عدم وجودها لا يؤثر على سير البرنامج.
استخدم المبرمج الأمر var عند انشاء المتغيرات. و يمكن الاستغناء عن هذا الأمر اذا شئنا أيضاً في هذا السيكربت.
نلاحظ ان السيكربت لايستخدم الوظيفة stopclock الا مع كل اعادة تحديث update للصفحة :-)
عند انشائك للفورم التي ستستخدم هذه الساعة عليك الانتباه كل الانتباه لاسم الفورم واسم الحقل.
لا تنسى أن تضع ما هو ضمن تأشيرة الـ <head> في الهيد. و لكن يمكنك أن تضع الفورم نفسها في أي مكان في الصفحة.
يمكنك التحكم في ال style لهذا الحقل مع الحفاظ على اسمه، باستبدال الحقل الموجود في السيكربت السابق بهذا الكود code:


<input type=&quot;text&quot; name=&quot;face&quot; size=&quot;20&quot; size=15 value=&quot;&quot; style=&quot;border-style: double; border-width: 3; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1&quot;>
حتى يخفي حقيقة استخدامنا لفورم في الصفحة لعرض الوقت :-)


أرجو ان يستفيد الجميع من الشرح طريقة.
تحياتى لكم






ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


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