Print bookPrint book

Submodule 6.2: Making Decisions

Site: ΕΛ/ΛΑΚ Moodle
Course: Study / Web Design and Web Development
Book: Submodule 6.2: Making Decisions
Printed by: Guest user
Date: Thursday, 21 November 2024, 10:31 PM

Description

  • Comparison operators
  • If statements
  • Logical operators

Table of contents

Comparison operators

The table below shows the comparison operators available in JavaScript.

These operators are used to test whether something is true or false. 

For example, they can be used to test whether two variable values are equal or if the one is greater than the other.

Usually, depending on whether the result is true or false we take different actions. 

Operator    Description
==          equal to
!=          not equal
>           greater than
<           less than
>=          greater than or equal to
<=          less than or equal to

The if statement

The if statement is a conditional expression in JavaScript.

Conditionals are easy to understand since they have the same meaning in JavaScript with what they have in English.

They actually say: " if something is true, do the following"

if (expression) {
    //this code runs if expression evaluates to true
}
Example

The code below is a combination of the if statement with an operator.

What it does, is that it takes the value that the user enters into the prompt popup window, passes it in the myNum variable and checks whether this number is smaller than 5. If this is true, like if our number was 4, it then goes and writes what we have defined in the document. 

Notice the syntax: the expression is inside the "parenthesis", and the block of code you want to execute on true is enclosed by "curly braces" which look like this: { }

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>The if statement </title>
   </head>
   <body>
     <h3> The if statement</h3>
     <script>
          var a = 5;
          var myNum;
          myNum = prompt("Write a number?");
          if (myNum < a) {
            document.write("You wrote the number " + myNum + ". This number is less than " + a +".")
          }
       </script>
   </body>
</html>

Exercise

  1. Open your editor, create a new file and save it as exersice06.2.0if.html in the folder "yourNameWEB2JS".
  2. Copy the above code and paste it in the new file.
  3. Save the file and preview it in your editor or your browser.
  4. Check your code by inserting the numbers 4,5,6 in the prompt window. What do you see?

Solution:

The code works only in the case where 6>5. We will improve it on the next page.

The else statement

Else is another conditional which is used after an if statement. 

What it actually says is " If something is true, go and do this, else do something else".

if (expression){
    //this code runs if expression evaluates to true
}else{
    //this code runs if expression evaluates to false
}
Example

The if else is generally used when we want to do only one test. For example, here we test only whether our entry is smaller than 5.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The if else statement </title>
  </head>
  <body>
    <h3> The if else statement</h3>
    <script>
        var a = 5;
        var myNum;
        myNum = prompt("Write a number?");
        if (myNum < a) {
            document.write("You wrote the number " + myNum + ". This number is less than " + a +".")
        } else {
            document.write("You wrote the number " + myNum + ". This number is greater than " + a +".")
        }
    </script>
  </body>
</html>

Exercise

  1. Open your editor, create a new file and save it as exersice06.2.03ifelse.html in the folder "yourNameWEB2JS".
  2. Copy the above code and paste it into the new file.
  3. Save the file and preview it in your editor or your browser.
  4. Check your code by inserting the numbers 4,5,6 in the prompt window. What do you see?

Solution:

The only the case where the code doesn't work is if you have entered the number 5. We will improve it on the next page.

The else if statement

The else if statement is another condition. This is used when we want to do more than one tests. 

As you may expect, the else if statement is always after an if statement.

You can use as many else if statements as you need.

if (expression){
   //this code runs if expression evaluates to true
}else if (expression2){
   //this code runs if expression2 evaluates to true
}else{
   //this code runs if neither are true
}
Example

In this example, we say: "If our number is smaller than 5 do something, else if it is equal to 5 do something else. Else, if neither of the above is true, go and do something else.

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>The if else if statement </title>
   </head>
   <body>
     <h3> The if else if statement</h3>
     <script>
         var a = 5;
         var myNum;
         myNum = prompt("Write a number?");
         if (myNum < a) {
            document.write("You wrote the number " + myNum + ". This number is less than " + a +".")
         } else if (myNum == a) {
             document.write("You wrote the number " + myNum + ". This number is equal to " + a +".")
         } else {
             document.write("You wrote the number " + myNum + ". This number is greater than " + a +".")
         }
     </script>
   </body>
</html>

Exercise

  1. Open your editor, create a new file and save it as exersice06.2.04ifelseif.html in the folder "yourNameWEB2JS".
  2. Copy the above code and paste it into the new file.
  3. Save the file and preview it in your editor or your browser.
  4. Check your code by inserting the numbers 4,5,6 in the prompt window. What do you see?

Solution:

Here, all the cases work correctly! Experiment by changing the variable a

Logical operators

Logical operators are typically used together with logic (true/false) values.

These operators are very helpful when we want to do something based on the value of more than one variables.

In the below example, we have the variables x and y which are 6 and 3 respectively. The first console.log is : 

console.log( (x < 5 && y > 2) );

The && operator used says that this will be true only if both 6<3 and 3>2. Else, if none or only one of them is true, it returns false.

If instead of && we have used ||, then the console.log will return true if one of these expressions is true even if the other expression is false.

Lastly, the ! operator returns true if our expression is false. In case of 6<3, if we use the ! we will have : !6<3. This actually says: If 6 is NOT smaller than 3 then return true.

Operator   Description
&&           logical and : returns true if both operands are true
||           logical or  : returns true if either operand is true
!            logical not : returns false if its single operand can be converted to true; otherwise, returns true.
Example
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Logical operators </title>
   </head>
   <body>
     <h3> Logical operators </h3>
     <script>
         var x = 6;
         var y = 3;
         console.log( (x < 5 && y > 2) );
         console.log( (x < 5 || y > 2) );
         console.log( !(x < 5 || y > 2) );
     </script>
   </body>
</html>

Exercise

  1. Open your editor, create a new file and save it as exersice06.2.05logical.html in the folder "yourNameWEB2JS".
  2. Copy the above code and paste it into the new file.
  3. Save the file and preview it in your console.
  4. Experiment by adding new statements.