Advanced Object References

JavaScript Tutorial 16
Object Arrays

Maybe you've heard about an array, maybe not. Array is a fancy sounding word isn't it? Alright strap your seat belt on! Here we go, now we're going to talk about arrays.

An array is like a filing cabinate or a rolodex that you keep stuff in. For example, suppose the following is an array called names. Currently, it has some names in it:

An array called names:

The beauty of arrays is how we access and put stuff into the slots. For instance, if we wanted to know what name was in third slot we would ask for

names[3]

and of course we would get Tony.

If we wanted to change the name in the fourth slot to Josh we would just do the following:

names[4] = Josh;

The array then becomes:

Of course, the array above is just a graphical representation of an array, but this is the picture I want you to have in your head when we discuss arrays.

In the next tutorial we'll learn how to make our own arrays. For now we're going to discuss the arrays that already exist when you make a web page.

JavaScript Object arrays:

You already know how to access objects in your documents. You use the basic object reference syntax that looks like this:

someObject.someObject.someObject
This method of referring to objects always works. But, JavaScript provides another way of referencing objects that is sometimes very useful--object arrays.

You see, when your page loads into a users browser, the browser automatically recognizes all of the objects contained in your document and assigns them each a unique index - a number which refers to that specific object, beginning with 0 (zero) and ending with the number of objects - 1. We can use this automatic index assignment to access each of our objects. Let's see how.

Make your document look like this:

<body bgcolor=white>
<form name=exampleform>
A Text Field: <input type=text name=textinput size=20><br>
A Select Field: <select name=selectfield><br>
<option value=firstoption>Choice 1</option>
<option value=secondoption>Choice 2</option>
<option value=thirdoption>Choice 3</option>
</select>
A Button: <input type=button value='Button 1' name=buttoninput><br>
</form>

<form name=anotherexampleform>
A Text Field: <input type=text name=anothertextinput size=20><br>
A Select Field: <select name=anotherselectfield><br>
<option value=option1>Another Choice 1</option>
<option value=option2>Another Choice 2</option>
<option value=option3>Another Choice 3</option>
</select>
A Button: <input type=button value='Button 2' name=anotherbuttoninput><br>
</form>
</body>

We just made two forms. Inside each form is three inputs -- a text field, a select field, and a button.

Let's access the value of the button by using object reference first. add the bold stuff to what you have already (pay particular attention to the red part):

<head>
<script language=javascript>

</script>
</head>
<body onload=test(); bgcolor=white>
<form name=exampleform>
A Text Field: <input type=text name=textinput size=20><br>
A Select Field: <select name=selectfield><br>
<option value=firstoption>Choice 1</option>
<option value=secondoption>Choice 2</option>
<option value=thirdoption>Choice 3</option>
</select>
A Button: <input type=button value='Button 1' name=buttoninput><br>
</form>

<form name=anotherexampleform>
A Text Field: <input type=text name=anothertextinput size=20><br>
A Select Field: <select name=anotherselectfield><br>
<option value=option1>Another Choice 1</option>
<option value=option2>Another Choice 2</option>
<option value=option3>Another Choice 3</option>
</select>
A Button: <input type=button value='Button 2' name=anotherbuttoninput><br>
</form>
</body>

Make sure you click on PREVIEW to see what happens:

Here is another way to do the same thing. Change only the red stuff:

<head>
<script language=javascript>

</script>
</head>
<body onload=test(); bgcolor=white>
<form name=exampleform>
A Text Field: <input type=text name=textinput size=20><br>
A Select Field: <select name=selectfield><br>
<option value=firstoption>Choice 1</option>
<option value=secondoption>Choice 2</option>
<option value=thirdoption>Choice 3</option>
</select>
A Button: <input type=button value='Button 1' name=buttoninput><br>
</form>

<form name=anotherexampleform>
A Text Field: <input type=text name=anothertextinput size=20><br>
A Select Field: <select name=selectfield><br>
<option value=option1>Another Choice 1</option>
<option value=option2>Another Choice 2</option>
<option value=option3>Another Choice 3</option>
</select>
A Button: <input type=button value='Button 2' name=anotherbuttoninput><br>
</form>
</body>

Make sure and click on PREVIEW to see that it does the same thing.

What did we just do? Instead of using the names of the form and input type to reference the button value, we used the forms array and the elements array.

Give it try:

Before we go any further, see if you can use the forms array and the elements array to access to value of the second button (don't forget, object array indexes begin with 0, so the index of an object is 1 less than it's position in your code.)

Now let's use the options array to access the values in the select fields. Change your document to reflect these changes (in red and italics):

<head>
<script language=javascript>

</script>
</head>
<body onload=test(); bgcolor=white>
<form name=exampleform>
A Text Field: <input type=text name=textinput size=20><br>
A Select Field: <select name=selectfield><br>
<option value=firstoption>Choice 1</option>
<option value=secondoption>Choice 2</option>
<option value=thirdoption>Choice 3</option>
</select>
A Button: <input type=button value='Button 1' name=buttoninput><br>
</form>

<form name=anotherexampleform>
A Text Field: <input type=text name=anothertextinput size=20><br>
A Select Field: <select name=anotherselectfield><br>
<option value=option1>Another Choice 1</option>
<option value=option2>Another Choice 2</option>
<option value=option3>Another Choice 3</option>
</select>
A Button: <input type=button value='Button 2' name=anotherbuttoninput><br>
</form>
</body>

Maybe this graphical representation of how we are accessing these arrays will help:

forms[0].elements[1].options[2]

What I'd like to do now is briefly go over each of the remaining object arrays, discuss their positioning in the object hierarchy, and give you an example of how to use them. Let's get started.

Example: Forms Array

The forms array does just what you might think - it puts all of the forms in your document into an object array. The forms array - just like the form object - inherits directly from document. So, the proper syntax for using the forms array would be as follows:

Remember that sub-objects of the form object (form input objects) would be treated as usual. That is, you would use normal dot notation object referral to access those sub-objects (you could use the elements array).

Example: Options Array

The options array places all of the options belonging to a specific select input into an array. The correct syntax for the options array is as follows:

Example: Frames Array

The frames array is a useful tool. We have not specifically discussed use of frames with JavaScript, but I think that you understand frames well enough to understand and use the frames array.

Frames are an object that inherits directly from the window object. Proper notation (without the frames array) for referring to a frames object is as follows:

Frame objects have all of the properties and methods of window objects, including their own document object. When using the frames array to reference a frame object, the proper syntax is:

Example: Links Array

The links array is an array that I have never made use of. The link object inherits from the document object. The links array holds all hypertext links within a document. The proper syntax for the links array is:

Well, that's all there is to know about the object arrays. With a little practice and experimentation on your own, you will no doubt be able to master this portion of JavaScript and use it to the utmost advantage.

In the next tutorial, we are going to talk about creating user defined objects. User defined objects can be really powerful - possibly more powerful than the objects array. See you then!!