Generating random numbers using Javascript

Last updated on January 27, 2012. Tags: integer, math, random number, whole number

lottery globe One of the features of Javascript is its ability to generate random numbers using the function Math.random(). All random possible random numbers that can be generated using Javascript function and all the Javascript-based interactivity in a web page that relies on randomness will need to use this function one way or another.

The Math.random() function randomly generates a 16-digit decimal number between zero and one. It can be placed in the body section of the webpage (somewhere between <body> and </body> tags) using the following codes:

<script type="text/javascript">

x = Math.random();
document.write(x);

</script>

In this Javascript, the first line calls the function Math.random() and assign its randomly generated number to the variable x. The second line in turn displays what is this random number. The second line is not essential in most cases but you would need to use it from time-to-time to see if parts of your script are working properly.

See the iframe below to see how it works. To generate a new number, click the "regenerate" hyperlink.

Most of the time, we would not want some random 16-digit number between zero and one, but rather some whole numbers within specific range. One of the most common use of generating random numbers is that you would like to display random pictures, random quotes, random links or random ad banner; something that changes whenever the user refresh the web page. I will discuss those in the next two posts but for now, let's stick with random whole numbers.

To generate whole numbers, we need to tweak the random function a little. The code below allows us to generate any integer from 0 to any integer upper limit. I'm not sure what's the upper limit of number the Javascript can process but this function can still work in 16-digit whole number.

<script type="text/javascript">

function randomzero (n)
{
  return ( Math.floor ( Math.random ( )*0.9999999999999999* (n + 1)) );
}

x = randomzero(3);

document.write(x);

</script>

Here, we defined a function randomzero(n) which allows us to generate any whole number from zero to n, where n is going to be defined whenever the function is called. After defining this function, we called it to assign x any random whole number between zero and three (hence, n=3). Again, the last line allows us to see what number has been generated.

Suppose we want to generate whole numbers only within specific range of whole numbers without necessarily having zero as the lowest possible value. We could do that by copying the function randomzero(n) and modifying it a little. This is what we'll got.

<script type="text/javascript">

function randomrange (m,n)
{
  return ( Math.floor ( Math.random ( )*0.9999999999999999* (n - m + 1) + m) );
}

x = randomrange(2,5);

document.write(x);

</script>

Here, we modified randomzero(n) into randomrange(m,n), which can accomodate two possible whole numbers, m for the lowest possible number and n for the highest possible number. After defining the function, we call it to assign x a randomly generated whole number between two and five. Once again, the last line allows us to see the number that has been generated.

For most websites, these random number generating functions are not that useful on their own. Usually, we use them to generate random stuff that we would like our visitors to see. In my next post, I'm going to discuss how to display random image and random quotes, with random numbers being one of the essential components.

Posted by Greten on January 26, 2012 under JavaScript

Share and Enjoy: