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

03-05-2006, 04:28 PM

لا يمكنكم مشاهده باقي المشاركة لأنك زائر ..
فإذا كنت مشترك مسبقا معنا فقم بتسجيل دخول بعضويتك للمتابعة وإذا لم تكن فيمكنك تسجيل عضوية جديدة مجانا ً ( من هنا )

03-05-2006, 04:28 PM

الدرس الثاني
رسائل الخطأ

رسائل الخطأ تحدث كثيرا في الجافا سكريبت . فكلما بنيت جافا سكريبت ووضعته في صفحة الويب وظننت أن كل شيء علي ما يرام ... فجأة تجد أحد رسائل الخطأ ظاهرة أمامك وتؤكد لك أن هناك شيء ليس علي ما يرام . لذا فقد فضلت أن أتعرض لرسائل الخطأ هذه في درس منفصل وقبل الغوص في أعماق الجافا سكريبت لكي نعرف كيفية تلافيها ومعالجتها .

هناك نوعان رئيسيان من الأخطاء التي يمكن أن تحدث في الجافا سكريبت ... هما : الأخطاء التي تنتج عن الخطأ في الكتابة كالأخطاء الإملائية أو أنك وضعت علامة تنصيص مزدوجة بينما كان يجب وضع علامة مفردة .. وتسمي تلك الأخطاء (Syntax errors) & أو الأخطاء الناتجة عن إستخدام أمر في غير موضعه بحيث يكون غير متناسق مع باقي أوامر الكود وتسمي (Run-Time errors) . أيا كان نوع الخطأ فكلاهما يعني أن هناك شيء ليس علي ما يرام .
هناك العديد من البرامج الجاهزة التي تمكنك من معالجة تلك الأخطاء . ولكني أفضل أن تفعل ذلك بنفسك فهي في الحقيقة أسهل مما تظن .

كيف نعالج ونتلافي الأخطاء ؟ :

يقال أن أفضل طريقة لمعالجة الأخطاء هو تلافيها .. فكما يقال دائما .. الوقاية خير من العلاج . هذا كلام القول فيه أسهل من الفعل . علي كل حال يمكنك تقليل إحتمالات ظهور الخطأ بأن تستخدم محرر نصوص (الذي تستخدمه في تحرير ال HTML ) ليست له حدود . بمعني أنه عند كتابة أمر من أوامر الجافا سكريبت لا ينتقل جزء من الأمر للسطر التالي نظرا لضيق حدود محرر النصوص . اذن أكتب كل أمر من أوامر الجافا سكريبت في سطر واحد فلا يوجد داعي لتقسيم الأمر الطويل نسبيا علي سطرين فذلك يمكن أن يؤدي للعديد من الأخطاء . إذا أخذت ذلك في الإعتبار تكون قد تلافيت العديد من رسائل الخطأ التي يمكن أن تضايقك .
نأتي الآن لكيفية علاج الأخطاء .. أجمل شيء في أخطاء الجافا سكريبت هي أنه عند حدوث خطأ ما يظهر لك صندوق رسائل يوضح لك ما هو الخطأ وأين وقع ذلك الخطأ (فقط مع متصفح نيتسكيب) . حيث يوضح لك رقم السطر الذي وقع فيه الخطأ .. ولكي تصل للسطر الذي وقع به الخطأ إبدأ عد السطور من أول سطر في ال HTML وليس من أول سطر في الجافا سكريبت مع عد جميع الأسطر شاملة السطور البيضاء .

الأخطاء المركبة :

في بعض الأحيان تظهر أمامك العديد من رسائل الخطأ المتتابعة عند تحميل صفحة الويب الحاوية علي جافا سكريبت . وليس معني ذلك بالضرورة أن هناك العديد من الأخطاء في أوامر الجافا سكريبت .. فربما كانت كل هذه الأخطاء نتيجة لحدوث الأخطاء في السطور الأولي . لذلك عالج الأخطاء في الكود (SCRIPT) بالترتيب من أعلي لأسفل . ففي كثير من الأحيان تظهر لي 20 رسالة خطأ وعندما أعالج أول خطأ أجد أنني قد عالجت جميع المشكلات .
لا يوجد ما يمكن أن يقال عن الأخطاء حاليا أكثر من ذلك فأنت الآن أصبحت تعرف كيف تعالج 99% من المشكلات و الأخطاء التي يمكن أن تحدث .فقط تذكر دائما أنه لابد من حدوث أخطاء فإذا لم تظهر لك أي رسالة خطأ فهذا لا يعني إلا أنك قد تركت الصفحة بيضاء ليس بها شيء .

ما هذا؟ ... أين ذهبتم؟ ... أما زلتم هنا؟ ... حسنا ماذا ننتظر؟ ... فلننتقل مباشرة للدرس التالي .....

03-05-2006, 04:29 PM

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

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

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

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

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

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

<SCRIPT LANGUAGE="JavaScript">

