| The only problem with the preceding example is that you need to keep adding if tests for each new link that you want to include in your list of favorites. To get around this difficulty, and to streamline the appearance of the script considerably, there's a JavaScript mechanism that enables you to create lists of variablesor arrays. An array is a list of values associated with a single variable. For example, an array called mylinks[] can contain a list of all the links used by the picklink() function. The value of each link in the list is then referenced by a numeric value inside the square brackets, starting with 0: The first variable can be found with mylinks[0], the second with mylinks[1], and so on. Before you can use an array, you must first construct it. The easiest way to do this is to just make an empty array by calling the Array constructor with no argument, like this: mylinks = new Array();
You can then populate each of the elements individually: mylinks[0] = "http://www.netscape.com/"; mylinks[1] = "http://www.lne.com/Web/"; mylinks[2] = "http://java.sun.com/"; mylinks[3] = "http://www.realaudio.com/"; mylinks[4] = "http://www.worlds.com/";
The elements of the array are created automatically when they're referenced. When the array is constructed, it contains no elements. You add five elements when you reference them by assigning values to them. Let's look at what happens when you skip some indexes when assigning elements in an array: mylinks = new Array() mylinks[0] = "http://www.netscape.com/"; mylinks[4] = "http://www.worlds.com/";
This array still contains five elementsthe elements with indexes of 1, 2, and 3 are just empty. The size of an array is dictated by the highest index referenced in that array, regardless of whether you've referenced all the indexes before the highest index. You can skip the step of assigning each of the array indexes individually by simply passing a list of elements to the array constructor when you call it, like this: mylinks = new Array("http://www.netscape.com/", "http://www.lne.com/Web/", "http://java.sun.com/", "http://www.realaudio.com/", "http://www.worlds.com/");
When you use this method of construction, the mylinks array is prepopulated with the five elements that you passed to the Array() constructor as arguments. You can then fill the mylinks array with values by assigning them as you would any other variable. For example, in Exercise 13.2, you can add code to the <script> section that creates an array with the number of links and then stores those link names into that array. Here's an example of an array with five elements, with a URL assigned to each: mylinks = new Array("http://www.netscape.com/", "http://www.lne.com/Web/", "http://java.sun.com/", "http://www.realaudio.com/", "http://www.worlds.com/");
With a list of URLs defined, you can modify the original picklink() function so that it selects a link by choosing from those included in the array instead of by using a number of if tests. The following is the new code for picklink(): function picklink() { var linkselect = Math.floor(Math.random() * mylinks.length); return (mylinks[linkselect]); }
As you can see, this function is much smaller than it was previously. Obviously, the fact that we moved the list of URLs out of the function helped, but we economized in other ways as well. Arrays have a property called length that contains the number of elements in the array. Instead of creating a variable called linknumber and manually entering the number of links available, we just grab the size of the array and plug that into the random number generator. Because the size of the array is 5 and the elements are numbered 0 through 4, we don't need to add 1 to the random number that we generate to get things to work properly. When I've got a random number, I return the array element with that number as its index. We can also consolidate the picklink() function further by removing all the work variables and performing all the math inside the return statement, like this: function picklink() { return mylinks[(Math.floor(Math.random) * mylinks.length))]; }
The Completed Random Link Script with an Array The following code shows the final version of the script, which incorporates all the changes we've made in this exercise, including the MakeArray() constructor function, the creation of the array of links, and the modifications to picklink(). <html> <head> <title>Random Link Generator</title> <script language="JavaScript"> var mylinks = new Array("http://www.netscape.com/", "http://www.lne.com/Web/", "http://java.sun.com/", "http://www.realaudio.com/", "http://www.worlds.com/"); function picklink() { var linkselect = Math.floor(Math.random() * mylinks.length); return (mylinks[linkselect]); } </script> </head> <body> <h1>My random link generator</h1> <p>Visit a <a href="dummy.html" onClick="this.href=picklink()">randomly selected</a> site from my list of favorites.</p> </body> </html
| 
