JavaScript If Statements
The JavaScript if-else statement is used to execute
the code whether condition is true or false.
There are three forms of if statement in JavaScript.
1. If Statement
2. If else statement
3. if else if statement
1. JavaScript If statement
It evaluates the content only if expression is true. if a certain
condition is true then a block of statement is executed
otherwise not.
Syntax:
if(condition){
//content to be evaluated
}
Syntax Explanation:
Here, condition after evaluation will be either true or false. if
statement accepts boolean values – if the value is true then it
will execute the block of statements under it.
If we do not provide the curly braces ‘{‘ and ‘}’
after if( condition ) then by default if statement will consider
the immediate one statement to be inside its block.
Flowchart:
Example:
<html>
<body>
<script>
var a=20;
if(a>10){
document.write("value of a is greater
than 10");
}
</script>
</body>
</html>
OUTPUT:
value of a is greater than 10
2. if-else Statement
The if statement alone tells us that if a condition is true it
will execute a block of statements and if the condition is
false it won’t.
But what if we want to do something else if the condition is
false. Here comes the else statement. We can use the else
statement with if statement to execute a block of code when
the condition is false.
Syntax:
if (condition) {
// Executes this block if condition is true
}
else {
// Executes this block if condition is false
}
Flowchart:
Example:
<html>
<body>
<script>
var a=20;
if(a%2==0)
document.write(a, "is even number");
else
document.write(a, " is odd number");
</script>
</body>
</html>
OUTPUT:
3. if-else-if ladder
Here, a user can decide among multiple options. The if
statements are executed from the top down.
As soon as one of the conditions controlling the if is true,
the statement associated with that if is executed, and the
rest of the ladder is bypassed. If none of the conditions is
true, then the final else statement will be executed.
Syntax:
if (condition)
statement;
else if (condition)
statement;
……
else
Flowchart:
Example:
<html>
<body>
<script>
var a=20;
if(a==10){
document.write("a is equal to 10");
}
else if(a==15){
document.write("a is equal to 15");
}
else if(a==20){
document.write("a is equal to 20");
}
else{
document.write("a is not equal to 10, 15
or 20");
}
</script>
</body>
</html>
OUTPUT:
a is equal to 20
Switch Case in JavaScript
The switch case statement in JavaScript is also used for
decision making purposes. In some cases, using the
switch case statement is seen to be more convenient over
if-else statements. Consider a situation when we want to
test a variable for hundred different values and based on
the test we want to execute some task. Using if-else
statement for this purpose will be less efficient over
switch case statements and also it will make the code look
messy.
The switch case statement is a multi-way branch
statement. It provides an easy way to dispatch execution
to different parts of code based on the value of the
expression.
Syntax:
switch (expression) {
case value1:
statement1;
[ break; ]
case value2:
statement2;
[ break; ]
………..
case valueN:
statementN;
[ break; ]
[ default:
statementDefault; ]
Syntax Explanation:
expression can be of type numbers or strings.
Duplicate case values are not allowed.
The default statement is optional. If the expression
passed to switch does not matches with value in any
case then the statement under default will be
executed.
The break statement is used inside the switch to
terminate a statement sequence.
The break statement is optional. If omitted,
execution will continue on into the next case.
Flowchart
Example:
<!DOCTYPE html>
<html>
<body>
<script>
var grade='B';
var result;
switch(grade){
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
default:
result="No Grade";
}
document.write(result);
</script>
</body>
</html>
OUTPUT:
B Grade
Loops in JavaScript
Looping in programming languages is a feature which
facilitates the execution of a set of instructions/functions
repeatedly while some condition evaluates to true.
Javascript provides different types of loops.
1. while loop
2. do..while loop
3. for loop
1. while loop
A while loop is a control flow statement that allows
code to be executed repeatedly based on a given
Boolean condition. The while loop can be thought of
as a repeating if statement.
Syntax:
while (condition)
{
code to be executed
}
The condition/expression we pass inside the
parenthesis of the while loop must evaluate to true
otherwise the statements we write inside the block of
the while loop will not be executed.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>Numbers from 11 to 15</h1>
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br>");
i++; //i=i+1;
}
</script>
</body>
</html>
OUTPUT:
Numbers from 11 to 15
11
12
13
14
15
2. do .. while loop
do while loop is similar to while loop with the only
difference that it checks for the condition after
executing the statements.
No matter if the condition inside the while
parenthesis is true or not the loop will run at least
once.
Syntax :
do{
//code to be executed
}while (condition);
Example:
<html>
<body>
<script>
var i=21;
do{
document.write(i + "<br>");
i++;
}while (i<=20);
</script>
</body>
</html>
OUTPUT:
21
3. For Loop :
The JavaScript for loop iterates the elements for the
fixed number of times. It should be used if number of
iteration is known. The syntax of for loop is given
below.
Syntax:
for (initialization; condition; increment/decrement)
{
//code to be executed
}
Syntax Explanation:
Initialization condition: Here, we initialize the variable
in use. It marks the start of a for loop. An already
declared variable can be used or a variable can be
declared, local to loop only.
Testing Condition: It is used for testing the exit
condition for a loop. It must return a boolean value. It
is also an Entry Control Loop as the condition is
checked prior to the execution of the loop statements.
Statement execution: Once the condition is evaluated
to true, the statements in the loop body are executed.
Increment/ Decrement: It is used for updating the
variable for next iteration.
Loop termination: When the condition becomes false,
the loop terminates marking the end of its life cycle.
Example:
<!DOCTYPE html>
<html>
<body>
<script>
for (i=1; i<=5; i++)
{
document.write("Value of i is :", i +"<br>")
}
</script>
</body>
</html>
OUTPUT:
Value of i is :1
Value of i is :2
Value of i is :3
Value of i is :4
Value of i is :5
