Working with JavaScript


Exercises

Working with JavaScript requires little more than a simple text editor and a Web browser. The only way to learn to write scripts is to begin by experimenting with them. The easiest way to do this is to download them, bring them into a text editor, make some changes, and then load the page into a browser to see what happens. You may have noticed the little document icon at the upper left of source code listings: . To download the source code right click on the icon and select Save Link As... in the pop up menu. Here is some code you should download now.

<HTML>
  <HEAD>
    <TITLE>Hello World</TITLE>

    <SCRIPT Language="JavaScript">
    <!--

    document.write("<H1>Hello World!</H1>")

    // -->
    </SCRIPT>

  </HEAD>

  <BODY>

    <SCRIPT Language="JavaScript">
    <!--

    document.write("<P>The background colour is ")
    document.write(document.bgColor)
    document.write("</P>")

    // -->
    </SCRIPT>

  </BODY>
</HTML>

 

Once you have downloaded the file, open your favourite text editor (it must be able to read and write plain ASCII text files). Load the document into the text editor. Then open your browser and load the same file into it. In Netscape 4.X choose File, Open Page, and then press the Choose File button to find the file and load it into the browser. Your screen should look something like this:

Once you can see the same file in your text editor and browser you can make changes to the file and save it in the editor. Then, press the reload (or refresh) button in you browser to see the affects your changes have had.

In this example the double quotes are used inside the write() method when a string, or sequence, of text characters are to be written into the document. For example: document.write("</P>"). However, in the previous line no double quotes are used: document.write(document.bgColor). In this case the document.bgColor inside the brackets is not literal text to be written into the page. It is a JavaScript expression that must first be evaluated. In this case document.bgColor returns the background property of the document object, which is a string of text in the format #FFFFFF. This text is then written into the document by the write method.

Exercises

Using the information in the page titled Working with the Document Object try changing the messages you write into the document. In particular try the following:

  1. Write out different messages using document.write().
  2. Write out all the document properties listed in Working with the Document Object. For example: document.write(document.bgColor)
  3. Try changing the bgColour property by setting it to values like "red" or "#FF0000". For example: document.bgColor = "#4499FF"
  4. Write an image tag out to a document so that an image correctly appears in the document. For example: document.write("<IMG SRC=\"mypic.gif\">") Note the \" to place a quote inside the literal string without prematurely ending the string because of the quote character. The backslash "escapes" the following character so it is interpreted literally. In other words \" says this is a quote character and not the end of the literal text string. Or you can use single and double quotes. For example document.write('<IMG SRC="mypic.gif">'). Try both methods. What happens if you make the mistake of trying to run: document.write("<IMG SRC="mypic.gif">")? Download an image from the Web if you don't have one handy for this exercise.
  5. Compose a page with a horizontal rule at the bottom of the page followed by the date the document was last modified. It should look something like this:
    This document last updated: