تويت
هل لغة الجافا سكريبت صعبة التعلم وما هي الأشياء المساعدة لتعلم Java script.
هل لغة الجافا سكريبت صعبة التعلم وما هي الأشياء المساعدة لتعلم Java script.
لغة الجافا سكريبت ليست بالطبع صعبة وكل ما عليك فعله هو الاستعانة بالله ثم الإصرار على التعلم و تطبيق الأمثلة التي سنتطرق لها وفهم شرح الأساسيات اللغة . ثم بعد ذلك أطلق العنان لمخيلتك .
لماذا لا تكفي لـ HTML و لماذا نحتاج إلى لغات النصوص ( script ******** ) مثل الجافا سكريبت .
أن لغات النصوص منها الجاف سكريبت تحول موقع الوب إلى موقع يتفاعل مع المستخدم من إضافات أزرار ونماذج تأخذ بيانات من المستخدم وتحولها إلى نماذج أخرى أو ترسلها بالبريد الإلكتروني أو تجري عليها عمليات حسابية ليست بسيطة أنها باختصار تحول الصفحة إلى ما يسمى بصفحات الوب الديناميكية أو صفحات الوب التفاعلية هو مالا تقدمه لغة HTML .
ولا ننسى من النقاط المهمة التي يجب معرفتها أن تنفيذ البرنامج المكتوب بلغة Java Script هو من اختصاص المتصفح ( Browser ) و الذي ينفذها سطر سطر ( وهذا ما يطلق عليه Interpreter ) وليس عن طريق ترجمتها تجميعياً وهذا ما يحدث في لغات البرمجة عالية المستوى ( وهذا ما يطلق عليه Compiler).
ما هي البرامج التي تحتاجها لكتابة برامج واختبارها.
الموضوع بمنتها السهولة فكل ما تحتاجه هو ما يلي :
o محرر النصوص المرفق مع الويندوز ( Notepad ).
o متصفح الإنترنت المرفق مع نظام التشغيل سواء (Internet Explorer ) أو (Netscape ) أو أي متصفح يدعم لغة الجافا سكريبت.
هذا كل شيء كل ما تحتاجه .
استخدام Java Script :
برنامج جافا سكريبت هو جزء يتم وضعه داخل لغة HTML لزيادة فاعليتها فعند تصفح موقع أو استدعاء صفحة محددة مكتوب بداخلها Java Script code يتم إنزاله إلى جهازك وعند حدوث حدث معين مثل استدعاء برنامج جافا للتنفيذ عند الضغط على زر معين أو عند حركة للماوس يتم ترجمة البرنامج وتنفيذه سطر بسطر حتى ينتهي كما ذكرنا سابقاً.
الشكل العام الذي سيكون عليه برنامج جافا سكريبت :
<HTML>
<HEAD>
<TITLE> يتم هنا وضع عنوان الصفحة </TITLE>
******** ********=”**********”>
<!--
تعليمات الجافا سكريبت توضع هنا
-- >
***********
</HEAD>
<BODY>
تعليمات ألـHTML يتم كتابتها هنا في هذه المنطقة و أيضا استدعاء برنامج الجاف سكريبت
</BODY>
</HTML>
ملاحظات:
******** ********=”**********”>
هذا السطر يجب أن يكون أول سطر في أي كود (SCRIPT) جافا سكريبت حيث أنه ينبه الجزء الخاص بترجمة الصفحة بأن ما سيتبع هذا الأمر هو Java Script وأن عليه الاستعداد لتنفيذ برنامج يحتوي على سبيل المثال جملة شرطيه ( if else ) أو جملة تكرار ( Loop ) وغيره من الجمل و التي يحتوي عليها أي برنامج .
أن الرمز التالي <!-- يقوم بإخفاء كود الجافا سكريبت من المستعرض أو المتصفح الذي لا يدعم لغة الجافا سكريبت وبعد الانتهاء من كتابة الكود يتم وضع الرمز التالي -- > .
***********
إذن هذا هو آخر سطر في أي كود SCRIPT وهذه الخطوة تنبه المتصفح إلي نهاية الكود كما هو موضح في الشكل العام , لنأخذ مثال لكي تتضح الرؤيا .
واليك هذا المثال البسيط :
في البداية سوف نقوم بشرح هذا الكود ثم نقوم بشرح خطوات تنفيذه لاحقا لنبداء الآن.
No Statements
1 <html>
2 <head>
3 <title>First Example</title>
4 </head>
5 <body bgcolor=#f0f0f0>
6 ******** ********="**********">
7 <!--
8 document.write("<FONT COLOR='Red'>Welcome To Java script</FONT>")
9 ***********
10 -->
11 </body>
12 </html>
1- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.
2و3 و4- <head> و </head> يوضع بينهما عنوان الصفحة . وأما بالنسبة لـ <title> و </title> تتيح لك هذه العلامة أن تعطي الصفحة عنوانا واضحا مميزا ويظهر هذا العنوان على نافذة المستعرض ويجب أن يحتوي على العنوان على حروف و أرقام فقط.
5- <body bgcolor=#f0f0f0> و </body> حيث يتم كتابة داخل هذا الجزء محتويات صفحة الويب الفعلية مثل الجداول و النماذج و الصور و التي سيراها الزوار لهذه الصفحة أما جزئية bgcolor=#f0f0f0 فهي تقوم بوضع لون لصفحة الويب و أن القيمة #f0f0f0 هي قيمة اللون بالنظام الست عشري.
6- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو ********** كما تم شرحه في الصفحة السابقة .
7 و10- كما ذكرا سابقا فأن الرمز التالي <!-- يقوم بإخفاء كود الجافا سكريبت من المستعرض أو المتصفح الذي لا يدعم لغة الجافا سكريبت وبعد الانتهاء من كتابة الكود يتم وضع الرمز التالي -- > .
8- العبارة document.write("<FONT COLOR='Red'>Welcome To Java script</FONT>") و في هذا السطر يتم إستخدام الكائن (document) وذلك لكتابة عن طريق الدالة (write) ما بداخل الأقواس . وما بداخل الأقواس هو عبارة عن أمر عادي من أوامر HTML الذي يأمر المتصفح بإظهار الجملة " Welcome To Java script " باللون الأحمر . إذن فإن من قام بأمر المتصفح بإظهار الجملة باللون الأحمر هو الـ HTML وليس الجافا سكريبت ..!! . ولكننا هنا عرفنا أنه من الممكن كتابة أوامر الـ HTML داخل أوامر الجافا سكريبت ، يجب أن تضع هذه المعلومة في ذاكرتك .
9- *********** وهو الذي يدل المتصفح أنه نهاية برنامج الجاف سكريبت .
11و12- يتم إغلاق جسم الصفحة <body> باستخدام </body> وأيضا يتم غلق الكود الخاص بالصفحة <html> باستخدام </html> .
ملاحظات يجب مراعاتها :
لاحظ هنا جيدا شكل الأمر :
document.write("<FONT COLOR='Red'>Welcome To Java script</FONT>")
شكل الأمر هكذا ويجب أن يكون دائما هكذا ... دعنا نفرض أنك نسخت هذا الكود (SCRIPT) ولصقته في معالج نصوص ذو حدود ضيقة ... بمعني أنك عندما لصقته ظهر هكذا :
document . write("<FONT COLOR='Red'>Welcome To Java script</FONT>
")
في هذه الحالة أنت غيرت شكل الأمر (لاحظ أن القوس الذي ينهي الأمر قد أنتقل سطرا لأسفل) ولن يعمل هذا الكود ويكون قد حدث خطأ .إذا ففي أكود الجافا سكريبت يجب مراعاة الشكل والمسافات علي عكس الـHTML .
أهم النقاط المستفادة من المثال السابق :
• عند كتابة كود جافا سكريبت يجب أن نبدأ دائما بـالجملة التالية :
******** ********="**********">
وينتهي بالجملة التالية :
***********
• بين علامتي التنصيص المزدوجة استخدم علامات تنصيص مفردة عند الحاجة .
• أحد أشكال الأمر في الجافا سكريبت هو :
أن نبدأ بالكائن (Object) الذي نريد إجراء الأمر عليه ثم بعد الكائن يأتي النهج (Method) الذي نريد تطبيقه علي الكائن .. ويتبع النهج دائما أقواس تحتوي علي ما سيحدث في الكائن (Object) عند تطبيق النهج (Method) عليه . في مثالنا بأعلي ... الكائن هو (document) والنهج هو (write) ..... إذاً عندما نريد كتابة شيء في صفحة الويب نستخدم النهج (write) دائما ونضع بين الأقواس ما نريد كتابته في الصفحة .
رسائل الخطأ
رسائل الخطأ تحدث كثيرا في الجافا سكريبت . فكلما بنيت جافا سكريبت ووضعته في صفحة الوب وظننت أن كل شيء علي ما يرام ... فجأة تجد أحد رسائل الخطأ ظاهرة أمامك وتؤكد لك أن هناك شيء ليس علي ما يرام .
هناك نوعان رئيسيان من الأخطاء التي يمكن أن تحدث في الجافا سكريبت ... هما : الأخطاء التي تنتج عن الخطأ في الكتابة كالأخطاء الإملائية أو أنك وضعت علامة تنصيص مزدوجة بينما كان يجب وضع علامة مفردة .. وتسمي تلك الأخطاء Syntax errors) &) أو الأخطاء الناتجة عن استخدام أمر في غير موضعه بحيث يكون غير متناسق مع باقي أوامر الكود وتسمي (Run-Time errors) . أيا كان نوع الخطأ فكلاهما يعني أن هناك شيء ليس علي ما يرام .
هناك العديد من البرامج الجاهزة التي تمكنك من معالجة تلك الأخطاء . ولكني أفضل أن تفعل ذلك بنفسك فهي في الحقيقة أسهل مما تظن .
كيف نعالج و نتلافى الأخطاء ؟
يقال أن أفضل طريقة لمعالجة الأخطاء هو تلافيها. علي كل حال يمكنك تقليل احتمالات ظهور الخطأ بأن تستخدم محرر نصوص (الذي تستخدمه في تحرير الـ HTML ) ليست له حدود . بمعني أنه عند كتابة أمر من أوامر الجافا سكريبت لا ينتقل جزء من الأمر للسطر التالي نظرا لضيق حدود محرر النصوص . إذن أكتب كل أمر من أوامر الجافا سكريبت في سطر واحد فلا يوجد داعي لتقسيم الأمر الطويل نسبيا علي سطرين فذلك يمكن أن يؤدي للعديد من الأخطاء . إذا أخذت ذلك في الاعتبار تكون قد تلافيت العديد من رسائل الخطأ التي يمكن أن تضايقك .
نأتي الآن لكيفية علاج الأخطاء .. أجمل شيء في أخطاء الجافا سكريبت هي أنه عند حدوث خطأ ما يظهر لك صندوق رسائل يوضح لك ما هو الخطأ وأين وقع ذلك الخطأ (فقط مع متصفح نيتسكيب) . حيث يوضح لك رقم السطر الذي وقع فيه الخطأ .. ولكي تصل للسطر الذي وقع به الخطأ أبدأ عد السطور من أول سطر في الـ HTML وليس من أول سطر في الجافا سكريبت مع عد جميع الأسطر شاملة السطور البيضاء .
الأخطاء المركبة :
في بعض الأحيان تظهر أمامك العديد من رسائل الخطأ المتتابعة عند تحميل صفحة الويب الحاوية علي جافا سكريبت . وليس معني ذلك بالضرورة أن هناك العديد من الأخطاء في أوامر الجافا سكريبت .. فربما كانت كل هذه الأخطاء نتيجة لحدوث الأخطاء في السطور الأولي . لذلك عالج الأخطاء في الكود (SCRIPT) بالترتيب من أعلي لأسفل . ففي كثير من الأحيان تظهر لك 20 رسالة خطأ وعندما تعالج أول خطأ تجد نفسك قد عالجت جميع المشكلات .
لا يوجد ما يمكن أن يقال عن الأخطاء حاليا أكثر من ذلك فأنت الآن أصبحت تعرف كيف تعالج 99% من المشكلات و الأخطاء التي يمكن أن تحدث .فقط تذكر دائما أنه لابد من حدوث أخطاء فإذا لم تظهر لك أي رسالة خطأ فهذا لا يعني إلا أنك قد تركت الصفحة بيضاء ليس بها شيء .
أساسيات جافا سكريبت
• الإعلان عن المتغيرات
جافا سكريبت لا تهتم بنوع المتغير سواء كأن حرفيا أو عدد صحيح أو عدد عشري وهو ما قد يروق للكثير من المبتدئين لأنها تترجم وقت التنفيذ فهي لا تهتم بذلك فقط يسبق المتغير بالأمر
var
أمثلة
var x;
var X;
var ww10;
• ويمكن كتابة عدة متغيرات على سطر واحد
var x , X , y , ww10;
• ويمكن تخصيص قيم ابتدائية للمتغيرات
var x = 5 , X = 7 , y = 17;
• المعاملات الحسابية
- الطرح
++ الزيادة بمقدار واحد
-- النقصان بمقدار واحد
* الضرب
/ القسمة
% باقي القسمة
+ الجمع
• المعاملات المنطقية
! النفي
< اصغر من
> اكبر من
<= اصغر من أو يساوي
>= اكبر من أو يساوي
= يساوي
!= لا يساوي
&& و
|| أو
?: شرط
عبارات التحكم
IF statement
التحكم باستخدام if الشرطية مع وضع شروط يجب تحققه لكي يتم تنفيذ الجملة.
الصورة العامة لعبارة التحكم if الشرطية هو الشكل التالي :
If ( يتم وضع الشرط هنا )
{
يتم وضع هنا الأوامر أو العمليات التي ترغب في تنفيذها عند تحقق الشرط
}
ولآن سوف نأخذ مثال يتم توضيح ما سبق ذكره:
مثال :- في هذا المثال سوف نقوم عمل برنامج يتم فيه حساب مكعب لعدد ما يتم تعريفه في البرنامج.
No Statements
1 <html>
2 <head>
3 <title>Second Example</title>
4 </head>
5 <body >
6 ******** ********="**********">
7 <!--
8 var x=50;
9 if ( x > 0 ) // if test
10 {
11 y = ( x * x * x ); // 1: cube of x
12 document.write("y = "+y+" that is the cube of x when x = "+ x +"");
13 }
14 -->
15 ***********
16 </body>
17 </html>
1- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.
2و3 و4- <head> و </head> يوضع بينهما عنوان الصفحة . وأما بالنسبة لـ <title> و </title> تتيح لك هذه العلامة أن تعطي الصفحة عنوانا واضحا مميزا ويظهر هذا العنوان على نافذة المستعرض ويجب أن يحتوي على العنوان على حروف و أرقام فقط.
5- <body> و </body> حيث يتم كتابة داخل هذا الجزء محتويات صفحة الوب الفعلية مثل الجداول و النماذج و الصور و التي سيراها الزوار لهذه الصفحة .
6- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت كما ذكرناه في المثال الأول حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو ********** .
7 و14- الرمز التالي <!-- يقوم بإخفاء كود الجافا سكريبت من المستعرض أو المتصفح الذي لا يدعم لغة الجافا سكريبت وبعد الانتهاء من كتابة الكود يتم وضع الرمز التالي -- > .
8-في هذه الخطوة تم تعريف متغير وذلك باستخدام الكلمة var واسم هذا المتغير x وتم إعطاءه القيمة 50.
9- هنا استخدمنا جملة التحكم if الشرطية والشرط الموجود في المثال معناه إذا كانت قيمة المتغير x أكبر من الصفر (أي عند تحقق الشرط ) فإنه ينفذ الأوامر التي بعد جملة if الشرطية وقد يتم وضع الأقواس {} و ذلك يدل على أنه يجب تنفيذ كل الأوامر الموجودة بداخل الأقواس .
10و13- وضع الأقواس {} حيث تم وضعها عندما نريد أن ننفذ أكثر من جملة عند تحقق شرط ما وفي حالة عدم وضع الاقواس فإن البرنامج عند تحقق الشرط الموجود في حملةif سوف يقوم بتنفيذ أول جملة بعد if وهو y = ( x * x * x ); .
11- في هذه الخطوة يتم وضع العملية الحسابية وهي عملية تكعيب المتغير x وذلك بضرب المتغير في نفسه ثلاث مرات ومن ثم وضع الناتج من هذه ا لعملية في متغير y ولا ننسى وضع علامة الفاصلة المنقوطة في نهاية الجملة y = ( x * x * x ); .
12- العبارة التالية هي شبيهه بالمثال الذي تم شرحه في الصفحة رقم 3 ولكن هناك بعض النقاط الجديد
document.write("y = "+ y +" that is the cube of x when x = "+ x +""); و في هذا السطر يتم استخدام الكائن ( document ) وذلك لكتابة عن طريق الدالة (write) ما بداخل الأقواس .
و سوف نشرح الجزء التالي ("y = "+ y +" that is the cube of x when x = "+ x +"")
هنا نلاحظ التالي :
(" جملة أو نص وفي هذا المثال فراغ "+ المتغير وفي هذا المثال x +" جملة أو نص"+ المتغير وفي هذا المثال y +" هنا النص الذي تريد طباعته وفي هذا المثال y = ")
إذا نستنتج أنه إذا أردنا طباعة نص أو جملة فإنه يتم وضعها في علامتي تنصيص " " .
و إذا أردنا أن نطبع قيمة المتغير يتم وضعه بدون علامة تنصيص و نضعه بين علامتي + + .
SWITCH
الشكل العام لجملة switch وهي :
switch (n)
{ switch بداية قوس جملة التحكم
case 1:
نفذ هذه الأوامر
break;
case 2:
نفذ هذه الأوامر
break;
case 3:
نفذ هذه الأوامر
break;
case 4:
نفذ هذه الأوامر
break;
default :
نفذ هذه الأوامر
break;
} switch نهاية قوس جملة التحكم
وهي في العادة تستخدم عندما تكون لديك قيمة محددة ومعرفة وتريد تنفيذ العمليات أو الأوامر عندما يتم اختيار قيمة معينة.
يقوم الأمر باختبار قيمة المتغير n عندما تكون مساوية لواحد من الحالات التي حددتها وهي case تنفذ الأوامر التي وضعتها بداخل الـ case إلى أن يصل إلى كلمة break عند ذلك يتم الخروج من البلوك الخاص بجملة switch و إذا لم تساوي أي من القيم التي افترضتها يتوجه التنفيذ إلى الأوامر التي تلي الأمر default .
وسوف نشرح مثال بعد أن نأخذ عبارات التكرار حيث سندمج جملة التحكم switch مع جملة التكرار for وذلك فهم التركيب بين جمل التحكم و التكرار ومن ثم نترك لخيالك الواسع للإبداع في كتابة البرامج . و ألان لننتقل إلى عبارات التكرار .
عبارات التكرار
FOR
نفس الوظيفة جملة while ولكن هنا يتم تحديد القيمة التي سوف نبداء منها ومقدار الزيادة أو النقصان وعدد مرات التكرار والشكل العام لجملة for هي :
For ( قيمة البداية; شرط يتم فيه تحديد عدد مرات التكرار ; مقدار لزيادة أو النقصان )
{ for بداية قوس جملة التكرار
نفذ هذه الأوامر
} for نهاية قوس جملة التكرار
إليك المثال الذي يوضح ذلك
for (var x = 1; x <= 10 ; x++)
{
نفذ هذه الأوامر
}
التركيب مطابق تماما للغة ++C ومعنى المثال ابدأ العد من 1 حتى تصل القيمة إلى قيمة اصغر من أو تساوى 10 وفي كل مرة زيد قيمة المتغير x بمقدار 1 وملخص ذلك كرر ما بداخل البلوك 10 مرات
مرة أخرى لا حظ استخدام المؤثرات المنطقية المظلل بالأزرق.
و ألان سوف نقوم بشرح مثال يحتوي على جملة التكرار for وعلى جملة التحكم switch
No Statements
1 <html>
2 <head> welcome to java
3 </head>
4 ******** ********="**********">
5 <!--
6 var n=5;
7 for (var i=1 ; i<n ; i+1)
8 {
9 switch (i)
10 {
12 case 1: { document.write(" welcome "); }
13 break;
14 case 2: { document.write(" to "); }
15 break;
16 case 3: { document.write(" you "); }
17 break;
18 case 4: { document.write(" and "); }
19 break;
20 default :{ document.write(" *+*+*+*+* "); }
21 break;
22 }
23 }
24 -->
25 ***********
26 <body>
27 </body>
28 </html>
1و28- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.
2و3 - <head> و </head> يوضع بينهما عنوان الصفحة .
4- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو ********** .
5 و24- الرمز التالي <!-- يقوم بإخفاء كود الجافا سكريبت من المستعرض أو المتصفح الذي لا يدعم لغة الجافا سكريبت وبعد الانتهاء من كتابة الكود يتم وضع الرمز التالي -- > .
6- في هذه الخطوة يتم تعريف متغير n ويتم إعطاءه القيمة 5 وأخير يتم وضع الفاصلة المنقوطة .
7- استخدام جملة التكرار for حيث يتم بداخل جملة for تعريف متغير i وتم إعطاءه قيمة ابتدائية تساوي واحد ثم بعد ذلك ثم وضع فاصلة منقوطة ; ثم بعد ذلك يتم وضع الشرط والذي يحدد عدد مرات التكرار وفي مثالنا هذا تم تحديد عدد المرات وهو 4 مرات التكرار ثم بعد ذلك تم وضع مقدار الزيادة وهو في مثالنا مقدار الزيادة بواحد ويمكن وضع أي مقدار زيادة أو مقدار نقصان على حسب متطلبات البرنامج الذي تريد عمله ، ونعود إلى المثال في الجزء i+1 في هذا الفقرة يقوم البرنامج بإضافة 1 إلى أخر قيمة للمتغير i .
المطلوب فهمه في هذه الخطوة ما يلي :
أنه عندما يدخل البرنامج في جملة التكرار for فإنه ينفذ الخطوات التالية
الخطوة الأولى :
أن يضع قيمة أولية لمتغير I .
الخطوة الثانية :
يتحقق من الشرط إذا كانت قيمة I اقل من قيمة الـ n ( أو على حسب الشرط الذي تضعه )إذا لم يتحقق الشرط فإنه أما إذا تحقق الشرط فإنه يقوم بزيادة المتغير I بمقدار 1 وينتقل إلى الخطوة الثالثة .
الخطوة الثالثة :
ينفذ كل الأوامر الموجودة بداخل الأقواس الخاصة بجملة الـ for و من ثم يعود إلى الخطوة الثانية .
الخطوة الرابعة :
يخرج من جملة التكرار for وينفذ باقي البرنامج .
والشكل التالي يوضح الجزء السابق :
8 و23- في هذه الخطوة يتم كتابة فتح قوس جملة التكرار for و ويكون القوس على شكل { ويجب أن يغلق بالقوس الذي شكله } كما في المثال .
9- في هذه الخطوة يتم استخدام عبارة التحكم switch( i ) حيث يتم باختبار قيمة المتغير i عندما تكون مساوية لواحد من الحالات التي حددتها وهي case يتم تنفذ الأوامر الموجودة بداخل الأقواس لهذه الـ case .
10 و22- في هذه الخطوة يتم كتابة فتح قوس عبارة التحكم switch( i ) و ويكون القوس على شكل { ويجب أن يغلق بالقوس الذي شكله } .
12و13- في هذه الخطوتين يتم التأكد من أن القيمة المتغير i تساوي القيمة الموجودة أمام كلمة case وفي مثالنا وخصوص هذه الحالة تساوي 1 حيث يتم تنفيذ ما بداخل القوس التي شكلها } { وهو
} document.write(" welcome "); {
break;
في هذا الجملة يتم استخدام الكائن ( document) وذلك لكتابة عن طريق الدالة ( write) ما بداخل الأقواس التي شكلها ( ) وبينها علامة " " . ثم بعد ذلك يتم قفل القوس الذي شكله } { وهنا استخدمنا الأقواس } { وذلك في حالة أنك تريد تنفيذ أكثر من أمر عندما تكون قيمة المتغير i تساوي القيمة الموجودة أمام كلمة case. ثم بعد ذلك يتم كتابة الأمر break; وذلك للخروج من جملة التحكم switch .
ملاحظة : من الضروري كتابة كلمة break ; بعد كل case وذلك لمنع الانتقال و تنفيذ باقي الحالات الـ case الأخرى .
14 و15- نفس فكرة الخطوة 12-13 فيما عدى انه يتم التأكد من أن القيمة المتغير i تساوي القيمة الموجودة أمام كلمة case وهي تساوي هنا 2 ثم بعد ذلك يتم كتابة الأمر break; وذلك للخروج من جملة التحكم switch .
16 و17- نفس فكرة الخطوة 12-13 فيما عدى انه يتم التأكد من أن القيمة المتغير i تساوي القيمة الموجودة أمام كلمة case وهي تساوي هنا 2 ثم بعد ذلك يتم كتابة الأمر break; وذلك للخروج من جملة التحكم switch .
18 و19- نفس فكرة الخطوة 12-13 فيما عدى انه يتم التأكد من أن القيمة المتغير i تساوي القيمة الموجودة أمام كلمة case وهي تساوي هنا 2 ثم بعد ذلك يتم كتابة الأمر break; وذلك للخروج من جملة التحكم switch .
20و21- في هذه الخطوة يتم وضع حالة افتراضية وذلك يعني أنه عند عدم تحقق أحد الحالات السابقة يقوم بتنفيذ هذه الحالة وهي الـ default: حيث يتم تنفيذ ما بداخل القوس التي شكلها } { وهو
default:{ document.write(" *+*+*+*+* ");}
بعد ذلك يتم كتابة الأمر break; وذلك للخروج من جملة التحكم switch .
break;
25- وفي هذه الخطوة يتم كتابة *********** وهو الذي يدل المتصفح أنه نهاية برنامج الجاف سكريبت .
26 و27- <body> و </body> حيث يتم كتابة داخل هذا الجزء محتويات صفحة الويب الفعلية مثل الجداول و النماذج و الصور و التي سيراها الزوار لهذه الصفحة .
ملاحظة : هنا نلاحظ اننا لم نكتب برنامج الجافا سكريبت داخل منطقة الـ Body لصفحة وهي المنطقة المحصورة بين <body> و </body> و إنما كتبناه في منطقة الـ head وهي المنطقة المحصورة بين <head> و </head> وهذا يعني أنه يمكن كتابة برنامج الجافا سكريبت في أي جزء من كود أو لغة الـ HTML .
WHILE
الهدف من عبارات التكرار هو تكرار أجزاء من البرنامج مرات ومرات حسب الشرط العددي أو شرط معين وذلك لاختصار كتابة جزء كبير من التعليمات .
الشكل العام لعبارة while كآلاتي :
تعريف متغير و إعطاءه قيمة أولية ;
while ( شرط يتم فيه تحديد عدد مرات التكرار )
{ while بداية قوس جملة التكرار
نفذ هذه الأوامر
زيادة المتغير الذي تم تعريفة في الأعلى ;
} while نهاية قوس جملة التكرار
اليك المثال التالي
var x = 1;
while (x <= 10)
{
x +2;
}
لاحظ استخدام المعاملات المظلل بالأزرق وارجع إلى الجدول لمعرفة استخدامها ونعود إلى مثالنا الأمر
while يقوم بعمل تكرار البلوك أو أمر بشرط أن تكون قيمة المتغير x اصغر من أو تساوي 10
و البلوك المطلوب تكراره عبارة عن زيادة قيمة المتغير x بمقدار 2 ثم يقوم أمر التكرار بالكشف ثانية على القيمة حتى تصل إلى الشرط الذي ينهي عملية التكرار .
و الآن نأخذ مثال كامل على عبارة أو جملة التكرار while :
No Statements
1 <html>
2 <title>fouth Example</title>
3 <body>
4 ******** ********="**********">
5 <!--
6 var x = 1;
7 while (x <= 3)
8 {
9 document.write("<h"+x+"> welcome "+x+"");
10 x+1
11 }
12 -->
13 ***********
14 </body>
15 </html>
1و15- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.
2 - <title> و </title> تتيح لك هذه العلامة أن تعطي الصفحة عنوانا واضحا مميزا ويظهر هذا العنوان على نافذة المستعرض ويجب أن يحتوي على العنوان على حروف و أرقام فقط.
3 و14- <body> و </body> حيث يتم كتابة داخل هذا الجزء محتويات صفحة الوب الفعلية .
4- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو ********** .
6 - في هذه الخطوة تم تعريف متغير و ذلك باستخدام الكلمة var واسم هذا المتغير x وتم إعطاءه القيمة 1 .
7 و14- الرمز التالي <!-- يقوم بإخفاء كود الجافا سكريبت من المستعرض أو المتصفح الذي لا يدعم لغة الجافا سكريبت وبعد الانتهاء من كتابة كود الجاف سكريبت يتم وضع الرمز التالي -- > .
8 و11- في هذه الخطوة يتم كتابة فتح قوس جملة التحكم while و ويكون القوس على شكل { ويجب أن يغلق بالقوس الذي شكله } كما في المثال .
9- هنا استخدمنا جملة التكرار while والشرط الموجود في المثال معناه إذا كانت قيمة المتغير x أقل من أو يساوي 3 (أي عند تحقق الشرط ) فإنه ينفذ الأوامر التي بعد جملة while و يتم وضع الأقواس {} و ذلك يدل على أنه يجب تنفيذ كل الأوامر الموجودة بداخل الأقواس .
10- العبارة document.write("<h"+x+"> welcome "+x+""); و في هذا السطر يتم إستخدام الكائن (document) وذلك لكتابة عن طريق الدالة (write) ما بداخل الأقواس . وما بداخل الأقواس هو عبارة عن أمر عادي من أوامر HTML الذي يأمر المتصفح بإظهار الجملة " "<h"+x+"> welcome "+x+"" "
والان لنأخذ هذه الجملة ونشرحها بالتفصيل
" < h "+x+" > welcome " +x+ ""
هذا السطر سوف نشرحه على خطوات :
الخطوة الأولى:
سوف يتم أولا أرسال الجملة التالية الى المستعرض على الصورة التالية وهي
> " يتم وضع قيمة المتغير x وهي في أول مرة تساوي 1 " h <
إذا يصبح شكل الجملة التالي h1 > < وهذا الشكل يفهمه المستعرض على أنك تريد أن تطبع عنوان ويكون المستوى لهذا العنوان هو 1 . ثم بعد ذلك سوف يقوم بطباعة الكلمة welcome على صفحة الانترنت
الخطوة الثانية :
يقوم بطباعة قيمة المتغير x .
ثم بعد ذلك يتم زيادة قيمة المتغير x بمقدار واحد وذلك عن طريق كتابة الجملة x+1 . ومن ثم يعود الى جملة while و يكرر نفس الشيء حيث يختبر الشرط و عند تحققه يخرج من جملة while .
13- وفي هذه الخطوة يتم كتابة *********** وهو الذي يدل المتصفح أنه نهاية برنامج الجاف سكريبت .
الدوال
هناك دوال تعطيها لك اللغة وهي دوال جاهزة لإجراء عمليات معينه سوف نتعرض لها فيما بعد والدوال الأخرى وهي الأكثر استخداما هي التي سوف تنشئها أنت بنفسك مثال :
Function FunctionName ( )
{
تنفيذ الأوامر
}
و الآن سوف نأخذ مثال بسيط لطريقة استخدام الدوال:
No Statements
1 <html>
2 <head>
3 <title>useing function</title>
4 ******** ********="**********">
5 <!--
6 function clickme()
7 {
8 alert("welocm to you");
9 }
10 -->
11 ***********
12 </head>
13 <body>
14 <input type="button" value=" hi " onclick='clickme();'>
15 </body>
16 </html>
1و16- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.
2و12 - <head> و </head> يوضع بينهما عنوان الصفحة .
3 - <title> و </title> تتيح لك هذه العلامة أن تعطي الصفحة عنوانا واضحا مميزا ويظهر هذا العنوان على نافذة المستعرض ويجب أن يحتوي على العنوان على حروف و أرقام فقط.
4- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت كما ذكرناه في المثال الأول حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو ********** .
5 و10- الرمز التالي <!-- يقوم بإخفاء كود الجافا سكريبت من المستعرض أو المتصفح الذي لا يدعم لغة الجافا سكريبت وبعد الانتهاء من كتابة الكود يتم وضع الرمز التالي -- > .
6- يتم كتابة الكلمة function وهي كلمة محجوزة في الغة وتقوم هذه الكلمة بتعريف دالة سوف يتم انشاءها و أسم هذه الدالة في مثالنا هو clickme() و عندما سنستدعي الدالة من أي مكان من الصفحة يجب أن تكون بنفس الاسم.
7 و9- في هذه الخطوة يتم كتابة فتح قوس لدالة function clickme() و ويكون القوس على شكل { ويجب أن يغلق بالقوس الذي شكله } كما في المثال .
8- استخدام الأمر alert("welocm to you"); حيث يقوم هذا الأمر بإظهار رسالة تنبيه يتم فيها كتابة الجملة المراد إظهارها وتنبيه المستخدم بها وفي مثالنا سوف يقوم هذا الامر بإظهار الجملة التالية welocm to you و لا تنسى أن الجملة يجب وضعها في بين علامتي تنصيص كما في التالي :
) " النص المطلوب طباعته " ِalert(
11- وفي هذه الخطوة يتم كتابة *********** وهو الذي يدل المتصفح أنه نهاية برنامج الجاف سكريبت .
13 و15- <body> و </body> حيث يتم كتابة داخل هذا الجزء محتويات صفحة الوب الفعلية .
14- في هذه الخطوة فقط استخدمنا لغة HTML حيث تم تعريف زر وهو من نوع type="button" وقد اعطيناه القيمة value=" hi " وهذه الكلمة التي داخل value ما سيظهر وهو في مثالنا كلمة hi ثم بعد ذلك تم كتابة الكلمة
النماذج
الجافا سكريبت تقوم بوضع كل الوثائق ( Forms ) تجدها في الصفحة في مصفوفة تسمى ( forms ). ويمكنك الوصول لكل نموذج ( form ) وذلك عن طريق الفهرس ( index ) في هذه المصفوفة. النموذج الأول له الفهرس رقم 0 , و النموذج الثاني له الفهرس رقم 1 وهكذا. ويمكن التعامل مع النموذج ( form ) عن طريق اسم النموذج .
ولكي يتم فهم كيفية التعامل مع النماذج نقوم بأخذ بعض الأمثلة :
No Statements
1 <html>
2 <head>
3 <title> التعامل مع الوثائق </title>
4 ******** ********="**********">
5 <!--
6 function testform()
7 {
8 // test the form no.0
9 if(document.forms[0].elements[0].value==""
10 ||document.forms[0].elements[1].value==""
11 ||document.forms[0].elements[2].value=="")
12 {
13 alert("يجب الكتابة في كل الحقول");
14 }
15 }
16 -->
17 ***********
18 </head>
19 <body>
20 <center>
21 <form method=post onSubmit="return testform()">
22 <tabel>
23 <tr>
24 <td>Name : </td>
25 <td><input type="text" name="name" ></td></tr>
26 <tr><td>Address :</td>
27 <td><input type="text" name="address" ></td></tr>
28 <tr><td>City :</td>
29 <td><input type="text" name="city" ></td></tr>
30 </tabel>
31 <p>
32 <input type="submit" name="إرسال البيانات" value="submit">
33 </form>
34 </center>
35 </body>
36 </html>
شرح الكود:
أولاً قمنا بإنشاء الـ form وذلك بلغة الـ HTML وهو الجزء المحاط بالون الأزرق
حيث تم إنشاء form و حددنا طريقة إرسال هذه form وذلك بطريقة الـ method=post واستخدمنا الحدث onSubmit وهو حدث الضعط على زر (إرسال البيانات ) من صفحة الويب حيث سوف يتم إستدعاء دالة testform() وهي الدالة مكتوبة بلغة الجافا سكريبت و التي تقوم بفحص الحقول في الـ form و التأكد من الكتابة في كل الحقول وعدم ترك أحد الحقول فارغ .
ثم قمنا بإنشاء الحقول الخاصة بالـ form وبعد ذلك أنشأنا زر الإرسال عن طريق ا لامر input وحددنا نوع هذا المدخل أنه من نوع زر إرسال و تم إعطاءه الاسم ( إرسال البيانات ) .
والان سوف نتحدث عن الدالة testform() وهو الجزء المحاط بالون الاحمر وهو الجزء الخاص بالجافا سكريبت
نلاحظ في أنه عند تنفيذ الدالة فإنه يستخدم جملة If الشرطية حيث أنه يقوم بفحص الفورم رقم صفر ( Form[0] ) وحددنا العنصر رقم صفر أيضا ( elements[0] ) في نفس ( Form[0] ) وهو في مثالنا الحقل name وحددنا أيضا القيمة التي بداخله إذا كانت فارغة أي لا يوجد أي شيء مكتوب وثم بعد ذلك استخدمنا العلاقة المنطقية ( || ) وذلك إذا لنقوم بفحص العنصر رقم واحد أيضا ( elements[1] ) في نفس ( Form[0] ) وهو في مثالنا الحقل المسمى address و حددنا أيضا القيمة التي بداخله إذا كانت فارغة ثم وضعنا العلاقة المنطقية ( || ) وذلك أنه إذا وجد احد الحقول فارغة فإنه سوف يقوم بتنفيذ الامر alert() وسوف يظهر الرسالة التالية ( يجب الكتابة في كل الحقول )
مثال آخر بإنشاء قائمة منسدلة :
No Statements
1 <html>
2 <head>
3 <title>قائمة منسدلة</title>
4 ******** ********="**********">
5 function formHandler()
6 {
7 Var URL=document.pulldown.selectname.options[document.pulldownMenu.yourSelect.selectIndex].value
8 ****************.href=URL
9 }
10 ***********
11 choose a search engine:
12 <form name="pulldownMenu">
13 <select name="yourSelect" onChange="formHandler()">
14 <option value="http://www.msn.com">MSN
15 <option value="http://www.yahoo.com">Yahoo
16 <option value="http://www.altavista.com">Altavista
17 </select>
18 </form>
19 </html>
شرح الكود :
يتم إنشاء القائمة المنسدلة وذلك بلغة الـ HTML وهو الجزء المحاط بالون الأزرق و ذلك بإتباع الخطوات التالية :
يتم إنشاء الـ Form وذلك عن طريق كتابة الـ tag وهو <form name="pulldownMenu"> وفي هذه الحالة قمنا بإنشاء الـ Form وتم تسميته pulldownMenu ثم بعد ذلك استخدمنا الـ tag < select > وهو الذي يقوم بإنشاء القائمة المنسدلة واليك هذا الامر ,
<select name="yourSelect" onChange="formHandler()"> ومن ثم سمينا هذه القائمة بالاسم yourSelect بالإضافة أنه إضفنا عند الاختيار الحدث onChang() وهو حدث تغير قيمة معينة لحقل ما بحيث يتم تنفيذ الدالة formHandler() والتي سوف نشرحها بعد قليل ، ثم بعد ذلك نقوم بوضع الخيارات عن طريق الـ tag < option > وبعد ذلك نضع لكل أختيار قيمته عن طريق الـ attribute وهي value وأحد الخيارات الموجودة في المثال <option value="http://www.msn.com">MSN .حيث يحتوي هذا الامر على الخيار MSN والذي له القيمة ( value ) التالية http://www.msn.com .
والان سوف نتحدث عن الدالة testform() وهو الجزء المحاط بالون الاحمر وهو الجزء الخاص بالجافا سكريبت:
نلاحظ عند تنفيذ الدالة formHandler() نقوم بالتالي أولاً نقوم يتعريف متغير سميناه URL وجعلناه يساوي اسم الفورم بإضافة إلى القائمة المنسدلة وإيضا الخيار الذي تم أختيارة مع القيمة التي مع هذا الخيار.
ثم بعد ذلك أستخدام هذا المتغير والذي يحتوي على اسم موقع ما مثلاً http://www.yahoo.com حيث سوف نستخدم هذه الجملة ****************.href=URL حيث ساويناها مع المتغير الذي به اسم موقع ما وهذه الجملة سوف تقوم بالانتقال إلى هذا الارتباط أو الصفحة الموجودة في هذا المتغير
الأحداث
مقدمة :
الويندوز هو محيط رسائلي يتم إرسال رسالة عند حدوث حدث مثل مرور الماوس فوق صورة أو فوق زر معين أو التركيز على نافذة أو ضغط الزر الأيمن أو الأيسر أو الأوسط للماوس وهكذا نستغل هذه الأحداث لتنشيط جزء أو كل من برنامج جافا سكريبت ليقوم بعمل وظائفه المصمم من اجلها وسنتعرض معا بعض الأمثلة والأحداث لشرح الفكرة :
الحدث شرح الحدث
onClick() استجابة لضغط زر يتم تحديده عندها ينفذ جزء من الكود
onSubmit() تستخدم كثيرا استجابة لضغط الماوس أو لوحة المفاتيح على زر إرسال النماذج
onMouseOver() هو حدث مرور الماوس فوق عنوان أو وصلة
onMouseOut() حدث تحريك الماوس بعيدا عن وصلة
onFocus() حدث وضع الماوس على حقل مدخلات معينه
onChange() حدث تغير قيمة معينه لحقل
onBlur() حدث ترك حقل بيانات بدون تغيير
onLoad() حدث انتهاء متصفح الإنترنت من تحميل الصفحة الحالية
onUnload() حدث الخروج من الصفحة الحالية إلى
و الآن سوف نأخذ أمثلة توضح كيفية أستخدم الأحداث في صفحة الويب أرجو أن تنتقل إلى الصفحة التالية.
مثال على الحدث onClick() :
No Statements
1 <html>
2 <head>
3 <title>Onclick alert message</title>
4 ******** ********="**********">
5 function pushbutton()
6 {
7 alert("تحت الإنشاء");
8 }
9 ***********
10 </head>
11 <body>
12 <center>
13 <h2>
14 <a href=" http://www.cool.com" onClick="pushbutton();">
15 Vist our home page </a></h2>
16 </center>
17 </body>
18 </html>
في هذا المثال عند القيام بالضغط على الارتباط " http://www.cool.com "عند الحدث الضغط الفأرة " onClick() " يتم تنفيذ الدالة pushbutton() والتي تقوم بإظهار الرسالة " تحت الإنشاء" .
اليك التنفيذ :
مثال على الحدث onSubmit() :
No Statements
1 <html><head>
2 <title>onSubmit alert message </title>
3 ******** ********="**********">
4 <!--
5 function testform()
6 {
7 alert("نشكرك لتسجيل معنا في الموقع");
8 }
9 -->
10 ***********
11 </head>
12 <body>
13 <form method=post onSubmit="return testform()">
14 <tabel>
15 <tr>
16 <td>Name : </td>
17 <td><input type="text" name="name" ></td></tr>
18 <p><tr><td>Email :</td>
19 <td><input type="text" name="Email" ></td></tr>
20 </tabel>
21 <p>
22 <input type="submit" name="إرسال" value="submit">
23 </form>
24 </body>
25 </html>
في هذا المثال سوف نقوم بإظهار رسالة لمستخدم عند القيام بالضغط على زر إرسال في الـ form لذلك سوف نستخدم الحدث" onSubmit() " وذلك لاستدعاء الدالة testform() والتي تقوم بإظهار رسالة للمستخدم وهي " نشكرك لتسجيل معنا في الموقع " .
اليك التنفيذ :
مثال على الحدثين onMouseOver() و onMouseOut() :
No Statements
1 <html><head>
2 <title>Onclick alert message</title>
3 ******** ********="**********">
4 function MouseOver()
5 {
6 alert("The mouse was over");
7 }
8 function MouseOut()
9 {
10 alert("The mouse out of the link");
11 }
12 ***********
13 </head>
14 <body>
15 <center>
16 <h2>
17 <a href="http://www.com" onMouseOver="MouseOver();">
18 Event win mouse over this link</a></h2>
19 <hr>
20 <p>
21 <a href="http:/www.com" onMouseOut="MouseOut();">
22 Event win mouse out of this link </a>
23 </center>
24 </body>
25 </html>
في هذا المثال عند القيام بالمرور بالفأرة على وصلة أو إرتباط وهو الحدث onMouseOver() " حيث سوف نستفيد من هذا الحدث في استدعاء دالة مكتوبة بالجافا سكريبت وذلك لنتفيذ أي دالة تريدها في هذا المثال سوف نقوم بإظهار رسالة تنبه المتسخدم بمرور الفأرة فوق الارتباط أو الوصلة وفي مثالنا الرسالة هي " The mouse was over "
وفي الوصلة الاخرى عند المرور ومن ثم الابتعاد بالفأرة عن وصلة أو ارتباط وهو الحدث MouseOut() " حيث سوف نستفيد من هذا الحدث في استدعاء دالة مكتوبة بالجافا سكريبت وذلك لنتفيذ أي دالة تريدها في هذا المثال سوف نقوم بإظهار رسالة تنبه المتسخدم بمرور الفأرة فوق الارتباط أو الوصلة و من ثم الابتعاد عن الوصلة أو الارتباط وفي مثالنا الرسالة هي " The mouse was over "
اليك التنفيذ :
مثال على الحدث onFocus() :
No Statements
1 <html><head>
2 <title>onFocus alert message</title>
3 ******** ********="**********">
4 ***********
5 <body>
6 Enrter your name:
7 <form>
8 <INPUT TYPE="TEXT" NAME "YourName" onFocus = "********status=('Enter your name');return true;">
9 </form>
10 </center>
11 <body>
12 </html>
في هذا المثال عند القيام بوضع المؤشر داخل الحقل وهو الحدث "onFocus()"
تظهر لنا رسالة في أسفل المستعرض " Enrter your name " .
اليك التنفيذ :
مثال على الحدث onChange():
No Statements
1 <html><head>
2 <title>onChange alert message</title>
3 ******** ********="**********">
4 ***********
5 <body>
6 Enter your name:
7 <form>
8 <INPUT TYPE="TEXT" NAME= "YourName" onChange="********status=('you was change the filed');return true;">
9 </form>
10 </center>
11 <body>
12 </html>
في هذا المثال عند تغيير مكان المؤشر عن الحقل " القيام بالحدث onChange()"
تظهر لنا رسالة في أسفل المستعرض " you was change the filed " .
اليك التنفيذ :
مثال على الحدث onBlur() :
No Statements
1 <html><head>
2 <title> onBlur alert message</title>
3 ******** ********="**********">
4 ***********
5 <body>
6 Enter your name:
7 <form>
8 <INPUT TYPE="TEXT" NAME= "YourName" onBlur = "********status=('youe leaf the filed empty');return true;">
9 </form>
10 </center>
11 <body>
12 </html>
في هذا المثال عند ترك الحقل فارغاً " القيام بالحدث onBlur()"
تظهر لنا رسالة في أسفل المستعرض " you leaf the filed empty " .
اليك التنفيذ :
مثال على الحدثين onLoad() و onUnload() :
No Statements
1 <html><head>
2 <title>onLoad & onUnload alert message</title>
3 ******** ********="**********">
4 function onloadweb()
5 {
6 alert("أهلا بكم في موقعنا");
7 }
8 function onUnloadweb()
9 {
10 alert("نشكركم على زيارة موقعنا");
11 }
12 ***********
13 </head>
14 <body onLoad="onloadweb()" onUnload="onUnloadweb()">
15 <center><h1>بسم الله الرحمن الرحيم<h1></center>
16 </body>
17 </html>
في هذا المثال عند القيام بتحميل الصفحة وهو الحدث " onLoad() "
يتم تنفيذ الدالة onloadweb() فتظهر لنا رسالة " أهلا بكم في موقعنا " .
وعند القيام بإغلاق الصفحة ( المستعرض ) و هو الحدث onUnload() "
يتم تنفيذ الدالة onUnloadweb()فتظهر لنا رسالة " نشكركم على زيارة موقعنا " .
اليك التنفيذ :
بعض الأمثلة متنوعة
مثال عن كيفية التنقل بين العناوين المخزنة في المتصفح :
No Statements
1 <HTML>
2 <HEAD>
3 <TITLE> History Buttons </TITLE>
4 ******** ********="**********">
5 function nav(X){ history.go(X);}
6 ***********
7 </<HEAD>
8 <BODY>
9 <CENTER><h1>Histoy Buttons</h1>
10 <h2> Here are the tow buttons made with navigator form buttons: </h2><P>
11 <FORM>
12 <INPUT TYPE="button" VALUE="الصفحة السابقة" onClick="nav(-1)">
13 <INPUT TYPE="button" VALUE="الصفحة التالية" onClick="nav(1)">
14 </FORM>
15 </CENTER>
16 </BODY>
17 </HTML>
في هذا المثال قمنا بعرض طريقتين لتنقل بين العناوين المخزنة في المتصفح حيث سوف نستفيد من الكائن history وايضا الدالة go( ) حيث يتم تمرير قيمة -1 إذا أردنا الرجوع صفحة إلى الخلف أو القيمة 1 إذا أردنا الانتقال الصفحة التالية. وفي مثالنا عندالحدث الضغط على زر " الصفحة السابقة " يتم تنفيذ الدالة nav( 1- ) حيث يتم الانتقال إلى الصفحة الويب السابقة.و ايضا عندالحدث الضغط على زر " الصفحة التالية " يتم تنفيذ الدالة nav( 1 ) حيث يتم الانتقال إلى الصفحة الويب التالية .
اليك التنفيذ :
مثال عن كيفية إنشاء زر لإرسال بريد إلكتروني :
No Statements
1 <HTML>
2 <HEAD>
3 <title> Email button</title>
4 </HEAD>
5 <BODY>
6 <FROM>
7 <INPUT TYPE="button" VALUE="send e-mail" onClick="self.********='mailto:mymail@any_compeny. com';">
8 </FORM>
9 </BODY>
10 </HTML>
عند الحدث onClick سوف يتم تنفيذ البرنامج self.******** وهذا الأمر يقوم بإرسال المستخدم إلى برنامج البريد الالكتروني الافتراضي الموجود على الكمبيوتر ، والعنوان في حقل " إرسال إلى " وفي مثالنا يتم في هذا الحقل كتابة mymail@any_compeny.com .
إليك التنفيذ:
مثال عن كيفية فحص و اختبار المتصفح :
No Statements
1 <HTML>
2 <HEAD>
3 <TITLE> testing All Browsers</TITLE>
4 ********>
5 function browsertest()
6 {
7 thisapp=navigator.appName
8 thisversion=navigator.appVersion
9 thisappcodename=navigator.appCodeName
10 alert("Youare using "+thisapp+"version"+thisversion+",which is code named"+thisappcodename+".");
11 }
12 ***********
13 </HEAD>
14 <BODY onload="browsertest()" bgcolor="FFFFFF">
15 <CENTER>
16 <H1> Testing All Browsers</H1>
17 <H2>You can modigy this script and use it to direct your ********** visitors in one direction .and other visitors elsewhere.</H2>
18 </CENTER>
19 </BODY>
20 </HTML>
في هذا المثال عند تحميل الصفحة أي الحدث onload يتم تنفيذ الدالة browsertest() حيث تقوم هذه الدالة بفحص واختبار المتصفح وذلك عن طريق الكائن navigator ، والخاصية appName
و appVersion و appCodeName حيث :
عند كتابة الجملة navigator.appName سوف تقوم بإرجاع اسم المتصفح
وعند كتابة الجملة navigator.appVersion سوف تقوم بإرجاع إصدار المتصفح
وعند كتابة الجملة navigator.appCodeName سوف تقوم بإرجاع الاسم البر مجي .
بالتوفيق ان شاء الله
هل لغة الجافا سكريبت صعبة التعلم وما هي الأشياء المساعدة لتعلم Java script.
لغة الجافا سكريبت ليست بالطبع صعبة وكل ما عليك فعله هو الاستعانة بالله ثم الإصرار على التعلم و تطبيق الأمثلة التي سنتطرق لها وفهم شرح الأساسيات اللغة . ثم بعد ذلك أطلق العنان لمخيلتك .
لماذا لا تكفي لـ HTML و لماذا نحتاج إلى لغات النصوص ( script ******** ) مثل الجافا سكريبت .
أن لغات النصوص منها الجاف سكريبت تحول موقع الوب إلى موقع يتفاعل مع المستخدم من إضافات أزرار ونماذج تأخذ بيانات من المستخدم وتحولها إلى نماذج أخرى أو ترسلها بالبريد الإلكتروني أو تجري عليها عمليات حسابية ليست بسيطة أنها باختصار تحول الصفحة إلى ما يسمى بصفحات الوب الديناميكية أو صفحات الوب التفاعلية هو مالا تقدمه لغة HTML .
ولا ننسى من النقاط المهمة التي يجب معرفتها أن تنفيذ البرنامج المكتوب بلغة Java Script هو من اختصاص المتصفح ( Browser ) و الذي ينفذها سطر سطر ( وهذا ما يطلق عليه Interpreter ) وليس عن طريق ترجمتها تجميعياً وهذا ما يحدث في لغات البرمجة عالية المستوى ( وهذا ما يطلق عليه Compiler).
ما هي البرامج التي تحتاجها لكتابة برامج واختبارها.
الموضوع بمنتها السهولة فكل ما تحتاجه هو ما يلي :
o محرر النصوص المرفق مع الويندوز ( Notepad ).
o متصفح الإنترنت المرفق مع نظام التشغيل سواء (Internet Explorer ) أو (Netscape ) أو أي متصفح يدعم لغة الجافا سكريبت.
هذا كل شيء كل ما تحتاجه .
استخدام Java Script :
برنامج جافا سكريبت هو جزء يتم وضعه داخل لغة HTML لزيادة فاعليتها فعند تصفح موقع أو استدعاء صفحة محددة مكتوب بداخلها Java Script code يتم إنزاله إلى جهازك وعند حدوث حدث معين مثل استدعاء برنامج جافا للتنفيذ عند الضغط على زر معين أو عند حركة للماوس يتم ترجمة البرنامج وتنفيذه سطر بسطر حتى ينتهي كما ذكرنا سابقاً.
الشكل العام الذي سيكون عليه برنامج جافا سكريبت :
<HTML>
<HEAD>
<TITLE> يتم هنا وضع عنوان الصفحة </TITLE>
******** ********=”**********”>
<!--
تعليمات الجافا سكريبت توضع هنا
-- >
***********
</HEAD>
<BODY>
تعليمات ألـHTML يتم كتابتها هنا في هذه المنطقة و أيضا استدعاء برنامج الجاف سكريبت
</BODY>
</HTML>
ملاحظات:
******** ********=”**********”>
هذا السطر يجب أن يكون أول سطر في أي كود (SCRIPT) جافا سكريبت حيث أنه ينبه الجزء الخاص بترجمة الصفحة بأن ما سيتبع هذا الأمر هو Java Script وأن عليه الاستعداد لتنفيذ برنامج يحتوي على سبيل المثال جملة شرطيه ( if else ) أو جملة تكرار ( Loop ) وغيره من الجمل و التي يحتوي عليها أي برنامج .
أن الرمز التالي <!-- يقوم بإخفاء كود الجافا سكريبت من المستعرض أو المتصفح الذي لا يدعم لغة الجافا سكريبت وبعد الانتهاء من كتابة الكود يتم وضع الرمز التالي -- > .
***********
إذن هذا هو آخر سطر في أي كود SCRIPT وهذه الخطوة تنبه المتصفح إلي نهاية الكود كما هو موضح في الشكل العام , لنأخذ مثال لكي تتضح الرؤيا .
واليك هذا المثال البسيط :
في البداية سوف نقوم بشرح هذا الكود ثم نقوم بشرح خطوات تنفيذه لاحقا لنبداء الآن.
No Statements
1 <html>
2 <head>
3 <title>First Example</title>
4 </head>
5 <body bgcolor=#f0f0f0>
6 ******** ********="**********">
7 <!--
8 document.write("<FONT COLOR='Red'>Welcome To Java script</FONT>")
9 ***********
10 -->
11 </body>
12 </html>
1- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.
2و3 و4- <head> و </head> يوضع بينهما عنوان الصفحة . وأما بالنسبة لـ <title> و </title> تتيح لك هذه العلامة أن تعطي الصفحة عنوانا واضحا مميزا ويظهر هذا العنوان على نافذة المستعرض ويجب أن يحتوي على العنوان على حروف و أرقام فقط.
5- <body bgcolor=#f0f0f0> و </body> حيث يتم كتابة داخل هذا الجزء محتويات صفحة الويب الفعلية مثل الجداول و النماذج و الصور و التي سيراها الزوار لهذه الصفحة أما جزئية bgcolor=#f0f0f0 فهي تقوم بوضع لون لصفحة الويب و أن القيمة #f0f0f0 هي قيمة اللون بالنظام الست عشري.
6- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو ********** كما تم شرحه في الصفحة السابقة .
7 و10- كما ذكرا سابقا فأن الرمز التالي <!-- يقوم بإخفاء كود الجافا سكريبت من المستعرض أو المتصفح الذي لا يدعم لغة الجافا سكريبت وبعد الانتهاء من كتابة الكود يتم وضع الرمز التالي -- > .
8- العبارة document.write("<FONT COLOR='Red'>Welcome To Java script</FONT>") و في هذا السطر يتم إستخدام الكائن (document) وذلك لكتابة عن طريق الدالة (write) ما بداخل الأقواس . وما بداخل الأقواس هو عبارة عن أمر عادي من أوامر HTML الذي يأمر المتصفح بإظهار الجملة " Welcome To Java script " باللون الأحمر . إذن فإن من قام بأمر المتصفح بإظهار الجملة باللون الأحمر هو الـ HTML وليس الجافا سكريبت ..!! . ولكننا هنا عرفنا أنه من الممكن كتابة أوامر الـ HTML داخل أوامر الجافا سكريبت ، يجب أن تضع هذه المعلومة في ذاكرتك .
9- *********** وهو الذي يدل المتصفح أنه نهاية برنامج الجاف سكريبت .
11و12- يتم إغلاق جسم الصفحة <body> باستخدام </body> وأيضا يتم غلق الكود الخاص بالصفحة <html> باستخدام </html> .
ملاحظات يجب مراعاتها :
لاحظ هنا جيدا شكل الأمر :
document.write("<FONT COLOR='Red'>Welcome To Java script</FONT>")
شكل الأمر هكذا ويجب أن يكون دائما هكذا ... دعنا نفرض أنك نسخت هذا الكود (SCRIPT) ولصقته في معالج نصوص ذو حدود ضيقة ... بمعني أنك عندما لصقته ظهر هكذا :
document . write("<FONT COLOR='Red'>Welcome To Java script</FONT>
")
في هذه الحالة أنت غيرت شكل الأمر (لاحظ أن القوس الذي ينهي الأمر قد أنتقل سطرا لأسفل) ولن يعمل هذا الكود ويكون قد حدث خطأ .إذا ففي أكود الجافا سكريبت يجب مراعاة الشكل والمسافات علي عكس الـHTML .
أهم النقاط المستفادة من المثال السابق :
• عند كتابة كود جافا سكريبت يجب أن نبدأ دائما بـالجملة التالية :
******** ********="**********">
وينتهي بالجملة التالية :
***********
• بين علامتي التنصيص المزدوجة استخدم علامات تنصيص مفردة عند الحاجة .
• أحد أشكال الأمر في الجافا سكريبت هو :
أن نبدأ بالكائن (Object) الذي نريد إجراء الأمر عليه ثم بعد الكائن يأتي النهج (Method) الذي نريد تطبيقه علي الكائن .. ويتبع النهج دائما أقواس تحتوي علي ما سيحدث في الكائن (Object) عند تطبيق النهج (Method) عليه . في مثالنا بأعلي ... الكائن هو (document) والنهج هو (write) ..... إذاً عندما نريد كتابة شيء في صفحة الويب نستخدم النهج (write) دائما ونضع بين الأقواس ما نريد كتابته في الصفحة .
رسائل الخطأ
رسائل الخطأ تحدث كثيرا في الجافا سكريبت . فكلما بنيت جافا سكريبت ووضعته في صفحة الوب وظننت أن كل شيء علي ما يرام ... فجأة تجد أحد رسائل الخطأ ظاهرة أمامك وتؤكد لك أن هناك شيء ليس علي ما يرام .
هناك نوعان رئيسيان من الأخطاء التي يمكن أن تحدث في الجافا سكريبت ... هما : الأخطاء التي تنتج عن الخطأ في الكتابة كالأخطاء الإملائية أو أنك وضعت علامة تنصيص مزدوجة بينما كان يجب وضع علامة مفردة .. وتسمي تلك الأخطاء Syntax errors) &) أو الأخطاء الناتجة عن استخدام أمر في غير موضعه بحيث يكون غير متناسق مع باقي أوامر الكود وتسمي (Run-Time errors) . أيا كان نوع الخطأ فكلاهما يعني أن هناك شيء ليس علي ما يرام .
هناك العديد من البرامج الجاهزة التي تمكنك من معالجة تلك الأخطاء . ولكني أفضل أن تفعل ذلك بنفسك فهي في الحقيقة أسهل مما تظن .
كيف نعالج و نتلافى الأخطاء ؟
يقال أن أفضل طريقة لمعالجة الأخطاء هو تلافيها. علي كل حال يمكنك تقليل احتمالات ظهور الخطأ بأن تستخدم محرر نصوص (الذي تستخدمه في تحرير الـ HTML ) ليست له حدود . بمعني أنه عند كتابة أمر من أوامر الجافا سكريبت لا ينتقل جزء من الأمر للسطر التالي نظرا لضيق حدود محرر النصوص . إذن أكتب كل أمر من أوامر الجافا سكريبت في سطر واحد فلا يوجد داعي لتقسيم الأمر الطويل نسبيا علي سطرين فذلك يمكن أن يؤدي للعديد من الأخطاء . إذا أخذت ذلك في الاعتبار تكون قد تلافيت العديد من رسائل الخطأ التي يمكن أن تضايقك .
نأتي الآن لكيفية علاج الأخطاء .. أجمل شيء في أخطاء الجافا سكريبت هي أنه عند حدوث خطأ ما يظهر لك صندوق رسائل يوضح لك ما هو الخطأ وأين وقع ذلك الخطأ (فقط مع متصفح نيتسكيب) . حيث يوضح لك رقم السطر الذي وقع فيه الخطأ .. ولكي تصل للسطر الذي وقع به الخطأ أبدأ عد السطور من أول سطر في الـ HTML وليس من أول سطر في الجافا سكريبت مع عد جميع الأسطر شاملة السطور البيضاء .
الأخطاء المركبة :
في بعض الأحيان تظهر أمامك العديد من رسائل الخطأ المتتابعة عند تحميل صفحة الويب الحاوية علي جافا سكريبت . وليس معني ذلك بالضرورة أن هناك العديد من الأخطاء في أوامر الجافا سكريبت .. فربما كانت كل هذه الأخطاء نتيجة لحدوث الأخطاء في السطور الأولي . لذلك عالج الأخطاء في الكود (SCRIPT) بالترتيب من أعلي لأسفل . ففي كثير من الأحيان تظهر لك 20 رسالة خطأ وعندما تعالج أول خطأ تجد نفسك قد عالجت جميع المشكلات .
لا يوجد ما يمكن أن يقال عن الأخطاء حاليا أكثر من ذلك فأنت الآن أصبحت تعرف كيف تعالج 99% من المشكلات و الأخطاء التي يمكن أن تحدث .فقط تذكر دائما أنه لابد من حدوث أخطاء فإذا لم تظهر لك أي رسالة خطأ فهذا لا يعني إلا أنك قد تركت الصفحة بيضاء ليس بها شيء .
أساسيات جافا سكريبت
• الإعلان عن المتغيرات
جافا سكريبت لا تهتم بنوع المتغير سواء كأن حرفيا أو عدد صحيح أو عدد عشري وهو ما قد يروق للكثير من المبتدئين لأنها تترجم وقت التنفيذ فهي لا تهتم بذلك فقط يسبق المتغير بالأمر
var
أمثلة
var x;
var X;
var ww10;
• ويمكن كتابة عدة متغيرات على سطر واحد
var x , X , y , ww10;
• ويمكن تخصيص قيم ابتدائية للمتغيرات
var x = 5 , X = 7 , y = 17;
• المعاملات الحسابية
- الطرح
++ الزيادة بمقدار واحد
-- النقصان بمقدار واحد
* الضرب
/ القسمة
% باقي القسمة
+ الجمع
• المعاملات المنطقية
! النفي
< اصغر من
> اكبر من
<= اصغر من أو يساوي
>= اكبر من أو يساوي
= يساوي
!= لا يساوي
&& و
|| أو
?: شرط
عبارات التحكم
IF statement
التحكم باستخدام if الشرطية مع وضع شروط يجب تحققه لكي يتم تنفيذ الجملة.
الصورة العامة لعبارة التحكم if الشرطية هو الشكل التالي :
If ( يتم وضع الشرط هنا )
{
يتم وضع هنا الأوامر أو العمليات التي ترغب في تنفيذها عند تحقق الشرط
}
ولآن سوف نأخذ مثال يتم توضيح ما سبق ذكره:
مثال :- في هذا المثال سوف نقوم عمل برنامج يتم فيه حساب مكعب لعدد ما يتم تعريفه في البرنامج.
No Statements
1 <html>
2 <head>
3 <title>Second Example</title>
4 </head>
5 <body >
6 ******** ********="**********">
7 <!--
8 var x=50;
9 if ( x > 0 ) // if test
10 {
11 y = ( x * x * x ); // 1: cube of x
12 document.write("y = "+y+" that is the cube of x when x = "+ x +"");
13 }
14 -->
15 ***********
16 </body>
17 </html>
1- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.
2و3 و4- <head> و </head> يوضع بينهما عنوان الصفحة . وأما بالنسبة لـ <title> و </title> تتيح لك هذه العلامة أن تعطي الصفحة عنوانا واضحا مميزا ويظهر هذا العنوان على نافذة المستعرض ويجب أن يحتوي على العنوان على حروف و أرقام فقط.
5- <body> و </body> حيث يتم كتابة داخل هذا الجزء محتويات صفحة الوب الفعلية مثل الجداول و النماذج و الصور و التي سيراها الزوار لهذه الصفحة .
6- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت كما ذكرناه في المثال الأول حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو ********** .
7 و14- الرمز التالي <!-- يقوم بإخفاء كود الجافا سكريبت من المستعرض أو المتصفح الذي لا يدعم لغة الجافا سكريبت وبعد الانتهاء من كتابة الكود يتم وضع الرمز التالي -- > .
8-في هذه الخطوة تم تعريف متغير وذلك باستخدام الكلمة var واسم هذا المتغير x وتم إعطاءه القيمة 50.
9- هنا استخدمنا جملة التحكم if الشرطية والشرط الموجود في المثال معناه إذا كانت قيمة المتغير x أكبر من الصفر (أي عند تحقق الشرط ) فإنه ينفذ الأوامر التي بعد جملة if الشرطية وقد يتم وضع الأقواس {} و ذلك يدل على أنه يجب تنفيذ كل الأوامر الموجودة بداخل الأقواس .
10و13- وضع الأقواس {} حيث تم وضعها عندما نريد أن ننفذ أكثر من جملة عند تحقق شرط ما وفي حالة عدم وضع الاقواس فإن البرنامج عند تحقق الشرط الموجود في حملةif سوف يقوم بتنفيذ أول جملة بعد if وهو y = ( x * x * x ); .
11- في هذه الخطوة يتم وضع العملية الحسابية وهي عملية تكعيب المتغير x وذلك بضرب المتغير في نفسه ثلاث مرات ومن ثم وضع الناتج من هذه ا لعملية في متغير y ولا ننسى وضع علامة الفاصلة المنقوطة في نهاية الجملة y = ( x * x * x ); .
12- العبارة التالية هي شبيهه بالمثال الذي تم شرحه في الصفحة رقم 3 ولكن هناك بعض النقاط الجديد
document.write("y = "+ y +" that is the cube of x when x = "+ x +""); و في هذا السطر يتم استخدام الكائن ( document ) وذلك لكتابة عن طريق الدالة (write) ما بداخل الأقواس .
و سوف نشرح الجزء التالي ("y = "+ y +" that is the cube of x when x = "+ x +"")
هنا نلاحظ التالي :
(" جملة أو نص وفي هذا المثال فراغ "+ المتغير وفي هذا المثال x +" جملة أو نص"+ المتغير وفي هذا المثال y +" هنا النص الذي تريد طباعته وفي هذا المثال y = ")
إذا نستنتج أنه إذا أردنا طباعة نص أو جملة فإنه يتم وضعها في علامتي تنصيص " " .
و إذا أردنا أن نطبع قيمة المتغير يتم وضعه بدون علامة تنصيص و نضعه بين علامتي + + .
SWITCH
الشكل العام لجملة switch وهي :
switch (n)
{ switch بداية قوس جملة التحكم
case 1:
نفذ هذه الأوامر
break;
case 2:
نفذ هذه الأوامر
break;
case 3:
نفذ هذه الأوامر
break;
case 4:
نفذ هذه الأوامر
break;
default :
نفذ هذه الأوامر
break;
} switch نهاية قوس جملة التحكم
وهي في العادة تستخدم عندما تكون لديك قيمة محددة ومعرفة وتريد تنفيذ العمليات أو الأوامر عندما يتم اختيار قيمة معينة.
يقوم الأمر باختبار قيمة المتغير n عندما تكون مساوية لواحد من الحالات التي حددتها وهي case تنفذ الأوامر التي وضعتها بداخل الـ case إلى أن يصل إلى كلمة break عند ذلك يتم الخروج من البلوك الخاص بجملة switch و إذا لم تساوي أي من القيم التي افترضتها يتوجه التنفيذ إلى الأوامر التي تلي الأمر default .
وسوف نشرح مثال بعد أن نأخذ عبارات التكرار حيث سندمج جملة التحكم switch مع جملة التكرار for وذلك فهم التركيب بين جمل التحكم و التكرار ومن ثم نترك لخيالك الواسع للإبداع في كتابة البرامج . و ألان لننتقل إلى عبارات التكرار .
عبارات التكرار
FOR
نفس الوظيفة جملة while ولكن هنا يتم تحديد القيمة التي سوف نبداء منها ومقدار الزيادة أو النقصان وعدد مرات التكرار والشكل العام لجملة for هي :
For ( قيمة البداية; شرط يتم فيه تحديد عدد مرات التكرار ; مقدار لزيادة أو النقصان )
{ for بداية قوس جملة التكرار
نفذ هذه الأوامر
} for نهاية قوس جملة التكرار
إليك المثال الذي يوضح ذلك
for (var x = 1; x <= 10 ; x++)
{
نفذ هذه الأوامر
}
التركيب مطابق تماما للغة ++C ومعنى المثال ابدأ العد من 1 حتى تصل القيمة إلى قيمة اصغر من أو تساوى 10 وفي كل مرة زيد قيمة المتغير x بمقدار 1 وملخص ذلك كرر ما بداخل البلوك 10 مرات
مرة أخرى لا حظ استخدام المؤثرات المنطقية المظلل بالأزرق.
و ألان سوف نقوم بشرح مثال يحتوي على جملة التكرار for وعلى جملة التحكم switch
No Statements
1 <html>
2 <head> welcome to java
3 </head>
4 ******** ********="**********">
5 <!--
6 var n=5;
7 for (var i=1 ; i<n ; i+1)
8 {
9 switch (i)
10 {
12 case 1: { document.write(" welcome "); }
13 break;
14 case 2: { document.write(" to "); }
15 break;
16 case 3: { document.write(" you "); }
17 break;
18 case 4: { document.write(" and "); }
19 break;
20 default :{ document.write(" *+*+*+*+* "); }
21 break;
22 }
23 }
24 -->
25 ***********
26 <body>
27 </body>
28 </html>
1و28- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.
2و3 - <head> و </head> يوضع بينهما عنوان الصفحة .
4- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو ********** .
5 و24- الرمز التالي <!-- يقوم بإخفاء كود الجافا سكريبت من المستعرض أو المتصفح الذي لا يدعم لغة الجافا سكريبت وبعد الانتهاء من كتابة الكود يتم وضع الرمز التالي -- > .
6- في هذه الخطوة يتم تعريف متغير n ويتم إعطاءه القيمة 5 وأخير يتم وضع الفاصلة المنقوطة .
7- استخدام جملة التكرار for حيث يتم بداخل جملة for تعريف متغير i وتم إعطاءه قيمة ابتدائية تساوي واحد ثم بعد ذلك ثم وضع فاصلة منقوطة ; ثم بعد ذلك يتم وضع الشرط والذي يحدد عدد مرات التكرار وفي مثالنا هذا تم تحديد عدد المرات وهو 4 مرات التكرار ثم بعد ذلك تم وضع مقدار الزيادة وهو في مثالنا مقدار الزيادة بواحد ويمكن وضع أي مقدار زيادة أو مقدار نقصان على حسب متطلبات البرنامج الذي تريد عمله ، ونعود إلى المثال في الجزء i+1 في هذا الفقرة يقوم البرنامج بإضافة 1 إلى أخر قيمة للمتغير i .
المطلوب فهمه في هذه الخطوة ما يلي :
أنه عندما يدخل البرنامج في جملة التكرار for فإنه ينفذ الخطوات التالية
الخطوة الأولى :
أن يضع قيمة أولية لمتغير I .
الخطوة الثانية :
يتحقق من الشرط إذا كانت قيمة I اقل من قيمة الـ n ( أو على حسب الشرط الذي تضعه )إذا لم يتحقق الشرط فإنه أما إذا تحقق الشرط فإنه يقوم بزيادة المتغير I بمقدار 1 وينتقل إلى الخطوة الثالثة .
الخطوة الثالثة :
ينفذ كل الأوامر الموجودة بداخل الأقواس الخاصة بجملة الـ for و من ثم يعود إلى الخطوة الثانية .
الخطوة الرابعة :
يخرج من جملة التكرار for وينفذ باقي البرنامج .
والشكل التالي يوضح الجزء السابق :
8 و23- في هذه الخطوة يتم كتابة فتح قوس جملة التكرار for و ويكون القوس على شكل { ويجب أن يغلق بالقوس الذي شكله } كما في المثال .
9- في هذه الخطوة يتم استخدام عبارة التحكم switch( i ) حيث يتم باختبار قيمة المتغير i عندما تكون مساوية لواحد من الحالات التي حددتها وهي case يتم تنفذ الأوامر الموجودة بداخل الأقواس لهذه الـ case .
10 و22- في هذه الخطوة يتم كتابة فتح قوس عبارة التحكم switch( i ) و ويكون القوس على شكل { ويجب أن يغلق بالقوس الذي شكله } .
12و13- في هذه الخطوتين يتم التأكد من أن القيمة المتغير i تساوي القيمة الموجودة أمام كلمة case وفي مثالنا وخصوص هذه الحالة تساوي 1 حيث يتم تنفيذ ما بداخل القوس التي شكلها } { وهو
} document.write(" welcome "); {
break;
في هذا الجملة يتم استخدام الكائن ( document) وذلك لكتابة عن طريق الدالة ( write) ما بداخل الأقواس التي شكلها ( ) وبينها علامة " " . ثم بعد ذلك يتم قفل القوس الذي شكله } { وهنا استخدمنا الأقواس } { وذلك في حالة أنك تريد تنفيذ أكثر من أمر عندما تكون قيمة المتغير i تساوي القيمة الموجودة أمام كلمة case. ثم بعد ذلك يتم كتابة الأمر break; وذلك للخروج من جملة التحكم switch .
ملاحظة : من الضروري كتابة كلمة break ; بعد كل case وذلك لمنع الانتقال و تنفيذ باقي الحالات الـ case الأخرى .
14 و15- نفس فكرة الخطوة 12-13 فيما عدى انه يتم التأكد من أن القيمة المتغير i تساوي القيمة الموجودة أمام كلمة case وهي تساوي هنا 2 ثم بعد ذلك يتم كتابة الأمر break; وذلك للخروج من جملة التحكم switch .
16 و17- نفس فكرة الخطوة 12-13 فيما عدى انه يتم التأكد من أن القيمة المتغير i تساوي القيمة الموجودة أمام كلمة case وهي تساوي هنا 2 ثم بعد ذلك يتم كتابة الأمر break; وذلك للخروج من جملة التحكم switch .
18 و19- نفس فكرة الخطوة 12-13 فيما عدى انه يتم التأكد من أن القيمة المتغير i تساوي القيمة الموجودة أمام كلمة case وهي تساوي هنا 2 ثم بعد ذلك يتم كتابة الأمر break; وذلك للخروج من جملة التحكم switch .
20و21- في هذه الخطوة يتم وضع حالة افتراضية وذلك يعني أنه عند عدم تحقق أحد الحالات السابقة يقوم بتنفيذ هذه الحالة وهي الـ default: حيث يتم تنفيذ ما بداخل القوس التي شكلها } { وهو
default:{ document.write(" *+*+*+*+* ");}
بعد ذلك يتم كتابة الأمر break; وذلك للخروج من جملة التحكم switch .
break;
25- وفي هذه الخطوة يتم كتابة *********** وهو الذي يدل المتصفح أنه نهاية برنامج الجاف سكريبت .
26 و27- <body> و </body> حيث يتم كتابة داخل هذا الجزء محتويات صفحة الويب الفعلية مثل الجداول و النماذج و الصور و التي سيراها الزوار لهذه الصفحة .
ملاحظة : هنا نلاحظ اننا لم نكتب برنامج الجافا سكريبت داخل منطقة الـ Body لصفحة وهي المنطقة المحصورة بين <body> و </body> و إنما كتبناه في منطقة الـ head وهي المنطقة المحصورة بين <head> و </head> وهذا يعني أنه يمكن كتابة برنامج الجافا سكريبت في أي جزء من كود أو لغة الـ HTML .
WHILE
الهدف من عبارات التكرار هو تكرار أجزاء من البرنامج مرات ومرات حسب الشرط العددي أو شرط معين وذلك لاختصار كتابة جزء كبير من التعليمات .
الشكل العام لعبارة while كآلاتي :
تعريف متغير و إعطاءه قيمة أولية ;
while ( شرط يتم فيه تحديد عدد مرات التكرار )
{ while بداية قوس جملة التكرار
نفذ هذه الأوامر
زيادة المتغير الذي تم تعريفة في الأعلى ;
} while نهاية قوس جملة التكرار
اليك المثال التالي
var x = 1;
while (x <= 10)
{
x +2;
}
لاحظ استخدام المعاملات المظلل بالأزرق وارجع إلى الجدول لمعرفة استخدامها ونعود إلى مثالنا الأمر
while يقوم بعمل تكرار البلوك أو أمر بشرط أن تكون قيمة المتغير x اصغر من أو تساوي 10
و البلوك المطلوب تكراره عبارة عن زيادة قيمة المتغير x بمقدار 2 ثم يقوم أمر التكرار بالكشف ثانية على القيمة حتى تصل إلى الشرط الذي ينهي عملية التكرار .
و الآن نأخذ مثال كامل على عبارة أو جملة التكرار while :
No Statements
1 <html>
2 <title>fouth Example</title>
3 <body>
4 ******** ********="**********">
5 <!--
6 var x = 1;
7 while (x <= 3)
8 {
9 document.write("<h"+x+"> welcome "+x+"");
10 x+1
11 }
12 -->
13 ***********
14 </body>
15 </html>
1و15- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.
2 - <title> و </title> تتيح لك هذه العلامة أن تعطي الصفحة عنوانا واضحا مميزا ويظهر هذا العنوان على نافذة المستعرض ويجب أن يحتوي على العنوان على حروف و أرقام فقط.
3 و14- <body> و </body> حيث يتم كتابة داخل هذا الجزء محتويات صفحة الوب الفعلية .
4- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو ********** .
6 - في هذه الخطوة تم تعريف متغير و ذلك باستخدام الكلمة var واسم هذا المتغير x وتم إعطاءه القيمة 1 .
7 و14- الرمز التالي <!-- يقوم بإخفاء كود الجافا سكريبت من المستعرض أو المتصفح الذي لا يدعم لغة الجافا سكريبت وبعد الانتهاء من كتابة كود الجاف سكريبت يتم وضع الرمز التالي -- > .
8 و11- في هذه الخطوة يتم كتابة فتح قوس جملة التحكم while و ويكون القوس على شكل { ويجب أن يغلق بالقوس الذي شكله } كما في المثال .
9- هنا استخدمنا جملة التكرار while والشرط الموجود في المثال معناه إذا كانت قيمة المتغير x أقل من أو يساوي 3 (أي عند تحقق الشرط ) فإنه ينفذ الأوامر التي بعد جملة while و يتم وضع الأقواس {} و ذلك يدل على أنه يجب تنفيذ كل الأوامر الموجودة بداخل الأقواس .
10- العبارة document.write("<h"+x+"> welcome "+x+""); و في هذا السطر يتم إستخدام الكائن (document) وذلك لكتابة عن طريق الدالة (write) ما بداخل الأقواس . وما بداخل الأقواس هو عبارة عن أمر عادي من أوامر HTML الذي يأمر المتصفح بإظهار الجملة " "<h"+x+"> welcome "+x+"" "
والان لنأخذ هذه الجملة ونشرحها بالتفصيل
" < h "+x+" > welcome " +x+ ""
هذا السطر سوف نشرحه على خطوات :
الخطوة الأولى:
سوف يتم أولا أرسال الجملة التالية الى المستعرض على الصورة التالية وهي
> " يتم وضع قيمة المتغير x وهي في أول مرة تساوي 1 " h <
إذا يصبح شكل الجملة التالي h1 > < وهذا الشكل يفهمه المستعرض على أنك تريد أن تطبع عنوان ويكون المستوى لهذا العنوان هو 1 . ثم بعد ذلك سوف يقوم بطباعة الكلمة welcome على صفحة الانترنت
الخطوة الثانية :
يقوم بطباعة قيمة المتغير x .
ثم بعد ذلك يتم زيادة قيمة المتغير x بمقدار واحد وذلك عن طريق كتابة الجملة x+1 . ومن ثم يعود الى جملة while و يكرر نفس الشيء حيث يختبر الشرط و عند تحققه يخرج من جملة while .
13- وفي هذه الخطوة يتم كتابة *********** وهو الذي يدل المتصفح أنه نهاية برنامج الجاف سكريبت .
الدوال
هناك دوال تعطيها لك اللغة وهي دوال جاهزة لإجراء عمليات معينه سوف نتعرض لها فيما بعد والدوال الأخرى وهي الأكثر استخداما هي التي سوف تنشئها أنت بنفسك مثال :
Function FunctionName ( )
{
تنفيذ الأوامر
}
و الآن سوف نأخذ مثال بسيط لطريقة استخدام الدوال:
No Statements
1 <html>
2 <head>
3 <title>useing function</title>
4 ******** ********="**********">
5 <!--
6 function clickme()
7 {
8 alert("welocm to you");
9 }
10 -->
11 ***********
12 </head>
13 <body>
14 <input type="button" value=" hi " onclick='clickme();'>
15 </body>
16 </html>
1و16- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.
2و12 - <head> و </head> يوضع بينهما عنوان الصفحة .
3 - <title> و </title> تتيح لك هذه العلامة أن تعطي الصفحة عنوانا واضحا مميزا ويظهر هذا العنوان على نافذة المستعرض ويجب أن يحتوي على العنوان على حروف و أرقام فقط.
4- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت كما ذكرناه في المثال الأول حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو ********** .
5 و10- الرمز التالي <!-- يقوم بإخفاء كود الجافا سكريبت من المستعرض أو المتصفح الذي لا يدعم لغة الجافا سكريبت وبعد الانتهاء من كتابة الكود يتم وضع الرمز التالي -- > .
6- يتم كتابة الكلمة function وهي كلمة محجوزة في الغة وتقوم هذه الكلمة بتعريف دالة سوف يتم انشاءها و أسم هذه الدالة في مثالنا هو clickme() و عندما سنستدعي الدالة من أي مكان من الصفحة يجب أن تكون بنفس الاسم.
7 و9- في هذه الخطوة يتم كتابة فتح قوس لدالة function clickme() و ويكون القوس على شكل { ويجب أن يغلق بالقوس الذي شكله } كما في المثال .
8- استخدام الأمر alert("welocm to you"); حيث يقوم هذا الأمر بإظهار رسالة تنبيه يتم فيها كتابة الجملة المراد إظهارها وتنبيه المستخدم بها وفي مثالنا سوف يقوم هذا الامر بإظهار الجملة التالية welocm to you و لا تنسى أن الجملة يجب وضعها في بين علامتي تنصيص كما في التالي :
) " النص المطلوب طباعته " ِalert(
11- وفي هذه الخطوة يتم كتابة *********** وهو الذي يدل المتصفح أنه نهاية برنامج الجاف سكريبت .
13 و15- <body> و </body> حيث يتم كتابة داخل هذا الجزء محتويات صفحة الوب الفعلية .
14- في هذه الخطوة فقط استخدمنا لغة HTML حيث تم تعريف زر وهو من نوع type="button" وقد اعطيناه القيمة value=" hi " وهذه الكلمة التي داخل value ما سيظهر وهو في مثالنا كلمة hi ثم بعد ذلك تم كتابة الكلمة
النماذج
الجافا سكريبت تقوم بوضع كل الوثائق ( Forms ) تجدها في الصفحة في مصفوفة تسمى ( forms ). ويمكنك الوصول لكل نموذج ( form ) وذلك عن طريق الفهرس ( index ) في هذه المصفوفة. النموذج الأول له الفهرس رقم 0 , و النموذج الثاني له الفهرس رقم 1 وهكذا. ويمكن التعامل مع النموذج ( form ) عن طريق اسم النموذج .
ولكي يتم فهم كيفية التعامل مع النماذج نقوم بأخذ بعض الأمثلة :
No Statements
1 <html>
2 <head>
3 <title> التعامل مع الوثائق </title>
4 ******** ********="**********">
5 <!--
6 function testform()
7 {
8 // test the form no.0
9 if(document.forms[0].elements[0].value==""
10 ||document.forms[0].elements[1].value==""
11 ||document.forms[0].elements[2].value=="")
12 {
13 alert("يجب الكتابة في كل الحقول");
14 }
15 }
16 -->
17 ***********
18 </head>
19 <body>
20 <center>
21 <form method=post onSubmit="return testform()">
22 <tabel>
23 <tr>
24 <td>Name : </td>
25 <td><input type="text" name="name" ></td></tr>
26 <tr><td>Address :</td>
27 <td><input type="text" name="address" ></td></tr>
28 <tr><td>City :</td>
29 <td><input type="text" name="city" ></td></tr>
30 </tabel>
31 <p>
32 <input type="submit" name="إرسال البيانات" value="submit">
33 </form>
34 </center>
35 </body>
36 </html>
شرح الكود:
أولاً قمنا بإنشاء الـ form وذلك بلغة الـ HTML وهو الجزء المحاط بالون الأزرق
حيث تم إنشاء form و حددنا طريقة إرسال هذه form وذلك بطريقة الـ method=post واستخدمنا الحدث onSubmit وهو حدث الضعط على زر (إرسال البيانات ) من صفحة الويب حيث سوف يتم إستدعاء دالة testform() وهي الدالة مكتوبة بلغة الجافا سكريبت و التي تقوم بفحص الحقول في الـ form و التأكد من الكتابة في كل الحقول وعدم ترك أحد الحقول فارغ .
ثم قمنا بإنشاء الحقول الخاصة بالـ form وبعد ذلك أنشأنا زر الإرسال عن طريق ا لامر input وحددنا نوع هذا المدخل أنه من نوع زر إرسال و تم إعطاءه الاسم ( إرسال البيانات ) .
والان سوف نتحدث عن الدالة testform() وهو الجزء المحاط بالون الاحمر وهو الجزء الخاص بالجافا سكريبت
نلاحظ في أنه عند تنفيذ الدالة فإنه يستخدم جملة If الشرطية حيث أنه يقوم بفحص الفورم رقم صفر ( Form[0] ) وحددنا العنصر رقم صفر أيضا ( elements[0] ) في نفس ( Form[0] ) وهو في مثالنا الحقل name وحددنا أيضا القيمة التي بداخله إذا كانت فارغة أي لا يوجد أي شيء مكتوب وثم بعد ذلك استخدمنا العلاقة المنطقية ( || ) وذلك إذا لنقوم بفحص العنصر رقم واحد أيضا ( elements[1] ) في نفس ( Form[0] ) وهو في مثالنا الحقل المسمى address و حددنا أيضا القيمة التي بداخله إذا كانت فارغة ثم وضعنا العلاقة المنطقية ( || ) وذلك أنه إذا وجد احد الحقول فارغة فإنه سوف يقوم بتنفيذ الامر alert() وسوف يظهر الرسالة التالية ( يجب الكتابة في كل الحقول )
مثال آخر بإنشاء قائمة منسدلة :
No Statements
1 <html>
2 <head>
3 <title>قائمة منسدلة</title>
4 ******** ********="**********">
5 function formHandler()
6 {
7 Var URL=document.pulldown.selectname.options[document.pulldownMenu.yourSelect.selectIndex].value
8 ****************.href=URL
9 }
10 ***********
11 choose a search engine:
12 <form name="pulldownMenu">
13 <select name="yourSelect" onChange="formHandler()">
14 <option value="http://www.msn.com">MSN
15 <option value="http://www.yahoo.com">Yahoo
16 <option value="http://www.altavista.com">Altavista
17 </select>
18 </form>
19 </html>
شرح الكود :
يتم إنشاء القائمة المنسدلة وذلك بلغة الـ HTML وهو الجزء المحاط بالون الأزرق و ذلك بإتباع الخطوات التالية :
يتم إنشاء الـ Form وذلك عن طريق كتابة الـ tag وهو <form name="pulldownMenu"> وفي هذه الحالة قمنا بإنشاء الـ Form وتم تسميته pulldownMenu ثم بعد ذلك استخدمنا الـ tag < select > وهو الذي يقوم بإنشاء القائمة المنسدلة واليك هذا الامر ,
<select name="yourSelect" onChange="formHandler()"> ومن ثم سمينا هذه القائمة بالاسم yourSelect بالإضافة أنه إضفنا عند الاختيار الحدث onChang() وهو حدث تغير قيمة معينة لحقل ما بحيث يتم تنفيذ الدالة formHandler() والتي سوف نشرحها بعد قليل ، ثم بعد ذلك نقوم بوضع الخيارات عن طريق الـ tag < option > وبعد ذلك نضع لكل أختيار قيمته عن طريق الـ attribute وهي value وأحد الخيارات الموجودة في المثال <option value="http://www.msn.com">MSN .حيث يحتوي هذا الامر على الخيار MSN والذي له القيمة ( value ) التالية http://www.msn.com .
والان سوف نتحدث عن الدالة testform() وهو الجزء المحاط بالون الاحمر وهو الجزء الخاص بالجافا سكريبت:
نلاحظ عند تنفيذ الدالة formHandler() نقوم بالتالي أولاً نقوم يتعريف متغير سميناه URL وجعلناه يساوي اسم الفورم بإضافة إلى القائمة المنسدلة وإيضا الخيار الذي تم أختيارة مع القيمة التي مع هذا الخيار.
ثم بعد ذلك أستخدام هذا المتغير والذي يحتوي على اسم موقع ما مثلاً http://www.yahoo.com حيث سوف نستخدم هذه الجملة ****************.href=URL حيث ساويناها مع المتغير الذي به اسم موقع ما وهذه الجملة سوف تقوم بالانتقال إلى هذا الارتباط أو الصفحة الموجودة في هذا المتغير
الأحداث
مقدمة :
الويندوز هو محيط رسائلي يتم إرسال رسالة عند حدوث حدث مثل مرور الماوس فوق صورة أو فوق زر معين أو التركيز على نافذة أو ضغط الزر الأيمن أو الأيسر أو الأوسط للماوس وهكذا نستغل هذه الأحداث لتنشيط جزء أو كل من برنامج جافا سكريبت ليقوم بعمل وظائفه المصمم من اجلها وسنتعرض معا بعض الأمثلة والأحداث لشرح الفكرة :
الحدث شرح الحدث
onClick() استجابة لضغط زر يتم تحديده عندها ينفذ جزء من الكود
onSubmit() تستخدم كثيرا استجابة لضغط الماوس أو لوحة المفاتيح على زر إرسال النماذج
onMouseOver() هو حدث مرور الماوس فوق عنوان أو وصلة
onMouseOut() حدث تحريك الماوس بعيدا عن وصلة
onFocus() حدث وضع الماوس على حقل مدخلات معينه
onChange() حدث تغير قيمة معينه لحقل
onBlur() حدث ترك حقل بيانات بدون تغيير
onLoad() حدث انتهاء متصفح الإنترنت من تحميل الصفحة الحالية
onUnload() حدث الخروج من الصفحة الحالية إلى
و الآن سوف نأخذ أمثلة توضح كيفية أستخدم الأحداث في صفحة الويب أرجو أن تنتقل إلى الصفحة التالية.
مثال على الحدث onClick() :
No Statements
1 <html>
2 <head>
3 <title>Onclick alert message</title>
4 ******** ********="**********">
5 function pushbutton()
6 {
7 alert("تحت الإنشاء");
8 }
9 ***********
10 </head>
11 <body>
12 <center>
13 <h2>
14 <a href=" http://www.cool.com" onClick="pushbutton();">
15 Vist our home page </a></h2>
16 </center>
17 </body>
18 </html>
في هذا المثال عند القيام بالضغط على الارتباط " http://www.cool.com "عند الحدث الضغط الفأرة " onClick() " يتم تنفيذ الدالة pushbutton() والتي تقوم بإظهار الرسالة " تحت الإنشاء" .
اليك التنفيذ :
مثال على الحدث onSubmit() :
No Statements
1 <html><head>
2 <title>onSubmit alert message </title>
3 ******** ********="**********">
4 <!--
5 function testform()
6 {
7 alert("نشكرك لتسجيل معنا في الموقع");
8 }
9 -->
10 ***********
11 </head>
12 <body>
13 <form method=post onSubmit="return testform()">
14 <tabel>
15 <tr>
16 <td>Name : </td>
17 <td><input type="text" name="name" ></td></tr>
18 <p><tr><td>Email :</td>
19 <td><input type="text" name="Email" ></td></tr>
20 </tabel>
21 <p>
22 <input type="submit" name="إرسال" value="submit">
23 </form>
24 </body>
25 </html>
في هذا المثال سوف نقوم بإظهار رسالة لمستخدم عند القيام بالضغط على زر إرسال في الـ form لذلك سوف نستخدم الحدث" onSubmit() " وذلك لاستدعاء الدالة testform() والتي تقوم بإظهار رسالة للمستخدم وهي " نشكرك لتسجيل معنا في الموقع " .
اليك التنفيذ :
مثال على الحدثين onMouseOver() و onMouseOut() :
No Statements
1 <html><head>
2 <title>Onclick alert message</title>
3 ******** ********="**********">
4 function MouseOver()
5 {
6 alert("The mouse was over");
7 }
8 function MouseOut()
9 {
10 alert("The mouse out of the link");
11 }
12 ***********
13 </head>
14 <body>
15 <center>
16 <h2>
17 <a href="http://www.com" onMouseOver="MouseOver();">
18 Event win mouse over this link</a></h2>
19 <hr>
20 <p>
21 <a href="http:/www.com" onMouseOut="MouseOut();">
22 Event win mouse out of this link </a>
23 </center>
24 </body>
25 </html>
في هذا المثال عند القيام بالمرور بالفأرة على وصلة أو إرتباط وهو الحدث onMouseOver() " حيث سوف نستفيد من هذا الحدث في استدعاء دالة مكتوبة بالجافا سكريبت وذلك لنتفيذ أي دالة تريدها في هذا المثال سوف نقوم بإظهار رسالة تنبه المتسخدم بمرور الفأرة فوق الارتباط أو الوصلة وفي مثالنا الرسالة هي " The mouse was over "
وفي الوصلة الاخرى عند المرور ومن ثم الابتعاد بالفأرة عن وصلة أو ارتباط وهو الحدث MouseOut() " حيث سوف نستفيد من هذا الحدث في استدعاء دالة مكتوبة بالجافا سكريبت وذلك لنتفيذ أي دالة تريدها في هذا المثال سوف نقوم بإظهار رسالة تنبه المتسخدم بمرور الفأرة فوق الارتباط أو الوصلة و من ثم الابتعاد عن الوصلة أو الارتباط وفي مثالنا الرسالة هي " The mouse was over "
اليك التنفيذ :
مثال على الحدث onFocus() :
No Statements
1 <html><head>
2 <title>onFocus alert message</title>
3 ******** ********="**********">
4 ***********
5 <body>
6 Enrter your name:
7 <form>
8 <INPUT TYPE="TEXT" NAME "YourName" onFocus = "********status=('Enter your name');return true;">
9 </form>
10 </center>
11 <body>
12 </html>
في هذا المثال عند القيام بوضع المؤشر داخل الحقل وهو الحدث "onFocus()"
تظهر لنا رسالة في أسفل المستعرض " Enrter your name " .
اليك التنفيذ :
مثال على الحدث onChange():
No Statements
1 <html><head>
2 <title>onChange alert message</title>
3 ******** ********="**********">
4 ***********
5 <body>
6 Enter your name:
7 <form>
8 <INPUT TYPE="TEXT" NAME= "YourName" onChange="********status=('you was change the filed');return true;">
9 </form>
10 </center>
11 <body>
12 </html>
في هذا المثال عند تغيير مكان المؤشر عن الحقل " القيام بالحدث onChange()"
تظهر لنا رسالة في أسفل المستعرض " you was change the filed " .
اليك التنفيذ :
مثال على الحدث onBlur() :
No Statements
1 <html><head>
2 <title> onBlur alert message</title>
3 ******** ********="**********">
4 ***********
5 <body>
6 Enter your name:
7 <form>
8 <INPUT TYPE="TEXT" NAME= "YourName" onBlur = "********status=('youe leaf the filed empty');return true;">
9 </form>
10 </center>
11 <body>
12 </html>
في هذا المثال عند ترك الحقل فارغاً " القيام بالحدث onBlur()"
تظهر لنا رسالة في أسفل المستعرض " you leaf the filed empty " .
اليك التنفيذ :
مثال على الحدثين onLoad() و onUnload() :
No Statements
1 <html><head>
2 <title>onLoad & onUnload alert message</title>
3 ******** ********="**********">
4 function onloadweb()
5 {
6 alert("أهلا بكم في موقعنا");
7 }
8 function onUnloadweb()
9 {
10 alert("نشكركم على زيارة موقعنا");
11 }
12 ***********
13 </head>
14 <body onLoad="onloadweb()" onUnload="onUnloadweb()">
15 <center><h1>بسم الله الرحمن الرحيم<h1></center>
16 </body>
17 </html>
في هذا المثال عند القيام بتحميل الصفحة وهو الحدث " onLoad() "
يتم تنفيذ الدالة onloadweb() فتظهر لنا رسالة " أهلا بكم في موقعنا " .
وعند القيام بإغلاق الصفحة ( المستعرض ) و هو الحدث onUnload() "
يتم تنفيذ الدالة onUnloadweb()فتظهر لنا رسالة " نشكركم على زيارة موقعنا " .
اليك التنفيذ :
بعض الأمثلة متنوعة
مثال عن كيفية التنقل بين العناوين المخزنة في المتصفح :
No Statements
1 <HTML>
2 <HEAD>
3 <TITLE> History Buttons </TITLE>
4 ******** ********="**********">
5 function nav(X){ history.go(X);}
6 ***********
7 </<HEAD>
8 <BODY>
9 <CENTER><h1>Histoy Buttons</h1>
10 <h2> Here are the tow buttons made with navigator form buttons: </h2><P>
11 <FORM>
12 <INPUT TYPE="button" VALUE="الصفحة السابقة" onClick="nav(-1)">
13 <INPUT TYPE="button" VALUE="الصفحة التالية" onClick="nav(1)">
14 </FORM>
15 </CENTER>
16 </BODY>
17 </HTML>
في هذا المثال قمنا بعرض طريقتين لتنقل بين العناوين المخزنة في المتصفح حيث سوف نستفيد من الكائن history وايضا الدالة go( ) حيث يتم تمرير قيمة -1 إذا أردنا الرجوع صفحة إلى الخلف أو القيمة 1 إذا أردنا الانتقال الصفحة التالية. وفي مثالنا عندالحدث الضغط على زر " الصفحة السابقة " يتم تنفيذ الدالة nav( 1- ) حيث يتم الانتقال إلى الصفحة الويب السابقة.و ايضا عندالحدث الضغط على زر " الصفحة التالية " يتم تنفيذ الدالة nav( 1 ) حيث يتم الانتقال إلى الصفحة الويب التالية .
اليك التنفيذ :
مثال عن كيفية إنشاء زر لإرسال بريد إلكتروني :
No Statements
1 <HTML>
2 <HEAD>
3 <title> Email button</title>
4 </HEAD>
5 <BODY>
6 <FROM>
7 <INPUT TYPE="button" VALUE="send e-mail" onClick="self.********='mailto:mymail@any_compeny. com';">
8 </FORM>
9 </BODY>
10 </HTML>
عند الحدث onClick سوف يتم تنفيذ البرنامج self.******** وهذا الأمر يقوم بإرسال المستخدم إلى برنامج البريد الالكتروني الافتراضي الموجود على الكمبيوتر ، والعنوان في حقل " إرسال إلى " وفي مثالنا يتم في هذا الحقل كتابة mymail@any_compeny.com .
إليك التنفيذ:
مثال عن كيفية فحص و اختبار المتصفح :
No Statements
1 <HTML>
2 <HEAD>
3 <TITLE> testing All Browsers</TITLE>
4 ********>
5 function browsertest()
6 {
7 thisapp=navigator.appName
8 thisversion=navigator.appVersion
9 thisappcodename=navigator.appCodeName
10 alert("Youare using "+thisapp+"version"+thisversion+",which is code named"+thisappcodename+".");
11 }
12 ***********
13 </HEAD>
14 <BODY onload="browsertest()" bgcolor="FFFFFF">
15 <CENTER>
16 <H1> Testing All Browsers</H1>
17 <H2>You can modigy this script and use it to direct your ********** visitors in one direction .and other visitors elsewhere.</H2>
18 </CENTER>
19 </BODY>
20 </HTML>
في هذا المثال عند تحميل الصفحة أي الحدث onload يتم تنفيذ الدالة browsertest() حيث تقوم هذه الدالة بفحص واختبار المتصفح وذلك عن طريق الكائن navigator ، والخاصية appName
و appVersion و appCodeName حيث :
عند كتابة الجملة navigator.appName سوف تقوم بإرجاع اسم المتصفح
وعند كتابة الجملة navigator.appVersion سوف تقوم بإرجاع إصدار المتصفح
وعند كتابة الجملة navigator.appCodeName سوف تقوم بإرجاع الاسم البر مجي .
بالتوفيق ان شاء الله
تعليق