تعلم جافا سكربت: الكورس الكامل ـ الجزء الثالث

اوكتوبر 11، 2021 | 18 دقيقة قراءة
S
كتبها المحرر
تعلم جافا سكربت: الكورس الكامل ـ الجزء الثالث

ماهي الجملة الشرطية (Conditional Statement)

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

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

  • الكلمات المفتاحية (if , else if, else)
  • معاملات المقارنة المنطقية
  • المعاملات المنطقية and (&&) و or (||)
  • القيم التي يمكن اعتبارها صحيحة او خاطئة
  • المعامل ternary operator
  • الكلمة المفتاحية (switch)

1- انشاء جملة شرطية باستخدام if

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

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

  if (true) {
    console.log('This message will print!'); 
  }
  // Prints: This message will print!

في المثال السابق لدينا جملة شرطية تستخدم الكلمة المفتاحية if , لنناقش المثال السابق :

  • الكلمة المفتاحية if متبوعة باقواس () ومن ثم مجوعة من الاكواد (code block or block statement) والتي يتم تمثيلها واحاطنها باقواس { }.
  • ضمن الاقواس () نضع الشرط الذي يجب معالجته والذي يتم معالجته لاعطاء قيمة صحيحة (true) أو خاطئة (false) حسب نتيجة الشرط.
  • اذا كانت نتيجة الشرط صحيحة (true) يتم تنفيذ الكود الموجود ضمن مجموعة الاقواس
  • اذا كانت نتيجة الشرط خاطئة (false) لا يتم تنفيذ اي شيء

تمارين بسيطة:

افتح محرر الاوامر console ولنقم بالتمارين الاتية:

تمرين:

  • قم بانشاء متغير جديد وليكن اسمه sale باستخدام الكلمة المفتاحية let وقم بتعييين القيمة true له
  • في السطر التالي (لكي ننتقل الى السطر التالي ضمن الكونسول نضغط المفتاحين shift+Enter) لننشىء جملة شرطية باستخدام if , لنضع المتحول sale كمدخل للجملة الشرطية (ضمن الاقواس () ) , ضمن الاقواس{ } نستعمل الوظيفة console.log() لطباعة النص "Time to buy!"
  • لاحظ ان الكود المكتوب ضمن الاقواس { } يتم تنفيذه بما ان النص "Time to buy!" سيظهر ضمن شاشة الكونسول
  • لنكتب الكود السابق كما هو تماما لكن نغير قيمة sale الى القيمة false , نضغط Enter لتشغيل الكود ف نلاحظ لا يحدث شيء (في الاقسام التالية سنغير ذلك لكي تظهر نتيجة لكن لنكتفي بهذا حاليا)

2- انشاء جملة شرطية باستخدام if و else

في القسم السابق قمنا بالتعرف على ابسط انواع الجمل الشرطية وهي باستخدام if فقط لتنفيذ كود في حال كانت نتيجة الشرط محققة (صحيحة) , لكن ضمن البرامج عموما قد نحتاج لمعالجة حالات اخرى كأن تكون نتيجة الشرط خاطئة ونريد تنفيذ كود معين في تلك الحالة , يمكن تنفيذ ذلك باستعمال الكلمة المفتاحية else , لنأخذ مثالا لتوضيح ذلك:

  let value = false;
  if (value) {
    console.log('The code in this block will not run.');
  } else {
    console.log('But the code in this block will!');
  }
  // Prints: But the code in this block will!

دائما وابدا يجب استعمال الكلمة المفتاحية () مع الكلمة المفتاحية () حيث ان المزيج الذي يحوي كليهما يسمى الجملة الشرطية (statement if…else)

