Free Javascript Tutorials

home

JavaScript Tutorials

Break and Switch

 
Our quick javascript links
Little Programmes
 
 
 
 
 
 

 

Break and Switch Statements in JavaScript

 

 

The Break Statement

There are times when you need to break out of a loop before the whole thing gets executed. Or, you want to break out of the loop because of an error your user made. In which case, you can use the break statement. Fortunately, this involves nothing more than typing the word break. Here's some not very useful code that demonstrates the use of the break statement:

TeacherInterrupts = true
counter = 1

while (counter < 11) {
document.write(" counter = " + counter + "<BR>")
if (TeacherInterrupts == true) break
counter++
}

Try the code out and see what happens.

 

Switch Statements

These types of statements can be very useful. A switch statement is used when you want to choose just one of several possible outcomes. Our age tester was a good example. We had several ages groups that we were testing for, and a person could be in only one of them. We used a series of if statements to test which one our user belonged to.

A better way to do the testing is with a switch statement. Here, the value in Age is coming from a drop-down combo box on a form called frmOne:

Age = document.frmOne.cmbAge.value

switch (Age) {
case "1":
alert("still at school")
break
case "2":
alert("still young")
break
case "3":
alert("start lying")
break
case "4":
alert("start saving")
break
default:
alert("undetermined")
}

The switch statement starts with the word switch. What you are testing for comes next, in round brackets. In the code above, we're testing what is inside the variable Age. Next, type a curly bracket {, then on a new line, you set a series of values that could be in the variable Age.

Each value that could be in your variable is preceded by the word case. A colon comes after the value. If the value is going to be text, then use double quotes; if the value is going to be a number, don't use the quotes:

case "1":

All we're saying is, "If it is the case that the variable Age holds the value "1", then we've found a winner."

Once a match has been found, any code after the colon ( : ) will be executed. For us, that was an alert box:

alert("still at school")

You have to tell JavaScript to break out of the switch statement. Just use the break statement, otherwise the next case down will get executed as well:

case "1":
alert("still at school")
break

It was mentioned that the value in Age was coming from a drop-down box on a form. Here's the HTML code for that:

<FORM NAME = frmOne>

<select name = cmbAge>
<option value = 1>5 to 16</option>
<option value = 2>17 to 30</option>
<option value = 3>31 to 45</option>
<option value = 4>46+</option>
</select>

</Form>

We have four options in the drop down box, each with a value 1 to 4. It's this value that is going into the variable Age. Because the value from a HTML drop-down box will be a string (text) and not a number, each value for the case was surrounded by double quotes.

Switch statements are an ideal way to check the value returned from a drop down box on a form. Instead of having an alert box in the case statement, you could direct your users to another web page. Like this:

page = document.frmOne.cmbAge.value

switch (page) {
case "1":
document.URL = "page1.html"
break
case "2":
document.URL = "page2.html"
break
case "3":
document.URL = "page3.html"
break
case "4":
document.URL = "page4.html"
break
default:
alert("An error occurred so we're staying here")
}

The default is what you get when none of your case statements are true.

 

All right, that's enough about Control Flow. By now, you should have a good idea of how things like if statements, for loops, and switches work. Of course, we can't expect you to have mastered the subject, so you may well have to revise this section until the knowledge sinks in. There is a steep learning curve here, so don't get too frustrated if you're having problems. We'll now move on to another tricky subject - arrays.

 

Move on to the Next Part -->

<--Back to the JavaScript Contents Page