Displaying a Random Quote | Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

I'm a sucker for a good quote. If you're the same way, you may find it fun to incorporate an ever-changing quote into your web pages. If quotes aren't your thing, maybe you have some other collection of text that you find interesting enough to include in your pages. The point is that you can use JavaScript to display a different piece of text each time a page is loaded.

To create a page with a quote that changes each time the page is loaded, you must first gather all the quotes together, along with their respective sources. You'll then place these quotes into a JavaScript array, which is a special script storage unit that is handy for holding lists of items. After the quotes are loaded into an array, the script code to pluck out a quote at random is fairly simple.

Listing 17.4 contains the complete HTML and JavaScript code for a web page that displays a random quote each time it is loaded.

Listing 17.4. A Random-Quote Web Page

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Quotable Quotes</title>   <script type="text/javascript">     <!-- Hide the script from old browsers     function getQuote() {       // Create the arrays       quotes = new Array(4);       sources = new Array(4);       // Initialize the arrays with quotes       quotes[0] = "When I was a boy of 14, my father was so ignorant..." +       "but when I got to be 21, I was astonished at how much he had learned " +       "in 7 years.";       sources[0] = "Mark Twain";       quotes[1] = "Everybody is ignorant. Only on different subjects.";       sources[1] = "Will Rogers";       quotes[2] = "They say such nice things about people at their funerals " +       "that it makes me sad that I'm going to miss mine by just a few days.";       sources[2] = "Garrison Keilor";       quotes[3] = "What's another word for thesaurus?";       sources[3] = "Steven Wright";       // Get a random index into the arrays       i = Math.floor(Math.random() * quotes.length);       // Write out the quote as HTML       document.write("<dl style='background-color:#EEEEEE'>\n");       document.write("<dt>" + "\"<i>" + quotes[i] + "</i>\"\n");       document.write("<dd>" + "- " + sources[i] + "\n");       document.write("<dl>\n");     }     // Stop hiding the script -->   </script>   </head>   <body>     <h1>Quotable Quotes</h1>     <p>       Following is a random quotable quote. To see a new quote just reload this       page.     </p>     <script type="text/javascript">       <!-- Hide the script from old browsers       getQuote();       // Stop hiding the script -->     </script>   </body> </html>

Although this code looks kind of long, if you look carefully you'll see that a lot of it consists of the four quotes available for display on the page. After you get past the shock of the code size, the script code for the page isn't too terribly complex.

After creating an array, or list, of quotes and their sources, the getQuote() script function picks a random number and uses it to select a quote to be displayed. The quote is formatted on the page by the HTML code that is generated by the getQuote() function. The standard JavaScript document.write() function is used to generate the HTML code that formats the quote. This script function is powerful because by using it, you can dynamically generate HTML code at any point in a web page.

Figure 17.7 shows the Quotable Quotes sample web page as it appears in Opera. To view a different quote, just click the Refresh button in your web browser, and the page reloads.

Figure 17.7. The Quotable Quotes web page displays a random quote each time it is loaded.

Keep in mind that you can easily modify this page to include your own quotes or other text that you want to display randomly. You can also increase the number of quotes available for display by adding more entries in the quotes and sources arrays in the code. I realize that some of this script code might be intimidating. Just understand that the best way to learn how to use JavaScript is to take something that works and experiment with making modifications to it.

If you use the Quotable Quotes page as a starting point, I guarantee you will be able to alter the script and create your own interesting variation on the idea without much trouble. And if you make mistakes along the way, so be it. The trick to getting past mistakes in script code is to be patient and carefully analyze the code you've entered. You can always remove code to simplify a script until you get it working, and then add new code one piece at a time to make sure that each piece works.