Print bookPrint book

Submodule 7.3: Applying the "if" statements

Site: ΕΛ/ΛΑΚ Moodle
Course: Web Design and Digital Content Production
Book: Submodule 7.3: Applying the "if" statements
Printed by: Guest user
Date: Sunday, 5 May 2024, 7:00 PM

Description

  • Confirm interaction
  • Nested conditionals
  • Temperature converter

Table of contents

The confirm interaction

confirm is a JavaScript method which displays a message box along with an OK and Cancel button. 

Confirm interaction

When the user clicks Ok JavaScript returns true whereas if it clicks Cancel it returns false.

Thus, this ready-made method gives us the capability to activate to different actions based on user's choice.  

In the below code the logic is: We have a variable which contains our confirm method. According to user's input, if this variable becomes true, do something, else do something else.

Notice that here we use the syntax if (likeBananas). This is equivalent with if (likeBananas==true)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The confirm interaction </title>
  </head>
  <body>
    <h3> The confirm interaction</h3>
    <script>
          var likeBananas;
          /*We're using confirm() to prompt the user for a boolean value*/
          likeBananas = confirm("Do you like bananas? ([OK] for yes, [Cancel] for no)");
          /*On next line we check the value and ... */
          if (likeBananas) {
                  /*on next line write some output if the value was true*/
                  document.write("You like Bananas!")
          } else {
                  /*on next line write some output if the value was false*/
                  document.write("You don't like babanas!")
          }
          /*The code outside the curly braces of the if else statement will always run.*/
          console.log ("Whether or not you had bananas, have a good day!");
    </script>
  </body>
</html>

Exercise

  1. Open your editor, create a new file and save it as exersice07.3.01.html in the folder "Exercises".
  2. Copy the above code and paste it in the new file.
  3. Save the file. Experiment by changing the values of the variables.

Nested conditionals

Nested conditionals are actually conditionals inside a conditional.

if (expression1){
    /*this code runs if expression1 evaluates to true*/
    if (expression2){
        /*this code only runs if both expression1 and expression2 evaluate to true*/
    }
} else {
    /*this code runs if neither are true*/
}
Example

In the below example, we have used nested conditionals to define whether we need to ask more input from the user.

The logic of the below code is: if the user likes bananas then display a message, else ask him his favorite fruit. If the user doesn't like bananas and prefers apples then display a message, else if he doesn't like bananas and prefer other fruit than apples, display another message. 

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Nested contitionals </title>
  </head>
   <body>
     <h3> Nested contitionals</h3>
     <script>
         var likeBananas;
         var favoritFruit;
         likeBananas = confirm("Do you like bananas? ([OK] for yes, [Cancel] for no)");
         if (likeBananas) {
                 document.write("You like Bananas!")
         } else {
                 favoritFruit = prompt("What is your favorite fruit")
 
                 if (favoritFruit == "apples") {
                         document.write("You like apples! Me too!")
                 }else {
                         document.write("You like " + favoritFruit + "! I prefer apples!")
                 }
 
         }
         console.log ("All fruits are good!");
     </script>
   </body>
</html>

Exercise

  1. Open your editor, create a new file and save it as exersice07.3.02.html in the folder "Exercises".
  2. Copy the above code and paste it in the new file.
  3. Save the file. Experiment by changing the values of the variables.

The Temperature converter problem

Exercise

  1. Open your editor, create a new file and save it as exersice07.3.03.html in the folder "Exercises".
  2. Copy the above code and paste it in the new file.
  3. Modify and save the file. The browser's output should be as shown in the following image:

Temperature converter

Code:

Solution:

var convertFtoC = document.getElementById("degF");
convertFtoC.onchange = function(){ /*onchange means that every time the value in the input box changes, 
    this function will run*/
    var degreesF = document.getElementById("degF").value; /* this is the value from the form field*/
    if (isNaN(degreesF)) { /* Here we check if the input is a number*/
        document.getElementById("degCOut").innerHTML = "I can't convert to" 
    } else {
        var degreesC = (degreesF-32)*(5/9); /* you will set this to the results of your conversion*/
        document.getElementById("degCOut").innerHTML = degreesC;
    }
}