Some Processing with Internal Built In Arrays

 

Built In Arrays.  As we've talked about things like frame or image objects that enumerate and specify the frames in a window I have assumed you have seen arrays before.  In general, arrays are data structures that store multiple values of the same data type that can be accessed at some location based on some numbering system.  Arrays are much simpler than tables in databases in that all of the data must be of the same type.

You could have a single dimensional array from 0 to 9 that lists the major planets in the solar system.  You could then augment this to a two dimensional array by associating each planet with its major orbiting moons.  You could then augment this even more to a third dimension by considering the orbiting artificial satellites.  In the end, all of the items in this array are text for names.  The numbering scheme would need to be specified, but hopefully you already have enough experience with arrays so that I don't need to talk about this more.

Because of the nature of arrays it is common to use loops to work with them.  This is one of the main reasons that Thau! has put them together in a chapter.  We have now talked about loops, now we will talk more about arrays.  We will start with some of the built-in arrays that JavaScript uses to interact with webpages.  The main one I want to work with is the array that contains all the images in a page.

First you need to copy these images.

 

Name Image
TNBinoculars.jpg
TNBowAndArrow.jpg
TNHarpoon.jpg
TNKnife.jpg
TNMagnet.jpg
TNMotorcycle.jpg
TNRocket.jpg
TNSpeedboat.jpg
TNTrapeze.jpg
SilverBrush.jpg

 

You should copy the following code and put it in a file called Products.html.

 

<html>

<head>
<title>ACMECorp Products Page</title>
</head>

<body background="images/SilverBrush.jpg">
<p>&nbsp;</p>
<p align="center"><font face="AvantGarde Md BT" size="6" color="#600060"><b>Products</b></font></p>
<div align="center">
<center>
<table border="0" cellpadding="8" cellspacing="4" width="657">
<tr>
<td align="right" width="211"><a href="prodBinos.htm" target="_blank">
<img border="0" src="images/TNBinoculars.jpg" width="150" height="119" name="TNBinoculars.jpg"></a></td>
<td width="431"><b><font face="AvantGarde Md BT" size="4" color="#000060">Binoculars</font></b></td>
<td width="168"></td>
</tr>
<tr>
<td align="right" width="211"></td>
</center>
<td width="431">
<p align="right"><b><font face="AvantGarde Md BT" size="4" color="#000060">Bow</font></b></p>
</td>
<center>
<td width="168"><a href="prodBow.htm" target="_blank">
<img border="0" src="images/TNBowAndArrow.jpg" width="150" height="95" name="TNBowAndArrow.jpg"></a></td>
</tr>
<tr>
<td align="right" width="211"><a href="prodHarpoon.htm" target="_blank">
<img border="0" src="images/TNHarpoon.jpg" width="150" height="77" name="TNHarpoon.jpg"></a></td>
<td width="431"><b><font face="AvantGarde Md BT" size="4" color="#000060">Harpoon</font></b></td>
<td width="168"></td>
</tr>
<tr>
<td align="right" width="211"></td>
</center>
<td width="431">
<p align="right"><b><font face="AvantGarde Md BT" size="4" color="#000060">Knife</font></b></td>
<center>
<td width="168"><a href="prodKnife.htm" target="_blank">
<img border="0" src="images/TNKnife.jpg" width="150" height="92" name="TNKnife.jpg"></a></td>
</tr>
<tr>
<td align="right" width="211"><a href="prodMagnet.htm" target="_blank">
<img border="0" src="images/TNMagnet.jpg" width="150" height="113" name="TNMagnet.jpg"></a></td>
<td width="431"><b><font face="AvantGarde Md BT" size="4" color="#000060">Magnet</font></b></td>
<td width="168"></td>
</tr>
<tr>
<td align="right" width="211"></td>
</center>
<td width="431">
<p align="right"><b><font face="AvantGarde Md BT" size="4" color="#000060">Motorcycle</font></b></td>
<center>
<td width="168"><a href="prodMoto.htm" target="_blank">
<img border="0" src="images/TNMotorcycle.jpg" width="150" height="94" name="TNMotorcycle.jpg"></a></td>
</tr>
<tr>
<td align="right" width="211"><a href="prodRocket.htm" target="_blank">
<img border="0" src="images/TNRocket.jpg" width="150" height="145" name="TNRocket.jpg"></a></td>
<td width="431"><b><font face="AvantGarde Md BT" size="4" color="#000060">Rocket</font></b></td>
<td width="168"></td>
</tr>
<tr>
<td align="right" width="211"></td>
<td width="431">
<p align="right"><b><font face="AvantGarde Md BT" size="4" color="#000060">Speedboat</font></b></td>
<center>
<td width="168"><a href="prodSpeedboat.htm" target="_blank">
<img border="0" src="images/TNSpeedboat.jpg" width="150" height="84" name="TNSpeedboat.jpg"></a></td>
</tr>
<tr>
<td align="right" width="211"><a href="prodTrapeze.htm" target="_blank">
<img border="0" src="images/TNTrapeze.jpg" width="150" height="125" name="TNTrapeze.jpg"></a></td>
<td width="431"><b><font face="AvantGarde Md BT" size="4" color="#000060">Trapeze</font></b></td>
<td width="168"></td>
</tr>
</table>
</center>
</div>
<p align="center">&nbsp;</p>
<script language="JavaScript">
var number_images = window.document.images.length;

window.document.write("<center><P><font size=4 color='990099'><b>There are " + number_images + " images on this page.</b></font></P></center>");
window.document.write("<center><BR><font size=5 color='0000aa'><b>Their names are:</b></font></center><ul>");

for( var i=0; i < number_images; i++)
{

window.document.write("<center><li><font size=4 color='0000aa'><b>" + window.document.images[i].name + "</b></font></center>");

}

window.document.write("</ul>");

</script>


</body>
</html>

 

When this is uploaded you should get something like the following.

 

 

The code
  • displays the images in a table
  • counts the images
  • lists them out

The code associated with displaying the number of images and their names is

<script language="JavaScript">
var number_images = window.document.images.length;

window.document.write("<center><P><font size=4 color='990099'><b>There are " + number_images + " images on this page.</b></font></P></center>");
window.document.write("<center><BR><font size=5 color='0000aa'><b>Their names are:</b></font></center><ul>");

for( var i=0; i < number_images; i++)
{

window.document.write("<center><li><font size=4 color='0000aa'><b>" + window.document.images[i].name + "</b></font></center>");

}

window.document.write("</ul>");

</script>

The first section gets the number_images and then uses window.document.write commands to display them.  The loop displays the name making use of the name properties of the images array.  In order for this to work, the images must all have assigned name="someName" in the HTML tag for the image.