لنناقش قليلا المثال السابق:

  • الحملة الشرطية تقبل قيمة ما (او مقارنة) لكي يتم معالجتها وتحديد فيما اذا كانت صحيحة ام خاطئة متبوعة بمجموعة من الاوامر التي تحاط باقواس { }وبناء على ذلك ينفذ هذا الكود ان كانت النتيجة صحيحة
  • مباشرة بعد نهاية مجموعة الاكواد السابقة نضع الكلمة المفتاحية else لمعالجة الامر في حال كان الشرط السابق اعطى نتيجة خاطئة متبوع باقواس { } ضمنها يوضع الكود المطلوب تنفيذه لهذه الحالة هذا النوع من الجمل الشرطية (if…else) يتيح لنا اعطاء خلول منطقية للجالات المنطقية حيث نسأل عن صحة شرط ما او عدمها (الاسئلة التي تقبل صح او خطأ أو ما يعرف binary decisions)

تمارين بسيطة:

افتح محرر الاوامر console ولنقم بالتمارين الاتية:

تمرين:

  • لننظر الى التمرين السابق ونضع الكلمة المفتاحية else الى الجملة الشرطية السابقة ونضع ضمن الاقواس { } الوظيفة console.log() ونجعلها تطبع النص "Time to wait for a sale".
  • اذا كانت قيمة المتحول sale صحيحة (true) يظهر النص "Time to buy!" اما اذا كانت خاطئة (false) يظهر النص "Time to wait for a sale"

3- معاملات المقارنة المنطقية (Comparsion operators):

عندما نتعامل مع الجمل الشرطية , احيانا نحتاج لاستخدام معاملات منطقية لمقارنة قيم مع بعضها (اكبر , اصغر , مساواة ... الخ) والتي تسمى معاملات المقارنة المنطقية. لننظر الى بعض معاملات المقارنة الشائعة والمعروفة وكيفية صياغتها:

  • اصغر من ( < )
  • اكبر من ( > )
  • اكبر او يساوي ( >= )
  • يساوي تماما ( === )
  • لا يساوي ( ==! )

معاملات المقارنة تقارن القيم الموجودة الى يسار معامل المقارنة الى القيمة الموجودة الى اليمين

10 < 12 // Evaluates to true

لكي نسهل على انفسنا كيفية التفكير بالجمل الشرطية لنفكر بها كأنها سؤال, اذا كان الجواب نعم (yes) يتم معالجة المقارنة لتعطي القيمة (true) , واذا كان الجواب لا (no) يتم معالجة المقارنة لتعطي القيمة (false).

على سبيل المثال ,الكود السابق يسأل هل الرقم 10 اصغر من الرقم 12 ؟ منطقيا الجواب صحيح اذا الكود 10 < 12 يعطي النتيجة true.

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

'apples' === 'oranges' // false

في المثال السابق نلاحظ اننا نستعمل معامل المقارنة المطلق (اي يقارن هل القيم متطابقة تماما نوعا وقيمة ) للمقارنة ومعرفة هل النص "apples" مطابق تماما للنص "oranges" , بما ان النصين مختلفان تماما فأن الجملة الشرطية تنتج القيمة false

جميع جمل المقارنة الشرطية تنتج اما القيمة صح (true) أو خطأ (false) والتي تتكون من:

  • قيمتين يجب مقارنتها
  • معامل مقارنة يفص بين القيمتين ويقارن بينهما (>, <, <=, >=, ===, !==)

تمارين بسيطة:

لنفتح محرر الاوامر console ونقم بالتمارين التالية

تمرين:

  • قم بانشاء متغير جديد وليكن اسمه hungerLevel باستخدام الكلمة المفتاحية let وقم بتعيين الرقم 7 له كقيمة
  • اكتب جملة شرطية مستحدما العبارة الشرطية (if…else) ونجعلها تتحقق من قيمة المتغير hungerLevel اذا كان اكبر تماما من الرقم 7 . اذا تحقق الشرط نريد ان نطبع النص "Time to eat!" ضمن الكونسول باستخدام الوظيفة console.log() , عكس ذلك (القيمة خاطئة) تظهر النص "We can eat later!"
  • لنتسلى قليلا ونقوم باستخدام معاملات اخرى مثلا (<, >, <=, >=)

4- المعاملات المنطقية and (&&) و or (||) (Logical Operators):

بطبيعة الحال فأن المعاملات المنطقية تعني اننا سنستخدم القيم المنطقية (true) و (false) . ضمن جافاسكربت يوجد معاملات منطقية تعرف بالاسم (logical operators) والتي تتيح لنل انشاء شروط منطقية اكثر تعقيدا الى الجمل الشرطية , يوجد ثلاث معاملات من هذا النوع:

  • معامل العطف and (مشابه لحرف العطف الواو في اللغة العربية اي تفيد ضرورة تحقق كلا الطرفين) وله الصيغة (&&)
  • معامل الاختيار or (مشابه لكلمة أو في اللغة العربية ويفيد ضرورة تحقق احد الطرفين على الأقل) وله الصيغة (||)
  • معامل النفي not (يفيد في عكس قيمة اي متحول منطقي Boolean الى القيمة المعاكسة) وله الصيغة ( ! )

اولا المعامل المنطقي (&&) عمليا يقوم بالتحقق من ان كلا طرفي الشرط ينتجان القيمة المنطقية true , واليك المثال التالي:

  if (stopLight === 'green' && pedestrians === 0) {
    console.log('Go!');
  } else {
    console.log('Stop');
  }

في المثال السابق وباستعمال المعامل المنطقي (&&) فأن كلا طرفي الشرط بشكل مستقل بنتجان القيمة (true) و بالتالي فأن العبارة الشرطية الكاملة ستعطي النتيجة (true) وتنفذ الكود التالي الخاص بالمفتاح if , فيما عدا ذلك اذا كان كلا الشرطين خطأ أو احدهما على الاقل خاطئا فان العبارة الشرطية الكاملة ستعطي النتيجة (false) والكود الملحق بالمفتاح (else) يتم تنفيذه

ثانيا المعامل المنطقي (||) يفيد في حال اننا نهتم بأن احد الشرطين على الاقل محقق, واليك المثال التالي:

  if (day === 'Saturday' || day === 'Sunday') {
    console.log('Enjoy the weekend!');
  } else {
    console.log('Do some work.');
  }

باستعمال المعامل المنطقي (||) فأن احد الشرطين على الاقل يجب ان يعطي قيمة منطقية (true) لكي تنتج العبارة الشرطية الكاملة القيمة (true) , في المثال السابق اذا كان احد الشرطين (أو كلاهما في بعض الاحيان) (day === 'Saturday') أو (day === 'Sunday') يعطي نتيجة صحيحة (true) فأن العبارة الشرطية الكاملة ستعطي النتيجة (true) ايضا وسيتم تنفيذ الكود الملحق بالمفتاح (if) , فيما عدا ذلك سيتم تنفيذ الكود الملحق بالمفتاح (else)

ثالثا معامل النفي المنطقي (not أو !) يفيد بعكس اي قيمة منطقية (boolean) الى القيمة المعاكسة:

  let excited = true;
  console.log(!excited); // Prints false
  
  let sleepy = false;
  console.log(!sleepy); // Prints true

اي ببساطة يقوم بتحويل القيمة (true) الى معاكستها (false) وبالعكس تحول القيمة (false) الى معاكستها (true).

تمارين بسيطة:

لنفتح محرر الاوامر console ونقوم بالتمرين التالي

تمرين:

  • لننشىء متغيرين احدهما ذو الاسم mood وله القيمة "sleepy" باستخدام المفتاح let والاخر اسمه tirednessLevel وله القيمة مثلا 8.
  • انشىء عبارة شرطية مستعملا الاسلوب (if…else) بحيث تقوم بالتحقق من ان قيمة المتغير mood هي "sleepy" وقيمة المتغير tirednessLevel اكبر من 8
  • اذا كان كلا الشرطين محققا , نستعمل الوظيفة console.log() لاظهار النص "time to sleep" , فيما عدا ذلك نظهر النص "not bed time yet"
  • هنا سنضيف الكود لكي نسهل العملية
  let tirednessLevel = 9;
  let mood = "sleepy";

  if (tirednessLevel > 8 && mood === "sleepy") {
    console.log("it's time tp sleep")
  } else {
    console.log("not bed time yet")
  }
  • تسلى قليلا واستبدل قيم المتغيرات او المعاملات لكي ترى نتائج مختلفة

5- مفاهيم خاصة بالمقارنة (ما يمكن اعتباره صحيحا او خاطئا) (Truthy and Falsy)

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

  let myVariable = 'I Exist!';

  if (myVariable) {
     console.log(myVariable)
  } else {
     console.log('The variable does not exist.')
  }

لاحظ في المثال السابق ان الكود المرتبط بالجملة الشرطية if سيتم تنفيذه لان المتحول (myVariable) يملك قيمة يمكن اعتبارها صحيحة (التسمية السليمة truthy) , حتى مع معرفتنا بان قيمة المتحول myVariable هي قيمة مختلفة عن true فأن استعمال هذا المتحول هنا كشرط ضمن جملة شرطية يتم تحويله ما وراء الكواليس الي قيمة صحيحة true.

كما يوجد هناك امور يمكن اعتبارها صحيحة ( تحويلها الى true ) يوجد هناك امور يمكن اعتبارها خاطئة ( تحويلها الى false ) . سوف نذكر كافة القيم التي يمكن اعتبارها خاطئة ضمن شرط ما .... فيما عدا ذلك يتم اعتبار اي متحول او قيمة صحيحا (true)

  1. الرقم صفر 0 (و 0- لكن سنتغاضى عنها في الوقت الحالي)
  2. اي قيمة نصية () فارغة لا تحوي اي محرف "" أو ''
  3. القيمتين الخاصتين null و undefined
  4. القيمة الرقمية الخاصة NaN (not a number)

أي قيمة توضع كشرط - باستثناء ما سبق – ضمن جملة شرطية يتم اعتبارها تلقائيا قيمة صحيحة (true). على سبيل التوضيح لنذكر القيم التي يمكن دائما اعتبارها صحيحة:

  1. اي رقم صحيح أو عشري عدا الصفر (مثلا 45 أو 45-)
  2. اي قيمة نصية تحتوي على اي محرف او رمز "text"
  3. اي نوع من القوائم ([ ] , arrays) أو الاوبجكت (object , { }) سواء يحتوي بيانات او لا (سنتعرف على هذه الامور لاحقا)
  4. القيم الرقمية infinity و -infinity

لنأخذ المثال التالي:

  let numberOfApples = 0;
  
  if (numberOfApples){
    console.log('Let us eat apples!');
  } else {
    console.log('No apples left!');
  }

في المثال السابق يتم تحويل معالجة قيمة المتحول السابق (numberOfApples) الى قيمة خاطئة (false) لان قيمة المتحول السابق هي الصفر 0 وباعتبار ذلك يتم تنفيذ الشرط المرتبط بالمفتاح else

تمارين بسيطة:

لنفتح محرر الاوامر console ونقوم بالتمرين التالي تمرين: اليك الكود التالي

  let wordCount = 0; 
  if (wordCount){
    console.log('this is a truthy value');
  } else {
    console.log('this is a falsy value');
  }
  • قم بتغيير قيمة المتحول wordCount و نحفظ ضمنه قيمة رقمية يمكن اعتبارها صحيحة, بعد ذلك لنقم بتغيير الكود السابق بحيث يطبع النص التالي "Great! You've started your work!" في حال تحقق الشرط
  let favoritePhrase = "any string you like"

  if (favoritePhrase){
    console.log('this is a truthy value');
  } else {
    console.log('this is a falsy value');
  }  
  • قم بتغيير قيمة المتحول myCity ونحفظ ضمنه قيمة نصية لكن يمكن اعتبارها خاطئة, بعد التعديل قم بتنفيذ الكود السابق بحيث يطبع النص التالي "This String is definitely empty" في حال كان الشرط خاطئا

6- بعض استعمالات القيم الممكن اعتبارها صحيحة أو خاطئة (Truthy and Falsy Assignment)

تتيح لنا المعالجات المنطقية للقيم التي يمكن اعتبارها صحيحة او خاطئة مع المقارنات المنطقية (and , or) امكانيات هائلة لتسهيل كتابة اي كود واستعمال اختصارات مباشرة للوصول الى اهداف واضحة بعيدا عن التعقيد والتكرار

على سبيل المثال لنفترض انه لدينا موقع الكتروني ونريد ان نأخذ اسم المستخدم ونظهر عبارة تحية للمستخدم , في بعض الاحيان قد لايكون المستخدم الحالي مسجلا ضمن الموقع بحساب خاص به واسم مستخدم مميز (username) وبالتالي فأن عبارة التحية السابقة ستكون خاطئة لأنه لايوجد اسم مستخدم اساسا. اليك كيف سنستعمل المفاهيم السابقة التي تعلمناها لمعالجة هذه المسألة:

  let defaultName;
  if (username) {
    defaultName = username;
  } else {
    defaultName = 'Stranger';
  }

  alert(`Welcome and Hello there, ${defaultName}`)

باستخدام معرفتنا لمعاملات المقارنة المنطقية (and, or) مع القيم الممكن اعتبارها صحيحة او خاطئة يمكننا كتابة الكود السابق بشكل ابسط بكثير ,حيث ان جافاسكربت تتيح لنا اضافة قيمة صحيحة بديلة (بمعنى اذا لم يكن هناك قيمة نعطي قيمة عامة) الى متحول ما في حال غياب تلك القيمة او عدم وجودها اساسا, اليك التالي:

  let defaultName = username || 'Stranger';

المعامل المنطقي || (or) يقوم بالتحقق من الطرف الايسر اولا , اذا كانت قيمة المتحول username يمكن اعتبارها صحيحة يتم تعيين تلك القيمة الى المتحول defaultName. اما اذا كان المتحول username يمكن اعتباره خاطئا (اما نص فارغ او null أو undefined او غير ذلك) يتم اعطاء القيمة النصية الافتراضية "Stranger" الى المتحول defaultName. المبدأ السابق يسمى (short-circuit evaluation).

تمارين بسيطة:

لنفتح محرر الاوامر console ونقوم بالتمرين التالي تمرين: اليك الكود التالي

  let tool;
  let writingUtensil;

  if(tool) {
    writingUtensil = tool
  } else {
    writingUtensil = "pen"
  }
  console.log(`the ${tool} is mightier than a sword`)
  • لنستحدم المبدأ السابق لتعيين قيمة للمتحول (writhingUtensil) , قم بتعيين القيمة tool الى المتحول (writingUtensil) بحيث اذا كانت قيمة (tool) خاطئة (او يمكن اعتبارها خاطئة) نعين القيمة النصية ("pen") له

  • لاحظ بما ان قيمة tool هي قيمة يمكن اعتبارها خاطئة (وهي undefined اي لا يوجد بالاساس اي قيمة) يظهر النص التالي "the pen is mightier than a sword" وتكون قيمة المتحول (writingUtensil) موافقة للقيمة النصية "pen" , الان قم بتغيير قيمة المتحول tool الى القيمة "marker" ولاحظ ما سيحدث

ملاحظة: بمكن اعادة تعيين قيمة اي متحول منشىء باستخدام let بكتابة اسم المتحول فقط ومن ثم اشارة المساواة (=) وبعدها نضهع القيمة الجديدة (تعرفنا على ذلك سابقا لكن للتذكير)

7- المعامل المنطقي (Ternary Operator)

يوجد هناك العديد من الصياغات المميزة بالنسية للجمل الشرطية والتي تفيد التسهيل والاختصار منها نذكر المعامل (او الصيغة) المسماة Ternary Operator .ببساطة هذه الصيغة تعادل اي جملة شرطية تحوي احتمالين فقط لا غير (مثل الجمل الشرطية باستخدام المفتاحين if و else).

افضل طريقة للتوضيح هي عبر مثال , ليكن لدينا جملة شرطية بسيطة تستعمل المفتاحين if و else كالتالي:

  let isNightTime = true;
  
  if (isNightTime) {
    console.log('Turn on the lights!');
  } else {
    console.log('Turn off the lights!');
  }

باستعمال الصيغة ternary operator يصبح الكود السابق:

  isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!');

لنناقش قليلا الكود السابق:

  • الشرط (isNightTime) يتم وضعه قبل اشارة الاستفهام ?
  • التعابير التي تلي اشارة الاستفهام يتم الفصل بينهما باستخدام :
  • اذا كان الشرط محققا يتم تنفيذ الكود الاول
  • اذا كان الشرط خاطئا يتم تنفيذ الكود الثاني

تمارين بسيطة:

لنفتح محرر الاوامر console ونقوم بالتمرين التالي تمرين: اليك الكود التالي

  // Example 1
  let isRaining = true;
  
  if (isRaining) {
    console.log('it\'s raining!');
  } else {
    console.log('the weather is sunny');
  }
  // Example 2
  let username;
  let defaultName;

  if (username) {
    defaultName = username
  } else {
    defaultName = "Stranger"
  }
  console.log(defaultName)

قم باعادة صياغة الامثلة السابقة مستعملا المعامل ternary operator

8- انشاء جملة شرطية باستخدام Else if

قمنا بالتعرف سابقا على طريقة انشاء الجمل الشرطية باستخدام عدة طرق للتحقق من شرط ما ان كان صحيح او خاطئا , لكن ماذا لو اردنا وضع اكثر من شرط ولاكثر من حالة. يتم تحقيق ذلك باستخدام المفتاح (else if) والذي يتيح لنا اضافة اي عدد من الشروط والحالات لاي جملة شرطية والكثير من الحالات المعقدة.

يتم استخدام المفتاح (else if) دائما بعد ان تم بدء الجملة الشرطية باستخدام المفتاح (if) وتأتي قبل المفتاح (else) دائما مع الاخذ بعين الاعتبار ان المفتاح (else if) يقبل شرط جديدا لحالة مختلفة مثلا.

اليك المثال التالي عن كيفية استخدامها:

  let stopLight = 'yellow';
  
  if (stopLight === 'red') {
    console.log('Stop!');
  } else if (stopLight === 'yellow') {
    console.log('Slow down.');
  } else if (stopLight === 'green') {
    console.log('Go!');
  } else {
    console.log('Caution, unknown!');
  }

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

لنناقش قليلا المثال السابق:

  • بما ان الشرط (stoplight === "red") غير محقق اي انه خاطىء ننتقل للشرط التالي
  • الشرط التالي (stoplight === "yellow") محقق اي انه صحيح يتم تنفيذ الكود المرتبط بالمفتاح (else if) والذي يوافق هذا الشرط.
  • يتوقف تنفيذ الجملة الشرطية باعتبار ان الشرط السابق قد تحقق ويتم اهمالها

تمارين بسيطة:

