JavaScript Primers #22

http://www.htmlgoodies.com/primers/jsp/article.php/3478351/JavaScript-Primers-22.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 second If example includes a random number, two functions, and introduces If/Else.

If/Else allows the program to decide what to do both when the condition is true and when the condition is false, thus increasing your control of your program.

The Script

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
 function rand()
  {now=new Date()
   num=(now.getSeconds())%10
   num=num+1
   }
 function guessnum()
  {guess=prompt("Your guess?")
   if (eval(guess) == num)
   {alert("YOU GUESSED IT!!")
    rand()
    }
     else
    alert("No.  Try again.")
      }
  </SCRIPT>
</HEAD>
<BODY onLoad="rand()">

  <h2>I'm thinking of a number 
      from 1 to 10</h1>

  <FORM NAME="myform">

    <INPUT TYPE="button" VALUE="Guess" 
       NAME="b1" onClick="guessnum()">

  </FORM>
</BODY>
</HTML>

The Script's Effect

You have to go to this page to see the effect

Deconstructing the Script

Let's start with the BODY command this time, shall we?
```
<body bgcolor="white" onLoad="rand()">
```
This time it is not the onClick in the button that fires up the function; rather, it is this onLoad in the BODY command. That way the number has already been chosen by the time the button is pushed. If it isn't done this way the number will be new and random every time you click the button, rather than a remaining a set number while you guess.
Now the first function:
```
function rand()
 {now=new Date()
  num=(now.getSeconds())%10
  num=num+1
 }
```
The function pulls a random number between 0 and 9 from the date and time and assigns it to num. The program then adds 1 to num to make the random number between 1 and 10. You've seen this before, it made up Primer #21.
Now the second function:
```
function guessnum()
 {guess=prompt("Your guess?")
 if (eval(guess) == num)
  {alert("YOU GUESSED!!")
   rand()
  }
  else
  {alert("No.  Guess again.")}    
  }
```
This is a very clever piece of programming. Andree wrote it. There is already a number in the browser's memory from the first function. All this function does is allow you to take pot shots until you get the number right. Look what happens:
- A variable, guess, is created through a prompt. Note the {brackets}. It's very similar to Primer #21.
- Then we get into the IF/Else statements.
- If the "guess" is equal to the number, then the "YOU GUESSED MY NUMBER" alert runs.
- If it isn't (else), then the other runs. Very smooth.

This should look familiar by now:

<form name="myform" action="">

 <input type="button" value="Guess" 
    name="b1" onClick="guessnum()">

</form>

It'll trigger the function to try and match up the numbers.

What You Have Learned

Your Assignment

Here's a challenge! Use the script above, but alter it so that the user is informed if his or her guess is too high or too low.

HINT! There are only three outcomes possible in that format: Too high, too low, or right on. Think about this: Do you really need an Else statement, or will just a couple more Ifs do it?

Here's the 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 #23