• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JavaScript Switch Statement

April 9, 2014 //  by Krishna Srinivasan//  Leave a Comment

The switch statement is same as of if/else statement, instead using multiple if/ else statement we are using switch statement. The switch statement is selection control mechanism which allows value of a variable or expression to change the flow of the execution using multiple options. There are several options to be chosen from the available ones. Depending on the value of variable, a particular statement will be executed and if no value matches with any of the available options then default value will be executed using default case statement. Break statement is used to come out of the switch statement.

JavaScript Switch – Syntax

[code lang=”html”] switch(expr)<br>
{<br>

case 1:
// statement(s)<br>
case 2:
//statement(s)<br>
….<br>

default:
// statement(s)<br>
}
[/code]

Example Using Break

[code lang=”html”] <!DOCTYPE html>
<head>
<title>Switch Statement</title>
</head>
<body>
<p>Click the button to display current month.</p>

<button onclick="sampleFunction()">Click Me</button>
<p id="demo"></p>
<script type="text/javascript">
function sampleFunction(){
var x;
var month=new Date().getMonth();

switch(month)
{
case 1:document.write("January <br>");
break;

case 2:document.write("February <br>");
break;

case 3:document.write("March <br>");
break;

case 4:document.write("April <br>");
break;

case 5:document.write("May <br>");
break;

case 6:document.write("June <br>");
break;

case 7:document.write("July <br>");
break;

case 8:document.write("August <br>");
break;

case 9:document.write("September <br>");
break;

case 10:document.write("October <br>");
break;

case 11:document.write("November <br>");
break;

case 12:document.write("December <br>");
break;

default:document.write(" Select correct month!!!<br>");
}
document.getElementById("demo").innerHTML=x;

}

</script>

</body>
</html>
[/code]

  • In the above example we have used switch statement with several cases i.e. case 1 to case 12.
  • We have declared a variable month, which is initialized to 4.
  • When you click on the button “Click Me”, the current month gets dispalyed.
  • When none of the statement is executed, then the default statement is executed.
  • Break statement is used to come out of the switch statement.
  • switch(month) is used to choose particular month from the available list of month.

Example Application Test

  • Save the file as switch_using_break.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser.

When the execution process is completed successfully we will get the following output:

JavaScript Switch statement

Now click on the button “Click Me” and the current month will be displayed as below:
JavaScript Switch statement 1

Without using Break

[code lang=”html”] <!DOCTYPE html>
<head>
<title>Switch Statement</title>
</head>
<body>
<p>Click the button to display current month.</p>

<button onclick="sampleFunction()">Click Me</button>
<p id="demo"></p>
<script type="text/javascript">
function sampleFunction(){
var x;
var month=new Date().getMonth();

switch(month)
{
case 1:document.write("January <br>");

case 2:document.write("February <br>");

case 3:document.write("March <br>");

case 4:document.write("April <br>");

case 5:document.write("May <br>");

case 6:document.write("June <br>");

case 7:document.write("July <br>");

case 8:document.write("August <br>");

case 9:document.write("September <br>");

case 10:document.write("October <br>");

case 11:document.write("November <br>");

case 12:document.write("December <br>");

default:document.write(" Select correct month!!!<br>");
}
document.getElementById("demo").innerHTML=x;

}

</script>

</body>
</html>
[/code]

  • In the above example we have used switch statement with several cases i.e. case 1 to case 12 without using break statement.
  • As we are not using break statement in the program, so all names of the month starting the current month will get displayed.

Example Application Test

  • Save the file as withoutusing_break.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser.

When the execution process is completed successfully we will get the following output:

JavaScript Switch statement 2

Now click on the button “Click Me” and the current month alongwith other months will be displayed as below:
JS_nobreak2

Category: JavaScriptTag: JavaScript Tutorials

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « JSF SystemEventListener – UIComponent Events Example
Next Post: Javascript – Dynamically Loading External JavaScript or CSS File »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

np.zeros

A Complete Guide To NumPy Functions in Python For Beginners

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact