PageResource.com - Web Development Tutorials

Getting Random

Get random numbers, quotes, etc.

The random() method function of the Math object allows you to get random numbers for various uses in your scripts. You can make a random quote generator or have another type of random script. The only trick is knowing how to get a random number within the boundary you want, and making it a random integer.

By default, the random function returns a random number between zero and 1. This by itself isn't very useful. Click the button below, and notice that the number in the alert is a long random number after the decimal point:

In that state, you can't really do anything with the number. We want to have an integer between zero and a set number. The first step to fixing this is using multiplication. If you want a number between zero and 4 (5 random numbers), multiply the result of the Math.random() function by 5:

var ran_number= Math.random()*5;

Now, the numbers you get will be between zero and 4- but they still will not be integers. Try the button below and see:

We need these to be integers so we can have just the five random numbers between zero and 4. The next step will finish the job of getting the random number. To clean up those decimals and get just the integers, we use the Math.floor() function (which removes anything after the decimal and leaves the integer portion of the number) for the result. The quickest way to implement this is to place the Math.random()*5 inside the Math.floor() function as its parameter:

var ran_number=Math.floor(Math.random()*5);

You can also use two steps if it seems to make more sense:

var ran_unrounded=Math.random()*5;
var ran_number=Math.floor(ran_unrounded);

Now, try this button. You'll see a nice looking integer between zero and 4:

Now, you may be wondering why we want the number between 0 and 4, rather than 1 and 5. When we are ready to make a script that uses this, an array is a handy way of getting to a value. Arrays start counting with an index number of 0, such as:

array_name[0];

Keeping the random numbers in line with the array numbers will save some headaches as to when you should add or subtract the number one to get it working.

Now, let's build a little random quote script that will give the viewer an alert with a random quote on a button click. We already know how to get the random number, we just need to use an array to store some quotes- and make use of them with the random numbers. We'll use 5 random quotes, so we need 5 random numbers. This will keep us with our "between zero and 4" theme. Let's begin by creating a function, and setting up a variable to get a random number:

function get_random()
{
    var ranNum= Math.floor(Math.random()*5);
    return ranNum;
}

This function will simply return a random number between zero and 4. Our next function will call this function and assign the returned number to a variable named whichQuote: this will be the variable we use to get the proper quote from the array we will define. So, let's also define an array here, and set it up with five quotes:

function getaQuote()
{
   var whichQuote=get_random();

    var quote=new Array(5)
     quote[0]="I love JavaScript..sometimes.";
     quote[1]="Why are you pushing my button?";
     quote[2]="The button you pushed can\'t push you back. You bully, you!";   
     quote[3]="This alert is here to inform you that alerts are annoying.";
     quote[4]="Which came first, the button or the alert?";
  
   alert(quote[whichQuote]);
  }

As you can see, the last line of the function gives the user the alert. The value of the alert is the quote stored in the quote array:

quote[whichQuote]

Remember, the whichQuote variable was assigned a random number between zero and 4 from the get_random() function. So, if the value of whichQuote is 3, you get an alert with the quote from the array at quote[3]. Each time the button is clicked, it is all run again and will assign it another random number.

As for the button, here is how to code it into the body section:

<FORM name="form1">
<INPUT TYPE="button" value="Get a Quote!" onClick="getaQuote()">
</FORM>   

Notice that it calls the getaQuote() function when it is clicked. This gets everything started.

To put it all together, here is the entire script. We can now see how it all works within the document:

<HEAD>
 <SCRIPT language="JavaScript">
<!--
function get_random()
{
    var ranNum= Math.floor(Math.random()*5);
    return ranNum;
}

function getaQuote()
{
   var whichQuote=get_random();

    var quote=new Array(5)
     quote[0]="I love JavaScript..sometimes.";
     quote[1]="Why are you pushing my button?";
     quote[2]="The button you pushed can\'t push you back. You bully, you!";   
     quote[3]="This alert is here to inform you that alerts are annoying.";
     quote[4]="Which came first, the button or the alert?";
  
   alert(quote[whichQuote]);
  }
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM name="form1">
<INPUT TYPE="button" value="Get a Quote!" onClick="getaQuote()">
</FORM>   
</BODY>

Now, if you want to try out the script go ahead and click the button below:

You can also use more quotes by making the array larger and adjusting the number you multiply with the Math.random() function. You can turn the random quote script into a script with many more quotes. Just remember that if you want 10 random numbers, multiply by 10. If you want 20: multiply by 20. This will keep your arrays happy, and it will probably keep you happy as well!

Well, that does it for now, let's move on to: Strings with charAt and indexOf.

previous
Previous
By: John Pollock next
Next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy