JavaScript Presentation
Web Technologies
BS Data Science Evening 5th Semester
Group # 01
Emerson University Multan
JavaScript Presentation
Topic:
● Introduction to JavaScript
● Printing & basic statements
● Variables (role & importance)
● Datatypes
● Operators
● Conditional statements
● Loops
● Functions
● Scope
1 — What is JavaScript?
✔ JavaScript (JS)
● A programming language used to make web pages interactive.
● Runs directly in the browser.
● JS controls logic, events, animations, forms, etc.
✔ Example:
<script>
alert("Welcome to JavaScript!");
</script>
2 — Printing in JavaScript
✔ [Link]() → used to print output in the browser console.
[Link]("Hello JavaScript!");
[Link](10 + 20);
✔ [Link]() → prints directly on the webpage.
[Link]("This text is written using JS");
3 — Basic Statements in JS
✔ A statement ends with a semicolon ;
✔ JS runs code top to bottom
let x = 5;
let y = 10;
let z = x + y;
[Link]("Total = " + z);
4 — Variables (Role & Importance)
✔ Variables store data for later use
✔ Very important because JS programs depend on changing values
✔ Syntax:
let name = "Shahbaz";
const age = 20;
var city = "Lahore";
✔ Why are variables important?
● Store values
● Update data
● Make code dynamic
● Avoid hardcoding
5 — Datatypes
✔ Main Datatypes:
1. String → text
2. Number → integers & decimals
3. Boolean → true/false
4. Array → list of items
5. Object → key-value data
✔ Code Example:
let name = "Shahbaz"; // String
let age = 21; // Number
let isOnline = true; // Boolean
let marks = [80, 90, 85]; // Array
let user = { name: "Ali", age: 22 }; // Object
[Link]([Link]);
6 — Operators
✔ Types of Operators
● Arithmetic: + - * / %
● Assignment: = += -=
● Comparison: > < == === !=
● Logical: && || !
✔ Example:
let a = 10;
let b = 5;
[Link](a + b); // 15
[Link](a > b); // true
[Link](a == "10"); // true (loose check)
[Link](a === "10"); // false (strict check)
7 — Conditional Statements
✔ Used to make decisions in code
✔ if, else if, else
✔ Example:
let marks = 85;
if (marks >= 90) {
[Link]("Grade A+");
} else if (marks >= 80) {
[Link]("Grade A");
} else {
[Link]("Keep Trying!");
}
8 — Loops in JavaScript
✔ Loops repeat actions multiple times
1. For Loop
for (let i = 1; i <= 5; i++) {
[Link]("Number: " + i);
}
2. While Loop
let i = 1;
while (i <= 3) {
[Link]("Hello");
i++;
}
3. For-of Loop (Array Loop)
let fruits = ["Apple", "Banana", "Mango"];
for (let f of fruits) {
[Link](f);
}
9 — Functions in JavaScript
✔ Functions reuse code
✔ Accept inputs and return outputs
✔ Example:
function add(a, b) {
return a + b;
}
let total = add(5, 10);
[Link]("Sum = " + total);
10 — Arrow Functions (Modern JS)
const multiply = (x, y) => x * y;
[Link](multiply(4, 3)); // 12
11 — Scope in JavaScript
✔ Scope = where a variable can be accessed
1. Global Scope
let a = 10; // global
function test() {
[Link](a);
}
test();
2. Local/Function Scope
function demo() {
let msg = "Hello";
[Link](msg);
}
demo();
// [Link](msg); // Error: not accessible
3. Block Scope
if (true) {
let x = 20;
[Link](x);
}
// [Link](x); // Error
12 — Final Example (All Concepts
Together)
function checkUser(age) {
let message;
if (age >= 18) {
message = "You are an adult";
} else {
message = "You are a minor";
}
for (let i = 1; i <= 3; i++) {
[Link]("Check #" + i);
}
return message;
}
[Link](checkUser(20));
