Concepts in Computing
CS4 - Winter 2007
Instructor: Fabio Pellacini

Lecture 11: JavaScript Controls HTML

Overview

We've mostly seen JavaScript's interactions with HTML as getting input from a form and writing output back to a text or textarea. But JavaScript can be closely integrated with every little aspect of a document, as the examples today will illustrate.

  • Radio-controlled select
  • Changing images
  • Catching events
  • Writing to a document
  • Modifying the HTML

Creating a Menu on the Fly

Example

We've seen before how to control the value of text inputs and the value of check box inputs. We can go even further, and control the options presented in a select input. This again relies on the cross-referencing between JavaScript and HTML. Remember that a select is really just an array of options. We typically specify those options in the HTML, but JavaScript provides parallel functionality, so that we can specify them there.

  • document.selectName.options.length accesses the length of the array of options
  • document.selectName.options[index] accesses the option at the index
  • new Option("text") creates a new option that displays the given text, just like <option>text</option>

Images

Examples:

JavaScript represents an image with another data type, called (appropriately enough) an "Image". Just like strings, numbers, etc., a variable can hold an Image, an Image can be passed to a function, etc. To create an image:

 
  v = new Image();
  v2 = new Image(width, height);

To set the source of the image, give a URL, just like with HTML:

  v.src = "URL";

Cross-reference images in the HTML by their name, just like with a form.

  document.imageName.src = "newurl";  // Changes the image source

There is also an array, document.images of all images in the document.

  document.images[0].src = "newurl";  // Changes the image source

Events

We started integrating JavaScript with HTML via button clicks. A button click is a type of event, or action by the user. We use the onClick attribute for a button input, in order to specify the JavaScript code that reacts to the event. We have seen some other event handlers:

  • onClick: when the mouse button is pressed somewhere (we saw with buttons, images, and radios; it's pretty generic)
  • onMouseOver and onMouseOut: when the mouse is moved over and element and out from it, respectively (we saw with images, but again it's pretty generic.
  • onChange: when the selected option is changed

There are numerous other event handlers, and you can learn about them in a reference. Here are just a few other examples, to get you thinking about the diversity of event types to which JavaScript can respond. (In these examples, the JavaScript code is embedded right in the attribute, since it's simple enough not to require packaging in a separate function.)

  • onFocus, onBlur -- select / deselect a form element
  • onKeyDown, onKeyUp -- key presses

Writing to a document

Starting with HW 0, we have used JavaScript to timestamp a document. That piece of code makes use of JavaScript's ability to insert text in the middle of the HTML document, as the document is being processed. To do this, include a <script> tag in the body of your document. As the browser is displaying the page, it executes the scripts it encounters throughout the document.

To have a script output HTML, use the built-in function document.write, e.g.:

  document.write("<p>This is a paragraph</p>.\n");

Displays:

Of course, things get more interesting when the text being written isn't just static, but must be computed:

  • The definition of the getTime() function used to compute this message is included in a script in the head of the document. The head is processed before the body, so you can be sure the function is available by the time the body gets displayed.

You can use this approach to generate content for an entirely new window: example.

Modifying Other HTML

JavaScript can control all kinds of properties of the document (color, style, etc.) and window (size, position, etc.). However, once the end of the body is reached, the document text is all finished. Or is it?

We've seen that there is a lot of cross-referencing between HTML and JavaScript (e.g., forms, inputs, images), both by name and by array indices. Remember that this all works by way of the document object model (DOM). The DOM gives us the ability not only to access the various entities, but also to modify them and add new ones.

This process can be painful, but the example gives you a taste of it:

  • Any HTML element can give an id attribute.
    In JavaScript, we can then access that element by its id, using the function document.getElementById("id").
  • In JavaScript, we can create a new HTML element by tag (without the < and >), using the function document.createElement("tagname").
  • Remember that HTML elements are hierarchically nested -- the html contains the body which contains a paragraph which contains... We call the contained element a child of the containing element (parent). There are functions to manipulate the children, once we have the parent (via the id cross-referencing above). The function parent.appendChild(newElement) makes the new element (just created) a child of the parent (already there).