Making Decisions with the If Statement

In JavaScript, you can use the if statement to test whether a certain condition is true and execute code based on the answer. For example, you might want to test whether you have over $1,000 in your bank account, and if so, take appropriate action (time for a party!).

The if statement also includes an optional else clause that holds code to be executed if the test condition was false. Here’s what the syntax of this statement looks like, formally speaking (note that the code to execute is between curly braces, { and }, and that the part in standard braces, [ and ], is optional):

 if (condition) {     statements1 } [else {     statements2 }]

How about an example? Do you have more than $1,000 in your bank account? If so, this next example, if.html, will display the message “Time for a party!”:

 <html>   <head>     <title>Using the if statement</title>     <script language="javascript">       function showMessage()       {         var account = 2000;         if(account > 1000) {             document.getElementById('targetDiv').innerHTML =                 "Time for a party!";         }       }     </script>   </head>   <body onload="showMessage()">     <h1>Using the if statement</h1>     <div >     </div>     </body> </html>

How does it work? To check the amount in the account variable, this example uses the > greater than operator (see Table 2.1). The expression account > 1000 is true if account holds more than 1000, which it does. That means that the code inside the if statement’s body (the part between { and }) executes:

 var account = 2000; if(account > 1000) {   document.getElementById('targetDiv').innerHTML =     "Time for a party!"; }

The results are shown in Figure 2.14. As you can see, it’s time for a party.

image from book
Figure 2.14: Using the if statement

What if the amount in the account is $1,000 or less? You can execute code in that case using an else statement. That is, if the condition of the if statement is false, the code in the else statement, if there is one, executes instead. In that case, there’s not going to be a party, and everyone should get back to work. Here’s how it looks in code, in else.html-note that the account now holds $900, so the else statement will be triggered:

 <html>   <head>     <title>Using the else statement</title>     <script language="javascript">       function showMessage()       {         var account = 900;         if(account > 1000) {             document.getElementById('targetDiv').innerHTML =                 "Time for a party!";         }         else {           document.getElementById('targetDiv').innerHTML =               "Get back to work!";         }       }     </script>   </head>   <body onload="showMessage()">     <h1>Using the else statement</h1>     <div >     </div>     </body> </html>

You can see the results in Figure 2.15. Unfortunately, it’s time to get back to work.

image from book
Figure 2.15: Using the else statement