JavaScript Notes
1. Basics of JavaScript
JavaScript (JS): A scripting language used to create dynamic content on web pages.
Placement:
<script>
// JS code here
</script>
Comments:
// Single line comment
/* Multi-line
comment */
2. Input and Output
Output
[Link]("Hello") → Writes directly to the webpage.
alert("Hello") → Shows a pop-up alert box.
[Link]("Hello") → Prints in browser console (useful for debugging).
Input
prompt("Enter your name:") → Takes input from the user.
var name = prompt("Enter your name:");
alert("Hello " + name);
3. Variables and Declarations
Variables store data.
Declaration:
var x; // old way
let y; // block-scoped
const z = 10; // constant, cannot be changed
Initialization:
var a = 5;
let b = "Hello";
const c = 3.14;
4. Data Types
String: "Hello"
Number: 10, 3.14
Boolean: true / false
Undefined: variable declared but not initialized
Null: empty value
Array: [1,2,3]
Object: {name:"Ali", age:15}
5. Operators
Arithmetic Operators
Operator Meaning Example
+ Addition 5+2 = 7
- Subtraction 5-2 = 3
* Multiplication 5*2 = 10
/ Division 10/2 = 5
% Modulus (remainder) 5%2 = 1
** Exponent 2**3 = 8
Assignment Operators
x = 5; // assign
x += 2; // x = x+2
x -= 1; // x = x-1
x *= 3; // x = x*3
x /= 2; // x = x/2
Comparison Operators
Operator Meaning
== equal to
=== equal and same type
!= not equal
!== not equal type or value
> greater than
< less than
>= greater or equal
<= less or equal
Logical Operators
&& → AND
|| → OR
! → NOT
6. Conditional Statements
If Statement
if(condition){
// code if condition is true
}
Example:
let age = 15;
if (age > 13) {
[Link]("You are a teenager.");
}
Explanation:
Since age > 13 is true, the message will be printed.
If-Else Statement
if(condition){
// if true
} else {
// if false
}
Examples
let marks = 48;
if (marks >= 50) {
[Link]("You passed!");
} else {
[Link]("You failed!");
}
Explanation:
If marks are 50 or more → “passed”, otherwise → “failed”.
Else-If
if(condition1){
// code1
} else if(condition2){
// code2
} else {
// code3
}
Example
let percentage = 72;
if (percentage >= 80) {
[Link]("Grade A+");
} else if (percentage >= 70) {
[Link]("Grade A");
} else if (percentage >= 60) {
[Link]("Grade B");
} else {
[Link]("Grade C");
}
Explanation:
Conditions are checked top-to-bottom until one is true.
Switch Statement
switch(expression){
case value1:
// code
break;
case value2:
// code
break;
default:
// code if no case matches
}
Examples:
let day = 3;
switch (day) {
case 1:
[Link]("Monday");
break;
case 2:
[Link]("Tuesday");
break;
case 3:
[Link]("Wednesday");
break;
default:
[Link]("Invalid day");
}
Explanation:
day = 3, so “Wednesday” is displayed.
break prevents running all remaining cases.
7. Loops
For Loop
for(initialization; condition; increment){
// code to repeat
}
for (initial; condition; increment) {
// repeated code
}
Example
for (let i = 1; i <= 5; i++) {
[Link]("Number: " + i);
}
Explanation:
Starts from 1 → prints until 5 → increases by 1.
While Loop
while(condition){
// code to repeat
}
Example
let i = 1;
while (i <= 3) {
[Link]("Hello");
Do-While Loop
do{
// code to repeat
} while(condition);
let x = 5;
do {
[Link]("Value is: " + x);
x++;
} while (x < 5);
Explanation: Prints once even though condition is false (x < 5 is false).
8. Arrays
Definition: Collection of data.
let arr = [1,2,3,4];
let fruits = ["Apple", "Banana", "Mango"];
let mixed = [10, "Hello", true, null, undefined];
Access Elements:
arr[0] // 1
arr[2] // 3
[Link](fruits[0]); // Apple
[Link](fruits[2]); // Mango
Changing an Array Value
You can change an item using its index:
fruits[1] = "Orange";
[Link](fruits);
// ["Apple", "Orange", "Mango"]
Length of an Array
To know how many items are in an array:
[Link]([Link]); // 3
📌 length is very important for loops.
Array Methods:
[Link](5); // add to end
[Link](); // remove last
[Link](); // remove first
[Link](0);// add to beginning
Common Array Methods
push() – add at end
[Link]("Orange");
pop() – remove last
[Link]();
shift() – remove first
[Link]();
unshift() – add at start
[Link]("Grapes");
indexOf() Find index of item
Example:
let index = [Link]("Mango");
[Link](index); // 2
Looping through an Array
Example
let numbers = [10, 20, 30];
for (let i = 0; i < [Link]; i++) {
[Link](numbers[i]);
}
Explanation
Loop prints each value in the array.
9. Functions
Definition:
function functionName(parameters){
// code
}
Example:
function greet(name){
return "Hello " + name;
}
alert(greet("Ali"));
Function Call:
greet("Sara"); // Calls the function
function greet() {
[Link]("Hello, welcome!");
}
greet();
Explanation
Function is created
greet() calls it
(B) Function with Parameters
Example
function greetUser(name) {
[Link]("Hello " + name);
}
greetUser("Ali");
greetUser("Sara");
Explanation
name receives the value “Ali” or “Sara”
Prints greeting for each user
(C) Function that Returns a Value
Example
function add(a, b) { Explanation
return a + b;
} Function returns the result of a + b
Stored in sum
let sum = add(5, 7);
[Link](sum);
(D) Using Function for Calculations
Example
function calculateArea(width, height) {
return width * height;
}
[Link](calculateArea(5, 10));
Sample Solved JavaScript Questions (FBISE Style)
1. Find Even N Odd nos.
let num = prompt("Enter a number:");
num = Number(num); // convert input to number
if (num % 2 === 0) {
[Link]("The number is Even");
} else {
[Link]("The number is Odd");
}
Explanation
% gives remainder
If remainder is 0, number is even
Else odd
2. Write a program to check whether a user is eligible to vote (age ≥ 18).
Solution
let age = prompt("Enter your age:");
age = Number(age);
if (age >= 18) {
[Link]("You are eligible to vote.");
} else {
[Link]("You are NOT eligible to vote.");
}
3. Write a JavaScript program to print numbers from 1 to 10 using a loop.
Solution (for loop)
for (let i = 1; i <= 10; i++) {
[Link](i + "<br>");
}
4. Write a JavaScript program that prints the table of 5.
Solution
for (let i = 1; i <= 10; i++) {
[Link]("5 x " + i + " = " + (5 * i) + "<br>");
}
5. Write a program to calculate the sum of first 5 natural numbers.
Solution
let sum = 0;
for (let i = 1; i <= 5; i++) {
sum = sum + i;
}
[Link]("Sum = " + sum);
6. Write a program to store 5 fruits in an array and display them.
let fruits = ["Apple", "Mango", "Banana", "Orange", "Grapes"];
for (let i = 0; i < [Link]; i++) {
[Link](fruits[i] + "<br>");
}
7. Write a program to find the largest number in an array.
let nums = [20, 45, 12, 67, 34];
let max = nums[0];
for (let i = 1; i < [Link]; i++) {
if (nums[i] > max) {
max = nums[i];
}
}
[Link]("Largest number is: " + max);
8. Write a function that adds two numbers and returns the result.
function add(a, b) {
return a + b;
}
let result = add(10, 20);
[Link]("Sum = " + result);
9. Write a function that takes a name and displays a greeting message.
function greet(name) {
[Link]("Hello " + name + ", welcome!");
}
greet("Ali");
10. Write a JavaScript program using switch to display day name (1–7).
let day = Number(prompt("Enter day number (1-7):"));
switch (day) {
case 1: [Link]("Monday"); break;
case 2: [Link]("Tuesday"); break;
case 3: [Link]("Wednesday"); break;
case 4: [Link]("Thursday"); break;
case 5: [Link]("Friday"); break;
case 6: [Link]("Saturday"); break;
case 7: [Link]("Sunday"); break;
default: [Link]("Invalid day");
}
11. Write a program to display all even numbers from 2 to 20.
for (let i = 2; i <= 20; i += 2) {
[Link](i + "<br>");
}
12. Write a program to calculate the area of a rectangle using a function.
function rectangleArea(w, h) {
return w * h;
}
let result = rectangleArea(5, 10);
[Link]("Area = " + result);
13. Write a program that checks if a number is positive, negative, or zero.
let num = Number(prompt("Enter number:"));
if (num > 0) {
[Link]("Positive");
} else if (num < 0) {
[Link]("Negative");
} else {
[Link]("Zero");
}
14. Write a program to count total elements in an array.
let colors = ["Red", "Blue", "Green", "Yellow"];
[Link]("Total colors: " + [Link]);
15. Write a program to input 3 numbers and display the smallest.
let a = 12, b = 5, c = 20;
let smallest = a;
if (b < smallest) smallest = b;
if (c < smallest) smallest = c;
[Link]("Smallest number is: " + smallest);
