1. Technology

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/bltut05.htm

was emailed to:

Thanks for sharing About.com with others!

Learn Javascript

The CASE Statement

Join the Discussion

Questions? Comments?

More of this Tutorial

The IF Statement Quiz Yourself

Introduction

The if statement is one of the ways that you can select which code to process based on values contained within particular variables or comparisons between these values. There is a second way of selecting different code that is useful where you want to compare the same variable against a number of different values and run different code in each case. We refer to this second method as a "case" statement since most programming languages use that word somewhere within the way that they code it.

Multiple Values in One Variable

Let's start by looking at a combination of if statements that are testing for different values in the same variable.

<script type="text/javascript">
var red = 1;
var result = null;
if (red == 1) {
result = 'one';
} else if (red == 2) {
result = 'two';
} else {
result = 'unknown';
}
document.write(result);
</script>

This code tests the value contained within the "red" variable and if it is 1 or 2 it assigns the equivalent word to the "result" variable. If the value is anything other than 1 or 2 it sets the result to unknown. You can achieve this same result using a single case statement as shown in the following code and I am sure that you will agree that this case statement provides a much easier to read version. This would be even more noticable if we wanted to compare for say 20 different possible results instead of the two in this example.

<script type="text/javascript">
var red = 1;
var result = null;
switch (red) {
case 1: result = 'one'; break;
case 2: result = 'two'; break;
default: result = 'unknown';
}

document.write(result);
</script>

The case statement starts with the reserved word "switch" which is followed by the variable or expression that is to be evaluated. Each possible result is specified using the "case" reserved word followed by the value to test against and a colon. This is then followed by the statements to be run if this condition is met. The "default:" reserved word supplies the code to run if none of the preceding conditions is met.

You will also notice that each section of code ends with the "break" statement. This statement terminates the case statement and jumps to the statement following (the document.write in the above example). If the break statement is omitted then the code for the following condition would be run instead. Leaving out the break statement allows you to do some clever field manipulations using the case statement but you should not try this until you are very familiar with programming in Javascript.

Using What You Know

Let's say that you have a number of different greetings that you would like to display on your page depending on the time of year. These greetings will be the same each year so we'd like to keep all of them in our page so that we don't go rewording them the next time we need to use them.

We can easily incorporate all of the different messages that we want to be able to display into document.write statements within a case statement. It is then a simple matter to change the value of the variable that the case statement is testing so as to display the appropriate message. The follwoing code will display a default message of "Welcome" since the value is not one of those specifically listed. To change the message to "Merry Christmas" we just change the value assigned to message to 1 instead.

<script type="text/javascript">
var message = 0;
switch (message) {
case 1: document.write('Merry Christmas'); break;
case 2: document.write('Happy New Year'); break;
case 3: document.write('Happy Easter'); break;
case 4: document.write('Happy Holidays'); break;
default: document.write('Welcome');
}
</script>

Past Lessons

  1. Introduction

©2014 About.com. All rights reserved.