JavaScript
Control Structure
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
1 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
Object Oriented Programming (JavaScript)
List of Modules
No. MODULE TITLE MODULE CODE
1 Introduction to JavaScript IS – OOP 223 – 1
JavaScript Programming :
2 IS – OOP 223 – 2
Fundamentals
3 JavaScript Control Structure IS – OOP 223 – 3
4 JavaScript Array Objects IS – OOP 223 – 4
JavaScript Methods, Classes and
5 IS – OOP 223 – 5
Object
6 JavaScript Advance Concepts IS – OOP 223 – 6
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
2 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
MODULE CONTENT
COURSE TITLE: Object-Oriented Programming (JavScript)
MODULE TITLE: JavaScript Control Structures
NOMINAL DURATION: __8___ HRS
SPECIFIC LEARNING OBJECTIVES:
At the end of this module, you MUST be able to:
1. Discuss and Apply Control Structures-Decisions, Loops and Switches.
TOPIC: (SUB TOPIC)
1. Conditional Flow Control
If Statement
If-else Construct
If-else-if Construct
Conditional Operators
Conditional Flow Control
2. Interactive Flow Control
While statement
Do-While statement
3. For Statement
Jump Statement
Break Statement
Continue Statement
ASSESSMENT METHOD/S:
Quiz, Oral Recitation, Peer Learning
REFERENCES:
[Link]
[Link]
[Link]
[Link]
[Link]
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
3 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
Information Sheet
JavaScript Control Structures
Learning Objectives:
After reading this INFORMATION SHEET, YOU MUST be able to:
1. Discuss and Apply Control Structures-Decisions, Loops and Switches.
JavaScript Control Structure
JavaScript - if...else Statement
While writing a program, there may be a situation when you need to adopt one
out of a given set of paths. In such cases, you need to use conditional
statements that allow your program to make correct decisions and perform
right actions.
JavaScript supports conditional statements which are used to perform different
actions based on different conditions. Here we will explain the if..else
statement.
Flow Chart of if-else
The following flow chart shows how the if-else statement works.
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
4 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
JavaScript supports the following forms of if..else statement −
if statement
if...else statement
if...else if... statement.
if statement
The if statement is the fundamental control statement that allows JavaScript
to make decisions and execute statements conditionally.
Syntax
The syntax for a basic if statement is as follows −
if (expression) {
Statement(s) to be executed if expression is true
}
Here a JavaScript expression is evaluated. If the resulting value is true, the
given statement(s) are executed. If the expression is false, then no statement
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
5 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
would be not executed. Most of the times, you will use comparison operators
while making decisions.
Example
Try the following example to understand how the if statement works.
<html>
<body>
<script type = "text/javascript">
<!--
var age = 20;
if( age > 18 ) {
[Link]("<b>Qualifies for driving</b>");
}
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Output
Qualifies for driving
Set the variable to different value and then try...
if...else statement
The 'if...else' statement is the next form of control statement that allows
JavaScript to execute statements in a more controlled way.
Syntax
if (expression) {
Statement(s) to be executed if expression is true
} else {
Statement(s) to be executed if expression is false
}
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
6 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
Here JavaScript expression is evaluated. If the resulting value is true, the given
statement(s) in the ‘if’ block, are executed. If the expression is false, then the
given statement(s) in the else block are executed.
Example
Try the following code to learn how to implement an if-else statement in
JavaScript.
<html>
<body>
<script type = "text/javascript">
<!--
var age = 15;
if( age > 18 ) {
[Link]("<b>Qualifies for driving</b>");
} else {
[Link]("<b>Does not qualify for driving</b>");
}
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Output
Does not qualify for driving
Set the variable to different value and then try...
if...else if... statement
The if...else if... statement is an advanced form of if…else that allows
JavaScript to make a correct decision out of several conditions.
Syntax
The syntax of an if-else-if statement is as follows −
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
7 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
if (expression 1) {
Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
Statement(s) to be executed if expression 3 is true
} else {
Statement(s) to be executed if no expression is true
}
There is nothing special about this code. It is just a series of if statements,
where each if is a part of the else clause of the previous statement.
Statement(s) are executed based on the true condition, if none of the conditions
is true, then the else block is executed.
Example
Try the following code to learn how to implement an if-else-if statement in
JavaScript.
<html>
<body>
<script type = "text/javascript">
<!--
var book = "maths";
if( book == "history" ) {
[Link]("<b>History Book</b>");
} else if( book == "maths" ) {
[Link]("<b>Maths Book</b>");
} else if( book == "economics" ) {
[Link]("<b>Economics Book</b>");
} else {
[Link]("<b>Unknown Book</b>");
}
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
<html>
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
8 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
Output
Maths Book
Set the variable to different value and then try...
JavaScript - Switch Case
You can use multiple if...else…if statements, as in the previous chapter, to
perform a multiway branch. However, this is not always the best solution,
especially when all of the branches depend on the value of a single variable.
Starting with JavaScript 1.2, you can use a switch statement which handles
exactly this situation, and it does so more efficiently than repeated if...else if
statements.
Flow Chart
The following flow chart explains a switch-case statement works.
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
9 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
Syntax
The objective of a switch statement is to give an expression to evaluate and
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.
switch (expression) {
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
10 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
default: statement(s)
}
The break statements indicate the end of a particular case. If they were
omitted, the interpreter would continue executing each statement in each of
the following cases.
We will explain break statement in Loop Control chapter.
Example
Try the following example to implement switch-case statement.
<html>
<body>
<script type = "text/javascript">
<!--
var grade = 'A';
[Link]("Entering switch block<br />");
switch (grade) {
case 'A': [Link]("Good job<br />");
break;
case 'B': [Link]("Pretty good<br />");
break;
case 'C': [Link]("Passed<br />");
break;
case 'D': [Link]("Not so good<br />");
break;
case 'F': [Link]("Failed<br />");
break;
default: [Link]("Unknown grade<br />")
}
[Link]("Exiting switch block");
//-->
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
11 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Output
Entering switch block
Good job
Exiting switch block
Set the variable to different value and then try...
Break statements play a major role in switch-case statements. Try the following
code that uses switch-case statement without any break statement.
<html>
<body>
<script type = "text/javascript">
<!--
var grade = 'A';
[Link]("Entering switch block<br />");
switch (grade) {
case 'A': [Link]("Good job<br />");
case 'B': [Link]("Pretty good<br />");
case 'C': [Link]("Passed<br />");
case 'D': [Link]("Not so good<br />");
case 'F': [Link]("Failed<br />");
default: [Link]("Unknown grade<br />")
}
[Link]("Exiting switch block");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Output
Entering switch block
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
12 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
Good job
Pretty good
Passed
Not so good
Failed
Unknown grade
Exiting switch block
Set the variable to different value and then try...
JavaScript - While Loops
While writing a 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.
JavaScript supports all the necessary loops to ease down the pressure of
programming.
The while Loop
The most basic loop in JavaScript is the while loop which would be discussed
in this chapter. 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.
Flow Chart
The flow chart of while loop looks as follows −
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
13 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
Syntax
The syntax of while loop in JavaScript is as follows −
while (expression) {
Statement(s) to be executed if expression is true
}
Example
Try the following example to implement while loop.
<html>
<body>
<script type = "text/javascript">
<!--
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
14 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
var count = 0;
[Link]("Starting Loop ");
while (count < 10) {
[Link]("Current Count : " + count + "<br />");
count++;
}
[Link]("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Output
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...
The do...while Loop
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.
Flow Chart
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
15 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
The flow chart of a do-while loop would be as follows −
Syntax
The syntax for do-while loop in JavaScript is as follows −
do {
Statement(s) to be executed;
} while (expression);
Note − Don’t miss the semicolon used at the end of the do...while loop.
Example
Try the following example to learn how to implement a do-while loop in
JavaScript.
<html>
<body>
<script type = "text/javascript">
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
16 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
<!--
var count = 0;
[Link]("Starting Loop" + "<br />");
do {
[Link]("Current Count : " + count + "<br />");
count++;
}
while (count < 5);
[Link] ("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Output
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...
JavaScript - For Loop
The 'for' loop is the most compact form of looping. It includes the following
three important parts −
The loop initialization where we initialize our counter to a starting
value. The initialization statement is executed before the loop begins.
The test statement which will test if a given condition is true or not. If
the condition is true, then the code given inside the loop will be executed,
otherwise the control will come out of the loop.
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
17 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
The iteration statement where you can increase or decrease your
counter.
You can put all the three parts in a single line separated by semicolons.
Flow Chart
The flow chart of a for loop in JavaScript would be as follows −
Syntax
The syntax of for loop is JavaScript is as follows −
for (initialization; test condition; iteration statement) {
Statement(s) to be executed if test condition is true
}
Example
Try the following example to learn how a for loop works in JavaScript.
<html>
<body>
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
18 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
<script type = "text/javascript">
<!--
var count;
[Link]("Starting Loop" + "<br />");
for(count = 0; count < 10; count++) {
[Link]("Current Count : " + count );
[Link]("<br />");
}
[Link]("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Output
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...
JavaScript - Loop Control
JavaScript provides full control to handle loops and switch statements. There
may be a situation when you need to come out of a loop without reaching its
bottom. There may also be a situation when you want to skip a part of your
code block and start the next iteration of the loop.
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
19 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
To handle all such situations, JavaScript provides break and continue
statements. These statements are used to immediately come out of any loop or
to start the next iteration of any loop respectively.
The break Statement
The break statement, which was briefly introduced with the switch statement,
is used to exit a loop early, breaking out of the enclosing curly braces.
Flow Chart
The flow chart of a break statement would look as follows −
Example
The following example illustrates the use of a break statement with a while
loop. Notice how the loop breaks out early once x reaches 5 and reaches to
[Link] (..) statement just below to the closing curly brace −
<html>
<body>
<script type = "text/javascript">
<!--
var x = 1;
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
20 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
[Link]("Entering the loop<br /> ");
while (x < 20) {
if (x == 5) {
break; // breaks out of loop completely
}
x = x + 1;
[Link]( x + "<br />");
}
[Link]("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Output
Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...
We already have seen the usage of break statement inside a switch statement.
The continue Statement
The continue statement tells the interpreter to immediately start the next
iteration of the loop and skip the remaining code block. When a continue
statement is encountered, the program flow moves to the loop check expression
immediately and if the condition remains true, then it starts the next iteration,
otherwise the control comes out of the loop.
Example
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
21 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
This example illustrates the use of a continue statement with a while loop.
Notice how the continue statement is used to skip printing when the index
held in variable x reaches 5 −
<html>
<body>
<script type = "text/javascript">
<!--
var x = 1;
[Link]("Entering the loop<br /> ");
while (x < 10) {
x = x + 1;
if (x == 5) {
continue; // skip rest of the loop body
}
[Link]( x + "<br />");
}
[Link]("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Output
Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...
Bulacan Date Developed:
Polytechnic AY 2021 - 2022
22 of 22
BSIS / ACT Date Revised:
IS – OOP – 223 College January 12, 2023
Object-Oriented
Programming Developed by:
(JavaScript) Document No. Reynaldo P. Santos
Revision # 02
