Conditional statements are used to perform different actions based on different conditions , you need to use conditional statements that allow your program to make correct decisions and perform right actions.
In JavaScript we have the following conditional statements:
Use if to specify a block of code to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false
Use switch to specify many alternative blocks of code to be executed
if Statement
if statement is used to specify a JavaScript code to be executed if a condition is true , here a JavaScript expression is evaluated , If the resulting value is true then the given statements are executed. If the expression is false, then no statement would be not executed.
if Statement Syntax
if (condition) {
code to be executed if the condition is true }
else Statement
The else statement is used to specify a Javascript code to be executed if the condition is false.
else Statement Syntax
if (condition) {
code to be executed if the condition is true } else {
code to be executed if the condition is false }
else if Statement
The else if statement is used to specify a new condition , if the first condition is false , the Else If statement is an extension to the If Statement that allows you to create as many conditional statements as you want .
else if Syntax
if (condition1) {
code to be executed if condition1 is true } else if (condition2) {
code to be executed if the condition1 is false and condition2 is true }
else {
code to be executed if the condition1 is false and condition2 is false }
Exampe for javaScript Conditions
<!DOCTYPE html>
<html>
<body>
<h3>This is the example of if Statement </h3>
<p>Click the button to know your driving eligibility</p>
<button onclick="myFunction()"> Try it</button>
<p id="demo">
</p>
<script> function myFunction() { var message; var age = 23 ; if (age > 19) { message="you are eligible to drive"; } document.getElementById("demo") .innerHTML = message; }
</script>
<h3>This is the example of else Statement </h3>
<p>Click the button to know your driving eligibility</p>
<button onclick="myFunction1()"> Try it</button>
<p id="demo1"></p>
<script>
function myFunction1() { var message1; var age = 1; if (age > 19) { message1="you are eligible to drive"; } else { message1= "not eligible to drive"; } document.getElementById("demo1") .innerHTML = message1; }
</script>
<h3>This is the example of else if Statement </h3>
<p>Click the button to know your driving eligibility</p>
<button onclick="myFunction2()"> Try it</button>
<p id="demo2"></p>
<script>
function myFunction2() { var message2; var age = 19; if (age < 19) { message2 = "not eligible to drive"; } else if (age > 19) { message2="you are eliglibe to drive"; } else { message2="you have just turned 19!"; } document.getElementById("demo2") .innerHTML = message2; }
</script>
</body>
</html>
JAVASCRIPT SWITCH
The switch statement is used to give an expression to evaluate several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If nothing matches, a default condition will be used.
JAVASCRIPT SWITCH SYNTAX
switch(expression) {
case n: Code Statment
break;
case n: Code Statment
break;
default: Default Code Statment
}
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.
The break statements indicate the end of a particular case , this will stop the execution of more code and case testing.
The default keyword specifies the code to run if there is no case match .
Example For JavaScript Switch
<!DOCTYPE html>
<html>
<body>
<h2>Example For JavaScript Switch </h2>
<h3>Enter your grade to know your marks</h3>
<script> var grade='U'; document.write("GradeMarks Range :"); switch (grade) { case 'S': document.write (" 91 to 100 Marks"); break; case 'A': document.write (" 81 to 90 Marks"); break; case 'B': document.write (" 71 to 80 Marks"); break; case 'C': document.write (" 61 to 70 Marks"); break; case 'U': document.write(" Failed"); break; default: document.write ("Unknown Grade<br />") }
</script>
</body>
</html>
JAVASCRIPT LOOP
While writing a HTML program, you may encounter a situation where you need to perform an action over and over again. In such situations, you would need to write loop statements to reduce the number of lines.
Different Kinds of Loops
JavaScript supports different kinds of loops they are :
for - loops through a block of code a number of times.
for/in - loops through the properties of an object.
while - loops through a block of code while a specified condition is true.
do/while - also loops through a block of code while a specified condition is true.
Syntax For JavaScript loop
For Loop :
for (statement 1; statement 2; statement 3) {
code to be executed
}
While Loop :
while (condition)
{
code to be executed
}
Example for For Loop
<!DOCTYPE html>
<html>
<body>
<h3> Example for For Loop </h3> <p>Click the button to loop through a block of code five times.</p>
<button onclick="Function()"> Try it
</button>
<p id="Sample"></p>
<script> function Function() { var text = ""; var i; for (i = 1; i < 6; i++) { text += "The number is " +i+ "<br>"; } document.getElementById("Sample") .innerHTML = text; }
</script>
</body>
</html>
JavaScript For/In Loop
The for/in loop is used to loop through an object's properties.In each iteration, one property from object is assigned to variablename and this loop continues till all the properties of the object are exhausted.
Example for For/In Loop
<!DOCTYPE html>
<html>
<body>
<h3>Example for For/In Loop </h3>
<p id="sample"></p>
<script>
var txt = ""; var person = {name:"John", gender:"Male", age:28}; var x; for (x in person) { txt += person[x] + " "; } document.getElementById("sample") .innerHTML = txt;
</script>
</body>
</html>
While Loop
The purpose of a while loop is to execute a statement or code block repeatedly as long as an expression is true, once the expression becomes false, the loop terminates.
Example For While Loop
<!DOCTYPE html>
<html>
<body>
<h3> Example For While Loop </h3> <p>Click the button to loop through a block of code as long as i is less than 12.</p>
<button onclick="Function()"> Try it</button>
<p id="sample"></p> <script> function Function() { var text = ""; var i = 1; while (i < 12) { text += "<br>The number is " + i; i++; } document.getElementById("sample") .innerHTML = text; }
</script>
</body>
</html>
Do/While Loops
The do/while loop is similar to the while loop except that the condition check happens at the end of the loop. This means that the loop will always be executed at least once, even if the condition is false. Then it will repeat the loop as long as the condition is true.
Example For Do/While Loop
<!DOCTYPE html>
<html>
<body>
<h3>Example For Do/While Loop </h3> <p>Click the button to loop through a block of code as long as i is less than 12.</p>
<button onclick="Function()"> Try it</button> <p id="sample"></p>
<script>
function Function() { var text = "" var i = 1; do { text += "<br>The number is " + i; i++; } while (i < 12) document.getElementById("sample") .innerHTML = text; }
</script>
</body>
</html>
To be continue NEXT POST...
Thanks for reading.
Comments