١.٦ الجمل الشرطية — الجزء الثاني

تمهيد

التمرين 1: إذا كان اسم المستخدم "Jojo" وكلمة المرور "123"، فاعرض "Welcome Jojo" في وحدة التحكم.

var username = "Jojo";
var password = "123"
if(username === "Jojo" && password === "123"){
    console.log("Welcome Jojo!");
}

ستحصل على: Welcome Jojo!.

غيّر اسم المستخدم إلى "Ali".

var username = "Ali";
var password = "123"
if(username === "Jojo" && password === "123"){
    console.log("Welcome Jojo!");
}

لن تظهر أي نتيجة.

غيّر كلمة المرور إلى "456":

var username = "Jojo";
var password = "456"
if(username === "Jojo" && password === "123"){
    console.log("Welcome Jojo!");
}

لن تظهر نتيجة أيضًا؛ لأن شرط كلمة المرور غير متحقق.

ملاحظة (١): === يتحقّق من تطابق النوع والقيمة، بينما == يقارن القيم مع السماح بتحويل النوع.

ملاحظة (٢): && هو العامل المنطقي و، ويكون true إذا تحققت العبارتان معًا. هنا يجب أن يتحقق شرطا اسم المستخدم وكلمة المرور.

التمرين 2: إذا كان اسم المستخدم "Ali" ولديه مفتاح الغرفة، فاعرض "You are allowed in the room".

var username = "Ali";
var hasKey = true;
if(username === "Ali" && hasKey){
    console.log("You are allowed in the room");
}

ستحصل على: "You are allowed in the room".

غيّر قيمة hasKey إلى false:

var username = "Ali";
var hasKey = false;
if(username === "Ali" && hasKey){
    console.log("You are allowed in the room");
}

لن تظهر نتيجة؛ فالشرط قيمته false.

لاحظ ما يلي: لم نكتب hasKey === true لأن ذلك مفهوم ضمنًا. true ==== true قيمته true، و false === true قيمته false. يمكنك كتابة hasKey === true، لكن ذلك ليس ضروريًا.

التمرين 3: إذا كان لدى العميل القسيمة X123 وكانت قيمة طلبه أعلى من 50 دولارًا، فامنحه خصمًا.

var customerCoupon = "X5";
var customerPaid = 30;
if(customerCoupon === 'X123' && customerPaid >= 50){
    console.log("You got a discount");
}

لن يظهر شيء لأن customerDiscount لا يساوي 'X123'، ولأن العميل دفع أقل من 50.

غيّر القيم وجرّب الشيفرة مجددًا:

var customerCoupon = "X123";
var customerPaid = 30;
if(customerCoupon === 'X123' && customerPaid >= 50){
    console.log("You got a discount");
}

لن تظهر نتيجة. فرغم امتلاك العميل القسيمة، دفع أقل من 50. جرّب مجددًا:

var customerCoupon = "X123";
var customerPaid = 50;
if(customerCoupon === 'X123' && customerPaid >= 50){
    console.log("You got a discount");
}

ستكون النتيجة: "You got a discount" لأن الشرطين متحققان.

العامل المنطقي OR

ماذا لو كان العميل يحصل على خصم إذا بلغت قيمة طلبه 50 أو أكثر، أو كان لديه القسيمة X123.

var customerCoupon = "X123";
var customerPaid = 20;
if(customerCoupon === 'X123' || customerPaid >= 50){
    console.log("You got a discount");
}

ستكون النتيجة: You got a discount.

لماذا؟ || يكون true إذا تحققت إحدى العبارتين على الأقل. أي إن customerCoupon === 'X123' || customerPaid >= 50 يكون true إذا كانت customerCoupon === 'X123' أو customerPaid >= 50 قيمتها true.

في مثالنا: "X123" === 'X123' قيمته true، و 20 >= 50 قيمته false، لذلك تكون نتيجة العبارة الكاملة customerCoupon === 'X123' || customerPaid >= 50 قيمتها true.

لنجرّب الشيفرة التالية:

var customerCoupon = "X5";
var customerPaid = 70;
if(customerCoupon === 'X123' || customerPaid >= 50){
    console.log("You got a discount");
}

ستكون النتيجة: You got a discount.

لماذا؟ في مثالنا: "X5" === 'X123' قيمته false، و 70 >= 50 قيمته true، لذلك تكون نتيجة العبارة الكاملة customerCoupon === 'X123' || customerPaid >= 50 قيمتها true.

وفي هذه الشيفرة:

var customerCoupon = "X123";
var customerPaid = 100;
if(customerCoupon === 'X123' || customerPaid >= 50){
    console.log("You got a discount");
}

ستكون النتيجة: You got a discount.

لماذا؟ في مثالنا: "X123" === 'X123' قيمته true، و 100 >= 50 قيمته true، لذلك تكون نتيجة العبارة الكاملة customerCoupon === 'X123' || customerPaid >= 50 قيمتها true.

ماذا عن هذه الشيفرة؟

var customerCoupon = "U123";
var customerPaid = 10;
if(customerCoupon === 'X123' || customerPaid >= 50){
    console.log("You got a discount");
}

تكون النتيجة false لأن العبارتين غير متحققتين.

تدريبات

التمرين 4: إذا كانت حرارة الغرفة أعلى من 40 أو أقل من 0، فاعرض "Extreme weather" في وحدة التحكم:

var roomTemp = 40;
if(roomTemp > 40 || roomTemp < 0){
  console.log("Extreme weather");
}

لن تظهر نتيجة لأن40 > 40 قيمته false، و 40 < 0 قيمته false.

التمرين 5: إذا اشترى الطفل آيس كريم أو لوح شوكولاتة، فاعرض "you should not buy ice cream or chocolate".

var kidBuys = "chocolate";
if(kidBuys === "chocolate" || kidBuys === "ice cream"){
  console.log("You should not buy ice cream or chocolate");
}

ستكون النتيجة: You should not buy ice cream or chocolate

التمرين 6: في هذا التمرين، إذا وُجدت غيوم أو كان الجو شديد الحرارة، فاعرض "It is going to rain"؛ وإلا فاعرض "There is no rain".

var thereAreClouds = false;
var isItHot = true;
if(thereAreClouds || isItHot){
  console.log("It is going to rain");
}else{
  console.log("There is no rain");
}

ستحصل على: It is going to rain

التمرين 7: إذا تجاوزت علامة الرياضيات 80 أو علامة العربية 90، فكافئ الطالب؛ وإلا فلا.

var mathMark = 82;
var arabicMark = 70;
if(mathMark > 80 || arabicMark > 90){
  var rewarded = true;
}else{
  var rewards = false;
}
console.log(rewarded);

ستكون النتيجة true

التمرين 8: إذا كان عمر المستخدم 18 أو أكثر، أو كان لديه إذن خاص، فاعرض "Allowed".

var age = 17;
var hasPermission = false;
if(age >= 18 || hasPermission){
  console.log("Allowed")
}

لن تظهر أي نتيجة.

العامل المنطقي NOT

التمرين 9: اقرأ الشيفرة التالية وحاول فهمها.

var testValue = false;
if(!testValue){
  console.log("The condition is true");
}else{
  console.log("The condition is false");  
}

ستحصل على: The condition is true

التمرين 10: اقرأ الشيفرة التالية وحاول فهمها.

var testValue = true;
if(!testValue){
  console.log("The condition is true");
}else{
  console.log("The condition is false");  
}

ستحصل على: The condition is false

لاحظ ما يلي: ! عامل النفي المنطقي؛ يحوّل القيمة الصادقة إلى false، والقيمة الكاذبة إلى true.

التمرين 11: إذا لم يكن لدى الشخص مفتاح الغرفة، فامنع دخوله.

var hasKey = false;
if(!hasKey){
  var accessDenied = true;
}else{
  accessDenied = false;
}
console.log(accessDenied);

ستحصل على: true

التمرين 12: إذا كان اسم المستخدم فارغًا، فاعرض "Please provide us with your username! The username field can not be empty!".

var username = "";
if(!username){
  console.log("Please provide us with your username! The username field can not be empty!")
}

ستحصل على: Please provide us with your name! The name field can not be empty!

لماذا؟ السلسلة النصية الفارغة تُعامل كقيمة كاذبة في الشروط.

التمرين 13: إذا لم تكن درجة الحرارة صفرًا، فيمكن للطفل الخروج.

var temp = 0;
if(!temp){
  var boyCanNotGoOut = true;
}else{
  var boyCanNotGoOut = false;
}
console.log(boyCanNotGoOut);

ستحصل على: true

لماذا؟ العدد 0 يُعامل كقيمة كاذبة في JavaScript.

التمرين 14: إذا لم يُدخل المستخدم كلمة المرور، فاطلب منه إدخالها.

var password = null;
if(!password){
  console.log("Please provide us with the password");
}

ستحصل على: Please provide us with the password

لماذا؟ تُعامل null كقيمة كاذبة في JavaScript.

ما وظيفة null؟ إنها قيمة خاصة في JavaScript نستخدمها للتعبير عن غياب قيمة مقصودة.

ألا يمكننا استخدام var password = ''؟ يمكن ذلك في بعض الحالات، لكن ثمة فرق بين '' و null. لنفحصه:

التمرين 15: اقرأ الشيفرة التالية وحاول فهمها.

var username = '';
if(!username){
  console.log("Please provide us with the username");
  console.log(typeof username);
}
var password = null;
if(!password){
  console.log("Please provide us with the password");
  console.log(typeof password)
}

ستحصل على:

Please provide us with the username
string
Please provide us with the password
object

'' سلسلة نصية، بينما تُرجع typeof مع null النتيجة "object". هذه حالة تاريخية خاصة في JavaScript؛ فالقيمة null ليست كائنًا فعليًا، بل قيمة أولية تعبّر عن غياب القيمة. سنناقش الكائنات لاحقًا.

ملاحظة (٣): null تعبّر عن غياب القيمة، بينما '' تعني وجود سلسلة نصية لا تحتوي على محارف.

التمرين 16: إذا لم تُسجَّل علامة الرياضيات، فاطلب من المعلّم إدخالها.

var mathMark = null;
if(!mathMark){
  console.log("Please provide us with math mark");
}

ستحصل على: Please provide us with math mark

ملاحظة (٤): نستخدم null هنا لأن علامة الرياضيات غير متاحة حاليًا.

التمرين 17: إذا لم تُحدّد قيمة العتبة، فاطلب من المختص إدخالها:

var thresholdValue = null;
if(!thresholdValue){
  console.log("Please provide us with the threshold value");
}

ستحصل على: Please provide us with the threshold value