Chapter 2: How to code a JavaScript application

This chapter presents a subset of JavaScript and DOM scripting that will soon have you writing significant applications. If you don't have any programming experience, this chapter also makes a great aptitude test. If you read it and can do the exercises at the end of the chapter, you're ready for the rest of this book.

How to code if statements

An if statement lets you control the execution of statements based on the results of conditional expressions. In the examples in figure 2-15, you can see that an if statement can include three types of clauses. This statement must begin with an if clause. Then, it can have one or more else if clauses, but it doesn't have to have any. Last, it can have an else clause, but that clause is also optional.

To code the if clause, you code the keyword if followed by a conditional expression in parentheses and a block of one or more statements inside braces. If the conditional expression is true, this block of code will be executed and any remaining clauses in the if statement will be skipped over. If the conditional expression is false, the if statement will continue with any clauses that follow.

To code an else if clause, you code the keywords else if followed by a conditional expression in parentheses and a block of one or more statements inside braces. If the conditional expression is true, its block of code will be executed and any remaining clauses in the if statement will be skipped over. This will continue until one of the else if expressions is true or they all are false.

To code an else clause, you code the keyword else followed by a block of one or more statements inside braces. This code will only be executed if all the conditional expressions in the if and else if clauses are false. If those expressions are false and there isn't an else clause, the if statement won't execute any code.

The first example in this figure shows an if statement with an else clause. If the value of the age variable is greater than or equal to 18, the first message will be displayed. Otherwise, the second message will be displayed.

The second example shows an if statement with an else if and an else clause. If the rate is not a number, the first message is displayed. If the rate is less than zero, the second message is displayed. Otherwise, the third message is displayed.

The third example shows an if statement with a compound conditional expression that tests whether the value of the userEntry variable is not a number or whether the value is less than or equal to zero. If either expression is true, a message is displayed. If both expressions are false, nothing will be displayed because this statement doesn't have else if clauses or an else clause.

The fourth example shows how you can test a Boolean variable to see whether it is true. Here, the conditional expression is just the name of the variable. This is a commonly-used shorthand that is equivalent to:

if ( invalidFlag == true )

The last example shows how to nest one if statement within another. Here, the second if statement is nested within the else clause of the first if statement. When these nested if statements are executed, an error message is displayed if totalMonths is not a number or totalMonths is a number less than or equal to zero. This ends the if statement and nothing else happens.

But if totalMonths is a number greater than zero, the else clause starts by calculating the values of the variables named years and months. Then, the if statement that's nested in the else clause composes the message that's displayed based on the values of the years and months variables.

An if statement with an else clause

if ( age >= 18 ) {
alert ("You may vote.");
} else {
alert ("You are not old enough to vote.");
}

An if statement with else if and else clauses

if ( isNaN(rate) ) {
alert ("You did not provide a number for the rate.");
} else if ( rate < 0 ) {
alert ("The rate may not be less than zero.");
} else {
alert ("The rate is: " + rate + ".");
}

An if statement with a compound conditional expression

if ( isNaN(userEntry) || userEntry <= 0 ) {
alert ("Please enter a valid number greater than zero.");
}

An if statement that tests whether a Boolean value is true

if ( invalidFlag ) {
alert ("All entries must be numeric values greater than 0.");
}

A nested if statement

if ( isNaN(totalMonths) || totalMonths <= 0 ) {
alert ("Please enter a number of months greater than zero.");
} else {
var years = parseInt ( totalMonths / 12 );
var months = totalMonths % 12;
if ( years == 0 ) {
alert ( "The investment time is " + months + " months.");
} else if ( months == 0 ) {
alert ( "The investment time is " + years + " years.");
} else {
var message = "The investment time is " + years + " years ";
message += "and " + months + " months.";
alert(message);
}
}

Description

• An if statement can include multiple else if clauses and one else clause at the end. The if clause of the statement executes one or more statements if its condition is true.
• The else if clause is executed when the previous condition or conditions are false. The statement or statements within an else if clause are executed if its condition is true.
• The else clause is executed when all previous conditions are false.
• You can code one if statement within the block of statements of an if, else if, or else clause in another if statement. This is referred to as nested if statements.

Figure 2-15 How to code if statements