Random Text and Image Display with JavaScript, Part 1
This is Part One of what will be a Three Part JavaScript Tutorial. So let's begin with Part One.
This little JavaScript tip involves randomly displaying a text string from a list. And this is how we shall be going about it:
- Create a new array and store the list of text strings in it
- Use the JavaScript Math.random() method to obtain a random number
- Convert the random number into an integer because the random() method throws a floating point (decimal) number between 0.0 and 1.0
- Get the array element corresponding to the randomly generated integer.
- Display the text string using document.write() or the JavaScript alert().
Creating the array that stores the text strings
Remember, JavaScript arrays are zero indexed (the first element of an array in JavaScript has an index of 0). Our array r_text consists of seven elements. We, thus, need an integer between 0 and 6.var r_text = new Array (); r_text[0] = "All the leaves are brown"; r_text[1] = "And the sky is grey"; r_text[2] = "I've been for a walk"; r_text[3] = "On a winter's day"; r_text[4] = "I'd be safe and warm"; r_text[5] = "If I was in L.A."; r_text[6] = "California dreaming, On such a winter's day";
Generating a random number
The variable i now contains a floating point (decimal) number between 0 and 1. We have to convert it to an integer between 0 to 6 so that it can be used as an index to retrieve the string from the r_text array.var i = Math.random();
We multiply the random floating point number (whose value is between 0.0 and 1.0) by 7 so that we get a number (again a floating point) that ranges from 0.0 to 7.0. The Math.floor() is used to round down this number. Thus, 0.345... would result in 0 and 6.893.. would befloored to 6. The above three JavaScript statements can actually be combined into one:i = 7 * i; i = Math.floor(i);
var i = Math.floor(7*Math.random())
Displaying the text
The final step is to display the text through document.write() method.We now place all this code between <script>-</script> tags.document.write(r_text[i]);
You can also pack all this code in an external JavaScript file that is called from your web page. I would suggest that, unless its absolutely necessary, you should segregate all JavaScript code into an external file. This way you need to maintain only one file.<script language="JavaScript"> <!-- var r_text = new Array (); r_text[0] = "All the leaves are brown"; r_text[1] = "And the sky is grey"; r_text[2] = "I've been for a walk"; r_text[3] = "On a winter's day"; r_text[4] = "I'd be safe and warm"; r_text[5] = "If I was in L.A."; r_text[6] = "California dreaming, On such a winter's day"; var i = Math.floor(7*Math.random()) document.write(r_text[i]); //--> </script>
When can you use this nice tip?
In the past, I have displayed a random quote or a randomly selected a testimonial on the web page. And this is how I go about it. Most of my JavaScript code is placed in an external file (.js) that is called from desired web pages. I put all the testimonials or quotes that I want to display, in an array and then use the code above to have one displayed on the web page. And I can change this array to have a new set of testimonials or quotes, (which involves modifying only one file) and all web page are changed without additional effort.About the Author Kyle Reddoch is a Web Development Expert and Internet Guru located in Amarillo, TX. To learn more about him, you can visit his site at KyleReddoch.com.
