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:
Now click on the button “Click Me” and the current month will be displayed as below:
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:
Now click on the button “Click Me” and the current month alongwith other months will be displayed as below:
Leave a Reply