Class 3 review (06/12/2002)

  1. Here is cycling BGCOLOR and FGCOLOR example, using JavaScript arrays, global variables, etc.

  2. Here is what the HTML and JavaScript code looks like: Note [ ] used to prevent browser interpretation, despite [PRE] and [/PRE] tag request! 
    [HTML]
[HEAD]
      [TITLE]Cycling of BGCOLOR values (June 12th, 2002)[/TITLE]

[SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT"]
[!-- Hide script from old historical browsers

     delayAmt = 2000;

     myColors = new Array( "FF00FF", "00FF00", "000000", "FFBC12",
                           "02458A", "AA579B", "PURPLE", "CDCDCD"  );
     thisOne = 0;

     numColors = myColors.length;

     function rotate() 
     {
           if (thisOne == numColors) {
              thisOne = 0;
           }
           document.fgColor = document.bgColor;
           document.bgColor=myColors[thisOne];
           thisOne = thisOne + 1;
           setTimeout("rotate()",  delayAmt);
     }
[/SCRIPT]
[/HEAD]

[BODY BGCOLOR="ABCDEF" onLoad="rotate()"]

    [CENTER] [H1] FGCOLOR and BGCOLOR and arrays [/H1] [/CENTER]

[/BODY]
[/HTML]

The top ten list for study/review of class #3.

  1. The Tools menu, Internet Options command, Advanced folder of Internet Options dialog box shows the Settings.
    • The Display a notification about every script error checkbox should be checked.
    • If it is NOT checked, you can still see the JavaScript error details by double clicking in the status bar area.
    • You can turn Display notifications of errors on and off from the JavaScript error box, so technically you would never have to do the Tools menu, Internet Options, Advanced to get control over it.

  2. The delayAmt variable is 2000 because we are working in milliseconds. There are 1000 milliseconds in 1 second.

  3. The Array is named myColors and it has a size or length of 8, but the indexes go from 0 to 7. In other words, the first color value is stored in location 0 and the last one is in location 7.

  4. If you change the statement
    thisOne = thisOne + 1; to
    thisOne = thisOnnnnne + 1;
    WHAT ERROR MESSAGE RESULTS? As the book states, it is a very good practice to intentionally make errors and see what the result is. That is an excellent way to develop your understanding of the language.

    What error message results, if any, if you take the period out of document.fgColor, making it documentfgColor? Or does the program run without any errors the browser catches, but not do what it used to? Explain this.

    What error message results if you take the period out of document.bgColor (only in the statement document.fgColor = document.bgColor)?

  5. The onLoad="rotate()" portion of the BODY tag is an EVENT HANDLER. Page 328 of the textbook has an example of and very brief explanation of using the onLoad event handler to execute a JavaScript statement that creates a 2nd window for displaying information. It also disposes of the 2nd window, using the onUnload event handler and the close() method. Do NOT worry about understanding this now. It should be quite clear by the end of week #2 of this class.