Home arrow JavaScript arrow Page 5 - 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 - What to Put into the HTML
(Page 5 of 5 )

Since this is an article about JavaScript, I wonít go into the HTML at all, but I will highlight what needs to go into the HTML and where it needs to go:

<html>

<head>

<title>Hotdeals</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="randomiser.js">

</script>

</head>

<body onLoad="randomize()" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="233" height="418" border="0" cellpadding="0" cellspacing="0">

 <tr>

   <td colspan="5">

     <img src="images/hotdeals_01.gif" width="233" height="100" alt=""></td>

 </tr>

 <tr>

   <td colspan="2" rowspan="8">

     <img src="images/hotdeals_02.gif" width="31" height="273" alt=""></td>

   <td colspan="2">

     <a href="javascript:newLocation1()" onMouseover="document.deal1.src=dealsover1[randomNum1]" onMouseout="document.deal1.src=deals1[randomNum1]"><img border="0" src="images/spacer.gif" name="deal1" width="171" height="24" alt=""></a></td>

   <td rowspan="10">

     <img src="images/hotdeals_04.gif" width="31" height="317" alt=""></td>

 </tr>

 <tr>

   <td colspan="2">

     <img src="images/hotdeals_05.gif" width="171" height="47" alt=""></td>

 </tr>

 <tr>

   <td colspan="2">

   <a href="javascript:newLocation2()" onMouseover="document.deal2.src=dealsover2[randomNum2]" onMouseout="document.deal2.src=deals2[randomNum2]"><img border="0" src="images/spacer.gif" name="deal2" width="171" height="24" alt=""></a></td>

 </tr>

 <tr>

   <td colspan="2">

     <img src="images/hotdeals_07.gif" width="171" height="43" alt=""></td>

 </tr>

 <tr>

   <td colspan="2">

     <a href="javascript:newLocation3()" onMouseover="document.deal3.src=dealsover3[randomNum3]" onMouseout="document.deal3.src=deals3[randomNum3]"><img border="0" src="images/spacer.gif" name="deal3" width="171" height="24" alt=""></a></td>

 </tr>

 <tr>

   <td colspan="2">

     <img src="images/hotdeals_09.gif" width="171" height="44" alt=""></td>

 </tr>

 <tr>

   <td colspan="2">

     <a href="javascript:newLocation4()" onMouseover="document.deal4.src=dealsover4[randomNum4]" onMouseout="document.deal4.src=deals4[randomNum4]"><img border="0" src="images/spacer.gif" name="deal4" width="171" height="22" alt=""></a></td>

 </tr>

 <tr>

   <td colspan="2">

     <img src="images/hotdeals_11.gif" width="171" height="45" alt=""></td>

 </tr>

 <tr>

   <td rowspan="2">

     <img src="images/hotdeals_12.gif" width="29" height="44" alt=""></td>

   <td colspan="2">

     <a href="javascript:newLocation5()" onMouseover="document.deal5.src=dealsover5[randomNum5]" onMouseout="document.deal5.src=deals5[randomNum5]"><img border="0" src="images/spacer.gif" name="deal5" width="171" height="22" alt=""></a></td>

   <td rowspan="2">

     <img src="images/hotdeals_14.gif" width="2" height="44" alt=""></td>

 </tr>

 <tr>

   <td colspan="2">

     <img src="images/hotdeals_15.gif" width="171" height="25" alt=""></td>

 </tr>

 <tr>

   <td>

     <img src="images/spacer.gif" width="29" height="1" alt=""></td>

   <td>

     <img src="images/spacer.gif" width="2" height="1" alt=""></td>

   <td>

     <img src="images/spacer.gif" width="169" height="1" alt=""></td>

   <td>

     <img src="images/spacer.gif" width="2" height="1" alt=""></td>

   <td>

     <img src="images/spacer.gif" width="31" height="1" alt=""></td>

 </tr>

</table>

</body>

</html>

 

The first highlighted code segment simply calls the function that generates the random images. Each of the other code blocks has three primary jobs: to set an image with the name value that was set in the script file (deal1, deal2, and so on), to include onMouseOver and onMouseOut statements to handle the roll-overs and to include a <a> tag wrapper that calls the relevant link function. Download the graphics and the htm files included, and you can see the page working. If youíre learning JavaScript at the moment, itís probably best if you type out at least the .js file yourself, because doing this will help cement the knowledge in place.

The page and the script file will work in MS IE6, Netscape 7 and Firefox, so if you need to actually use this on a website, you can be sure that it will reach and function for a wide range of users. It is purely client-side, which has its good and bad points, and JavaScript must be enabled in the browser for it to work, although itís very easy to include a <noscript> tag to counteract its being switched off.

If this is purely a learning experience for you, I hope that this has proven to be a helpful guide to the usefulness of JavaScript arrays.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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