JavaScript: If & Random Numbers

 

Random Numbers

Let's look at another application of those useful random numbers. Recall from an earlier lesson that Math.random() produces a random number between 0 and 1 (including 0 and 1). You can put Math.random() into a function that generates random numbers between 1 and some upper limit. For example, following is a function that produces a random number between 1 and 10. See if you understand how it works.

var numRounded

function rand()

{

num = Math.random()*9 + 1

numRounded = Math.round(num)

}

(Placing the variable 'numRounded' before the function guarantees that the variable will be available to be used anywhere in the script.)

 

If

Sometimes it is useful to combine a random-number function like the one above with an IF statement. What if you wanted, for example, to write a JavaScript that plays the game High-Low? In High-Low, the player guesses a number, and the other player (in this case, the computer) tells her whether her guess was correct, too low or too high. So to write a High-Low game, we need to generate a random number, we need to obtain a guess from the player, and we need an IF statement that handles the 3 possibilities. Study this script:

<head>

<script language=JavaScript>

<!--

var numRounded

function rand()

{

num = Math.random()*9 + 1

numRounded = Math.round(num)

}

function checkGuess(form)

{

var guess = form.box1.value

if(guess == numRounded)

   alert("That's it -- it's " + numRounded + "! Congratulations!")

else if(guess < numRounded)

    alert("Sorry, your guess of " + guess + " is low.")

else

   alert("Sorry, your guess of " + guess + " is high.")

form.box1.value = ""

document.form1.box1.focus()

}

//-->

</script>

</HEAD>

<BODY>

<p>Guess a number between 1 and 10:

<form >

<input type=text name="box1" size=2><br>

<input type=button name="button1" value="Guess" onClick="checkGuess(this.form)">

</form>

<script language=JavaScript>

<!--

rand()

//-->

</script>

to see this how this code behaves in a new window.

The line document.form1.box1.focus() in the script returns the 'focus' to the text box in which the user enters his guess.

 

Other Resources

Try these links on random numbers and the IF statement:

Page Link
Random Numbers www.htmlgoodies.com/primers/jsp/article.php/3478331
Random Numbers & Images www.htmlgoodies.com/primers/jsp/article.php/3478361
If - Else Statements www.htmlgoodies.com/primers/jsp/article.php/3478351
Random Numbers http://wsabstract.com/javatutors/randomnum.shtml

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own web page, or 2) eEverything.com. Create a button labeled 'Change Image'. Create an image with the <IMG> tag. Inside a <SCRIPT> tag, create three Image objects (if you need it, see the 'onMouseOver II' lesson for a refresher on Image objects). Write a function that randomly generates either a 1, 2 or 3. Write a second function that makes either your first, second or third image show up (in the space occupied by the original <IMG>), depending on the value of the random number. When the user clicks on the button, these 2 functions are called and one of the 3 images randomly shows up. (The function that generates the random number can be called from inside the function that selects an image to display.)

If you work on eEverything.com, have the 4 different images represent a popular appliance, like MP3 players or BetaMax VCRs. When the user clicks on the 'Change Image' button, a different photo randomly appears.