Javascript Tutor
- Lesson 11
Arrays
An array is a group. An array is also an object and as an object, it has properties.
There are built in arrays, such as all the images on a page. Have a look at
this...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="Javascript"><!--
function ShowSource(position)
{
window.document.form01.input01.value = window.document.images[position].src;
}
function NumberofImages()
{
alert(window.document.images.length);
}
//--></SCRIPT>
</HEAD>
<BODY>
<CENTER>
<A HREF="" onMouseOver="ShowSource(0) "><IMG SRC="food_icons/beer.gif"
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(1) "><IMG SRC="food_icons/burger.gif"
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(2) "><IMG SRC="food_icons/butter.gif"
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(3) "><IMG SRC="food_icons/carrot.gif"
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(4) "><IMG SRC="food_icons/cheese.gif"
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(5) "><IMG SRC="food_icons/cherries.gif"
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<BR>
<A HREF="" onMouseOver="ShowSource(6) "><IMG SRC="food_icons/hotdog.gif"
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(7) "><IMG SRC="food_icons/icecream.gif"
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(8) "><IMG SRC="food_icons/lemon.gif"
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(9) "><IMG SRC="food_icons/pizza.gif"
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(10)"><IMG SRC="food_icons/salad.gif"
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(11)"><IMG SRC="food_icons/sammawich.gif"
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<FORM NAME="form01">
<INPUT TYPE="text" NAME="input01" VALUE=""
SIZE=70>
</FORM>
<A HREF="javascript:NumberofImages()">Click here</A> for
number of images on this page.
</CENTER>
</BODY>
</HTML>
Try it.
This demonstrates (more or less) the image array. The image array is an array
of all the images on a page: images[]. The browser isn't necessarily interested
in what the pictures are so it numbers them, starting with 0. The first image
is images[0], the second is images[1], the third is images[2], etc. The array
as a whole has properties, one of which is length. This is demonstrated in the
text link that throws up the number of images on the page. Each individual image
also has properties of its own, such as src (source). This is demonstrated by
the function ShowSource(). We pass the index number to the function and it displays
that image's source in the text box.
Understand that arrays can be a little confusing, so if it seems a little foggy,
that's normal. It will sink in soon.
Exercise: Alter the previous example so that there is just the images
on the page. When the user clicks on an image, an alert box pops up with something
like this...
You picked image indexed 3 out of 12 total images.
It's source is C:\path\path\burger.gif
Even though you know there are 12 total images on the page, I don't want you
to hard code "12" into the function. I want you to get that number
from the length property of the image array object.
Another property of individual images is the name property. In an image tag,
we can give an image a name like so...
<IMG SRC="mypic.gif" HEIGHT=32 WIDTH=32 NAME="img01">
We can then use it in a script (for example, to get that image's source)...
window.document.images['img01'].src
Notice that now we have two ways to specify a particular image in the image
array... by number, or by name. Study that idea until you understand it.
Exercise: Make a new web page using the 12 food icons. Give each image
a name. Make it so that when the user clicks on an image, an alert box pops
up with that image's source. Get the source by referencing the image by name,
not by index number.
Here is a solution.
We passed the image name to the function. The function then used it to determine
the source of that image. Keep studying the example until it's clear.