The if statements you've coded so far have been all-or-nothing. If the
condition tested
true, something happened. If the condition tested false, nothing
happened.
1 var x = prompt("Where does the Pope live?");
2 if (x === "Vatican") {
3 alert("Correct!");
4 }
Quite often, you want something to happen either way. For example:
1 var x = prompt("Where does the Pope live?");
2 if (x === "Vatican") {
3 alert("Correct!");
4 }
5 if (x !== "Vatican") {
6 alert("Wrong answer");
7 }
In this example, we have two if statements, one testing for "Vatican,"
and another testing
for not-"Vatican". So all cases are covered, with one alert or another
displaying, depending on
what the user has entered.
The code works, but it's more verbose than necessary. The following code
is more
concise and, as a bonus, more readable.
1 if (x === "Vatican") {
2 alert("Correct!");
3 }
4 else {
5 alert("Wrong answer");
6 }
In the style convention I follow, the else part has exactly the same
formatting as the if part.
As in the if part, any number of statements can execute within the else
part.
1 var correctAnswer = "Vatican";
2 if (x === correctAnswer) {
3 alert("Correct!");
4 }
5 else {
6 score--;
7 userIQ = "problematic";
8 alert("Incorrect");
9 }
else if is used if all tests above have failed and you want to test
another condition.
1 var correctAnswer = "Vatican";
2 if (x === correctAnswer) {
3 alert("Correct!");
4 }
5 else if (x === "Rome") {
6 alert("Incorrect but close");
7 }
8 else {
9 alert("Incorrect");
10 }
In a series of if tests, JavaScript stops testing whenever a condition
tests true.
Using the if statement, you've learned to test for a condition. If the
condition is met, one or
more statements execute. But suppose not one but two conditions have to
be met in order for a
test to succeed.
For example, if a guy weighs more than 300 pounds, he's just a great big
guy. But if he
weighs more than 300 pounds and runs 40 yards in under 6 seconds? You're
going to invite
him to try out for the NLF as a lineman. You can test for a combination
of conditions in
JavaScript by using...
&&
Here's the code.
1 if (weight > 300 && time < 6) {
2 alert("Come to our tryout!");
3 }
4 else {
5 alert("Come to our cookout!");
6 }
You can chain any number of conditions together.
1 if (weight > 300 && time < 6 && age > 17 && gender === "male") {
2 alert("Come to our tryout!");
3 }
4 else {
5 alert("Come to our cookout!");
6 }
You can also test for any of a set of conditions. This is the operator.
||
Here's an example.
1 if (SAT > avg || GPA > 2.5 || sport === "football") {
2 alert("Welcome to Bubba State!");
3 }
4 else {
5 alert("Have you looked into appliance repair?");
6 }
If in line 1 any or all of the conditions are true, the first alert
displays. If none of them are
true (line 4), the second alert displays.
You can combine any number of and and or conditions. When you do, you
create
ambiguities. Take this line...
if (age > 65 || age < 21 && res === "U.S.") {
This can be read in either of two ways.
The first way it can be read: If the person is over 65 or under 21 and,
in addition to either
of these conditions, is also a resident of the U.S. Under this
interpretation, both columns
need to be true in the following table to qualify as a pass.
The second way it can be read: If the person is over 65 and living
anywhere or is under
21 and a resident of the U.S. Under this interpretation, if either
column in the following
table is true, it's a pass.
It's the same problem you face when you combine mathematical
expressions. And you
solve it the same way: with parentheses.
In the following code, if the subject is over 65 and a U.S. resident,
it's a pass. Or, if the
subject is under 21 and a U.S. resident, it's a pass.
if ((age > 65 || age < 21) && res === "U.S.") {
In the following code, if the subject is over 65 and living anywhere,
it's a pass. Or, if the
subject is under 21 and living in the U.S., it's a pass.
if (age > 65 || (age < 21 && res === "U.S.")) {