Module II: Conditional and Control Statements

in JavaScript
U23CS381 - ADD Session by
Dr. S. Sampath Kumar, AP/CSE

09-11-2023 Conditional and Control Statements in JavaScript 1

 2 09-11-2023

Agenda
 Introduction
 Condition Statement
 Ternary Operator
 Control Statement
 Jump Statements

Conditional and Control Statements in JavaScript

 3 09-11-2023

Module II: Interactive Web Design using JavaScript

Introduction - JavaScript including Techniques -

Variables and Operators - Conditional and Control
Statements - Data Types and Functions – Events - Form
Validation - Page Redirect - Java Script Exception
Handling - Document Object Model (DOM)

Conditional and Control Statements in JavaScript

 4 09-11-2023

Course Outcomes:
CO. Outcome K Level

CO1 (Apply) Understand and apply HTML and CSS concepts K3

(Apply) Understand and apply JavaScript concepts for dynamic web page
CO2 K3
design

CO3 (Apply) Understand and apply shell commands and GIT workflow K2

CO4 (Apply) Design and develop mobile applications K3

CO5 (Apply) Design and develop mobile applications K2

Conditional and Control Statements in JavaScript

 5 09-11-2023

Challenge time:
➢ Different types of Operators supported by JS
➢ Snake Case
➢ Ternary Operator
➢ Typeof()

Conditional and Control Statements in JavaScript

 6 09-11-2023

Introduction:
➢ The program can decide which statements to execute based
on a condition.
➢ Conditional statements are used through the various
programming languages to instruct the computer on making
decisions when given some conditions.
➢ These decisions are made if the pre-stated conditions are
either true or false, depending on the functions the programmer
has in mind.

Conditional and Control Statements in JavaScript

 7 09-11-2023

Control Statements:
➢ The control statements are used to control the order of execution
of the statements.
➢ The two significant types of control statements available in JS:
❖ the conditional or decision-making statements and
❖ the repetitive statements
➢ Decision-making Statements: if, if-else, switch
➢ Repetitive statements: for, while, do-while

Conditional and Control Statements in JavaScript

 8 09-11-2023

Conditional or Decision-Making Statement:

➢ The Java if statement is used to test the condition.
➢ It checks the boolean condition: true or false.

➢ There are various types of if statements in JS.

❖ if statement
❖ if-else statement
❖ nested if statement
❖ if-else-if ladder
➢ Switch statement
Conditional and Control Statements in JavaScript
 9 09-11-2023

Challenge time:
 List
all relational operators.
 Assuming that x = 1, guess the result of the following Boolean
expressions:
➢ (x > 0)
➢ (x < 0)
➢ (x != 0)
➢ (x >= 0)
➢ (x != 1)

Conditional and Control Statements in JavaScript

 10 09-11-2023

1.1. if Statement in JavaScript:

➢ A one-way if statement in javascript executes the statements only
if the condition is true.
➢ Note: if statement can be executed independently, i.e., without
any else statement.
➢ Syntax:
if(boolean-expression){
//Executes if the condition is true
}

Conditional and Control Statements in JavaScript

 11 09-11-2023

1.2. The if...else Statement in JavaScript:

➢ If-else statements are also known as conditional statements. This
is so because of their property of executing a certain process
only if a certain condition is satisfied.
➢ The else block isn't mandatory, and it is defined only when we
want to address the failure of the condition.
➢ Syntax:
if(condition){
//Executes if the condition is true
}else{
//Executes if the condition is false
}
Conditional and Control Statements in JavaScript
 12 09-11-2023

Flowchart of the if else Statement

Conditional and Control Statements in JavaScript

 13 09-11-2023

1.3. Nested if-else Statement in JavaScript:

➢ Sometimes, we encounter conditions where a specific operation
can be processed only when multiple conditions are satisfied.
➢ A nested if-else statement can be declared by simply declaring
an if-else statement inside an if statement of an else statement.
➢ The inner if statement is said to be nested inside the outer if
statement.
➢ The inner if statement can contain another if statement.

Conditional and Control Statements in JavaScript

 14 09-11-2023

Syntax:
//nested if-else statement
if(condition1){
if(condition){
//code
}
else{
//code
}
}
Conditional and Control Statements in JavaScript
 15 09-11-2023

1.4 Multi-Way if-else Statements:

➢ The if-else-if statement contains the if-statement followed by
multiple else-if statements.
➢ It is the chain of if-else statements that create a decision tree
where the program may enter in the block of code where the
condition is true.
➢ We can also define an else statement at the end of the chain.

Conditional and Control Statements in JavaScript

 16 09-11-2023

Syntax:
if(condition 1) {
statement 1; //executes when condition 1 is true
}
else if(condition 2) {
statement 2; //executes when condition 2 is true
}
else {
statement 3;
//executes when all the conditions are false
}
Conditional and Control Statements in JavaScript
 17 09-11-2023

Ternary Operator:
➢ It is a special operator which has three operands.
➢ In JavaScript, there is only one such operator i.e. Conditional
Operator ( ?: ).
➢ This operator is an alternative for an if-else statement.
➢ It helps you to write any 'if-else' or 'conditional' blocks in a very
crisp way and also makes our code look clean and simpler.
➢ It is commonly referred to as the inline-if or ternary-if operator.

Conditional and Control Statements in JavaScript

 18 09-11-2023

Ternary Operator:

Conditional and Control Statements in JavaScript

 19 09-11-2023

1.5 ‘switch’ Statements in JavaScript:

➢ Switch case in Javascript can be defined as an equivalent of
an if-else statement.
➢ The switch statement takes an expression and evaluates it with
respect to other cases and then outputs the values associated
with the case that match the expression.
➢ Cases cannot be duplicated
➢ Default statement is executed when any of the cases doesn’t
match the value of the expression. It is optional.
➢ Break statement terminates the switch block when the
condition is satisfied. It is optional; if not used, the next case is
executed.
Conditional and Control Statements in JavaScript
 20 09-11-2023

Syntax:
switch(expression)
{
case value1:
//code to be executed;
break;
case value2:
//code to be executed;
break;
......
default:
//code to be executed if none of the cases matched
} Conditional and Control Statements in JavaScript
 21 09-11-2023

Challenge time:
 What is a conditional statement?
 What happens if you omit the "break" statement within a case?

Conditional and Control Statements in JavaScript

 22 09-11-2023

2. Looping or Repetitive Statement:

➢ Loops are instructions passed on to machines to perform repetitive
tasks.
➢ In JavaScript, we have two main types of loops.
❖ Entry Controlled loop:
• for loop
• while loop
❖ Exit-controlled loop
▪ do-while loop
➢ Statements, like break and continue, help to regulate the control
flow of a loop.
Conditional and Control Statements in JavaScript
 23 09-11-2023

Entry Controlled Loop:

Conditional and Control Statements in JavaScript

 24 09-11-2023

Exit Controlled Loop:

Conditional and Control Statements in JavaScript

 25 09-11-2023

2.1 for Loop:

➢ It enables us to initialize the loop variable, check the condition,
and increment/decrement in a single line of code.
➢ We use the for loop only when we know exactly the number of
times we want to execute the block of code.
➢ There are three types of for loop in java.
❖ for
❖ for-in
❖ for-of

Conditional and Control Statements in JavaScript

 26 09-11-2023

2.1.1 Simple For Loop

➢ We can initialize the variable, check condition, and increment /
decrement value. It consists of four parts:
❖ Initialization
❖ Condition
❖ Increment/Decrement
❖ Statement
➢ Syntax:
for(initialization; condition; increment/decrement) {
//block of statements
}
Conditional and Control Statements in JavaScript
 27 09-11-2023

2.1.2 for-in loop:

➢ for...in the statement is used to iterate over those properties of
objects that have been keyed.
➢ Each time the loop iterates, a key is assigned to a variable
named key.
➢ This key is used to display the properties of the object it is linked to.
➢ This is like a for loop, but it only iterates over enumerable properties
keyed by strings or arrays.
➢ Syntax:
for (key in object) {
// code block to be executed
}
Conditional and Control Statements in JavaScript
 28 09-11-2023

2.1.3 for-of loop:

