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

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

بالأمثلة

إعداد الطالب :-
فؤاد شوعي محمد على الله

اشرف :-
أ- عثمان أحمد العمودي

هل لغة الجافا سكريبت صعبة التعلم وما هي الأشياء المساعدة لتعلم Java script.
لغة الجافا سكريبت ليست بالطبع صعبة وكل ما عليك فعله هو الاستعانة بالله ثم الإصرار على التعلم و تطبيق الأمثلة التي سنتطرق لها وفهم شرح الأساسيات اللغة . ثم بعد ذلك أطلق العنان لمخيلتك .
لماذا لا تكفي لـ HTML و لماذا نحتاج إلى لغات النصوص ( script language ) مثل الجافا سكريبت .
أن لغات النصوص منها الجاف سكريبت تحول موقع الوب إلى موقع يتفاعل مع المستخدم من إضافات أزرار ونماذج تأخذ بيانات من المستخدم وتحولها إلى نماذج أخرى أو ترسلها بالبريد الإلكتروني أو تجري عليها عمليات حسابية ليست بسيطة أنها باختصار تحول الصفحة إلى ما يسمى بصفحات الوب الديناميكية أو صفحات الوب التفاعلية هو مالا تقدمه لغة HTML .
ولا ننسى من النقاط المهمة التي يجب معرفتها أن تنفيذ البرنامج المكتوب بلغة Java Script هو من اختصاص المتصفح ( Browser ) و الذي ينفذها سطر سطر ( وهذا ما يطلق عليه Interpreter ) وليس عن طريق ترجمتها تجميعياً وهذا ما يحدث في لغات البرمجة عالية المستوى ( وهذا ما يطلق عليه Compiler).
ما هي البرامج التي تحتاجها لكتابة برامج واختبارها.
الموضوع بمنتها السهولة فكل ما تحتاجه هو ما يلي :
o محرر النصوص المرفق مع الويندوز ( Notepad ).
o متصفح الإنترنت المرفق مع نظام التشغيل سواء (Internet Explorer ) أو (Netscape ) أو أي متصفح يدعم لغة الجافا سكريبت.
هذا كل شيء كل ما تحتاجه .
استخدام Java Script :
برنامج جافا سكريبت هو جزء يتم وضعه داخل لغة HTML لزيادة فاعليتها فعند تصفح موقع أو استدعاء صفحة محددة مكتوب بداخلها Java Script code يتم إنزاله إلى جهازك وعند حدوث حدث معين مثل استدعاء برنامج جافا للتنفيذ عند الضغط على زر معين أو عند حركة للماوس يتم ترجمة البرنامج وتنفيذه سطر بسطر حتى ينتهي كما ذكرنا سابقاً.

الشكل العام الذي سيكون عليه برنامج جافا سكريبت :

<HTML>
<HEAD>
<TITLE> يتم هنا وضع عنوان الصفحة </TITLE>

<SCRIPT LANGUAGE=”JAVASCRIPT”>

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- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو Javascript كما تم شرحه في الصفحة السابقة .

7 و10- كما ذكرا سابقا فأن الرمز التالي 
15 </SCRIPT>
16 </body>
17 </html>

1- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.

2و3 و4- <head> و </head> يوضع بينهما عنوان الصفحة . وأما بالنسبة لـ <title> و </title> تتيح لك هذه العلامة أن تعطي الصفحة عنوانا واضحا مميزا ويظهر هذا العنوان على نافذة المستعرض ويجب أن يحتوي على العنوان على حروف و أرقام فقط.

5- <body> و </body> حيث يتم كتابة داخل هذا الجزء محتويات صفحة الوب الفعلية مثل الجداول و النماذج و الصور و التي سيراها الزوار لهذه الصفحة .

6- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت كما ذكرناه في المثال الأول حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو Javascript .

7 و14- الرمز التالي 
25 </SCRIPT>
26 <body>
27 </body>
28 </html>

1و28- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.

2و3 - <head> و </head> يوضع بينهما عنوان الصفحة .

4- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو Javascript .

5 و24- الرمز التالي 
13 </SCRIPT>
14 </body>
15 </html>

1و15- أولا يتم وضع tag المسمى والذي يدل على بداية الصفحة <html> والـ tag </html> و الذي يدل على نهاية الصفحة ويتم وضع باقي الأوامر لغة HTML.

2 - <title> و </title> تتيح لك هذه العلامة أن تعطي الصفحة عنوانا واضحا مميزا ويظهر هذا العنوان على نافذة المستعرض ويجب أن يحتوي على العنوان على حروف و أرقام فقط.

3 و14- <body> و </body> حيث يتم كتابة داخل هذا الجزء محتويات صفحة الوب الفعلية .

4- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو Javascript .

6 - في هذه الخطوة تم تعريف متغير و ذلك باستخدام الكلمة var واسم هذا المتغير x وتم إعطاءه القيمة 1 .

7 و14- الرمز التالي 
11 </SCRIPT>
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- هذا السطر يجب أن يكون أول سطر في أي كود جافا سكريبت كما ذكرناه في المثال الأول حيث أنه ينبه المتصفح بأن ما سيتبع هذا الأمر هو Javascript .

5 و10- الرمز التالي 
17 </SCRIPT>
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 <script language="javascript">
5 function formHandler()
6 {
7 Var URL=
document.pulldown.selectname.options
[document.pulldownMenu.yourSelect.selectIndex].value
8 window.location.href=URL
9 }
10 </script>
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 ) التالية [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] .

والان سوف نتحدث عن الدالة testform() وهو الجزء المحاط بالون الاحمر وهو الجزء الخاص بالجافا سكريبت:
نلاحظ عند تنفيذ الدالة formHandler() نقوم بالتالي أولاً نقوم يتعريف متغير سميناه URL وجعلناه يساوي اسم الفورم بإضافة إلى القائمة المنسدلة وإيضا الخيار الذي تم أختيارة مع القيمة التي مع هذا الخيار.
ثم بعد ذلك أستخدام هذا المتغير والذي يحتوي على اسم موقع ما مثلاً [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] حيث سوف نستخدم هذه الجملة window.location.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 <script language="javascript">
5 function pushbutton()
6 {
7 alert("تحت الإنشاء");
8 }
9 </script>
10 </head>
11 <body>
12 <center>
13 <h2>
14 <a href=" [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] onClick="pushbutton();">
15 Vist our home page </a></h2>
16 </center>
17 </body>
18 </html>

في هذا المثال عند القيام بالضغط على الارتباط " [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] "عند الحدث الضغط الفأرة " onClick() " يتم تنفيذ الدالة pushbutton() والتي تقوم بإظهار الرسالة " تحت الإنشاء" .
اليك التنفيذ :

مثال على الحدث onSubmit() :

No Statements
1 <html><head>
2 <title>onSubmit alert message </title>
3 <SCRIPT LANGUAGE="javascript">
4 
10 </SCRIPT>
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 <script language="javascript">
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 </script>
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 <SCRIPT LANGUAGE="javascript">
4 </SCRIPT>
5 <body>
6 Enrter your name:
7 <form>
8 <INPUT TYPE="TEXT" NAME "YourName" onFocus = "window.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 <SCRIPT LANGUAGE="javascript">
4 </SCRIPT>
5 <body>
6 Enter your name:
7 <form>
8 <INPUT TYPE="TEXT" NAME= "YourName" onChange="window.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 <SCRIPT LANGUAGE="javascript">
4 </SCRIPT>
5 <body>
6 Enter your name:
7 <form>
8 <INPUT TYPE="TEXT" NAME= "YourName" onBlur = "window.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 <script language="javascript">
4 function onloadweb()
5 {
6 alert("أهلا بكم في موقعنا");
7 }
8 function onUnloadweb()
9 {
10 alert("نشكركم على زيارة موقعنا");
11 }
12 </script>
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 <SCRIPT LANGUAGE="JavaScript">
5 function nav(X){ history.go(X);}
6 </SCRIPT>
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.location='mailto:mymail@any_compeny.com';">
8 </FORM>
9 </BODY>
10 </HTML>

عند الحدث onClick سوف يتم تنفيذ البرنامج self.location وهذا الأمر يقوم بإرسال المستخدم إلى برنامج البريد الالكتروني الافتراضي الموجود على الكمبيوتر ، والعنوان في حقل " إرسال إلى " وفي مثالنا يتم في هذا الحقل كتابة [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] .

إليك التنفيذ:

مثال عن كيفية فحص و اختبار المتصفح :

No Statements
1 <HTML>
2 <HEAD>
3 <TITLE> testing All Browsers</TITLE>
4 <SCRIPT>
5 function browsertest()
6 {
7 thisapp=navigator.appName

upppp

» قائمة بمواقع بها ملايين من أكواد الجافا
» هل تعلم؟...........
» تعلم كيف تصطاد الآخرين !!!!
» تعلم التوبه والانابه من الانبياء
» تعلم ثلاثة اشياء واحذر ثلاثة