JavaScript Language Essentials | Page 2 | WebReference

JavaScript Language Essentials | Page 2


[previous] [next]

JavaScript Language Essentials

Script 3.2 is the CSS file that we're using to style the contents of the Bingo card. If you don't know CSS, don't worry about it; we'll explain it in more detail in Chapter 11, and it doesn't matter much here anyway. The HTML and CSS pages won't change for the rest of the Bingo card examples, so we're only going to print them once here.

Script 3.2. This CSS file adds style to the Bingo card.

This example shows you how to set up and use a loop to populate the contents of the Bingo card with randomly generated numbers. Script 3.3 contains the JavaScript you need to make it happen. The card that is generated from this script is not a valid Bingo card, because there are constraints on which numbers can be in particular columns. Later examples add to the script until the resulting Bingo card is valid.

Script 3.3. Welcome to your first JavaScript loop.

What's in a Bingo Card?

Sure, you've seen them, but maybe you haven't looked carefully at a Bingo card lately. Bingo cards in the United States are 5 x 5 squares, with the columns labeled B-I-N-G-O and with spots containing numbers between 1 and 75. The center square typically is a free spot and often has the word "free" printed on it. Each column has a range of allowable numbers:

  • Column B contains numbers 1–15
  • Column I contains numbers 16–30
  • Column N contains numbers 31–45
  • Column G contains numbers 46–60
  • Column O contains numbers 61–75

To use a loop to create the table's contents:

  1. window.onload = newCard;
    This is in Script 3.3. This line calls the newCard() function when the window finishes loading. It's common to use an event handler to call a function.

  2. function newCard() {
    This line begins the function.

  3. for (var i=0; i<24; i++) {
    This line begins the loop. Programmers traditionally use the variable i to denote a variable used as a counter inside a loop. First i is set to 0. A semicolon signals the end of that statement and allows us to put another statement on the same line. The next part is read as "if i is less than 24, do the following code inside the braces." The final bit (after the second semicolon) adds 1 to the value of i. Because this is new, let's break that down a bit. The i++ part uses the ++ operator you saw in Chapter 1 to increment the value of i by 1. The loop will repeat 24 times, and the code inside the loop will execute 24 times. On the first go-through, i will be 0, and on the last go-through i will be 23.

  4. var newNum = Math.floor (Math.random() * 75) + 1;
    Inside the loop, we create a new variable, newNum, and fill it with the result of the calculation on the right side of the parentheses. The built-in JavaScript command Math.random() gives us a number between 0 and 1, such as 0.123456789. Multiplying Math.random() by the maximum value (remember, values in Bingo cards can be from 1 to 75) gives us a result between 0 and one less than the max value. The floor of that result gives us the integer portion, i.e., an integer between 0 and (max value -1). Add one, and we have a number between 1 and our maximum value.

  5. document.getElementById ("square" + i).innerHTML = newNum;
    This is where we write into the table the value of the random number we just got. We get the element with the id named square with the current value of i concatenated onto it. For example, the first time through the loop, the value of i will be zero, so the line gets the element with the id of square0. Then the line sets the innerHTML property of the square0 object to the current value of newNum. Then, because we're still inside the loop, steps 4 and 5 happen again, until the whole Bingo card is filled out.

JavaScript Strings

When does a word like "cat" have a "t" in the second position? When it's a JavaScript string.

In JavaScript, the first character is at position 0. So, using the example of "cat", "c" would be at position 0, "a" would be at position 1, and "t" would be at position 2.

Only when checking the length of cat do we actually see a value of 3. All other string methods are zero-based; that is, they start with 0.

Looping the Loop

A for loop has three parts, as shown in Figure 3.2:

Figure 3.2
Figure 3.2 The three parts of a loop.

  1. The initialization step. The first time through the loop, this is what the loop variable (i, in this case) is set to.
  2. The limiting step. This is where we say when to stop looping. While normal people count from one to ten, it's common in programming languages to count from zero to nine. In both cases, the code inside the loop is run ten times, but the latter method works better with languages (like JavaScript) where arrays start with a zeroth position. That's why you'll see loops have a limitation of "less than userNum" instead of "less than or equal to userNum." Let's say that the variable userNum is 10, and you want the loop to run ten times. If you count from 0 to 9 (using the "less than" test), the loop runs ten times. If you count from 0 to 10 (using the "less than or equals to" test), the loop runs 11 times.
  3. The increment step. This is where we say by how much to increase the loop counter on each pass through the loop. In this case, we add one each time through, using ++ to add one to i's value.

[previous] [next]

URL: