CS 4, Summer 2006: 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.

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.

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:

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

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:

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: