The Operators, And, Or

 

Notice in that last code that the second age test uses the Greater Than symbol ( > ). Try entering the number 16 in your text box, and then click your button. What happened? If you haven't added the final else statement, then nothing will happen.

This is because we're testing for Less Than 16 in the first if statement, and then testing for Greater Than 16 in the first else statement. We're not testing for exactly 16. So none of our statements will be true. What we need is another of our symbols. Either >= (Greater Than or Equal to) or <= (Less Than or Equal to).

So, change your code. Take out either the Less Than symbol ( < ) or the Greater Than symbol ( > ). In it's place, insert either <= or >= to see what happens. Play about with the symbols to see how they work. What happens if you put both in? Like this:

if (age <= 16) {

alert("How's school these days?")

}
else if(age >= 16) {

alert("It's tough being an adult")

}
else {

alert("Please try again")

}

 

Exercise

Add a few more else if statements, and test for these ages groups:

17 to 25
26 to 40
41 to 65
66 and over

Add a suitable alert message for when the command button is clicked.

With an exercise like the one above, it's really handy to use the AND operator (&&) and the OR operator ( || ). Here's how to use them.

 

AND and OR

These two operators will return a Boolean value. You use them when you want to test two or more conditions. For example, if you wanted to test if someone was over 65 and had a buss pass, use AND; if you wanted to test if someone was over 65 or had a buss pass, use OR. Like this:

if (Age >= 65 && BusPass == false) {

alert("Pensioners - Get your free bus pass now!")

}

If BOTH conditions are true then the IF Statement is true. If just one of them is false, then the entire IF Statement is false. Note the format (and where the round brackets are):

if (condition1 && condition2) {

Code if true here

}

Contrast that with the OR operator:

if (Age >= 65 || BusPass == false) {

alert("Pensioners - Get your free bus pass now!")

}

This time, if just one of your conditions is true then the entire IF statement is true. They both need to be false for the entire IF Statement to be false. The format (syntax) is the same, except for the two pipe characters ( || ) in place of the two ampersands (&&).

 

Not a Number

Let's use the AND operator to solve our little problem from a previous lesson. You'll remember what that problem was - if a user enters text into our text boxes, then we get the "NaN" error message in our answer text box. Here's the problem form. Click the Add Numbers button and see what happens:

Number One: Number Two:

Total:

 

What we need to do is to check the text in the text box. If they are both numbers, then we can go ahead and add them up; if just one of them isn't, then we can display an alert box to tell the user to try again. Our original code was this:

<SCRIPT LANGUAGE = JavaScript>

A = document.frmOne.txtFirstNumber.value
B = document.frmOne.txtSecondNumber.value
A = Number(A)
B = Number(B)
C= A + B
document.frmOne.txtThirdNumber.value = C

</SCRIPT>

We can insert an If statement on the third line of the code which will check if the user entered a number. Only then will we do the adding up. The if statement we can use is this:

if (Number(A) && Number(B)) {

A = Number(A)
B = Number(B)
C = A + B
document.frmOne.txtThirdNumber.value = C

}
else {

alert("Please enter a number in both boxes")

}

Notice the use of the AND operator (&&). What we're saying is: "If it's true that A is a number AND if its true that B is a number, then execute the code below; otherwise, display an alert box."

Amend your code to include the if .. else statement, and test it out in a browser. It should work all right now.

Except! Try entering two zeros in the text boxes and see what happens. Can you think of a solution?

When you've solved the problem, you can move on to Loops.

Move on to the Next Part -->

<--Back to the JavaScript Contents Page