تعلم البرمجة باستخدام JavaScript


الدرس: اختر الشرط المناسب للتحكم في تقدم برنامجك (IF, ELSE, SWITCH)


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

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

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

افهم عبارات if / else



تعد التعليمات  if  /   else  واحدة من أكثر التعليمات    عالمية في البرمجة. سواء كان ذلك يتفاعل مع مدخلات المستخدم ، أو نتائج الحساب ، أو مجرد التحقق مما إذا كان شخص ما قد قام بتسجيل الدخول أم لا ، فغالبًا ما يتعين عليك استخدام عبارات if / else .

إذا (المستخدم متصل ، افتح صفحته الرئيسية)
ELSE العودة إلى صفحة تسجيل الدخول)

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

استخدم القيم boolean


في JavaScript ، إذا استخدمنا boolean    من أجل العبارات    if  /   else  ، فإن بناء الجملة سيبدو كما يلي:


if (myBoolean) {

 

// myBoolean رد فعل على القيمة صحيح لـ 

 

} else {

 

// myBoolean رد فعل على القيمة خطأ لـ 

 

}
 
لذلك ، للتحقق مما إذا كان المستخدم قد قام بتسجيل الدخول ، يمكنك القيام بما يلي:

let isUserLoggedIn = true;

 

if (userLoggedIn) {

 

   console.log("User logged in!");

 

} else {

 

   console.log("Alert, intruder!");

}
 
في الحالة المذكورة أعلاه ، ستحصل على طباعة من وحدة التحكم    " User logged in!");"  ، لأن قيمة المنطقية    userLoggedIn  صحيحة. إذا كانت خاطئة ، فستحصل عليها بدلاً من ذلك    


("Alert, intruder!");

استخدم التعبيرات


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

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

  • <   أقل من ؛
  • <=   اقل او يساوي؛
  • ==   يساوي ؛
  • >=   أكبر من أو يساوي؛
  • >   أكبر من ؛
  • !=   مختلف عن.
مثلا :

const numberOfSeats = 30;

 

const numberOfGuests = 25;

 

if (numberOfGuests < numberOfSeats) {

 

// السماح لمزيد من الضيوف

 

} else {

 

// لا تسمح بمزيد من لضيوف الجدد

 

}
 
يمكنك أيضًا ربط العبارات if / else بالتفاعل مع العديد من الشروط المحتملة:

if (numberOfGuests == numberOfSeats) {

 

// جميع المقاعد مشغولة
 

} else if (numberOfGuests < numberOfSeats) {

 

// السماح لمزيد من الضيوف

 

} else {

 

// لا تسمح بمزيد من لضيوف الجدد

 

}
 
يجعل تسلسل التعليمات من الممكن التنبؤ بنتائج مختلفة وفقًا لمواقف مختلفة.

تدرب على الشروط if/else


JavaScript
هذه فرصة للتدرب على استخدام عبارات if / else .

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

لإجراء هذا التمرين ، إليك كيفية المضي قدمًا:

  1. سوف تقرأ كود JavaScript ، الذي تم التعليق عليه بالكامل ، لكي تفهم تمامًا الغرض من استخدام كل عنصر ، وخاصة المتغيرات المتاحة لك. هناك بالتأكيد بعض العناصر التي لا تفهمها لأنك لم تر بعد كيفية التعامل مع HTML في JavaScript ، ولكن هنا عليك فقط استغلال المتغيرات والوظائف الموجودة في الكود بالفعل.
  2. سوف تكتب شرط if / else بين السطور 34 و 38 والذي سوف يستدعي وظيفة رفض () إذا كان العمر الذي تم إدخاله يتوافق مع قاصر ، ووظيفة valider()إذا كان كبيرا.
  3. يرجى ملاحظة أنه تم تخزين سن الرشد في متغير ageMajorite ، لذلك يجب استخدام هذا المتغير في الحالة.
بمجرد الانتهاء من كتابة كود الشرط الصحيح ، يمكنك متابعة الاختبارات عن طريق إدخال أعمار مختلفة والتحقق من صحتها.

الحل المقترح



اكتشف المساواة :   ==    أو  ===



في JavaScript ، ليست كل المساواة متساوية:

هناك طريقتان لمعرفة ما اذا كان قيمتين متساوون في جافا سكريبت: == === و، وتسمى أيضا المساواة البسيطة و المساواة الصارمة :

  • تتحقق المساواة البسيطة من القيمة ، ولكن ليس النوع. هذا يعيد القيمة  true  :
  • 5 == "5"
  • من ناحية أخرى ، تتحقق المساواة الصارمة من القيمة والنوع . إذن:
  • 5 === "5"
  • تعيد    false  ، لأننا نقارن    number  بـ    string  .
وبالمثل، هناك نوعان من مشغلي عدم المساواة،    !=  و    !==  ، مع نفس تمييز.

افهم الشروط المتعددة


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

  • &&   - AND - للتحقق مما إذا كان كلا الشرطين صحيحين ؛
  • ||     - OR - للتحقق مما إذا كان شرط واحد على الأقل صحيحًا ؛
  • !     - NOT - للتحقق مما إذا كان الشرط لا يصح. 

let userLoggedIn = true;

 

let hasUserPremiumAccount = true;

 

let userHasMegaPremiumAccount = false;

 

userLoggedIn && userHasPremiumAccount; // true

 

userLoggedIn && userHasMegaPremiumAccount; // false

 

userLoggedIn || userHasPremiumAccount; // true

 

userLoggedIn || userHasMegaPremiumAccount; // true

 

!userLoggedIn; // false

 

!userHasMegaPremiumAccount; // true
 