لنفتح محرر الاوامر console ونقوم بالتمرين التالي تمرين:

  • لننشىء برنامج ما لمعرفة حالة الطقس باستخدام المفاتيح (if/else if/else) ومعالجة حالات الفصول الاربع (Winter, Spring, Summer, Autumn).
  • لنضف الى كل حالة كودا بحيث يطبع الى الكونسول عبارة ما لتحديد نوع الفصل , مثلا في حالة فصل الشتاء (Winter) نريد ان نطبع النص "It's Winter and it's raining" وقس على ذلك حسب تفضيلاتك الشخصية

9- الكلمة المفتاحية (ٍSwitch)

تعلمنا في القسم السابق كيفية انشاء جمل شرطية باستخدام المفاتيح (if/elseif /else) والتحقق من اكثر شرط لتنفيذ كود معين لكل حالة معينة, على سبيل المثال:

  let groceryItem = 'papaya';
  
  if (groceryItem === 'tomato') {
    console.log('Tomatoes are $0.49');
  } else if (groceryItem === 'papaya'){
    console.log('Papayas are $1.29');
  } else {
    console.log('Invalid item');
  }

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

المفتاح (switch) يتيح لنا صياغة بديلة تسهل لنا قراءة وكتابة اي كود مقارنة بالطريقة السابقة, لنغير الكود السابق مستعملين المفتاح switch:

  let groceryItem = 'papaya';
  
  switch (groceryItem) {
    case 'tomato':
      console.log('Tomatoes are $0.49');
      break;
    case 'lime':
      console.log('Limes are $1.49');
      break;
    case 'papaya':
      console.log('Papayas are $1.29');
      break;
    default:
      console.log('Invalid item');
      break;
  }

لنناقش قليلا المثال السابق:

  • يتم انشاء الجملة الشرطية باستخدام المفتاح (switch) عبر وضع طرف المقارنة الاول بعد المفتاح switch ومن ثم نفتح اقواس { }
  • يتم انشاء حالة (case) لكل شرط مقارنة عبر الطرف الثاني
  • يتم اتباع كل حالة شرط بالمفتاح break والذي يفيدنا بانهاء الجملة الشرطية تماما واهمال الشروط اللاحقة
  • دائما يتم انهاء اي عبارة شرطية بالمفتاح default والذي يفيد بتنفيذ كود ما في حال لم يتحقق اي من الشروط المذكورة في الجملة الشرطية

تمارين بسيطة:

لنفتح محرر الاوامر console ونقوم بالتمرين التالي تمرين: لنقم بانشاء برنامج يحوي جملة شرطية مستخدما المفتاح switch والذي يفيد مثلا لتحديد نوع الميدالية التي يحصلها عليها رياضي ما في حدذ رياضي محدد.

  • لنقم بانشاء المتحول (athleteFinalPosition) ونعطه قيمة ما.

  • ضمن العبارة الشرطية لنضف ثلاث حالات:

  • الحالة الاولى تتفقد القيمة "first place" , ان كانت قيمة الحالة مطابقة للمتحول السابق نستعمل consolelog() لاظهار النص "You get the gold medal"

  • الحالة الثانية تتفقد القيمة "second place" , ان كانت قيمة الحالة مطابقة للمتحول السابق نستعمل consolelog() لاظهار النص "You get the silver medal"

  • الحالة الثالثة تتفقد القيمة "" , ان كانت قيمة الحالة مطابقة للمتحول السابق نستعمل consolelog() لاظهار النص "You get the bronze medal"

  • لا تنسى وضع المفتاح break بعد نهاية كل حالة بعد consolelog()

  • لنضف حالة افتراضية ان لم يكن هناك تطابق باستخدام المفتاح default والتي تطبع النص التالي "No medal awarded" ضمن الكونسول و بطبيعة الحال لا تنسى المفتاح break هنا

10 – مراجعة (الخلاصة)

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

  • تنشىء جملة شرطية باستخدام المفتاح if والتي تتحقق من شرط معين وتنفذ مهمة معينة اذا تحقق الشرط
  • تنشىء جملة شرطية باستخدام المفالتيح (if/else) والتي تتحقق ايضا من شرط معين وتنفذ مهمة ما وتنفذ مهمة اخرى في حال عدم تحققه
  • يمكننا انشاء المزيد من الحالات (الشروط) باستخدام المفتاح (else if)
  • معاملات المقارنة المنطقية تشمل الرموز التالية : (<, >, <=, >=, ===, !==) والتي تستعمل لمقارنة قيمتين
  • المعامل المنطقي and (يوافق الرمز &&) يتحقق من ان كل طرفي الشرط محققان بالضرورة (truthy)
  • المعامل المنطقي or (يوافق الرمز ||) يتحقق من ان احد الشرطين او كلاهما محقق (truthy)
  • معامل النفي المنطقي (!) يحول القيمة المنطقية لقيمة ما الى معاكستها تماما
  • المعامل المسمى (ternary operator) هو بمثابة اختصار لتبسيط الجمل الشرطية (if/else)
  • المفتاح switch يستعمل لتبسيط عملية معالجة اكثر من عدة شروط لمفتاح (else if) , يفيد المفتاح break بانهاء الجملة الشرطية واهمال ما يليها من الشروط

مشروع بسيط ألة حاسبة:

لنقم بانشاء الة حاسبة بسيطة بالاعتماد على ما تعلمناه سابقا بحيث يدخل المستخدم رقمين ونقوم باجراء عملية حسابية على هذين الرقمين واظهار النتيجة (سنقوم بتطوير هذا المشروع شيئا فشيئا حتى نصل اللى مستويات اعلى باستخدام المفاهيم التي سوف نتعرف عليها لاحقا) ضمن هذا المشروع سنقوم بالاستفادة من الوظائف التالية alert() و prompt()

بدوون اي اطالة لنبدأ و نفتح محرر الاوامر console:

لابد من ايجاد طريقة لكي نعطي المستخدم الامكانية لادخال معطيات العملية ويمكن ذلك باستعمال الوظيفة prompt() , هنا في مشروعنا نريد ادخال قيمتين نقوم بذلك كما يلي

  function calc() {
    let first = prompt("enter first number")
    let second = prompt("enter second number")
    let operator = prompt("Type the symbol for the operation you want to do: sum (+) subtract (-) multiply (*) divide (/)")
    let result;

    switch(operator) {
      case "+":
        result = Number(first) + Number(second)
        break;
      case "-":
        result = Number(first) - Number(second)
        break;
      case "*":
        result = Number(first) * Number(second)
        break;
      case "/":
        result = Number(first) / Number(second)
      default:
        alert("invalid, or No operator found plz provide one")
    }
    alert(`the result is : ${result ? result : "there is some error"}`)  
  }

اما انسخ الكود السابق الى الكونسول او اكتبه يدويا ثم اضغط Enter

الكود السابق مكون من عدة اسطر ولكن ضمن الكونسول عندما نريد الحصول على سطر جديد لتكملة الكود عادة نضغط ُEnter ولكن نلاحظ عندما نفعل ذلك يتم تنفيذ الكود ولا يتيح لنا المجال لكي نكمل كتابة الكود والحل بانه عندما تنتهي من كتابة سطر وتريد الانتقال الى السطر التالي بأن نضغط الزرين shift+Enter مع بعض.

ايضا نلاحظ وجود الوظيفة Number والتي تفيد بتحويل القيم الموجودة ضمن المتغيرات المدخلة الى ارقام

بعد ان نكتب الكود السابق ونضغط Enter نلاحظ يظهر لدينا نافذة تطلب منا ادخال قيمة للمتغير الاول ومن ثم قيمة للمتغير الثاني . ونافذة ثالثة لتحدد نوع العملية. يتم اظهار نتيجة العملية الحسابية باستخدام الوظبفة alert() ايضا بشكل نافذة منبثقة

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


Topics

تسجيل بنشرتنا البريدية

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