JavaScript

JavaScript Switch
قاعدة Switch الشرطية في لغة جافا سكريبت

ستتعلم في هذا الدرس عبارة switch الشرطية وطريقة كتابتها Switch Syntax وما الفرق بينها وبين ال If-else Condation ومتي تستخدمهم switch وستتعلم أيضاً الكُتل البرمجية داخل switch وعلاقتها ب expression في لغة جافا سكريبت.

التاريخ

03 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

2892

المواضيع

24
الشروحات chevron_left JavaScript Switch chevron_left JavaScript

JavaScript Switch
قاعدة Switch الشرطية في لغة جافا سكريبت

</> JavaScript Switch
قاعدة Switch الشرطية في لغة جافا سكريبت

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

  • تتكون switch من مجموعة كٌتل Case كل كُتلة تحتوي بداخلها علي أمر برمجي محجوز لحين تحقق شرط معين.
  • كل كًتلة برمجية لها قيمة هذة القيمة أما تكون نص ثابت أو رقم ثابت أو متغير.
  • قاعدة switch لها expression يتم تمريرة لها في حال تطابقه مع قيمة الكُتلة case سوف يتم تنفيذ الأوامر البرمجية المحجوزة بداخل Case.
  • يمكنك تنفيذ الأوامر البرمجية الموجودة في كُتلة واحدة case أو مجموعة كُتل cases في حال تطابقهم مع expression الموجود بداخل switch.
  • قاعدة swich تستخدم في تنفيذ أمر برمجي بناء علي اختبار قيمة value وتطابقها مع  expression الزي يتم تمريرة الي swich.
  • يمكن أن تستبدل قواعد if بقاعدة switch عندما يكون لديك عدة شروط وهي تكون الأفضل لمقارنة متغير أمام مجموعة من القيم.

</> JavaScript Switch Syntax
طريقة كتابة قاعدة Switch في لغة جافا سكريبت

تكتب switch بهذا الشكل:

  • تبدأ بكلمة switch بحروف صغيرة.
  • يتبع كلمة switch الأقواس parentheses ( ).
  • يتم تمرير بداخل الأقواس parentheses ( ) الأقواس expression وهو قيمة التي سوف يتم مقارنتها مع الكُتله case.
  • يتبع الأقواس parentheses ( ) أقواس مُجعدة curly braces.
  • يتم أضافة أي عدد من الشروط بداخل الأقواس
  • يبدأ الشرط بكلمة case بحروف صغيرة.
  • يتبع case قيمة هذة القيمة أما تكون متغير أو نص أو اي نوع من أنواع البيانات.
  • ينتهي الشرط بعبارة break بحروف صغيرة.


إذا تطابق expression مع القيمة التي تتبع case فأن محرك جافا سكريبت سوف يقوم بتنفيذ الأمر البرمجي الموجود بداخل هذه الكُتله البرمجية بدأ من case وينتهي عند عبارة break;

وفي حالة عدم تطابق expression مع القيم الموجودة بعد كل case سوف يقوم بتنفيذ الأمر البرمجي الزي يتبع عباة default.

JavaScript Switch Syntax

طريقة كتابة Switch في لغة جافا سكريبت

switch(expression) {
  case x:
    /* code block - code executed when the result of expression matches x */
    break;
  case y:
    /* code block - code executed when the result of expression matches y */
    break;
  default:
    /* code block - code executed when the result of expression not equal or matches y */
}
body background

قم بتغيير قيمة expression بداخل switch إلي أي لون متطابق مع الحلات وفي هذة الحالة سيتم تنفيذ الأوامر الموجوده بداخل case وإذا قمت بكتابة لون غير موجود في الحلات سوف يتم تنفيذ أوامر default.

switch ("blue") {
  case "red":
    document.write("Color Selected is : red");
    break;
  case "green":
     document.write("Color Selected is : green");
    break;
  case "blue":
    document.write("Color Selected is : blue");
    break;
  default:
     document.write("This color is not found");
}
expression as variable

يمكن تمرير expression كمتغير variable.

let expression = "red";
switch (expression) {
  case "red":
    document.write("Color Selected is : red");
    break;
  case "green":
     document.write("Color Selected is : green");
    break;
  case "blue":
    document.write("Color Selected is : blue");
    break;
  default:
     document.write("This color is not found");
}
cases as variable

يمكن تمرير أسماء case كمتغيرات variables.

switch (expression) {
  case red:
    document.write("Color Selected is : red");
    break;
  case green:
     document.write("Color Selected is : green");
    break;
  case blue:
    document.write("Color Selected is : blue");
    break;
  default:
     document.write("This color is not found");
}

</> JavaScript Switch multiple cases
اكثر من case داخل عبارة Switch في لغة جافا سكريبت

  • يمكن تنفيذ مجموعة أوامر في حالة تطابق expression مع قيمتين عن طريق اضافة عدد 2 case لهذة الأوامر.
  • يمكن أضافة اكتر من قيمة معاً لنفس الكُتلة البرمجية وهي كتابة اكثر من case لنفس الأوامر كل case تتبع case سابقة.
Switch multiple cases

سيتم تنفيذ الأوامر البرمجية الموجودة بداخل اول case في حالتين red أو gray.

switch (expression) {
  case red:
  case gray:
    document.write("Color Selected is : red and gray");
    break;
  case green:
     document.write("Color Selected is : green");
    break;
  case blue:
    document.write("Color Selected is : blue");
    break;
  default:
     document.write("This color is not found");
}
ملاحظات هامة
  • في حالة وجود اكثر من case داخل switch وبنفس القيمة سوف تنفذ اول حالة فقط first case.
  • في حال عدم تطابق case مع expression سوف يتم تنفيذ الأوامر البرمجية المحجوزة بداخل كُتلة default.
  • في حال عدم كتابة default أو case متطابقة مع expression فأن البرنامج لا يعطي أي نتيجة وسوف يقوم بتنفيذ الأوامر التي تتبع Switch.

</> JavaScript switch vs if-else
لماذا تتفوق switch عن if-else في جافا سكريبت

تعتمد النظرية السائدة حول استخدام if-else مقابل switch عدد الشروط كلما كان عدد الشروط أكبر يفضل أستخدام switch لأنها منظمة اكثر ومقروءة اكثر ولكن ليس مشكلة أن نستخدم if-else.


لماذا نستخدم ال swich وليس if , else ؟

  • Expression هو يميز switch في كتابة قيمة فقط للتحقق بينما if و else تعتمد علي شرط كامل وليس قيمة.
  • تتميز Switch بسرعة التنقل بين كل حالة case وحالة case بينما العكس في if و else ستقوم لغة البرمجة بفحص جميع الشروط اما في ال swich تذهب مباشرة علي ال case التي تساوي ال Expression.
  • الوضوح وسهولة القراءة Clarity and readability تتفوق swich منظمة في طريقة كتابتها تسهل عملية القراءة والتعديل علي الحالات بخلاف ال if وال else لها اقواس كثيرة.
  • في عملية الأصلاح والتعديل تتفوق قاعدة switch عن قاعدة if لأن switch  سوف تعدل Expression مره واحدة بينما في if سوف نقوم بتعديل جميع الحالات علي حسب عدد if.
  • في جملة if يمكن ان يكون expression من النوع (integer او character او pointer او float ) بينما في ال switch يمكن expression ان يكون اي نوع من هذى الأنواع.


unclarity and unreadability

غير واضحة وغير مقروءة لقاعدة if في لغة جافا سكريبت

if (color == "red"){
    /* do something */
} else if (color == "blue"){
    /* do something */
} else if (color == "brown"){
    /* do something */
} else if (color == "black"){
    /* do something */
} else {
    /* do something */
}
Clarity and readability

الوضوح وسهولة القراءة لقاعدة switch في لغة جافا سكريبت

switch (color){
    case "red":
        /* do something */
        break;

    case "blue":
        /* do something */
        break;

    case "brown":
        /* do something */
        break;

    case "black":
        /* do something */
        break;

    default:
        /* do something */
}

</> switch without break statement in JavaScript
switch بدون عبارة break في لغة جافا سكريبت

إذا نسيت كتابة عبارة break فسوف يتم تنفيذ جميع الاكواد التي تلي case يعني ذلك عدم عمل switch بشكل طبيعي يحدث خطأ برمجي عند التشغيل.

Execute All blocks

سيتم تنفيذ جميع الأوامر البرمجية داخل جميع الحالات أو الكُتل البرمجية إذا نسيت عبارة break في لغة جافا سكريبت

var course = 1;
switch (course) {
  case 1:
    document.write("HTML <br>");
  case 2:
    document.write("CSS <br>");
  case 3:
    document.write("JavaScript <br>");
  default :
    document.write("Selected Course Not found <br>");
 }

</> switch default statement in JavaScript
عبارة default مع قاعدة switch في لغة جافا سكريبت

إذا لم تتطابق expression مع أي case ففي هذة الحالة سوف يتم تنفيذ الأوامر البرمجية الموجودة داخل كُتلة default statement.

default statement

في حالة عدم تطابق expression مع أي case في switch سوف يتم تنفيذ الأوامر البرمجية التي تلي default statment في لغة جافا سكريبت

var course = 4;
switch (course) {
  case 1:
    document.write("HTML");
    break;
  case 2:
    document.write("CSS");
    break;
  case 3:
    document.write("JavaScript");
  default : 
    document.write("Selected Course Not found");
 }

</> switch strict comparison in JavaScript
قاعدة switch تستخدم الوضع الصارم في المقارنة بين expression و case في لغة جافا سكريبت

تطبق لغة جافا سكريبت الوضع الصارم مع switch فيجب عند عملية التطابق أو المقارنة أن تساوي قيمة expression قيمة case المساواه في النوع وفي القيمة.

var course = "1";
switch (course) {
  case 1:
    document.write("HTML");
    break;
  case 2:
    document.write("CSS");
    break;
  case 3:
    document.write("JavaScript");
  default : 
    document.write("Selected Course Not found");
 }
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

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