بالطبع ، يمكن خلط هؤلاء المشغلين ومطابقتهم وفقًا لاحتياجاتك الدقيقة.

تدرب على العمليات المنطقية


JavaScript
قم بزيارة محرر CodePen هذا للتدرب   .

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

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

لذلك ، فإن مهمتك هي كتابة الشرط بنفس طريقة التمرين السابق على مستوى الأسطر 40 إلى 42 ، مع مراعاة المتغير الجديد   isControlParentalActive  .

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

الحل المقترح



افهم فكرة مهمة: نطاق المتغيرات



في JavaScript ، المتغيرات التي تم إنشاؤها بواسطة    let  أو    const  يمكن رؤيتها أو استخدامها فقط داخل كتلة التعليمات البرمجية التي تم الإعلان عنها.

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

 كتلة من التعليمات البرمجية ، كما غالبا ما يشار إليها بوصفها كتلة ، هو جزء من التعليمات البرمجية المغلقة في الأقواس المجعدة {} .

يسمى هذا نطاق المتغيرات أو block scope ( باللغة الإنجليزية)  . هذا مثال :


let userLoggedIn = true;

 

if (userLoggedIn) {

 

   let welcomeMessage = 'Welcome back!';

 

} else {

 

   let welcomeMessage = 'Welcome new user!';

 

}

 

console.log(welcomeMessage); // renvoie une erreur
 
في هذا الكود ، لدينا كتلتان من التعليمات البرمجية من العبارة if / else . تم تمييزها في الصورة أدناه:
JavaScript
نطاقات مميزة

تعلن الكتلتان البرتقالية والوردية عن متغير بواسطة  let welcomeMessage  . ومع ذلك ، فإن هذه المتغيرات متاحة فقط داخل الكتل التي تم الإعلان عنها. لهذا السبب ، عندما تحاول عرض محتويات    welcomeMessage  على وحدة التحكم ، تحصل على خطأ: بالنسبة للكود خارج الكتل (يسمى أيضًا النطاق الخارجي أو الأصل ) ، لا يوجد متغير    welcomeMessage  !

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

في هذه الحالة ، قد تكون إحدى الطرق هي التصريح عن المتغير في النطاق الخارجي ثم تعديله داخل الكتل  if  /   else  :


let userLoggedIn = true;

 

let welcomeMessage = ''; // déclarer la variable ici

 

if (userLoggedIn) {

 

welcomeMessage = 'Welcome back!'; // modifier la variable extérieure

 

} else {

 

welcomeMessage = 'Welcome new user!'; // modifier la variable extérieure

 

}

 

console.log(welcomeMessage); // imprime 'Welcome back!'
 
هنا ، نظرًا لإعلان المتغير في النطاق الأصلي ، فهو متاح ويمكن الوصول إليه في كل مكان ، ويمكن تعديله بشكل صحيح.

استخدم عبارات التبديل switch



ماذا لو كنت تريد التحقق من قيمة المتغير مقابل قائمة القيم المتوقعة ، والتفاعل وفقًا لذلك؟ لهذا يمكنك استخدام التعليمات    switch  :

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


let firstUser = {

 

name: "Will Alexander",

 

age: 33,

 

accountLevel: "normal"

 

};

 

let secondUser = {

 

name: "Sarah Kate",

 

age: 21,

 

accountLevel: "premium"

 

};

 

let thirdUser = {

 

name: "Audrey Simon",

 

age: 27,

 

accountLevel: "mega-premium"

 

};
 
هنا يمكنك استخدام تعليمة switch تأخذ المتغير للتحقق وقائمة القيم ، كحالات مختلفة:

switch (firstUser.accountLevel) {

 

case 'normal':

 

      console.log('You have a normal account!');

 

break;

 

case 'premium':

 

      console.log('You have a premium account!');

 

break;

 

case 'mega-premium':

 

      console.log('You have a mega premium account!');

 

break;

 

default:

 

      console.log('Unknown account type!');

 

}
 
بعد تشغيل الكود في كل عبارة  case  ، أضف العبارة  break  . إذا لم تقم بذلك ، فستستمر JavaScript في تنفيذ الحالات التالية ( المتتالية  ) حتى تواجه تعليمة break   أو تنتهي    التعليمات   switch  . كما ترى في المثال ، يمكنك أيضًا إضافة حالة    default  يتم تشغيلها فقط إذا كان المتغير الذي تتحقق منه لا يطابق أيًا من القيم المدرجة.

يمكن استخدام المفتاح في حالات مختلفة ولكن بشكل خاص لتسهيل قراءة تسلسل شروط if / else .

على سبيل المثال ، إليك كيفية كتابة المثال السابق باستخدام if / else :


if (firstUser.accountLevel === 'normal' ) {

console.log('You have a normal account!');

} else if (firstUser.accountLevel === 'premium' ) {

console.log('You have a premium account!');

} else if (firstUser.accountLevel === 'mega-premium' ) {

console.log('You have a mega premium account!');

}  else {

console.log('Unknown account type!');

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

باختصار



مبروك على الانتهاء من هذا الفصل! لقد غطينا الكثير من الأشياء هنا. عندكم :
  • تعلمت كيفية العمل    if  /   else  ؛
  • النظر في الأنواع المختلفة من الشروط التي يمكن استخدامها لبيانات if / else ؛
  • تعلمت تجميع الشروط المختلفة مع العوامل المنطقية ؛
  • استكشاف نطاق المتغيرات ، وعواقبها على بنية الكود ؛
  • اكتشف البيان  switch  للمقارنة بقائمة القيم المتوقعة.
في الفصل التالي ، سوف نلقي نظرة على تكرار المهام مع الحلقات.