Page 9
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.
The first thing we do to make the slide show work
is declare some variables:
var url_names = new Array("hits.org","awaken.org","bianca.com");
var a_url;
Next, we loop through the array, opening each URL and waiting for
the user to click on the alert OK button:
for (var loop = 0; loop <url_names.length; loop++)
{
// make the name of a url, for example http://www.hits.org/
a_url = "http://www." + url_names[loop] + "/";
// open a window
var new_window=open(a_url,"new_window","width=300,height=300");
// wait for the click
alert("hit ok for the next site");
}
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.
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.
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. Here's an example of the role of
arrays in the DOM.
next page»
|