الدرس الثالث

موضوع: الدرس الثالث الأحد أكتوبر 26, 2008 1:12 am

فلنتعلم معا جافا سكريبت

الدرس الثالث
اليوم والوقت

هل تعلم ما هو أجمل شيء في الجافا سكريبت ؟ ... أجمل شيء هو كثرة الأدوات المتواجدة و التي يمكنك أن تستغلها وتظهرها في صفحتك .وسوف نتعرف علي معظم تلك الأدوات والتي ستمكننا من إستخدام الجافا سكريبت في عمل الكثير في صفحات الويب بحيث تظهر في أجمل صورة .

لقد تعرفنا علي أحد المناهج (Methods) في الدرس الأول وهو النهج write الذي لا يستخدم إلا مع الكائن (Object) المسمي document .. والكائن document يمثل صفحة الويب التي نعمل عليها . وكما ذكرنا .. أن النهج يجب أن يتبعه دائما أقواس وأن النهج يأتي دائما بعد الكائن . هل تذكر ذلك ؟

في هذا الدرس نتعرف علي سبع مناهج (Methods) جديدة وهي :

getDay() , getDate() , getMonth() , getYear() , getHour() , getMinute() , getSeconds()

أي من هذه المناهج هي موجودة فعلا ومعروفة للجافا سكريبت بحيث يمكنك إستدعائها وإستخدامها .. وقطعا أيا من هذه المناهج (Methods) بحاجة إلي كائن (Object) لكي تعمل عليه والكائن المسمي document لايمكن تطبيق تلك المناهج عليه .. لذلك فإننا سوف ننشيء كائن لكي يمكننا تطبيق تلك المناهج (Methods) السبعة عليه ... حسنا لننظر الآن للكود (script) التالي :

//This script posts the exact day and time you arrived

RightNow = new Date( );
document.write("Today's date is " + RightNow.getMonth( )+
"-" + RightNow.getDate( ) + "-" + RightNow.getYear( ) + ".
You entered this Web Page at exactly: " + RightNow.getHours( ) +
":" + RightNow.getMinutes( ) + " and " + RightNow.getSeconds( ) +
" seconds")

تأثير الكود (script)

//This script posts the exact day and time you arrived

RightNow = new Date();
document.write("Today's date is " + RightNow.getMonth()+1+ "-" + RightNow.getDate() + "-" + RightNow.getYear() + ". You entered this Web
Page at exactly: " + RightNow.getHours() + ":" + RightNow.getMinutes() + " and " + RightNow.getSeconds() + " seconds")

Today's date is 91-25-2008. You entered this Web
Page at exactly: 19:10 and 51 seconds

أي أن هذا الكود يظهر في الصفحة تاريخ اليوم وتوقيت دخولك للصفحة ... جرب أن تعيد تحميل الصفحة أكثر من مرة ... ستجد أن الوقت سيختلف في كل مرة .

تحليل الكود
هل تري شكل الكود (script) .. طبعا يجب عليك كتابة السطر "document.write" في سطر واحد حيث أن تقسيمه علي عدة أسطر سيسبب الخطأ .
لنبدأ تحليل ذلك الكود خطوة بخطوة :
السطر الأول هو طبعا :

والذي يعرف المتصفح أن ما هو آت جافا سكريبت لا ريب . أعتقد أن هذا أصبح محفوظا ... حسنا لن نذكر ذلك في الدروس التالية .

أنظر للسطر الثاني جيدا ... ماذا به؟ ذلك السطر هو :

//This script posts the exact day and time you arrived

[size=9]ماذا تعني علامة // هذه ؟ ... تلك العلامة تعني أن ما سيأتي بعده هو مجرد تعليق وتنبه المتصفح أن يتجاهل ذلك السطر وينتقل للأمر التالي . ويمكنك أن تضيف تعليقات كما تريد ما دمت قد أسبقت كل تعليق بالعلامة // ... إتفقنا؟ ... حسنا لننتقل للسطر التالي .

الأمر الثالث في الكود (script) هو:

RightNow = new Date( );

[size=9]هل تذكر ما قلناه في أول الدرس ... قلنا اننا سوف نخلق "وما الخلق إلا من عند الله" كائنا (Object) جديدا لكي نربط المناهج السبعة (( )getSomething) به . وحيث ان تلك المناهج هي خاصة بالكائن المسمي Date ... لذا فقد أسميت الكائن الجديد (Rightnow) ونسبته ل ( ( ) new Date ) واستخدمت الأمر new لأن التاريخ (Date) يجب أن يكون جديدا وإلا سيكون التاريخ ثابتا ولن يتغير مع التاريخ الفعلي . يجب أن تفعل ذلك في كل مرة تتكلم عن التاريخ أو الوقت .
لاحظ أنني أسميت الكائن الجديد Rightnow .. يمكنك أنت أن تسميه كما تشاء .. يمكنك تسميته Ahmed أو Ali أو أي إسم تريده .
آه ... لاحظ الفصلة المنقوطة في نهاية الأمر .. يجب عليك وضعها فهي تدل علي نهاية الأمر وإلا سيظن المتصفح أن الأمر مستمر مع السطر التالي وبالتالي تظهر لك رسالة خطأ .

الأمر الرابع في الكود بأعلي هو :

document.write("Today's date is " + RightNow.getMonth( )+1+ "-" + RightNow.getDate( ) + "-" + RightNow.getYear( ) + ". You entered this Web
Page at exactly: " + RightNow.getHours( ) + ":" + RightNow.getMinutes( ) + " and " + RightNow.getSeconds( ) + " seconds")

[size=9]وللمرة الثالثة أذكرك بألا تنسي أن تكتب ذلك الأمر بأكمله في سطر واحد تجنبا للأخطاء . فلنري ماذا كتبت في هذا الأمر :
- لأني أريد إظهار وكتابة شيء في صفحة الويب لذا إستخدمت المنهج write مع الكائن document .
- بين الأقواس بدأت ب "Today's date is " ووضعت مسافة في نهايتها حتي لا يلتصق بها ما سيكتب بعدها .
- علامة + بعد ذلك .
- ( ) Rightnow.getMounth أضيفت بدون وضعها بين علامتي تنصيص لأننا لا نريد طبع تلك الجملة كما هي في الصفحة بل نريد القيمة العددية التي تحتويها .
- علامة + أخري .
- علامة "-" بين علامتي تنصيص لكي أفصلها عن الرقم الذي يليها . ولم أضع مسافة فارغة بجوار علامة "-" بين علامتي التنصيص لأنني أريد أن أضع الرقم التالي بجوار العلامة "-" مباشرة .
- علامة + .
- الآن وضعت ( ) Rightnow.getDate لأنني أريد رقم اليوم . وطبعا بدون علامتي التنصيص لأني أريد طبع القيمة ولا أريد طبع الجملة نفسها .
- علامة + .
- علامة "-" أخري بين علامتي تنصيص لتطبع كما هي في الصفحة .
- علامة + .
- ثم منهج آخر جديد ( ) Rightnow.getYear سوف تطبع رقم السنة .
وبإتباع نفس الأسلوب سيطبع الكود (script) كل ما تريده . الآن تستطيع أن تعرف الجميع كم الساعة الآن .

ملاحظة :

- هناك عيب وحيد في هذا الكود .. ولكنه عيب جوهري للغاية .. وهو أن الجافا سكريبت يبدأ في عد الشهور من الصفر . بمعني أن شهر يناير هو شهر "0" وشهر فبراير هو شهر "1" وهكذا ..
يمكننا حل تلك المشكلة ببساطة بإضافة 1 إلي الشهور في الكود بأعلي ليكون هكذا :

Rightnow.getMonth ( ) + 1 .
- يجب أن تراعي الحروف الكبيرة (Capital) والحروف الصغيرة (Smale) عند كتابة أوامر الجافاسكريبت . لاحظ المناهج السبعة التي كتبناها بأعلي .. لاحظ الحروف الصغيرة والكبيرة بها .. هي هكذا ويجب أن تكتب هكذا وإلا ستحدث أخطاء .

حسنا .... أي سؤال؟ ... لا يوجد؟ ... Ok ... لننتقل للدرس التالي .......

معلش ممكن بس تعدلي الخط لانو مش واضح

تم التعديل يا تلموذ

الله ينور يانور

لحد كدا تمام

ولون الكود مكنش مفهوم الا ان الكلام موضحوا خالص

يلا خشي علي الي بعدو