شرح لغة جافاسكربت للمبتدئين · .debugging ﻰﻠﻋ ﻦﻜﻤﳌﺍ...

بسم اهللا الرحمن الرحيم

:املحتوياتالعنوانالصفحة

املقدمة2تقييم املعادالت واملقارنات: من أساسيات البرمجة4

or , and , not: من أساسيات البرمجة10Variables املتغيرات13if...else , while , for: من أساسيات البرمجة16HTML جافاسكربت و22بعض األوامر الشائعة2323document.write()

24window.prompt()

26window.alert()

26window.confirm()

27Math.round()

كتابة التعليقات واملالحظات29تصنيف البيض لعدة مقاسات بحسب الوزن: 1 البرنامج رقم31لعبة التخمني: 2 البرنامج رقم37إيجاد القاسم املشترك األكبر بني رقمني: 3 البرنامج رقم4043String methodsArrays املصفوفات48Functions الدوال52دالة لتقريب األرقام إلى خانتني عشرية: 4 البرنامج رقم52دالة حلساب املساحة باملتر املربع: 5 البرنامج رقم55حساب متوسط التكاليف الشهرية: 6 البرنامج رقم5865HTML Graphical User Interfaceالتحويل من لتر إلى جالون: 7 البرنامج رقم67البحث عن رمز االتصال الدولي لدول العالم: 8 البرنامج رقم72

http://aoum150.wordpress.com 73 من1الصفحة املعتصم :إعداد

- : املقدمة1في البداية يجب أن تعلم عزيزي القارئ بأني مبتدئ في عالم البرمجة ولست أستاذا أو خبيرا في هذه اللغة ، و لذلك ورود

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

، فإذا لم تكن لديك خلفية عنها ، أنصحكHTML لغة اجلافاسكربت تتطلب فهم ومعرفة اللغة األساسية لصفحات االنترنت وهي واملوجود في هذا الرابط:HTML بعدم إكمال قراءة هذا امللف والتوجه إلى شرح لغة الـ

http://aoum150.wordpress.com/2009/07/05/html_lesson

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

بعدم نسخ أي كود موجود في هذا الكتيب ، وإمنا قم بكتابته بنفسك حرفا حرفا حتى تخطئ وتتعلم من خطئك.

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

صفحة االنترنت تفاعلية ، مبعنى أنها تصبح تتجاوب مع أفعال وتصرفات املستخدم املختلفة.

لغة جافاسكربت تختلف كليا عن لغة اجلافا وال توجد عالقة بينهم ، ولكن أحيانا يتم استخدام كال اللغتني في بعض تطبيقات.وبرامج االنترنت

، إذا لم نتبع هذه القوانني بشكل صحيح وصارم فإن احتمال عدمsyntax كل لغة برمجة لها قوانني وقواعد لكتابتها تسمىعمل البرنامج ، أو عمله بغير الشكل الذي نريده ونتوقعه أمر وارد بشكل كبير ، لذلك معرفة قوانني وقواعد كتابة اللغة من أهم

األساسيات التي يتعلمها املبرمج في لغات البرمجة.

– –لغة اجلافاسكربت وإن لم يخب ظني جميع لغات البرمجة املشهورة تكون حساسة بالنسبة لألحرف الكبيرة والصغيرة ،

كأنها أربع كلمات مختلفة ، فيجب التنبه لذلك.if – IF – If - iF مبعنى أنها ستعامل الكلمات

األخطاء في أي عمل ، وفي البرمجة بشكل خاص واردة بشكل كبير ، فمن لم يخطئ ومن يخاف من اخلطأ لن يتعلم ، فال يوجد. ولكن في نفسمبرمج لم يتعرض ألخطاء أثناء البرمجة ، بل إن من أجزاء تعليم البرمجة هو تعليم تصحيح األخطاء واكتشافها

الوقت من ال يستفيد ويتعلم من أخطائه لن ينجح ، فاملبرمج الناجح هو الذي يتعلم من أخطائه ويتجاوزها بسرعة ، وكثرة ، وعملية تصحيحها واكتشافها تسمىbugs التجارب والتطبيق هي املفتاح لهذا الشيء. و األخطاء في عالم البرمجة تسمى


debugging.

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

في جميع لغات البرمجة ، يتم تنفيذ األوامر بالترتيب ، مبعنى أن الكمبيوتر سيبدأ بتنفيذ األمر املوجود في السطر األول ، ثم... وهكذا حتى ينتهي من تنفيذ األمر املوجود في آخر سطر في البرنامج ، ثم سينتهي. السطر الثاني


- من أساسيات البرمجة: تقييم املعادالت واملقارنات2تقييم املعادالت أو املقارنات هو من مهام الكمبيوتر والبرامج الرئيسية ، فمن خاللها يتم عمل البرامج الصغيرة والكبيرة ، على

سنة تستعمل هذه املقارنة ، فنجدها تطلب18 سبيل املثال بعض املواقع التي التسمح بزيارة األشخاص الذين تقل أعمارهم عن ، سيتم18 ، فإذا كان العمر املدخل أكبر من18 من الزوار كتابة تاريخ ميالدهم مثال ، ثم تعمل مقارنة بني العمر املدخل ورقم

نقلهم إلى صفحة املوقع الرئيسية وإذا كان العمر أقل سيتم نقلهم إلى صفحة أخرى حتتوي على رسالة إعتذار على سبيل املثال.هذه العملية تتم بشكل آلي عن طريق البرنامج ، فبمجرد أن أدخلنا إليه بعض البيانات أصبح يستطيع أن يقارن و يقيم ثم ينفذ

النتيجة املناسبة لكل معادلة أو مقارنة.

. فعندما نعملUnicode أوASCII code في الكمبيوتر ، كل حرف أو رمز يكون له قيمة رقمية خاصة تابعة للترميز العامليمقارنات بني أحرف أو رموز أو بني أحرف وأرقام مثال ، فإن الكمبيوتر في الواقع يعمل مقارنة بني قيمة هذه األحرف أو الرموز

وليس باحلرف أو الرمز نفسه.ASCII في ترميزالفرق بني ترميز آسكي ويونيكود هو أن الثاني يحتوي على حروف وأشكال للغات أكثر بكثير من األول ، فاليونيكود يحتوي على

فقط!128 مابني أرقام وحروف ورموز مختلفة لعشرات اللغات ومن ضمنها العربية ، بينما يحتوي ترميز آسكي على65536مابني أحرف وأرقام ورموز.

.قيمة أي حرف أو رمز في الترميزين هي نفسها ، لذلك ال داعي للتساؤل عن قيمة حرف أو رمز ما في كال النوعني

القيم في ترميز آسكي متسلسلة بشكل ثابت مع تسلسل األحرف واألرقام والرموز ، وبشكل عام نتائج التقييم في هذا الترميز:ستكون كالتالي

. < 0 < 1 < 2 < ... < 9 < A < B < ... < Z < a < b < ... < z

:آلية تقييم العمليات احلسابية في الكمبيوتر:العمليات احلسابية في أجهزة احلاسب يتم تنفيذها حسب قوانني معينة تسمى أولويات التنفيذ على النحو التالي

: تنفيذ مابني األقواس.أوال: تنفيذ عمليات الضرب والقسمة.ثانيا: تنفيد عمليات اجلمع والطرح.ثالثا

في حالة تشابه العمليات سيتم التنفيذ ابتداء من اليسار ثم سيتجه لليمني حتى ينتهي.

(اجلافاسكربت ليست من ضمنها) سيتم تقييم املعادالت من اليسار لليمني بغض النظر عن نوع في بعض لغات البرمجةالعمليات املوجودة.


:مثال2 - 5 +3 * 6 / (2 +1)

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

سنبحث عن األقواس إن وجدت ونقوم بتنفيذها:: أوال2 – 5 + 3 * 6 / 3

سنبحث عن عمليات الضرب والقسمة وننفذها ابتداء من اليسار ثم ننتقل لليمني حتى ننتهي:: ثانيا2 – 5 + 18 / 3

2 – 5 + 6

سنبحث عن عمليات اجلمع والطرح وننفذها من اليسار لليمني:: ثالثا-3 + 6

3

.. طيب مبا أننا عرفنا اآلن آلية تقييم املعادالت سننتقل ملرحلة املقارنات

:نتائج املقارنات دائما إما أن تكون املقارنة صحيحة أو خاطئة اليوجد خيار ثالث، سأقسم املقارنات إلى ثالثة أقسام

- مقارنة أرقام بأرقام:1.مقارنة األرقام هي األسهل، وهي تعتمد على أولويات تنفيذ العمليات احلسابية التي شرحتها قبل قليل

قيم العبارة التالية::مثال15 – (3 + 3) * 2 < 3 * 3 + 1

:سنحلل كل طرف ثم نقيم الناجت النهائي للطرفني هل هو صحيح أم خاطئ15 – (3 + 3) * 2 < 3 * 3 + 1

15 – 6 * 2 < 9 + 1

15 – 12 < 10

3 < 10

!10 أصغر من3 العبارة صحيحة ألن

- مقارنة أحرف بأحرف:2 ، لذلك عندما نعمل مقارنة أرقام معASCII كما ذكرت سابقا ، الكمبيوتر يتعامل مع األحرف والرموز بقيمتها التابعة لترميز

أحرف سيتم مقارنة قيمهم التابعة لهذا الترميز ، وكما ذكرت في املقدمة ، قاعدة هذا الترميز هي كالتالي:

. < 0 < 1 < 2 < ... < 9 < A < B < ... < Z < a < b < ... < z


وعلى أساسها بإمكاننا عمل أي مقارنة ، سواء كانت بني أحرف أو بني أحرف وأرقام أو بني أرقام ورموز وغيره ، ولكن يجب' ' حتى تنطبق عليها القاعدة التي في األعلى. التنبه بأن األرقام التي أحتدث عنها يجب أن توضع بني العالمتني

وفي مقارنة الكلمات سيتم عمل املقارنة على أول حرف في الطرفني، وإن كانا متشابهني سيتم مقارنة احلرفني التاليني لهما وهكذا.حتى يستطيع احلصول على نتيجة

قيم العبارة التالية::مثال'elephant' < 'mouse'

..m وe املقارنة ستتم بني احلرفني

! ، لذلك العبارة صحيحةm أقل من قيمةe وفي ترميز آسكي ، قيمة

:طيب لو غيرنا أول حرف من إحدى الكلمات وجعلناه كبيرا'elephant' < 'Mouse'

..M وe املقارنة ستكون بني

الصغير.e الكبير قيمته أكبر من قيمة حرفM النتيجة هنا خاطئة ، ألن حرف

:لو كان أول حرفني في الطرفني متشابهني ، ستتم املقارنة بني احلرفني الذين بعدهم ، مثال'cat' < 'cave'

..v وt هنا احلرفني األولني في الكلمتني متشابهني ، لذلك ستتم املقارنة بني

!v أصغر منt والعبارة صحيحة ألن

آخر ، وسيتم توضيحهاstring وstring التي حتيط بالكلمات ، تدل على أن املقارنة بني' أحب التنويه هنا بأن العالمة.Variables الحقا في قسم املتغيرات

- مقارنة أرقام بأحرف أو العكس:3:تعتمد على نفس املبدأ والقاعدة، مثال

'7' < 'a'

.a أقل من قيمة احلرف7 النتيجة صحيحة ، ألن قيمة الرقم

:مثال آخر7 == '7'

في طرف وفي7 أحب أذكركم هنا بأن الكمبيوتر يتعامل مع قيم األرقام واألحرف وليس بشكلها ، واآلن في هذا املثال يوجد رقم ألنها بني قوسني.string على شكل7 الطرف الثاني

.وفي كال احلالتني ، سيقوم الكمبيوتر بتحويل الطرفني إلى قيمتهم الفعلية ثم سيقارن بني القيم ، لذلك املقارنة صحيحة هنا


:نقطة أخيرة بخصوص مقارنة األرقام واألحرف، املقارنات التالية7 < 'a'

7 > 'a'

7 == 'a'

! كلها خاطئة

بصراحة ال أعلم مالسبب بالضبط ، ولكني جربتها شخصيا وظهرت لي نتائجها كلها خطأ ، أعتقد واهللا أعلم بأن السبب هو أنه مع أننا قمنا بذلك في املثال األخير ، ولكن يبدو أنه كان حالة استثنائية ألن الطرفني يحتوون علىstring ال ميكننا مقارنة رقم بـ

' . سنجد النتيجة صحيحة هذه مجرد توقعاتي الشخصية وهي قابلة للخطأ أكثر من9 < '7 أرقام ، ألننا لو جربنا املقارنة التالية

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

أحب أن أذكر هنا بأن عالمة أكبر من أو يساوي في لغات البرمجة تكتب عالمة يساوي في اليمني وعلى يسارها أكبر من متصلني نكتبها على الشكل التالي في البرنامج:2 أكبر من أو يساوي3 ببعض، مثال لو أردنا كتابة

3 >= 2

:3 أكبر من أو تساوي5 ولو أردنا كتابة5 >= 3

نكتبها على الشكل التالي:5 تساوي5 واذا أردنا كتابة5 == 5

.عالمتني يساوي وليست واحدة

نكتبها على الشكل التالي:4 التساوي5 وإذا أردنا كتابة5 != 4

.عالمة التعجب تفيد النفي ، أي أنه اليساوي

:وللتلخيص هذا جدول إلشارات املقارنة مع معانيها

إشارة املقارنة معناها مثال النتيجة< أصغر من 6 < 5 خطأ<= أصغر من أو يساوي 2 <= 2 صح> أكبر من 3 > 1 صح>= أكبر من أو يساوي 3 >= 4 خطأ== يساوي 1 == 1 صح!= ال يساوي 1 != 1 خطأ


:x = 10 وy = 5 وفي اجلدول التالي توضيح إلشارات العمليات احلسابية بافتراض أن

اإلشارة معناها 1 مثال مثال 2* ضرب x * y = 50 y * x = 50

/ قسمة x / y = 2 y / x = 0.5

+ جمع x + y = 15 y + x = 15

- طرح x – y = 5 y – x = -5

% باقي القسمة x % y = 0 y % x = 5

% فهي غير مشروحة في املنهج ولكنها مهمة جدا في عالم البرمجة، ولألسف جاءت لنا في االختبار بالنسبة إلشارة باقي القسمةالنهائي ، ولذلك سأشرحها احتياطا.

.. سأستخدم األمثلة مباشرة لتوضيحها وشرحها

21 % 7 = ?

.. هي تعتمد على القسمة أوال

3 والنتيجة رقم7 على21 يعني نقسم

0 لذلك اليوجد باقي للقسمة فتكون نتيجتها21%7 = 0

20 % 3 = ?

6.67 والنتيجة3 على20 هنا نقسم

فقط6 لكن هنا النريد عددا غير صحيح ، لذلك سنأخذ الرقم18 تساوي6 ضرب3

2 يساوي3 على20 معناها باقي قسمة20%3 = 2

10%3 = ?

3.33 .. النتيجة ستكون3 على10 نفس الشي نقسم

وستكون هي باقي القسمة10 ، وبعدها نحسب الفرق بني النتيجة وبني رقم3 بدون الكسر ونضربها في3 نأخذ10) - 3*3: (يعني باقي القسمة ستكون

10%3 = 1

..لو كانت قسمة الرقمني على بعض عدد صحيح ستكون نتيجة باقي القسمة صفر20%5 = ?

بدون كسور وأرقام عشرية. لذلك لن يكون هناك باقي للقسمة.4 ، والنتيجة ستكون5 على20 نقسم


20%5 = 0

:مثال أخير12%7 = ?

، ونحسب الفرق بني النتيجة وبني رقم7 ونترك الكسر ، ثم نضربه في1 .. تقريبا نأخذ1.71 والنتيجة هي7 على12 نقسم .. : لذلك5 . الفرق هو12

12 % 7 = 5


:or , and , not- من أساسيات البرمجة:3.هذه العبارات تستخدم لربط عدة مقارنات مع بعض وهي مفيدة جدا وأعتقد بأنه اليوجد برنامج يخلو منها

1 -or: || في البرمجة على شكل ، والزر اخلاص بهذا الرمز موجود في لوحة املفاتيح على يسار زر اإلدخال (إنتر) ويجبor تكتب

.shift الضغط في نفس الوقت على زر

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

:A , B في اجلدول التالي توضيح أكثر ، بافتراض وجود مقارنتني ، وسنرمز لهم بـ

A B A || B

True True TrueTrue False TrueFalse True TrueFalse False False

: إذا كانت املقارنة األولى صحيحة أو املقارنة الثانية صحيحة فالنتيجة النهائية صحيحة.معنا السطر األول كالتالي: إذا كانت املقارنة األولى صحيحة أو املقارنة الثانية خاطئة فالنتيجة النهائية صحيحة.معنا السطر الثاني كالتالي

.. وهكذا لبقية األسطر

2 -and: && على شكل ، وهي تربط بني أكثر من معادلة أو مقارنة ، ونتيجتها ال تكون صحيحة ، إال إذا كانت جميعand تكتب

– –املقارنات التي تربط بينها صحيحة. وللتوضيح أكثر انظر للجدول التالي:

A B A && B

True True TrueTrue False FalseFalse True FalseFalse False False

: إذا كانت املقارنة األولى صحيحة و املقارنة الثانية صحيحة فالنتيجة النهائية صحيحة.معنى السطر األول


: إذا كانت املقارنة األولى صحيحة و واملقارنة الثانية خاطئة فالنتيجة النهائية خاطئة.معنى السطر الثاني... الخ

3 -not: ! وتفيد بعكس نتيجة املقارنة ، أي أنه إذا كانت نتيجة املقارنة صحيحة فاألمر هذا تكتب في البرمجة على شكل عالمة تعجب

يعكس النتيجة إلى خاطئة ، كما في اجلدول:A !(A)

True FalseFalse True

:or || , ! not , && and: في اجلدول التالي ، تطبيق جلميع األوامر

A B A || B A && B ! (A) ! (A || B) ! (A && B)

True True True True False False FalseTrue False True False False False TrueFalse True True False True False TrueFalse False False False True True True

:مثال

أن:Truth tables سؤال أتى لنا في االختبار النهائي ، يقول أثبت عن طريق جداول

NOT (A AND B) = NOT A OR NOT B

:أو ممكن تكتب بالشكل التالي

! (A && B) = !A || !B

.طريقة احلل بسيطة ان شاء اهللا اذا كنا فاهمني طريقة عمل كل أمر


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

A BTrue TrueTrue FalseFalse TrueFalse False

.الذي عملته هنا ثابت حلل أي مسألة من هذا النوع ، حتى نشمل جميع االحتماالت للمعادالت

.. طيب اآلن نرجع للمعادلة التي في السؤال ، ونحلل كل جزء فيها

: .. حتى نصل له البد من إيجاد أجزائه الصغيرة أوالاجلزء األيسر! (A && B)

، لذلك سنضيف عمودين على اجلدول ، كل عمود)!A&&B( حتى نستطيع حساب نتائجA&&B أول شيء الزم نحسب نتائجخاص بواحدة ، وسنضع النتائج في صفوفها كما تعلمنا:

A B A && B ! (A && B)True True True FalseTrue False False TrueFalse True False TrueFalse False False True

.. كذا نكون انتهينا من اجلزء األيسر، فننتقل للجزء األمين ونحلله بنفس الطريقة!A || !B

.. !A||!B حتى نستطيع حساب نتائج!B و!A أول شيء ، الزم نحسب نتائج

! :A || !B! وعمود لـB! و عمود لـA فاآلن سنقوم بإضافة ثالثة أعمدة للجدول ، عمود لـ

A B A && B ! (A && B) !A !B !A || !BTrue True True False False False FalseTrue False False True False True TrueFalse True False True True False TrueFalse False False True True True True

.وبهذا نكون أثبتنا أن الطرفني يتساوون في جميع احلاالت ، وهذا اجلدول هو احلل للسؤال

:قاعدة داخل أقواس مثل|| أو&& . لكن إذا كانت!A || !B ، مثل اجلزء األمين في املثال|| أو&& قبل! دائما يتم تنفيذ

، نقوم بتنفيذ مابداخل القوس أوال.)!A && B( اجلزء األيسر في املثال


:Variables املتغيرات- 4 وله نوع معني (يحددهما املبرمج) ، هذا املتغير يرتبط بقيمة معينة مخزنة في ذاكرة احلاسب ، هذهاملتغير هو معرف له اسم

املتغيرات ميكن أن تكون قيمتها املوجودة في الذاكرة عبارة عن أرقام أو كلمات أو جمل ، فمن املمكن أن تكون مثال تكاليفمالية ، أو أسماء طالب ، أو درجات طالب ، أو أرقام هواتف ، أو عناوين ، أو أي شيء آخر ممكن أن يفيدنا في حتقيق الهدف

من البرنامج. وسميت متغيرات ، ألننا نستطيع تغيير قيمها في أثناء عمل البرنامج.

– –في اجلافا سكربت ، كل املتغيرات باختالف أنواعها املشروحة في املنهج تكون من نوع واحد بعكس باقي لغات البرمجة

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

.String عالمات 'التنصيص' عند تعريفه ، وهو يسمى في البرمجة

، أو يكون'Learner' وقيمته هيuserName فاملتغير له اسم وقيمة ، فمثال من املمكن أن يكون لدينا متغير اسمه ، الحظوا بأن القيمة95 وتكون قيمتهstudentGrade ، أو يكون اسمه0.20 وتكون قيمتهdiscount اسمه

، أو مبعنى آخر ال أريد أن أعدل علىstring ألني أريد التعامل معها على شكل'تنصيص' األولى وضعتها بني عالمتيهذه القيمة أو أستعملها في املعادالت الرياضية ، ولكن القيمتني الثانية والثالثة جعلتها وحيدة بدون عالمات 'التنصيص' ألني أريدأن أستخدم هذه األرقام في معادالت رياضية مختلفة ، فمثال أريد من البرنامج أن يقوم مبقارنة درجة الطالب حتى يقوم بوضع

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

.initialize ، ومرحلة اإلنشاء أو البدءdeclare املتغيرات يتم عملها في مرحلتني ، مرحلة اإلعالن

نقوم بإخبار الكمبيوتر عن طريق كتابة أمر معين بأننا قمنا بعمل متغير ونريده أن يحجز مكان : declare- املرحلة األولى1له في ذاكرة احلاسب. في لغات البرمجة األخرى تعتمد املساحة التي حجزها الكمبيوتر لهذا املتغير على نوع املتغير ، فكما قلت

في اللغات األخرى توجد عدة أنواع للمتغيرات.سنقوم هنا بوضع قيمة للمتغير الذي عملناه في املرحلة األولى ، وسيقوم البرنامج بوضع هذه : initialize- املرحلة الثانية2

القيمة في مكان الذاكرة الذي مت حجزه في املرحلة األولى.

ثم اسم املتغير ، فلو أردنا تعريف متغيرvar تعريف املتغيرات أو اإلعالن عنها في اجلافاسكربت يكون ببساطة عن طريق كتابة نكتبه كالتالي:stundentGrade باسم

var studentGrade;

سيكون األمر كالتالي:studentName باسمstring ولو كنا نريد تعريف متغير من نوع

var studentName = new string();


يتكون من جزأين ، اجلزء الذي بعد عالمة اليساوي يخبر البرنامج بأن هذا املتغيرstring نالحظ بأن اإلعالن عن متغير من نوع.string سيكون من نوع

; بعد نهاية كل أمر ، هذه الفاصلة ضرورية جدا في كل أوامر البرنامج ، ألن البرنامج وأيضا نالحظ وجود عالمة فاصلة منقوطةعن طريقها يتعرف على بداية ونهاية كل أمر برمجي ، إذا لم تكن موجودة من املمكن أن يعمل البرنامج بشكل عادي ، ولكن غالبا

لن يعمل ، ألنه قام بوصل أمرين برمجيني مع بعض.

:نستطيع أن نقوم باإلعالن عن أكثر من متغير في نفس األمر ، مثلvar studentName, studentGrade, studentSection;

:املرحلة الثانية وهي إنشاء املتغير ، تكون عن طريق وضع قيمة للمتغير باستخدام عالمة يساوي ، مثلstudentGrade = 95;

ستكون كالتالي:string وللمتغيرات من نوعstudentName = 'Learner';

.string عالمة التنصيص كما ذكرت ، تبين لنا وللبرنامج بأن هذا املتغير هو

وأعطيناهgrade قيم املتغيرات ، ممكن أن تكون قيم ملتغيرات أخرى ، مثال لو قمنا بتعريف متغير في بداية البرنامج باسم ، إذا أردنا أن جنعل قيمة املتغير الثاني تساويstudentGrade ، ومن ثم قمنا بتعريف متغير جديد وسميناه92 قيمة

قيمة املتغير األول ، نكتبها كالتالي:studentGrade = grade;

.string ، ونفس الكالم ينطبق على املتغيرات من نوع92 وستكون اآلن قيمة املتغير الثاني تساوي

: – –ميكننا اختصار مرحلتي اإلعالن واإلنشاء وهذا هو املتعارف عليه لدى املبرمجني كالتاليvar studentGrade = 95;

var studentName = 'Learner';

فقط.'التنصيص' عن باقي املتغيرات هو عالمتيstring نالحظ بأن الفرق الوحيد الذي مييز املتغيرات من نوع


:شروط و قوانني تسمية املتغيراتتوجد قوانني وشروط لكتابة أسماء املتغيرات ، جتاوز هذه الشروط ممكن أن مينع البرنامج من العمل بشكل صحيح ، ومن املمكنأن ال يؤثر على عمله ، ولكن اتباع الشروط هو شيء مفضل ملن يريد االحتراف في البرمجة ، ألنه سيجعلك تتواصل مع املبرمجني

.اآلخرين بشكل أفضل ، وسيجعل برامج أسهل للفهم للمبرمجني الذين سيقرأون الكود

.هذه الشروط خاصة بلغة اجلافاسكربت ، وهي في الغالب تتشابه مع باقي لغات البرمجة املختلفة

يجب أن يكون حرف كبير أو صغير أو عالمةاحلرف األول :underscoreأو رمز الدوالر ومن املفضل أن .$ _

اليكون احلرف األول حرف كبير.يجب أن تكون حرف كبير أو صغير أو عالمةبقية األحرف :underscoreأو رمز الدوالر باإلضافة إلى إمكانية $ _

استعمال األرقام.إذا كان االسم يتكون من أكثر من كلمة ، التستعمل املسافات أبدا ، واجعل جميع أحرف الكلمات صغيرة باستثناء

، studentGrade.. الخ ، مثل: احلرف األول من الكلمة الثانية والثالثة والرابعةschoolStudentGrade ، carModelSerialNumber

_ إذا أردت.underscore أو ميكنك فصل الكلمات عن بعض بعالمة

يجب تسمية املتغيرات بأسماء تدل على فائدة املتغير ، مبعنى إذا أردت أن تعمل متغير ليحمل اسم مستخدم ، اجعل ، ألنك إذا أردت مراجعة الكود بعد زمن ، ستجد صعوبة فيun مثال أوu1 ، وال تقم بتسميتهuserName اسمه

معرفة فائدة هذا املتغير إذا لم تقم بتسميته بشكل صحيح وواضح.يجب أن تتأكد من أن االسم اليعتبر كلمة محجوزة في اجلافاسكربت )reserved wordولالطالع على الكلمات .(

املحجوزة في اجلافاسكربت انظر الرابط التالي:http://www.javascriptkit.com/jsref/reserved.shtml


:if..else , while , for - من أساسيات البرمجة:5:في البرمجة يوجد نوعني من األوامر الهامة

:for, while- أوامر التكرار مثل1

(نحدده نحن) ويتوقف األمر عن التكرار، طبعا توجد أوامر ومهمتها هي أن تقوم بتكرار عملية معينة حتى ينطبق شرط معنيتكرار أخرى ، لكن في املنهج لم يتم شرحها لذلك سأكتفي مبا هو موجود في منهج املادة.

:if...else- أوامر الشرط أو االختيار مثل2

هذا هو األمر الوحيد املشروح في املنهج مبا يتعلق بأوامر االختيار وهو كما يتبني من اسمه ، يفيد التخيير ، أي جنعل البرنامج.عن طريق هذا األمر يقوم باالختيار بني عدة بدائل أو حاالت مختلفة

1 -for: : يتكون هذا األمر من ثالثة نقاط أساسية يجب أن يحتوي عليها

. for تعريف املتغير وتعيني قيمة له ، هذا املتغير سنجعله يتحكم بعدد مرات تكرار األوامر املوجودة في محتوى أمر-1

، واذا أصبحت خاطئة سيتوقفfor مقارنة أو معادلة ، إذا كانت قيمتها صحيحة سيتم تنفيذ األوامر املوجودة في محتوى-2األمر عن التكرار. طبعا هذه املقارنة يجب أن حتتوي على املتغير الذي قمنا بتعريفه حتى نتمكن من التحكم بعدد مرات التكرار.

أعرف بأن األمر غير واضح اآلن ولكن تابعوا معي وسيتضح بإذن اهللا، كتابة معادلة لتغيير قيمة املتغير الذي عرفناه في اجلزء األول، هذه املعادلة سيتم تطبيقها بعد نهاية كل دورة تكرار وفائدتها-3

هي انها ستزيد مثال من قيمة املتغير في كل مرة حتى نستطيع أن جنعل قيمة املقارنة (املوجودة في اجلزء الثاني) خاطئة لنوقفعملية التكرار.

عشر مرات في سطر واحد في املتصفح ستكون طريقة كتابة هذا األمر كالتالي:$ لو أردنا عمل برنامج يكتب رمز – - سنكتب اجلزء األول وهو إعالن وإنشاء املتغير الذي سيتحكم بعدد مرات تكرار أمر الكتابة مع قيمة يبدأ منها العد: أوال

كالتالي:var count = 1

سنكتب معادلة أو مقارنة إليقاف أمر التكرار بعدما تتم كتابة الرمز عشر مرات:: ثانياcount <= 10

ملاذا جعلناها أصغر من أو يساوي؟.1 .. هذه املقارنة ستكون خاطئة منذ بداية البرنامج ألن قيمة املتغير في البداية ستكونcount = 10 افترض بأننا وضعناها


.1 .. هذه املقارنة ستكون خاطئة منذ بداية البرنامج ألن قيمة املتغير في البداية ستكونcount > 10 افترض بأننا وضعناها

وبعدها ستكون9 تساويcount .. هذه املقارنة ستكون صحيحة إلى أن تصبح قيمةcount < 10 افترض بأننا وضعناها مرات.10 مرات فقط ، ونحن نريده أن يتكرر9 املقارنة خاطئة ، أي أن التكرار سيكون

سنكتب معادلة لزيادة قيمة املتغير بواحد:: ثالثاcount = count + 1

: وميكننا كتابتها أيضا هكذا

count += 1أو ++count

.count++ وطريقة الكتابة األكثر استعماال في عالم البرمجة هي

، وسيتوقف بعدها11 $) (كتابة رمز حتى تصبح قيمة املتغير هذه املعادلة ستزيد من قيمة املتغير برقم واحد بعد تنفيذ كل عمليةأمر التكرار ألن الشرط واملقارنة ستصبح خاطئة.

$ : (هذا األمر غير صحيح ولكنه للتوضيح فقط) طيب اآلن سنكتب أمر لكتابة الرمزwrite $;

:طيب اآلن جنمع األجزاء السابقة مع بعضfor (var count=1; count<=10; count++)

write $;

:طريقة تنفيذ هذا األمر ستكون كالتالي

األمر الذي نريدوإذا كانت نتيجة املقارنة صحيحة سينتقل إلى للجزء الثاني ثم سينتقلللجزء األول سيقوم البرنامج بالذهاب ... ، وهكذا للجزء الثاني ، ثم سيعودcount ليزيد قيمة املتغير للجزء الثالث ثم سينتقلتنفيذه (املحتوى).

وإذا كانت نتيجة املقارنة خاطئة لن يتم تنفيذ األمر وسيتم انهاء البرنامج ، أو االنتقال ألمر آخر إذا كان البرنامج يحتوي على.أوامر أخرى

.)قوسني( ويكونون جميعهم في داخل; تفصل بينها فاصلة منقوطةfor طبعا األجزاء الثالثة التي يتكون منها أمر

ألنها تبني للبرنامج أين{}.. األمر أو األوامر التي نريد تنفيذها في داخل أمر التكرار يجب أن نضعها بني قوسنينقطة أخيرة وأين ينتهي، يعني للمثال الذي كتبته ، املفروض نكتبه بالشكل التالي:if أوwhile أوfor يبدأ محتوى

for (var count=1 ; count<=10 ; count++)

{

write $;

}


: للتلخيص

سيتم تنفيذة أول مايبدأ األمر ومن ثم لن يعود له البرنامج مرة أخرى.اجلزء األول.. اجلزء الثالث ثماملحتوى ثماجلزء الثاني ثم سيبدأ البرنامج بعمل دورة تبدأ من

اجلزء الثالث >> املحتوى>> اجلزء الثانياجلزء الثالث >> املحتوى>> اجلزء الثاني

...

.إلى أن يصبح الشرط املوجود في اجلزء الثاني غير صحيح ، فيتوقف عندها أمر التكرار

:طريقة عمل األمر السابق موضحة في الرسم التالي

واضحة ، ستكون بقية األوامر سهلة إن شاء اهللا ، ألنها هي األكثر تعقيدا من بينهم.for إذا كانت طريقة عمل أمر

2 -while: .for نفس الشيء ، تستخدم اذا أردنا تكرار عملية أو أمر معني عدة مرات ، ولكنها أقل تعقيدا من أمر

وهي حتتوي على جزء واحد يكون عبارة عن مقارنة أو شرط أو اختبار، إذا كان الشرط صحيح سيتم تنفيذ األوامر املوجودة في ، وإذا كان خاطئ لن يتم تنفيذها.while محتوى

يعتمد على فكرwhile أوfor أيضا ، فاستعمالwhile عشر مرات عن طريق$ طبعا ميكننا تنفيذ أمر كتابة رمز سنستخدمه إذا كنا سنكرر عملية ما بعدد مرات معروفة مسبقا ، لكن لو كنا نرغبfor املبرمج غالبا ، ولكن بشكل عام ، أمر

مثال في أخذ رقم سري من املستخدم وسنقوم بتكرار إظهار نافذة اإلدخال حتى يقوم بكتابة الرقم السري بشكل صحيح ، ، ألننا ال نريد حتديد عملية التكرار بعدد معني ، وإمنا سنحدده بشرط تطابق الرقم السري املدخل معwhile سنستخدم أمر


الرقم السري املوجود لدينا مسبقا.

، سنكتبه بالطريقة التالية:while عشر مرات عن طريق$ مثال لو أردنا كتابة الرمزwhile (count <= 10)

{

write $;

count++ ;

}

. يحتوون على نفس األجزاء ، ولكن أماكنها تختلفfor وwhile نالحظ أن

، ألننا لو كتبناه في داخلها ، سيصبح املتغيرwhile تبقى اجلزء األول؟ صحيح ، اجلزء األول يجب أن نكتبه قبل بداية أمر بنفس قيمته في كل دورة جديدة. فاملفروض يكون املثال السابق كالتالي:count الذي يتحكم بعدد مرات التكرار

var count=1;

while (count<=10)

{

write $;

count++ ;

}

ثم$ وطبعا كما ذكرت في مقدمة هذا الكتيب ، األوامر يتم تنفيذها بالترتيب ، مبعنى أن البرنامج هذا سيقوم بكتابة عالمة.count سيزيد قيمة املتغير

:نستنتج مما سبق ، أن البرنامج هذاfor (count=1; count<=10; count++)

{

write $;

}

:والبرنامج هذاvar count = 1;

while (count <= 10)

{

write $;

count++ ;

}

.يقومون بنفس العمل ، ونتيجتهم ستكون واحدة

، وحاالت أخرى العكس ، فإذا فهمتم طريقة عمل كل أمرwhile فيها سيكون أسهل منfor توجد حاالت ، استخدام أمربشكل جيد وبعدما تبدأون في التطبيق والبرمجة الفعلية ، ستعرفون بأنفسكم ماهو األمر األنسب لالستعمال في احلاالت املختلفة.


سنستخدمه إذا كنا سنكرر عملية ما بعدد مرات معروفة مسبقا ، لكن لو كنا نرغب مثال في أخذfor: ” بشكل عام ، أمروأكرررقم سري من املستخدم وسنقوم بتكرار إظهار نافذة اإلدخال حتى يقوم بكتابة الرقم السري بشكل صحيح ، سنستخدم أمر

whileألننا ال نريد حتديد عملية التكرار بعدد معني ، وإمنا سنحدده بشرط تطابق الرقم السري املدخل مع الرقم السري ، املوجود لدينا مسبـقــا.“

3 -if..else: :هذا األمر يجعل البرنامج يختار بني حاالت أو أشياء مختلفة ، مثال

if (شرط أو مقارنة){

إذا كانت نتيجة الشرط صحيحة سيتم تنفيذ هذا األمر أو األوامر}

else

{

إذا كانت نتيجة الشرط خاطئة سيتم تنفيذ هذا األمر أو األوامر}

، وإذاif على شرط أو مقارنة ، إذا كانت املقارنة صحيحة سيتم تنفيذ األمر أو األوامر املوجودة في محتوىif يحتوي أمر.else كان الشرط خاطئ ، سيتم تنفيذ األمر أو األوامر املوجودة في محتوى

، وأيضا استعملناif اليحتوي على مقارنة أو شرط ، وهذا ألنه مرتبط باملقارنة املوجودة معelse نالحظ هنا أن األمر ملحتوى ل األمرين ، حتى يستطيع البرنامج أن يعرف أين يبدأ محتوى كل أمر و أين ينتهي.}املتعرجة{ األقواس

النحتاج لوجوده دائما ، وإذا لم نكتبه سيعمل البرنامج بشكل عادي وطبيعي ، فلذلك وجوده من عدمه يعتمد علىelse أمرهدفنا في البرمجة ، هل سنحتاج إليه أم أل لتحقيق الهدف من البرنامج ، فمثال في بعض احلاالت سنريد تنفيذ أمر في حالة

معينة ، وإذا لم تتحقق هذه احلالة ال نريد البرنامج أن يقوم بشيء آخر. غيرif وال ميكنه أن يتخلى عنه ، ولكنif مرتبط بـelse ! فأمرif البد أن نكون كتبنا قبلهelse ولكن لو أردنا كتابة

، وميكنه أن يكون وحيدا بدونه.else مرتبط بـ


:مثالif ( 10 < 20 )

{

write True}

else

{

write False}

.if ، ألن الشرط صحيح ، لذلك سينفذ محتوىTrue هذا البرنامج سيكتب لنا كلمة

nested بحيث تكون متداخلة مع بعض ، وتسمىelse وأكثر منif وميكننا أن نستعمل في برامجنا أكثر من

if...elseفي هذا الكتاب.1 وسنرى مثال عليها في البرنامج رقم

هكذا نكون انتهينا من شرح هذا القسم ، وأمتنى أن يكون الشرح واضح وبسيط ، ألن البرمجة مبختلف لغاتها تعتمد على فهم وكلها تعمل بنفس الطريقة التي شرحتها.while وfor وif. فكل لغات البرمجة توجد فيهاهذه األوامر وطريقة عملها


:HTML- جافاسكربت و6 في أماكن مخصصة وبني شفراتHTML األكواد البرمجية اخلاصة بجافاسكربت يتم كتابتها في داخل أكواد وشفرات لغة

هي:HTML . محددة كما نعلم ، الشفرات األساسية املوجودة في أي ملف<html>

<head>

<title> </title>

</head>

<body>

</body>

</html>

.>body< أو في داخل>head< شفرات وأكواد اجلافا سكربت ممكن أن نكتبها في داخل

سيتم تنفيذ األكواد اذا قمنا باستدعائها بأكواد خاصة في داخل شفرة>head< الفرق بني املكانني هو كالتالي، املكان األول>body<واملكان الثاني ، >body<، سيتم تنفيذ األكواد املوجودة فيه مباشرة مبجرد وصول البرنامج (املتصفح) لها

تذكرون بأن األوامر يتم تنفيذها بالتسلسل ، صح؟http://www.w3schools.com/js/js_whereto.asp: مصدر املعلومة

:وشفرات وأكواد جافا سكربت تكتب في داخل هذا الكود الرئيسي<script language =”JavaScript”>

هنا نكتب أوامر جافاسكربت</script>

.HTML ووظيفتها هي أنها تخبر املتصفح بأن مابينها هي أكواد جافاسكربت وليست أكواد

:فأكواد اجلافاسكربت ستكون في أحد املكانني ، إما األحمر أو األزرق أو اإلثنني معا ، بحسب حاجتنا<html>

<head><title> </title><script language =”JavaScript”>


</head>

<body><script language =”JavaScript”>


</body></html>

! دائمااألحمر لألمانة حسب ماقرأت في املنهج كتابتهم ألكواد جافاسكربت كان في املكان


- : بعض األوامر الشائعة7

document.write() -1:األوامر عادة تتكون من ثالثة أقسام ، فلو أخذنا هذا األمر على سبيل املثال

document.write('Hello');

object وهو يسمى أوبجكتdocument اجلزء األول

لهذا األوبجكتmethod وهو يسمى مثودwrite اجلزء الثاني. ! فقط ، أي أننا النضع أي مسافة بينهم ألنها ستتسبب في عدم عمل البرنامج ودائما يتم وصل األوبجكت واملثود بنقطة

! ويجب االنتباه إلى حجم األحرف ألسماء األوبجكت واملثود ، ألن لو كتبنا حرف كبير بدال من حرف صغير ، لن يعمل البرنامج

هي'Hello' ، وفي مثالنا كلمةparameters وهو عبارة عن قوسني حتمل في داخلهاargument يسمىاجلزء الثالثالبارامتر.

ألنها''التنصيص ، ووضعناها بني عالماتHello هذا األمر وظيفته هي الكتابة في املتصفح ، ففي املثال جعلناه يكتب كلمةstringنريدها أن تظهر كما كتبناها بالضبط ، فلو أضفنا بعدها على سبيل املثال مسافة ، ستظهر هذه املسافة أيضا في

املتصفح.

، ومن ثم أردنا أن نكتب رسالة ترحيبية للمستخدمuserName لو كان لدينا برنامج ، يحتفظ باسم املستخدم في متغير اسمهباسمه املخزن مسبقا في البرنامج ، سنكتب األمر التالي:

document.write('Hello ' + userName);

! تذكروا الفرق بني املتغير العادي والـ'تنصيص' اليوجد حوله عالماتuserName نالحظ هنا أن اسم املتغيرstring، املتغير هو كلمة تدل على قيمة معينة ، فنحن النريد أن نتعامل مع اسم املتغير ، ولكن نريد أن نتعامل مع قيمته ،

فلو وضعنا اسم املتغير هنا بني 'عالمات التنصيص' ستكون النتيجة في املتصفح كالتالي:Hello userName

لكن إذا لم نضع حوله عالمات التنصيص ، سيعرف البرنامج بأن هذه الكلمة لها قيمة معينة ، ولذلك سيقوم بالبحث عن هذه كقيمة له ،'Learner'. فلو كان هذا املتغير يحمل اسمuserName القيمة ومن ثم سيستعملها بدال من اسم املتغير

ستكون نتيجة األمر على املتصفح هي:Hello Learner

واسم املتغير الذي نريد البرنامج أن يكتبه ، وإذا أردنا أن نضيف كالم آخرstring هنا وظيفتها هي اجلمع بني الـ+ عالمة للدمج بينهم ، مثال لو أردنا إضافة عالمة تعجب بعد اسم املستخدم+ أخرى بعد املتغير (اسم املستخدم) يجب أن نضع عالمة


سنكتب:document.write('Hello ' + userName + ' !');

وقبل عالمة التعجب ، ألننا إذا لم نضع هذه املسافاتHello وأيضا أحب أن أنوه هنا على املسافتني املوجودة بعد كلمةستتالصق الكلمات وعالمة التعجب مع بعضها البعض ، فيجب االنتباه لها.

، ستكون نتيجة األمر األخير هي:'Learner' املوجودة في البرنامج هيuserName لو افترضنا بأن قيمة املتغيرHello Learner !

window.prompt() -2windowهو األوبجكت ، و promptهو املثود ألوبجكت window

مثل األمر السابق، يتكون من ثالث أجزاء ، فائدة هذا األمر بأنه يظهر نافذة صغيرة للمستخدم ، النافذة حتتوي على جزأين ،(نكتبها نحن) ونريدها أن تظهر في النافذة ، واجلزء الثاني سيكون مربع فارغ حتى يدخل املستخدم فيه قيمة األول هو رسالة

:معينة ، كما في الصورة التالية

:هذه النافذة هي نتيجة لألمر التاليwindow.prompt('Please enter your name:', ' ');

خاص بالرسالة التي نريدها أن تظهر فياجلزء األول في األمر يحتوي على جزأين كما ذكرت قبل قليل ،اجلزء الثالث نالحظ أن وضعنا عالمتي تنصيص فارغةاجلزء الثاني . وPlease enter your name النافذة ، وفي هذه احلالة الرسالة هي

، ستظهر جملةاكتب هنا وهي خاصة باملربع أو املكان الذي سيكتب فيه املستخدم ، لو كتبنا شيء بني عالمتي التنصيص مثل:, اكتب هنا في املربع األبيض. واجلزأين يفصل بينهم فاصلة عادية

: كيف نأخذ القيمة التي سيدخلها املستخدم؟سؤال: عن طريق إنشاء متغير ، ونعطيه القيمة التي سيدخلها املستخدم.جواب: طيب كيف؟سؤال


: تابع معي املثال التالي:جواب. في البداية سنقوم بتعريف متغير ، وسنجعللو أردنا عمل برنامج يقوم بأخذ قيمة بالريال السعودي ويحولها إلى دوالر أمريكي

على سبيل املثال:money اسمهvar money;

:بعدها ، نعطي القيمة املدخلة عن طريق املستخدم للمتغير الذي أنشأناه بالشكل التاليmoney = window.prompt('please enter a value in S.R:', ' ');

هنا أحب أن أذكر نقطة مهمة، عندما نستعمل هذه الطريقة فإن جميع القيم التي سيدخلها املستخدم سيتم اعتبارهاstringونحن أحيانا النريد هذا الشيء ألننا سنحتاج في كثير من األحيان إلى استخدام البيانات املدخلة من قبل ،

املستخدم في معادالت رياضية وعمليات حسابية مختلفة ، مثل املثال الذي نطبقه اآلن.

إلى متغير عادي نستطيع أن نتعامل معه في العمليات احلسابيةstring فإذا أردنا حتويل القيم املدخلة من قبل املستخدم من ، واستخدامه يكون ببساطة كالتالي:parseFloat() ، يجب علينا أن نستخدم األمر

money = parseFloat(money);

' هيmoney على سبيل املثال، ستكون القيمة املوجودة في املتغير100 يعني لو كانت القيمة التي أدخلها املستخدم هي

، أي أنها حتولت من100 كما في األمر األخير ، ستصبح قيمتهاparseFloat() ، وبعدما نستعمل مثود'100string.إلى متغير عادي

قابلة لالستخدام في املعادالت الرياضية ، فنستطيع اآلن أن نكتب معادلة رياضيةmoney اآلن القيمة املوجودة في املتغيرلتحويل املبلغ من ريال سعودي إلى دوالر أمريكي كالتالي:

money = money * 3.75;

:أو ميكننا اختصار كتابتها كالتاليmoney *= 3.75;

.اآلن قيمة املتغير اجلديدة ستكون نفس املبلغ الذي أدخله املستخدم ولكن بالدوالر بدال من الريال

:نستطيع اآلن أن نظهر نتيجة التحويل للمستخدم عن طريق األمرdocument.write(money + ' $');


window.alert() -3windowهو األوبجكت ، و alertهو مثود ألوبجكت window:وهو يستخدم إلظهار النافذة التالية .

:األمر الذي كتبته إلظهار هذه النافذة هوwindow.alert('لقد حدث خطأ');

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

window.confirm() -4windowهو األوبجكت ، و confirmهو مثود ألوبجكت window:وهو يستخدم إلظهار النافذة التالية .

: األمر الذي استعملته إلظهار هذه النافذة هوwindow.confirm('هل أنت متأكد؟');

.False سيعود األمر بقيمةCancel ، وإذا ضغط علىTrue سيعود األمر بقيمةOK إذا قام املستخدم هنا بالضغط على

طبعا فائدة هذا األمر كبيرة والنستطيع االستغناء عنه ألننا عن طريقه نستطيع أن نتأكد من أن املستخدم قام بعملية معينة ، افعل شيء آخر.False ، نفذ أمر معني ، وإذا كانتTrue بأنه إذا كانت قيمة هذه النافذةif يعني ممكن نستخدم أمر


Math.round() -5Mathهو األوبجكت ، و roundهو املثود. هذا األمر وظيفته هي تقريب الرقم إلى أقرب رقم صحيح ، مبعنى لو كان لدينا

.9 ، عن طريق هذا األمر نستطيع تقريبه إلى9.3 على سبيل املثال رقم

:طبعا عملية التقريب للتذكير تكون كالتالي

.. سيتم تقريبه إلى الرقم األصغر4 و0 إذا كان الرقم الذي بعد الفاصلة بني

.. سيتم تقريبه إلى الرقم األكبر9 و5 وإذا كان الرقم الذي بعد الفاصلة بني

:مبعنىMath.round(9.4) = 9

Math.round(9.0) = 9

Math.round(9.5) = 10

Math.round(9.9) = 10

(إن وجدت) تكون نتيجتها حتتوي على فائدة هذا األمر كبيرة ، وعلى سبيل املثال في عمليات القسمة التي حتدث في البرنامج3.33333333333334 ستكون النتيجة في البرنامج3 على10 أعداد عشرية كثيرة ، على سبيل املثال لو قسمنا

وفي بعض احلاالت نحن نريد البرنامج أن يعرض لنا الرقم الناجت عن العمليات احلسابية في املتصفح ، ولكن عرضه بهذا الشكلوبأرقام عشرية كبيرة غير جيد املنظر وغير مقبول للمستخدم ، لذلك نستعمل هذا األمر للتقريب إلى أقرب رقم صحيح أو إلى عدد

.خانات عشرية نحدده نحن بإضافة بسيطة على األمر حتى يصبح شكل الرقم املعروض مقبول لدى املستخدم

( .. بدون خانات عشرية) ، سننتقل للتقريب إلى عدد خانات عشرية محددة اآلن تعلمنا كيف نقرب األرقام إلى أقرب رقم صحيح

:أرجو التركيز في النقطة التالية

لو أردنا عن طريق هذا األمر أن نقرب رقم إلى خانتني عشرية فقط ، كيف نعملها بواسطة هذا األمر ؟9.46 ونريد تقريبه إلى خانتني عشريتني ، ليصبح9.456456 مثال لو كان لدينا الرقم

:100 نضرب الرقم في:أوال9.456456 * 100 = 945.6456

نعمل تقريب ألقرب رقم صحيح::ثانياMath.round(945.6456) = 946

:أو ميكننا أن جنعل ما بداخل القوس هو نفس العملية األساسيةMath.round(9.456456 * 100) = 946


:100 نقسم الناجت على:ثالثا946 / 100 = 9.46

أوMath.round(9.456456 * 100) / 100 = 9.46

9.46 وهذه هي النتيجة التي نريدها

.. مثال ثاني للتقريب إلى ثالث خانات عشرية حتى تثبت املعلومة وتتضح أكثر

9.369 إلى ثالث خانات عشرية حتى يصبح9.368921 إذا أردنا تقريب الرقم

(بنفس عدد اخلانات التي نريدها)1000 نضرب الرقم في:أوال9.368921 * 1000 = 9368.921

نعمل تقريب ألقرب رقم صحيح::ثانياMath.round(9368.921) = 9369

أوMath.round(9.368921 * 1000) = 9369

1000: نقسم الناجت علىثالثا9369 / 1000 = 9.369

أوMath.round(9.368921 * 1000) / 1000 = 9.369

9.369 وهذه هي النتيجة التي نريدها

.. وهكذا لباقي احلاالت


- : كتابة التعليقات واملالحظات8التعليقات هي شيء أساسي في أي لغة برمجة ألن لها فوائد كثيرة ، منها أنها توضح لنا الفائدة والغرض من كتابة أمر معني

- إذا عاد وبالتالي يستطيع من يقرأ األمر أن يعرف سببه ويفهمه بسهولة ، وأيضا يساعد املبرمج الذي كتب األمر البرمجي -لالطالع عليه ليصحح بعض األخطاء بعد مرور فترة زمنية طويلة في تذكر سبب كتابته والفائدة منه ، وبالتالي يستطيع التعديل

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

:كتابة التعليقات واملالحظات يكون بأحد طريقتني

:one line comment األولى اسمها تعليق سطر واحدهذا تعليق ولن يظهر في الصفحة //

:multi-line comment الثانية اسمها تعليق لعدة أسطر/*

وهذا تعليق آخر لن يظهر في الصفحة وال ميكن رؤيته إال في ملف األوامرSource code أو مايسمى بـ*/

،/>script< و>script language='JavaScript<' طبعا هذه التعليقات يجب أن تكون من ضمن أكواد وبالتالي سيقوم بكتابتها في الصفحة كما هي ، ألن لغةHTML ألنها لو كانت خارجها ، سيعتبرها املتصفح من ضمن لغة

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

.البرمجي

طيب اآلن نعود لنقطة فائدتها في تسهيل اكتشاف األخطاء ، كما نعلم في لغة جافاسكربت اذا وجد خطأ بسيط جدا ، ستظهر لناصفحة فارغة ال حتتوي على أي شيء ، وهذا شيء يجلب اإلحباط لألسف خاصة إذا لم نستطع معرفة اخلطأ بسرعة ، ولذلك

ميكننا استخدام التعليقات في اكتشاف مكان اخلطأ لتقليل الوقت املستهلك في اكتشاف و تصحيح األخطاء ، خاصة الصغيرة.منها

، وطبعا املبرمج إذا تعود علىif في أحد البرامج الصغيرة الذي كنت أعمل عليه ، استخدمت فيه عدة أوامر ومن ضمنها أمرلغة البرمجة ستصبح كتابته سريعة جدا مثل كتابة اللغة العادية ، فاحتمال وجود األخطاء اإلمالئية كبير.

املهم أني بعد ما انتهيت من كتابة البرنامج وقمت بتشغيله ألرى النتيجة لم يظهر شيء ، قلت عادي أكيد خطأ بسيط كالعادة ،. جلست ما يقارب األربعني دقيقة ولم أستطع معرفة مكان اخلطأ!!!سأقوم بتصحيحه اآلن لتجربة البرنامج


:بعدها فكرت بطلب مساعدة التعليقات ، فقمت بتقسيم البرنامج الصغير إلى ثالثة أقسام

جعلته خاص باملتغيرات وتعاريفها املوجودة في البداية.األول خاص باملعادالت وأوامر االختيار والتكرار وهي في منتصف البرنامج.الثاني خاص بعرض نتائج البرنامج في املتصفح وهي في آخر البرنامج.الثالث

OK فقمت اآلن بوضع تعليقات حول اجلزأين الثاني والثالث ، ووضعت أمر كتابة في املتصفح في اجلزء األول ، جعلته يكتب كلمة

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

اآلن عرفت بأن املشكلة موجودة في اجلزء الثاني ، يعني في أوامر االختيار والتكرار واملعادالت احلسابية ، فقمت بتقسيم هذه- - وهللا احلمد اكتشاف اخلطأ الذي أخذ مني قرابة الساعة املنطقة إلى عدة أجزاء حتى أختبرها جزءا جزءا ، إلى أن استطعت

أو أكثر الكتشافه.

هل تعلمون ماذا كان اخلطأ؟( ، واملفترض أن يكون:{ ، قمت بكتابة القوس املحيط بالشرط هكذا:if في أحد أوامر

– –خطأ تافه ، ولكن األخطاء في البرمجة خاصة بدون استعمال برامج اكتشاف وحتديد األخطاء الترحم ، وال تفرق بني اخلطأ

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


- : أمثلة تطبيقية9

: تصنيف البيض ملقاسات بحسب الوزن1 البرنامج رقم ، السؤال يشمل عدة نقاط هامة ولذلك استخدمته كمثال.2008 لسنةTMA02 هذا املثال هو السؤال الرابع في

: اكتب برنامج بلغة جافاسكربت يقوم باآلتي:السؤال يظهر نافذة للمستخدم تطلب منه إدخال وزن البيض.:أوالللتأكيد. الصفحة - أدخله املستخدم في الذي - يقوم بكتابة الوزن:ثانيا يقوم بتصنيف مقاس البيض بحسب العوامل التالية::ثالثاجرام ، يعتبر صغير.53 إذا كان الوزن أقل من جرام ، يكون وسط.63 و أقل من53 الوزن يساوي أو أكبر من إذا كان يكون كبير.73 و أقل من63 الوزن يساوي أو أكبر من إذا كان ، يكون كبير جدا.73 الوزن يساوي أو أكبر من إذا كان ،

.السؤال يحتوي على ثالث فقرات مساعدة للحل ، سنمشي عليها كلها

:الفقرة األولى(اإلجنليزية) وليست لغة البرمجة ، ألنها تعتبر عادة املطلوب هنا ، هو التخطيط للبرنامج عن طريق كتابة البرنامج باللغة العادية

ممتازة للمبرمجني في تنفيذ أي برنامج ألنها تساعد على ترتيب األفكار.:طريقة احلل تكون كالتالي

declare a variable for the weight تعريف متغيرget a value from the user and assign it to the variable أخذ وزن من املستخدم وتعيينها للمتغير الذي عرفناهdisplay a confirmation message with the value إظهار رسالة تأكيد بالوزن الذي أدخله املستخدم

.هكذا نكون انتهينا من أول خطوتني وهي أخذ قيمة من املستخدم ووضعها في متغير ، وإظهار الوزن املدخل في الشاشة للتأكيد

.. ننتقل للخطوة الثالثة ، وهي التي عليها الكالم

يكتب لنا أن البيض صغير:53 نبدأ بأول تصنيف وهو إذا كان الوزن أقل منif ( the weight is smaller than 53)

display a message (The egg size is small)


يكتب لنا63 و أصغر من53 انتيهنا اآلن من اذا كان البيض صغير ، فننتقل للي بعده ، وهو اذا كان الوزن أكبر من أو يساويان مقاس البيض وسط:

else

if (the weight is larger than or equal to 53 AND less than 63)

display the message (The egg size is medium)

يكتب لنا ان املقاس73 وأقل من63 انتهينا من احلالة الثانية ، ننتقل للحالة الثالثة ، وهي اذا كان الوزن أكبر من أو يساويكبير ، وهي نفس طريقة احلالة الثانية:

else

if ( the weight is larger than or equal to 63 AND less than 73)

display the message (The egg size is large)

:اآلن جني للحالة الرابعة واألخيرة ، وممكن حتل بطريقتني

ونكتب داخلها أمر كتابة في الصفحة بأن احلجم كبير جدا ، وسنكتبها كالتالي:else- أن نضيف أمر1else

display the massage (The egg size is very large)

اكتب في الشاشة أن املقاس كبير جدا ، وسنكتبها هكذا:73 إلذا كان الوزن أكبر من أو يساويif وبعدهاelse- أن نكتب2else

if ( the weight is larger than or equal to 73 )

display the massage (The egg size is very large)

. والطريقة الثانية نفس األولىالطريقة األولى معناها أن أي وزن غير مطابق للحاالت الثالثة األولى راح يتم اعتباره كبير جداولكننا نحدد األرقام فيها. وكل الطريقتني صحيحة ان شاء اهللا ، وستعطي نفس النتيجة بالضبط.

:الفقرة الثانية.. املطلوب هنا هو حتويل األوامر املوجودة في الفقرة السابقة إلى كود حقيقي وقابل لالستعمال

الرئيسية في البداية ، وسنضع أكواد اجلافاHTML أوال سنجهز مكان أكواد اجلافاسكربت ، يعني سنقوم بعمل أكوادالسكربت في مكان االستفهامات:


<html>

<head>

<title> </title>

<script language='JavaScript'>???????</script>

</head>

<body>

</body>

</html>

.>title< ، والعنوان يتم كتابته بني شفراتEgg sizes في السؤال طلب مننا وضع عنوان للصفحة باسم

. املقصود بالتنسيق هو زيادةوالبد من تنسيق الكود واألوامر بشكل جيد ، حتى يكون الكود سهل القراءة للمدرس أو لغيره في الكيبورد ، حتى نبين األوامر والشفرات ومنيزها عن بعض.tabs املحاذاة عن الطرف األيسر باستخدام زر

سنفترض أن القيمة املدخلة من املستخدم ، ستكون أرقام أو مدخالت صحيحة ، فال داعي أن نضع أوامر للتأكد من أن املستخدممثال بكتابة أحرف أو غيرها. لم يقم

.اآلن نرجع حللنا في الفقرة األولى ، وسنمشي عليه أمرا أمرا ، حتى نحول جميع األوامر إلى أكواد فعلية

:أوال ، عملية تعريف املتغير الذي سنحفظ فيه مدخالت املستخدم

declare a variable for the weight

، ولذلك سيكون األمر:weight سنسمي املتغيرvar weight;

: تعريف املتغير.انتهينا من األمر األول

:weight األمر الثاني هو عملية أخذ قيمة من املستخدم وتعيني القيمة للمتغيرweight = window.prompt('Please enter the weight of the egg in grams.', '');

مثل ماشرحنا في األقسام السابقة ، لذلك سنقوم بتحويلstring اآلن الكمبيوتر إذا أخذ أي قيمة من املستخدم راح يعتبرها :parseFloat القيمة إلى متغير نستطيع التعامل معه في املعادالت واملقارنات عن طريق

weight = parseFloat(weight);

وزن البيض هو جرام"”ننتقل للخطوة التي بعدها ، وهي كتابة أمر تأكيد بالوزن الذي أدخله املستخدم ، وسيكون مثل ... :

الذي يحمل الوزن الذي أدخله املستخدم. فيكون األمر كالتالي:weight... سنضع اسم املتغير مكان النقطdocument.write('The weight of the egg is ' + weight + ' grams.<br/>');

.طبعا أجزاء هذه األكواد مت شرحها في األقسام السابقة ، لذلك لن أعيد شرحها مرة أخرى


وهو كتابة أوامر املقارنات بني األوزان وإظهار رسالة معينة لكل وزن..ننتقل لعملية البرمجة الفعلية ، يكتب لنا أن البيض صغير:53 نبدأ بأول تصنيف وهو إذا كان الوزن أقل من

if ( the weight is smaller than 53)


لتحويله إلى كود جافاسكربت نكتب:هذا هو التخطيط الذي كتبناه في حل الفقرة السابقة ، وif (weight < 53) {

document.write('The egg size is small.<br/>');

}

ومتى تنتهي. وهذا األمر سيتم تنفيذهif {املتعرجة} التي كتبناها ضرورية لتعريف البرنامج متى تبدأ األوامر املتعلقة بـ القوسني.53 فقط إذا كان الوزن الذي أدخله املستخدم أقل من

:63 و أقل من53 ننتقل للحالة الثانية ، اذا كان وزن البيض أكبر من أو يساوي

else

if (the weight is larger than or equal to 53 AND less than 63)


لتحويله إلى كود جافاسكربت نكتب:هذا هو التخطيط الذي كتبناه في حل الفقرة السابقة ، وelse {

if ( weight >= 53 && weight < 63 ) {

document.write('The egg size is medium.<br/>');

}

.63 وفي نفس الوقت أقل من53 هذا األمر سيتم تنفيذه في حالة كان الوزن أكبر من أو يساوي

:ونتبع نفس الطريقة للحالتني الثالثة والرابعةelse {

if ( weight >= 63 && weight < 73 ) {

document.write('The egg size is large.<br/>');

}

else {

document.write('The egg size is very large.<br/>');

}

}

}


:}املتعرجة{ بالنسبة لألقواس

) ، ونغلقه بعد نهاية األوامر التي تتعلق باألمر.while أوfor أوelse أوif (سواء نفتح القوس بعدما نكتب األمر ولكني أم أقم بإغالقه! السبب هو أن كل األوامرelse ففي الكود اخلاص باحلالة الثانية ، نالحظ أنني فتحت قوس بعد أمر

، فلذلك قمت بإغالقه بعد كتابة احلالتني الثالثة والرابعة.else املتبقية ستكون من ضمن هذه الـ“ ، واآلن كتبنا: "غير ذلك" ، هذا يعني بأن "غير ذلك" هذه53.. في البداية قلنا: "إذا كان وزن البيض أقل من فكروا فيها باملنطق

. وللتوضيح أكثر سأضع األقواس على التخطيط بالفقرة األولى ، وسألون فقط53 ستحتوي على كل األوزان التي تزيد عن في برنامجنا هذا تنتهي بعده مباشرة:if املرتبطة ببعض بنفس اللون ، ألن أقواسelse أقواس

if ( the weight is smaller than 53) {


}

else {

if (the weight is larger than or equal to 53 AND less than 63) {


}

else {

if ( the weight is larger than or equal to 63 AND less than 73) {

display the message (The egg size is large)

}

else {

display the message (The egg size is very large)}

}

}

:النتيجة النهائية للبرنامج ستكون بالشكل التالي<html>

<head>

<title>Egg sizes</title>

<script language='JavaScript'>

var weight;

weight = window.prompt('Please enter the weight of the egg in grams.', '');

weight = parseFloat(weight);

document.write('The weight of the egg is ' + weight + ' grams.<br/>');

if (weight < 53) {

document.write('The egg size is small.<br/>');


}

else {

if ( weight >= 53 && weight < 63 ) {

document.write('The egg size is medium.<br/>');

}

else {

if ( weight >= 63 && weight < 73 ) {

document.write('The egg size is large. <br/>');

}

else {

document.write('The egg size is very large. <br/>');

}

}

}

</script>

</head>

<body>

</body>

</html>

ونحفظ امللف بأي اسم ، ولكن الصيغة أوnotepad في النهاية ، نأخذ هذا الكود وننسخه في برنامج حترير نصوص مثل مثال!txt أوdoc وليسhtml . يعني امللف النهائي يجب أن يكون نوعه أو امتدادهhtml النوع يجب أن تكون

ولتشغيل البرنامج نفتح امللف عن طريق متصفح االنترنت ، سواء انترنت إكسبلورر أو فايرفوكس أو غيرها وستظهر لنا نتيجة.البرنامج

:الفقرة الثالثةيقول كيف نتأكد من أن البرنامج يعمل بشكل صحيح وال توجد به أخطاء؟

وبرنامجنا هذا فيه حتى نتأكد من أن البرنامج صحيح وال توجد به أخطاء ، يجب أن نختبر جميع احلاالت املوجودة في البرنامج ، ، أو كبير73< و63>= ، أو كبير إذا كان63< و53>= ، أو وسط إذا كان53 < أربع حاالت ، وهي: إما صغير إذا كان

. 73> جدا إذا كان

- - من وجهة نظري هي األفضل واألضمن: األرقام ممكن تختلف من شخص آلخر ، ولكن هذه األرقام

، حتى نختبر احلد األعلى للحالة األولى وهي احلجم الصغير.52 رقم ، حتى نتأكد من احلد األعلى للحالة األولى ، وأيضا نختبر احلد األدنى للحالة الثانية وهي احلجم املتوسط.53 رقم ، حتى نتأكد من احلد األعلى للحالة الثانية ، وأيضا نختبر احلد األدنى للحالة الثالثة املتعلقة باحلجم الكبير.63 رقم ، حتى نتأكد من احلد األعلى للحالة الثالثة ، وأيضا نختبر احلد األدنى للحالة الرابعة املتعلقة باحلجم الكبير جدا.73 رقم


: لعبة التخمني2 البرنامج رقم:هذا سؤال أتى لنا في االختبار النهائي

و1 واجعل املستخدم يحاول أن يقوم بتخمينه أو معرفته عن طريق إدخال رقم بني1000 و1 قم بتخزين رقم في البرنامج بني1000..

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

.إذا أدخل املستخدم رقم أصغر من الرقم املخزن أظهر له رسالة تخبره بأنه حتت الرقم الصحيح ودعه يحاول مرة أخرى

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

طبعا التقسيم والتحليل سيكون في طريقة احلل ألي سؤال في البرمجة هو فهم السؤال ومن ثم تقسيمه وحتليله إلى خطوات ، !عقلنا ألن في االختبار اليوجد مكان كافي للكتابة

، واملتغير501 وسنضع له قيمة نختارها ولنفرض انهاourNumber: سنعمل ثالثة متغيرات ، املتغير األول سنسميهأوال وستكون مهمتهcount وسنجعله يحمل القيمة التي يدخلها املستخدم ، والثالث سنسميهuserNumber الثاني سنسميه

حساب عدد املحاوالت التي قام بها املستخدم.

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

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

: إذا استطاع تخمني الرقم الصحيح:ثالثا بعد عدد املحاوالت التي قام بها.سنكتب رسالة له نخبره بأنه استطاع تخمني الرقم الصحيح

.. نحول اخلطوات إلى أكواد

:أوالvar ourNumber, userNumber, count;

ourNumber = 501;

userNumber = window.prompt('Enter a number between 1 and 1000', '');

userNumber = parseFloat(userNumber);

count = 1;

.السطر األول ، عرفنا ثالثة متغيرات

في املتغير اخلاص بنا.501 السطر الثاني ، وضعنا رقم.السطر الثالث ، جعلنا املتغير اخلاص باملستخدم يأخذ القيمة من املستخدم

ميكن التعامل معه في املقارنات واملعادالت.variable إلىstring السطر الرابع ، قمنا بتحويل الـ


ألن املستخدم بدأ فعليا بأول محاولة في السطر1 للمتغير اخلاص بعد عدد املحاوالت ، وبدأ بـ1 السطر اخلامس ، وضعنا قيمةالثالث.

:ثانيا

:501 ، وسنجعل الشرط: إذا لم يتطابق الرقم الذي أدخله املستخدم مع الرقمwhile سنستعمل لهذا اجلزء أمرwhile (ourNumber != userNumber) {

}

، لذلك سنضيف501 أو يكون أصغر من501: إما أن يكون رقم املستخدم أكبرإذا لم يتطابق الرقمني ستكون لدينا حالتني وسنعرض له رسالة501 إلذا كان رقم املستخدم أكبر منif وسنجعلelse وif أوامرwhile في داخل محتوى

وسنعرض له الرسالة501 ستكون حلالة إذا كان رقم املستخدم أصغر منelse تخبره بأن رقمه أكبر من الرقم الصحيح ، و :املناسبة

while (ourNumber != userNumber) {

if (userNumber > ourNumber) {

window.alert('You are above the right number!');

}

else {

window.alert('You are below the right number!')

}

}

بعدما قمنا بإخبار املستخدم بأنه إما فوق أو حتت الرقم الصحيح ، نريد إضافة أمر حتى يحاول مرة أخرى ، وسنضيف حتته:مباشرة أمر آخر لزيادة املتغير اخلاص بعد عدد املحاوالت

while (ourNumber != userNumber) {

if (userNumber > ourNumber) {


}

else {

window.alert('You are below the right number!')

}

userNumber = window.prompt('Try again :', '');


count = count + 1;

}


أو يكون أكبر منه ، الميكن أن يكون501 يوجد خيارين فقط ، وهي إما أن يكون الرقم أصغر منwhile طبعا بداخل أمر.while هو أنهم غير متساويني ، فبالتالي لو كان الرقمني متساويني لن يتم تنفيذ محتوىwhile يساويه ألن شرط

501 تبقى لنا اجلزء الثالث واألخير ، وهو إذا قام املستخدم بإدخال الرقم الصحيح ، وبالطبع لو كان الرقم املدخل يساوي الرقم

كالتالي:while وإمنا سيتم تنفيذ مابعدها من أوامر إن وجدت ، فسنكتب هذه اجلزئية بعدwhile لن يتم تنفيذ

document.write('You guessed the right number after ' + count + ' tries!');

.count سيقوم البرنامج بكتابة لقد قمت بتخمني الرقم الصحيح بعد عدد املحاوالت املخزنة في املتغير

:اآلن جنمع األجزاء الثالثة مع بعضvar ourNumber, userNumber, count;

ourNumber = 501;

userNumber = window.prompt('Enter a number between 1 and 1000', '');


count = 1;

while ( ourNumber != userNumber)

{

if (ourNumber < userNumber)

{


}

else

{

window.alert('You are below the right number!');

}

userNumber = window.prompt('Try again :', '');


count = count + 1;

}

document.write('You guessed the number after ' + count + ' tries!');

.وهذا هو البرنامج املطلوب بشكل كامل إن شاء اهللا


: إيجاد القاسم املشترك األكبر بني رقمني3 البرنامج رقم.. سؤال أتى لنا أيضا في االختبار النهائي

: اعمل برنامج يجعل املستخدم يدخل رقمني ، ويقوم البرنامج بإيجاد العامل املشترك األكبر بني الرقمني ويعرضه فيالسؤال يقولالصفحة.

املشكلة الرئيسية هي في طريقة إيجاد العامل املشترك األكبر ألنها حتتاج وقت للتفكير والتجريب حتى نستطيع إيجادها ألول.مرة

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

ألنه أكبر رقم نستطيع أن نقسم عليه الرقمني ونحصل على رقم3 الناجت هو3 و6 مثال لو أردنا العامل املشترك األكبر لصحيح.

سنبحث عن أكبر رقم ممكن أن نقسم عليه هذين الرقمني ونحصل على رقم صحيح40 و50 ولو أردنا العامل املشترك األكبر ل ألنه أكبر رقم نستطيع أن نقسم عليه الرقمني والنتيجة ستكون عدد صحيح.10 في احلالتني، واإلجابة في هذه احلالة ستكون

لنفس السبب.5 سيكون الناجت15 و20 ولو أردنا العامل املشترك األكبر للرقمني

!طيب املشكلة اآلن هي كيف نحول هذا الكالم إلى أكواد وأوامر برمجية؟

)D( : طبعا بعد االختبار حليته احلل ممكن يكون بأكثر من طريقة وسأشرح لكم طريقتي في حله

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

إذا كان باقي قسمة الرقم الثاني علىأو إذا كان باقي قسمة الرقم األول على املتغير ال تساوي صفر: وبعدها وضعت شرط وهو .. وفي املحتوى كتبت أمر يقوم بإنقاص قيمة هذا املتغير بواحد.املتغير التساوي صفر

، واملتغير الذي سيحمل قيمة الرقم األصغرy والرقم الثاني في متغير اسمهx بافتراض أن الرقم األول موجود في متغير اسمه مبعنى القاسم املشترك األكبر ، سيكون الشرط كالتالي:Greatest Common Divisor ، اختصارا لـGCD سأسميه

while ( x % GCD != 0 || y % GCD != 0 )

{

GCD = GCD – 1;

}

:بصراحة الشرط صعب بالنسبة للمبتدئني لذلك حاولوا أن تركزوا في شرحي له اآلن

القاسم املشترك األكبر بني رقمني هو إذا كان باقي قسمة الرقمني عليه تساوي صفر ، مثل األمثلة التي طبقناها قبل قليل ، لذلكوضعنا الشرط بأنه إذا كانت باقي قسمة أي من الرقمني على املتغير ال تساوي صفر معناها بأننا لم نصل بعد للقاسم املشترك.األكبر للرقمني ونحتاج لتنقيص قيمته بواحد حتى تصل قيمته إلى رقم يحقق الشرط املوجود وهو رقم القاسم املشترك األكبر


: سنقوم بتعريف ثالث متغيرات، األول سيحمل الرقم األول الذي سيدخله املستخدم ، والثاني سيحمل الرقم الثاني الذيأوالسيدخله املستخدم ، والثالث سنجعله يحمل قيمة الرقم األقل منهم.

.حتى نختصر الشرح والوقت ، سنحذف فقرة إدخال األرقام من املستخدم ، وسندخل رقمني من لدينا مباشرة للتسهيل

على التوالي:y وx ، وسنضعهم في املتغيرين30 و40 سنفرض أن الرقمني همvar x = 40;

var y = 30;

في هذه احلالة:y سنضع املتغير الثالث ليحمل قيمة العدد األصغر ، وهوvar GCD = y;

مع الشرط الذي شرحته قبل قليل:while اآلن نكتب أمرwhile ( x % GCD != 0 || y % GCD != 0 ) {

GCD = GCD – 1;

}

(للتوضيح) سنحصل على: اذا استبدلنا املتغيرات بقيمهاwhile ( 40 % 30 != 0 || 30 % 30 != 0 ) {

GCD = GCD – 1;

}

قم بإنقاص قيمة ال تساوي صفر30 على30 اذا كانت باقي قسمةأو ال تساوي صفر30 على40 اذا كان باقي قسمة مبعنى بواحد.GCD املتغير

؟|| بدال من&&: ملاذا لم نستعملطيب البعض ميكن يتساءل.. لو نتذكر طريقة عمل كل واحد منهم سنعرف السبب

- – ، إال إذا كان كل الطرفني املوجودين في الشرط صحيحني ، أي أن كلwhile ، لن يتم تنفيذ محتوى&& لو استخدمنا

الرقمني باقي قسمتهم على املتغير ال تساوي صفر. ،True ستكون40%30=!0 ، ألنwhile في الشرط ، لن يدخل في محتوى&& يعني في املثال األخير ، لو استعملنا

.while ، لذلك لن يتم تنفيذ محتوىFalse ستكون30%30=!0 ولكن

، يعني كل الطرفنيFalse في جميع احلاالت ، إال إذا كان كل الطرفنيwhile ، سيتم تنفيذ محتوى|| ولو استخدمناباقي قسمتهم على املتغير تساوي صفر ، وهذا معناه بأن املتغير أصبح اآلن يحمل قيمة العامل املشترك األكبر.

. :)أرجو أن أكون وفقت في توضيح الفكرة و املعلومة


:) ، أكملوا حل السؤال مبا أننا اآلن عرفنا كيف نوجد القاسم املشترك األكبر ، الباقي بسيط ان شاء اهللا وسأجعله واجب لكم.وإذا واجهتكم مشكلة اكتبوها ، وسنتعاون في حلها سوية إن شاء اهللا

إذا كان الرقم األول أكبراألولى: وملن يريد أن يزيد استيعابه لهذه املسألة ، أرفقت مع ملف الشرح برنامج حللها في ثالث حاالت إذا كان الرقمني متساويني. وقمت بحل احلالة األولىوالثالثة إذا كان الرقم األول أصغر من الثاني ،والثانية من الرقم الثاني ،

:). للتنويعwhile ، واحلالة الثانية عن طريق أمرfor عن طريق أمر


String methods -10: . في البرمجة توجدstring يعتبرون'Learner' أو'95 ' يعتبر متغير عادي ، و95 اآلن نحن نعلم بأن

methodsتعطينا إمكانيات للتحكم و التعامل مع الـ strings.وفي املنهج مت شرح ثالثة منها وسأقوم بتفصيلها اآلن ،

، هذا الـLearner يحتوي على كلمةstring: اآلن لو افترضنا بأن لديناقبل أن أبدأ بها ، أحب أن أوضح نقطة بسيطةstringوأي- stringغيره يكون له طول ، الطول يكون عدد األحرف املوجودة فيه ، يعني على مثالنا سيكون طول الـ –

string7 ألن عدد األحرف كلها7 هو.

سيكون له مركز أو ترتيب ، الترتيب عادي ولكن االختالف فقط هو في بداية الترتيب ، ألنstring وأيضا كل حرف في الـ كما هو متعارف عليه في الواقع.1 وليس0 أول حرف سيكون ترتيبه

.4 مثال سيكون ترتيبهn ، وحرف0 سيكون ترتيبه أو مركزه هوLearner في كلمةL يعني بالنسبة حلرف

:وفي اجلدول التالي توضيح أكثر

String L e a r n e r

مركز احلرف 0 1 2 3 4 5 6الطول 7

1 -()charAt: . لو ترجمت األمر باللغة العاديةهذا املثود املفترض أن نضع بني القوسني التابعة له رقم ، وهو سيعطينا احلرف املقابل لهذا الرقم

. أعطنا احلرف املوجود في هذا املركزسيكون كأننا نقول:

:string لنفرض أننا قمنا بتعريف املتغير التالي ونوعهvar userName = 'Learner';

:لو كتبنا مثالuserName.charAt(0);

L ستكون نتيجة هذا األمر

ثم كتبنا اسم املثود.. ، ثم نقطةstring تكون عن طريق كتابة اسم املتغير الذي نوعهmethod نالحظ أن طريقة كتابة الـ الصغير لن يعمل البرنامج!a الكبير املوجود في املثود ، ألننا لو كتبنا بدال منه حرفA يجب االنتباه إلى حرف

:لو وضعنا هذا األمر األخير في داخل أمر الكتابة في املتصفح كالتاليdocument.write(userName.charAt(0));


.r سيكتب لنا6 ، ولو استبدلنا الصفر برقمL سيكتب لنا في املتصفح

، مثال لو عملنا برنامج ومن ضمنه مكان لتسجيل اسمstring فائدة هذا األمر هو اننا نستطيع أن نعرف مما يتكون الـمستخدم وكلمة سر خاصة باملستخدم ، نستطيع عن طريق هذا األمر أن نتأكد مثال من أن أول خانة ال تكون رقم ، أو أن تتكون

...كلمة السر من أحرف وأرقام مختلطة ببعض ، وغيرها

2 -length: ، فهوmethods مثل باقي الـargument ، وهو اليحتاج إلىstring هذا املثود مهمته هي أن يعطينا ويحدد لنا طول الـ

يستطيع العمل بدونها.

في البرنامج:string لو كان لدينا هذا الـvar userName = 'Learner';

:ثم كتبنا هذا األمر لنعرف طول الكلمةuserName.length;

..7 ستكون النتيجة

الذي لدينا كالتالي:string طيب لو كان الـvar sentence = 'Hello World';

:ثم كتبناsentence.length;

سواء كان رمزا أوstring ألن املسافة محسوبة أيضا مع األحرف! وأي شيء سيكون متواجد في الـ11 ستكون النتيجةحرفا أو رقما أو أي شيء ، سيتم احتسابه أيضا ومعاملته كاحلروف.

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

خانات.6 التقل عن


3 -()indexOf: التالي:string. فلو كان لدينا الـهذا األمر نقوم بكتابة حرف في داخل األقواس وسيقوم بتحديد مكان أو مركز احلرف

var userName = 'Learner';

:ثم قمنا بكتابة األمر التاليuserName.indexOf('L');

0 ستكون النتيجة

:ولو غيرنا القيمة كالتاليuserName.indexOf('n');

4 ستكون النتيجة

: ولو غيرناها لـuserName.indexOf('e');

.1 ، والنتيجة ستكون مكان أول حرف وهوstring نالحظ انه يوجد حرفني مشابهني لهذا احلرف في الـ

الذي لدينا:string طيب لو كان الـvar sentence = 'Hello World';

:وكتبنا هذا األمرsentence.indexOf('World');

.6 سيعطينا البرنامج مكان أول حرف في هذه الكلمة وهو

:مثال تطبيقي على ماسبق

: اعمل برنامج يقوم بأخذ اسم املستخدم ، ثم يقوم البرنامج بعرض كل حرف من أحرف االسم في سطرلو جاء لنا سؤال يقولمستقل.


: سنقوم بتعريف متغير وجنعل املستخدم يكتب اسمه ، وسنحفظ االسم في هذا املتغير:أوالvar userName = window.prompt('Please enter your name:', '');

سنجعل البرنامج يطبع كل حرف من هذا االسم في سطر مستقل:for: عن طريق أمرثانيا.. قبلما أبدأ في اخلطوة الثانية ، أريدكم أول شيء أن تفهموا كيف سنطبع كل حرف في سطر منفصل

charAt() طبعا لتحديد وللتعامل مع كل حرف سنستعمل مثود

:فإذا أردنا طباعة كل حرف سنستعمل هذه األوامرcharAt(0)

charAt(1)

charAt(2)

charAt(3)

إلى أن ينتهي عدد األحرف

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

، وسنضع فيه متغير يبدأ من الصفر ثم يزيد بواحد في كل دورة حتى يتم طباعة كل األحرف ، هذاfor لذلك سنستغل قوة أمر ، وسيكون الشرط عبارة عن: قيمة املتغير تكون أصغر منcharAt() املتغير سنستخدمه بدال من األرقام في داخل مثود

بواحد ، فلو كان طول الـstring يكون أقل من طول الـstring طول االسم ، ألنه كما تعلمنا: مركز آخر حرف في الـstring6 ، سيكون مركز آخر حرف فيها هو7 هو.

for (var i=0; i<userName.length; i=i+1) {

}

هي أنه يعطيناlength وكما رأينا قبل قليل ، فائدة أمر ،charAt() ستحل محل األرقام في داخل أمرi: مرة أخرى ستزيد قيمته سبعi ، املتغير7 يساويstring مثال لو كان عدد أحرف الـ. string عدد األحرف املوجودة في الـ

.7 طوله أو عدد أحرفهstring وهو مركز آخر حرف في6 مرات بواحد ، حتى يصل إلى رقم

وسنبدأ منstring مثال! ألننا هكذا سنتجاوز احلرف األول في الـ1 يبدأ من رقمi وبالطبع الميكننا أن جنعل املتغيراحلرف الثاني.

:for طيب ، اآلن سنكتب أمر طباعة كل حرف في سطر مستتقل في داخل محتوى أمرfor (var i=0; i<userName.length; i=i+1) {

document.write(userName.charAt(i) + '<br/>');

}

..7 طولهstring سأشرح أول دورتني أو عمليتي تكرار حتى تتضح لكم الصورة أكثر بافتراض أن الـ


، والنتيجة صحيحة لذلك سيدخل في املحتوى ، وسيقوم بتنفيذ هذا0 > 7 ، ثم ستتم عملية املقارنة0 وقيمتهاi أوال ستبدأاألمر:

document.write(userName.charAt(0) + '<br/>');

1 بواحد لتصبح قيمتها تساويi ثم سيذهب للجزء الثالث وسيزيد قيمة

لذلك سيدخل للمحتوى مرة أخرى وسينفذ هذا األمر: ثم سيرجع للقسم الثاني ويتحقق من الشرط وسيكون الشرط صحيح ،document.write(userName.charAt(1) + '<br/>');

هكذا نكون طبعنا احلرف الثاني في السطر الثاني ، وسيستمر البرنامج بالعمل حتى يقوم بكتابة كل األحرف السبعة ، كل حرف. وهذا هو الكود بعد جتميعه:في سطر مستقل

var userName = window.prompt('Please enter your name:', '');

for (var i=0; i<userName.length; i=i+1)

{

document.write(userName.charAt(i) + '<br/>');

}

وفوائده ، لذلك حاول أن تفهمها بشكل جيد.for هذه الفكرة والطريقة مهمة جدا في عالم البرمجة وتساعد على معرفة قوة أمر


:Arrays املصفوفات- 11 هي متغيرات تسمح لنا بتخزين أكثر من قيمة فيها ، وكل قيمة نستطيع احلصول عليها منArrays املصفوفات أو مايسمى بـ

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

األشهر) ثم نضع تكاليف األشهر في املصفوفة.

. لو افترضنا بأننا نريد أن ننشئ مصفوفة حتتويتوجد أكثر من طريقة إلنشاء املصفوفات وسنستعرضها جميعها إن شاء اهللاعلى أسماء أشهر السنة امليالدية:

:الطريقة األولىvar monthsArray = new Array(12);

monthsArray[0] = 'January';

monthsArray[1] = 'February';

...

حتى نصل إلى آخر شهرmonthsArray[11] = 'December';

هي إخبار البرنامج بأن املتغير الذي أنشأناهnew Array . وفائدةmonthsArray هنا قمنا بإنشاء مصفوفة اسمها املكتوب بني القوسني يدل على أن حجم املصفوفة12). رقمstring هو ملصفوفة وليس متغير عادي (مثل طريقة تعريف الـ

.12 (يعني عدد عناصرها) هو

.هذه الطريقة استخدامها قليل ، ألنه توجد طرق أخرى أسهل وأسرع في الكتابة

، لذلك أول عنصر في مصفوفتناstring مثل رقم أول حرف في الـ0 طبعا أول عنصر في املصفوفة رقمه أو ترتيبه يكون .11 وآخر عنصر سيكون رقمه0 هذه سيكون رقمه

:الطريقة الثانيةvar monthsArray = 'January','February','March','April','May','June','July'

,'August','September','October','November','December'];

(للداللة نالحظ ان هذه الطريقة أسهل بكثير من الطريقة األولى وأيضا نالحظ بأن أسماء األشهر مكتوبة بني عالمتي تنصيص يخبر البرنامج بأنهم عناصر مصفوفة ،[]) , ، وتفصل بينهم فاصلة عادية ووضع العناصر بني القوسنيstring على أنها

للتعريف[] كما في الطريقة األولى ، قمنا بإضافة العناصر مباشرة بني القوسنيnew Array يعني بدال من كتابةباملصفوفة.


:الطريقة الثالثة

.هذه الطريقة تشبه األولى ، ولكن تختلف عنها بأننا لن نحدد حجم املصفوفة فيها، مبعنى سنترك مابني القوسني فارغ بدون رقم

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

var monthsArray = new Array();

وبعده بإمكاننا كتابة عناصر املصفوفة بنفس الطريقة األولى ، وبإمكاننا أن جنعل املستخدم يكتب العناصر أيضا عن طريق كتابة ، مثل:window.prompt() اسم املصفوفة ومركز العنصر وبعدها عالمة يساوي وبعدها أمر

monthsArray[0] = window.prompt('Enter the first month name:', '');

في هذه املصفوفة.0 وعندما يدخل املستخدم اسم الشهر األول سيتم تخزينه في املركز

الهامة والتيmethods طيب اآلن عرفنا كيف نعرف وننشئ املصفوفة ، وكيف نضع قيم فيها، لذلك سننتقل إلى بعض الـتساعدنا في التعامل مع املصفوفات.

1 -()indexOf: . في املصفوفاتstring ، وكانت وظيفته هي حتديد مكان احلرف في الـstring نفس األمر الذي استعملناه مع الـ

وظيفته هي حتديد مركز مابني القوسني في داخل املصفوفة. على سبيل املثال لو كان لدينا مصفوفة أشهر السنة:var monthsArray = 'January','February','March','April','May','June','July'


:إذا استعملنا األمر التاليdocument.write(monthsArray.indexOf('January'));

، أي أن هذا األمر قام بتحديد مركز أو ترتيب هذا الشهر في املصفوفة ، وهذه الطريقة مهمة في0 سيكتب لنا في املتصفح رقمبعض احلاالت ، مثل إذا أردنا البحث في عناصر املصفوفة وسيتم التطرق لها الحقا إن شاء اهللا.

2 -length: ، ووظيفته هنا هي حتديد حجم أو عدد عناصر املصفوفة. مثال مصفوفةstrings أيضا نفس األمر الذي استعملناه مع الـ

األشهر:var monthsArray = 'January','February','March','April','May','June','July'



:لو كتبنا هذا األمرdocument.write(monthsArray.length);

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

: كيف نعمل برنامج فيه مصفوفة ألسماء أشهر السنة ، وجنعل املستخدم يدخل أسماء األشهر ؟سؤال

؟for في سطر مستقل بواسطة أمرstring: تتذكرون الطريقة التي استعملناها لطباعة كل حرف في الـجواب.. سنستعمل نفس الفكرة بالضبط

12 ألن عدد األشهر12 ننشئ مصفوفة ونسميها ونحدد حجمهاأوالvar monthsArray = new Array(12);

حتىi ، إلظهار رسالة ألخذ اسم الشهر وتخزينها في املكان املناسب في املصفوفة ، وسنعرف متغيرfor نعمل أمرثانيايتحكم بعدد مرات التكرار:

for (var i=0; i<monthsArray.length;i++) // i=i+1 is the same as i+=1 and i++

{

monthsArray[i] = window.prompt('Enter the month name:', '');

}

سيكون كالتالي:for ، أي أن األمر املوجود في محتوىi = 0 في الدورة األولى في هذا األمر ستكون قيمةmonthsArray[0] = window.prompt('Enter the month name:', '');

كالتالي:for ، وسيكون األمر املوجود في محتوىi = 1 وفي الدورة الثانية أو التكرار الثاني ستكون قيمةmonthsArray[1] = window.prompt('Enter the month name:', '');

، وعندها سيصبح الشرط املوجود خاطئ ولن يتم تنفيذ املحتوى ، ألن i=12 وسيستمر بالتكرار حتى تصبحmonthsArray.lengthوالنتيجة12 > 12 ... وبالتالي سيكون الشرط12 يساوي ، False.

(أصغر من) عالمة (أصغر من أو يساوي) سيكون الشرط صحيح وسيكون األمر املوجود في املحتوى لو وضعنا بدال من عالمةكالتالي:

monthsArray[12] = window.prompt('Enter the month name:', '');

حتى11) وهذا يعني أن النهاية البد أن تكون0 (ألننا بدأنا من13 وهذا معناه انه طلب من املستخدم كتابة اسم شهر رقم !13 مثل ماعملنا في آخر أمر ، سيكون معناه بأننا طلبنا كتابة اسم الشهر رقم12تكتمل االثني عشر شهرا ، وإذا أكملنا ل


ملثل هذه األشياء.for هذا الكالم هو لزيادة توضيح فائدة أمر

اخلاصة باملصفوفات وطريقة عملها:methods للتلخيص هذا جدول يلخص الـvar monthsArray = [ 'Jan' 'Feb' 'Mar' 'Apr' 'May' 'June' 'July' 'Aug' 'Sep' 'Oct' 'Nov' 'Dec'

monthsArray.indexOf() 0 1 2 3 4 5 6 7 8 9 10 11

monthsArray.length 12


:Functions- الدوال12 هي عبارة عن أكواد نكتبها لعمل شيء أو مهمة معينة ، مثل تقريب رقم خلانتني عشرية أو ألي عمليةfunctions الدوال أو الـ

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

من مرة.

إلىstring ، والتي تقوم بتحويل املتغير من نوعparseFloat توجد دوال معرفة في اجلافاسكربت تلقائيا مثل دالةمتغير عادي ، وتوجد دوال نحن نقوم بإنشائها ، وسنتحدث عنها في هذا القسم إن شاء اهللا.

: دالة لتقريب األرقام إلى خانتني عشرية4 البرنامج رقم:لو كان لدينا البرنامج البسيط التالي

var numOne = 7;

var numTwo = 3;

var divideOneOnTwo = numOne / numTwo;

var divideTwoOnOne = numTwo / numOne;

divideOneOnTwo = Math.round(divideOneOnTwo * 100) / 100;

divideTwoOnOne = Math.round(divideTwoOnOne * 100) / 100;

، وبعدها عرفنا متغيرين: األول عبارة عن قسمة قيمة أول3 والثاني قيمته7: األول قيمتهالبرنامج عبارة عن تعريف متغيرينمتغير على ثاني متغير ، والثاني عبارة عن قسمة ثاني متغير على أول متغير.

، طبعا طريقة التقريب متMath.round() وبعدها قمنا بتقريب قيمة املتغيرين اجلديدين إلى خانتني عشرية عن طريق أمر في قسم "بعض األوامر الشائعة".Math.round() شرحها بالتفصيل عندما شرحت أمر

طيب اآلن بدل ما أكتب أوامر تقريب الرقم إلى خانتني عشرية في كل مرة أحتاج إلى تقريب رقم ، سأقوم بكتابة دالة خاصة بهذه :Two Decimal Places ، اختصارا لـtwoDPs. سأسمي الدالةالعملية ، وسأستدعيها كلما احتجت إليها في البرنامج


function twoDPs(anyNumber)

{

return Math.round(anyNumber * 100) / 100;

}

، هي كلمة محجوزة وتدل على وجود دالة.function بالنسبة ألول كلمة ، هي اسم الدالة.twoDPs ثاني كلمة

املوجودة بني القوسني هي مبثابة دليل ، أي أن أي رقم سيأتي في داخل القوسني ، سيتم وضعهanyNumber بالنسبة لكلمة .Math.round() في مكان هذه الكلمة املوجود في أمر

، سيتم التعويض بهذا الرقم في محتوى الدالة9.76543 مثال لو استدعينا الدالة ، ووضعنا في داخل القوسني هذا الرقملتصبح:

return Math.round(9.76543 * 100) / 100;

وطبعا ميكننا تسميته بأي اسم نرغب فيه ولكن يفضل بأن يدل االسم على القيمة التي من املفترض أن يحتوي عليها. إذا لم تتضح فائدة هذه الكلمة تابعوا معي وستتضح إن شاء اهللا بعد قليل.

املوجودة في محتوى الدالة ، هي تعني بأننا إذا قمنا باستدعاء هذه الدالة فنحن نريد منها أن تعيد لناreturn بالنسبة لكلمةقيمة ، أي أننا في مثالنا نريدها أن تعيد لنا في املكان الذي استدعينا فيه الدالة الرقم بعد تقريبه خلانتني عشرية بدال من اخلانات

الكثيرة املوجودة حاليا.

:اآلن عملنا الدالة ، لو افترضنا بأننا نريد استعمالها في نفس البرنامج الذي كتبناه في البداية ، سيتحول البرنامج إلىvar numOne = 7;

var numTwo = 3;



divideOneOnTwo = twoDPs(divideOneOnTwo);

divideTwoOnOne = twoDPs(divideTwoOnOne);

. دعونا نتتبع اخلطوات التي سيعملها البرنامج ابتداء من أولفقط نقوم بكتابة اسم الدالة وفي داخلها القيمة التي نريد تقريبهاأمر ، وانتهاء بآخر أمر لتتضح لكم الصورة:

3 والثاني قيمته7: أنشأنا متغيرين األول قيمتهالسطر األول والثاني

، يعني:3 على7: أنشأنا متغير قيمته تساوي قسمةالسطر الثالثdivideOneOnTwo = 2.3333333333


، يعني:7 على3: أنشأنا متغير قيمته تساوي قسمةالسطر الرابعdivideTwoOnOne = 0.4285714286

، أي أننا نريد تقريب قيمتهtwoDPs عن طريق دالةdivideOneOnTwo: طلبنا تغيير قيمة املتغيرالسطر اخلامسالسابقة إلى خانتني عشرية. وسيكون األمر كالتالي:

divideOneOnTwo = twoDPs(2.3333333333);

. وستكونفي السطر اخلامس ، قمنا باستدعاء دالة ، لذلك سنذهب اآلن للدالة التي استدعيناها قبل تنفيذ مافي السطر اخلامسالدالة بهذا الشكل:

function twoDPs(2.3333333333)

{

return Math.round( 2.3333333333 * 100) / 100;

}

اآلن ؟anyNumber هل اتضحت لكم فائدة كلمة - بنتيجة العمليات احلسابيةreturn- ألننا طلبنا منها ذلك عن طريق أمر اآلن الدالة ستعود للمكان الذي استدعيناها فيه

التي قامت بها ، وستضع النتيجة في مكانها. يعني السطر اخلامس سيتحول بعد عمل الدالة إلى:divideOneOnTwo = 2.33 ;

. وسيكون شكل األمر كالتالي:اآلن سينتقل البرنامج للسطر السادس ، وسيفعل نفس مافعله مع السطر الذي سبقهdivideTwoOnOne = twoDPs(0.4285714286);

، وثم سيعود بالنتيجة احلاصلة من عمل الدالة وهو الرقم0.4285714286 بعدها سيذهب البرنامج إلى الدالة ومعه الرقم ، وسيضعه في املكان الذي استدعينا فيه الدالة:0.43

divideTwoOnOne = 0.43 ;

على0.43 و2.33 يعني لو أضفنا بعد آخر أمر في هذا البرنامج أوامر لكتابة هذين املتغيرين في املتصفح ، ستكون النواجتالتوالي.

:والكود الكامل للبرنامج سيكونfunction twoDPs(anyNumber)

{


}

var numOne = 7;

var numTwo = 3;




document.write(divideOneOnTwo + ' and ' + divideTwoOnOne + ' before

rounding.<br/>');

divideOneOnTwo = twoDPs(divideOneOnTwo);

divideTwoOnOne = twoDPs(divideTwoOnOne);

document.write(divideOneOnTwo + ' and ' + divideTwoOnOne + ' after

rounding.);

. وستكون نتيجة هذاطبعا هنا أضفت أمرين لكتابة قيم املتغيرين قبل التقريب وبعد التقريب حتى تتضح لكم الصورة أكثرالبرنامج املكتوبة في الصفحة هي:

2.3333333333333335 and 0.42857142857142855 before rounding.

2.33 and 0.43 after rounding.

: دالة حلساب املساحة باملتر املربع5 البرنامج رقم.لو أردنا عمل برنامج يأخذ من املستخدم طول وعرض ملكان معني، وسيقوم البرنامج بحساب مساحة املكان عن طريق دالة

وللتذكير املساحة تساوي الطول ضرب العرض!

:أوال ننشئ متغيرين وندع قيمتهم ليدخلها املستخدمvar length = window.prompt('Enter the length', '');

var width = window.prompt('Enter the width', '');

:ثانيا نعمل دالة لتقوم بعملية ضرب الطول في العرض وتعيد النتيجة لناfunction getArea(length, width)

{

return length * width;

}

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


:ثالثا نضع أمر لكتابة النتيجة بالشكل التاليdocument.write('The area is ' + getArea(length, width) );

نالحظ هنا ان الدالة استدعيناها في داخل أمر الطباعة وهو شيء عادي ، وأحببت أن أوضح لكم فيه أن استدعاء الدالة ممكن أن.يكون في أي مكان في البرنامج

التي وضعناها بني القوسني ، هي قيم الطول والعرض التي أدخلها املستخدم.arguments والـ

:البرنامج سيكون كالتاليfunction getArea(length, width)

{

return length * width;

}

var length = window.prompt('Enter the length', '');

var width = window.prompt('Enter the width', '');

document.write('The area is ' + getArea(length, width) );

مثال ، الذي من املفترض أن نكتبهdocument.write ، بعكس أمر>head< طبعا الدوال يتم كتابتها غالبا بني وسميوإنشاء املتغيرات وتعريفها ممكن يكون في أي من املكانني.> ،body< بني وسمي

للعرض:7 للطول و10 طيب منشي مع برنامجنا األخير خطوة خطوة ، على افتراض أن املستخدم أدخل رقمlength = 10

width = 7

:سيذهب البرنامج اآلن إلى أمر الكتابة في املتصفح وسيكتب في املتصفحThe area is

و10 على التوالي. سيذهب البرنامج اآلن للدالة التي استدعيناها بالرقمني7 و10 وفيها قيمتنيgetArea ثم سيجد الدالة لتصبح بالشكل التالي:7

function getArea(10, 7)

{

return 10 * 7;

}


بجانب70 إلى أمر الكتابة في املتصفح الذي توقف عنده ، وسيكمل الكتابة وسيكتب70 ثم سيعود بنتيجة عمل الدالة وهو رقمالكالم الذي كتبه مسبقا لتكون نتيجة الكتابة النهائية:

The area is 70

.إن شاء اهللا تكون وضحت لكم فوائد الدوال وطرق استخدامها


: حساب متوسط التكاليف الشهرية6 البرنامج رقمبكتابة كل شهر لو أردنا عمل برنامج يقوم بأخذ التكاليف لالثني عشر شهرا من املستخدم ، ومن ثم يقوم بعرضها في املتصفح ،

وبجانبه تكلفته في سطر مستقل ، وفي النهاية يكتب لنا متوسط التكاليف لهذه األشهر.: متوسط التكاليف يساوي مجموع التكاليف تقسيم عددها (عدد األشهر).للتذكير

:12 سنمشي خطوة خطوة ، أوال سنقوم بإنشاء مصفوفة لتحمل التكاليف الشهرية و حجمهاvar costsArray = new Array(12);

:for اآلن سنجعل املستخدم يقوم بإدخال التكاليف في هذه املصفوفة باستخدام أمرfor ( var i = 0 ; i < costsArray.length ; i++ ) {

costsArray[i] = window.prompt('Enter the month cost', '');

}

؟string.. هل تذكرون بأن أي قيمة يقوم بإدخالها املستخدم تكون عبارة عن هذا األمر ناقص حتى نستطيع التعامل مع األرقام املدخلة ، كالتالي:parseFloat إذن ، البد أن نقوم بإضافة أمر

costsArray[i] = parseFloat(window.prompt('Enter the month cost', ''));

مرة للمستخدم ، ليدخل فيها التكاليف الشهرية.12 اآلن نفذنا أول خطوة ، وستظهر عن طريقها رسالة

، مبعنى أدخل تكاليف الشهر. لوEnter the month cost: اآلن الرسالة التي ستظهر للمستخدم في كل مرة ستكونافترضنا بأن املستخدم قام باستقبال مكاملة هاتفية أثناء إدخاله للتكاليف ، هل تعتقدون بأنه سيتذكر ماهو آخر شهر أدخل

تكاليفه؟.غالبا لن يتذكر ، والبرنامج اليوجد فيه شيء يذكره باسم أو رقم الشهر الذي توقف عنده

فيi. التعديل بسيط جدا ، سنقوم بإضافة املتغيرلذلك سنقوم بتعديل بسيط على الكود ، حتى يظهر رقم الشهر في الرسالة ألن1 ! ، نريده أن يقول0 الرسالة ، ولكننا سنزيد قيمته بواحد ، ألننا ال نريده أن يقول للمستخدم أدخل تكاليف الشهر

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

costsArray[i] = window.prompt('Enter the monthly cost for month

number ' + (i+1), '');

في داخل قوس ، وهذا يجعل البرنامج يجمع قيمتهم قبل أن يقوم بإظهار الرسالة. وإذا لم نضعi+1 الحظوا أني وضعت ، فهو سيعتقد بأن عالمة الزائد هنا هي للجمع بني متغيرات مختلفة1 ، وبعده رقمi القوسني ، سيقوم البرنامج بإظهار قيمة


وليست العملية الرياضية. مبعنى لو جعلناهم بدون قوسني ، ستكون أول رسالة على الشكل التالي:Enter the monthly cost for month number 01

:والرسالة الثانية ستكونEnter the monthly cost for month number 11

. ولكن اذا وضعناهم داخل قوسني سيتم جمع قيمتهم أوال ثم سيكتب املجموع ،1 ومن ثم كتب رقمi مبعنى أنه قام بكتابة قيم في املرة الثانية.2 في املرة األولى و1 وهو

طيب لو أردنا أن نستبدل األرقام بأسماء األشهر، كيف طريقتها؟ نفس الفكرة ، ولكن سنحتاج إلى كتابة مصفوفة حتتوي على:أسماء األشهر

var monthsArray = ['January','February','March','April','May','June','July'


:وسنقوم بالتعديل على أمر إظهار النافذة ليصبح بالشكل التاليcostsArray[i] = parseFloat(window.prompt('Enter the monthly cost for ' +

monthsArray[i], ''));

، وسيكون املحتوى كالتالي: i = 0 للتوضيح ، في أول عملية تكرار ، ستكون قيمةcostsArray[0] = parseFloat(window.prompt('Enter the monthly cost for ' +

monthsArray[0], ''));

:والرسالة التي ستظهر في هذا األمر هيEnter the monthly cost for January

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

var costsArray = new Array(12);



for ( var i = 0 ; i < costsArray.length ; i++ )

{

costsArray[i] = parseFloat(window.prompt('Enter the monthly cost for '

+ monthsArray[i], ''));

}


for اآلن نريد أن نقوم بكتابة اسم كل شهر وتكلفته في سطر منفصل ، ببساطة سنقوم بإضافة أمر الكتابة في داخل محتوى

بالشكل التالي:document.write(monthsArray[i] + ' : ' + costsArray[i] + '<br/>');

ليصبح:for بهذا الشكل. سيتغير اآلن محتوىi أعتقد أن األمر واضح إذا كنا فهمنا طريقة استعمال املتغيرfor ( var i = 0 ; i < costsArray.length ; i++ )

{



document.write(monthsArray[i] + ' : ' + costsArray[i] + '<br/>');

}

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

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

undefined.في مكان التكلفة

يعني تبقى لنا اآلن عملية حساب املتوسط للتكاليف الشهرية ، وكما نعرف املتوسط سيساوي مجموع التكاليف على عددها ،sum - - سنحتاج اآلن إلى إضافة أمر يقوم بجمع التكاليف الشهرية. لذلك سننشئ متغير جديد ليحسب مجموع التكاليف باسم

.0 وستكون قيمته األوليةvar sum = 0;

حتى يجمع كل تكلفة جديدة يدخلها املستخدم؟for طيب اآلن كيف نستطيع إضافة هذا املتغير في داخل محتوى.للتبسيط ، نريد أن تكون قيمة هذا املتغير في كل تكرار جديد تساوي قيمتها السابقة زائد التكلفة التي أدخلها املستخدم

.1500 + 0 تساويsum كأول تكلفة ، نريد1500 يعني لو افترضنا أن املستخدم أدخل

.2000 + 1500 تساويsum للتكلفة الثانية ، تكون2000 ولو أدخل

، وسيكون بالشكل التالي:for األمر بسيط وال يختلف عن الفكرة األساسية ألمرsum = sum + costsArray[i] ;

:األكواد التي كتبناها حتى اآلن هي كالتالي




var sum = 0;


{




sum = sum + costsArray[i];

}

document.write('The monthly costs average is ' + getAverage(sum,


:لو افترضنا بأن األرقام التي أدخلها املستخدم هي بالترتيب التالي111 112 113 311 256 654 223 123 545 234 233 111

..3026 مجموع هذه األرقام هو

:والنتيجة املكتوبة في املتصفح ستكون كالتالي

January , 111

February , 112

March , 113

April , 311

May , 256

June , 654

July , 223

August , 123

September , 545

October , 234

November , 233

December , 111

The monthly costs average is 252.16666666666666


D: شكل املتوسط لم يعجبكم صح؟

. الدالة سنضعها في األعلى مع الدالةنستطيع هنا أن نستعمل الدالة التي كتبناها سابقا لتقريب الرقم إلى خانتني عشريةاألولى ، وسنقوم باستدعائها هذه املرة في داخل الدالة التي تقوم بحساب املتوسط:


{


}

:واآلن نقوم بالتعديل على دالة حساب املتوسط ، وسنستدعي هذه الدالة في داخلها لتصبح بالشكل التاليfunction getAverage(total, number)

{

return twoDPs(total / number);

}

12 والعدد طبعا3026 اآلن إذا افترضنا أن املستخدم أدخل األرقام السابقة ، سيكون املجموع هو

:يعني ستكون دالة حساب املتوسط كالتاليfunction getAverage(3026, 12)

{

return twoDPs(3026 / 12);

}

252.16666666666666 والناجت هو12 على3026 أول شيء ستتم عملية قسمة

:ثم سينتقل هذا الناجت إلى دالة تقريب الرقم إلى خانتني عشرية ، لتصبح دالة تقريب األرقام بالشكل التاليfunction twoDPs(252.16666666666666)

{

return Math.round(252.16666666666666 * 100) / 100;

}

، وسترجع هذه القيمة إلى دالة حساب املتوسط وليس إلى أمر252.17 وفي النهاية النتيجة التي سترجع من هذه الدالة هيالطباعة!

.ودالة حساب املتوسط ستقوم بدورها بإعادة هذه القيمة إلى املكان الذي استدعينا فيه الدالة

:اآلن وبحمد اهللا اكتمل البرنامج معنا ، وهذا هو الكود النهائي


13- HTML Graphical User Interface : ، سأشرحها من ضمن اجلافاسكربت ألنها التوجد لهاHTML سنتحدث هنا عن بعض أدوات واجهة املستخدم اخلاصة بلغة

فائدة إذا لم نستعملها مع أحد السكربتات كاجلافاسكربت.

:Text boxes- صناديق الكتابة1 ، وهيwindow.prompt() هي حتل محل النوافذ التي نظهرها للمستخدم ألخذ البيانات منه ، أي أنها تعتبر بديل ألمر

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

:Buttons- األزرار2 .ووظيفتها هي تنفيذ أمر عند الضغط عليها من قبل املستخدم

واألزرار وصناديق الكتابة يعتبرون مكملني لبعض ، ألنه غالبا سنقول للبرنامج أن يفعل شيء معني بالكتابة أو القيمة املوجودة في عند الضغط على الزر.text box الـ

وهي أكواد>form> </form< األزرار وصناديق الكتابة يجب أن تكون في داخل فورم ، ووسمه أو شفرته هيHTML.ولكل صندوق كتابة أو فورم اسم خاص به ، وسنرى فائدة كل هذا اآلن ،

:لعمل صناديق الكتابة نستعمل األكواد التالية<input type="text" name="anyName" value=""/>

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

ثالثة عناصر هامة:1 -”type="text : .يدل على أن النوع اللذي اخترناه هو "صندوق للكتابة" ألنه توجد أنواع أخرى مثل األزرار وغيرها2 -"name="anyName : هو اسم نضعه لهذا املربع وفائدة االسم هي اذا أردنا أن نقوم بالتعامل مع هذا املربع عن

طريق جافاسكربت سنذكر اسم املربع الذي نريد التعامل معه، ستتضح أكثر بعد قليل ان شاء اهللا.3 -=“”value : هذا العنصر هو فائدة صندوق الكتابة الرئيسية ، غالبا سنترك قيمته فارغة ، والقيمة التي سيدخلها

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

، ألنه ليس له شفرة إغالق (مثل كود عرض الصور)./ وفي النهاية قمنا بإغالق هذا الكود بـ


.طيب دعونا ننتقل لطريقة عرض األزرار اآلن ، ثم سنشرح طريقة التعامل مع االثنني

:لعرض زر في الصفحة ، سنستعمل الكود التالي<input type="button" value="Click here" onclick=""/>

1-” type="button : ”زر أو "button يدل على أن النوع اللذي اخترناه هو

2 -”value="Click here : .هو الكالم الذي نريده أن يظهر على الزر ، مثل اضغط للتحويل أو اضغط هنا3 -=""onclick : هذا هو أهم عنصر في األزرار ، األمر الذي سنكتبه هنا سيقوم بتنفيذه عندما يضغط املستخدم على

الزر. وغالبا سيكون األمر املوجود هنا عبارة عن استدعاء لدالة.

، ألنه ليس له شفرة إغالق (مثل كود عرض الصور)./ في النهاية قمنا بإغالق هذا الكود بـ.. ومثل سابقه

، وسمينا هذا الفورم بأي اسم ،>form< إذا جمعنا األمرين السابقني لعرض صندوق الكتابة والزر ، ووضعناهم بداخل فورمسيكون الكود كامل كالتالي:

<form name="formName">

<input type="text" name="anyName" value=""/>

<input type="button" value="Click here" onclick=""/>

</form>

، وفتحنا امللف باملتصفح ، سنرى>body> </body< بني شفرتيHTML لو قمنا اآلن بوضع هذا الكود في داخل ملفالنتيجة التالية:

طبعا شكل األيقونة يختلف من نظام تشغيل آلخر ، فهذه الصورة مأخوذة من نظام تشغيل ماكنتوش وليس ويندوز ، فال.تستغربوا إذا ظهرت لديكم بشكل مختلف قليال

. .. دعونا ننتقل لطريقة التعامل معهم واالستفادة منهم عن طريق اجلافاسكربتاآلن عرفنا كيف نعرضهم على الصفحة


: التحويل من لتر إلى جالون7 البرنامج رقم(عن طريق صناديق الكتابة) ومن ثم يحولها إلى جالون ، مع العلم بأن سنقوم بعمل برنامج يقوم بأخذ قيمة باللتر من املستخدم

لتر.0.21998 اجلالون يساوي

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

:فنكتب األكواد اخلاصة بعرض صندوقي الكتابة والزر كالتالي<form name="converter">

Enter the value in litres:

<br/>

<input type="text" name="litres" value="" />

<br/>

<br/>

<input type="button" value="Convert" onclick="" />

<br/>

<br/>

The equivalent value in gallons is:

<br/>

<input type="text" name="gallons" value="" />

</form>

، حتى نضع في داخله صندوقي الكتابة وزر التحويل.converter وسميناه>form<: كتبنا شفرةأوالvalue: كتبنا أمر لعرض صندوق كتابة ، حتى يقوم املستخدم بكتابة الكمية باللتر في هذا الصندوق (ولذلك تركتنا قيمتهثانيا

فارغة).: كتبنا أمر لعرض زر ، حتى يقوم بعملية التحويل ، وتركنا العنصر الثالث فارغا اآلن وسنعود له بعد قليل.ثالثاvalue: كتبنا أمر لعرض صندوق كتابة ، نريد من البرنامج أن يقوم بعرض نتيجة التحويل فيه (ولذلك تركنا قيمتهرابعا

فارغة).:إذا استعرضنا نتيجة هذا الكود في املتصفح ، ستكون كالتالي


.اآلن كل ما قمنا بعمله هو مجرد منظر ، فهو لن يقوم بأي استجابة للمستخدم ، ألننا لم نضف له أي كود أو أمر جافاسكربت

:litresToGallons اآلن سنعمل دالة تقوم بتحويل الكميات من لتر إلى جالون ، وسنسميهاfunction litresToGallons(litres) {

return litres * 0.21998;

}

.إلى اآلن لم نقم بشيء جديد ، فقط أنشأنا دالة تقوم بتحويل القيمة التي تأتي إليها من لتر إلى جالون

عن طريق هذا األمر:القيمة التي أدخلها املستخدم في صندوق الكتابة األول ، سنحصل عليهاdocument.converter.litres.value

document.ثابت وال يتغير : converterهو االسم الذي أعطيناه للفورم الذي يحتوي على صندوق الكتابة، وضحت فائدة االسم اآلن؟ :

litresهو اسم صندوق الكتابة الذي سنتعامل معه ، ألن مثل حالتنا يوجد صندوقي كتابة ، وعن طريق االسم نستطيع : التمييز بينهم.

value.هو املكان الذي كتب فيه املستخدم القيمة باللتر :

:يعني صندوق الكتابة الثاني ، سيكون عنوان القيمة اخلاصة فيه هوdocument.converter.gallons.value

االختالف الوحيد بني العنوانني هو اسم الصندوق فقط ، ألنهم موجودين في نفس الفورم ، وكال الصندوقني ستكون قيمهم.value موجودة في

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

:ببساطة أكثر ، نريد هذه الدالة أن تقوم بتنفيذ هذا األمرdocument.converter.gallons.value =

litresToGallons(document.converter.litres.value)

(اخلاص بالنتيجة) يساوي: القيمة املوجودة في الصندوق األول بعد حتويلها إلى يعني ستقوم بجعل قيمة صندوق الكتابة الثانيلتر عن طريق دالة التحويل.


في صندوق الكتابة األول ، سيكون األمر بالشكل التالي:20 مبعنى لو قام املستخدم بكتابةdocument.converter.gallons.value = litresToGallons(20)

وستكون النتيجة 0.21998 في20 بعدها سينتقل البرنامج إلى دالة التحويل من لتر إلى جالون ، مبعنى انه سيضرب رقم ، وسيعود بهذه النتيجة وسيضعها في العنوان اخلاص بصندوق الكتابة الثاني.4.3996

:اآلن سنكتب هذه الدالةfunction convert() {

document.converter.gallons.value =

litresToGallons(document.converter.litres.value);

}

في هذه الدالة لم نقم بوضع عالمة أو اسم بني القوسني ألننا النحتاج لذلك ، أو مبعنى آخر ، إذا استدعينا الدالة عن طريق الزر.ال نحتاج إلرسال قيمة لها

اآلن أصبح كل شيء جاهزا للعمل ، تبقى فقط أن نقوم باستدعاء الدالة األخيرة بواسطة الزر ، فسنرجع ألكواد صناديق الكتابة ، بالشكل التالي:onclick والزر ، وسنضيف للزر استدعاء الدالة في عنصره الثالث

<form name="converter">


<br/>


<br/>

<br/>

<input type="button" value="Convert" onclick="convert()" />

<br/>

<br/>


<br/>


</form>

.>body> </body< هذه األكواد ستكون بني شفرتي

.>head> </head< وأكواد الدوال سنضعها في داخل شفرات

كامل ، سيكون بالشكل التالي:HTML فإذا جمعنا كل ماقمنا به ، ووضعناه في ملف


<html>

<head>

<title> Litres to Gallons Converter </title>

function litresToGallons(litres)

{

return litres * 0.21998;

}

function convert()

{

document.converter.gallons.value =

litresToGallons(document.converter.litres.value)

}

</head>

<body>

<form name="converter">


<br/>


<br/>

<br/>

<input type="button" value="Convert" onclick="convert()" />

<br/>

<br/>


<br/>


</form>

</body>

</html>

في املربع األول ، ثم ضغطنا على زر التحويل ، ستظهر لنا النتيجة التالية:20 فإذا كتبنا رقم


طبعا أهم شيء هنا ، هو أن نكون عرفنا كيف أخذنا القيمة التي كتبها املستخدم في مربع الكتابة ، وكيف جعلنا الزر يقوم بشيء.معين

:القيمة التي كتبها املستخدم في صندوق الكتابة ، أخذناها عن طريق هذا العنوانdocument.converter.litres.value

.ثابتاسم الفورم.اسم صندوق الكتابة.ثابت

، هذه الدالة تقوم بأخذ القيمة من صندوق الكتابةonclick وبالنسبة للزر ، كل ما قمنا بعمله هو استدعاء دالة في عنصراألول ، وتقوم بتحويلها أو التعديل عليها ، ومن ثم عرضها في صندوق الكتابة الثاني.

:عنوان صندوق الكتابة الثاني هوdocument.converter.gallons.value

.ثابتاسم الفورم.اسم صندوق الكتابة.ثابت

طبعا نستطيع تطوير البرنامج عن طريق إضافة دالة تقريب الرقم إلى خانتني عشرية إذا أردنا ، عن طريق استدعائها في دالة.التحويل إلى جالون

كلهم يحتاجون إلى ثالث عناصر:واألزرار صناديق الكتابة للتلخيص1- type: صناديق الكتابة نوعها text ،و األزرار نوعها button.

وتكون عبارة عن نص يظهر فوق الزر.value و األزرار لها ،name صندوق الكتابة له اسم -2 ، وهيonclick األزرار لها وهو املكان الذي سيحمل القيمة املوجودة في الصندوق ، وvalue صندوق الكتابة له -3

.ستنفذ األمر املوجود فيه عند الضغط على الزر


: البحث عن رمز االتصال الدولي لدول العالم8 البرنامج رقمفكرة البرنامج هي أن يستطيع املستخدم أن يبحث عن رمز االتصال الدولي التابع ألي دولة ، عن طريق كتابة اسم الدولة

. مبعنى انه يوجد قسمني:الكامل ، أو البحث عن اسم الدولة الذي يتبع لها رمز اتصال دولي يدخله املستخدم- أن يكتب اسم دولة ليحصل على رمز الهاتف الدولي اخلاص بها.1

- أن يكتب رمز اتصال دولي ليعرف اسم الدولة التابعة له.2

:وهذه هي واجهة البرنامج

في هذا البرنامج لن أشرح شيء ، ولكن سأكتب فكرة عمل البرنامج ، وللمعلومية ، نحن غير مطالبني بكتابة مثل هذا البرنامج ،فهو محاولة إجتهادية مني ، ولكن من يريد االستفادة والتأكد من أنه فهم كل مامت شرحه في األقسام السابقة يجب أن يفهم

.طريقة عمل هذا البرنامج

: في البداية أنشأت مصفوفتني:طريقة عمل البرنامج كتبت فيها رموز االتصال الدولي لهذه الدول.- الثانية:2 كتبت فيها أسماء الدول.- األولى:1

، وهو أن مراكز عناصر الدول في مصفوفة الدول ، هي نفس مراكز الرمز الدولي اخلاص بها فيشرط ضروري و يوجد هنا هو966 يجب أن يكون مركز الرمز22 مصفوفة رموز االتصال. مبعنى لو افترضنا بأن مركز السعودية في مصفوفة الدول هو

في مصفوفة رموز االتصال الدولي وإال لن يعمل البرنامج بشكل صحيح.22

عندما يقوم املستخدم بكتابة اسم دولة ، فإن البرنامج سيبحث عن مركز هذه الدولة في مصفوفة الدول عن طريق مثودindexOf.وبعدها سيقوم باستدعاء الرمز املوجود في نفس هذا املركز من مصفوفة رموز االتصال الدولي ،


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

United طبعا البرنامج يوجد فيه عيب، وهو أن املستخدم إذا أراد أن يبحث عن رمز االتصال الدولي لدولة معينة مثل

Statesيجب أن يكتب نفس االسم وحجم األحرف بالضبط ، فلو كتب ، – - united statesأو USAمثال ستكون النتيجة undefined.ألن هذه الكلمات غير موجودة في املصفوفة

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

حتتاج إلى مجهود ليس بالقليل.

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

مت بحمد اهللا

قت في شـرح هـذه اللغـة اجلـميـلـة بـبـسـاطـة وسهـولـة .أمتنى أن أكون وفـ

.في حال وجود أخطاء إمالئية أو قواعدية أو في الشرح أمتنى أن تعذروني

املعتصم: أخوكم


شرح لغة جافاسكربت للمبتدئين · .debugging ﻰﻠﻋ ﻦﻜﻤﳌﺍ...

Documents