The If and If/Else Conditional Statements - Continued

Notice the addition not only of the else keyword and an additional statement, but also the use of the opening and closing curly braces - { } . The braces are used to encapsulate the true statement and the false statement, as well as divide the entire statement into its "if" and "else" sections. Notice also that the basic JavaScript syntax rules haven't been broken - a semi-colon is present after both the true statement and the false statement.

This is probably the most common of all of the many JavaScript statements. You'll use it often, so get a feel for it now. We'll examine a couple of working examples to help you get a feel for working with the if and if / else statement.

if (80<100)
   document.write("The expression has evaluated to true!!");

You can see the basic if statement used very simply here. Notice the "less-than" operator used within the conditional expression - "80<100". This if statement simply states that if 80 is less than 100, the statement is considered to be true. Since 80 is actually less than 100, the document.write statement is written to the screen. If the conditional expression were "101<100" (which is read as "if 101 is less than 100"), then nothing would be written to the screen as the conditional expression would have evaluated to false. Use the if statement if you want something to happen only if the conditional expression evaluates to true.

If you'd like an action to be taken when the conditional expression evaluates to false as well as true, use the else addition to provide an action to be taken when the conditional expression returns a false value, as shown below.

if (101<100) {
   document.write("The expression has evaluated to true!!");
   } else {
   document.write("The expression has evaluated to false!!");
} 

The above if / else statement says that if 101 is less than 100, write the first document.write statement to the screen. If 101 isn't less than 100 the second document.write statement is written to the screen. Since 101 is not less than 100, the conditional expression returns false, and the second document.write statement ("The expression has evaluated to false!!") is written to the screen.

So now that you know the basic structure of the if and if / else statements, we'll delve into another aspect - nesting your if / else statements. This nesting structure is used when you have an initial condition to be met with a true or false value, then you require another set of conditions that you'd like to have tested to acquire your end result. Examine the below syntax example to understand more clearly what is meant by the term "nesting".

if (expression1) {
   statement If expression1 is True;
   } else {
   if (expression2) {
      statement If expression2 is True;
      } else {
      statement If expression2 is False;
   }
}

You can see that the second if / else statement is nested within the "false" area of the first if / else statement. If expression1 evaluates to true, then the first document.write statement of the first if / else statement is written to the screen. If expression1 evaluates to false, then the second if / else statement is evaluated. If expression2 evaluates to true, the first document.write statement of the second if / else statement is written to the screen. If expression2 evaluates to false, then the second document.write statement of the second if / else statement is written to the screen. This somewhat complicated (but very useful) method will be used widely within your future JavaScript coding.

To illustrate further, I'll use the nesting of if / else statements in a couple of working examples, shown below.

if (99<100) {
   document.write("Expression1 has evaluated to true!!");
   } else {
   if (80<100) {
      document.write("Expression2 has evaluated to true!!");
      } else {
      document.write("Expression2 has evaluated to false!!");
   }
} 

The example shows the nesting of an if / else statement within another. The first if / else statement shows the less than operator being used to evaluate the weights of two numbers, 99 and 100. Since 99 is indeed less than 100, the conditional expression returns a value of true, and the first document.write statement ("Expression1 has evaluated to true!!") is written to the screen. The false section of the first if / else statement is never consulted, since the conditional expression of the first if / else statement evaluated to true. Examine the below example, which utilizes the decision making ability of the second, nested, if / else statement.

if (101<100) {
   document.write("Expression1 has evaluated to true!!");
   } else {
   if (80<100) {
      document.write("Expression2 has evaluated to true!!");
      } else {
      document.write("Expression2 has evaluated to false!!");
   }
}

Since 101 is less than 100, and the conditional expression of the first if / else statement returns false, the second if / else statement is executed. Since 80 is less than 100, the conditional expression returns a value of true and the first document.write statement of the second if / else statement is executed, writing "Expression2 has evaluated to true!!" to the screen. Simple.

The else / if Conditional Statement

if (101<100)
   document.write("Expression1 has evaluated to true!!");
   else if (80<100)
      document.write("Expression2 has evaluated to true!!");
   else
      document.write("Expression2 has evaluated to false!!");

You can see that the curly braces required for the if / else statement aren't in attendance. They simply aren't necessary. The above script works the same as does an if / else statement nested within another if / else statement. So much for the else / if conditional statement.

Conditional Statements - Page 1
The JavaScript Chronicles
The Switch / Case Conditional Statement - Page 3

The JavaScript Chronicles