HTMLisEasy.com
HTML tutorials for the rest of us...
Javascript Tutor - Lesson 9

Nested if-then statements.

<html>
<head>
<title></title>

<script type="text/javascript">

function Hello()
{
   x = prompt("Give me a number","");

   if (x == 6)
   {
      alert("Wow! " + x + " equals 6!");
   }
   else
   {
      if ( x > 4)
      {
         alert("Hey kids, " + x + " is greater than 4!");
      }
      else
      {
         alert("Hey kids, " + x + " is NOT greater than 4!");
      }
   }
}

</script>

</head>
<body>

<a href="javascript:Hello()">Click here</a>

</body>
</html>

Try it.

First we test if x==6 (x equals 6) I'll explain the double equal sign in a minute. If x==6 then we get a message. If x does not equal 6 then we get a pair of if-then statements testing for greater than 4 or not greater than 4. Keep studying the example until you get it.

About the double equal sign. Let me try to explain this way...

  x = 6     the value of x is now 6 (assignment)
  x == 6    x equals 6 (comparing for equality)

x=6 is a statement that assigns the value 6 to the variable x.

x==6 is a comparison test, very often used in an if statement... if x equals 6.

= is an assignment operator

== is a comparison operator

The difference between the two is very important. If you don't fully understand it yet, that's OK. Just keep in mind that there is a difference.

Speaking of comparison operators....

  x > 6    x is greater than 6
  x < 6    x is less than 6
  x >= 6   x is greater than or equal to 6
  x <= 6   x is less than or equal to 6
  x != 6   x does not equal 6
  x == 6   x equals 6

Exercise: Make a page that does the following: When you click on a link, a prompt box comes up and asks you for a number. If your number is less than 100, throw up an alert box saying what your number was... "Your number is 28". If your number is greater than 100, throw up an alert box that says "Oh my, your number is too big for me." If your number is exactly 100, throw up an alert box saying "Bingo, your number is exactly 100."

Here is a solution.

Exercise: Revise your last exercise to get the number from an input/text box rather than a prompt box.

Here is a solution.

Exercise: Revise the second last exercise (with the prompt box) so that if the number is less than 100 the page background turns YELLOW. If the number is greater than 100 the page background turns GREEN, if the number is equal to 100 the page turns to BLUE and throws up an alert box that says (Bingo!), and... if the number is greater than 500 the background turns RED and throws up another prompt box requesting a lower number and starts all over again. Hint: in order to "start all over again" the function will have to call itself.

This is an exercise in logic. Programming is an exercise in logic. This is a lot heavier than cut-n-paste javascripting. This stuff will make your brain sore ;-)

Here is a solution.

Earlier, we were reading the value from a text box...

x = window.document.form.input.value;

We can also set the value of a text box...

<html>
<head>
<title></title>

<script type="text/javascript">

function SetTheBox()
{
   window.document.myform.mytextbox.value = 5;
}

</script>

</head>
<body>

<form name="myform">
<input type="text" name="mytextbox" value="">
</form>

<a href="javascript:SetTheBox()">Click here</a>.

</body>
</html>

Try it.

Exercise: Alter the above example to get the value from a prompt box, and place it into the text box. Also, instead of a link to invoke the function, use an input of type button and use the onClick event...

<input type="button" onclick="myfunction()">

Here is a solution.

Exercise: Make 3 text boxes like so...

=

Underneath make four buttons: Add, Subtract, Multiply and Divide. Make each button grab the numbers from the first two boxes, perform the appropriate calculation, and place the answer in the third box.

Here is a solution.

Exercise: To the last exercise, add a fourth box like so...

=

Alter the functions to place the proper operation symbol ( + - * / ) into that fourth box

Here is a solution.

You know, it occurs to me that you may be wondering why we're doing all this cheesy rinky-dink stuff when we could be learning cool things like how to make games or shopping carts or something. Well, think of it as laying bricks. We learn to lay a couple bricks this way, then that way, and hopefully, after we're done, you'll have some basic skills and you'll attempt a brick cathedral on your own. But until then, we practice with the cheesy rinky-dink stuff ;-)

<< BACK NEXT >>
Javascript Tutor
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
Javascript Authoring Guide      JavaScript FAQ
HTML 4.0 Reference      Google Groups (Advanced Search)