O
ne application of the combination of JavaScript and images is to load a ran-dom image in a location on the page rather than the same image every time.You can apply this to presenting random banner ads that link to the appropriate site for the ad. To do this you need to use JavaScript to specify both the location of the images and URLs associated with the images. With this data you can select one at random and display it.
The script created in the following steps illustrates this process:
1. Create a script block with opening and closing scripttags; the script block should be in the body of your HTML document where you want the image to be displayed:
<script language=”JavaScript”>
</script>
2. In the script, create an array named imageList: var imageList = new Array;
3. Create an entry in the array for each banner’s image you want to make available for random selection. For instance, if you have four images, assign the path and names of those images to the first four entries in the array:
imageList[0] = “banner1.jpg”;
imageList[1] = “banner2.jpg”;
imageList[2] = “banner3.jpg”;
imageList[3] = “banner4.jpg”;
4. Create another array to hold the URLs for each banner. The indexes in this array should correspond to the imageListarray:
var urlList = new Array;
urlList[0] = “http://some.host/”;
urlList[1] = “http://another.host/”;
urlList[2] = “http://somewhere.else/”;
urlList[3] = “http://right.here/”;
5. Create a variable named imageChoice: var imageChoice;
6. Assign a random number to imageChoiceusing the Math.random method, which returns a random number from 0 to 1 (that is, the number will be greater than or equal to 0 but less than 1):
var imageChoice = Math.random();
7. Extend the expression assigned to imageChoiceby multiplying the random number by the number of entries in the imageListarray to produce a number greater than or equal to 0 but less than 4:
var imageChoice = Math.random() * imageList.length;
notes
•
Each slot in an array is numbered; numbering starts at zero. This means an array with four entries has entries numbered 0 to 3.•
The Mathobject provides a number of useful meth-ods for working with num-bers and mathematical operations.•
The lengthproperty of an Arrayobject provides the number of entries in an array. That means if an array has four entries num-bered 0 to 3, then the lengthproperty of that array has a value of 4.•
Math.floorfunction similar to roundingperforms a in that it removes the deci-mal part of a number. The difference is that the result of rounding can be the next highest or next lowest inte-ger value, depending on the size of the decimal por-tion of the number. With Math.floorthe result is always the next lowest inte-ger. Therefore, rounding 2.999 would result in the integer 3. but applying Math.floorto the same number would result in the integer 2.•
Notice how the output is built out of multiple strings combined with an array variable; the combining is done with plus signs. When you are working with string values, plus signs perform concatenation of strings, as discussed in Task 15.Concatenation means that “ab”+ “cd”results in “abcd”.
Task 77
Extend the expression assigned to further by remov-ing any part after the decimal point with the Math.floormethod;
the result is an integer from 0 to one less than the number of entries in the array—in this case that means an integer from 0 to 3:
var imageChoice = Math.floor(Math.random() * Æ imageList.length);
9. Use the document.writemethod to place an imgtag surrounded by an a tag in the HTML data stream sent to the browser. As the value of the srcattribute of imgtag, the random image is specified as imageList[imageChoice], and as the value of the href attribute of the atag, use urlList[imageChoice]. The final script looks Listing 77-1.
<script language=”JavaScript”>
var imageList = new Array;
imageList[0] = “image1.jpg”;
imageList[1] = “image2.jpg”;
imageList[2] = “image3.jpg”;
imageList[3] = “image4.jpg”;
var urlList = new Array;
urlList[0] = “http://some.host/”;
urlList[1] = “http://another.host/”;
urlList[2] = “http://somewhere.else/”;
urlList[3] = “http://right.here/”;
var imageChoice = Math.floor(Math.random() * Æ imageList.length);
document.write(‘<a href=”’ + urlList[imageChoice] + Æ
‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);
</script>
Listing 77-1: Displaying a random banner ad.
10. Save the code in an HTML file, and display the file in a browser.
A random banner is displayed. Reloading the file should result in a different banner (although there is always a small chance the same random number will be selected twice in a row).
Task 77
cross-references
•
An array is a data type that contains multiple, num-bered slots into which you can place any value. See Task 20 for a discussion of arrays.•
The document.write method is introduced in Task 45. It allows JavaScript code to generate output that forms part of the HTML rendered by the browser.Part 4: Working with Forms
Task 78: Preparing Your Forms for JavaScript Task 79: Accessing Text Field Contents Task 80: Dynamically Updating Text Fields Task 81: Detecting Changes in Text Fields Task 82: Accessing Selection Lists
Task 83: Programmatically Populating a Selection List Task 84: Dynamically Changing Selection List Content Task 85: Detecting Selections in Selection Lists
Task 86: Updating One Selection List Based on Selection in Another Task 87: Using Radio Buttons instead of Selection Lists
Task 88: Detecting the Selected Radio Button Task 89: Detecting Change of Radio Button Selection Task 90: Updating or Changing Radio Button Selection Task 91: Creating Check Boxes
Task 92: Detecting Check Box Selections Task 93: Changing Check Box Selections
Task 94: Detecting Changes in Check Box Selections Task 95: Verifying Form Fields in JavaScript
Task 96: Using the onSubmitAttribute of the FormTag to Verify Form Fields
Task 97: Verifying Form Fields Using INPUT TYPE=”button”Instead of TYPE=”submit”
Task 98: Validating E-mail Addresses Task 99: Validating Zip Codes Task 100: Validating Phone Numbers Task 101: Validating Credit Card Numbers Task 102: Validating Selection List Choices Task 103: Validating Radio Button Selections Task 104: Validating Check Box Selections Task 105: Validating Passwords
Task 106: Validating Phone Numbers with Regular Expressions Task 107: Creating Multiple Form Submission Buttons using INPUT
TYPE=”button”Buttons
Task 108: Reacting to Mouse Clicks on Buttons Task 109: Using Graphical Buttons in JavaScript Task 110: Controlling the Form Submission URL
Task 111: Validating a Numeric Text Field with Regular Expressions Task 112: Encrypting Data before Submitting It
Task 113: Using Forms for Automatic Navigation Jumping