Certificate Series

JavaScript Lesson 17
User Defined Arrays

In the last lesson we talked about JavaScript Object Arrays (or pre-defined arrays). In this lesson we'll learn how to make our own arrays -- User Defined Arrays.

First, let's review the concept of an Array:

An array is like a filing cabinate or a rolodex that you store 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.

Let's go ahead and make the names array and access it's values:

Type the following into the text area below

<head>
<script language=javascript>

</script>
</head>
<body>
<form name=example>
type in a number between 0 and 6:
<input type=text size=2 name=number>
<input type=button value='Click Here' onClick =
"alert('The name in slot ' + window.document.example.number.value
+ ' of the names array is ' + names[window.document.example.number.value])">

</form>
</body>

Click on PREVIEW.

You should have been able to access each of the 7 values in the names array by entering a number between 0 and 6 and clicking on ENTER.

Now let's go over what you did. Look at the following for reference:

<head>
<script language=javascript>

</script>
</head>
<body>
<form name=example>
type in a number between 0 and 6:
<input type=text size=2 name=number>
<input type=button value='Click Here' onClick =
"alert('The name in slot ' + window.document.example.number.value +
' of the names array is ' + names[window.document.example.number.value])">

</form>
</body>

The first thing you do when making an array is create an array object. This is done by using the new Array() contructor. The line we have, names = new Array(); declares a new array called "names".

The next thing we did is to fill the array with some names. This is done simply by assigning each slot a string (in quotes) like this:

names[0] = "scott";
names[1] = "kendell";
names[2] = "Trish";
names[3] = "Tony";
names[4] = "Mike";
names[5] = "Debra";
names[6] = "Curt";

Of course, we could fill the array with any kind of object not just strings. For example we could use integers or even other arrays.

Next, in the script we wrote we accessed the number entered by the user:
window.document.example.number.value
Finally we accessed the value in the array at the slot requested by the user:
names[window.document.example.number.value]

Another way to fill an array:

There is another way to fill an array. We can also fill an array using the array constructor directly. Like this:

names = new Array("Scott","kendell","Trish", "Tony", "Mike", "Debra", "Curt");

Try using this method in the script you have created. As you will see later in this lesson, this method is especially handy when building 2 dimensional arrays and higher dimensional arrays.

In the rest of this lesson, we'll see an example of using a two dimensional array (sometimes called a "hash table")

Example of using arrays

Suppose you want to make the follow type of thing on your page:
Be sure and select a team and see that the list of the players changes. We are dynamically populating the select box. This is a great oppurtunity to use and understand using arrays. We are going to do this example twice to show two of the ways of using javascript arrays.

The first thing we need to do is make the select menus like the ones above. We need two of them, one for the teams, and one for the players. Here is the code:

Type the following into the text area below

<body bgcolor=white>

<form name=ballteams>

    <select name=theteams>
        <option name=choose selected>
            Choose a Team...
        <option name=boston value=celtics>
            Boston Celtics
        <option name=losangles value=lakers>
            LA Lakers
        <option name=chicago value=bulls>
            Chicago Bulls
    </select>

    <select size=3 name=theplayers>
        <option> .........................
        <option>
        <option>
    </select>

</form>

</body>

Here we have a FORM called ballteams and two SELECT menus, one called theteams and theplayers. By not giving the theteams a size it acts like a drop-down menu. The theplayers select box has 1 option with "....................." in it to keep the select wide enough since it will collapse without it. Also, we have three other empty <options> listed. This is very important. You must have as many options as the longest list you expect to populate the select box with. This is because we can't dynamically make a new option, but instead we can only replace the text in a current option.

Next we need to make an array to store the lists that we are going to populate the select box with. We are actually going to make a 4 arrays. We will make an array called teams and then three arrays called teams["celtics"], teams["lakers"], and teams["bulls"]. This way we can ask for team[1] which would return celtics then we can ask for teams["celtics"], which would return the list Larry Bird,Jerry West,Kevin McHale. See below:

Type the following into the text area below

<head>
<script>
teams = new Array("none","celtics","lakers","bulls");
teams["none"] = new Array("");
teams["celtics"]= new Array("Larry Bird","Bill Russell","Keven McHale");
teams["lakers"] = new Array("Wilt Chamberlan","Jerry West","Shaqile Oneil");
teams["bulls"] = new Array("Micheal Jordan","Scottie Pippen","Dennis Rodman");

</script>
</head>
<body bgcolor=white>

