MODULE 2: PROGRAMMING with JAVASCRIPT

Lesson 3: Control Structure - Branching

Learning Objectives:

At the end of this lesson students will be able to

 identify branching statements
 create branching structure to control program flow based on conditions
 use branching statements in solving problem sets

Lesson Proper

1. Branching Statements

As we had discussed in flowcharting, branching structure is a programming structure that

directs the computer to another part of the program based on the results of comparison.

Conditional statements are used to perform different actions based on different

conditions.

In JavaScript we have the following conditional statements:

 if statement - use this statement to execute some code only if a specified condition
is true
 if...else statement - use this statement to execute some code if a condition is true
and another code if the condition is false
 if...elseif....else statement - use this statement to select one of several blocks of
code to be executed
 switch statement - use this statement to select one of many blocks of code to be
executed

1.1 The if Statement

Use the if statement to execute some code only if a specified condition is true.

Syntax
if (Condition/Boolean expression)
{
code to be executed if condition is true;
}

1
Multiple Income Creating Project (MIC P) on ICT
 MODULE 2: PROGRAMMING with JAVASCRIPT

The example below will output “Positive" if number is greater than 0 (zero):

<script>
var num = 10;
if (num>0)
{
document.write(“Positive”);
}
</script>
Note: The code is executed only if the specified condition is true. You may or may not
put curly braces if there is only one statement in a block of code.

Coding Guidelines
To avoid confusion, always place the statement or statements of an if or if-else
block inside curly braces {}.

1.2 The if...else Statement

Use the if....else statement to execute some code if a condition is true and another
code if a condition is false.

Syntax
if (Condition/Boolean expression)
{
code to be executed if condition is true;
}
else
{
code to be executed if condition is false;
}

Example:
The example below will output "Positive" if the number is greater than 0 (zero), otherwise
it will output "Negative":

<script>
var num = -10;
if (num>0){
document.write(“Positive”);
}
else{
document.write(“Negative”);
}
</script>

2
Multiple Income Creating Project (MIC P) on ICT
 MODULE 2: PROGRAMMING with JAVASCRIPT

1.3 The if...elseif....else Statement

Use the if....elseif...else statement to select one of several blocks of code to be
executed.

Syntax
if (Condition/Boolean expression)
{
code to be executed if condition is true;
}
else if (Condition/Boolean expression)
{
code to be executed if condition is true;
}
else
{
code to be executed if condition is false;
}

Example:
The sample program will output "Positive" if the number is greater than zero (0), and
"Negative" if the number is less than zero (0). Otherwise the output is “Zero” (0).

<script>
var num = 10;
if (num>0){
document.write(“Positive”);
}
else if (num<0){
document.write(“Negative”);
}
else{
document.write(“Zero”);
}
</script>

Common Errors
 Writing elseif instead of else if.
 Using = (single equal sign) instead of == (double equal sign) for comparison.
 Missing curly brace ( { or } ) in compound statements.

3
Multiple Income Creating Project (MIC P) on ICT
 MODULE 2: PROGRAMMING with JAVASCRIPT

1.4 Switch Statement

Use the switch statement to select one of many blocks of code to be executed.

Syntax

switch (n)
{
case value1:
code to be executed if n=value1;
break;
case value2:
code to be executed if n=value2;
break;
:
:

default:
code to be executed if n is different from both value1 and value2;
}

This is how it works:

First, we have a single expression n (most often a variable), that is evaluated once.
The value of the expression is then compared with the values for each case in the
structure. If there is a match, the block of code associated with that case is executed.
Use break to prevent the code from running into the next case automatically. The
default statement is used if no match is found.

Sample Problem:
Create a program that will display the number in words if the number is 2, 5, and 10
otherwise display INVALID.

<script>
x=1;
switch (x)
{
case 2:
document.write(“TWO”);
break;
case 5:
document.write(“FIVE”);
break;
case 10:
document.write(“TEN”);
break;

4
Multiple Income Creating Project (MIC P) on ICT
 MODULE 2: PROGRAMMING with JAVASCRIPT

default:
document.write(“INVALID”);
}
</script>

Coding Guidelines
1. Deciding whether to use an if statement or a switch statement is a judgment call.
You can decide which to use, based on readability and other factors.
2. An if statement can be used to make decisions based on ranges of values or
conditions, whereas a switch statement can make decisions based only on a single
integer or string value. Also, the value provided to each case statement must be
unique.

Activity
1. Create a program that will determine if age is qualified to vote or not. Display
“QUALIFIED” if age is qualified to vote, otherwise display “NOT QUALIFIED”
2. Create a program that will determine if a number is Odd or Even number. The
program will display the number and the result.
3. Create a program that will ask for a number then determine if the number is
Positive, Negative or Zero.
4. Create a program that will ask for a letter then determine if the letter is vowel or
consonant.
5. Create a program that will ask for two numbers. If the first number is greater than
the second number compute and display the sum otherwise compute and display
the product of the numbers.
6. Create a program that will ask for the score and number of items of a quiz then
compute the equivalent grade with the formula
grade = score / number of items * 100

evaluate the grade then display the grade classification according to the
following:
Grade Rating
100-91 Excellent
90-81 Very Good
80-71 Good
70-51 Fair
50-0 Poor
Out of range Invalid

7. ABC Sari-sari store wants to automate their employees’ salary computation to

have faster and efficient process. Salary is given in a weekly basis. 40 hours in a
week and beyond that is considered as overtime. Overtime pay (per hour) is 150%

5
Multiple Income Creating Project (MIC P) on ICT
 MODULE 2: PROGRAMMING with JAVASCRIPT

of the hourly rate of an employee. Your goal is to create a program with the given
requirements:
Input: rate per hour, number of hours worked in a week
Output: Overtime pay, Total salary

Summary
 Branching structure is a programming structure that directs the computer to another part
of the program based on the results of comparison.
 if statement - use this statement to execute some code only if a specified condition
is true
 if...else statement - use this statement to execute some code if a condition is true
and another code if the condition is false
 if...elseif....else statement - use this statement to select one of several blocks of
code to be executed
 switch statement - use this statement to select one of many blocks of code to be
executed

6
Multiple Income Creating Project (MIC P) on ICT