Lesson 21- Advanced Arrays II- Creating two-dimensional Arrays

Don't worry, two dimensional arrays are very easy to create- it simply requires a little altering in dimension. In this chapter, we will look at:

• How to create two dimensional arrays

• Using two dimensional arrays to store and load ad banners

How to create two-dimensional arrays

Before we switch dimensions, lets first quickly review how to create "normal" arrays, and take it from there:

var myarray=new Array(3)

The above creates an array with 3 "storage compartments". Hopefully, this is old stuff to you. Graphically, it is represented as such:

A two-dimensional array is created simply by building on a "normal" array. Constructing a two-dimensional array requires that we declare another array on top of EACH of the "stems" (myarray[0], myarray[1]...). Don't freak out, it really is quite simple.

Creating a two dimensional array

To start things off, lets first illustrate graphically how a two dimensional array is represented:

As you can see, what we need to do is  declare a new array on top of each individual array "stem". The translation of this idea to actual codes, as you will see, is actually very simple:

var myarray=new Array(3)
for (i=0; i <3; i++)
myarray[i]=new Array(3)

Is this simple or what? Well, it is. The key here is the for loop. By using a for loop, we incremented through the entire original array, declaring a new array at each "stop".

To access and store values into this "demented" array, just use double brackets:

myarray[0][0]="Compaq 486"
myarray[0][1]="Compaq 586"
myarray[0][2]="Compaq 686"
myarray[1][0]="Dell 486"
myarray[1][1]="Dell 586"
myarray[1][2]="Dell 686"
myarray[2][0]="IBM 486"
myarray[2][1]="IBM 586"
myarray[2][2]="IBM 686"

The trickest part of a two dimensional array may be keeping track of all the storage compartments in the array!

The two dimensional array above has  9 "storage compartments" (3*3).

Continuing on with our discussion, lets create a two dimensional array with 15 storage compartments:

var myarray=new Array(3)
for (i=0; i <3; i++)
myarray[i]=new Array(5)

If you know your multiplication, you know how to create arrays with any number of storage compartments!

Before we go any further, its appropriate to first discuss just when two dimensional arrays should be used over exiting variable declaration methods. A two dimensional array has a structure of a "tree", where multiple "sub variables" exist within a single "main variable":

"Compaq" here is the main variable that bonds together the sub variables (486,568 etc). You should use a two dimensional array only when you have a situation like the above, where sub grouping of a main  variable is necessary.

Using two dimensional arrays to store and load ad banners

Lets see a practical example of a two dimension array in action. In this example, we'll create a simple banner rotation script, where one of three ad banners is displayed at random as the page loads:

<script>
var myarray=new Array(3)
for (i=0; i<3; i++)
myarray[i]=new Array(2)

myarray[0][0]="<a href='firstbanner.htm'><img src='firstbanner.gif'></a>"
myarray[0][1]="<a href='firstbanner.htm'>Click here for our sponsor!</a>"
myarray[1][0]="<a href='secondbanner.htm'><img src='secondbanner.gif'></a>"
myarray[1][1]="<a href='secondbanner.htm'>Click here for our sponsor!</a>"
myarray[2][0]="<a href='thirdbanner.htm'><img src='thirdbanner.gif'></a>"
myarray[2][1]="<a href='thirdbanner.htm'>Click here for our sponsor!</a>"

var whichbanner=Math.round(2*Math.random())
document.write(myarray[whichbanner][0]+"<br>")
document.write(myarray[whichbanner][1]+"<br>")
</script>

We used a two dimensional array (3*2) to store the three banners, since an image and a text link is required for each banner. The random engine in this case determines which ad banner to load. Then, by using the document.write() method, we dynamically wrote out the random banner's codes.

Lesson 22