How to Nest Your JavaScript If Statements for HTML5 and CSS3 Programming

There are a few variations of the if structure you'll sometimes run across in JavaScript when programming your HTML5 pages. One variation is the nested if statement. This simply means you can put if statements inside each other for more complex options. For example, look at the following code:

 function checkTemp(){
  //from nestedIf.html
  var temp = prompt("What temperature is it outside?");
  temp = parseInt(temp);
  if (temp < 60){
  //less than 60
  if (temp < 32){
   //less than 32
   alert("It's freezing!");
  } else {
   //between 32 and 60
   alert("It's cold.");
  } // end 'freezing if'
  } else {
  //We're over 60
  if (temp < 75){
   //between 60 and 75
   alert("It's cool.");
  } else {
   //temp is higher than 75
   if (temp > 90){
   //over 90
   alert("It's really hot.");
   } else {
   //between 75 and 90
   alert("It's warm.");
   } // end 'over 90' if
  } // end 'over 75' if
  } // end 'over 60' if
 } // end function

This code looks complicated, but it really isn't. It simply takes in a temperature and looks for a range of values. Here's what's happening:

1. Get a temperature value from the user.

   Ask the user for a temperature. A simple prompt statement is used here, but you could also grab the value from a form field.

2. Convert the temperature to a numeric type.

   Recall that computers are fussy about data types, and sometimes you need to nudge a variable to the right type. The parseInt() function forces any value into an integer, which is perfect for our needs.

3. Use an if statement to chop the possibilities in half.

   The outer (most encompassing) if statement separates all the cooler temperatures from the warmer ones.

4. Use an inner if statement to clarify more if needed.

   Within the cool (less than 60 degree) temperatures, you might want to know if it's cold or below freezing, so place a second condition to determine the temperatures.

5. The upper bound is determined by the outer if statement.

   The first else clause in the code is triggered when the temperature is between 32 and 60 degrees because it's inside two if statements: temp is true, and temp is false, so the temperature is between 32 and 60 degrees.

6. Indentation and comments are not optional.

   As the code becomes more complex, indentation and comment characters become more critical. Make sure your indentation accurately reflects the beginning and end of each if statement, and the code is clearly commented so you know what will happen (or what you expect will happen — the truth may be different).

7. You can nest as deeply as you wish.

   As you can see in this structure, there are three different possibilities for temperatures higher than 60 degrees. Simply add more if statements to get the behavior you wish.

8. Test your code.

   When you build this kind of structure, you need to run your program several times to ensure it does what you expect.