Home arrow JavaScript arrow Page 3 - JavaScript Arrays
JAVASCRIPT

JavaScript Arrays


Arrays in JavaScript are extremely useful for storing and manipulating information you have coded directly into the script, or information collected from the browser. In this article, Dan Wellman details how to use and manipulate them.

Author Info:
By: Dan Wellman
Rating: 3 stars3 stars3 stars3 stars3 stars / 128
May 25, 2005
TABLE OF CONTENTS:
  1. · JavaScript Arrays
  2. · Multidimensional Arrays and Use
  3. · Beginning Code
  4. · Associating Images and Links
  5. · What to Put into the HTML

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials