The Power of Javascript: Controlling the Execution of the Script - Advanced if statements (else if and else)
(Page 4 of 6 )
We have used the if statement to execute a block of code (one statement or more) depending on the value produced from its boolean expression. The if statement doesn't limit this capability. You can use the else block to form an if/else block in which, if the boolean expression evaluates to true, the if statement (or block) executes as we have seen in the above example -- but the new part is that, if the boolean expression evaluates to false, the else block gets executed. So our new if/else statement is written like this:
if(boolean expression)
statement;
else
statement;
In the case of a code block, it's written like this:
if(boolean expression)
{
statement 1;
statement 2;
statement 3;
}
else
{
statement 1;
statement 2;
statement 3;
}
Note that the else block executes if the boolean expression evaluates to false, so we don't place parentheses after else because there's no expression to be evaluated. Let's extend our example to include the else statement. Copy the following code and save, then load it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
<script language="JavaScript" type="text/javascript">
var someText;
someText = prompt("Please enter some text", "I like Javascript");
if (someText == "I like Javascript")
{
alert("You have entered the default text");
}
else
{
alert("You have written: "+ someText);
}
document.write("This is the first statement after the if statement");
</script>
</head>
<body>
</body>
</html>
When you load the document, the dialog box prompt is displayed. Type anything other than the string value "I like Javascript." I typed "The title of this page is Hello World"
When you click OK a message box is displayed with the text you just written.
When we have written a string value other than the one we check on in the boolean expression ("I like Javascript"), the boolean expression evaluates to false, then the else statement executes, which uses the alert() functionality to display what we have written. This may confuse you so let's think about it again. When the interpreter assigns the value to someText variable, it knows that this value returns (comes from) the prompt box using the prompt() functionality. The Interpreter displays the prompt box and we enter the value "The title of this page is Hello World" and this is the value that the interpreter assigns to someText.
When the interpreter evaluates the boolean expression of the if statement and produces the value false, it executes the else block, which displays the value of someText in the message box. I know that this may be a little bit difficult for you, but programming is fun, and when we discuss client-side Javascript, you will like it more.
There's one limitation to using the if/else statement. As we have seen, we are testing the value of the variable someText. If it's "I like Javascript" the if block executes, otherwise the else block executes. Javascript (like most programming languages) supports the else if statement, which is better explained with an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
<script language="JavaScript" type="text/javascript">
var someText;
someText = prompt("Please enter some text", "I like Javascript");
if (someText == "I like Javascript")
{
alert("You have entered the default text");
}
else if (someText == "I like scritping languages")
{
alert("you like scripting languages");
}
else
{
alert("You have written: "+ someText);
}
document.write("This is the first statement after the if statement");
</script>
</head>
<body>
</body>
</html>
Save and load this document into your browser. Enter the value "I like scritping languages" into the dialog box prompt.
The text you just entered will be displayed in the message box.
As you can see, the else if statement gives us the ability to go further with the expression in question. It's much more like dividing the else statement into more than one block that further tests the value. When the else if expression evaluates to true, it executes the statement block associated with it, then escapes all the following else if statements (if there are any) along with the else block and continues to the first statement after the else block (or we can say after the whole if/else structure).
Next: The switch statement >>
More JavaScript Articles
More By Michael Youssef
