WEB DEVELOPMENT
SE102.3
CHAPTER 04
JavaScript – Part B
Ms. Thisarani Wickramasinghe / Mr. Anton Jayakody
JavaScript Conditional
Statements
Conditional statements are used to perform different actions based on different
conditions.
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.
◦ If Statement
◦ If else statement
◦ if else if statement
If Statement
It evaluates the content only if expression is true.
The syntax of JavaScript if statement is given below.
if (condition) {
// block of code to be executed if the condition is true
}
if (price < $200) {
discount = “10%";
}
Note that if is in lowercase letters. Uppercase letters (If or IF) will generate a JavaScript error.
Activity 01
Write a JavaScript code
snippet to display a
message based on the
current students' marks:
If the marks is above 40,
display “Pass the Exam!".
Assume that the current
student mark is 60.
JavaScript 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.
Use the else statement to specify a block of code to be executed if the condition is false.
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
if (day === 0 || day === 6) {
schedule = "It's the weekend, time to relax!";
} else {
schedule = "It's a weekday, time to work!";
}
Activity 02
You're developing a weather application. Write a JavaScript code snippet to display a message
based on the current temperature:
If the temperature is above 20 degrees Celsius, display "It's a warm day!". Otherwise, display
"It's a cool day!“. Take the current temperature from the user as an input.
The output should be as below.
JavaScript if...else if... statement
The if...else if... statement (also called as if...else ladder)is an advanced form of if…else that allows
JavaScript to make a correct decision out of several conditions.
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
}
Activity 03
Write a JavaScript code snippet to
display a message based on the
current students’ scores:
If the score is above or equals to
90, display “Excellent".
Else If the score is above or
equals to 80, display “Good". Else
If the score is above or equals to
70, display “Average". Else If the
score is above or equals to 60,
display “Below Average".
Otherwise print “Fail”.
Assume that the current score is
75.
Activity 04
You're designing a system to determine shipping costs for an eCommerce website.
Write a JavaScript code snippet to user can enter the weight of the package in kilograms for
shipment. Display the shipping cost according to the weight entered by the user.
If the weight is less than or equal to 5 kg, the shipping cost is $10.
If the weight is between 5 kg (exclusive) and 10 kg (inclusive), the shipping cost is $15.
If the weight is greater than 10 kg, the shipping cost is $20.
Activity 05 – Homework
You're developing a real estate application for listing land properties.
Write a JavaScript code snippet to prompt the user to enter the area of the land property (in square meters).
After the user enters the area, calculate the price of the land property according to the area entered:
If the area is less than or equal to 100 square meters, display an alert box with the price of $10,000.
If the area is between 101 square meters (exclusive) and 200 square meters (inclusive), display an alert box
with the price of $15,000.
If the area is greater than 200 square meters, display an alert box with the price of $20,000.
Output should be like this.
JavaScript Loops
While Loop: Do While Loop:
The while loop executes a block of code The do-while loop is similar to the while loop, but it
as long as a specified condition is true. always executes the block of code at least once
while (condition) {
before checking the condition.
// Code to be executed do {
} // Code to be executed
} while (condition);
For - Loop and Array
FOR – LOOP ARRAY
The for loop repeats a block of code a Arrays are special variables that can hold more
specified number of times. than one value at a time.
for (initialization; condition; increment/decrement) { var arrayName = [value1, value2, ...];
// Code to be executed
}
JavaScript Functions
JavaScript functions are used to perform operations. We can call JavaScript function many times to
reuse the code.
Advantage of JavaScript function
There are mainly two advantages of JavaScript functions.
Code reusability: We can call a function several times, so it save coding.
Less coding: It makes our program compact. We don’t need to write many lines of code each time to
perform a common task.
function functionName([arg1, arg2, ...argN]){
//code to be executed
}
Syntax
Example
Generate the full name
Activity 06
Calculate the Total
Activity 07
Complete HTML and JavaScript example that simulates a cafe with 100 buns for sale. The price of each bun
is 50 rupees. The user can input the number of buns they want to buy, and the script will calculate the total
price of the buns purchased and the price of the remaining buns in the shop.
Answer
Question
In this scenario, a bookshop has 200 books in
stock, each priced at 300 rupees. A customer
wants to buy a certain number of books.
Calculate the total price of the books
purchased, the number of books remaining,
and the average price per book.
Homework
Question
In this scenario, a company has a certain
number of employees, and each employee has
a fixed monthly salary. The user can input the
number of employees and their monthly
salary.
Calculate the total monthly salary expenditure,
the average salary per employee, and the
remaining budget after salary payments if the
company has a fixed budget.
Homework
