JavaScript Arrays

Arrays are one way of keeping a program more organized. They allow you to do some things that are difficult without them. Arrays are usually a group of the same variable type that use an index number to distinguish them from each other. Suppose you wanted to write out 5 quotes, and use variables for each one of the quotes. You could define 5 variables:

quote1="I like JavaScript.";
quote2="I used to like Java.";
quote3="JavaScript rules.";
quote4="Help! JavaScript Error!";
quote5="Just Kidding.";

However, a better way may be to use an array. To define an array, we need to follow the following form:

var Name_of_Array= new Array(number_of_elements);

Name_of_Array would be the name you want to give the array variable, the number_of_elements is the number of variables you want the array to store. So, for our quotes, we could write:

var quote= new Array(5);

Now, to assign values, we are going to use what is called an index number, and place it inside brackets. We attach this right on the end of the word quote, so our first quote would be:

I know, zero instead of 1. Arrays just work that way, the first element is always zero and the last element is always one less than what you define as the number of elements. In this case, our first element is quote[0], the last is quote[4]. So to assign the values we had, we could use a straight assignment, like this:

var quote= new Array(5)
quote[0]="I like JavaScript.";
quote[1]="I used to like Java.";
quote[2]="JavaScript rules.";
quote[3]="Help! JavaScript Error!";
quote[4]="Just Kidding.";

Notice that when we do this, we leave off the semiclon at the end of the array definition, and use semicolons at the end of each element we define.

So far, it has only made things more complicated. However, this array can now be used as part of a loop, using the value of the index numbers as a variable:

var x=0;
for (x=0; x<5; x++)
{
alert(quote[x]);
}

This uses the variable x in place of each index number, and runs the alert for all 5 elements in our array. The first time through, you would get an alert with quote[0], the second time, quote[1], and so on. If you need more on for loops, see the conditional tutorial.

I may not have explained the ++ operator before. x++ means that we add one to the value of x. In a similar fashion, we can subtract one from x with x--. This is how we are able to go from x being 0 to x being equal to 4. It stops at 4 because part of the condition is that the loop is only run while x is less than 5. So the last time it runs, x is equal to 5 and it does not go any further.

The script in action is a bit annoying. You can write this script in the head section. We will make this into a function, and call it from a link (the link must be in the body):

<HEAD>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:display_quote()">Click Here, I dare you!</A>
</BODY>

Here, try it out. Just don't get angry!

Click Here, I dare you!

You could also assign the values of the array using a loop. This would allow the viewer to assign the values using prompts, and then you could alert them with their own words!

var quote= new Array(5);
var y=0;
for (y=0; y<5; y++)
{
quote[y]=prompt('Enter a Quote!',' ');
}

Notice that we just defined the array, without assigning initial values. Don't forget the semicolon! Then we get the values by letting the viewer enter them through a prompt. quote[y] uses the value of y each time it is run. So, you are assigning quote[0] the first time, quote[1] the second time, and so on. The complete script is below, and it is even more annoying than the other one!

<HEAD>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:display_quote2()">Click Here, I dare you!</A>
</BODY>

Here, try it out. Drive yourself insane...

Click Here, I dare you!

The examples here could annoy people, but they do show you how arrays can be useful. There are certainly more useful ways to use them! I know you can think of a few...