Working with Arrays

In this example, we’re introducing another useful JavaScript object, the array. An array is a kind of variable that can store a group of information. Like variables, arrays can contain any sort of data: text strings, numbers, other JavaScript objects, whatever. You declare an array with the elements of the array inside parentheses, separated by commas, like so:

var newCars = new Array("Toyota", "Honda", "Nissan");

After this, the newCars array contains the three text strings with the car makes. To access the contents of the array, you use the variable name with the index number of the array member you want to use, in square brackets. So newCars[2] has the value "Nissan", because array numbering, like most other numbering in JavaScript, begins at zero.

In this example, shown in Script 3.6, we begin making sure the Bingo card is valid. On a real Bingo card, each column has a different range of numbers: B is 1–15, I is 16–30, N is 31–45, G is 46–60, and O is 61–75. If you look back at Figure 3.1, you’ll see that it is not a valid card, because it was generated with a version of the script that simply put a random number between 1 and 75 in each square. This example fixes that, with only three lines of changed or new code. When we’re done, the card will look something like Figure 3.4. It’s still not a valid Bingo card (note how there are duplicate numbers in some of the columns), but we’re getting there.

Script 3.6. This script limits the range of values that can go into each column.

window.onload = initAll;

function initAll() {
    if (document.getElementById) {
       for (var i=0; i<24; i++) {
          setSquare(i);
       }
    }
    else {
       alert("Sorry, your browser doesn't support this script");
    }
}


function setSquare(thisSquare) {
     var currSquare = "square" + thisSquare;
     var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
					var colBasis = colPlace[thisSquare] * 15;
					var newNum = colBasis + Math.floor(Math.random() * 15) + 1;


     document.getElementById(currSquare).
innerHTML = newNum;
}

To use an array:

var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);

var colBasis = colPlace[thisSquare] * 15;
var newNum = colBasis + Math.floor(Math.random() * 15) + 1;