The JavaScript Diaries: Part 13

The JavaScript Diaries: Part 13 - Array Properties and Methods

Now that we know about the different types of arrays, we'll learn how to manipulate them in order to make them more functional. In this section, we'll look at the properties and methods that are commonly used for most coding situations.

Array Properties

length

The length property returns the number of elements in an array. The format is arrayName.length. The length property is particularly useful when using a loop to cycle through an array. One example would be an array used to cycle banners:

var bannerImg = new Array();
  bannerImg[0]="image-1.gif";
  bannerImg[1]="image-2.gif";
  bannerImg[2]="image-3.gif";
var newBanner = 0
var totalBan = bannerImg.length
function cycleBan() {
  newBanner++
  if (newBanner == totalBan) {
    newBanner = 0
  }
  document.banner.src=bannerImg[newBanner]
  setTimeout("cycleBan()", 3*1000)
}
window.onload=cycleBan;

This portion is then placed in the body where the banner is to be displayed:

&lt;img src="image-1.gif" name="banner">

Let's take a look and see what happened here:

On the first line, we created a new instance of the array bannerImg, and gave it three data elements. (Remember, we are only making a copy of the Array object here.)
Next, we created two variables: newBanner, which has a beginning value of zero; and totalBan, which returns the length of the array (the total number of elements contained in the array).
Then we created a function named cycleBan. This function will be used to create a loop to cycle the images.

We set the newBanner variable to be increased each time the function cycles. (Review: By placing the increment operator [" ++ "] after the variable [the "operand"], the variable is incremented only after it returns its current value to the script. For example, its beginning value is "0", so in the first cycle it will return a value of "0" to the script and then its value will be increased by "1".)
When the value of the newBanner variable is equal to the variable totalBan (which is the length of the array), it is then reset to "0". This allows the images to start the cycle again, from the beginning.
The next statement uses the Document Object Method (DOM - we'll be taking a look at that soon) to display the images on the Web page. Remember, we use the dot operator to access the properties of an object. We also read the statement backwards, i.e., "take the element from the array bannerImg, that is specified by the current value of the variable newBanner, and place it in the src attribute located in the element with the name attribute of banner, which is located in the document object."
We then used the setTimeout function to tell the script how long to display each image. This is always measured in milliseconds so, in this case, the function cycleBan is called every 3,000 milliseconds (i.e., every 3 seconds).

Finally, we used the window.onload statement to execute the function cycleBan as soon as the document is loaded.

There are a total of five properties for the Array object. In addition to the length property listed above, the others are:

constructor: Specifies the function that creates an object's prototype.
index: Only applies to JavaScript arrays created by a regular expression match.
input: Only applies to JavaScript arrays created by a regular expression match.
prototype: Used to add properties or methods.

The other properties listed here are either more advanced or seldom used. For now, we'll stick to the basics.

[next]

URL:

The JavaScript Diaries: Part 13