Lecture # 15

CSC336 Web Technologies

Credit Hours: 3(2, 1)

Course Instructor: SAIF ULLAH IJAZ

Lecturer CS Dept, CUI Vehari
MSc University of Leicester, UK
BSc COMSATS University Islamabad

Ethics in Information Technology, Sixth Edition 1

 Control flow based on conditions

Executes specific code blocks

Introduction to depending on boolean conditions
Conditional
Statements if, else if, else structure

switch for multiple condition

checks
if Statement
• Executes code block if the condition is true
• Syntax:
js
if (condition) {
// code block
}
• Example:
js
if (age > 18) {
console.log("Adult");
}
else and else if
• else: Executes if if condition is false
• else if: Checks additional conditions if the previous ones are false
• Example:
js
if (age > 18) {
console.log("Adult");
} else {
console.log("Minor");
}
Ternary Operator
• Shorthand for simple if-else conditions
• Syntax:
js
condition ? expr1 : expr2;
• Example:
js
let result = age >= 18 ? "Adult" : "Minor";
switch Statement
• Handles multiple cases for a single expression
• Syntax:
js
switch (expression) {
case value1:
// code block
break;
case value2:
// code block
break;
default:
// default code block
}
• Example: Checking days of the week
Introduction to Loops

• Repeatedly executes code as long as the

condition is true
• Common loops: for, while, do...while
• Loop control keywords: break, continue
for Loop
• Loop with initialization, condition, and increment
• Syntax:
js
for (initialization; condition; increment) {
// code block
}
• Example:
js
for (let i = 0; i < 5; i++) {
console.log(i);
}
while Loop
• Repeats code block as long as condition is true
• Syntax:
js
while (condition) {
// code block
}
• Example:
js
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
do...while Loop
• Executes the code block at least once before checking the condition
• Syntax:
js
do {
// code block
} while (condition);
• Example:
js
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);
Loop Control: break and continue
• break: Exits the loop early
• continue: Skips the current iteration
• Example:
js
for (let i = 0; i < 10; i++) {
if (i === 5) break;
if (i === 2) continue;
console.log(i);
}
Introduction to Functions

• Reusable blocks of code that perform a specific task

• Two types: Function Declarations and Function Expressions
• Parameters and return values
Function Declaration
• Declares a function with a name
• Syntax:
js
function functionName(parameters) {
// code block
}
• Example:
js
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Alice"));
Function Expression
• Assigns an anonymous function to a variable
• Syntax:
js
const myFunc = function(parameters) {
// code block
};
• Example:
js
const square = function(x) {
return x * x;
};
console.log(square(4));
Arrow Functions (ES6)
• Shorter syntax for writing functions
• Syntax:
js
const func = (parameters) => {
// code block
};
• Example:
js
const add = (a, b) => a + b;
console.log(add(3, 5));
Default Parameters (ES6)
• Allows setting default values for function parameters
• Syntax:
js
function greet(name = "Guest") {
return "Hello, " + name;
}
• Example:
js
console.log(greet()); // Hello, Guest
Rest Parameters (ES6)
• Collects all remaining arguments into an array
• Syntax:
js
function sum(...numbers) {
return numbers.reduce((a, b) => a + b);
}
• Example:
js
console.log(sum(1, 2, 3)); // 6
Spread Operator (ES6)
• Expands an array or object into individual elements
• Syntax:
js
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
• Example:
js
console.log(arr2); // [1, 2, 3, 4]
Template Literals (ES6)
• String literals allowing embedded expressions
• Uses backticks ` instead of quotes
• Syntax:
js
const name = "Alice";
const greeting = `Hello, ${name}`;
• Example:
js
console.log(greeting); // Hello, Alice
Destructuring (ES6)
• Unpacking values from arrays or properties from objects
• Syntax:
js
const [a, b] = [1, 2];
const {name, age} = person;
• Example:
const {name, age} = {name: "John", age: 30};
console.log(name); // John
Sample Code for Functions and Loops
• Combining functions and loops for practical use
• Example:
js
function printEvenNumbers(limit) {
for (let i = 1; i <= limit; i++) {
if (i % 2 === 0) console.log(i);
}
}
printEvenNumbers(10); // 2, 4, 6, 8, 10