JavaScript Arrays - Beginning Code
(Page 3 of 5 )
Begin by adding the following block of code to your text editor:
deals1 = new Array("images/gcards/gaintek.gif","images/gcards/gfarce.gif",
"images/gcards/leadward.gif","images/gcards/matrax.gif",
"images/gcards/nvideon.gif")
deals2 = new Array("images/mobos/abyte.gif","images/mobos/dfrock.gif",
"images/mobos/epoch.gif","images/mobos/gigasus.gif",
"images/mobos/saltech.gif")
deals3 = new Array("images/hdds/datastore.gif","images/hdds/maxgate.gif",
"images/hdds/sambell.gif","images/hdds/toshachi.gif",
"images/hdds/wmax.gif")
deals4 = new Array("images/cpus/amg.gif",
"images/cpus/amg32.gif","images/cpus/amg65.gif",
"images/cpus/nuetrino.gif","images/cpus/outel.gif")
deals5 = new Array("images/ram/corstan.gif","images/ram/critical.gif",
"images/ram/generic.gif","images/ram/kingmos.gif",
"images/ram/twinsung.gif")
As you can see, there are five arrays, each containing the initial pictures that represent each of the special offers in each of the product lines. Each array is initialized in the format nameof array = new Array with the items in the array comma delimited and contained within brackets and quotes. Each of these statements must be on a single line in the .js file.
In order to make a different picture from each of the product lines display each time the page is loaded, we need to make use of the length property of the array objects by creating an image counter:
imgCT1 = deals1.length
imgCT2 = deals2.length
imgCT3 = deals3.length
imgCT4 = deals4.length
imgCT5 = deals5.length
The values of each of these variables will clearly be five, but it is necessary so that if you want to add to the number of values in one of the arrays, the script will still include all of the pictures. To handle the randomization of the images, we now need to make use of another of JavaScript’s built in objects, namely the math object:
function randomize() {
if (document.images) {
randomNum1 = Math.floor ((Math.random() * imgCT1))
randomNum2 = Math.floor ((Math.random() * imgCT2))
randomNum3 = Math.floor ((Math.random() * imgCT3))
randomNum4 = Math.floor ((Math.random() * imgCT4))
randomNum5 = Math.floor ((Math.random() * imgCT5))
document.deal1.src = deals1[randomNum1]
document.deal2.src = deals2[randomNum2]
document.deal3.src = deals3[randomNum3]
document.deal4.src = deals4[randomNum4]
document.deal5.src = deals5[randomNum5]
}
}
This creates a function called randomize that gets called when the page referencing the script loads. It first checks that the browser understands images using the if statement, and provided it does, creates five variables, each containing a random number that is generated using the ((Math.random() * imgCT1)) syntax. The .random property of the math object generates a number between nothing and one, which we then multiply by the relevant imgCT value. The .floor property ensues that the value obtained using the random number is a whole number by rounding the value down to the next whole number. So, if the random number generated is 0.3, you multiply this by 5 (the value of imgCT1) and the random number will be 1.5. We can’t access the index 1.5 from our array because it doesn’t exist, so the floor method rounds this down to 1. The function then sets the src element of the image holder onto the Web page (which we’ll come to in a minute) called deal1 with one of the array indices.
Next: Associating Images and Links >>
More JavaScript Articles
More By Dan Wellman
