جافاسكربتالشروط
- مفهوم الشروط
- جمل الشرط
if
-else
-else if
- جملة الشرط
switch
مفهوم الشروط
نستخدم الشروط لتنفيذ أوامر مختلفة بناءاً على البيانات المتوفرة لدينا. فمثلاً إذا قمت بتسجيل دخولك في موقع هرمش فإنه سيكون بإمكانك حفظ تقدمك في الدروس، تعديل معلومات الشخصية، إضافة تعليقات و غيرها. أما إن لم تكن قد سجلت دخولك و حاولت فعل ذلك فإنه سيظهر لك رسالة بأنه عليك تسجيل دخولك حتى تستطيع ذلك.
أساليب وضع الشروط
في جافاسكربت يوجد أسلوبين يمكنك اتباعهما لوضع الشروط:
- وضع شرط أو سلسلة من الشروط بواسطة الجمل
if
،else if
،else
. - إختبار قيمة متغير واحد بواسطة الجملة
switch
.
في هذا الدرس سنتعرف على جميع الطرق التي يمكن من خلالها وضع شروط.
جمل الشرط if
- else
- else if
ترتيب جمل الشرط في حال كنت ستستخدمها كلها هو التالي.
{
هنا تضع الأوامر التي تريد
تنفيذها إذا تحقق الشرط
}
else if (هنا تضع شرط آخر)
{
هنا تضع الأوامر التي تريد
تنفيذها إذا تحقق الشرط
}
else
{
هنا تضع الأوامر التي تريد تنفيذها
في حال لم يتحقق أي شرط سابق
}
لست بحاجة إلى إستخدام جمل الشرط الثلاثة معاً، و لكنك مجبر على إستخدام جملة الشرط if
في بداية أي سلسلة شروط تكتبها.
جملة الشرط if
تُستخدم لتنفيذ كود معين إذا تحقق الشرط الموضوع بين أقواسها.
في المثال التالي سيتم تنفيذ أمر الطباعة لأن الشرط تحقق.
المثال الأول
let age = 20; // أكبر أو تساوي 18 فإنه سيتم تنفيذ الأمر الموجود فيها age هذا الشرط يعني أنه إذا كانت قيمة if(age >= 18) { document.write("You are allowed."); }
النتيجة
هنا قمنا بإعادة المثال السابق مع تغيير قيمة المتغير age
فقط.
هنا لن يتم تنفيذ أمر الطباعة لأن الشرط لم يتحقق.
المثال الثاني
let age = 15; // أكبر أو تساوي 18 فإنه سيتم تنفيذ الأمر الموجود فيها age هذا الشرط يعني أنه إذا كانت قيمة if(age >= 18) { document.write('You are allowed.'); }
النتيجة
جملة الشرط else
else
تُستخدم لتنفيذ كود معين في حال لم تتنفذ أي جملة شرطية موضوعة قبلها و لهذا السبب توضع في الآخر. إذاً الكود الذي يوضع في الجملة else
يتنفذ فقط في حال لم يتحقق الشرط الموضوع في الجملة if
أو الجمل else if
الموجودين قبلها.
في المثال التالي بما أن الشرط الموضوع في الجملة if
سيتحقق فإنه سيتم تنفيذ أمر الطباعة الموجود فيه و سيتم تجاهل جملة الشرط else
.
المثال الأول
let isLogged = true; // فإنه سيتم تنفيذ الأمر الموجود فيها true تساوي isLogged هذا الشرط يعني أنه إذا كانت قيمة if(isLogged) { document.write('You can save your progress.'); } // إذا لم يتم تنفيذ الجملة الشرطية السابقة فإنه سيتم تنفيذ أمر الطباعة الموجود هنا else { document.write('You need to log in to save your progress.'); }
النتيجة
هنا قمنا بإعادة المثال السابق مع تغيير قيمة المتغير isLogged
فقط.
هنا بما أن الشرط الموضوع في جملة الشرط if
لن يتحقق فإنه سيتم تنفيذ أمر الطباعة الموضوع في جملة الشرط else
.
المثال الثاني
let isLogged = false; // فإنه سيتم تنفيذ الأمر الموجود فيها true تساوي isLogged هذا الشرط يعني أنه إذا كانت قيمة if(isLogged) { document.write('You can save your progress.'); } // إذا لم يتم تنفيذ الجملة الشرطية السابقة فإنه سيتم تنفيذ أمر الطباعة الموجود هنا else { document.write('You need to log in to save your progress.'); }
النتيجة
جملة الشرط else if
else if
تُستخدم لوضع أكثر من شرط بحيث يكون هناك أكثر من إحتمال.
جملة أو جمل الشرط else if
يوضعون في الوسط بعد الجملة if
و قبل الجملة else
.
عند وضع سلسلة من الشروط فإن مفسر الكود سيقوم بالمرور عليهم الواحد تلو الآخر إلى أن يجد شرط واحد منهم قد تحقق. بمجرد أن يجد شرط واحد من الشروط الموضوعة قد تحقق فإنه يقوم بتنفيذ الكود الموجود في حدوده و عند الإنتهاء يقوم بتجاوز جميع الشروط الموضوعة بعده.
في المثال التالي الجملة الشرطية الثالثة هي أول جملة شرط تحقق الشرط الموضوع فيها و لذلك فإنه سيتم تنفيذ الأمر الموجود فيه و من ثم تجاهل جميع جمل الشرط الأخرى الموضوعة بعدها.
مثال
let role = 'author'; // فإنه سيتم تنفيذ أمر الطباعة الموجود هنا 'admin' تساوي role إذا كانت قيمة if(role == 'admin') { document.write('You logged in as an admin.'); } // فإنه سيتم تنفيذ أمر الطباعة الموجود هنا 'editor' تساوي role إذا كانت قيمة else if(role == 'editor') { document.write('You logged in as an editor.'); } // فإنه سيتم تنفيذ أمر الطباعة الموجود هنا 'author' تساوي role إذا كانت قيمة else if(role == 'author') { document.write('You logged in as an author.'); } // فإنه سيتم تنفيذ أمر الطباعة الموجود هنا 'contributer' تساوي role إذا كانت قيمة else if(role == 'contributer') { document.write('You logged in as a contributer.'); } // إذا لم يتم تنفيذ الجملة الشرطية السابقة فإنه سيتم تنفيذ أمر الطباعة الموجود هنا else { document.write('You logged in as a subscriber.'); }
النتيجة
جملة الشرط switch
switch
تستخدم لاختبار قيمة متغير ما مع لائحة من الإحتمالات نقوم نحن بوضعها، و إذا تساوت هذه القيمة مع أي إحتمال وضعناه ستتنفذ الأوامر التي وضعناها في هذا الإحتمال فقط.
إستخدام الجملة switch
يكون على الشكل التالي:
case value:
// Statements
break;
case value:
// Statements
break;
default:
// Statements
}
- switch تعني إختبر قيمة المتغير الموضوع بين قوسين.
- expression يقصد بها المتغير الذي نريد إختبار قيمته.
- case تعني حالة و value تعني قيمة و Statements تعني أوامر. و يقصد من هذا كله أنه في حال كانت قيمة المتغير الذي يتم إختباره تساوي هذه القيمة فإنه تنفيذ الأوامر الموضوعة بعد النقطتين :
- default هي حالة إحتياطية يتم تنفيذ أوامرها إن لم يتم تنفيذ أي case موضوعة في الجملة switch و لهذا توضع في الآخر.
- break يجب وضعها في نهاية كل case لكي يتم الخروج من الجملة switch مباشرةً بدلاً من الإنتقال إلى للـ case التالية الموجودة بعدها.
يمكنك وضع العدد الذي تريده من الـ case
بداخل الجملة switch
.
في المثال التالي سيتم تنفيذ أمر الطباعة الموجود في الحالة التي تساوي 'ar'
فهي نفس قيمة المتغير language
.
المثال الأول
let language = 'ar'; // language إختبر قيمة المتغير switch(language) { // سيتم تنفيذ أمر الطباعة الموضوع هنا 'en' في حال كانت تساوي case 'en': document.write('The language is set to English.'); break; // سيتم تنفيذ أمر الطباعة الموضوع هنا 'ar' في حال كانت تساوي case 'ar': document.write('The language is set to Arabic.'); break; // سيتم تنفيذ أمر الطباعة الموضوع هنا 'fr' في حال كانت تساوي case 'fr': document.write('The language is set to French.'); break; // موضوعة قبلها فإنه سيتم تنفيذ أمر الطباعة الموضوع هنا case في حال لم يتم تنفيذ أي default: document.write('The language is not available.'); }
النتيجة
في المثال التالي سيتم تنفيذ أمر الطباعة الموجود في الحالة الإفتراضية default
لأنه لا يوجد أي حالة موضوع تساوي قيمة المتغير language
الجديدة التي قمنا بوضعها.
المثال الثاني
let language = 'de'; // language إختبر قيمة المتغير switch(language) { // سيتم تنفيذ أمر الطباعة الموضوع هنا 'en' في حال كانت تساوي case 'en': document.write('The language is set to English.'); break; // سيتم تنفيذ أمر الطباعة الموضوع هنا 'ar' في حال كانت تساوي case 'ar': document.write('The language is set to Arabic.'); break; // سيتم تنفيذ أمر الطباعة الموضوع هنا 'fr' في حال كانت تساوي case 'fr': document.write('The language is set to French.'); break; // موضوعة قبلها فإنه سيتم تنفيذ أمر الطباعة الموضوع هنا case في حال لم يتم تنفيذ أي default: document.write('The language is not available.'); }
النتيجة
في المثال التالي قمنا بوضع الأوامر نفسها لعدة حالات. إذا كانت قيمة المتغير x
تساوي إحداها فإنه سيتم تنفيذ الأمر الموضوع فيها.
المثال الثالث
let x = 3; // x إختبر قيمة المتغير switch(x) { // في حال كانت تساوي 1 أو 2 أو 3 سيتم تنفيذ أمر الطباعة الموضوع هنا case 1: case 2: case 3: document.write('x contains 1 or 2 or 3.'); break; // في حال كانت لا تساوي أي قيمة من الإحتمالات الموضوعة قبلها فإنه سيتم تنفيذ أمر الطباعة الموضوع هنا default: document.write('x contains a different value.'); }
النتيجة
switch
تقارن قيمة و نوع المتغير تماماً العامل ===
فهي ليست كالعامل ==
الذي يهتم بمقارنة القيم فقط بغض النظر على أنواعها.
في المثال التالي قمنا بوضع الأوامر نفسها لعدة حالات. إذا كانت قيمة المتغير x
تساوي إحداها فإنه سيتم تنفيذ الأمر الموضوع فيها.
المثال الرابع
let x = 3; // x إختبر قيمة المتغير switch(x) { // في حال كانت تساوي النص '3' سيتم تنفيذ أمر الطباعة الموضوع هنا case '3': document.write('x contains the string 3.'); break; // في حال كانت تساوي العدد '3' سيتم تنفيذ أمر الطباعة الموضوع هنا case 3: document.write('x contains the number 3.'); break; // في حال كانت لا تساوي أي قيمة من الإحتمالات الموضوعة قبلها فإنه سيتم تنفيذ أمر الطباعة الموضوع هنا default: document.write('x contains a different value.'); }
النتيجة