The Essential Guide to HTML5

QUIZ

trick to remember that the indexing starts from zero is to imagine the array all lined up. The first element

will be at the start; the second 1 unit away; the third 2 units away, and so on.

The length of the array is kept in an attribute of the array named length. To access the first component of

the facts array, you use fact[0]; for the second element, fact[1], and so on. You will see this in the

coding.

A common way to do something with each element in an array is to use a for loop. (See also the

explanation for setting up the gradient in the walls of the bounding box in Chapter 3.) Suppose you have an

array named prices and your task is to write code to increase each of the prices by 15%. Further, each

price has to increase by a minimum of 1, even if 1 is more than the 15%. You could use the construct in

Table 6-1 to perform this task. As you can see in the Explanation column, the for loop does the same

thing for each component of the array, using the indexing variable i in this example. This example also

shows the use of the Math.max method.

Table 6-1. Increasing Prices in an Array Using a For Loop

Code Explanation

for(var i=0;i<prices.length;i++) { Do the statements inside the brackets, changing the value of
i, starting at 0 and increasing by 1 (that
s what i++ does)
until the value is not less than prices.length, the number
of elements in the array.

prices[i] += Math.max

(prices[i]*.15,1);

Remember to interpret this from the inside out. Compute .15

times the ith element of the array prices. See what
s

greater, this value or 1. If it is this value, that
s what

Math.max returns. If it is 1 (if 1 is more than

prices[i]*.15), use 1. Add this value to the current value

of prices[i]. That
s what += does.

} Close the for loop

Notice that the code does not state the size of the prices array explicitly. Instead it is represented in the

expression prices.length. This is good because it means that the value of length changes

automatically if and when you add elements to the array. Of course, in our example we know the number to

be 20, but in other situations it
s better to keep things flexible. This application can be a model for a quiz

involving any number of facts when a fact is two pieces of information.

Our facts array is an array of arrays, which means you
ll see the following in the code:

facts[i][0] the country name

facts[i][1] the capital city name

facts[i][2] the true/false value indicating this country/capital has been used

These expressions are interpreted as the 0th element of the ith element of the facts array and so on. I do

refer to the inner arrays as rows, but keep in mind that there are not really any columns. Some

programming languages support multi-dimensional arrays as a primitive data type, but JavaScript only