<form name=ballteams>

    <select name=theteams>
        <option name=choose selected>
            Choose a Team...
        <option name=boston value=celtics>
            Boston Celtics
        <option name=losangles value=lakers>
            LA Lakers
        <option name=chicago value=bulls>
            Chicago Bulls
    </select>

    <select size=3 name=theplayers>
        <option> .........................
        <option>
        <option>
    </select>

</form>

</body>

When you get that typed in add an alert(teams[teams[1]][2]) in between the script tags. What do you suppose you will get? Try it.

Now we need to add an event handler to the theteams select box and a javascript function that will populate the select box with the right list of players when we select a team. Add the blue stuff below:

Type the following into the text area below

<head>
<script>
teams = new Array("none","celtics","lakers","bulls");
teams["none"] = new Array("");
teams["celtics"]= new Array("Larry Bird","Bill Russell","Keven McHale");
teams["lakers"] = new Array("Wilt Chamberlan","Jerry West","Shaqile Oneil");
teams["bulls"] = new Array("Micheal Jordan","Scottie Pippen","Dennis Rodman");

function fillplayers(){

whichindex = document.ballteams.theteams.options.selectedIndex;
number_of_players = teams[teams[whichindex]].length;

for(i=0;i < number_of_players; i++){
document.ballteams.theplayers.options[i].text = teams[teams[whichindex]][i];
}

}

</script>
</head>
<body bgcolor=white>

<form name=ballteams>

    <select name=theteams onChange=fillplayers();>
        <option name=choose selected>
            Choose a Team...
        <option name=boston value=celtics>
            Boston Celtics
        <option name=losangles value=lakers>
            LA Lakers
        <option name=chicago value=bulls>
            Chicago Bulls
    </select>

    <select size=3 name=theplayers>
        <option> .........................
        <option>
        <option>
    </select>

</form>

</body>

Make sure and click on Preview and see that it works!

Let's analyze this code to see what is going on. First we use the event handler onChange=fillplayers(); to call the function "fillplayers()". In the function the first line reads as,

whichindex = document.ballteams.theteams.options.selectedIndex;

That line retrieves the index of the selected option (which is an integer between 0 and 4 in this case) and st the value in a variable called whichindex. The next line,

number_of_players = teams[teams[whichindex]].length;

That line finds the length of the list at teams[teams[whichindex]] and stores it in a variable called number_of_players. For example, if whichindex is equal to 1, then teams[whichindex] is the same teams[1] which is "celtics" so that teams[teams[whichindex]] is teams[teams[1]] is teams["celtics"].

Finally, we have a for loop to populate the select box:

for(i=0;i < number_of_players; i++){
document.ballteams.theplayers.options[i].text = teams[teams[whichindex]][i];
}

}

Here we run the for loop from 0 to number_of_players which is 3 for all of the lists in this example. document.ballteams.theplayers.options[i].text is the text in each option, and it is set to teams[teams[whichindex]][i] which is a player's name for each i.

That's it. That's an example of using an array. I am going to give you the same example below but with a different syntax for javascript arrays. See if you can tell what is going on, and try it yourself. Only the red stuff below is what is changed or different than the first example:

Type the following into the text area below

<head>
<script>

teams = new Array();

teams[1] = new Array();
teams[1][0] = "Larry Bird";
teams[1][1] = "Bill Russell";
teams[1][2] = "Kevin McHale";

teams[2] = new Array();
teams[2][0] = "Wilt Chamberlan";
teams[2][1] = "Jerry West";
teams[2][2] = "Shaquile Oneil";

teams[3] = new Array();
teams[3][0] = "Micheal Jordan";
teams[3][1] = "Scottie Pippen";
teams[3][2] = "Dennis Rodman";

function fillplayers(){

whichindex = document.ballteams.theteams.options.selectedIndex;
number_of_players = teams[whichindex].length;

for(i=0;i < number_of_players; i++){
document.ballteams.theplayers.options[i].text = teams[whichindex][i];
}

}

</script>
</head>
<body bgcolor=white>

<form name=ballteams>

    <select name=theteams onChange=fillplayers();>
        <option name=choose selected>
            Choose a Team...
        <option name=boston value=celtics>
            Boston Celtics
        <option name=losangles value=lakers>
            LA Lakers
        <option name=chicago value=bulls>
            Chicago Bulls
    </select>

    <select size=3 name=theplayers>
        <option> .........................
        <option>
        <option>
    </select>

</form>

</body>