The next version of the if statement that we’ll explore is the if...else if statement. This is nearly identical to the if...else statement, except instead of the browser ex- ecuting statements if the conditional expression is false, the browser is told to evaluate another conditional expression. The if...else if statement tells the browser, “If the condition is true, then execute these statements, else evaluate another condi- tion. If the other condition is true, then execute these other statements.”
Here’s how to structure the if...else if statement: if (conditional expression)
{
//Place statements here. }
else if (conditional expression) {
//Place statements here. }
Notice that the if...else if statement looks a bit like the if...else statement. How- ever, the else portion of the statement is followed by the if keyword and another conditional expression. Only if the second conditional expression is true will the browser execute statements within the else if code block.
Let’s modify the previous example and change the if...else statement to an if... else if statement. In this example, if the browser determines that either the user ID or the password is invalid, the browser moves on to the else if portion of the if...else if statement, where it determines whether the value of the userID variable is equivalent to ScubaBob. If this conditional expression is true, then the value of the password variable is incorrect. The browser is told to display a message that in- forms the user that the password is incorrect (Figure 3-1).
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml">
ch03.indd Sec1:48
<head>
<title>The if...else...if Statement</title> </head>
<body>
<script language="Javascript" type="text/javascript"> <!--
var userID var password
userID = prompt('Enter user ID',' ') password = prompt('Enter password',' ')
if (userID == 'ScubaBob' && password == 'diving') {
alert('Valid Login') }
else if (userID == 'ScubaBob') { alert('Invalid Password') } --> </script> <noscript> <h1> JavaScript Required</h2> </noscript> </body>
</html>(2)If...else if...else Statement
The remaining version of the if statement is the if...else if...else statement. This statement is the same as the if...else if statement with one modifi cation: it includes another else portion to the statement.
The if…else if...else statement tells the browser, “If the condition is true, then execute these statements, else evaluate another condition. If the other condition is true, then execute these other statements, else execute these statements if the other condition is false.”
Figure 3-1 If the user ID is valid, but the password is invalid, the browser tells the user that the wrong password was entered into the JavaScript.
ch03.indd Sec1:49
Here’s the structure of the if...else if...else statement. if (conditional expression)
{
//Place statements here. }
else if (conditional expression) {
//Place statements here. }
else {
//Place statements here. }
The if...else if....else statement contains three code blocks. Statements in the fi rst code block execute if the fi rst conditional expression is true. Statements in the sec- ond code block execute if the conditional expression in the else if portion is true. Statements in the third code block execute if neither the fi rst nor second condi- tional expression is true.
Let’s see how this works in a revision of our previous example: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>The if...else...if...else Statement</title> </head>
<body>
<script language="Javascript" type="text/javascript"> <!--
var userID var password
userID = prompt('Enter user ID',' ') password = prompt('Enter password',' ')
if (userID == 'ScubaBob' && password == 'diving') {
alert('Valid Login') }
else if (userID == 'ScubaBob') {
alert('Invalid Password') }
ch03.indd Sec1:50
else {
alert('Invalid User ID') } --> </script> <noscript> <h1> JavaScript Required</h2> </noscript> </body> </html>
The if portion and the else if portion of the if...else if...else statement in this ex- ample are the same as in the previous example. However, we’ve inserted an else keyword and else code block at the end of the if...else if...else statement, and within this code block we inserted the statement that displays the alert message “Invalid User ID” on the screen.
Here’s what is happening in this JavaScript:
1. The browser compares the value assigned to the userID variable and password variables with a valid user ID and password.
• If they are equivalent, then the valid login message is displayed. • If either the user ID or password is incorrect, then the browser skips
statements in the fi rst code block and proceeds to evaluate the second conditional expression.
2. Then the second conditional expression compares the value of the userID variable with the valid user ID.
• If this expression is true, then the browser tells the user that the user ID is valid.
• If this expression is false, then the user is told that the user ID is invalid (Figure 3-2).
Figure 3-2 If the user ID is invalid, then the statement within the else code block is displayed telling the user that the user ID is incorrect.
ch03.indd Sec1:51