The if...else Statement
In previous examples, the if statement checks a condition and takes
action on a true condition; it does not take action on a
false condition. An alternate form of the if
statement permits action on both true and false
conditions.
if (conditional expression) {
do this...
} else {
do this...
}
Figure 4-5. General format for if...else statement.
Here, the script takes alternate courses of action depending on the results of the condition test.
If the expression is evaluated as true, then the set of statements
enclosed within the first set of braces is executed; if the expression is evaluated as
false, the set of statements enclosed in braces following the
else is executed. Thus, the script branches to one of two
different processing actions that take place.
The following script is an example of the if...else form of condition
testing.
window.onload = init;
function init() {
var FirstBtn = document.getElementById("btnFirst");
var SecondBtn = document.getElementById("btnSecond");
FirstBtn.onclick=Display;
SecondBtn.onclick = Display;
}
function Display() {
if (this.value == "First Button") {
alert ("You clicked the first button.");
} else {
alert ("You clicked the second button.");
}
}
<input type="button" value="First Button" id="btnFirst">
<input type="button" value="Second Button" id="btnSecond">
Listing 4-5. Code for an if...else condition test.
The clicked button calls the Display() function, passing along the
value of the button (this.value). Recall that the JavaScript keyword
this is a self reference to the object containing the
onclick event handler; the value property of this button is the
value coded in the value="First Button" or
value="Second Button" attribute.
If the value received is "First Button",
then the condition test is evaluated as true and the alert box displays a
message to that effect; else, the value received is not "First
Button", the condition test is evaluated as false, and the
alert box displays the alternate message.
Nested if Statements
Two or more if statements can be nested. That is, an
if statement can appear inside an if
statement, which can appear inside an if statement, and so forth.
In a general form these nested if statements appear as follows.
if (conditional expression) {
if (conditional expression) {
do this...
} else {
do this...
}
}
else {
if (conditional expression) {
do this...
} else {
do this...
}
}
Figure 4-6. General format for nested if...else statements.
You need to be cautious about being too energetic in nesting if
statements. It is easy to get lost in the logic and syntax when condition tests are nested
to deep levels. Often, you can reformulate the logic of comparisons and make simpler combinations
of tests.
In previous examples, the braces and enclosing statement blocks have been shown on separate
lines and indented for visual emphasis.
if (conditional expression) {
statements...
} else {
statements...
}
You may, however, format the lines in other ways. The braces indicate enclosed blocks of code
irrespective of how they appear visually in the if statement. The following
examples show other ways of constructing syntactically valid if statements.
Example 1:
if (conditional expression)
{
statements...
}
else
{
statements...
}
Example 2:
if (conditional expression) {
statements...
}
else {
statements...
}
Example 3:
if (conditional expression) { statement } else { statement }
Listing 4-6. Alternate constructions of if...else statements.
What matters is that enclosing braces are properly paired, not how they appear visually.
Choose a method that makes it obvious which statement block goes with which condition test.
Testing for Numbers
The situation often arises where it is necessary to check for a numeric value prior to
performing calculations with the value. This is especially so when using user input within
arithmetic calculations since nonnumeric data can cause script errors. Clicking the following
"=" button to calculate the square root produces an error for the nonnumeric value in the
textbox.
Square Root:
Figure 4-7. Producing an error with nonnumeric data.
The output textbox displays "NaN" indicating that the computation produced
"Not a Number." This may be a satisfactory response; however, it is better
to trap for invalid data to handle them through scripting rather than through default errors.
JavaScript provides the isNaN() function for just this purpose.
When applied to a data value, the function returns true or
false depending on whether the tested value is a number. A script can respond
to either of these conditions.
Square Root:
Figure 4-8. Testing for nonnumeric data.
window.onload = init;
function init() {
var btnSqRoot = document.getElementById("btnSqRoot");
btnSqRoot.onclick = SquareRoot;
}
function SquareRoot() {
if (isNaN(document.getElementById("Number").value)) {
alert("Please enter a number.");
} else {
document.getElementById("Answer").value =
Math.sqrt(document.getElementById("Number").value).toFixed(3);
}
}
Square Root:
<input id="Number" type="text" value="abc"
style="width:60px; text-align:right">
<input type="button" value=" = " id="btnSqRoot" >
<input id="Answer" type="text"
style="width:60px; text-align:right">
Listing 4-7. Code to test for nonnumeric data.
Incidentally, the isNaN() function does not trap null characters,
which are considered valid numbers. Therefore, if you want to disallow both nonnumeric and null
characters in an input area, you must make separate tests. A rewrite of the previous
if statement to make these tests is
if ( isNaN(document.getElementById("Number").value) ||
document.getElementByid("Number") == "" )
...
The logical operator || (OR) is
added to include a test for a null value. The full test becomes "if the value is not a number OR
the value is null" then display the error message.