| Random Quotes
Let's say you have a bunch of really cool, famous quotations that you want to include on your website, but putting them all on there makes it seem really cluttered. It would be better if you could just pick one of the quotes, but you're not sure which to pick. Well, pick them all and have them randomly change. Here's how...
Again, in the head of your document, you will need to set up a script containing the different quotes you want to use. You will be placing the quotes in an array. An array is another variable in which you can store information. However, a variable will only let you store one chunk of information. Unlike a variable, an array has an infinite number of spaces you can place information. You access the different spaces in the array by referring to a particular number, like this:
array[0] = 0;
array[1] = 1;
array[2] = 4;
array[3] = 9;
Notice the array starts with space 0; this is always the first space in the array, so don't forget to count this one when making calculations. So let's make an array with some cool quotes in it. Here's the head of your HTML document would look like with this script included:
<head>
<title>Cool Quotes</title>
<script language="JavaScript">
var quotes = new Array();
quotes[0] = "All epoch-making revolutionary events have been produced not by the written but the spoken word. - Adolf Hitler";
quotes[1] = "What good fortune for those in power that people do not think. - Adolf Hitler";
quotes[2] = "The unexamined life is not worth living. - Socrates";
quotes[3] = "I invented the Internet. - Al Gore";
var quotechoice = Math.round((quotes.length-1) * Math.random());
</script>
</head>
|
Here is a basic breakdown of what each part means:
- new—creates an empty object for storing information; in this case, that object is an array
- Array()—declares the new object as an array; the empty parentheses show that the array is currently empty
- quotes[0]—the first space in the array; quotes[1] is the second space; quotes[2] is the third; quotes[3], the fourth; you can have as many spaces as you like, but keep them sequential
- quotechoice—a variable that stores a random number, choosing the random quote
- Math—the math function controlls different types of numerical calculations, like rounding numbers or generating random numbers
- .round()—this rounds off the number generated in parentheses to a whole number, so we can use the number to reference a space in our array
- quotes—this is our array
- .length—this function tells us how long our array is
- -1—subtracting 1 ensures that our randomly generated number is between 0 and 3, since the actual length of the array is 4
- .random()—this generates a random number between 0.0 and 0.9999~; since it doesn't give us a whole number or a number within our array range, we have to multiply it by something, quotes.length-1
Now you have to find a place in your webpage to display the quote. Wherever you want your quote to be displayed in your HTML document, place the following code:
|
<script language="JavaScript">document.write(""" + quotes[quotechoice] + """);</script>
|
Here's what the above line of code means:
- quotes[quotechoice]—references the space in the array that is represented by the random number, quotechoice
- "—JavaScript uses double quotes to enclose HTML code that will be displayed on the webpage; when you are trying to display double quotes by using a JavaScript function, you have to use the " symbol to print out double quotes, or the browser will become confused when trying to read your script, and the script will not work
And you saw what the effects of this script at the top of this page. There's a 50-50 chance of hearing "words of wisdom" from Hitler...
|
Writing for the World Wide Web
Planning Site Navigation