JavaScript Tutorial – Lesson 4 pt 2

Contents

Arrays Arrays and Loops Arrays in the Document Object Model

Arrays

We’ve seen that variables can hold numbers, strings, and references to objects. There’s one more kind of information that JavaScript understands:arrays.

Arrays are lists. You might have a list of URLs that you want to visit, a list of names that you want to remember, or a list of colors in which you’d like text displayed. All these lists can be stored in arrays.

Here’s how to create an array of colors:

1	var colors = new Array("red","blue","green");

Now that you have an array, what can you do with it? The good thing about arrays is that elements of an array can be accessed by number. The first element is number 0 and can be accessed like this:

1	var the_element = colors[0];

After you execute this line of JavaScript, the variable the_element will hold the string “red.” As you can see, you access the first element of an array by writing the name of the array and putting the element’s number in square brackets. The second element of an array is number 1.

Once you’ve created an array, you can add to and change its values. If you decided to change the first element of the colors array to purple instead of red, you could write this:

1	colors[0] = "purple";

Arrays are often used in tandem with loops.

Arrays and Loops

Arrays are great, because you can loop through each element of the array and do something with it. Here’s an example of arrays and loops that presents a URL slide show. Take a look at the slide show and then come back here. Turn off your pop-up blocker to see this example in action.

This example may need to be updated.

The first thing we do to make the slide show work is declare some variables:

1	var url_names = new Array("hits.org","awaken.org","bianca.com");

2

3	var a_url;

Next, we loop through the array, opening each URL and waiting for the user to click on the alert OK button:

01	for (var loop = 0; loop <url_names.length; loop++)

02

03

{

04

05

06

07	// make the name of a url, for example http://www.hits.org/

08

09	a_url = "http://www." + url_names[loop] + "/";

10

11

12

13	// open a window

14

15	var new_window=open(a_url,"new_window","width=300,height=300");

16

17

18

19	// wait for the click

20

21	alert("hit ok for the next site");

22

23

24

25

}

There are a few interesting things in this loop. First, note that the loop goes from 0 to something called url_names.length. Putting .length after the name of an array tells you how many elements are in the array. Remember, however, that this number is not the same as the index number of the last element in an array. If an array has three elements, its length is 3 but its last element is array[2]. This is because the first element of an array is array[0]. If you’re getting errors like “object not found” and there’s an array in your code, you may well have mixed up the index number of the array element with the overall number of elements in the array.

You might have noticed that putting a .length at the end of an array looks a lot like finding a property of an object. Well, that’s because arrays actually are objects and length is one of the array’s properties.

The other sign that arrays are objects is that you create a new array using the new command. In the above example, url_names = new Array("blah","blah"...) actually says, “make a new array and make url_names a reference to it.” In general, that’s how you create a new instance of an object. We won’t be going much deeper into objects for this set of lessons, so, for now, just keep in mind that if you see the word “new” being used in this way, you’re looking at an object being created.

The first line in the loop just creates a variable that holds a string.

1	a_url = "http://www." + url_names[loop] + "/";

The first time into the loop, the value of the variable loop is 0. The first element in the url_names array is the string "hits.org". So, during the first time in the loop, the variable a_url will equal the string "http://www.hits.org/".

The next line of the loop opens a window with that URL.

1	var new_window=open(a_url,"new_window","width=300,height=300");

Because each time we open the window we give it the same name, we won’t get multiple windows. If we had left out the name "new_window" we would have opened a different window each time we went through the loop.

The third line of the loop simply throws up an alert box and waits for the user to hit the OK button.

There are more uses for arrays than just holding strings. In fact, it turns out that arrays run throughout the JavaScript Document Object Model.

Arrays in the Document Object Model

This example is going to use image swapping to show how arrays are woven into the DOM. Try the example, view source, and read on.

Here’s the JavaScript that’s in the onClick="" in the link:

1	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:

1	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:

1	for (var loop = 0; loop <

2

3	document.images.length; loop++)

4

5

{

6

7	document.images[loop].src = 'spacer.gif';

8

9

}

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.