المتغيرات:
في البداية أود منك ان تنظر إلى هذا الكود و تجربه

في الكود الموجود بالأعلى myVariable و myVariable2 و myVariable3 نسميهم بالمتغيرات Variables .لكن ما هي بالضبط المتغيرات؟ و ما أهميتها و كيف نتعامل معها في لغة الجافا سكريبت ؟ هذا هو موضوع درسنا .

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

ففي الكود الذي أمامك بالأعلى أولا قمنا بتعريف المتغير myVariable و ذلك بأن وضعنا إسمه بعد كلمة var و التي عندما يجدها البرنامج يعرف أن ما بعدها متغير ,ثم بالإضافة لتعريفه فإننا وضعنا فيه قيمة رقمية و هي 3 و بذلك أصبح المتغير myVariable يمثل الرقم ثلاثه و لذا عندما أضفناه على رقم 2 أصبح في داخل المتغير myVariable2 الرقم 5 و الذي قمنا بإضافته هو أيضا إلى النص "The value is: " ووضعنا النتيجة في المتغير myVariable3 و التي ستظهر لك في صندوق عندما تجرب البرنامج ستجد الصندوق مكتوب فيه The value is 5

قواعد كتابة المتغيرات:

• الحروف الكبيرة غير الحروف الصغير فمثلا المتغير Name ليس هو نفسه المتغير name ,لكن كل واحد منهم متغير ليس له علاقة بالآخر.
• يجب أن يبدأ اسم المتغير بحرف أو بشرطه كبيرة "_".
• بقية الإسم يمكن أن تكون حروف أو أرقام أو شرطة كبيرة .
• لا يمكن إستخدام كلمات مستخدمه كأدوات خاصة بالجافا سكريبت كأسامي للمتغيرات فمثلا لا يمكن أن تسمى المتغير var أو if أو غيرها من الكلمات المحجوزة لمكونات اللغة.

البيانات:

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

• اللاشيء null
• الأرقام numberss.
• النصوص strings.
• صح أو خطأ Booleans.

أولا: null

إذا قمنا بتعريف متغير ووضع القيمة null له كالتالي :

var Variable= null

فإنه ستكون له القيمة صفر إذا إستخدمناه كرقم ,و ستكون له القيمة خطأ false إذا إستخدمناه كـBooleans. و للتوضيح أكثر إنظر للأمثلة التالية القيمة صفر

var Variable= null
var result=Variable+1

قيمةresult ستساوي 1 كأن قيمة المتغيرVariable صفر القيمة خطأ(false ) إن لم يكن معناها واضح الآن سيتضح بعد أن تمر على الجملة الشرطية if و هي تنفذ جملة معينه إن كان ما بين قوسيها صحيح و جملة أخرى إن كان ما بين قوسيها خطأ .

if(null)
result=1;
else
result=0;

و هنا ستكون قيمة result صفر لأن null تعامل كأنها false.

ثانيا: الأرقام .

و هي الأرقام بالنظام العشري أي الأرقام التي نعرفها المكونه من الأعداد من صفر لتسعه مثلا 1 أو 22 أو 1000 إلخ و توضع كما هي بدون أن يتم وضعها بين علامات تنصيص.

var num1=1;
var num2=2;

و يتم عليهم العمليات الحسابية الجمع و الطرحو الضرب و القسمه من خلال أدوات العمليات الحسابية الجمع +

var result =num1 +num2

الناتج سيكون 3

الطرح -

var result =num2-num1

الناتج سيكون 1

الضرب *

var result =num2*4

الناتج سيكون 8

القسمة /

var result =num2/num2

الناتج سيكون واحد

ثالثا:النصوص أو الأوتار strings

في لغة الجافا سكريبت كما في لغات أخرى يعرف النص من خلال وضعه بين علامتي تنصيص "" أو '' و ليس هناك فرق بينهم في الجافا سكريبت فمثلا var text="this is text" هي نفسها var text ='this is text' لكن أحيانا نحتاج لإستخدامهم هما الإثنين معا فمثلا

document.write("<FONT COLOR='red' SIZE=4>")

دالة document.write تقوم بكتابة ما يوجد بين قوسيها في صفحة المتصفح . إن وضعت كلمة red بين علامتي تنصيص "" سيحدث خطأ أي أنك عندما تضع حول النص علامتي تنصيص من هذا النوع "" إن أردت أن تضع علامتي تنصيص داخله لابد أن يكونا من هذا النوع '' و العكس. و قبل أن نذهب إلى البيانات البلونية ,أود أن أذكر لك شيء يخص الأرقام و النصوص و خلطهم,فلابد أن تعرف أن "1" بين علامتي تنصيص ليست هي نفسها الرقم 1 بدون علامتي تنصيص و أن علامة الجمع إن وضعت بين رقمين فإنها تجمعهم الجمع الحسابي المعروف.أما إن وضعت بين نصين فإنها تلصقهم ببعض و تجعلهم نص واحد و كذلك إن أضيف رقم لنص و الأمثلة التالية توضح المقصود,الموجود بين علامتي // هو الناتج .

/* 1 */ 8 + 8 // 16
/* 2 */ "8" + 8 // "88"
/* 3 */ 8 + "8" // "88"
/* 4 */ "8" + "8" // "88"
/* 5 */ 8 + 8 + "8" // "168"
/* 6 */ 8 + "8" + 8 // "888"

رابعا :الصح و الخطأBooleans

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

و تدعم الجافا سكريبت عمليات الجبر البلوني و أهمها مع (AND(و تتم من خلال الأداة && و أو (OR(و تتم من خلال الأداة ||
و الأداة AND تعطي ناتج خطأ إن كان أيا من القيم خطأ فمثلا true&&false=false بينما ال OR تعطى صح إن كان أيا من القيم صح.و إن لم يكن الأمر واضحا سيتضح أكثر عندما نتحدث عن الجمل الشرطية.

الدوال functions جزء أساسي من أي لغة برمجة و توجد عدد من الدوال الموجودة في بناء اللغة نفسه و دوال يقوم المستخدم بتعريفها و سنستعرض في درسنا وصف مبسط للأثنين.

الدوال الموجودة مسبقا في اللغة:
ربما أسهل طريقة لأن نوضح ما هي الدالة أن نستخدم مثال على دالة و لتكن دالة الـ alert.و التي هي من الدوال الموجودة في بناء الجافا سكريبت نفسه built in ووظيفتها هي أنها تظهر النص الذي تعطيه لها في صندوق كما سترى في المثال التالي :
و من الأمثلة الأخرى على الدوال الموجودة في الجافا سكريبت دالة document.write و التي تعرض النص الذي تعطيه لها في صفحة المتصفح نفسها و أيضا داوال مثل toUpperCase()و التي تحول حروف النص إلى حروف كبيرة UpperCase . ستعرف بعد ذلك معنى النقطة الموجودة في هذه الدوال في الدرس الخاص بالكائنات أي الـobjects و ستعرف أنها تسمى بإسم آخر أيضا و هو الـ method.و المثال التالي يوضح كيفية عمل هذه الدوال: و كما ترى يوجد بعد أي دالة قوسين قد توضع فيهم بيانات تسمى بالـ parameter و في بعض الأحيان لا توضع .و البرامتر هو دخل الدالة الذي يتحدد على أساسه قيمة الخرج فمثلا في دالة alert النص الذي أدخلناه بين القوسين كبرامتر هو النص الذي ظهر في الصندوق و كذلك مع الدالة document.write و لكن كما ترى مع دالة toUpperCase لم نضع شيئا بين القوسين فهي دالة لا تحتاج إلى دخل حيث تنفذ على النص الذي وضع قبل النقطه السابقة لها .و الخلاصة هي أن كل دالة يتبعها قوسين قد يوضع فيهم برامترز تأثر على الناتج و أحيانا توجد بعض الدوال لا تحتاج لبرامترز. و يوجد كثير جدا من الدوال الموجودة في لغة الجافا سكريبت تقوم بعديد من الوظائف و سنتعرض لكثير منها على مدار الدروس القادمه.

الدوال المعرفة بواسطة المبرمج:

الدالة يتم تكوينها من مجموعة من الأوامر المتتالية و التي تشكل بناء يكون له إسم معين تناديها به ,و كل دالة يجب أن يكون لها وظيفة محددة تقوم بها و كما قمنا بتعريف المتغير من خلال كلمة var فإن للدالة طريقة لتعريفهايتم تعريف الدالة من خلال إستخدام كلمة function ثم بعدها إسم الدالة يتبعه قوسين يتم وضع البرامترز فيهم ثم بعد ذلك قوسي مجموعة يوضع بينهم الأوامر التي تحتويها الدالة.أي وفق هذا النموزج

function functionName([parameters])
{
[statements]
}

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

var square=number * number

يقوم بضرب البرامتر في نفسه و وضع قيمة الناتج في المتغير square و يستبدل البرامتر بالقيمة التي ترسل في موضعه عند مناداة الدالة. أما الأمر التالي :

document.write("The call passed ", number, // the function's parameter " to the function.<BR>", number, // the function's parameter " square is ", square, ".<BR>")

فهو يقوم بعرض الناتج في الصفحه. و لا تعمل الدالة فور تعريفها لكن تعمل عندما تناديها و إذا نظرت في المثال بعد تعريف الدالة ستجد الأمر square(3) وهو عبارة عن مناداة الدالة من خلال كتابة إسمها و كتابة القيمة التي تريدها أن تكون للبرامتر . وقبل أن ننتهي من تقديم الدوال أود أن أذكر شيئين:

• الدوال يمكننا تعريفها لتقبل عدد معين من البرامترز أو جعلها لا تقبل.
• الدوال يمكن أن ترجع لنا بيانات أو لا.

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

if{} :
الجمل الشرطية في أبسط صورة لها يكون تكوينها كالتالي:

if (الشرط)

الأمر

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

if(num==1)
alert("equal")

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

2 == 1 // تعطينا false
99.0 == 99 // تعطينا true

أما الأداة"=":فإنها تضع قيمة ما على يمينها في المتغير الموجود على يسارها . و الأداة "==" هي واحدة من أدوات المقارنة اللذين هم:

• == يساوي
• != لا يساوي
• < أقل من
• <= أقل من أو يسواي
• > أكبر من
• >= أكبر من أو يساوي

وفي جميعهم إن تحققت العلاقة و كانت صحيحة يرجع true و إن لم تتحقق يرجع false,وللتوضيح أكثر فإنه مثلا إن كتبت هذا الكود: result =4<7 فإن قيمة result ستكون صفر لأن العلاقة لم تتحقق فتم إرجاع صفر و من خلال الأداة = تم وضعه في المتغير result و إن و ضعنا المتغير result داخل قوس if أي وضعناه محل الشرط هكذا if(result) alert('true") فإن الأمر الذي يليه alert('true") لن يتم تنفيذه فإنه و كصياغة أخرى لما قلناه من قبل إن كانت القيمة بين قوسي if true ينفذ الأمر الذي يليها أما إن كانت false فإنه لا ينفذ. ولذلك إن وضعنا في قوسي if القيمة true مباشرة هكذا

if(true)
أي أمر

فإن الأمر الذي يليها سيتم تنفيذه دائما كأنها غير موجودة أما إن وضعنها فيها القيمة false مباشرة هكذا

if(false)
أي أمر

فإن الأمر الذي يليها لن يتم تنفيذه أبدا كأن الأمر غير موجود. و إن كانت القيمة أو الناتج الموجود بين قوسي if غير true أو false فإنه يتم تفسيرها كالتالي : أي قيمة غير الصفر تعتبر true ,أما الصفر فيعتبر false كذلك القيمة null تعتبر false . في كل الأمثلة التي عرضناها سابقا فإن كلمة if تحكم تنفيذ أمر واحد فقط و لكن ماذا لو كنا نريد أن نجعل تنفيذ مجموعة من الأوامر وليس أمرا واحدها فقط مشروطا بتحقيق الشرط ما بين قوسي if ؟يتم ذلك كالتالي :

if (الشرط)
{
الأمر الأول 
الأمر الثاني 
الأمر الثالث
}

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

var name = prompt("Enter your name:", "John Doe")

و هو عبارة عن دالة prompt و موضوع لها برامترين الأول عبارة عن النص الذي يقوله لك الصندوق الذي تظهره "Enter your name:" و الثاني فهو القيمة الإفتراضية التي ستجدها موجودة في المكان المطلوب كتابة إسمك فيه John Doe و الدالة موضوعة بعد علامة = حيث يتم وضع القيمة التي ترجعها و هي ستكون النص الذي ستدخله أنت في المتغير name . بعد ذلك ستجد تعريف لدالة تستقبل رقم و تقوم برسم خط أفقي بطول هذا الرقم الذي أدخلته .

function drawRule(width) { document.write("<HR WIDTH=" + width + "%>") }

ثم بعد ذلك ستجدة أداة الشرط if موضوع بين قوسيها الدالة confirm و التي تظهر النص الذي يوضع لها بين قوسيها في صندوق يخير المستخدم بين الضغط على ok أو cancel و إذا ضغط المستخدم ok فإنها ترجع القيمة true أما إذا ضغط cancel فإنها ترجع القيمة false و إذا نظرت للمثال ستجد العلامة ! موضوعه قبل دالة confirm و هي أداة النفي و التي تحول true إلى false و تحول false إلى true و بالتالي إذا ضغطت على ok فإن دالة confirm سترجع القيمة true التي ستعكسها أداة النفي ! إلى false و بالتالي لن تنفذ الأوامر التابعه ل if أما إذا ضغط المستخدم cancel فسترجع قيمة false فتعكسها ! إلى true و تنفذ الأوامر التي تليها والموضوعه بين قوسي مجموعة و التي هي:

{ document.write("<CENTER><B>") document.write("Hello " + name + "!<BR>") drawRule(50) document.write("Please download the latest ", "version of Netscape Navigator or Internet Explorer") document.write("</B></CENTER>") }

و كلها أوامر لإظهار نصوص في الصفحه بالدالة document.write الأول يظهر ترحيب بالإسم الذي أدخلته في المتغير name من خلال صندوق ال prompt بالإضافه إلى تاج الهيتمل <br> ثم بعد ذلك ينادي الدالة التي ترسم الخط و يضع فيها قيمة 50 و الأوامر التالية أيضا تقوم بطباعة نصوص موجودة فيها .و ستجد أن كل هذه الأوامر تنفذ إن ضغط cancel و يظهر لك نص في الصفحه يطلب منك تحديث المتصفح أما إن ضغط ok فلن ينفذ أيا من هذه الأوامر لأن شرط if لن يتحقق .

if {}else{}

ما تعلمناه بالأعلى هو أن نضع شرطا لأمر معين أو عدة أوامر إن تحقق الشرط يتم تنفيذ الأوامر و إن لم يتحقق لا يتم تنفيذ أي شيء ,ما سنتعلمه الآن هو أن نضع شرط إن تحقق ننفذ أمر معين و إن لم يتحقق يتم تنفيذ أمر آخر و يتم ذلك من خلال إستخدام الأداة else كالتالي :

if (الشرط)
{
الأوامر التي سيتم تنفيذها إن تحقق الشرط 
}
else
{
الأوامر التي سيتم تنفيذها إن لم يتحقق
}

و الأداة else لا تستخدم وحدها أبدا لكنها تستخدم مع if و هي مثل if من حيث أنه إنها تطبق على الأمر التابع لها مباشرة و إن أردت ربطها بعدة أوامر فإنك تستخدم قوسي المجموعة {} أيضا . و للتوضيح أكثر إن كان الشرط الموجود بين قوسي if قيمته true أي صحيح: فإن الأمر أو مجموعة الأوامر التالية لـ if فقط هي التي تنفذ . أما إن كان الشرط الموجود بين قوسي if خطأ false: فإن الأوامر الموجودة بين القوسين التالليين لـ else فقط هي التي تنفذ . و المثال التالي يوضح أكثر هذا المفهوم وهو عبارة عن إختبار لعمر المستخدم إن كان اكبر من 21 سنة أو لا جربه و كالعادة شرحه أسفله: في البداية من خلال هذا السطر var age = parseInt(prompt("Please enter your age:", 120)) يظهر لك صندوق يطلب أن تضع عمرك من خلال دالة الprompt, و الذي نلاحظه أننا في هذه المرة وضعنا دالة prompt كبرامتر لدالة أخرى هي parseInt و التي تقوم بتحويل أي قيمة توضع لها إلى رقم صحيح و يتم إرجاع الناتج في المتغير age . في السطر التالي نقارن بين القيمة التي وضعت في age و الرقم 21 من خلال أداة المقارنة أصغر من if (age < 21) و بالتالي إن كنت قد أدخلت عمرك أصغر من ال 21 سيتحقق الشرط و بالتالي يتحقق الأمر التالي ل if و الذي هو alert("Sorry, you are too young to enter") فيهر لك صندوق به النص Sorry, you are too young to enter . أما إن أدخلت عمرك أكبر من 21 لن يتحقق الشرط أنه أنه سيكون false و بالتالي يظهر لك الأمر التالي لelse فيظهر لك النص Welcome in... في صندوق .

if-else المتداخلة

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

if(الشرط الأول)
{الأمر الأول }
else if(الشرط الثاني )
{الأمر الثاني }
else if(الشرط الثالث)
{الأمر الثالث }
else
{الأمر الأخير}

و كما ترى في أول شرط إستخدمنا if فقط أما في بقية الشروط استخدمنا else if ثم في الختام إستخدمنا else قبل آخر أمر و آخر أمر هذا هو الأمر الذي سيتم تنفيذه إن لم يتحقق ولا شرط من الشروط . و كتطبيق على هذا المفهوم سنصنع برنامج نعطي له رقم ثم نختبر هل هو أصغر من الخمسه أو يساويها أم هل هو بين 5 و 10 أم بين 10 و 15 أم أكبر من 15 و سيكون البرنامج كما بالمثال التالي: و المثال واضح و بسيط ففي البداية قمنا بإختبار هل الرقم يساوي 5 أو أقل منها من خلال if(num<=5) إن كان الرقم أقل من أو يساوي خمسة سيعرض البرنامج النص the is number is 5 or less than 5 أما إذا كان أكبر من الرقم خمسه فإنه سيذهب للشرط التالي الذي سيختبر إن كان أقل من الرقم 10 أو لا و هكذا حتى إذا لم يتحقق أي من الشروط هذا يعني أن الرقم ليس أصغر من 5 و ليس أصغر من 15 فبالتالي هو أكبر من 15 فيعرض البرنامج آخر أمر و هو the is number is 5 or less than 5. ملحوظة :إن قمت بإزالة else الأخيره و الأمر الذي يليها فإنه إن لم يتحقق أي من الشروط التي بالأعلى لن يتم تنفيذ أي أوامر و سينتقل البرنامج لما يلي من السطور.

switch:

switch هي أداة أخرى لإتخاذ القرارات و هي في عملها قريبة الشبه بآخر حالة تم عرضها لـ if و هي else if المتداخلة فأنت مثلا إن كان لديك متغير و ليكن num و تريد أن تعرض نص يقول أن هذا الرقم يساوي واحد إن كانت قيمة num واحد و عرض نص يقول أن النص يساوي إثنني إن كانت قيمة النص اثنين و هكذا لعدد محدد من القيم نعرض عدد محدد من النصوص فإنه يتم ذلك بإستخدام الـ switch و الشكل العالم لجملة الـswitch يكون كالتالي:

switch (متغير)
{
case القيمة الأولى:
أوامر الحالة الأولى
break;
case القيمة الثانية:
أوامر الحالة الأولى
break;
case القيمة الثالثه:
أوامر الحالة الثالثه
default:
الأوامر التي ستنفذ إذا لم تحقق أيا من الحالات بالأعلى.
}

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

• case و توضع بعدها القيم التي عندما يساويها المتغير تنفذ الأوامر التالية و توضع القيمة بين case و بين هذه العلامة":" التي يوضع بعدها الأوامر.
• default:و يوضع بعدها الأمر الإفتراضي الذي سينفذ إن لم يكن منطبق على المتغير حالة أخرى.
• break:و هذه الكلمة تجعل البرنامج لا يمر على اوامر الحالات التالية و يذهب لنهاية جملة الـswitch و هي مهمة لأنه لو لم تضعها
بعد إن صحت حالة من الحالات بالأعلى فإن البرنامج سيكمل في قراءة بقية الحالات حتى يصل إلى default و default دائما تنفذ الأمر الخاص بها مدام تم الوصول لها و بالتالي سينفذ البرنامج دائما الأوامر الموجودة بعد default في كل الحالات إن لم تضع break بعد أوامر كل حالة .

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

rainy,sunny,cloudy,windy,cold

إن قمت بإختيار أيا من هذه الخيارات سيعرض لك الخيار الذي إخترته في صندوق بالإضافة لنصيحة مناسبة,أما إن أدخلت أي كلمة غير هذه الكلمات المحددة سيظهر لك صندوق مكتوب فيه I don't know that type of weather و كما ترى قمنا بإستخدام switch بالطريقة التي شرحناها سابقا لعمل البرنامج .

جملة الشرط المختصرة

هناك طريقة مختصرة لكتابة جملة if و هي قد تكون مفيدة جدا في بعض الحالات و هي كالتالي

var res=(condition)?("case true value "):("case false value ");

يوضع الشرط فيما بين قوسين يليهم علامة إستفهام؟ ثم يليه قوسين بينهم العلامة : في حالة تحقق الشرط يتم إرجاع القيمة الموجودة بين القوسين الموجودين قبل : في المتغير res أما في حالة كان الشرط خطأ فيتم إرجاع القيمة الموجودة بين القوسين التاليين للعلامة : و التي توازي الكلمة else . و نتيجة كتابة الكود بهذا الشكل هي نفسها النتيجة التي يمكن الحصول عليها بطريقة if التقليدية الناتجة عن هذا الكود

if(conditon)
{
var res="case true value "
}else
{
var res="case false value "
}

و المثال التالي تطبيق على هذه الطريقة
و كما ترى الناتج سيكون is smaller than 8 و هو الموجود بعد العلامة : لأن الشرط الموجود قبل علامة الإستفهام (3>8) لم يتحقق
أي أنه أعطى النتيجة خطأ false.

و بهذا نكون تقريبا قمنا بتغطية كل شيء خاص بالقرارت و الجمل الشرطية لننتقل إلى مفهوم آخر خاص بكيفية تكرار تنفيذ أمر,وهو الـ loops
أي الحلقات.

إذا كنت تريد أن تكتب برنامجا يطبع على الشاشة الأرقام من 1 إلى 100 بدون إستخدام الحلقات loops ليس هناك طريقة غير أنك تكتب المئة
رقم داخل الدالة التي تنفذ أمر الطباعه أي سيكون هكذا:

document.write("1 </br>")
document.write("2 </br>")
document.write("3 </br>")
document.write("4 </br>")
document.write("5 </br>")
وهكذا تظل تكرر الكود حتى تصل للمئة بعد عمر طويل!!
...
document.write("100 </br>")

و بالطبع لا يمكن أن تكون البرمجة شيئا مملا و عقيما هكذا . إن كنت تريد أن تكتب برنامجا يطبع على الشاشة 100 رقم فيمكنك بإستخدام الحلقات loops أن تكتب برنامج من سطرين يقوم بهذه المهمة .فما هي بالضبط الحلقات؟ هي أداة أو بناء (أي مجموعة كلمات وعلامات) تمكنك من تكرار أمر معين أو مجموعة من الأوامر موضوعة بين قوسين مجموعة {} عدد من المرات حسب ما تريد أو حسب شروط تقوم بتحديدها وهي في المجمل نوعين

• حلقة for
• حلقة while

و لك واحدة منهم مميزاتها و الأكثر شيوعا هي for

أولا :جملة for .

يكون بناء حلقة for هكذا:

for ([العملية ]; [الشرط]; [تعريف القيمة الإبتدائية])
الأمر أو مجموعة الأوامر.

ولكي يتضح المعنى نوضحه بمثال و ليكن حل المشكلة التي عرضناها أول الدرس أي برنامج يقوم بطباعة الأرقام من واحد لمئة بإستخدام جملة for يكون البرنامج هكذا: و من خلال المثال يمكننا أن نفهم أن القيمة الإبتدائية هي القيمة التي يبدأ من عندها العد فهنا عرفنا المتغير i ووضعنا فيه القيمة الإبتدائية تساوي 1. أما الشرط و الذي يوضع بعد فاصلة منقوطة ; من تعريف البداية هو الشرط الذي يستمر تكرار الأوامر مدام هو متحقق فهنا يستمر التكرار طالما قيمة i أقل من أو تساوي 100. أما العملية فهي العملية التي يتم إجرائها على المتغير الذي قمنا بتعريف قيمته الإبتدائية بعد كل دورة . فكود طباعة المئة رقم يتم تنفيذه بهذا الترتيب :

• يتم اختبار الشرط i<=100 هل هو متحقق ؟
• إن كان متحقق يتم تنفيذ الأوامر الموجودة داخل الحلقة لمرة
• ثم يتم تنفيذ العملية و التي هي إضافة 1 إلى المتغير i في مثالنا
• ثم إعادة الإختبار هل i<=100 ؟
• و مدام الشرط متحقق يستمر الأمر في التكرار حتى تصبح قيمة i تساوي 101 و عندها عندما يتم إختبار الشرط يكون غير متحقق
فتنتهي الدورة ولا يتكرر الأمر ثانية .

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

for ( ; ; )
الأمر 

ثانيا :جملة while

و هي أبسط من جملة for و تكوينها كالتالي:

while (الشرط)
{
...statements...
}

فهي لا تحتاج إلا إلى شرط طالما هو متحقق أي ناتجه true فإن الأمر يستمر في التكرار حتى لا يتحقق الشرط و يصبح الناتج false و يمكن عمل برنامج طباعة المئة رقم بـwhile أيضا هكذا: و يمكن إستخدام أداة تسمى do مع while بهذا الشكل :

و ستلاحظ في المثال أن الشرط (i != 0) غير متحقق من البداية و لكن مع ذلك تم تنفيذ الأمر لمرة واحده
حيث أن جملة Do-While يتم فيها أولا تنفيذ الأمر الموضوع داخلها ثم بعد ذلك اختبار الشرط إن كان صحيحا
تكمل و إن كان خطأ تتوقف و لذلك يتم تنفيذ أمر الطباعة الموجود داخل الحلقة لمرة واحده رغم أن الشرط غير متحقق

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

الطريقة البسيطة لعمل مصفوفه تكون هكذا

var arrayName=[العنصر الأول ,العنصر الثاني ,العنصر الثالث,...,العنصر الأخير]

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

arrayName[ترتيب العنصر الذي تريد قيمته]

و كمثال عملي على عمل المصفوفة و عرض عناصرها نعرض المثال التالي و هو عبارة عن إنشاء لمصفوفة بها أربعة عناصر و كل عنصر منها من نوع مختلف من البيانات ثم بعد ذلك طباعة لقيمة كل عنصر من العناصر من خلال إستدعاء قيمتهم بالطريقة التي تم توضيحها بالأعلى و إليك المثال : و من هذا المثال يمكنك أن تعرف أن المصفوفة يمكن أن تحتوى على أي نوع من البيانات و أنه يتم إستدعاء قيمة كل عنصر من خلال ترتيبه في المصفوفة و يسمى ترتيب العنصر بالـ index. و هناك نوع آخر من المصفوفات يسمى بالمصفوفات الإرتباطية associative array و هو يختلف في أننا لا نستدعي العناصر فيه من خلال ترتيبها لكن من خلال إسم نعطيها له و سأوضحها بمثال لمصفوفة تحتوى الباينات الشخصية لشخص ما إسمه و عمره و عمله

• و كما ترى بالمثال لإنشاء هذا النوع من المصفوفات نقوم أولا بتعريف المصفوفة خاليه هكذا var mohamed=[]; بأن نضيف
قوسين من هذا النوع [] بعد علامة يساوي "=".
• ثم بعد ذلك نضع في موضع ال index أي الترتيب الإسم الذي نريد أن نعطيه للبيانات التي نضعها في المصفوفه و نضع لها البيانات
كأي متغير من خلال علامة التساوي" = "هكذا مثلا mohamed["name"]="Mohamed ahmed"; .
• و عندما بعد ذلك نقوم بإستدعاء القيمة التي نريدها يكون ذلك من خلال الإسم الذي سميناه مثل هذا السطر
document.write("The name is:",mohamed['name']+"</br>")

و هناك طريقة أخري لتعريف المصفوفات تكون كالتالي :

var arrayName = new Array(عدد عناصر المصفوفه)

و يوضح هذا المثال طريقتي إنشاءها:

<head>
<script language=”JavaScript”>
<!--
var myArray = new Array(5);
myArray[0] = “First Entry”;
myArray[1] = “Second Entry”;
myArray[2] = “Third Entry”;
myArray[3] = “Fourth Entry”;
myArray[4] = “Fifth Entry”;
var anotherArray = new Array(“First Entry”,”Second Æ
Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);
// -->
</script>
</head>

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

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

نطاق المتغيرات Variable Scope:نطاق المتغير يحدد المنطقة التي يمكنك فيها أن تستخدم المتغير و تجري تعديلات علي البينات الموجودة به ,حيث يمكنك أن تجعل المتغير يمكن إستخدامه فقط داخل دالة,أو يكون عام يمكن إستخدامه و الوصول له في أي مكان في الكود.

المتغير الذي يمكنك إستخدامه داخل دالة ما فقط يسمى بالمتغير المحلي local variable,أما المتغير الذي يمكنك الوصول له في أي مكان في الكود يسمى بالمتغير العام global variable.

لجعل المتغير متغير محلي تعرفه بإستخدام كلمة var داخل الدالة كما بالمثال :

function test()
{
var age = 43
}
test()
document.write(age + "<BR>")

إذا قمت بتنفيذ هذا الكود في الكنسول ستجد هذا الخطأ ReferenceError: age is not defined حيث أن age معرف داخل الدالة test كمتغير محلي بإستخدام الكلمة var و لذا لا يمكن إستخدامه خارجها . أما إن قمت بحذف كلمة var و صار الكود هكذا

function test()
{
age = 43
}
test()
document.write(age + "<BR>")

فإنه سيتم طباعة الرقم 43 على الصفحة ,لاحظ أنه قبل إستخدام المتغير age خارج الدالة لابد من مناداة الدالة test(). و السبب في أن المتغير تم طباعته هذه المرة أنك إن قمت بتعريف المتغير داخل الدالة بدون إستخدام كلمة var فإنه يعتبر متغير عام و يمكنك إستخدامه خارج الدالة في أي مكان في الكود بعد إستدعاء الدالة .أما المتغير إن تم تعريفه خارج الدالة بإستخدام كلمة var أو بدونها فإنه يعتبر متغير عام و يمكن إستخدامه داخل الدالة أو خارجها كما بالأمثلة: بإستخدام var

function test()
{
var age = 43
}
var age=11
test()
document.write(age + "<BR>")

بدون إستخدام var

function test()
{
var age = 43
}
age = 11
test()
document.write(age + "<BR>") 

و في الحالتين سيتم طباعة الرقم 11 لأن المتغير age داخل الدالة تم تعريف كمتغير محلي و لذا لن يؤثر خارج الدالة و ستظل قيمة المتغير العام age تساوي 11 برغم من مناداة الدالة test() بعد تعريفه . أما إن جعلنا المتغير age داخل الدالة متغير عام أي عرفناه بدون استخدام كلمة var كالتالي:

function test()
{
age = 43
}
age = 11
test()
document.write(age + "<BR>")

فإنه سيتم طباعة الرقم 43 على الشاشة لأن المتغير في هذه الحالة سيؤثر خارج الدالة و بما أنه تم مناداة الدالة بعد age = 11 فإن القيمة الأخيرة له ستكون التي تضعها الدالة و هي 43 . و للتوضيح أكثر سندرس هذا المثال و هو عبارة عن دالة لحساب مساحة شكل هندسي : في المثال قمنا بتعريف دالة كبرى shapeArea تقبل ثلاث متغيرات و داخلها قمنا بتعريف متغير area كمتغير محلي بالنسبة للدالة shapeArea و أيضا قمنا بتعريف دالتين داخل الدالة هما rectangle و التي تقوم بحساب المساحة في حالة كان الشكل مربع او مستطيل و دالة triangle تقوم بحساب المساحة في حالة كان الشكل مثلث . المتغير المحلي area يمكن إستخدامه في أي مكان داخل الدالة shapeArea و هذا ما فعلناه حيث تم إستخدامه داخل الدالة rectangle و الدالة triangle ,و إستخدمناه داخلهم بدون إستخدام كلمة var ,لأنه إذا إستخدمنا كلمة var داخل الدالة rectangle أو triangle سيصبح المتغير وقتها خاص بالدالة rectangle أو triangle فقط, و لن تتغير قيمة المتغير area المعرف في أول الدالة shapeArea بتغير قيمة المتغير area الموجود داخل rectangle أو triangle. عندما يتم إستدعاء الدالة من خلال هذا السطر

var area = shapeArea(2, 2, "square");

فإنه يبدأ تنفيذ الكود الموجود داخل الدالة shapeArea كالتالي:

• يتم تعريف المتغير area ووضع قيمته صفر
var area = 0;
• يتم تعريف الدالتين rectangle و triangle .
• في حالة كون النوع square ستنفذ الدالة rectangle(); و التي ستجعل قيمة المتغير area تساوي

area = base * height;

فيكون الناتج 4 و هو القيمةسترجعها الدالة return area;
• لاحظ أننا أيضا قمنا بتعريف متغير area خارج الدالة shapeArea و قيمته ليست قيمة المتغير area الموجود داخل shapeArea لأننا كما ذكرنا قمنا بتعريف area داخل shapeArea كمتغير محلي .