JavaScript Primers #20

http://www.htmlgoodies.com/primers/jsp/article.php/3478331/JavaScript-Primers-20.htm (Back to article)

Use these to jump around or read it all

The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment

The Concept

This example introduces you to random numbers. JavaScript uses the date and time when it generates a random number.

Notice this in the script: The number after the % is the ending number. The example below picks a random number between 1 and 10.

The Script

<HTML>
<HEAD>
<SCRIPT type="text/javascript"> 
function rand()
      {
          var now=new Date()
          var num=(now.getSeconds())%10
          var num=num+1
          alert(num)
      }
</SCRIPT>
</HEAD>
<BODY>
 <h1>Random Numbers</h1>
 <form>  
   <INPUT TYPE="button" 
   VALUE="Random Number from 1 to 10"  
   onClick="rand()">
 </FORM>
</BODY>
</HTML>

The Script's Effect

Random Numbers

Deconstructing the Script

We'll start with the function this time:

function rand()
      {
          var now=new Date()
          var num=(now.getSeconds())%9
          var num=num+1
          alert(num)
      }

It'll take a few steps to get the random number.
- First, set aside a function. We called ours "rand."
- Next, we set aside a variable that will act as a method called "new Date()."
- Another variable, called "num" is set aside. It contains the method getSeconds() to grab a number. In this case it will be through the seconds. This will be our random number.
JavaScript, like many computer languages, starts counting from zero. Thus the %10 tells JavaScript that the random number will be chosen from numbers between 0 and 9.
The way it works is that we told the computer we want one of 10 numbers. That tells the getSeconds() method to grab a second. There are 60 seconds, right? Divided by 10 equals six seconds, right? Well, depending on the grouping of six, that's the number you get.
Furthermore, we are not actually taking the times the second can be divided by ten. The % operator actually returns the remainder of a math problem. For instance, let's say the second returned is 20. Ten divides perfectly, thus the remainder is zero. The script returns zero. Let's say the number returned is 12. Ten goes in 1.2 times, right? The number returned is 2...the remainder.
By adding one to the random number (num=num+1) we are changing the random numbers from between 0 and 9 to between 1 and 10! See that above?
Finally, an alert is set up to display the number.

It's a four-step process. Now, the item that calls for the number:

<form action="">  
  <INPUT TYPE="button" 
  VALUE="Random Number from 1 to 10"
  onClick="rand()">
</form>

It's a basic button format that triggers the function above. Easy trick.

What You Have Learned

Your Assignment

Write a JavaScript program where the user clicks a button in a form and the program displays a random number between 0 and 4 (yes, 0 and 4). The number should be displayed in an alert box. The alert box should read "Your Random Number is: ##."

Here's a possible answer to this assignment
(this will open a new window)

The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment

On To JavaScript Primer #21