What is a conditional statement?

• A conditional statement uses a condition to provide alternatives of execution in a program.
• Conditions are expressions that evaluate to a boolean value (true or false).
• The syntax of a conditional statement is:

  
  if (/* condition (expression that evaluates to a boolean) */) {
      /* consequent statement block:
         code that should be executed if
         the condition is true */
  } else {
      /* alternative statement block:
         code that should be executed if
         the condition is false */
  }
  				    

  For example:

  let x = 2;
  if (x > 0) {
      alert("x is positive");
  } else {
      alert("x is not positive");
  }

• During the execution of a conditional statement, exactly one of the blocks (consequent or alternative) is always executed.
• The alternative can be left out, in which case the alternative block is 'do nothing'. For example:

  let x = 2;
  if (x > 0) {
      alert("x is positive");
  }
  
  // no else or alternative block:
  // if x is 0 or less do nothing				

• Conditional statements can be nested if further conditions need to be checked within the consequent or the alternative block. For example:

  let x = 2;
  let y = -7;
  if (x > 0) {
      if (y > 0) {
          alert("Both x and y are positive");
      } else {
          alert("x is positive but y is not");
      }
  } else {
      if (y > 0) {
         alert("x is not positive but y is");
      } else {
          alert("Neither x nor y are positive");
      }
  }				

• If there are more than two alternative paths to take from one point, conditionals can be chained. For example

  let x = 2;
  if (x == 0) {
      alert("x is zero");
  } else if (x > 0) {
      alert("x is positive");
  } else {
      alert("x is negative");
  }

Conditional Statement Exercise

Let's try to integrate a conditional statement with what we know about working with a webpage. We are going to create a webpage that assesses names with regard to their length.

• Create a skeleton HTML page.
• Create a Javascript file and include it from a script element on the HTML page.
• In the HTML page add the following elements:
  • a text input element and label 'Enter name' to go with it
  • a button with text 'Measure name'
  • an empty paragraph element with id 'result'
• In the Javascript file write a function that:
  • takes a single argument (a string)
  • examines the length of the string argument
  • returns a string, which depends on the input argument:
    • "The name is long.", if the input argument is longer than 10 characters
    • "The name is medium length.", if the input argument is greater than 5 and up to 10 characters long
    • "The name is short.", if the input argument is 5 characters or shorter
• In the Javascript file write another function that:
  • reads the value of the input element in the HTML page
  • calls the first function to get the 'assessment' of the name
  • writes the 'assessment' into the element with id 'result'
• Set the last function defined as handler for clicks on the button.
• Test the solution. The completed exercise can be found here.