JavaScript – If-Else-Switch
if…else – switch
Conditional Statements are used to execute code only if a specified condition is true.
If Statement:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get a "Good day" greeting if the time is less than 20:00.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
{
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Syntax:
if (condition)
{
code to be executed if condition is true
}
If…else Statement:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get a time-based greeting.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Syntax:
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
If…else if…else Statement:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get a time-based greeting.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Syntax:
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true
}
Switch Statement:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display what day it is today.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() // You can write a switch inside a function
{
var x;
var d=new Date().getDay(); // result 0=Sunday 1=Monday etc...
switch (d)
{
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Syntax:
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
}
default Keyword:
<html>
<body>
<p>Click the button to display a message based on what day it is today.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
{
case 6:
x="Today it's Saturday";
break;
case 0:
x="Today it's Sunday";
break;
default:
x="Looking forward to the Weekend"; // What to do if there is no match.
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Syntax:
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
