This chapter is from the book
This chapter is from the book
This chapter is from the book
This chapter is from the book
Using Multi-level Conditionals
There are times when you need more than two choices in a conditional test; then and else sometimes just aren't enough. While you can have nested levels of if, it's often simpler to just use a switch/case statement instead. The switch/case construct allows you to check a variable against multiple values. As you can see in Figure 3.7, this script returns one of three different Presidential quotes as alert dialogs, depending on which button the user clicks. Script 3.11 shows the HTML, which is fairly simple. Script 3.12, the JavaScript, uses the switch/case construct to differentiate between presidents.
)
Figure 3.7 Calling the function with each of the three buttons in the top window results in three different responses, as shown in the three dialog boxes.
Script 3.11. The HTML sets up the page for multi-level conditionals.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Switch/Case handling</title>
<script language="Javascript" type="text/javascript" src="script09.js">
</script>
</head>
<body bgcolor="#FFFFFF">
<h2>Famous Presidential Quotes</h2>
<form action="#">
<input type="button" value="Lincoln" />
<input type="button" value="Kennedy" />
<input type="button" value="Nixon" />
</form>
</body>
</html>
Script 3.12. This type of conditional allows you to check against multiple possibilities.
window.onload = initAll;
function initAll() {
for (var i=0; i< document.forms[0]. elements.length; i++) {
var thisElement = document.forms[0]. elements[i];
if (thisElement.type == "button") {
thisElement.onclick = saySomething;
}
}
}
function saySomething() {
switch(this.value) {
case "Lincoln":
alert("Four score and seven years ago...");
break;
case "Kennedy":
alert("Ask not what your country can do for you...");
break;
case "Nixon":
alert("I am not a crook!");
break;
default:
}
}
To use a switch/case statement:
-
window.onload = initAll;
When the page loads, call the initAll() function. -
function initAll() { for (var i=0; i< document.forms[0].elements.length; i++) { var thisElement = document.forms[0].elements[i]; if (thisElement.type == "button") { thisElement.onclick = saySomething; }In the function, we loop through all the fields in the form on the page. For each field, the loop looks at the type of field. If it's a button, then we add an onclick handler to call the saySomething() function. -
function saySomething() {This begins the saySomething() function. -
switch(this.value) {The value of the this object is used as the parameter to switch(). Its value will decide which of the below case statements gets executed. -
case "Lincoln": alert("Four score and seven years ago..."); break;If the value of the this object is "Lincoln", this alert appears. Regarding break, if the user clicked Lincoln, we're in this section of code. However, we've done everything we want to do, and so we want to get out of the switch. In order to do that, we need to break out. Otherwise, we'll execute all of the code below, too. While that continued execution can be handy in certain circumstances, this isn't one of them. -
case "Kennedy": alert("Ask not what your country can do for you..."); break;If the user clicked Kennedy, we end up in this case block. -
case "Nixon": alert("I am not a crook!"); break;And finally, if the user clicked Nixon, we end up here, popping up another alert and then breaking out of the switch. -
default:
If you were wondering what would happen if the user's entry didn't meet one of the above criteria, you're in the right place. The default section is where we end up if our switch value didn't match any of the case values. The default block is optional, but it's always good coding practice to include it, just in case (so to speak). In this script, there's no code here to execute, because we shouldn't ever get here. -
}
This closing brace ends the switch statement.