Account Log In - Home/Outlines - Books - Contact Us - Support - Employment -

Select your course... Course Outlines     Advanced Flash     Advanced JavaScript and CSS     CSS     Dreamweaver     Dynamic HTML     Flash     JavaScript     Photoshop     XHTML

Select your theme... Canada-ehHalloween_JheryllChristmas_JheryllPrintBeach_StevePresentationHalloween_KhalWol_Tad

DHTML

JavaScript Programming Fundamentals

Arrays

One last programming fundamental that we will discuss in this module is the array object. Arrays can be extremely useful for a variety of things. Any time you need JavaScript to quickly and easily work with a list of objects, arrays are the only answer.

What is an Array?

In its simplest form, an array is like a list of items. More accurately, an array can be likened to a single column of items in a table (or spreadsheet, if you like). Each item is numbered from the top to the bottom. To access an item, you need to know the name of the column, and the row number of the object. With JavaScript arrays, this row number is called an index.

To create an array, you assign it to a variable. An array is always specified after a new statement, which is basically telling JavaScript that you are creating a new array. Arrays can take several forms. Here is one popular way to do it:

var my_array = new Array('item 1', 'item 2', 'item 3');

As we commonly see in JavaScript, arrays start counting from zero, so the second item in the array is actually 1.

Note that the word Array must be spelled with an uppercase A.

To access an array element, we simply use the variable it was assigned to, then include its index number in square brackets like so.

document.write('The second array element is: ' + my_array[1]);

Try this simple script out.

The other common way to write an array is a little different. We start with the same variable, but then the parentheses are left empty. (These can also contain the length of the array, but most people leave this out in case they want to add items.)

my_array = new Array();

my_array[0] = 'item 1';
my_array[1] = 'item 2';
my_array[2] = 'item 3';

(Accessing an element in this array is done in exactly the same way as above.)

This method may end up being your preferred way of writing an array, as it is a little more clearly laid out. However, more typing is involved with this method of writing an array.

Arrays are usually used in conjunction with for loops, especially if you need to go through the entire array to find something, or if you need to access all the elements of the array. One of the main advantages of using a for loop with an array is that you can use the value of the loop counter variable (usually i) as the index number for the array. This way, each time the loop executes, i increments by 1, and you move on to the next array element.

The following script creates an array of names and then uses a for loop to write them out on the page.

var names_array = new Array();

names_array[0] = 'Bob';
names_array[1] = 'Sally';
names_array[2] = 'Henry';
names_array[3] = 'Gerry';
names_array[4] = 'Betty';

for (i = 0; i < names_array.length; i++) {

   document.write(names_array[i] + '<br />');

}

Here is an example of this script.

Here is how this script works.

• First, we create the array and assign it to the variable names_array.
• We then specify the elements of the array. In this case, 5 names.
• Then we set up a for loop to loop as many times as the length of the array with i < names_array.length.
• Each time the for loop executes, the value of i is specified as the index for names_array, and the corresponding element is written out to the document, along with a line break.

Parallel Arrays

Parallel arrays are very simple to set up. A parallel array is simply an array that contains parallel elements to another array. We will demonstrate this by building on our previous example.

Right after your first array, (names_array) add a second array that will contain the phone numbers of the names in names_array.

var phone_num = new Array();

phone_num[0] = '555-1111';
phone_num[1] = '555-2222';
phone_num[2] = '555-3333';
phone_num[3] = '555-4444';
phone_num[4] = '555-5555';

Then, we add a new line to our for loop, and take out the <br /> in the first line, replacing it with a hyphen in between two spaces.

for (i = 0; i < names_array.length; i++) {

   document.write(names_array[i] + ' - ');
   document.write(phone_num[i] + '<br />');

}

You can create as many parallel arrays as you need, and they can all be accessed by using the same for loop.

Here is an example of this script in action.

Built In Arrays

Built in arrays are sometimes referred to as internal arrays. What this means is that every object that JavaScript can access in your browser and document is already part of an array. For example,

document.images[0] would reference the very first image contained in your document. Similarly, document.links[0] would refer to the very first link.

This can be very useful for getting at objects on a page which don't have names, or to just cycle through all of a particular kind of object on a page. We will be seeing built in arrays in action as we continue on through this course.

Here is a list of all the links contained in this document.

How did we do that? Well, at the top of this page is a script that opens a new window (we'll be covering that later). Then we simply use the same for loop that we used in the previous example to run through and print out all the elements contained in the document.links[i] array, and write them into the new window.

Arrays Summary

• An array is like a single column of items in a table.
• The item's index is like its row number in that table.
• Arrays are usually assigned to variables.
• Arrays always start counting from 0.
• To access an element (item) in the array, you use the variable you assigned it to, followed by the element's index number inside square brackets ([]).
• Arrays are often used in conjunction with for loops.
• Parallel arrays work by simply creating other arrays that have the corresponding information to the elements of the first array.
• Built in, or internal arrays allow you to access any object of the browser or page as part of an array.

---

DHTML - TOC - Introduction - Books -
JavaScript Programming Fundamentals - Links - Questions -
1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - [ 9 ] -

DHTML - TOC - Introduction - Books -
JavaScript Programming Fundamentals - Links - Questions -
1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - [ 9 ] -