Posted By
Bajarangi soft ,
Posted On 25-09-2020
The JavaScript Switch Statement
Use the switch statement to select one of many code blocks to be executed.
Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
How to switch statements
The switch expression is evaluated once.
The value of the expression is compared with the values of each case.
If there is a match, the associated block of code is executed.
If there is no match, the default code block is executed.
Example(1)
<script type = "text/javascript">
<!--
var grade = 'C';
document.getElementById("demo").innerHTML = "Entering switch block";
switch (grade) {
case 'A': document.getElementById("demo1").innerHTML = "Excellent";
break;
case 'B': document.getElementById("demo1").innerHTML = "Good";
break;
case 'C':document.getElementById("demo1").innerHTML = "Average";
break;
case 'D': document.getElementById("demo1").innerHTML = "Satisfied";
break;
case 'E': document.getElementById("demo1").innerHTML = "Pass";
break;
case 'F': document.getElementById("demo1").innerHTML = "Failed";
break;
default: document.getElementById("demo1").innerHTML = "Unknown grade";
}
document.getElementById("demo").innerHTML = "Exiting switch block";
//-->
</script>
In above example when you enter grade as A Switch statement returns Excellent as output.
The break Keyword
When JavaScript reaches a break keyword from expression, it breaks out of the switch block.
This will stop the execution of inside the block.
It is not necessary to break the last case in a switch block. The block breaks (ends) there anyway.
The default Keyword
The default keyword specifies the code to run if there is no case match:
Example(2)
The getDay() method returns the weekday as a number between 0 and 6.
If today is neither Saturday (6) nor Sunday (0), write a default message:
<script>
var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>
Complete code of Conditions Statements In Java Script
<!DOCTYPE html>
<html>
<head>
<title> Switch Statements In JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
h3{
color:red;
}
</style>
<body>
<div class="container">
<br>
<br>
<div class="text-center">
<h1> Switch Statements In JavaScript</h1>
</div>
<br>
<div class="well">
<h1 id="demo"></h1>
<h1 id="demo1"></h1>
<h1 id="demo2"></h1>
<h1 id="demo4"></h1>
</div>
<br>
</div>
</body>
</html>
<script type = "text/javascript">
<!--
var grade = 'C';
document.getElementById("demo").innerHTML = "Entering switch block";
switch (grade) {
case 'A': document.getElementById("demo1").innerHTML = "Excellent";
break;
case 'B': document.getElementById("demo1").innerHTML = "Good";
break;
case 'C':document.getElementById("demo1").innerHTML = "Average";
break;
case 'D': document.getElementById("demo1").innerHTML = "Satisfied";
break;
case 'E': document.getElementById("demo1").innerHTML = "Pass";
break;
case 'F': document.getElementById("demo1").innerHTML = "Failed";
break;
default: document.getElementById("demo1").innerHTML = "Unknown grade";
}
document.getElementById("demo").innerHTML = "Exiting switch block";
//-->
var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo4").innerHTML = "Today is " + day;</script>