|
This two-part tutorial covers the
introduction to javascript arrays including how to define them and some basic uses
of arrays. It then goes on to cover associative arrays and how they can be used.
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:
quote[0]
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">
<!--
function display_quote()
{
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.";
var x=0;
for (x=0; x<5; x++)
{
alert(quote[x]);
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A href="javascript:display_quote()">Click Here, I dare you!</A>
</BODY>
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">
<!--
function display_quote2()
{
var quote= new Array(5);
var y=0;
for (y=0; y<5; y++)
{
quote[y]=prompt('Enter a Quote!',' ');
}
var x=0;
for (x=0; x<5; x++)
{
alert(quote[x]);
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A href="javascript:display_quote2()">Click Here, I dare you!</A>
</BODY>
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...
|
Tutorials 
