7/05/2018

Conditional Statements Tutorials in JavaScript (IF ELSE SWITCH)

Conditional Statements in JavaScript are a block of code will be executed if the condition is true. If you are familiar with C, C++, and Java or any other programming language. A conditional statements real-life example is "IF bulb is on 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 following Conditional Statements in JavaScript.


Conditional Statements: JavaScript tutorials.


  1. Types of conditional statements in JavaScript
  • If
  • If...Else
  • Else...If
  • Switch
  1. Diagram of conditional statements in JavaScript
  2. The syntax of conditional statements in JavaScript
  3. Examples of conditional statements in JavaScript
  4. How its work

Conditional Statements in JavaScript:


1) If
2) If...Else
3) Else...If
4) Switch


If: Conditional Statements
   
if a condition is true only when a block of code will be executed. If you are familiar with C and C++, here also if condition works same.

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>


If…Else: Conditional Statements

else if statement is used to handle where something will happen on both true or false conditions. Exactly as c or c++.

If Else Conditional Statements in JavaScript Picture simple example

Syntax

if (condition1==true) {
    //a block of code will be executed for a condition or Conditional Statements 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>


If...Else…If: Conditional Statements

If there are several conditions according to which there will be some decision that code block of JavaScript will be executed is 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 blocks 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, continues 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 doubt 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 assistant. We are committed to helping student first so don't hesitate to ask any doubts and query. Join us and become the part of our organization.

Please share this article to help a newbie student or programmers.

Author Bio: 


Conditional Statements in JavaScript Tutorials is provided by Suman Yadav. Thanks, Suman for the Awesome and Unique article. If you want to submit your article and want to be a member of our ProgrammingWithBasics Family Join us by sending a well-written article more information read Write for Us

No comments:

Post a Comment