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 .
  window.onload = initAll;  var usedNums = new Array(76);  function initAll() {   if (document.getElementById) {   document.getElementById("reload"). onclick = anotherCard;   newCard();   }   else {   alert("Sorry, your browser doesn't support this script");   }   }  function newCard() {      for (var i=0; i<24; i++) {         setSquare(i);      } } function setSquare(thisSquare) {      var currSquare = "square" + thisSquare;      var colPlace = new Array(0,1,2,3,4,0,1,2,3, 4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);      var colBasis = colPlace[thisSquare] * 15;      var newNum;      do {         newNum = colBasis + getNewNum() + 1;      }      while (usedNums[newNum]);      usedNums[newNum] = true;      document.getElementById(currSquare). innerHTML = newNum; } function getNewNum() {      return Math.floor(Math.random() * 15); }  function anotherCard() {   for (var i=1; i<usedNums.length; i++) {   usedNums[i] = false;   }   newCard();   return false;   }  

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 Ajaxusing 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.





JavaScript and Ajax for the Web(c) Visual QuickStart Guide
JavaScript and Ajax for the Web, Sixth Edition
ISBN: 0321430328
EAN: 2147483647
Year: 2006
Pages: 203

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net