JavaScript Review

Here is a review of what we have covered so far in JavaScript.

  1. A JavaScript program can be located either on the HTML page or in a separate file, such as myjs.js. If it is in a separate file, then in between the <head> and </head> tags we need to put:

    <script language = "JavaScript" src = "myjs.js">
    </script>

    Of course, we only use myjs.js if that is the file name where we have our JavaScript programs. If they are in a different file, we use that file name.

  2. A JavaScript program can be used to write to the page. This can be done using the document.write() function. For example, we could say

    document.write("hello")

    Equivalently, we could say document.write('hello'), because JavaScript will treat either a single quote or a double quote as indicating a text string (what we would call a bunch of words, programmers call a text string, or just string, for short).

    If we use document.write(hello), without any quotes at all, we will get an error. That is because JavaScript expects that without quotes around it, hello is the name of a variable. Since we have not assigned any contents to this variable, it does not work. What will work is this:

    <script language = "Javascript">
    hello = "Hi, how are you?";
    document.write(hello);
    </script>

    That little script will cause the sentence Hi, how are you? to appear on the HTML page.

    The document.write() function can be used to the same block of code on every page. A header is an example of this. The advantage of using JavaScript is that when you want to make a change to all of your pages, you can make the change on one JavaScript file and it will affect every page.

  3. Another way to write to a document is to use a form with an output box. See this utility, for example. A utility is a handy way to automate the process by which you generate some of your HTML code.

  4. We can change the look of a page when the user scrolls the mouse over part of it. To do this, we use the onMouseOver() and onMouseOut() functions.

    If we place an identifier inside a <div> tag, then we can manipulate the CSS class name for the identifier based on the onMouseOver() and onMouseOut() functions. To do this, we created a setClass() function, as in the fancy menu exercise.

  5. We learned how to create an interactive form in the TicTacToe example. We used the onClick() function to trigger setting a form value to X or O. We had to use an if...else statement to control the program flow, and we used a for loop to process all 9 squares.

  6. We are starting to learn how to maintain information from one screen to the next. This is done using cookies. One example is the second utility. Another example is the registration form.