بسم الله الرحمن الرحيم
سبحانك لا علم لنا إلا ما علمتنا إنك أنت العليم الحكيم
المقدمة :
الحمد لله ماحمده الحامدون وغفل عن حمده الغافلون والصلاة والسلام على عبده ورسوله محمد صلاة بعدد ذرات
الخلائق وما يكون . ورضاك اللھم عن آله الطیبین وصحبه المكرمین المبجلین أجمعین وبعد ،
يقدم ھذا الجزء من الكتاب الخطوات الأولي لتعلیم لغة الجافا سكربت ، وربما يحتاج القارئ أن يكون ملما بأساسیات
الخاصة بتكوين صفحات الويب html لغة الھتمل
في حالة وجود أي أخطاء أرجو اعلامي عن الخطأ علي العنوان التالي
a_elhussein@hotmail.com
وأرجو من كل من أستفاد من ھذا الكتاب أن يدعوا لي بالتوفیق في الدنیا والأخرة
إھداء :
أھدي ھذا الكتاب إلي الجیل القادم الذي يعز الله به الإسلام
وقد شاء الله أن أنھي ھذا الجزء من الكتاب في يوم میلاد النبي الأمي محمد بن عبد الله صلي الله علیه وسلم وھو
أول معلم و خیر معلم بما علمه الله ، فأحمد الله علي أن ھداني لھذا وما كنا لنھتديا لولا أن ھدانا الله .
وإنا مادامت فیا الحیاة باذل جھدي وعقلي ومستفرغ طاقتي في العلم وذلك لثلاثة أمور
- إفادة من يطلب العلم في حیاتي وبعد مماتي
- ذخیرة لي في قبري ويوم حسابي
- رفعة لسلطان المسلمین
تألیف : الحسین محمد علي
جافا سكربت المستوي الأول
2
المحتويات
الفصل الأول : مقدمة للغة الجافا سكربت ............................................................................................. ١
الفصل الثاني : أساسیات لغة الجافا سكربت ......................................................................................... ١٠
الفصل الثالث : المتغیرات ............................................................................................................. ٣٢
الفصل الرابع : المعاملات ............................................................................................................. ٤١
الفصل الخامس : التحكم في مسار البرنامج ........................................................................................... ٦٩
الفصل السادس : الدوال أو الوظائف ................................................................................................... ٨٧
جافا سكربت المستوي الأول
3
الفصل الأول
مقدمة للغة الجافا سكربت
سوف نناقش إن شاء الله في ھذا الفصل النقاط التالیة :
ماھي الجافا سكربت ·
أصل الجافا سكربت ·
ممیزات الجافا سكربت ·
لماذا أتعلم الجافا سكربت ·
ماھو الفرق بین الجافا .. والجافا سكربت ·
ما المقصود بشفرة البرنامج أو السورس كود ·
متصفحي النتسكیب والإكسبلورر ·
"Hello World" برنامجك الأول ·
جافا سكربت المستوي الأول
4
ماھي الجافا سكربت
الجافا سكربت وبكل بساطه لغة من لغات البرمجة ان صح التعبیر .. مھامھا الأساسیه بث الحیاة في صفحات الويب
الى الوصلات بل وحتى forms وتعطیك امكانیة التحكم بكل جزء في صفحة الوب، من ال HTML المكتوبة بلغة ال
بعض الوظائف الخارجیه.
أصل الجافا سكربت
لإضافة بعض الحیوية الى صفحات الويب، طبعا لايفوتني أن أذكر أن ال Netscape الجافا سكربت صممت من قبل
وھي المالك الأساسي للغة . Sun في الاصل صممت من قبل شركة Java
ممیزات الجافا سكربت
الجافا سكربت تختلف عن أغلب لغات البرمجة الأخرى في كونھا سھلة التحكم ، حتى للأشخاص الذين لم يكتبوا
بأي لغة برمجة أخرى في حیاتھم كلھا. بكل بساطة،الجافا سكربت ھي الھواء لصفحتك.
اي تعتمد علي وجود بعض الفئات ان صح التعبیر مبنیة بداخل Object base بالإضافة إلي أنھا برمجه كائنیة الإعتماد
. document و الكائن window اللغة يمكن إستخدامھا بكل سھولة مثل الكائن
events توفر لغة الجافا سكربت التعامل مع الأحداث
تعمل لغة الجافا سكربت من خلال جمیع أنظمة التشغیل مثل الويندوز و اللینكس ، فھي لا تعتمد علي نظام
. Platform independent التشغیل
أي أن الكلمة المكتوبه بالحروف اللاتینیه الصغیره تختلف عن نفس ، case sensitive language الجافا سكربت ھي
الكلمة مكتوبة بالأحرف الكبیره
مثلا:
وھكذا.. ، naSer غیر naser غیر Naser
يفترض الى درجة الإلزام أن ينتھي كل سطر بفاصلة منقوطة:
var x = 3;
جافا سكربت المستوي الأول
5
تتجاھل المساحات الخالیة ، والسطور الجديدة ، مثلا: HTML الجافا سكربت كما الھتمل
var x= هي نفسها 4 var x = 4
مع ملاحظة أنه لابد من ترك مسافة خالیة على الأقل بعد أي مصطلح من مصطلحات الجافا
لماذا أتعلم الجافا سكربت
فأنت HTML أول مايخطر في بالي إجابة على ھذا السؤال ھو : القوة .. الحريه .. الإبداع . لأنه بمجرد الكتابه بال
مقید بأن تظل صفحتك كما ھي ثابته لاتتغیر الا بتغییر الكود ، وھذا غیر مقبول بتاتا في عالم التكنولوجیا الجديده
.وبواسطة الجافا سكربت يمكنك حتى الباس صفحتك حلة جديدة من ألوان الخلفیه .. وأنواع الخطوط .. وحتى الصور
..حسب التوقیت الیومي للزائر وبدون أي تدخل منك!
وشيء مھم أيضا .. الجافا سكربت تعتبر من أبسط اللغات ! الكل يستطیع تعلمھا .. نعم الكل .. .ألا توافقني الرأي ،
أن كتابة الكود الخاص بك مباشرة أفضل ألف مرة من البحث عنه في الشبكه .
وربما لاتجد مبتغاك بسھولة ! أو قد لاتجدة إطلاقا.
ماھو الفرق بین الجافا .. والجافا سكربت
الفرق بینھما كبیر . نعم فالجافا أقوي بكثیر من الجافا سكربت ، وأكثر تعقیدا ، وللأسف ، أصعب في التحكم . وھي
تأتي في نفس مستوى لغتي السي ، والسي بلس بلس .
بالإضافه الى أنك تحتاج الى برامج خاصة للكتابة بلغة الجافا ، بینما الجافا سكربت أبسط بكثیر ! يمكنك بمجرد فتح
كتابة السكربت كاملا !!! صدق أولا تصدق . لن تحتاج الى شي آخر NOTEPAD أي برنامج تحرير نصوص مثل النوتة
سوى المتصفح لترى النتیجه .
ما المقصود بشفرة البرنامج أو السورس كود
الكود أو السورس كود : ھو مجموعة الأوامر التي تكتب مجتمعة أو متفرقة لیعمل البرنامج بصورتة الرئیسیه ، أي
NOTEPAD البنیة التحتیة للبرنامج ، وتكون دائما مكتوبه كتابة ويمكن عرضھا بأي برنامج تحرير نصوص عادي مثل ال
.
جافا سكربت المستوي الأول
6
متصفحي النتسكیب والإكسبلورر
ھل بإمكان الكود الذي كتبته بالجافا سكربت العمل على متصفحي النتسكیب والإكسبلورر بدون أية مشاكل ؟
للأسف ، الإجابة بلا !
الجافا سكربت أصلا مصمم من قبل شركه نتسكیب . اذا نتسكیب أكثر دعما له . من جھة أخرى ھناك فروقات
أساسیة في تعامل ھذين المتصفحین مع الجافا ، وبعضھا يطال حتى الأوامر الأساسیه.
سنتطرق لاحقا الى كیفیة تجاوز ھذه العقبة ، أما الآن فدعني أخبرك بأن أفضل طريقة للتأكد من عمل السكربت ھو
تجربته على كلا المتصفحین . طبعا ستدھشك كثرة المواقع التي فشلت في الوصول بصفحاتھا الى أفضل شكل
ودعم لكلا المتصفحین ، وھذا مايفسر السطر الذي نراه كثیرا:
لأفضل عرض ، ينصح بإستخدام المتصفح الفلاني.
طبعا ولأن الأغلبیة تستخدم الإكسبلورر ، فسیكون التركیز علیة في الشرح والأمثله ، ولن أنسى التطرق الى كیفیة
معرفة نوع المتصفح الخاص بالمستخدم.
"Hello World" برنامجك الأول
يمكننا من إستعراض أساسیات كتابة كود جافا سكربت Hello World ھذا المثال الشھیر ب

this is my First JavaScript Code

---

جافا سكربت المستوي الأول
7
ويكون ھذا ھو الناتج عند عرضه من خلال المتصفح أنترنت أكسبلورار
ھذا المثال البسیط سوف يكون البوابة الأولي لدخول عالم البرمجة بلغة الجافا سكربت
ومنه سوف نتعرف علي الخطوات المتبعة لكتابة كود جافا سكربت وھي كما يلي :
لذلك مبدئیا نلاحظ أن ، HTML نلاحظ أننا أدرجنا كود الجافا سكربت بداخل أكواد(أوسمه) ھتمل ·
حتي يتم تنفیذ أكواد الجافا سكربت سوف نحتاج إلي إدراج كود الجافا سكربت في ملف ذو إمتداد
(PHP أو ASP أو ملفات دينامیكیة مثل ) html أو htm
firstJs.htm لذلك سوف نحفظ الكود السابق في ملف ولیكون
ثانیا ربما يتبادر إلي الذھن كیف يتم الفصل بین كود الھتمل وكود الجافا سكربت لاحظ الكود ·
التالي


كما يلي و
أذا كل ما نحتاجه الأن معرفة كیف يتم كتابة كود الجافا سكربت نعم ھذا صحیح ولكن تمھل قلیل ·
وفكر معي ماذا يحدث لو كان المتصفح المستخدم لفتح الملف لا يدعم لغة الجافا سكربت ؟
أعتقد أنك سوف تقول بكل بساطة أن الكود المكتوب بھذه اللغة لن يعمل وھذا القول صحیح
لكن سوف ينتظرك ما ھو أسوء من ھذا ألا وھو ظھور كود الجافا سكربت بداخل محتويات الصفحة
كما بالشكل التالي
لكن لا تحزن يمكنك إخفاء ظھور كود الجافا سكربت بوضع الكود بین <--// --!> كما يلي

جافا سكربت المستوي الأول
9
الأن حان الوقت لمعرفة أول أمر في لغة الجافا سكربت وھو ·
document.write("Hello World");
يمكننا ھذا الأمر من كتابة نص في المتصفح وبالتالي سوف يتم كتابة النص :document.write
مع ملاحظة وضع النص المراد كتابتة بین علامتین تنصیص كما يلي Hello World
document.write("Hello World");
يجب ملاحظة التالي:
ان لغة الجافا سكربت لغة حساسة لحالة الحروف( الحروف الصغیرة والكبیرة ) فعلي سبیل المثال
ولو استخدمت بھذا الشكل سوف تؤدي لحدوث خطأ document.Write لا تكافيء document.write
Hello World ولن يتم عرض النص
جافا سكربت المستوي الأول
10
الفصل الثاني
أساسيات لغة الجافا سكربت
سوف نناقش إن شاء الله في هذا الفصل النقاط التالیة :
إدراج كود الجافا سكربت في صفحة ھتمل ·
إدراج داخلي o
إدراج خارجي o
Comments التعلیقات ·
تعلیق لسطر واحد o
تعلیق لسطر أو لأكثر من سطر o
طرق إدخال و إخراج البیانات ·
طرق إخراج البیانات o
alert الطريقة §
write الطريقة §
writeln الطريقة §
print الطريقة §
طرق إدخال البیانات o
confirm الطريقة §
prompt الطريقة §
جافا سكربت المستوي الأول
11
إدراج كود الجافا سكربت في صفحة ھتمل
أن كود الجافا سكربت غالبا ما يتم إدراجه بین كود الھتمل Hello World كما رأينا سابقا في مثال
ويتم ھذا الإدراج عن طريق :
١. إدراج داخلي
٢. إدراج خارجي
إدراج داخلي :
فیه يتم كتابة كود الجافا سكربت:
أو كلاھما أو الوسم ويمكنك وضع ھذا الوسم بین الوسم



وضع كود الجافا سكربت بین وسم






لكن ربما يتبادر لك السؤال التالي :
؟ والوسم ھل ھناك فرق بین إدراج كود الجافا سكربت بین الوسم
الإجابة : بالطبع نعم ولكن ھذا الفرق ينحصر فقط في تسلسل تنفیذ الكود أي أن كود الجافا سكربت المندرج بین
سوف يتم تنفیذه أولا ( حتي قبل تحمیل عناصر الصفحة) الوسمین
ثم يتم تنفیذ كود الجافا سكربت المندرج بین الوسمین
جافا سكربت المستوي الأول
12
لاحظ معي المثال التالي









كما تري تم وضع الكود التالي بین الوسم
وبالتالي سوف يتم تنفیذه أولا

ثم وضع الكود التالي بین الوسم
وبالتالي سوف يتم تنفیذه بعد الأنتھاء من تنفیذ الكود السابق

جافا سكربت المستوي الأول
13
ويكون الناتج كما يلي
ب - أو يتم وضع كود الجافا سكربت بداخل اي وسم ھتمل
كما يلي

Span باسم الوسم المراد ولیكن علي سبیل المثال TagName يتم إستبدال
onclick باسم الحدث المطلوب ولیكن علي سبیل المثال event ويتم إستبدال
ثم يتم وضع الكود داخل ھذا الحدث
وھذا النوع من إدراج كود الجافا سكربت سوف نتناوله في الجزء الثاني من الكتاب بشكل مفصل
ولكن دعنا نري مثال سريع يوضح الطريقة كما يلي








كما يلي (Span اي عند الضغط علي محتويات الوسم المختار وھو ھنا ) onclick تم إستخدام الحدث

سوف يتم تنقیذ الكود التالي فعند الضغط علي محتويات الوسم
جافا سكربت المستوي الأول
14
document.write(' ('نحن الأن بالداخل

إدراج خارجي :
js فیه يتم إدراج كود الجافا سكربت من ملف خارجي غالبا ما يكون ذو إمتداد
كما يلي

js ويتم كتابة كود الجافا سكربت في الملف ذو الإمتداد
مثال توضیحي : يتكون من ملفین أحدھما
الذي يحتوي علي كود الجافا سكربت outerScript.js يدرج به الملف ExternalEmbed.htm
ExternalEmbed.htm





إدراج خارجي


outerScript.js
document.write(" ;("هذا نص خارجي من الملف المدرج
document.write("
");
جافا سكربت المستوي الأول
15
(Comments) التعلیقات
تخیل معي أنك قمت بكتابة كود جافا سكربت معقد وطويل (مثلا حوالي ٢٠٠٠ سطر) في مثل ھذه الحالات سوف
تواجه التالي :
صعوبة قراءة الكود ·
Debug صعوبة تصحیح الأخطاء ·
إذا ما الحل :
لكل جزء من الكود Comments من الخطوات المتبعة في تقلیص ھذة المشكلة عمل ملاحظات أو تعلیقات
وكما سنري يوجد نوعین من التعلیقات :
تعلیق لسطر واحد (//) ·
بإستخدام العلامتین التالیتین // ثم يلیھم تعلیقك الخاص بك كما بالمثال التالي :





تعلیق لسطر أو أكثر من سطر (/* */) ·
بإستخدام العلامتین التالیتین */ ثم يلیھم تعلیقك الخاص بك ربما يكون مكون من سطر أو أكثر ثم نضع مرة
اخرة العلامتین /* لإنھاء التعلیق
كما بالمثال التالي :





جافا سكربت المستوي الأول
16
يمكنك إستخدام اي نوع من التعلیقات أو كلاھما كما يفضل المبرمج.
إي لا يتم (JavaScript Interpreter) كلا النوعین من التعلیقات يتم تجاھله من قبل مفسر لغة الجافا سكربت
تنفیذه علي سبیل المثال ربما تقوم بالتالي
تحويل كود مكون من سطر أو أكثر إلي تعلیق (تستخدم ھذة الطريقة في عملیة تصحیح الأخطاء)
وبالتالي لن يتم تنفیذه كما بالمثال التالي :





كما تري لن يتم تنفیذ السطر التالي
// document.write(" ;("إلي اللقاء
ويكون الناتج كما بالشكل التالي
جافا سكربت المستوي الأول
17
ملاحظة هامة :
عند إستخدامك للنوع الثاني من التعلیقات تعلیق لسطر أو أكثر من سطر (/* */) (nesting) لا يمكنك عمل تداخل
Syntax Error لإن ذلك سوف يؤدي إلي إحداث خطاء لغوي
لاحظ معي الأشكال التالیة من الأخطاء :





/*
إظهار رسالة ترحیب للمستخدم
ثم
/* طباعة سطر فارغ */
*/
/*
إظهار رسالة ترحیب للمستخدم
ثم
طباعة سطر فارغ */
/* تداخل جدید */
*/
*/
جافا سكربت المستوي الأول
18
طرق إدخال و إخراج البیانات
توفر لنا اي لغة برمجة طرق لإدخال وإخراج البیانات وھي من النقاط الھامة التي تعطي برنامجك تفاعل مع
المستخدمین لبرنامجك
وسوف نتناول في ھذا الجزء الطرق المختلفة لإخراج وإدخال البیانات .
أولا : طرق إخراج البیانات
عندما يقال أن لغة الجافا سكربت توفر لنا طرق لإخراج البیانات نعني بذلك أن لغة الجافا سكربت توفر لك بعض
الأوامر الخاصة بھا التي تمكنك من إظھار رسائل تظھر من خلال وحدات الإخراج بجھاز الكمبیوتر ( مثل الشاشة
والطابعة ) وسوف نتناول ھذة الطرق المختلفة .
: alert ١- الطریقة
تقوم بإظھار رسالة إلي المستخدم . ·
كما سنري لاحقا ،window تعتبر إحدي الوظائف التابعة للكائن ·
طريقة إستخدامھا : ·
alert(" ;(" ضع هنا رسالتك
أو
window.alert(" ;(" ضع هنا رسالتك
كلاھما سوف يؤدي إلي نفس النتیجة ثم يتم تمرير الرسالة المراد إظهارها window.alert أو alert يتم كتابة الأمر
بین علامتین تنصیص ""
تمرین لإظهار رسالة تحذیر للمستخدم






جافا سكربت المستوي الأول
19
ويكون الناتج كما يلي :
: write ٢- الطریقة
تقوم بكنابة نص في الصفحة للمستخدم . ·
كما سنري لاحقا ،document تعتبر إحدي الوظائف التابعة للكائن ·
طريقة إستخدامھا : ·
document.write(" ;(" ضع هنا رسالتك
أو نص plain text أيضا يتم تمرير الرسالة المراد كتباتھا بین علامتین تنصیص "" وتكون ھذة الرسالة إما نص بسیط
HTML text ھتمل
جمیع حروفه write يجب ملاحظة أن لغة الجافا سكربت لغة حساسة لحالة الحروف لذلك يكتب الأمر كما يلي
(small letters) صغیرة
جافا سكربت المستوي الأول
20
تمرین لإظهار رسالة ترحیب بسیطة للمستخدم






ويكون الناتج كما يلي :
تمرین لإظهار رسالة تأكید لعملیة حذف للمستخدم
document.write في ھذا التمرين سوف نتعلم طريقة إستخدام الأمر
لإظھار رسالة أكثر تعقید منصقة بإستخدام جمل الھتمل . ·
طريقة دمج النصوص . ·
طريقة حل المشكلة الناتجة من تداخل علامات التنصیص . ·
جافا سكربت المستوي الأول
21






ويكون الناتج كما يلي :
كما ذكرنا في النفاط المستفادة من ھذا التمرين سنلاحظ التالي :
- طریقة دمج النصوص:
يتم دمج النصوص ( والنص ھو الجملة المحددة بعلمتین تنصیص ) بإستخدام الرمز + المستخدم في عملیات الجمع
الرياضي كما يلي
document.write("" + "





ويكون الناتج كالتالي
جافا سكربت المستوي الأول
24
ملاحظة :
لكتابة سطر جدید
لعمل سطر جدید \r\n قمنا بإستخدام علامات الهروب : alert بالطریقة
حتي ننمكن من كتابة سطر جدید
قمنا بإستخدام الوسم :write بالطریقة
writeln
تقوم بكنابة نص في الصفحة للمستخدم بالإضافة إلي أنها تحدث سطر جدید قبل كتابة النص. ·
كما سنري لاحقا ،document تعتبر إحدي الوظائف التابعة للكائن ·
طريقة إستخدامھا : ·
document.writeln(" ;(" ضع هنا رسالتك
أو نص plain text أيضا يتم تمرير الرسالة المراد كتابتھا بین علامتین تنصیص "" وتكون ھذة الرسالة إما نص بسیط
HTML text ھتمل






جافا سكربت المستوي الأول
25
كما تري لم يتم عمل سطر جديد أقول لك نعم أننا لا نري سطر جديد ولكن ھذا لا يعني عدم وجودة حیث أنه تم
وكما نعلم أن لغة الھتمل تتجاھل المسافات الزائدة والسطور الجديدة . \n عمل تغذيه لسطر جديد باستخدام
: print ٣- الطریقة
تقوم بطباعة الصفحة . ·
. window تعتبر إحدي الوظائف التابعة للكائن ·
طریقة إستخدامها : ·
window.print();
سوف نتحدث عنھما فیما بعد. onAfterprint و onBeforeprint أيضا يوجد حدثان
جافا سكربت المستوي الأول
26
ثانیا : طرق إدخال البیانات
: confirm ١- الطریقة
السابقة بالإضافة إلي أنها تقوم بإرجاع أحدي القیمتین alert تقوم بإظهار رسالة مثل الطریقة ·
.false أو true
. window تعتبر إحدي الوظائف التابعة للكائن ·
طریقة إستخدامها : ·
confirm(" ;(" ضع هنا رسالتك
أو
window.confirm(" ;(" ضع هنا رسالتك
كلاھما سوف يؤدي إلي نفس النتیجة ثم يتم تمرير الرسالة المراد window.confirm أو confirm يتم كتابة الأمر
إظھارھا بین علامتین تنصیص ""
ثم يتم إستقبال القیمة الراجعة من الإختیار في متغیر ( سوف يتم شرح المتغیرات فیما بعد )
تمرین لإظهار رسالة تأكید حذف إشتراك احدي العملاء






جافا سكربت المستوي الأول
27
ويكون الناتج كما يلي :
لم نتعرف أيھما تم الضغط علیه ، وحتي ok أو cancel كما تري ظھور الرسالة ولكن بعد الضغط علي إحدي الزرارين
نتعرف علي القیمة الراجعة من الإختیار نحتاج إلي :
فھذا يعني أن المستخدم قد true - تخزين القیمة الراجعة في متغیر ثم نحدد قیمة ھذا المتغیر فإذا كانت قیمته
وسوف نتحدث علي ھذا cancel فھذا يعني أن المستخدم قد ضغط زر false وإذا كانت قیمته ، ok ضغط الزر
الإسلوب فیما بعد عند الحديث عن المتغیرات.
- أو نقوم بإستخدام القیمة الراجعة بدون تخزينھا ( من علي الطائر كما يقال ) كما سوف يتضح في المثال التالي :
كما يلي : alert حیث سوف نقوم بطباعة القیمة الراجعة من الإختیار بواسطة الطريقة






جافا سكربت المستوي الأول
28
ويكون الناتج كما يلي :
يكون الناتج كالتالي : ok فعند الضغط علي زر
جافا سكربت المستوي الأول
29
يكون الناتج كالتالي : cancel وعند الضغط علي زر
: prompt ٢- الطریقة
السابقة بالإضافة إلي أنها تقوم بإرجاع أحدي القیمتین confirm تقوم بإظهار رسالة مثل الطریقة ·
وهي تعني لا شيء). ) null القیمة المدخلة من خلال المستخدم أو القیمة
. window تعتبر إحدي الوظائف التابعة للكائن ·
طریقة إستخدامها : ·
prompt(" ;("القیمة الإفتراضیة للقیمة الراجعة" ," ضع هنا رسالتك
أو
window.prompt(" ;("القیمة الإفتراضیة للقیمة الراجعة" ," ضع هنا رسالتك
كلاھما سوف يؤدي إلي نفس النتیجة ثم يتم تمرير الرسالة المراد window.prompt أو prompt يتم كتابة الأمر
إظھارھا بین علامتین تنصیص "" ثم تمرر أو لا تمرر القیمة الإفتراضیة للقیمة الراجعة وإذا لم تمرر سوف تأخذ القیمة
undefined الإفتراضیة
ثم يتم إستقبال القیمة الراجعة من الإختیار في متغیر ( سوف يتم شرح المتغیرات فیما بعد ) أو إظھارھا في شكل
كما بالمثال التالي confirm رسالة كما سبق القول في الطريقة
جافا سكربت المستوي الأول
30
تمرین لإظهار رسالة بها اسم المستخدم بعد إدخال اسمه






ويكون الناتج كما يلي :
ثم نقوم بإدخال الاسم ولیكن التالي "الحسین محمد" كالتالي :
جافا سكربت المستوي الأول
31
يكون الناتج كالتالي : ok فعند الضغط علي زر
جافا سكربت المستوي الأول
32
يكون الناتج كالتالي : cancel وعند الضغط علي زر
جافا سكربت المستوي الأول
33
الفصل الثالث
المتغيرات
سوف نناقش إن شاء الله في هذا الفصل النقاط التالیة :
Variables المتغیرات ·
ما ھو المتغیر o
أنواع البیانات o
طريقة تسمیة المتغیرات o
تعريف المتغیرات o
JavaScript Keywords الكلمات المحجوزة ·
جافا سكربت المستوي الأول
34
Variables المتغیرات
ما ھو المتغیر :
ھب أنني أعطیتك كمیة من الماء فما وسیلة تخزينك لھذة الكمیة ، ربما قلت لي سوف أضعھا في كوب صغیر أو إناء
أو أي محتوي أكبر ، وبھذا أقول لك أنك نجحت في عملیة تخزين المیاه ولكن ما فائدة ھذة العملیة ، ربما تقول لي
حتي أستخدمھا عند حاجتي لھا في المستقبل القريب أو البعید نعم نعما الرأي ما قلت .
لكن ما علاقة ھذا بموضوعنا المتغیرات ، بكل بساطة كما أحتجنا إلي تخزين الماء في محتوي يحفظه حتي نتمكن
من إستخدامه عند الحاجة إلیه ، فإننا أيضا في عالم الكمبیوتر والبرمجة نحتاج إلي عملیة تخزين ولكن لیس للماء
ولكن تخزين للبیانات .
فھب أنني أعطیتك النص التالي الحمد لله العلي العظیم وقلت لك كیف يمكنك تخزين ھذا النص ربما أسرعت
بالقول لي أنني سوف أقوم بحفظ ھذا النص في رأسي وتكون رأسك ھنا ھي مخزن النص ، ولكن إذا أردنا تخزين
النص السابق في برنامجنا بشكل مؤقت ( اي خلال فترة عمل البرنامج فقط وينتھي تخزينھا عند إنتھاء البرنامج )
ھنا سوف نحتاج إلي مخزن يتم حفظ ھذا النص به وغالبا ما يكون جزء من ذاكرة الحھاز المؤقتة ، ويتم إعطاء ھذا
الجزء من ذاكرة الجھاز اسم خاص حتي يتم التعامل مع ھذا الجزء .
نخلص مما سبق إلي أن المتغیر ھو جزء من ذاكرة الجھاز يتم إعطاء اسم له ، يعتبر بمثابة مخزن للبیانات
أنواع البیانات :
تختلف أنواع البیانات فمثلا يستطیع الإنسان إدراك التمیز بین الحروف الأبجدية و الأرقام وبین النصوص والقیم العددية
وھكذا ، وأيضا توفر لنا لغة الجافا سكربت التمیز بین ٤ أنواع من البیانات :
String النصوص ·
Number القیم العددية ·
Boolean ( الحالة البولینیة ( صح أم خطأ ·
Null القیمة لا شئ ·
لاحظ معي التالي كما نعلم أن شكل وطبیعة تركیب مخازن المیاه يختلف عن بنیة مخازن البترول مثلا
وھكذا يختلف نوع المخزن حسب طبیعة ونوع المادة المخزنة به .
ولكن المتغیرات في لغة الجافا سكربت ( وھي مخازن البیانات ) لا تختلف في بنیتھا بإختلاف نوع البیانات المخزنة
بھا كما ھو الحال بلغة الجافا والسي التي يتمیز فیھا نوع المخزن حسب نوع البیانات المخزنة به .
جافا سكربت المستوي الأول
35
طريقة تسمیة المتغیرات :
تسمیة المتغیرات تخضع لشروط أساسیة يجب توافرھا لیعمل البرنامج بالصورة الصحیحة وھي كالتالي :
الخانة الأولي من إسم المتغیر لابد أن تكون أحد الأحرف الإنجلیزية سواءً حرفا كبیرا أو صغیرا مع ملاحظة ·
الفرق بینھما ، ويمكن البدء بعلامة _ أو علامة $ ، مع أنه لاينصح بإستخدام العلامة الأخیرة.
لايمكنك إطلاقا إٍستخدام رقم كأول خانة في الإسم. ·
الأسماء لايمكن أن تحوي مسافات بین أحرفھا ، لكن يمكنك إستخدام العلامة _ بدل المسافات. ·
لايمكن لأي إسم أن يماثل أيا من الكلمات المحجوزة وھذه القاعدة عامة لجمیع لغات البرمجة. ·
وإلیك بعض الأمثلة على التسمیة الصحیحة للمتغیرات :
Address1 ·
A4xb5 ·
lastName ·
_firstName ·
parent_Name ·
وإلیك بعض الأمثلة على التسمیة غیر الصحیحة للمتغیرات :
1stName ·
?subName ·
last name ·
userID@ ·
جرت العادة عند تسمیة المتغیرات في الجافا سكربت أنه لا يفضل إستخدام الحرف _ للفصل بین مقاطع الكلمات
ولكن يتم دمج المقاطع مع جعل الحرف الأول صغیر وأول حرف من المقاطع التالیة يكون ذو حرف كبیر فعلي سبیل
لا يفضل تسمیته كما يلي : last name المثال عندما نريد تسمیة متغیر لیعبر عن
.lastName ولكن يفضل تسمیة كما يلي Last_name
ملاحظات ھامة عند تسمیة المتغیرات :
كما نعلم فإن لغة الجافا سكربت تمیز بین حالة الحروف الكبیرة والصغیرة فإن المتغیر
. LastName لیس مثل المتغیر lastName
دائما حاول أن تكون أسماء المتغیرات ذات دلالة تبسط علیك في المستقبل عملیة التعديل في البرنامج .
جافا سكربت المستوي الأول
36
تعريف المتغیرات :
كما غلمنا أن المتغیرات ھي أسماء لحجز أماكن في ذاكرة الجھاز لحفظ البیانات التي تسند إلیھا . وقبل أن
var تستخدم أيا من ھذه المتغیرات لابد من الإفصاح عنھا ، وذلك بإستخدام الأمر
var firstName;
وھكذا ، كما أنه من الممكن الإعلان عن أكثر من متغیر في سطر واحد ، وھذا مالايمكنك عمله بواسطة الفیجوال
بیسك سكربت ..
var firstName, lastName, userID;
وأخیراً ، لمزيد من التبیسط ، يمكننا إسناد القیم الى ھذه المتغیرات أثناء تعريفھا والإفصاح عنھا، كما يلي:
var firstName, lastName = " علي ", userID = 13;
تذكر أنه إذا لم تفصح عن أي متغیر قبل إستخدامه فإن ذلك سیوقف عمل البرنامج ، ولاتنسى أن الجافا سكربت لغة
دائما حتى في أوامر الجافا السكربت والوظائف ومصطلحاتھا X غیر x حساسة تجاه الأحرف كما ذكرنا سابقا ف
المحجوزة.
تمرین لإظهار رسالة ترحیب للمستخدم بعد إدخال اسمه






ويكون الناتج بعد إدخال الأسم بقیمة محمد كما يلي :
جافا سكربت المستوي الأول
37
: ok وبعد الضغط علي الزر
جافا سكربت المستوي الأول
38
كما يلي prompt ثم خزن به القیمة الراجعة من الأمر userName وكما نري فقد تم الإعلان عن متغیر باسم
var username = prompt(" ؟ ;("أدخل هنا اسمك" ,"ما هو اسمك
مضافا إلیھا نص " مرحبا بك یا : " كما يلي : userName ثم قمنا بطباعة القیمة المخزنة بالمتغیر
var username = prompt(" ؟ ;("أدخل هنا اسمك" ,"ما هو اسمك
alert( " : مرحبا بك یا " + username );
تمرین لإظهار بیانات المستخدم بعد إدخال اسمه وعمره






كما يلي : ok ويكون الناتج بعد إختیار
جافا سكربت المستوي الأول
39
ويكون الناتج بعد إدخال الأسم بقیمة محمد كما يلي :
جافا سكربت المستوي الأول
40
جافا سكربت المستوي الأول
41
الكلمات المحجوزة
أو مصطلحات الجافا سكربت المحجوزة ، وھي أوامر الجافا سكربت التي لايمكنك نسب أي متغیرات إلیھا على
الإطلاق ، كما في كل لغات البرمجة المعروفة .
طبعا لايجب علیك حفظھا كاملة ، وإنما الإلمام بھا . وستجد جدولا مبینا لھا
break in true
continue int typeof
do labeled var
else new void
false null while
for return with
function switch
if this
abstract final protected
boolean finally public
byte float short
case goto static
catch implements synchronized
char import super
class instanceof throw
const interface throws
default long transient
delete native try
double package
extends private
جافا سكربت المستوي الأول
42
الفصل الرابع
المعاملات
سوف نناقش إن شاء الله في هذا الفصل النقاط التالیة :
Operators المعاملات ·
Arithmetic Operators معاملات رياضیة o
Concatenation Operators معاملات دمج النصوص o
Comparison Operators معاملات المقارنة o
Logical Operators معاملات منطقیة o
Unary Operators معاملات احادية o
Assignment Operators معاملات تغیر القیم o
Shift & Bitwise Operators معاملات التعامل بالنظام الثنائي o
معاملات خاصة o
Operator Precedence أولوية تنفیذ المعاملات ·
Exception Handling معالجة الأخطأ ·
with جملة ·
جافا سكربت المستوي الأول
43
Operators المعاملات
تعتبر المعاملات ھي الوسیط الأساسي للتعامل بین قیم المتغیرات .
وتنقسم المعاملات إلي غدة أقسام كما يلي :
Arithmetic Operators معاملات رياضیة ·
Concatenation Operators معاملات دمج النصوص ·
Comparison Operators معاملات المقارنة ·
Logical Operators معاملات منطقیة ·
Unary Operators معاملات احادية ·
Assignment Operators معاملات تغیر القیم ·
Shift & Bitwise Operators معاملات التعامل بالنظام الثنائي ·
معاملات خاصة ·
Arithmetic Operators معاملات رياضیة
تستخدم لإجراء العملیات الرياضیة من جمع وطرح وضرب وقسمة وباقي القسمة .
+ : تستخدم لإجراء عملیات الجمع الرياضي . ·
- : تستخدم لإجراء عملیات الطرح الرياضي . ·
* : تستخدم لإجراء عملیات الضرب الرياضي . ·
/ : تستخدم لإجراء عملیات القسمة الرياضي . ·
% : تستخدم لحساب باقي القسمة الرياضي ·
مثال :
alert( 5 % 2 );
ويكون الناتج كما يلي :
جافا سكربت المستوي الأول
44
Concatenation Operators معاملات دمج النصوص
+ : كما تستخدم لإجراء عملیات الجمع الرياضي تستخدم لدمج النصوص كما يلي : ·
var username = " ;"محمد
alert( " : مرحبا بك یا " + username );
ويكون الناتج كما يلي :
Comparison Operators معاملات المقارنة
تستخدم لإجراء عملیات المقارنة
. false أو true عند إجراء مقارنة يكون ناتج ھذة المقارنة إحدي القیم اما
== : لتعین ھل طرفي المقارنة متساويان في القیمة . ·
=== : لتعین ھل طرفي المقارنة متساويان في القیمة و نوع البیانات. ·
=! : لتعین ھل طرفي المقارنة غیر متساويان في القیمة . ·
==! : لتعین ھل طرفي المقارنة غیر متساويان في القیمة و نوع البیانات. ·
< : لتعین ھل الطرف الأيسر أكبر من الطرف الأيمن . · > : لتعین ھل الطرف الأيسر أقل من الطرف الأيمن . ·
=< : لتعین ھل الطرف الأيسر أكبر أو يساوي الطرف الأيمن . · => : لتعین ھل الطرف الأيسر أقل من أو يساوي الطرف الأيمن . ·
لاحظ :
عند تعین ھل الطرفین متساويان يم أستخدام الحرف "=" مرتیین متتالیتین كما بالمثال التالي :
مثال :
alert( "5 == 2 : " + (5 == 2) );
alert( "7 == 7 : " + (7 == 7) );
جافا سكربت المستوي الأول
45
ويكون الناتج كما يلي :
Logical Operators معاملات منطقیة
. false أو true تستخد لإجراء مقارنة منطقیة ، وغالبا ما تكون أطراف المقارنة إحدي القیم
. false أو true عند إجراء مقارنة يكون ناتج ھذة المقارنة إحدي القیم اما
: && ·
وغیر ذلك true عندما يكون طرفي المقارنة يساوي true تعني العملیة المنطقیة "و" وتقوم بإرجاع القیمة
كما يلي : false سوف يؤدي إلي إرجاع القیمة
الناتج القیمة القیمة
True True True
True False False
False True False
False False False
: || ·
عندما يكون احدي طرفي المقارنة أو كلاھما يساوي true تعني العملیة المنطقیة "أو" وتقوم بإرجاع القیمة
كما يلي : false وغیر ذلك سوف يؤدي إلي إرجاع القیمة true
الناتج القیمة القیمة
True True True
True False True
False True True
False False False
جافا سكربت المستوي الأول
46
: ! ·
تعني العملیة المنطقیة "لا" وتقوم بعكس القیمة كما يلي :
الناتج القیمة
True False
False True
أمثلة :
alert( true && false );
ويكون الناتج كما يلي :
alert( true || false );
ويكون الناتج كما يلي :
alert( !true );
ويكون الناتج كما يلي :
جافا سكربت المستوي الأول
47
alert( !( 5 > 7 ) );
ويكون الناتج كما يلي :
Unary Operators المعاملات الاحادية
تستخدم لإجراء العملیات الرياضیة من جمع وطرح بشكل مختصر جدا .
(operand) وتسمي ھذه المعاملات بأنھا معاملات احادية لأنھا تتعامل مع طرف واحد
++ : تستخدم لزيادة قیمة الطرف (العامل) الممرر لھا بمقدار واحد صحیح . ·
- - : تستخدم لإنقاص قیمة الطرف (العامل) الممرر لھا بمقدار واحد صحیح . ·
- : تستخدم لعكس إشارة العامل الممرر لھا فإذا كانت قیمة سالبة فسوف تتحول إلي قیمة موجبة ·
والعكس صحیح .
لاحظ :
يوجد حالتان للمعاملین ++ و -- حالة قبلیة وأخري بعدية كما يلي :
:(Postfix) الحالة البعدية
فیھا يتم إجراء عملیة الزيادة (++) أو النقص (--) بعد الإنتھاء من إجراء السطر الحالي لاحظ معي المثال التالي :
مثال :






لاحظ السطر التالي :
num2 = num1++;
num يتم فیه استخدام المعامل الاحادي ++ ولكن بالوضع البعدي لأنه أتي بعد العامل 1
وھذا السطر يكافئ السطرين التتالیین :
num2 = num1;
num1 = num1 + 1;
لذلك يكون الناتج كما يلي :
:(Prefix) الحالة القبلیة
فیھا يتم إجراء عملیة الزيادة (++) أو النقص (--) قبل إجراء تنفیذ السطر الحالي لاحظ معي المثال التالي :
مثال :






لاحظ السطر التالي :
num2 = ++num1;
num يتم فیه استخدام المعامل الاحادي ++ ولكن بالوضع القبلي لأنه أتي قبل العامل 1
وھذا السطر يكافئ السطرين التتالیین :
num1 = num1 + 1;
num2 = num1;
لذلك يكون الناتج كما يلي :
جافا سكربت المستوي الأول
50
لاحظ معي الأمثلة التالیة :
مثال :
var num1 = 3, num2;
num2 = ++num1 + 4;
alert( "num1 = " + num1 );
alert( "num2 = " + num2 );
لا حظ ان السطر التالي :
num2 = ++num1 + 4;
يكافي السطريین التتالیین :
num1 = num1 + 1;
num2 = num1 + 4;
لذلك يكون الناتج كما يلي :
مثال :
var num1 = 13;
num1--;
alert( "num1 = " + num1 );
ويكون الناتج كما يلي :
جافا سكربت المستوي الأول
51
مثال :
var num1 = 13;
alert( "num1 + 1 = " + (num1 + 1) );
alert( "num1 = " + num1 );
alert( "num1 + 1 = " + ++num1 );
alert( "num1 = " + num1 );
ويكون الناتج كما يلي :
جافا سكربت المستوي الأول
52
num لاحظ أن السطر التالي لم يؤثر في قیمة 1
alert( "num1 + 1 = " + (num1 + 1) );
Assignment Operators معاملات تغیر القیم
تستخدم لتغیر قیمة المعامل الموجود بالطرف الأيسر
= : لتغیر قیمة الطرف الأيسر بقیمة الطرف الأيمن . ·
=+ : لزيادة قیمة الطرف الأيسر بمقدار قیمة الطرف الأيمن . ·
=- : لنقص قیمة الطرف الأيسر بمقدار قیمة الطرف الأيمن . ·
=* : لضرب قیمة الطرف الأيسر في قیمة الطرف الأيمن ووضع الناتج لیكون قیمة الطرف الأيسر . ·
=/ : لقسمة قیمة الطرف الأيسر علي قیمة الطرف الأيمن ووضع الناتج لیكون قیمة الطرف الأيسر . ·
=% : لحساب باقي قسمة قیمة الطرف الأيسر علي قیمة الطرف الأيمن ووضع الناتج لیكون قیمة الطرف ·
الأيسر .
مثال :
var num = 6;
num += 5;
alert( "num : " + num );
ويكون الناتج كما يلي :
جافا سكربت المستوي الأول
53
لاحظ السطر التالي :
num += 5;
المقدار 5 وھذا السطر يكافئ السطر التالي : num ويعني أضف إلي قیمة المتغیر
num = num + 5;
مثال :
var num = 6;
num *= 5;
alert( "num : " + num );
ويكون الناتج كما يلي :
Shift & Bitwise Operators معاملات التعامل بالنظام الثنائي
قبل الحديث عن معاملات النظام الثنائي دعني أخذك لنري لمحات في عالم الثنائیات أو نظام العد الثنائي
ولا أخفي علي اي مبتدأ في عالم البرمجیات أو ربما المتوسطین أيضا أن دخول ھذا المنعطف ربما لا يكون سھل
ولكن دعنا نتوكل علي الله فھو خیرا معین .
النظام الثنائي
ھو أحد أنظمة العد مثل النظام العشري المعتاد لنا .
لكن النظام الثنائي يعتمد علي رقمین فقط وھما الواحد و الصفر .
وھذا النظام العددي تم إستخدامه لبرمجة الحواسب في بدايات تطوير برامج للحاسبات بما كان يعرف بلغة الألة
وذلك لان وحدات بناء الحاسب تتعامل في حساباتھا بالنظام الثنائي ( لان الوحدة الإلكترونیة machine language
لا تستطیع تمیز إلا حالتان وھما وجود إشارة إلیكترونیة نتیجة إغلاق الدائرة الإلكترونیة ، وعدم وجود إشارة نتیجة
فتح الدائرة الإلكترونیة ) .
فإن كنا نريد تمثیل الأعداد ولا نملك إلا رقمین فقط وھما ١ وال ٠
لذلك قیاسا علي ما تعلمناه في النظام العشري عندما نريد تمثیل العدد عشرة نقوم بعملیة دمج الرقمین ١ و ٠
وعند تمثیل العدد الحادي عشر نقوم بدمج الرقمین ١ و ١ وھكذا عندما نخرج عن نطاق نظام العد .
وبما أن النظام الثنائي لا يتمیز إلا برقمین فقط فعندما نريد تمثیل العدد أثنین نقوم بدمج الرقمین ١ و ٠ وھكذا
فالعدد العشري ٢ يمثل في النظام الثنائي كما يلي ١٠
والعدد العشري ٣ يمثل في النظام الثنائي كما يلي ١١
جافا سكربت المستوي الأول
54
وتوجد أسالیب رياضیة لن نتطرق لھا تستخدم في التحويل بین أنظمة العد المختلفه .
Bitwise Operators معاملات التعامل بالبت
تستخدم لتتعامل مع القیمة الثنائیة لكلا الطرفین
وعمل مقارنه منطقیة لكل بت علي حدي كما سیتضح فیما يلي :
: & ·
تتعامل مثل المعامل المنطقي &&
ولكن تتعامل لیس بالقیمة الكلیة للطرفین ولكن تتم المقارنة علي مستوي البت ، بت واحد تلو الأخر .
: | ·
تتعامل مثل المعامل المنطقي ||
ولكن تتعامل لیس بالقیمة الكلیة للطرفین ولكن تتم المقارنة علي مستوي البت ، بت واحد تلو الأخر .
: ~ ·
تتعامل مثل المعامل المنطقي !
ولكن تتعامل لیس بالقیمة الكلیة للطرفین ولكن تتم المقارنة علي مستوي البت ، بت واحد تلو الأخر .
: ^ ·
مثل المعامل المنطقي || ولكن XOR تتعامل بمفھوم ال
وغیر ذلك سوف يؤدي إلي إرجاع true عندما يكون احدي طرفي المقارنة يساوي true تقوم بإرجاع القیمة
كما يلي : false القیمة
الناتج القیمة القیمة
True True False
True False True
False True True
False False False
مثال :
alert( 2 & 3 );
ويكون الناتج كما يلي :
تفسیر الناتج كما يلي :
٢ ١ ٠
٣ ١ ١
٢ ١ ٠
مثال :
alert( 2 | 3 );
جافا سكربت المستوي الأول
55
ويكون الناتج كما يلي :
تفسیر الناتج كما يلي :
٢ ١ ٠
٣ ١ ١
٣ ١ ١
مثال :
alert( 2 ^ 3 );
ويكون الناتج كما يلي :
تفسیر الناتج كما يلي :
٢ ١ ٠
٣ ١ ١
١ ٠ ١
Shift Operators أما معاملات الإزاحة
إلي الیمین أو الیسار حسب نوع الإزاحة كما يلي bits تستخدم لعمل أزاحة ( تحريك ) للبتات
: >> ·
تقوم بعمل إزاحة ناحیة الیمین لعدد من البتات يكافيء مقادر قیمة الطرف الأيمن
لقیمة العدد بالطرف الأيسر
: << · تقوم بعمل إزاحة ناحیة الیسار لعدد من البتات يكافيء مقادر قیمة الطرف الأيمن لقیمة العدد بالطرف الأيسر جافا سكربت المستوي الأول 56 مثال : var num = 6 , num1 , num2; num1 = num >> 1;
alert( "num1 : " + num1 );
num2 = num >> 2;
alert( "num2 : " + num2 );
ويكون الناتج كما يلي :
وتفسیر الناتج كما يلي :
يمثل العدد ٦ بالعدد ١١٠ بالنظام الثنائي ، فعند إزاحة ھذا العدد الثنائي ناحیة الیمین بمقدار بت واحد سوف يصبح
كالتالي ١١ اي ما يكافئ العدد ٣ بالنظام العشري ، وإذا تم إزاحة بمقدار بت أخر جھة الیمین يكون العدد كالتالي ١
اي ما يعادل ١ بالنظام العشري كما يتضح بالشكل التالي :
مثال :
var num = 6 , num1 , num2;
num1 = num << 1; alert( "num1 : " + num1 ); جافا سكربت المستوي الأول 57 num2 = num << 2; alert( "num2 : " + num2 ); ويكون الناتج كما يلي : وتفسیر الناتج كما يلي : يمثل العدد ٦ بالعدد ١١٠ بالنظام الثنائي ، فعند إزاحة ھذا العدد الثنائي ناحیة الیسار بمقدار بت واحد سوف يصبح كالتالي ١١٠٠ اي ما يكافئ العدد ١٢ بالنظام العشري ، وإذا تم إزاحة بمقدار بت أخر جھة الیمین يكون العدد كالتالي ١١٠٠٠ اي ما يعادل ٢٤ بالنظام العشري معاملات خاصة : ? : · (Ternary operator) ويسمي أيضا معامل تیرنري (conditional operator) المعامل الشرطي الشكل العام له : ; القیمة عندما یكون ناتج الشرط خطأ : القیمة عندما یكون ناتج الشرط صحیحة ?( الشرط ) مثال : var num1 = 6 ,num2; num2 = ( num1 > 3 )? 5 : 100;
alert( "num2 : " + num2 );
true سوف يكون ( num1 > ولأن ناتج المقارنة ( 3
لذلك يكون الناتج كما يلي :
جافا سكربت المستوي الأول
58
مثال :
var num1 = 6 ,num2;
num2 = ( num1 < 3 )? 5 : 100; alert( "num2 : " + num2 ); false سوف يكون ( num1 < ولأن ناتج المقارنة ( 3 لذلك يكون الناتج كما يلي : جافا سكربت المستوي الأول 59 Operator Precedence أولوية تنفیذ المعاملات كما تعلمنا جمیعا بالمرحلة الإبتدائیة أن العملیات الرياضیة من جمع و طرح وقسمة وضرب تختلف أولوية تنفیذه حیث أن أولوية إجراء عملیات الضرب والقسمة أكبر من أولوية إجراء عملیات الجمع و الطرح . وأولوية عملیات الضرب والقسمة متساوية . وأيضا أولوية عملیات الجمع والطرح متساوية . فجزي الله كل خیر من علمنا العلم ونحن صغارا ( وتالله ما زلنا صغارا ولسنا بصغار ) . تعالي معي نبحث ھذه العملیة الحسابیة 2 + 4 * 3 ؟ فما نتیجة ھذه العملیة الحسابیة ھل يكون الناتج ١٨ أم ١٤ لو تم جمع الرقم ٢ علي الرقم ٤ ينتج العدد ٦ ثم عند ضرب ھذا الرقم في العدد ٣ يكون الناتج ١٨ ولكن ھذا غیر صحیح رياضیا لأننا أجرينا عملیة الجمع أولا ثم إجرينا عملیة الضرب ، ولكننا علمنا من قلیل أن أولوية إجراء عملیات الضرب والقسمة أكبر من أولوية إجراء عملیات الجمع و الطرح ، أي أننا ينبغي أن ننفذ عملیة الضرب أولا وتكون الخطوات كالتالي : . يتم ضرب العدد ٤ في العدد ٣ وينتج عنه العدد ١٢ ثم يتم جمعه علي العدد ٢ ويكون الناتج ١٤ مثال : var num1 = 2 ,num2 = 4 , num3; num3 = num1 + num2 * 3; alert( "num3 : " + num3 ); و يكون الناتج كما يلي : ولكننا تعلمنا مما درسناه في منھج الرياضیات أننا يمكننا تغیر أولوية تنفیذ العملیات الرياضیة بإستخدام ما يسمي أقواس المجموعات وتكون العملیات الحسابیة الموجودة داخل ھذه الأقواس ذات أعلي أولوية كما بالمثال التالي : جافا سكربت المستوي الأول 60 مثال : var num1 = 2 ,num2 = 4 , num3; num3 = (num1 + num2) * 3; alert( "num3 : " + num3 ); و يكون الناتج كما يلي : لاحظ معي السطر التالي : num3 = (num1 + num2) * 3; num1 + num لاحظ وجود الأقواس حول العملیة الحسابیة 2 مما يجعل أولوية إجراء ھذه العملیة أكبر من أولوية إجراء عملیة الضرب . فیتم جمع الرقم ٢ علي الرقم ٤ ينتج العدد ٦ ثم عند ضرب ھذا الرقم في العدد ٣ يكون الناتج ١٨ مثال : var num1 = 2 ,num2 = 4 , num3; num3 = ( (num1 + num2) / 2 + 6 ) * 3; alert( "num3 : " + num3 ); و يكون الناتج كما يلي : جافا سكربت المستوي الأول 61 Exception Handling معالجة الأخطأ ربما يصادفك حدوث بعض المشاكل ولا تكون أخطاء لغوية ومع أنك لم تخطأ في كود البرنامج دعنا نري المثال التالي مثال :





لم يتم تعريفة ولا إعطائه قیمة فلا يمكن إستخدامه num وبما أن المتغیر المسمي 3
ويكون الناتج كما يلي :
اي رسالة خطأ Error كما يتضح من الرسالة أنھا رسالة
غیر معرف أو غیر معروف لدي num اي أن المتغیر المسمي 3 "num3 is undefined" وتشیر الرسالة إلي أن
البرنامج .
جافا سكربت المستوي الأول
62
ولكن السؤال الأن ھل يمكن تجنب وقوع الأخطأ ؟
catch و ال try نعم ، يمكنك تجنب حدوث الأخطأ باستخدام صیغة
الصیغة العامة
try{
}catch( e ){
}
فإذا حدث اي خطأ ينتقل المفسر إلي منطقة الأكواد بین أقواس الجملة try يتم كتابة الأكود بین أقواس الجملة
لانه يدل علي e ويتم تحمیل كائن مخصص لحمل مواصفات ھذا الخطأ جرت العادة لتسمیة ھذا المتغیر باسم catch
Exception حدوث إستثناء
ولمعالجة المثال السابق نقوم بإعادة كتابتة كالتالي
مثال :






ويكون الناتج كما يلي
جافا سكربت المستوي الأول
63
وخائصه ھي : e ويمكننا إظھار رسالة الخطأ الأساسیة بإستخدام خصائص الكائن
Name ·
وتعبر عن اسم الخطأ
Message ·
وتعبر عن محتوي نص رسالة الخطأ
Number ·
وتعبر عن رقم الخطأ
Description ·
وتعبر عن رسالة تفصیلیة للخطأ
نقوم بإعادة كتابة المثال السابق كالتالي
مثال :






ويكون الناتج كما يلي
جافا سكربت المستوي الأول
64
throw إستحداث خطأ بإستخدام الجملة
بطريقتین ، throw في بعض الأحیان نحتاج إلي إستحداث خطأ ما ، ويتم ذلك بإستخدام الأمر
أولھما
ھذا المثال لیس به اي خطأ ولكننا سوف نستحدث ھذا الخطأ كما يلي






ويكون الناتج كما يلي
كما بالسطر التالي throw من المثال السابق تم كتابة رسالة الخطأ بعد الأمر
throw " ;"هذا خطأ لیس حقیقي ولكنه مستحدث
e حاملا معه رسالة الخطأ في المتغیر catch فعند تنفیذ ھذا الأمر ينتقل المفسر إلي الجملة
بعدھا قمنا بطباعة رسالة الخطأ كما يلي
}catch( e ){
alert( " : رسالة الخطأ " + e );
}
جافا سكربت المستوي الأول
65
throw ثم إرساله إلي الأمر Error ثانیھما ھو عمل خطأ من الكائن
كما بالمثال التالي
مثال






بالجزء الثاني من ھذا الكتاب إن شاء الله Error ولن نخوض كثیرا في ھذا المثال حتي نقوم بشرح الكائن
جافا سكربت المستوي الأول
66
with جملة
تابعة لكائن واحد ، يمكننا أن نجعل ھذا الكائن functions و أو وظائف properties عندما تقوم بإستخدام خصائص
يشیر إلي خصائصه و وظائفه بدون تكرار كتابته قبل كتابة الخاصیة أو الوظیفة .
with الصیغة العامة لجملة
with( } ( اسم الكائن المستهدف عدم تكراره
الأكواد //
ربما تحتوي الأكواد علي خصائص أو وظائف لهذا الكائن //
}
وبالمثال يتضح المقال
مثال :
with ھذا المثال بدون إستخدام جملة






كما يلي window وكما تري بالمثال السابق قد قمنا بتكرار كتابة الكائن
var familyName = window.prompt("؟ ;("ما هو اسم العائلة
window.alert(" : مرحبا بك یا " + userName );
window.alert(" : مرحبا بعائلة " + familyName );
كما بالمثال التالي : window بإستخدام الكائن window ويمكننا أن نقوم بإلغاء تكرار كتابة الكائن
جافا سكربت المستوي الأول
67
with ھذا المثال بإستخدام جملة






ويؤدي ھذا المثال إلي نفس الناتج بالمثال السابق
بالأسطر التالیة : with ويتضح طريقة إستخدام جملة
with( window ){
var familyName = prompt("؟ ;("ما هو اسم العائلة
alert(" : مرحبا بك یا " + userName );
alert(" : مرحبا بعائلة " + familyName );
}
ثم اي خاصیة أو with بل تم كتابته مرة واحدة بین أقواس جملة ، window كما تري لم نقم بتكرار كتابة اسم الكائن
window يمكنك تجاھل كتابة اسم الكائن with وظیفة تابعة لھذا الكائن تم كتابتھا بین أقواس المجموعة لجملة
التابع له .
ملاحظة :
بدون فائدة . with ولكن ھذا يجعل جملة with يمكنك كتابة اسم الكائن وحتي بعد إستخدام جملة
كما يلي :
with( window ){
var familyName = prompt("؟ ;("ما هو اسم العائلة
window.alert(" : مرحبا بك یا " + userName );
alert(" : مرحبا بعائلة " + familyName );
}
جافا سكربت المستوي الأول
68
: with تداخل جملة
كما بالمثال التالي : with لجمل nesting يسمح بعمل تداخل
مثال






كما يلي : document والأخري للكائن window أحدھما للكائن with كما تلاحظ أنه تم تداخل جملتین ل
with( window ){
var familyName = prompt("؟ ;("ما هو اسم العائلة
alert(" : مرحبا بك یا " + userName );
alert(" : مرحبا بعائلة " + familyName );
تداخل لجمل // with
with( document ){
write(" مرحبا بفكرة تداخل جمل with
" );
writeln(" ;(" إلي اللقاء مع الفصل القادم
لاحظ أن هذه الوظیفة // alert
تابعة لجملة //
// with الأولي
alert(" : إلي اللقاء لعائلة " + familyName );
}
}
جافا سكربت المستوي الأول
69
الفصل الخامس
التحكم في مسار البرنامج
سوف نناقش إن شاء الله في هذا الفصل النقاط التالیة :
Conditional Statements جمل الشرط ·
if جملة الشرط o
switch جملة الشرط o
Iteration Statements جمل التكرار والحلقات ·
for جملة التكرار o
while جملة التكرار o
do while جملة التكرار o
جافا سكربت المستوي الأول
70
Conditional Statements جمل الشرط
دائما في حیاتنا المعاصرة ما نحتاج لإتخاذ بعض القرارات ھل نفعل كذا أم كذا علي سبیل المثال قبل أن تبدأ في
تعلم لغة الجافا سكربت ربما تبادر لك ھذا السؤال ھل أنت في حاجة لتعلم ھذه اللغة ؟
وھذا السؤال يحتمل إحدي الإجابات إما نعم أو لا ، وبإجابتك علي ھذا السؤال تكون قد حددت مسارك في الأيام
القادمة ، علي سبیل المثال لو كانت إجابتك بلا لما إستطعت قرأت ھذا النص المكتوب بین يديك ، وإذا كانت إجابتك
بنعم فسوف تكون من قارئي ھذا النص .
نخلص مما سبق إلي أننا دائما ما تطرح أمامنا إختیارات نحتاج لوضعھا في جمل شرط وھذه الجملة تحدد المسار
حسب الإختیار ، فعلي سبیل المثال لجملة الشرط
ھل تريد أن تتعلم لغة الجافا سكربت ؟ ولیس أمامك إلا إختیاران أحدھما نعم والأخر لا
فعندما تقول نعم فسوف تجني ثمار ما تعلمت إن شاء الله فمن جد وجد ، وإذا كان الخیار بلا فلا تلومنا إلا نفسك
لتفريطك في أخذ العلم النافع .
if جملة الشرط
وتستخدم لعمل تفريع بمسار البرنامج . if من أشھر جمل الشرط الجملة
if الصیغة العامة لجملة الشرط
كما يلي : if توجد عدة صیغ لجملة الشرط
: if الصیغة الفردية
أو اي قیمة عددية غیر الصفر أو ) true وفیه يتم حساب قیمة جملة الشرط فإذا كانت جملة الشرط تكافي القیمة
، if فعندئذ يتم تنفیذ الأكواد بین أقواس جملة الشرط ، ( null اي قیمة نصیة غیر قیمة النص الفارغ أو القیمة
أو القیمة العددية صفر أو القیمة النصیة الفارغة ) سوف يتم تجاھل تنفیذ الأكواد ) false وإذا كانت تكافئ القیمة
بین أقواس جملة الشرط .
if( } ( جملة الشرط
الأكواد //
}
مثال
var num = 78;
if( num >= 50 ) {
alert( " المتغیر num = " + num + "\n ;( " أكبر من أو یساوي ٥٠
}
ويكون الناتج كما يلي
جافا سكربت المستوي الأول
71
: if ... else الصیغة المزدوجة
أو اي قیمة عددية غیر الصفر أو ) true وفیه يتم حساب قیمة جملة الشرط فإذا كانت جملة الشرط تكافي القیمة
، if فعندئذ يتم تنفیذ الأكواد بین أقواس جملة الشرط ، ( null اي قیمة نصیة غیر قیمة النص الفارغ أو القیمة
أو القیمة العددية صفر أو القیمة النصیة الفارغة ) سوف يتم تجاھل تنفیذ الأكواد ) false وإذا كانت تكافئ القیمة
. else ثم يتم تنفیذ الأكواد المنحصرة بین أقواس الجملة if بین أقواس جملة الشرط
if( } ( جملة الشرط
الأكواد //
}else{
الأكواد //
}
مثال
var num = 18;
if( num >= 50 ) {
alert( " المتغیر num = " + num + "\n ;( " أكبر من أو یساوي ٥٠
}else{
alert( " المتغیر num = " + num + "\n ;( " أقل من ٥٠
}
ويكون الناتج كما يلي
الصیغة المركبة :
أو اي قیمة عددية غیر ) true وفیه يتم حساب قیمة جملة الشرط الأولي فإذا كانت جملة الشرط تكافي القیمة
if فعندئذ يتم تنفیذ الأكواد بین أقواس جملة الشرط ، ( null الصفر أو اي قیمة نصیة غیر قیمة النص الفارغ أو القیمة
أو القیمة العددية صفر أو القیمة النصیة الفارغة ) سوف يتم تجاھل تنفیذ الأكواد ) false ، وإذا كانت تكافئ القیمة
ثم ينتقل ألي جملة الشرط التالیة ويفعل معھا مثل ما سبق فإذا كانت كل جمل الشرط if بین أقواس جملة الشرط
فإن وجدت فسوف يتم تنفیذ الأكواد المنحصرة بین أقواس الجملة else فسوف يتم البحث عن جملة false تؤول إلي
فلن يتم تنفیذ شئ. else وإن لم يجد جملة else
if( } ( جملة الشرط رقم ١
الأكواد //
else if( } ( جملة الشرط رقم ٢
الأكواد //
}else{
الأكواد //
}
جافا سكربت المستوي الأول
72
كما يلي : else أو بدون
if( } ( جملة الشرط رقم ١
الأكواد //
else if( } ( جملة الشرط رقم ٢
الأكواد //
}
مثال
var num = 48;
if( num >= 1 && num <= 10 ) { alert( " العدد num \n ;( "محصور بین ١ و ١٠ }else if( num > 10 && num <=20 ){ alert( " العدد num \n ;( "أكبر من ١٠ وأقل من أو تساوي ٢٠ }else if( num > 20 && num <=30 ){ alert( " العدد num \n ;( "أكبر من ٢٠ وأقل من أو تساوي ٣٠ }else{ alert( " العدد num \n ;( "أكبر من ٣٠ } ويكون الناتج كما يلي مثال else ھو نفس المثال السابق ولكن بدون جملة var num = 48; if( num >= 1 && num <= 10 ) { alert( " العدد num \n ;( "محصور بین ١ و ١٠ }else if( num > 10 && num <=20 ){ alert( " العدد num \n ;( "أكبر من ١٠ وأقل من أو تساوي ٢٠ }else if( num > 20 && num <=30 ){ alert( " العدد num \n ;( "أكبر من ٢٠ وأقل من أو تساوي ٣٠ } ويكون الناتج كما يلي لن يتم ظھور اي رسائل لعدم تحقق اي من الشروط السابقة . جافا سكربت المستوي الأول 73 تمرین للكشف عن كلمة السر





كما يلي : ok ويكون الناتج بعد إدخال كلمة السر بقیمة ١٢ ثم الضغط علي زرار
كما يلي : ok ويكون الناتج بعد إدخال كلمة السر بقیمة ١٢٣ ثم الضغط علي زرار
جافا سكربت المستوي الأول
74
حاول أن تركز في الأمثلة القادمة :
مثال
var num = 4;
if( ++num == 5 ) {
alert( " العدد num \n ;( "یساوي ٥
}
ويكون الناتج كما يلي
مثال
var num = 4;
if( num++ == 5 ) {
alert( " العدد num \n ;( "یساوي ٥
}else{
alert( "num = " + num );
}
ويكون الناتج كما يلي
جافا سكربت المستوي الأول
75
switch جملة الشرط
المزدوجة أو المركبة ، إذا ما دامت تؤدي نفس if مثل إستخدامنا لجملة الشرط switch تستخدم جملة الشرط
الشرطیة بدلا من switch فما الحاجة إلیھا ، نعم أنت علي حق لكننا نحتاج إلي جملة if وظیفة الجملة
لتسھیل شكل الكود . if ... else جملة
الصیغة العامة
switch( } ( المتغیر أو العملیة المراد مقارنتها
case " : "قیمة ١
الأكواد //
break;
case " : "قیمة ٢
الأكواد //
break;
case " : "قیمة ٣
الأكواد //
break;
default :
الأكواد //
}
كما يلي : default أو بدون
switch( } ( المتغیر أو العملیة المراد مقارنتها
case " : "قیمة ١
الأكواد //
break;
case " : "قیمة ٢
الأكواد //
break;
case " : "قیمة ٣
الأكواد //
break;
}
فإذا تساوت switch جملة ( cases) يتم مقارنة المتغیر أو العملیة المراد مقارنتھا بالقیم الموجودة بحالات
وتنفیذ الأكواد التي بداخلھا ، وإن لم يتم case إحداھما مع قیمة المتغیر المقارن يتم الدخول داخل ھذة الحالة
فإذا وجدت يتم الدخول default يتم البحث عن الحالة الخاصة switch تساوي القیمة المقارنة باي من حالات جملة
فیھا ثم تنفذ الأكواد الموجودة بھا .
ملاحظة :
. switch حتي تنھي جملة break يجب وضع الأمر fall through لتفادي حدوث عملیة السقوط أو ما يسمي بي
ولكن في بعض الأحیان نحتاج لعدم تلافي عملیة السقوط كما سنري بالأمثلة القادمة .
جافا سكربت المستوي الأول
76
مثال






ويكون الناتج كما يلي
جافا سكربت المستوي الأول
77
مثال






كما تلاحظ بالسطر ذو اللون الأحمر
بإحدي القیم ١ أو ٢ أو ٣ أو ٤ num يتم دخول ھذه الحالة إذا تساوت القیمة
switch( num ) {
case 1 , 2 , 3 , 4:
alert( " العدد num \n ;( "ربما یساوي ١ أو ٢ أو ٣ أو ٤
break;
ويكون الناتج كما يلي
لاحظ معي التالي :
أن ھذه الحالة تكافيء التالي :
switch( num ) {
case 1 :
case 2 :
case 3 :
case 4 :
alert( " العدد num \n ;( "ربما یساوي ١ أو ٢ أو ٣ أو ٤
break;
جافا سكربت المستوي الأول
78
كما بالمثال التالي






بل أردنا إحداث ھذا السقوط ، و إذا fall through لتفادي حدوث عملیة السقوط break وھنا لم نضع الجملة
بإحدي القیم ١ أو ٢ أو ٣ أو ٤ سوف يتم تنفیذ نفس قطعة الكود . num تصادف تساوي القیمة
، break تساوي القیمة ٢ ، سوف يتم السقوط إلي الحالة ٣ لأن الحالة ٢ لا يوجد بھا الأمر num فإذا كانت القیمة
ثم يتم ، switch الخاص بإنھاء تنفیذ جملة break ثم يحدث سقوط أخر إلي الحالة ٤ لأن الحالة ٣ لیس بھا الأمر
. بالحالة ٤ break نتیجة وجود الأمر switch تنفیذ الكود الموجود بالحالة ٤ ، ثم يتم إنھاء الجملة
جافا سكربت المستوي الأول
79
Iteration Statements جمل التكرار والحلقات
الھدف من جمل التكرار ھو تكرار مجموعة من الأكواد لعدد أو مدي معین من المرات .
ھب أنني طلبت منك أن تقوم بطباعة الجملة التالیة "أن محتاج لجمل التكرار" ثلاث مرات فسوف تقول لي ھذا
أمر سھل ، نعم سوف أصدقك ولكن ماذا لو زادت مرات التكرار إلي ١٠٠٠ مرة مثلا أو إلي عدد من المرات غیر محدد
يتوقف علي شرط ما كما سنري عند الحديث علي جمل التكرار علي حدا .
for جملة التكرار
ھو تكرار مجموعة من الأكواد لعدد معین من المرات . for الھدف من جملة التكرار
الصیغة العامة
for ( } ( إجراء زیادة أو نقص ; شرط التكرار ; كود البدایة
الأكواد //
}
مثال
يقوم بطباعة مجموع الأرقام من ١ إلي ٤






ويكون الناتج كما يلي
جافا سكربت المستوي الأول
80
يتم تنفیذ جملة البداية أول مرة فقط . for عند تنفیذ جملة
for( i=0; i<5 ; i++ ) { x += i; } . for يتم تنفیذ الأكواد بین أقواس الجملة true ثم يتم حساب جملة الشرط فإذا كانت تساوي for( i=0; i<5 ; i++ ) { x += i; } . for ثم يتم تنفیذ الأكواد بین أقواس الجملة for( i=0; i<5 ; i++ ) { x += i; } ثم يتم حساب جملة الزيادة أو النقص . for( i=0; i<5 ; i++ ) { x += i; } . for يتم تنفیذ الأكواد بین أقواس الجملة true ثم يتم حساب جملة الشرط فإذا كانت تساوي for( i=0; i<5 ; i++ ) { x += i; } فتنتھي ھذة الحلقة . false وھكذا حتي تساوي جملة الشرط مثال for مثل المثال السابق ولكن بعدم وضع جملة الشرط لجملة





ويكون الناتج كما بالمثال السابق
ولكن يوجد داخل كود جمل التكرار أحد جمل الشرط بھا كود يؤدي إلي إنھاء for لاحظ أنه لا توجد جملة شرط لجملة
. for دورة جملة
كما بالسطور التالیة
for( i=0; ; i++ ) {
x += i;
if( i == 4 ) break;
}
for in جملة
Arrays مثل المصفوفات objects تستخدم لعمل تكرار للمتغیرات من النوع الكائني
وسوف نتحدث عنھا في الجزء الثاني من ھذا الكتاب .
الصیغة العامة
for ( المتغیر in } (الكائن
الأكواد //
}
break جملة
do while وجمل while وجمل for تستخدم لإنھاء جمل التكرار مثل جمل
continue جملة
تستخدم للرجوع مرة أخري إلي جملة الشرط المحددة لعملیة التكرار ، وإلغاء تنفیذ الأكواد التالیة لھا كما بالمثال
التالي :
مثال
يقوم بطباعة مجموع الأرقام الفردية بین ١ و ١٠






ويكون الناتج كما يلي
while جملة التكرار
ھي تكرار مجموعة من الأكواد لعدد غیر محدد يتوقف علي جملة شرط ، بدون وجود while الھدف من جملة التكرار
قیمة إبتدائیة وبدون جملة للزيادة أو النقصان .
الصیغة العامة
while ( } ( شرط التكرار
الأكواد //
}
مثال
يقوم بطباعة الأرقام بین ١ و ٥






جافا سكربت المستوي الأول
83
ويكون الناتج كما يلي :
for وجملة التكرار while من المثال السابق لا نجد فرق بین جملة التكرار
عند التعرض إلي تنفیذ الكود بشكل متكرر حسب شرط غیر مرتبط while ولكن تظھر الحاجة إلي إستخدام جملة
بعملیة حسابیة تكرارية كما بالمثال التالي :
مثال
نقوم في ھذا المثال بالكشف عن كلمة السر
فلو أدخلت كلمة السر خطأ يتم إعادة إدخال كلمة السر حتي يتم إدخالھا بشكل صحیح






do … while جملة التكرار
ولكنھا تختلف في أن الكود الموجود بداخلھا يتم تنفیذه مرة واحدة ، while تتشابه مع وظیفة جملة التكرار
عند أول مقارنة ، false علي الأقل حتي ولو كانت جملة الشرط تساوي
لأنه يتم تنفیذ الكود أولا ثم يتم تنفیذ جملة الشرط .
الصیغة العامة
do{
الأكواد //
}while ( ;( شرط التكرار
مثال
نقوم في ھذا المثال بالكشف عن كلمة السر ، فلو أدخلت كلمة السر خطأ يتم إعادة إدخال كلمة السر وتتم ھذه
العملیة ٣ مرات متتالیة عند إدخال كلمة سر خاطئة .






جافا سكربت المستوي الأول
85
أمثلة عامة عن جمل التكرار
مثال
حساب المتوسط الحسابي للأعداد من ٢٠ إلي ٨٠






ويكون الناتج كما يلي :
مثال متقدم
نأخذ من المستخدم رقم بالنظام العشري ، ثم نحوله إلي النظام الثنائي مع عرض عدد البتات المكونة لھذا الرقم .






فعند إدخال الرقم ٥ يكون الناتج كما يلي
جافا سكربت المستوي الأول
87
الفصل السادس
الدوال أو الوظائف
سوف نناقش إن شاء الله في هذا الفصل النقاط التالیة :
تمھید ·
تعريف الدوال أو الوظائف ·
أنواع الدوال ·
الصیغة العامة للدوال ·
تعريف الدوال ·
طريقة إستدعاء الدوال ·
المتغیرات المحلیة والعامة ·
إسترجاع القیم من الدوال ·
تمرير المعاملات للدوال ·
Recursive Function إستدعاء الدالة لنفسھا ·
inner Function دالة داخل دالة ·
جافا سكربت المستوي الأول
88
تمھید
ربما كنا في الفصل السابق نحتاج إلي إستخدام جزء من الكود بشكل تكراري لذلك إحتجنا لجمل التكرار مثل جملة
ولكن لو كنا نريد إستخدام جزء من الكود بشكل دائما فسوف نلجأ إلي إستخدام ما يسمي بالدوال أو ، for
Functions الوظائف
لاحظ معي الحالة التالیة
var password = prompt(" ;(""," أدخل كلمة السر
if ( password == "123" ){
alert(" ;("مرحبا بك في موقعنا
document.write(" مرحبا بك في موقعنا
");
document.write(" ;("مدیر الموقع
}else if ( password == "111" ){
alert(" ;("مرحبا بك في موقعنا
document.write(" مرحبا بك في موقعنا
");
document.write(" ;("مشترك بالموقع
}else{
alert(" ;("كلمة السر خاطئة
}
لاحظ معي السطور التالیة
alert(" ;("مرحبا بك في موقعنا
document.write(" مرحبا بك في موقعنا
");
فقد تم تكرارھا مرتین ، فھب أننا سوف نستخدمھا أكثر من مرتین فما الحل
ھل نقوم بتكرار ھذة الجمل كلما إحتجنا لھا ، بالطبع ھذا لیس بحل يروق لك
وأنا معك أن ھذا الحل لا يروق لي أنا أيضا ،
لا تقلق الحل قد أتي بحمد الله فسوف نقوم بوضع ھذيین السطرين داخل بوطقة ( دالة أو وظیفة ) ، نستطیع تنفیذ
ما بھا من الأكواد وقتما أردنا .
وتكون علي الشكل التالي
function displayMessage() {
alert(" ;("مرحبا بك في موقعنا
document.write(" مرحبا بك في موقعنا
");
}
ولیس ھناك اي داعي لمحاولة فھم ما كتب الأن ، ولكن تابع معي أول إنطلاقة حقیقیة إلي عالم البرمجة
مع الحديث عن الدوال أو الوظائف .
جافا سكربت المستوي الأول
89
تعريف الدوال أو الوظائف
والوظائف ھي مجموعة من الجمل يطلق علیھا إسم ويشار إلیھا به وتنفذ كوحدة واحدة .
أنواع الدوال
يوجد نوعین من الدوال
built-in functions - الدوال المبنیة داخل لغة الجافا سكربت
و يمكننا ، parseInt ھذه المجموعة من الدوال تم بنائھا داخل لغة الجافا سكربت مثل دالة
أستخدامھا كأي دالة قمنا بتعريفھا كما سنري فیما بعد .
- الدوال المبنیة من خلال مبرمجي الجافا سكربت
وھذا ھو النوع من الدوال الذي سوف نتحدث عنه في ھذا الفصل بشكل مفصل .
الصیغة العامة للدوال
function } ( معاملات الدالة ) إسم الدالة
الأكواد المراد تنفیذها //
ربما تقوم الدالة بإرجاع قیمة //
return ; القیمة الراجعة
}
ثم يلیھا اسم الدالة و تخضع لنفس شروط تسمیة المتغیرات ، بالإضافة إلي أنھا لا function ١- أولا نبدأ بكتابة كلمة
.built-in function يجب أن تأخذ اي اسم لدالة مبنیة داخل لغة الجافا سكربت
٢- ثم يتم تمرير معاملات لھا أو ربما لا يتم تمرير معاملات لھا كما سوف نري لاحقا .
٣- ثم يتم كتابة الأكواد المراد تنفیذھا بین أقواس المجموعة الخاصة بالدالة .
٤- بعدھا ربما تقوم ھذة الدالة بإرجاع قیمة أو لا ترجع اي قیم كما سوف نري لاحقا .
تعريف الدوال
دعنا بعدما علمنا الصیغة العامة للدوال ، أن نقوم بكتابة احدي الدوال البسیطة وظیفتھا عمل التالي
أخذ اسم المستخدم ، ثم إظھار رسالة ترحیب له .
جافا سكربت المستوي الأول
90
ھذه الدالة لا تأخذ معاملات ولا تقوم بإرجاع اي قیم كما يلي showMessage لذلك سنقوم بعمل دالة باسم
function showMessage () {
var userName = prompt(" ;("","أدخل اسمك من فضلك
alert(" : مرحبا بك " + userName );
}
نعم لقد تمكنا من بناء ھذه الدالة إستنادا علي ما تعلمناه للصیغة العامة للدوال
ولكن كیف يمكننا تنفیذ ما بداخلھا من أكواد ؟
للإجابة علي ھذا السؤال أتبعني في الفقرة التالیة
طريقة إستدعاء الدوال
نعني بإستدعاء الدالة اي تنفیذ ما بداخلھا من أكواد ، ويمكننا إستدعاء الدوال بعدة أشكال أحدھما :
- إستدعاء دالة من خارج اي دالة
- إستدعاء دالة من داخل دالة
Recursive function - إستدعاء دالة لنفسھا
وھذا النوع من الدوال أكثر صعوبة ، سیتم نقاشه في أخر ھذا الفصل
أن نقوم بإستخدامھا showMessage دعنا بعدما قمنا بتعريف الدالة
كما بالمثال التالي
مثال






جافا سكربت المستوي الأول
91
ويكون الناتج كالتالي
وبعد إدخال الاسم بالقیمة محمد يكون الناتج كالتالي
جمیل جدا لقد تم تنفیذ أكواد ھذا الدالة بمجرد كتابة اسمھا متبوعا بأقواس كما بالسطر التالي
نقوم بإستدعاء الدالة // showMessage
showMessage();
لاحظ ما ھو أت
ربما نحتاج في بعض الأحیان لعمل أكثر من دالة ، وربما نحتاج لتنفیذ أحدي الدوال من داخل دالة أخري
كما بالمثال التالي
مثال






ويكون الناتج كما بالمثال السابق
لاحظ معي السطور التالیة
showMessage من داخل الدالة getName لقد تم إستدعاء الدالة
تعریف الدالة // showMessage
function showMessage () {
نقوم بإستدعاء الدالة // getName
من داخل الدالة // showMessage
getName();
alert(" : مرحبا بك " + userName );
}
تعریف الدالة // getName
function getName () {
userName = prompt(" ;("","أدخل اسمك من فضلك
}
لاحظ أيضا التالي
وتم عرض قیمته من داخل الدالة ، getName من داخل الدالة userName لقد تم تغیر قیمة المتغیر
كما يلي showMessage
var userName;
تعریف الدالة // showMessage
function showMessage () {
نقوم بإستدعاء الدالة // getName
من داخل الدالة // showMessage
getName();
alert(" : مرحبا بك " + userName );
}
تعریف الدالة // getName
function getName () {
جافا سكربت المستوي الأول
93
userName = prompt(" ;("","أدخل اسمك من فضلك
}
نقوم بإستدعاء الدالة // showMessage
showMessage();
وھذا يقودنا إلي كیفیة تعامل الدوال مع المتغیرات ، ولإكتشاف ھذا دعنا ننتقل للفقرة التالیة .
المتغیرات المحلیة و العامة
Local variables المتغیرات المحلیة
إذا تم تعريف المتغیر داخل دالة ، فلن تستطیع عرض أو تعديل قیمة ھذا المتغیر إلا من داخل ھذة الدالة المعرف بھا
Local ولا يمكنك عرض أو تعديل محتويات ھذا المتغیر من داخل دالة أخري ، ويسمي ھذا المتغیر بمتغیر محلي
كما بالمثال التالي variable
مثال
تعریف الدالة // getJob
function getJob () {
var userJob = prompt(" ;("","أدخل اسمك من فضلك
}
تعریف الدالة // showJob
function showJob () {
alert( " قیمة المتغیر userJob = " + userJob );
}
لذلك يعتبر ھذا المتغیر ، getJob تم تعريفه داخل الدالة userJob كما بالمثال السابق نجد أن المتغیر المسمي
من خارج ھذه الدالة أو من داخل دالة userJob ولا يمكن التعامل مع المتغیر getJob متغیر محلي بالنسبة للدالة
خارجیة أخري.
سیؤدي ذلك لحدوث خطأ كما بالسطر التالي showJob من داخل الدالة userJob ولو قمنا بعرض قیمة المتغیر
alert( " قیمة المتغیر userJob = " + userJob );
جافا سكربت المستوي الأول
94
ملاحظة ھامة
يمكنك إستخدام نفس اسم المتغیر في أكثر من دالة بشرط أن يتم تعريفه داخل كل دالة علي حدي ، وسوف يتم
التعامل مع كل متغیر علي حدي داخل الدالة المعرف بھا كما بالمثال التالي
مثال






لكن يتم ، func و الدالة 2 func تم تعريفه داخل الدالة 1 userName كما بالمثال السابق نجد أن المتغیر المسمي
التعامل مع ھذا المتغیر علي أساس أنھم متغیرين كلا حسب مكان تعريفه داخل الدالة .
جافا سكربت المستوي الأول
95
ويكون الناتج كما يلي
جافا سكربت المستوي الأول
96
Global variables المتغیرات العامة
إذا تم تعريف المتغیر خارج نطاق اي دالة اي علي مستوي الأسكربت العام ، بھذا تستطیع عرض أو تعديل قیمة ھذا
كما بالمثال التالي Global variable المتغیر من داخل أي دالة أو من خارجھما ، ويسمي ھذا المتغیر بمتغیر عام
مثال
var userName;
تعریف الدالة // showMessage
function showMessage () {
نقوم بإستدعاء الدالة // getName
من داخل الدالة // showMessage
getName();
alert(" : مرحبا بك " + userName );
}
تعریف الدالة // getName
function getName () {
userName = prompt(" ;("","أدخل اسمك من فضلك
}
نقوم بإستدعاء الدالة // showMessage
showMessage();
تم تعريفه في الكود خارج نطاق اي دالة ، وقد تم تغیر userName كما بالمثال السابق نجد أن المتغیر المسمي
showMessage وتم عرض قیمته من داخل الدالة ، getName من داخل الدالة userName قیمة المتغیر
جافا سكربت المستوي الأول
97
إسترجاع القیم من الدوال
. return يمكن للدوال في الجافا سكربت إرجاع قیم للجملة التي قامت بإستدعائھا ، بإستخدام الكلمة المحجوزة
. return يتم وضع القیمة الراجعة من الدالة بعد الكلمة
القیمة الراجعة من الدالة يمكن تخزينھا في متغیر أو تكون وسط جملة حسابیه كما بالمثال التالي
مثال






دعنا ندرس ھذا المثال خطوة بخطوة
getGuestName أولا قمنا بإستدعاء الدالة
returnName وبما أن ھذه الدالة تقوم بإرجاع قیمة ، فسوف يتم تخزين القیمة الراجعة من الدالة في المتغیر
كما بالسطر التالي
var returnName = getGuestName();
فعند إستدعاء الدالة يتم تنفیذ الأكود التالیة
var userName = prompt(" ;("","أدخل اسمك من فضلك
return userName;
userName ويتم تخزين القیمة الراجعة منه في المتغیر المسمي prompt وكما نري يتم تنفیذ الأمر
ثم يتم إنھاء الدالة والخروج منھا بتنفیذ الأمر التالي
return userName;
بعمل شیئین أولھما إرجاع القیمة التالیة له ، ثم إنھاء تنفیذ الدالة . return ويقوم الأمر
جافا سكربت المستوي الأول
98
بالإنتقال إلي مكان إستدعاء الدالة كما بالسطر التالي interpreter بعد إنتھاء تنفیذ الدالة ، يقوم مفسر اللغة
var returnName = getGuestName();
. returnName في المتغیر getGuestName ثم يتم تخزين القیمة الراجعة من الدالة
ملاحظة
يتم إرجاع return لا يتم تنفیذه ، لأننا كما أشرنا إلي أن بمجرد تنفیذ الأمر return لاحظ أن اي أمر يكتب بعد الأمر
القیمة التالیة له ، ثم إنھاء الدالة
مثال






كما ھو موضح return فعند تشغیل ھذا الكود لن تظھر رسالة إلي اللقاء لأنھا أتت بعد الأمر
تعریف الدالة // getGuestName
function getGuestName () {
var userName = prompt(" ;("","أدخل اسمك من فضلك
return userName;
alert(" ;("إلي اللقاء
}
جافا سكربت المستوي الأول
99
تمرير المعاملات للدوال
معاملات الدالة :
ھي قیم يتم تمريرھا إلي الدالة من خارجھا ، يتم إستخدامھا داخل الدالة
ثم تمسح من ذاكرة البرنامج بمجرد إنتھاء عمل الدالة
طريقة تمرير المعاملات للدوال :
إلي الدوال بعدة طرق Arguments يتم تمرير المعاملات
- معامل واحد أو أكثر
Optional argument - معاملات إختیاريه
- لا يتم عمل اي معاملات للداله ولكن يتم تمرير معاملات للداله بعدد غیر محدد
اي يمكنك تمرير اي عدد من القیم .
دوال ذات معامل أو أكثر
مثال






يتم تمرير المعاملات للدالة بین أقواس الدالة كما يلي
تعریف الدالة // setGuestName
function setGuestName ( name ) {
ثم يتم إستخدام ھذا المعامل علي انه متغیر معرف داخل الدالة كما ھم مبین بالسطر التالي
function setGuestName ( name ) {
GuestName = name;
جافا سكربت المستوي الأول
100
ثم يتم إستدعاء الدالة كما يلي
setGuestName( " ;( "الحسین
مثال
نريد عمل دالة يتم تمرير معاملین لھا ثم تقوم بإرجاع القیمة الأكبر للقیمتین






قمنا بتمرير معاملین كما يلي getMax في الدالة
تعریف الدالة // getMax
function getMax ( num1 , num2 ) {
ثم تقوم بإرجاع القیمة الأكبر للعددين الممرران لھا كما يلي
تعریف الدالة // getMax
function getMax ( num1 , num2 ) {
return ( num1 > num2 )? num1 : num2 ;
}
ثم يتم إستدعاء الدالة كما يلي
alert( getMax(21,34) );
جافا سكربت المستوي الأول
101
Optional Arguments المعاملات الإختیارية
optional argument نريد عمل دالة يتم تمرير معاملین لھا ، ولكن المعامل الثاني يكون معامل إختیاري
وظیفة ھذه الدالة طباعة النص الممرر لھا ، بحیث يكون المعامل الأول عبارة عن محتوي النص المراد طباعة ، أما
المعامل الثاني يكون إختیار لإظھار رسالة ترحیب أم لا .
مثال






معامل إختیاري dispalyHelloMessage قمنا بتمرير معاملین المعامل الثاني displayMessage في الدالة
اي ربما لا يمرر للدالة عند إستدعائھا كما يلي
تعریف الدالة // displayMessage
function displayMessage ( messageText , dispalyHelloMessage ) {
true مرتین أحدھما تم تمرير المعامل الثاني لھا بقیمة dispalyHelloMessage تم إستدعاء الدالة
والأخر لم يمرر لھا إلا المعامل الأول فقط كما يلي
displayMessage( " رسالة مرسلة " , true );
displayMessage( " ;( "رسالة مرسلة
//-->

جافا سكربت المستوي الأول
102
تمرير عدد غیر محدد من المعاملات إلي الدالة
فیھا لا يتم عمل اي معاملات للداله ولكن يتم تمرير معاملات للداله بعدد غیر محدد
اي يمكنك تمرير اي عدد من القیم .
مثال
نريد عمل دالة يمرر لھا اي عدد من المعاملات ثم تقوم بإرجاع القیمة الأكبر لھذه القیم






وھذا المثال أقدمه لكم الأن بدون شرح حتي نتناول التعامل مع المصفوفات في الجزء الثالي من الكتاب
جافا سكربت المستوي الأول
103
Recursive Function إستدعاء الدالة لنفسھا
كما أشرنا سابقا أننا يمكننا إستدعاء دالة من داخل دالة أخري وقمنا بتطبیق أمثلة لذلك الغرض
ولكن ھل يمكن لدالة أن تستدعي نفسھا من داخلھا ؟
أجیب بنعم ، ولكن بشرط وضع شرط ينھي إستدعاء الدالة لنفسھا وإلا سوف يدخل البرنامج في حلقة من الدورات
infinite loop غیر منتھیه
لقیمة المعامل الممرر لھا Factorial مثال علي ذلك عمل دالة رياضیة تقوم بحساب المضروب الرياضي
يتم حساب المضروب الرياضي بالشكل التالي
١ x ٢ x مضروب ٣ يساوي ٣
١ x ٢ x ٣ x و مضروب ٤ يساوي ٤
١ x ٢ x ٣ x ٤ x و مضروب ٥ يساوي ٥
مثال






ويكون الناتج كما يلي
جافا سكربت المستوي الأول
104
inner Function دالة داخل دالة
يمكننا تعريف دالة داخل دالة كما يلي
تعریف الدالة // superFunction
function superFunction ( number ) {
تعریف الدالة // innerFunction
دالة داخلبة //
function innerFunction ( number ) {
}
return " ;"إلي اللقاء مع الجزء الثاني
}
وھذا النوع المتقدم من الدوال سوف يتم شرحه في الجزء الثالث من ھذا الكتاب الخاص بالبرمجة الكائنیة للجافا
سكربت .