JavaScript Controls and

Loops
Jayson Angelo E. Vale Cruz
Part 1
JavaScript Conditional and Looping Statements
Conditional Statements
Chapter 13 – Controls and Loops
Introduction of the topic
• 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.
• Also Looping statements to repeat the execution of a
certain task based on the given conditions.
Forms of Conditional Statement
• Simple If Statement
• If-Else Statement
• Ladderized If-Else Statement
• Nested If-Else Statement
• Switch Case Statement
 Simple If-statement
• It is the fundamental control statement that allows
JavaScript to make decisions and execute statements
conditionally
Syntax for Simple If Statement
Example Code using Simple If
statement
Output
 If-Else statement
• It is the statement is the next form of control statement
that allows JavaScript to execute statements in a more
controlled way
Syntax for If-Else Statement
Example Code using Simple If
statement
Output
 Ladderized If-Else statement
• It is the advanced form of if…else that allows JavaScript to
make a correct decision out of several conditions
Syntax for If-Else Statement
Example Code using Simple If
statement
Output
 Nested If-Else statement
• It is a conditional statements that executes a condition
inside of another condition
• It called as “If within an If”
Syntax for Nested If-Else Statement
Switch Statement
Switch Case
• Switch case statement allows us to make decisions from
multiple choices.
• Integer expression must yield an integer value like 1, 2, 3,
etc. The keyword case is followed by an integer or a
character constant.
• Each constant in each case must be different from all the
others. The “do this” lines in the above form of switch
represent any valid C statement.
Structure of Switch Statement
Example
• “Break” always used with the switch statement to
terminate the switch statement or to prevent the entry in
other case.
Example with Break
The Flow of Switch Statement
• It is not compulsory to put cases in ascending order as we
did above. We can place them in any order we want.
• You are also allowed to use char values in case and switch
as shown in the following program
• If a statement doesn’t belong to any case the compiler
won’t report an error. However, the statement would
never get executed. For example, in the following program
the printf( ) never goes to work.
Example
switch(a)
{
printf(“Welcome to Switch”);

case 1:
printf(“HI”);
break;
}
• Relational Expression like i>5 are not allowed in any case.
Even float values not allowed in any case .
• We can check the value of any expression in a switch. Thus
the following switch statements are legal.

• switch ( i-j * k )
• switch ( 3 + 9 % 4 * i)
• switch ( a < 5 || b > 7 )
• Expressions can also be used in cases provided they are
constant expressions. Thus case 13 + 7 is correct, however, case
a + b is incorrect.
• switch may occur within another, but in practice it is rarely
done. Such statements would be called nested switch
statements.
• The switch statement is very useful while writing menu driven
programs
• Even if there are multiple statements to be executed in each
case there is no need to enclose them within a pair of braces
(unlike if, and else).
Advantages of Switch over if-else
• compiler generates a jump table for a switch during
compilation. As a result, during execution it simply refers
the jump table to decide which case should be executed,
rather than actually checking which case is satisfied.
• As against this, if-else are slower because they are
evaluated at execution time.
Disadvantages of Switch over if-else
• A float expression cannot be tested using a switch
• Cases can never have variable expressions (for example it
is wrong to say
• case a +3 : )
• Multiple cases cannot use same expressions. Thus the
following switch is illegal:
Looping Statements
Chapter 13 – Controls and Loops
Introduction
• 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.
Pre Test Loop VS Post Test Loop

Pre-Test Loop Post Test Loop

• It is a type of Looping • It is a type of Looping
Statement that test the Statement that executes
condition before executing the statement before it
the statement inside the repeats the execution of
Loop Body the loop body based on
the loop condition
Forms of Looping Statement
• While Loop
• For Loop
• Do While Loop
• For-In Loop
• Nested Loop
While Loop Statement
• 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.
Flowchart of While Loop
Syntax of While Loop Statement
Sample While Loop
Output
count Output
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
10
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.
Flowchart of Do-While Loop
Syntax
Sample While Loop
Output
count Output
0 0
1 1
2 2
3 3
4 4
5
For Loop Statement
• 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.
• 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.
Flowchart of For Loop
Syntax of For Loop
Sample
Output
count Output
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
10
For-In Loop
• The for...in loop is used to loop through an object's
properties.
• As we have not discussed Objects yet, you may not feel
comfortable with this loop.
• But once you understand how objects behave in
JavaScript, you will find this loop very useful.
Syntax of For-In Loop
Sample
Output
Reference
• JavaScript Tutorial from Tutorialspoint.com
• Retrieved from tutorialspoint.com
• ICTopia WebScripting from TechFactors Inc.
That’s all for the first part
topic
JavaScript Controls and Loops (Part 1)