JavaScript Language Essentials | Page 5 | WebReference

JavaScript Language Essentials | Page 5


[previous] [next]

JavaScript Language Essentials

Using Do/While Loops

Sometimes you'll need to have a loop in your code that loops around a number of times, but there's no way of knowing how many times you'll want to loop. That's when you'll want to use a do/while loop: you want to do something, while some value is true. Script 3.9 writes out each row of numbers as always, but this time it checks first to see if a number has been used already before putting it in a cell. If it has, the script generates a new random number and repeats the process until it finds one that's unique. Figure 3.6 shows the working, finally valid Bingo card.

Script 3.9. This script prevents numbers in a given column from being used more than once.

Figure 3.6
Figure 3.6 Finally, we've ended up with a valid Bingo card!

To use a do/while loop:

  1. var newNum;
    In the previous task, we initialized the newNum variable when we created it. Because we're going to be setting it multiple times, we're instead going to create it just the once, before we get into the loop.

  2. do {
    This line starts the do block of code. One of the things you have to remember about this type of loop is that the code inside the do block will always be executed at least once.

  3. newNum = colBasis + getNewNum() + 1;
    This line inside the loop sets the newNum variable to our desired number, as with previous examples.

  4. }
    The closing brace signals the end of the do block.

  5. while (usedNums[newNum]);
    The while check causes the do block of code to repeat until the check evaluates to false. In this case, we're checking newNum against the usedNums[] array, to see if newNum has already been used. If it has, control is passed back to the top of the do block and the whole process starts again. Eventually, we'll find a number that hasn't been used. When we do, we drop out of the loop, set the usedNums[] item to true, and write it out to the card, as in the last task.

Tip

  • A common use for a do/while loop would be to strip blanks or invalid characters off data entered by a user. But again, remember that the do block of code always gets executed, whether the while check evaluates to true or false.

Calling Scripts Multiple Ways

Up to this point in the book, you've seen scripts that usually run automatically when the page loads. But in the real world, you'll often want to give the user more control over your scripts, even allowing them to run a script whenever they want. In this example (Script 3.10), the script still runs when the page loads. But we also allow the user to click the link at the bottom of the page to rerun the script that generates the Bingo card entirely in their browser, without needing to reload the page from the server. This gives the user fast response with zero server load. This is the last of the Bingo card examples, wrapping up all the techniques we've used in this chapter to this point.

Script 3.10. Give your user the ability to run scripts themselves.

To call a script multiple ways:

  1. window.onload = initAll;
    In previous examples, we called newCard() when onload ran. Now, we're calling a new function, initAll(), which will handle all the required initialization steps.

  2. function initAll() {
       if (document.getElementById) {
          document.getElementById ("reload").onclick = anotherCard;
          newCard();
       } else {
          alert("Sorry, your browser doesn't support this script");
       }
    }
    The initAll() function just gathers together several of the initialization steps we've previously seen, plus one new thing. If the browser is capable, all it does that's new (besides the object detection and the call to newCard()) is set the link on the HTML page (the one with the id of reload; refer back to Script 3.1) to call anotherCard() when it's clicked. The object detection was moved from newCard() to here as it's really part of the initialization routine, and that's what's handled by this function.

  3. function anotherCard() {
       for (var i=1; i<usedNums.length; i++) {
          usedNums[i] = false;
       }

       newCard();
       return false;
    }
    Here's the anotherCard() function that's called when someone clicks the link. It does three things:
    • Sets all the items in the usedNums[] array to false (so that we can reuse all the numbers again),
    • Calls the newCard() function (generating another card),
    • Returns a value of false so that the browser won't try to load the page in the href in the link (this was covered in Chapter 2).

Tip

  • If you've gotten this far, you now know how to do something that many people consider to be a fundamental part of Ajax—using JavaScript to reload a part of a page instead of hitting the server and requesting an entirely new page. We'll be going into Ajax in much more detail in Chapters 15 and 16.

[previous] [next]

URL: