JavaScript Primers #21

http://www.htmlgoodies.com/primers/jsp/article.php/3478341/JavaScript-Primers-21.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 the IF statement. Now we can decide what to do if a condition is true. This program asks the user if s/he likes sports. If the answer is "yes," the program responds "I like sports, too." If the answer is "no," the program responds "I hate sports, too." It's a bit wishy-washy, but a nice, short introduction nonetheless.

Notice that if the user types in anything but "yes" or "no" the response is "Answer yes or no." Pretty tricky, huh?

The IF statement is followed by a condition and what to do if it is true. TRUE can be one statement or many statements. The program knows where the TRUE statements start and stop because they are contained in {brackets}.

The Script

<HTML>
<HEAD>
 <SCRIPT type="text/javascript">
  function askuser()
  {
   var answer="   "
   var statement="Answer yes or no"
   var answer=prompt("Do you like sports?")
   if ( answer == "yes")
    {statement="I like sports too!"}
   if(answer == "no")
    {statement="I hate sports too!"}
   alert(statement)
    }
  </SCRIPT>
</HEAD>
<BODY>
 <h1>Activities</h1>
  <FORM action="">

   <INPUT TYPE="button" VALUE="click me"  
     onClick="askuser()">

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

The Script's Effect

Deconstructing the Script

Let's start with the button:
```
<FORM action="">

 <INPUT TYPE="button" VALUE="click me" 
   onClick="askuser()">

</FORM>
```
No surprises here, just a simple form button that triggers the askuser() function when the button is clicked.

Here again is the function section of the script:

function askuser()
 {
  var answer="   "
  var statement="Answer yes or no"
  var answer=prompt("Do you like sports?")
  if ( answer == "yes")
   {statement="I like sports too!"}
  if(answer == "no")
   {statement="I hate sports too!"}
  alert(statement)
 }

answer is defined as a variable with a value of three spaces. That empty space will be filled with what the user enters into the prompt box.
Notice then that the variable statement is created as a catch-all if the user does not answer "yes" or "no." That'll make a little more sense in a minute.
A prompt is set up as the variable answer. We now have two variables named the same. Keep that in mind.
if is followed by a condition in (parentheses). Don't forget the parentheses.
In the condition, which is anything between the parentheses, you do not use an = sign, you use an == sign! Single equals are for use outside of parentheses.
Remember, string values must be surrounded by quotes. yes and no are strings of text.
The process follows this pattern:
- The prompt box asks for input.
- The input is looked at.
- If the answer is "yes" the statement "I like sports, too" is sent to the alert.
- If the answer is "no," the statement "I hate sports, too" is sent to the alert.
- If the answer is neither, then you have an empty answer and the statement "Answer yes or no" is sent to the alert.
Remember that JavaScript is case-sensitive. Thus if you type YES or Yes, the condition will be false! You must type yes for the condition to be true. You can fix this by adding more and more IF statements covering all caps or capitalized answers.

What You Have Learned

Your Assignment

Rewrite this program so that it asks the user if s/he is male or female. If the user types "male," make the background blue. If the user types "female," make the background pink. Remember, JavaScript is case-sensitive, so be careful of the case in the condition statement. For example:

if (anwer == "male")

If you type Male or MALE, the condition will be false!

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 #22