Page 10 —
Arrays in the Document Object Model
This example is going to use image swapping to show how arrays are woven into the DOM. If you have Internet Explorer 3 or Netscape Navigator 2, you should upgrade. Try the example, view source, and read on.
Here's the JavaScript that's in the onClick="" in the link:
var change=prompt('Change which image (0 or 1)?','');
window.document.images[change].src='three.jpg';
The first line gets a number and the second line does the change. In the past, we changed images using something like this:
document.image_name.src = 'some_image.gif';
In order to do this, each image has to be named. If you don't know the name of an image that you want to swap, but you know its order on the HTML page, you can refer to the image by its DOM number. The first image in an HTML document is document.images[0], the second is document.images[1], and so on. If you want to know how many images are in a document, you can find out by checking the length of the images array: document.images.length. For instance, if you wanted to change all the images on your page to a spacer GIF, you could do this:
for (var loop = 0; loop <
document.images.length; loop++)
{
document.images[loop].src = '/images/spacer.gif';
}
Spiffy, huh?
OK, there's one more part of JavaScript syntax you need to know before you can consider yourself a full-fledged programmer: functions. Once we cover functions, we'll do a few exercises, and then I'll give you your homework for this lesson.
On to functions.
next page»
|
