The JavaScript Diaries: Part 11/Page 3 | WebReference

The JavaScript Diaries: Part 11/Page 3


[previous] [next]

The JavaScript Diaries: Part 11

Accessing the Elements

The elements in the arrays can be accessed in many different ways. Here, we'll look at some of the easier methods. Many of these you've done before with variables and other objects. Here is a simple script:

var myCar = new Array("Chev","Ford","Buick");
alert(myCar[2])
  1. First we declared a variable named myCar and initialized with a reference to a newly created instance of the Array object.
  2. We then gave the array an argument of three different elements.
  3. Finally, we created an alert window that will display the element with an index number of "2." Which element do you think will be displayed in the alert window? If you said Buick you're right.

If you didn't catch that, here's how it works. Remember that the index number starts at "0." If we look at it like that, then we can see that the elements are numbered as follows: 0=Chev, 1=Ford, 2=Buick. In the alert window statement, we have a call to the element with an index number of "2" in the array called myCar. That then returns the element Buick.

Let's try another one, using a loop this time.

var coNames = new Array();
  coNames[0]="Paul Smith (President)";
  coNames[1]="Laura Stevens (Vice President)";
  coNames[2]="Mary Larsen (General Manager)";
  coNames[3]="Bob Lark (Sales Manager)";
  coNames[4]="Michael Storm (Technical Manager)";
  coNames[5]="Terri Storm (Office Manager)";
for (var i=0; i<6; i++) {
  document.write(i+1+". " + coNames[i] + "<br>");
}
  1. First, we declared a variable named coNames and initialized with a reference to a newly created instance of an array.
  2. Then we listed each index with its corresponding element.
  3. Next, we created a loop to print out the information on the page. The loop is broken down like this:
    1. We declared the type of statement we are creating by using the for keyword. This will create a loop. To review, the format of the for statement is: 
            for (initialExpression; condition; incrementExpression) {
    statements
  }
    2. We then declared a variable named "i" and initialized it with a value of "0." (The letter "i" is typically used for a counter variable in loops such as this.)
    3. The first time the loop is executed, it will compare the initial value of the variable "i" with the conditional statement (i<6). There are six elements and, since the index numbering begins at "0," the last element has an index number of "5." If the conditional statement is false, the loop will not be executed. If the statement is true, the value will be used in the document.write statement on the next line. Once the loop is executed, the value of the variable "i" is increased by 1 (using the "i++" operator). The statement basically says, "declare a variable named 'i' and give it a value of '0.' Then, see if its value is less than '6.' If so, then use it in the statement contained in the statement block (the brackets) below. Once that is finished, increase its value by '1' and repeat the loop. However, if the value of the variable 'i' is equal to '6,' then stop the loop."
    4. Next, the loop then executes the condition statement, which writes out the document.write statement to the page.
    5. Note that in the document.write statement, I have added a "1" to the "i" variable. The variable here is used to number the names in the list. Remember, an array index begins with the number "0." Without adding "1" to the variable, the first number in our list would be "0." We couldn't set the initial value of the "i" variable to "1" as that would have skipped the first person listed (and that guy's the president!).

    The script should display a listing as the one shown below:

We could have written the above script with a dense array. It would be written this way (the first two lines should all be on the same line):

var coNames = new Array("Paul Smith (President)","Laura Stevens (Vice President)","Mary Larsen (General Manager)",
  "Bob Lark (Sales Manager)","Michael Storm (Technical Manager)","Terri Storm (Office Manager)");
for (var i=0; i<6; i++) {
  document.write(i+1+". " + coNames[i] + "<br>");
}

We also could have written it as a literal notation. In that case, we would write it like this (again, the first two lines should all be on the same line):

var coNames = ["Paul Smith (President)","Laura Stevens (Vice President)","Mary Larsen (General Manager)",
  "Bob Lark (Sales Manager)","Michael Storm (Technical Manager)","Terri Storm (Office Manager)"];
for (var i=0; i<6; i++) {
  document.write(i+1+". " + coNames[i] + "<br>");
}

Either way is fine but you can see that the first one is much easier to read. This is important when you need to find any errors, change the data or add additional data.


[previous] [next]

Created: November 24, 2005

URL: