• Choose a category
• All
• Classic-Fiction

Example 2.21

var order_size = "medium";

switch (order_size) {

case "small":

alert("small");

case "medium":

alert("medium");

case "large":

alert("large");

case "extra large":

alert("extra large");

default:

alert("something else?");

}

Go run this example file: you'll get alerts for "medium," "large," "extra large," and "something else?" At first, this might not make sense; so look at it this way. We can have multiple cases for each code block, meaning that if our condition is one of the cases, the code will execute:

Example 2.22

var order_size = "medium";

switch (order_size) {

case "small":

alert("small");

break;

case "medium":

case "large":

case "extra large":

alert("medium, large, or extra large");

break;

default:

alert("something else?");

}

If we now add some code for each case statement (without any break statements), the same behaviour will take place: the code under each case will run, but it will "fall through" to the next case statement and execute the code there.

You can probably come up with a situation where this would be a neat idea, and save you some coding. However, several of the JavaScript bigwigs consider this a bad practice. What it does is pretty subtle, and it could very easily trip you up when debugging. I'd recommend using a break for every case.

Conditional Operator (Ternary Operator)

There's one more type of conditional statement. Let's say we wanted to do something like this:

var temp = 18, // degrees Celsius

msg;

if (temp > 10) {

msg = "Today was warm";

} else {

msg = "Today was cold";

}

For setting one variable, that seems like a lot of extra code. Well, using the conditional operator, we can shorten it.

ROCKSTAR TIP

You may see the conditional operator called the "ternary operator"; "ternary" just means it takes three values, just like the unary operators take only one. No one gets confused, though, because there's only one ternary operator in JavaScript.

Example 2.23

var temp = 18,

msg = (temp > 10) ? "Today was warm" : "Today was cold";

alert(msg);

It's pretty simple. in parentheses (and really, the parenthesis aren't required, but it improves readability), put your conditional statement, followed by a question mark. Then, we have the value that's used if the condition is true. The value that's returned if the condition is false comes next, after a colon. The conditional operator is great for when your if statements have only two possible outcomes, each of which can be coded in a single line.

Looping Statements

Now that we've got conditional statements down, we're ready to move on to loops. Very often, you'll want to perform the same action several times, each time on a different value. As you might guess, this often goes hand-in-hand with arrays. Let's check out the looping constructs JavaScript gives us.

For Loops

The for loop will often be the first tool you reach for when you need to build a loop. Take a look at the syntax, and then we'll discuss it.

Example 2.24

var names = ["Ringo", "John", "Paul", "George"];

for (var i = 0; i < names.length; i++) {

alert("Say hello to " + names[i]);

}

We begin our for loop with the keyword for; next we have three statements in a set of parentheses. Notice how the statements are separated by semi-colons, just like all good JavaScript statements. The first statement sets any variables we need for the loop; in this case, we're setting only one variable: i = 0 ("i" is short for iterator or index). The second statement is an expression that returns a Boolean value; this is evaluated before the loop is executed. If it evaluates true, the loop will execute; if it evaluates false, the loop will end. In our example, we check to see that i is less than the length of the names array (more on the length property later). The final section performs any action we want to be done after the loop executes; here, we're incrementing i by one. Inside the loop, we can work with the values of the array by using the square bracket