Conditional Statements in JavaScript are a block of code that will be executed if the condition is true. If you are familiar with C, C++, Java or any other programming language. A conditional statement's real-life example is "IF bulb is on the means power supply on ELSE IF bulb is off meant switch is off or no electricity ELSE any other issue", with the example of the bulb, switch, and electricity we can understand a Conditional Statements in JavaScript. In this tutorial, we are going to learn the following Conditional Statements in JavaScript.
Types of Conditional Statements in JavaScript
- Types of conditional statements in JavaScript
- If
- If...Else
- Else...If
- Switch
- Diagram of conditional statements in JavaScript
- The syntax of conditional statements in JavaScript
- Examples of conditional statements in JavaScript
- How its work
Types of Conditional Statements
- If Conditional Statement
- If-Else Conditional Statement
- Else-If Conditional Statement
- Switch Conditional Statement
1. If Conditional Statements
Syntax
if (condition is true)
{
//a block of code or Conditional Statements in JavaScript
}
Example:
<!DOCTYPE html>
<html>
<body>
<p id="ifCondition"></p>
<script>
var i=17;
if (i < 18)
{
document.getElementById("ifCondition").innerHTML =
"Hello JavaScript!";
}
</script>
</body>
</html>2. If-Else Conditional Statement
else if statement is used to handle where something will happen on both true or false conditions. Exactly like C or C++.
Syntax
if (condition1==true) {
//a block of code will be executed for a condition or Conditional Statement in JavaScript
}
else {
//a block of code will be executed if false or Conditional Statements in JavaScript
}
Example:
<!DOCTYPE html>
<html>
<body>
<p id="ifelseCondition"></p>
<script>
var i=19;
if (i < 18)
{
document.getElementById("ifelseCondition").innerHTML =
"Hello JavaScript inside if Condition!";
}
else
{
document.getElementById("ifCondition").innerHTML =
"Hello JavaScript inside else Condition!";
}
</script>
</body>
</html>3. Else-If Conditional Statement
If there are several conditions according to which there will be some decision the code block of JavaScript will be executed work with if-else if conditional statements.
if (condition1) {
//conndition1 is true
//JS block of code will be executed or Conditional Statements in JavaScript
} else if (condition2) {
//Condition2 is true
//JS block of code will be executed or Conditional Statements in JavaScript
}
else {
//JS block of code will be executed or Conditional Statements in JavaScript
}
Example:
<!DOCTYPE html>
<html>
<body>
<p id="elseifCondition"></p>
<script>
var i=19;
if (i < 18)
{
document.getElementById("elseifCondition").innerHTML =
"Hello JavaScript inside if Condition!";
}
else if(i>18 && i<28)
{
document.getElementById("elseifCondition").innerHTML =
"Hello JavaScript inside else if Condition!";
}
else
{
document.getElementById("elseifCondition").innerHTML =
"Hello JavaScript inside else Condition!";
}
</script>
</body>
</html>Switch Conditional Statements
The switch statement is used one code block to be executed among many.
How It Works:
Firstly the expression of the switch statement is evaluated once and then the value is matched with one of the switch cases and the corresponding code block is executed.
If no case is matched with the value of the expression the default condition is executed at the end.
If no default statement is there, continue to execute the statements after Switch.
switch(exp) {
case 1:
//code block or Conditional Statements in JavaScript
break;
case 2:
//code block or Conditional Statements in JavaScript
break;
default:
//code block or Conditional Statements in JavaScript
}
Example:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var grade='A';
switch (grade)
{
case 'A':
document.write("Excellent Student");
break;
case 'B': document.write("Medium");
break;
case 'C': document.write("Fail");
break;
default: document.write("Don’t Know")
break;
}
</script>
</body>
</html>Also, you can write a common code for multiple cases, If they produce the same result.
That is Like:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var grade='B';
switch (grade)
{
case 'A':
case 'B':
document.write("Excellent Student");
break;
case 'C': document.write("Medium");
break;
case 'D': document.write("Fail");
break;
default: document.write("Don’t Know")
break;
}
</script>
</body>
</html>Last Words
If you have any doubts and need any help feel free to contact us or you can comment below, we are responsible to reply within 24 hours and you can like our Facebook page or Facebook groups for any personal assistance. We are committed to helping students first so don't hesitate to ask any doubts or queries. Join us and become a part of our organization.
Please share this article to help a student or programmer.
0 Comments: