HTML and CSS Reference
In-Depth Information
Creating a random image generator with a user-defined function.
A random image generator will display a new image in the image placeholder every time
the Web page is loaded. To create a user-defined function to display random images, the
following steps and programming logic must be followed.
Determine the location for an image object
Plan
Ahead
•
•
Determine the image to be used as the default image
•
Make sure each image is as close to the same size as possible
•
1. Define a list of images in an array object making the first element blank or null
2. Determine the maximum random number size by subtracting 1 from the array length
3. Use the Math.ceil() and Math.random() methods to create the random number
4. Assign the array value using the random number as a subscript to the image placeholder
5. Add the onLoad event handler to the <body> tag to invoke the user-defined function
when the Web page is loaded
In the Home Web page, the first element in the array is blank or null because it is
element zero, and the Math.ceil() method will never return a zero with the Math.random()
method. Thus, that image would never be used or displayed.
Write the user-defined JavaScript function using the following logic:
Creating the User-Defined Function Random
Number Generator
The first step in creating the random image on the Home Web page is to create
a list in which to store the filenames of the images that will be selected by the random
number generator: chapter11-1b_bee3.jpg, chapter11-1blackant.jpg, chapter11-1deer.jpg,
chapter11-1dragonfly1.jpg, chapter11-1gray_squirrel.jpg, and chapter11-1monarch.jpg.
(These files can be found in the Data Files for Students.) JavaScript, like other programming
languages, uses a data structure called an array to work with lists of data. An
array
is a
collection of data items, represented by one variable name. This variable is called the
array
name
. Each of the individual data items is called an element, and a subscript references
the individual data items in the array. A
subscript
is a number that designates a single
occurrence of an array element.
Arrays are built-in objects. To create an array and fill that array with data, create an
object instance of the Array object. Recall from Chapter 9 that an
object instance
is a
new JavaScript object created from a built-in object. Table 11-7 shows the general form
for creating an array object instance from the Array object.
Arrays
JavaScript arrays are
not a fixed length like
in other programming
languages. New elements
can be added to the
array without having to
redefine the structure.
Remember, also, that
JavaScript is a loosely
typed language and does
not require variables to be
declared as a data type.
Thus, you can store string,
numeric, or Boolean values
to the same array.
Table 11-7 Create an Array
General form:
var myarrayname=new Array()
Comment:
where
Array
is a built-in object and the
new
command creates a new object instance of the
array. Data items may fill an array in one of two ways: (1) by placing the data directly in the
array object; or (2) by assigning the items separately.
Examples:
var randomImage = new Array (“”, “chapter11-1b_bee3.jpg”, “chapter11-1blackant.jpg”,
“chapter11-1deer.jpg”,”chapter11-1dragonfly1.jpg”)
or
var randomImage=new Array()
randomImage[0]=””
randomImage[1]=”chapter11-1b_bee3.jpg”
randomImage[2]=”chapter11-1blackant.jpg”
randomImage[3]=”chapter11-1deer.jpg”
randomImage[4]=”chapter11-1dragonfly1.jpg”
