Nested if-then statements...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="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 (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 (testing for equality)
while were at it....
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
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 the number is less than
100, throw up an alert box saying what your number was... "Your number
is 28". If the number is greater than 100, throw up an alert box that says
"Oh my, your number is too big for me." If the number is exactly 100,
throw up an alert box saying "Bingo, your number is exactly 100."
Exercise: Revise your last exercise to get the number from an input/text
box rather than a prompt box.
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 ;-)
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 language="javascript"><!--
function SetTheBox()
{
window.document.myform.mytextbox.value = 5;
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="mytextbox" VALUE="">
</FORM>
<BR><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()">
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.
Exercise: To the last exercise, add a fourth box like so...
=
Alter the functions to place the proper operation symbol ( + - * / )
into that fourth box
| Next>> | ||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||