English translation by ChatGPT

Ahmed Zayed 5/2/1/1 أساسيات الجافاسكريبت 'الجمل الشرطية Conditional statements'

Course

دورة تدريبية

5/2/1/1 أساسيات الجافاسكريبت 'الجمل الشرطية Conditional statements'

تطوير المواقع الإلكترونية MEAN-Stack from A to Z التأسيس Level1

عبارة عن مجموعة أكواد برمجية تكتب تبدأ بالشرط (مثلا اذا كان السن أكبر من 18) يتم تنفيذ مجموعة من الأكواد (مثلا إنشاء حساب للمستخدم) و في حالة عدم توافر الشرط يتم تنفيذ مجموعة أخرى من الأوامر (مثلا إظهار رسالة للمستخدم عفوا لا يمكنك إنشاء حساب)

الجملة الشرطية if

يمكننا تطبيق المثال السابق بإستخدام الجملة if بالكود التالي

Code


          var age = 19;
          if(age > 18){
          //yes
          }
          else{
          //no
          }

كما نري في الكود السابق يتم كتابة الشرط بين قوسين من هذا النوع () بعد كلمة if و ينم كتابة الكود الذي يجب أن يتم تنفيذه بين قوسين من نوع {} و بعدها يتم كتابة كلمة else و بعدها كتابة الكود الذي سيتم تنفيذه في حالة عدم توافر الشرط بين قوسين من نوع {} ماذا لو كان هناك أكثر من شرط مثلا إذا كان العمر أكبر من 18 ينفذ كود معين و لو كان العمر بين 15 و 18 ينفذ كود أخر و لو كان العمر اقل من 15 و اكبر من 10 ينفذ كود أخر و لو كان أصغر من 10 ينفذ كود أخر فيمكننا كتابة الكود التالي:

Code


          var age = '1';
          if(age >= 18){
          //code
          document.write('+ 18')
          }
          else if(age > 15 && age < 18){
          //code
          document.write('between 15 and 18')
          }
          else if(age > 10 && age < 15){
          //code
          document.write('between 10 and 15')
          }
          else{
          //code
          document.write('- 10')
          }

يلاحظ أن في هذا الكود نطلب مراجعة اول شرط بـ if وحدها في حالة عدم تحققه نطلب مراجعة بشرط ثاني else if و هكذا و بعد انتهاء كل الشروط اذا أردنا كتابة كود يتحقق عندما لا يتحقق أي من الشروط السابقة يمكننا كتابته في else

يلاحظ أن نتيجة عملية المقارنة تكون من نوع منطقي boolean أي أنها تعطي true أو false بمعني أخر عندما يتحقق الشرط فإن ناتج العملية true عندما لا يتحقق الشرط فإن ناتج العملية false

عوامل المقارنة Comparison Operators

عندما يتم المقارنة بين شيئين أو لنقل بين متغيرين مثلا فإننا نستخدم علامات لتحديد علي أي أساس سوف نحدد جملتنا الشرطية كما إستخدمنا في الأمثلة السابقة فمثلا إذا أردنا معرفة هل المتغير يساوي رقم كذا كنا نستخدم تلك العلامة "==”

يرجى التفريق بين علامة "==” عند استخدامها في الجمل الشرطية مثل if علامة "=” عند عملية تعيين قيمة للمتغيرات

أيضا هناك العلامات التالية

العلامة	المعني	شرح
"=="	يساوي	للمقارنة بين عنصريين و معرفة هل هم متساووين مثل if(i == 5) مع العلم أن الشرط سيتحقق في حالة كانت الـ i تساوي 5 بنوع بيانات number أو أنها كانت تساوي '5' بنوع بيانات string
"==="	يساوي مع مراعاة نوع البيانات	اما هذه العلامة فتراعي نوع البيانات فإذا قمنا بإستخدام الكود التالي var x = 1; var y = '1'; if(x === y) فلن يتحقق الشرط بعكس استخدام العلامة ==
"!="	لا يساوي	يتم تحقيق الشرط عندما لا يتساوي القيمتين مثلا if(x != y) ايضا هذه العلامة تتجاهل نوع البيانات x = 5 , y = '5' في هذه الحالة لن يتحقق الشرط لانه يعتبر المتغيريين متساووين
"!=="	لا يساوي مع مراعاة نوع البيانات	يتم تحقيق الشرط عندما لا يتساوي القيمتين مع مراعاى نوغ البيانات if(x !== y) x = 5 , y = '5' في هذه الحالة سيتحقق الشرط لانهم مختلفتين لإختلاف نوع البيانات
>	أكبر من	مثلا if(x > 8) سيتحقق الشرط عندما تكون قيمة x = 9 او أكبر
>=	أكبر من أو يساوي	في المثال السابق يتحقق الشرط عندما تكون قيمة x = 8 أو أكبر
<	أصغر من	مثلا if(x < 8) سيتحقق الشرط عندما تكون x = 7 أو أقل
<=	أصغر من أو يساوي	في المثال السابق يتحقق الشرط عندما تكون قيمة x = 8 أو أصغر

العوامل المنطقية Logical Operators

ماذا لو أردنا تحقيق أكثر من شرط في نفس الجملة مثلا لو كنا نبحث عن طالب سنه أكبر من 18 سنة و نوعه ذكر مثلا يمكننا كتابة مثل ذلك الكود

Code


  var age = 18;
  var gender = true;
  if(age > 18 && gender == true){
  //do something
  }

و فيما يلي قائمة بالعوامل المنطقية

العلامة	الإسم	الوصف	مثال
&&	and	يتطلب تحقق شرطين أو أكثر	if(age > 18 && gender == true) { لن ينفذ الكود هنا إلا بتوافر الشرطين معا }
\|\|	or	يتطلب تحقيق شرط واحد من الإثنين	if(age > 18 \|\| gender == true) { ينفذ الكود هنا اما ان يكون السن اكبر من 18 أو ان يكون ذكر (علي إفتراض انك قمت بتحديد ان الذكر يتحصل علي قيمة true و الأنثي تتحصل علي قيمة false , و بالكبع يمكنك عكس القيم ) }
!	not	و هو عكس للشرط	var gender = false; if(!gender == true){ يتم تنفيذ الكود هنا لان gender = false و معني الشرط الأن أن يكون gender لا تساوي true }

الجملة الشرطية switch

تختلف switch عن if في الكثير من التفاصيل سنتطرق إلى تلك الإختلافات عن طريق تحليل الكود التالي:

Code


  var age = 19;
  switch(age){
  case 18 : document.write('user age + 18');
  break;
  default : document.write('user age not correct')
  }

- يتم كتابة المتغير الذي سيتم التحقق منه بعد كلمة switch داخل أقواس () بعدها يتم فتح أقواس {} و كتابة الكود بداخلها , مثلا في حالة أن المتغير المراد التحقق منه (في حالتنا age ) يساوي 18 فنكتب case 18 بعدها يتم كتابة : و وضع الكود المراد تنفيذه بعد تلك العلامة فإذا تحقق شرط ان المتغير يساوي 18 يتم تنفيذ الكود و بعدها يتم كتابة كلمة break لايقاف الكود , بعد كتابة كل الحالات مثل:

Code


  case 15 : //do something when age equal 15
  break;
  case 10 : //do something when age equal 10

بعد كل حالة يتم وضع كلمة break لإيقاف الـ switch و اذا لم توضع كلمة break سيتم تنفيذ الشرط التالي و هكذا الى أن يتم ايقاف الـ switch أو الإنتهاء من تنفيذ كل الشروط في حالة اذا لم يتوافق قيمة المتغير مع أي من الشروط يتم وضع كلمة default و تعني إذا لم يتم تحقق أي شرط من الشروط السابقة يتم تنفيذ الكود التالي

على عكس if لا يمكن لـ switch أن تتحقق من جميع العمليات المنطقية مثلا لا يمكن وضع شرط أن يكون المتغير أكبر من أو أصغر من أو لا يساوي و لكن فقط يتم التحقق من ان المتغير يساوي الشرط المراد التحقق منه

1/1/2/5 JavaScript fundamentals 'Conditional Statements'

Web Development MEAN-Stack from A to Z Fundamentals Level1

It is a set of code that starts with a condition (for example, if the age is greater than 18), a set of code is executed (for example, creating a user account), and if the condition is not met, another set of commands is executed (for example, displaying a message to the user: "Sorry, you cannot create an account").

The if Statement

We can apply the previous example using the if statement with the following code:

Code


            var age = 19;
            if(age > 18){
            //yes
            }
            else{
            //no
            }

As we see in the previous code, the condition is written inside parentheses () after the word "if," and the code to be executed is written inside curly braces {}. After that, the word "else" is written, followed by the code to be executed if the condition is not met, also inside curly braces {}. What if there are multiple conditions? For example, if the age is greater than 18, execute a specific code; if the age is between 15 and 18, execute another code; if the age is less than 15 and greater than 10, execute another code; and if the age is less than 10, execute another code. We can write the following code:

Code


            var age = '1';
            if(age >= 18){
            //code
            document.write('+ 18')
            }
            else if(age > 15 && age < 18){
            //code
            document.write('between 15 and 18')
            }
            else if(age > 10 && age < 15){
            //code
            document.write('between 10 and 15')
            }
            else{
            //code
            document.write('- 10')
            }

Notice that in this code, we first check the condition with "if." If it is not met, we check the second condition with "else if," and so on. After all the conditions, if we want to write code that executes when none of the previous conditions are met, we can write it in "else."

Note that the result of the comparison operation is of type boolean, meaning it returns true or false. In other words, when the condition is met, the result is true, and when the condition is not met, the result is false.

Comparison Operators

When comparing two things or two variables, for example, we use symbols to determine the basis of our conditional statement, as we used in the previous examples. For example, if we want to check if a variable equals a certain number, we use the symbol "==".

Please differentiate between the symbol "==" when used in conditional statements like "if" and the symbol "=" when assigning a value to variables.

Also, there are the following symbols:

Symbol	Meaning	Explanation
"=="	Equal to	To compare two elements and check if they are equal, like if(i == 5). Note that the condition will be met if i equals 5 as a number or '5' as a string.
"==="	Equal to with data type consideration	This symbol considers the data type. For example, if we use the following code: var x = 1; var y = '1'; if(x === y), the condition will not be met, unlike when using the == symbol.
"!="	Not equal to	The condition is met when the two values are not equal, like if(x != y). This symbol also ignores the data type. For example, x = 5, y = '5', the condition will not be met because it considers the two variables equal.
"!=="	Not equal to with data type consideration	The condition is met when the two values are not equal, considering the data type. For example, if(x !== y) where x = 5, y = '5', the condition will be met because they are different due to the data type.
>	Greater than	For example, if(x > 8), the condition will be met when x = 9 or greater.
>=	Greater than or equal to	In the previous example, the condition will be met when x = 8 or greater.
<	Less than	For example, if(x < 8), the condition will be met when x = 7 or less.
<=	Less than or equal to	In the previous example, the condition will be met when x = 8 or less.

Logical Operators

What if we want to check multiple conditions in the same statement? For example, if we are looking for a student who is older than 18 and is male, we can write the following code:

Code


    var age = 18;
    var gender = true;
    if(age > 18 && gender == true){
    //do something
    }

Below is a list of logical operators:

Symbol	Name	Description	Example
&&	AND	Requires two or more conditions to be met	if(age > 18 && gender == true) { The code here will only execute if both conditions are met }
\|\|	OR	Requires one of the conditions to be met	if(age > 18 \|\| gender == true) { The code here will execute if either the age is greater than 18 or the gender is male (assuming you set male as true and female as false, and you can reverse the values) }
!	NOT	It negates the condition	var gender = false; if(!gender == true){ The code here will execute because gender = false, and the condition means that gender does not equal true }

The switch Statement

The switch statement differs from the if statement in many details. We will discuss these differences by analyzing the following code:

Code


    var age = 19;
    switch(age){
    case 18 : document.write('user age + 18');
    break;
    default : document.write('user age not correct')
    }

- The variable to be checked is written after the word "switch" inside parentheses (). Then, curly braces {} are opened, and the code is written inside. For example, if the variable to be checked (in our case, age) equals 18, we write "case 18," followed by a colon ":" and the code to be executed. If the condition is met, the code is executed, and then the word "break" is written to stop the code. After writing all the cases, like:

Code


    case 15 : //do something when age equals 15
    break;
    case 10 : //do something when age equals 10

After each case, the word "break" is placed to stop the switch. If "break" is not placed, the next condition will be executed, and so on until the switch is stopped or all conditions are executed. If the variable's value does not match any of the conditions, the word "default" is used, meaning if none of the previous conditions are met, the following code will be executed.

Unlike the if statement, the switch statement cannot check all logical operations. For example, you cannot set a condition where the variable is greater than, less than, or not equal to. It only checks if the variable equals the condition to be checked.

February 28, 2025

Course

دورة تدريبية

5/2/1/1 أساسيات الجافاسكريبت 'الجمل الشرطية Conditional statements'

الجملة الشرطية if

عوامل المقارنة Comparison Operators

العوامل المنطقية Logical Operators

الجملة الشرطية switch

1/1/2/5 JavaScript fundamentals 'Conditional Statements'

The if Statement

Comparison Operators

Logical Operators

The switch Statement

Read More

إقرأ المزيد

دورة تدريبية

Course

3/2/1/1 أساسيات الجافاسكريبت 'التعامل مع النصوص'

1/1/2/3 JavaScript fundamentals 'Working with Strings'

دورة تدريبية

Course

4/2/1/1 أساسيات الجافاسكريبت 'التعامل مع التاريخ و الوقت'

1/1/2/4 JavaScript fundamentals 'Handling Date and Time'

أزمة صناعة المحتوى الرقمي

Crisis of Digital Content Industry

دراسة

Study

إستراتيجيات التسويق الرقمي للدورات التسويقية

Digital Marketing Strategies for Training Courses

دورة تدريبية

Course

1/1/1/1 قصة المواقع الإلكترونية منذ البداية

1/1/1/1 The Story of Websites From the Beginning

Keywords

كلمات مفتاحية