//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>

--------------------------------------------------------------------------------

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

Today's date is 41-3-2006. You entered this Web
Page at exactly: 15:28 and 58 seconds

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

--------------------------------------------------------------------------------

تحليل الكود (SCRIPT) :

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

<SCRIPT LANGUAGE="JavaScript">

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

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

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

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

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

RightNow = new Date( );

هل تذكر ما قلناه في أول الدرس ... قلنا اننا سوف نخلق "وما الخلق إلا من عند الله" كائنا (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")

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

--------------------------------------------------------------------------------

ملاحظة :

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

Rightnow.getMonth ( ) + 1 .

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

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

03-05-2006, 04:30 PM

الدرس الرابع
الأحداث Events

تعرفنا في الدروس السابقة علي المناهج (Methods) و الكائنات (Objects) . في هذا الدرس نتعرف علي الأحداث (Events) . الأحداث تعتبر جافاسكريبت , لكنها تستخدم داخل أوامر ال HTML ولا تستخدم بمفردها . أي أن الأحداث لا تكتب بين الأمرين <SCRIPT> و <SCRIPT/> .
إذن الأحداث بمفردها (Events) لا تعتبر جافاسكريبت . بل يجب أن تدمج داخل أوامر ال HTML لكي تفهم علي أنها جافاسكريبت . فكر في الأحداث علي أنها أشياء تحدث مثل : نقرة الماوس , ضغطة الزر , وغيرها من الأحداث . هناك الكثير من الأحداث والتي سنتعرض لها لاحقا ولكننا سنتعرض في هذا الدرس للحدث onMouseOver .... حسنا.. لنشاهد الكود (SCRIPT) التالي :

<A HREF="http://www.ayna.com"
onMouseOver="window.status='Go to ayna site';
return true">Click Here</A>

أكتب هذا النص في سطر واحد تجنبا للأخطاء .

--------------------------------------------------------------------------------

نتيجة الكود (SCRIPT) :

Click Here

مرر الماوس فوق الوصلة التشعبية وأنظر لشريط الحالة (Status Bar) بأسفل .

--------------------------------------------------------------------------------

تحليل الكود (Script) :

أعتقد أن هذا الأمر يشرح نفسه ولكن دعنا ننظر إليه نظرة سريعة : في الأمر إستخدمنا الحدث onMouseOver (لاحظ الحروف الكبيرة والصغيرة في إسم الحدث) . وهذا الحدث يستخدم مع الوصلات التشعبية (Hypertext Links) حيث يستخدم داخل أمر الHTML الخاص بالوصلة التشعبية بعد عنوان الموقع . إذن هذا الحدث هو الخاص بمرور الماوس فوق الوصلة التشعبية . ويتم ندائه بكتابة "=onMouseOver" . ثم بعد ذلك يتم كتابة ما نريده أن يحدث عن حدوث ذلك الحدث onMouseOver وهو في حالتنا هنا " 'window.status='go to ayna site" وهو شكل عرفناه من قبل ولكنه ليس كالأوامر التي إستخدمناها في الدروس السابقة . هنا window تعتبر كائن (Object) ... أعتقد أننا نعرف ذلك ... ولكن ماذا تكون كلمة status ؟ .. أسمع البعض يقول أنها منهج (Method) .. لا ليست كذلك . إن status تعرف علي أنها خاصة (Property) من خواص الكائن window .
هل حدث عندك إرتباك . حسنا .. أنظر دائما للنهج (Methods) علي أنه فعل .. مثل : أكتب(write) أحضر (get) . أما الخاصة (Property) فأنظر إليه علي أنه إسم لشيء موجود بالكائن مثل : status والموجود بالكائن المسمي window .

إذن تذكر :
- لغة الجافا سكريبت تستخدم أسلوب البرمجة بالكائنات (Object Oriented Programming) الذي يسمح بالتعامل مع البيانات علي شكل كائنات (Objects) مثل document و window ... ولكل كائن مناهج (Methods) وخصائص (Properties) خاصة به ... المناهج (Methods) يمكنك أن تنظر إليها علي أنها فعل مثل write و get ... أما الخصائص فيمكنك أن تنظر إليها علي أنها أشياء موجودة في الكائن كشريط الحالة وشريط الأدوات وكذلك هي الخواص الصفاتية التي تميز الكائن كاللون والإرتفاع والعرض . أما بالنسبة للفرق بين المناهج والخصائص من حيث الشكل في الكتابة فهو أن المنهج يتبعه دائما أقواس بدون علامة المساواة أما الخاصة (Property) يتبعه دائما علامة مساواة ثم علامات تنصيص إما مفردة أو مزدوجة حسب الحالة وقتئذ . إلا أن كلاهما يأتي دائما بعد الكائن (Object) يفصله عنه نقطة ( . )

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

- الأحداث (Events) لاتستخدم إلا داخل أوامر ال HTML ولا تكتب بين الوسمين <SCRIPT> ...... <SCRIPT/> .

الأمر "window.status" متبوع بعلامة (=) هو الآخر ليشير إلي أن ما سيليه هو ما سيحدث . في حالتنا هنا ما بعد العلامة (=) هو نص بين علامتي تنصيص (مفردة) . وهذا النص سوف يظهر علي شريط الحالة (Status Bar) عند تمرير مؤشر الماوس علي اللإرتباط التشعبي . ثم وضعنا بعد ذلك الفاصلة المنقوطة (

لنشير إلي نهاية السطر .

الأمر return true في السطر الأخير يشير الي السلوك الذي سيتبع عند المرور بمؤشر الماوس فوق الوصلة التشعبية وهذا السلوك يتبع المسار التالي : إذا كانت كلمات النص موجودة سيفحص الكود (SCRIPT) إذا كان شريط الحالة (Status Bar) موجودا . إذا كان موجودا سيكون الشرط return true قد تحقق وبالتالي سيتم حدوث الحدث . لاحظ أنك عندما تمرر مؤشر الماوس فوف الوصلة Click Here سيظهر النص علي شريط الحالة وسيلتصق به ولن يزول إلا إذا أعدت تحميل الصفحة .
ولكن ماذا سيحدث إذا إزلنا return true من الكود ؟ . حسنا دعنا نفترض ذلك . في هذه الحالة لن يتم أي فحص وسيظهر النص الإفتراضي الذي يظهر عند تمرير المؤشر علي أي وصلة .. وهو عنوان الصفحة التي تؤدي إليها تلك الوصلة التشعبية . وعندما تبعد مؤشر الماوس عن الوصلة التشعبية سيظهر النص الذي حددته في الأمر وسيتم حدوث الحدث . جرب الآن أن تمرر المؤشر عل الوصلة التشعبية التالية :

Click Here

هل لاحظت الفرق ؟ .

--------------------------------------------------------------------------------

خصائص (Properties) أخري :

إذا كان للكائن window خصائص (Properties) فإن لكل كائن آخر خصائص (Properties) خاصة به . ما رأيك في لون خلفية الصفحة ؟ ... ألا تعتبر خاصة (Property) ؟ . في ال HTML الأمر الخاص بتغيير لون الخلفية هو BGCOLOR . هنا نفس الشيء 'bgColor' ولكن مع مراعاة الحروف الكبيرة في الإسم فكما تلاحظ الحرف C كبير . إذن ما رأيك في إنشاء إرتباط تشعبي .. عند تمرير المؤشر عليه يتغير لون الخلفية بإستخدام الحدث onMouseOver ؟

1-أولا نحن نريد إنشاء إرتباط تشعبي لذا فإننا سنستخدم الأمر الذي إستخدمناه بأعلي .
2- ثانيا ماهو الكائن الذي نريد تغيير خاصية لون الخلفية به ؟ .. طبعا هو الكائن document والذي يمثل الصفحة التي نعمل عليها . أي أننا هنا نستخدم الكائن document بدلا من الكائن window .
3- نحن نريد تغيير خاصية(Property) والمسماة ب (bgColor) . لذا فإننا سنستخدم bgColor بدلا من status .
4- ما نريد حدوثه عند تمرير الماوس فوق الوصلة هو تغيير لون الخلفية وليس إظهار نص . لذلك فإننا سنضع 'yellow' بدلا من النص في الأمر بأعلي .
5- عند تمرير المؤشر فوق الوصلة فإننا نريد أن يتغير لون الخلفية ويظل اللون كما هو بعد ذلك سواء مررنا المؤشر فوق الوصلة مرة أخري أم لا . لذا فإننا سنستخدم الأمر return true بعد الفاصلة المنقوطة (

.

الآن هذا هو الكود بعد تلك التغييرات :

<A HREF="http://www.ayna.com"
onMouseOver="document.bgColor='yellow';
return true">Click Here</A>

--------------------------------------------------------------------------------

لتري نتيجة ذلك الكود أنقر هنا

(هذه الوصلة سيفتح نافذة جديدة)

--------------------------------------------------------------------------------

إذا أردت أن يحدث كلا الأثرين السابقين عند مرور المؤشر فوق الوصلة التشعبية فأستخدم الحدث onMouseOver مرتين مرة لكل تأثير علي أن تفصل بينهما بفاصلة (,) لكي يحدث كلا الحدثين في ذات الوقت . ويكون شكل الكود هكذا :

<A HREF="http://www.ayna.com"
onMouseOver="window.status='go to the ayna site';
onMouseOver="document.bgColor='yellow';
return true">Click Here</A>

إذا تذكر : يمكنك أن تجعل أكثر من حدث (Events) يحدثوا في ذات الوقت بأن تفصل بينهم بفاصلة (,) .

نكتفي بذلك في هذا الدرس ولننتقل للدرس التالي .