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 while and for statements

The while and for statements let you code loops that repeat a block of statements one or more times. This is illustrated by the statements in figure 2-16.

To code a while statement, you code the keyword while followed by a conditional expression in parentheses and a block of code in braces. When the while statement is executed, the conditional expression is evaluated. If the expression is true, the block of code is executed and the while loop is tried again. As soon as the expression evaluates to false, the block of code is skipped and the while statement is done. If the expression evaluates to false the first time it is checked, the block of code won't be executed at all.

The first example in this figure shows a loop that adds the numbers 1 through 5. The variable named sumOfNumbers is used to store the sum, and it's initialized to 0. The variable named numberOfLoops is used to store the highest number to sum, and it's initialized to 5. The variable named counter stores the numbers to be added to sumOfNumbers, and it's initialized to 1.

The code in the while statement adds the value in the counter variable to the sumOfNumbers variable and uses the increment operator (++) to increment the value in the counter variable by 1. The loop ends when the value of counter is greater than the value of numberOfLoops. As a result, sumOfNumbers equals the sum of 1, 2, 3, 4, and 5 when it is displayed by the alert method.

To code a for statement, you code the keyword for followed by three statements in parentheses and a block of code in braces. The three statements are separated by semicolons. The first statement in parentheses initializes the counter. The second statement is a conditional expression that causes the block of code to be executed as long as it's true. The third statement modifies the counter. It's executed after the block of code in the for loop is executed.

The second example shows how to get the same result as the first example by using a for statement. Here, the variable counter is initialized to 1; the block of code is executed as long as counter is less than numberOfLoops; and the counter is incremented by 1 after the block of code is executed. For a loop like this, you can see that a for statement is easier to use than a while statement.

The third example uses another while statement. First, this code uses the prompt method to get a value from the user and store it in userEntry. Then, the while statement executes as long as the entry is not a number. Within the while statement, the user is notified of the error and prompted for a number again.

The fourth example uses another for statement. It calculates the future value of monthly investments at a fixed interest rate. The first three variables store the monthly investment, the monthly interest rate, and the number of months that the investments will be made. The futureValue variable will store how much you will have at the end of the number of months, and it's initialized to 0.

Within the for statement, the variable i is used to count the months, so it is incremented by 1 each time through the loop. Within the loop, the monthly investment is added to futureValue, that value is multiplied by 1 plus the monthly interest rate, and the result is stored back in futureValue. When the loop finishes, futureValue will hold the future value of the monthly investments.

A while loop that adds the numbers from 1 through 5

var sumOfNumbers = 0;
var numberOfLoops = 5;
var counter = 1;
while (counter <= numberOfLoops) {
sumOfNumbers += counter; // adds counter to sumOfNumbers
counter++; // adds 1 to counter
}
alert(sumOfNumbers); // displays 15

A for loop that adds the numbers from 1 through 5

var sumOfNumbers = 0;
var numberOfLoops = 5;
for (var counter = 1; counter <= numberOfLoops; counter++) {
sumOfNumbers += counter;
}
alert(sumOfNumbers); // displays 15

A while loop that gets a user entry

userEntry = prompt("Please enter a number:", 100);
while ( isNaN( userEntry ) ) {
alert( "You did not enter a number.");
userEntry = prompt("Please enter a number:", 100);
}

A for loop that calculates the future value of a monthly investment

var monthlyInvestment = 100; // monthly investment is $100
var monthlyRate = .01; // yearly interest rate is 12%
var months = 120; // 120 months is 10 years
var futureValue = 0; // futureValue starts at 0
for ( i = 1; i <= months; i++ ) {
futureValue = ( futureValue + monthlyInvestment ) *
(1 + monthlyRate);
}

Description

• The while statement is used to create a while loop that contains a block of code that is executed as long as a condition is true. This condition is tested at the beginning of the loop. When the condition becomes false, JavaScript skips to the code after the while loop.
• The for statement is used to create a for loop that contains a block of code that is executed a specific number of times.
• When you code one loop within another loop, you are coding nested loops.
• JavaScript also offers two other looping structures, which you'll learn about in chapter 8.

Figure 2-16 How to code while and for statements