A for...of statement is like a counterpart of the for...in a statement.
 Except iterating through the properties of the enumerable object,
it loops through its values.
 It lets you loop over iterable data structures such as Arrays, Strings,
Maps, NodeLists, and more.
➢ Syntax:
for (variable of iterable) {
// code block to be executed
}

Conditional and Control Statements in JavaScript

 29 09-11-2023

2.2 While loop:

 The while loop is also used to iterate over the number of
statements multiple times. However, if we don't know the number
of iterations in advance, it is recommended to use a while loop.
 Unlike for loop, the initialization and increment/decrement doesn't
take place inside the loop statement in while loop.
 It is also known as the entry-controlled loop since the condition is
checked at the start of the loop.
 If the condition is true, then the loop body will be executed;
otherwise, the statements after the loop will be executed.

Conditional and Control Statements in JavaScript

 30 09-11-2023

Syntax:
while(condition){
//looping statements
}

Conditional and Control Statements in JavaScript

 31 09-11-2023

2.3 do-while Loop

 The do-while loop checks the condition at the end of the loop
after executing the loop statements.
 When the number of iterations is not known and if we have to
execute the loop at least once, we can use a do-while loop.
 It is also known as the exit-controlled loop since the condition is
not checked in advance.

Conditional and Control Statements in JavaScript

 32 09-11-2023

Syntax:
do
{
//statements
} while (condition);

Conditional and Control Statements in JavaScript

 33 09-11-2023

Challenge time:
 difference between "for," "while," and "do-while" loops
 Entry Controlled Loop
 Exit Controlled Loop

Conditional and Control Statements in JavaScript

 34 09-11-2023

3. Jump Statements in JavaScript:

➢ Jumping statements are control statements that move program
execution from one location to another.
➢ Jump statements are used to shift program control unconditionally
from one location to another within the program.
➢ Jump statements are typically used to abruptly end a loop or
switch case.
➢ Types of Jump Statements in JavaScript
❖ Break Statement
❖ Label Statement
❖ Continue Statement

Conditional and Control Statements in JavaScript

 35 09-11-2023

3.1. Break Statement:

➢ break is used to break loop or switch statement.
➢ It breaks the current flow of the program at specified conditions.
➢ In the case of the inner loop, it breaks only the inner loop.

➢ Syntax:

jump-statement;

break;

Conditional and Control Statements in JavaScript

 36 09-11-2023

3.2. Label Statement:

➢ Labels are one of JavaScript's lesser-known features. They help
users affix labels to the code for better readability and to name
code blocks. Labels help to make the code easier to understand
by properly demarcating the different sections of the code.
➢ Labels allow one to break and continue labeled statements.

➢ Syntax:

Label:

{ // code block

}
Conditional and Control Statements in JavaScript
 37 09-11-2023

3.3. Continue Statement:

➢ The continue statement is used to continue the loop.
➢ It continues the current flow of the program and skips the
remaining code at specified conditions.
➢ In the case of the inner loop, it continues only the inner loop
➢ Syntax:

jump-statement;

continue;

Conditional and Control Statements in JavaScript

38 09-11-2023

Conditional and Control Statements in JavaScript

 39 09-11-2023

Text Books & References

TEXT BOOKS:
➢ Internet & World Wide Web How to Program, 5th edition, by Paul Deitel Harvey
Deitel, Abbey Deitel, Pearson Publication, 2018.
➢ App Inventor 2: Create Your Own Android Apps 2nd Edition by David Wolber,
Hal Abelson, Ellen Spertus, Liz Looney, 2014.
REFERENCES:
➢ CS50's Web Programming with Python and JavaScript -
https://cs50.harvard.edu/web/2020
➢ “Get Coding! Learn HTML, CSS & JavaScript & Build a Website, App & Game”
by Young Rewired State, Walker Books, 2016.
➢ Version Control with Git, by Jon Loeliger, Matthew McCullough, 2nd Edition,
2012.
➢ Ultimate web design course: https://university.webflow.com/courses/ultimate-
web-design-course . Conditional and Control Statements in JavaScript
40 09-11-2023

Conditional and Control Statements in JavaScript

41 09-11-2023

Conditional and Control Statements in JavaScript