JavaScript is a high-level programming language used to create interactive and dynamic content on websites, such as animations, forms, and real-time updates.
JavaScript is a programming language used to make websites interactive.
Without JS:
With JS:
JavaScript identifiers are case sensitive.
The variables lastName and lastname, are different variables
A JavaScript Engine is a program that:
Reads your JS code
Converts it into machine code
Executes it
JavaScript alone = language
But it needs a runtime to run
Browser gives:
console.log("Hello");
console.log() is NOT pure JS
It is provided by the browser runtime
<script>JS is blocking by default
That means:
Use:
<script defer src="script.js"></script>
👉 defer = run JS after HTML loads
In HTML, JavaScript code is inserted between <script> and </script> tags.
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
In this example, a JavaScript function is placed in the <head> section of an HTML page.
In this example, a JavaScript function is placed in the <body> section of an HTML page.
Scripts can also be placed in external files:
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:
<script src="myScript.js"></script>
Placing scripts in external files has some advantages:
JavaScript can "display" data in different ways:
innerHTML or innerText.document.write().window.alert().console.log().To access an HTML element, you can use the document.getElementById(id) method.
Use the id attribute to identify the HTML element.
Then use the innerHTML property to change the HTML content of the HTML element:
To access an HTML element, use the document.getElementById(id) method.
Then use the innerText property to change the inner text of the HTML element:
Use innerHTML when you want to change an HTML element.
Use innerText when you only want to change the plain text.
For testing purposes, it is convenient to use document.write():
You can use an alert box to display data:
For debugging purposes, you can call the console.log() method in the browser to display data.
A variable is a named container used to store data.
👉 Example (JavaScript):
let name = "Jeeshma";
Here, name is a variable storing a value.
In short:
➡️ Variable = a box that holds data
A data type defines what kind of data a variable stores.
👉 Common types:
"Hello"25true / false[1, 2, 3]{name: "Jeeshma"}In short:
➡️ Data Type = type of data inside the box
A variable is a container that stores data.
let age = 20;
let → keywordage → variable name20 → valuevar (OLD WAY – avoid in modern JS)var name = "John";
var x = 10; var x = 20; // ✅ allowed (but dangerous)
let (MODERN – use this )let age = 25;
let x = 10; x = 20; // ✅ allowed let x = 30; // ❌ error
const (CONSTANT – most used )const pi = 3.14;
const x = 10; x = 20; // ❌ error
const → default choice ✅let → if value changesvar → ❌ avoidStored by value
"hello"10true / falselet name = "blackbox"; // String let age = 20; // Number let isStudent = true; // Boolean let x; // Undefined let y = null; // Null
👉 Stored by reference (memory address)
let user = {
name: "blackbox",
age: 20
};
let arr = [1, 2, 3];
let a = 10; let b = a; b = 20; console.log(a); // 10
👉 Copy created → separate memory
let obj1 = { name: "John" };
let obj2 = obj1;
obj2.name = "Alex";
console.log(obj1.name); // Alex 😱
👉 Same memory → both change
JavaScript automatically converts types when needed
console.log("5" + 2);
// "52"
👉 Number → converted to string
console.log("5" - 2);
// 3
👉 String → converted to number
console.log(true + 1); // 2
👉 true → 1
You convert types yourself:
Number("10"); // 10
String(100); // "100"
Boolean(0); // false
let a = "10"; let b = 5; console.log(a + b); console.log(a - b); console.log(a * b);
👉 Try to predict output before running
+ → string concatenation if one is string-, *, / → always convert to numberConverting one type into another.
let num = 100; console.log(String(num));
Output:
"100"
let str = "123"; console.log(Number(str));
Output:
123
Boolean(1); Boolean(0);
Output:
true false
String formatting means combining variables, text, and values inside a string to create dynamic output.
Using + operator.
let name = "Jeeshma";
let age = 25;
console.log("My name is " + name + " and I am " + age + " years old.");
Output:
My name is Jeeshma and I am 25 years old.
As the string becomes longer, readability decreases.
Uses backticks ` `
Variables are inserted using ${}
let name = "Jeeshma";
let age = 25;
console.log(`My name is ${name} and I am ${age} years old.`);
Output:
My name is Jeeshma and I am 25 years old.
You can perform calculations.
let a = 10;
let b = 20;
console.log(`Total: ${a + b}`);
Output:
Total: 30
function greet() {
return "Hello";
}
console.log(`${greet()} Jeeshma`);
Output:
Hello Jeeshma
Operators (JS): symbols that perform actions on values
👉 Types:
+ - * / %== === > <&& || != += -=Used for mathematical calculations
let a = 10; let b = 3; console.log(a + b); // 13 console.log(a - b); // 7 console.log(a * b); // 30 console.log(a / b); // 3.33... console.log(a % b); // 1 (remainder)
let x = 5; x++; // post-increment console.log(x); // 6 ++x; // pre-increment console.log(x); // 7
👉 Why?
x++ → increases after → becomes 6++x → increases before → becomes 7let x = 5; console.log(x++); // 5 (use first, then increase) console.log(++x); // 7 (increase first, then use)
console.log(x++)x = 5x++ → use first → print 5x = 6👉 Output: 5
console.log(++x)x = 6++x → increase first → becomes 77👉 Output: 7
x++) → "Use → Then Increase"++x) → "Increase → Then Use"What will this print?
let x = 10; console.log(++x); console.log(x++); console.log(x);
Answer:
++x → 11x++ → prints 11, then becomes 12x → 12 Used to compare values → returns true or false
console.log(5 > 3); // true console.log(5 < 3); // false console.log(5 >= 5); // true console.log(5 <= 4); // false
Used to combine conditions
&&)Both must be true
console.log(true && true); // true console.log(true && false); // false
||)At least one true
console.log(true || false); // true console.log(false || false); // false
!)Reverses value
console.log(!true); // false console.log(!false); // true
Used with strings.
let first = "Hello"; let second = "World"; console.log(first + " " + second); // Hello World
Conditional Statements allow us to perform different actions for different conditions.
Conditional statements run different code depending on true or false conditions.
Conditional statements include:
if to specify a code block to be executed, if a specified condition is trueelse to specify a code block to be executed, if the same condition is falseelse if to specify a new condition to test, if the first condition is falseswitch to specify many alternative code blocks to be executed(? :) (ternary) as a shorthand for if...elseUse if to specify a code block to be executed, if a specified condition is true.
if (condition) {
// code to execute if the condition is true
}
<!DOCTYPE html>
<html>
<body>
<h2>If Statement</h2>
<script>
let age = 20;
if (age >= 18) {
document.write("You can vote");
}
</script>
</body>
</html>
Use else to specify a code block to be executed, if the same condition is false.
if (condition) {
// code to execute if the condition is true
} else {
// code to execute if the condition is false
}
<!DOCTYPE html>
<html>
<body>
<h2>If Else Statement</h2>
<script>
let age = 16;
if (age >= 18) {
document.write("You can vote");
} else {
document.write("You cannot vote");
}
</script>
</body>
</html>
Use else if to specify a new condition to test, if the first condition is false.
if (condition1) {
// code to execute if condition1 is true
} else if (condition2) {
// code to execute if the condition1 is false and condition2 is true
} else {
// code to execute if the condition1 is false and condition2 is false
}
<!DOCTYPE html>
<html>
<body>
<h2>Else If Statement</h2>
<script>
let marks = 75;
if (marks >= 90) {
document.write("Grade A");
} else if (marks >= 70) {
document.write("Grade B");
} else {
document.write("Grade C");
}
</script>
</body>
</html>
Use switch to specify many alternative code blocks to be executed.
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
Use (? :) (ternary) as a shorthand for if...else.
condition ? valueIfTrue : valueIfFalse;
let age = 20;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
let age = 20; let result = age >= 18 ? "Adult" : "Minor"; console.log(result);
Output:
Adult
condition ? expression1 : expression2
Repeat code multiple times.
for Loop
for(let i = 1; i <= 5; i++){
console.log(i);
}
A for loop has 3 parts:
for(initialization; condition; increment)
In your example:
for(let i = 1; i <= 5; i++)
i = 1 1 <= 5 // true
Print:
console.log(1);
Output:
1
Then:
i++;
while Loop
let i = 1;
while(i <= 5){
console.log(i);
i++;
}
while(condition){
// code
}
The condition is checked before executing the loop body.
The for loop simply puts initialization, condition, and increment in one line.
for → Use when you know how many times to loop.
while → Use when looping depends on a condition.
let i = 10;
do{
console.log(i);
i++;
}
while(i <= 5);
do{
// code
}
while(condition);
The important difference:
The code runs first, then the condition is checked.
for Loop (Known Number of Iterations)const products = ["Laptop", "Phone", "Watch"];
for(let i = 0; i < products.length; i++){
console.log(products[i]);
}
Use case: Showing all products from a list.
const products = ["Laptop", "Phone", "Watch"];
This creates an array containing 3 items:
Think of it like:
products[0] = "Laptop" products[1] = "Phone" products[2] = "Watch"
for(let i = 0; i < products.length; i++)
let i = 0
Start from the first item.
Current value:
i = 0
i < products.length
What is products.length?
products.length
Output:
3
Because there are 3 items in the array.
So the condition becomes:
i < 3
Current value:
i = 0
Check:
0 < 3
✅ True
Run:
console.log(products[i]);
Which means:
console.log(products[0]);
Output:
Laptop
Then:
i++
we use:
for(let i = 0; i < products.length; i++)
because if you later add more products:
const products = ["Laptop", "Phone", "Watch", "Tablet", "Camera"];
products.length automatically becomes 5, and the loop still works without changing the code.
while Loop (Unknown Number of Iterations)
let password = "";
while(password !== "admin"){
password = prompt("Enter Password");
}
Use case: Keep asking until the correct password is entered.
let password = "";
while(password !== "admin"){
password = prompt("Enter Password");
}
Flow:
Initialize password
↓
Check condition
↓
Ask password
↓
Check again
let password;
do{
password = prompt("Enter Password");
}while(password !== "admin");
Flow:
Ask password
↓
Check condition
↓
Ask again if wrong
while → "Check first, then run."do...while → "Run first, then check."A function is a reusable block of code that performs a specific task.
Instead of writing the same code again and again, you write it once inside a function and call it whenever needed.
function greet(){
console.log("Hello");
}
greet();
function → keyword to create a functiongreet → function name{} → function bodyAt this point, nothing is printed.
The function is only stored in memory.
greet();
Output:
Hello
The code inside the function executes.
Parameters allow a function to receive data.
function greet(name){
console.log("Hello " + name);
}
greet("John");
Output:
Hello John
function introduce(name, age){
console.log(name + " is " + age + " years old");
}
introduce("John", 25);
Output:
John is 25 years old
Sometimes a function should send a value back.
For that we use:
return
Example:
function add(a,b){
return a+b;
}
console.log(add(5,3));
Output:
8
Without return:
function add(a,b){
a+b;
}
Output:
console.log(add(5,3));
Result:
undefined
Because nothing was returned.
Functions can be stored in variables.
const greet = function(){
console.log("Hello");
};
greet();
greet();
Output:
Hello
function greet(){
console.log("Hello");
}
const greet = function(){
console.log("Hello");
};
Both work similarly.
Arrow functions are a shorter way to write functions.
Traditional:
function greet(){
console.log("Hello");
}
Arrow:
const greet = () => {
console.log("Hello");
};
Output:
Hello
const functionName = () => {
// code
};
Traditional:
function add(a,b){
return a+b;
}
Arrow:
const add = (a,b) => a+b;
(a,b) => a+b
Automatically means:
(a,b) => {
return a+b;
}
how JavaScript stores, manages, and manipulates data.
Almost every JavaScript project uses:
An object is a collection of key-value pairs.
let person = {
name: "John",
age: 25,
city: "London"
};
console.log(person);
Output:
{
name: "John",
age: 25,
city: "London"
}
Without objects:
let name = "John"; let age = 25; let city = "London";
With objects:
let person = {
name: "John",
age: 25,
city: "London"
};
Everything related stays together.
console.log(person.name); console.log(person.age);
Output:
John 25
console.log(person["name"]);
Output:
John
Useful when property name is dynamic.
let key = "age"; console.log(person[key]);
Output:
25
person.age = 30; console.log(person);
Output:
{
name: "John",
age: 30,
city: "London"
}
person.country = "UK";
Output:
{
name: "John",
age: 30,
city: "London",
country: "UK"
}
delete person.city;
Output:
{
name: "John",
age: 30,
country: "UK"
}
Objects can contain objects.
let user = {
name: "John",
address: {
city: "London",
zip: 12345
}
};
console.log(user.address.city);
Output:
London
Methods are functions inside objects.
let person = {
name: "John",
greet: function() {
console.log("Hello");
}
};
person.greet();
Output:
Hello
let calculator = {
add(a,b){
return a+b;
},
sub(a,b){
return a-b;
}
};
console.log(calculator.add(5,3));
Output:
8
this Keywordthis refers to the object that is calling the method.
let person = {
name: "Jithu",
greet() {
console.log(this.name);
}
};
person.greet();
Output
Jithu
this
let person = {
name: "Jithu",
greet() {
console.log(name);
}
};
person.greet();
name is not defined globally.An Array stores multiple values in a single variable.
let fruits = ["Apple", "Orange", "Mango"];
console.log(fruits[0]); console.log(fruits[1]);
Output
Apple Orange
fruits[1] = "Banana"; console.log(fruits);
console.log(fruits.length);
Output
3
Add item at end.
let arr = [1, 2, 3]; arr.push(4); console.log(arr);
Output
[1,2,3,4]
Remove last item.
arr.pop(); console.log(arr);
Output
[1,2,3]
Add at beginning.
arr.unshift(0); console.log(arr);
Output
[0,1,2,3]
Remove first element.
arr.shift(); console.log(arr);
Output
[1,2,3]
forEach() is used to execute a function for every element in an array.
Think of it as:
"Go through each item and do something."
array.forEach((element, index, array) => {
// code
});
numbers.forEach(num => {
console.log(num);
});
1 2 3 4 5
numbers.forEach((num, index) => {
console.log(index, num);
});
0 1 1 2 2 3 3 4 4 5
const result = numbers.forEach(num => num * 2); console.log(result);
Output:
undefined
❌ forEach() does NOT return anything.
map() creates a NEW array by transforming each element.
Think:
"Take every item and convert it into something else."
array.map((element) => {
return something;
});
const doubled = numbers.map(num => num * 2); console.log(doubled);
Output:
[2, 4, 6, 8, 10]
Original array:
[1,2,3,4,5]
New array:
[2,4,6,8,10]
filter() returns a NEW array containing only elements that pass a condition.
Think:
"Keep only the items that match."
array.filter(element => condition);
const even = numbers.filter(
num => num % 2 === 0
);
console.log(even);
Output:
[2,4]
const users = [
{name:"Jithu", age:22},
{name:"Rahul", age:17},
{name:"Arun", age:25}
];
const adults = users.filter(
user => user.age >= 18
);
console.log(adults);
Output:
[
{name:"Jithu", age:22},
{name:"Arun", age:25}
]
find() returns ONLY the first element that matches a condition.
Think:
"Find the first matching item and stop."
const result = numbers.find(
num => num > 3
);
console.log(result);
Output:
4
Checks whether AT LEAST ONE element satisfies a condition.
Think:
"Does any item match?"
const result = numbers.some(
num => num > 4
);
console.log(result);
Output:
true
Because 5 is greater than 4.
const result = numbers.some(
num => num > 10
);
console.log(result);
Output:
false
Checks if ALL elements satisfy a condition.
Think:
"Do all items match?"
const result = numbers.every(
num => num > 0
);
console.log(result);
Output:
true
const result = numbers.every(
num => num > 2
);
console.log(result);
Output:
false
reduce() converts an entire array into a single value.
Think:
"Reduce many values into one."
array.reduce(
(accumulator, currentValue) => {},
initialValue
);
const total = numbers.reduce(
(acc, curr) => acc + curr,
0
);
console.log(total);
Output:
15
[1,2,3,4,5]
Initial:
acc = 0
Iteration 1:
0 + 1 = 1
Iteration 2:
1 + 2 = 3
Iteration 3:
3 + 3 = 6
Iteration 4:
6 + 4 = 10
Iteration 5:
10 + 5 = 15
Final:
15
Calculate total cart price.
const cart = [
{name:"Phone", price:30000},
{name:"Mouse", price:500},
{name:"Keyboard", price:2000}
];
const total = cart.reduce(
(sum, item) => sum + item.price,
0
);
console.log(total);
Output:
32500
Used to arrange array elements.
Think:
"Put items in order."
const fruits = [
"Orange",
"Apple",
"Banana"
];
fruits.sort();
console.log(fruits);
Output:
["Apple","Banana","Orange"]
const nums = [100, 5, 20, 1]; nums.sort(); console.log(nums);
Output:
[1,100,20,5]
Because JavaScript treats them as strings.
nums.sort((a,b) => a - b);
Output:
[1,5,20,100]
(a,b) => a - b
If result is:
Negative → a comes first Positive → b comes first 0 → no change
nums.sort((a,b) => b - a);
Output:
[100,20,5,1]
const users = [
{ name: "Jithu", age: 22 },
{ name: "Rahul", age: 18 },
{ name: "Arun", age: 25 }
];
users.sort((a, b) => a.age - b.age);
console.log(users);
Output:
[
{name:"Rahul", age:18},
{name:"Jithu", age:22},
{name:"Arun", age:25}
]
Write cleaner, shorter, and more modern JavaScript code.
ES6 (ECMAScript 2015) introduced many features that are heavily used in React, Node.js, and modern web development.
Template literals allow you to embed variables directly inside strings.
Before ES6:
const name = "Jithu";
const age = 22;
console.log(
"My name is " + name + " and I am " + age + " years old."
);
Output:
My name is Jithu and I am 22 years old.
Use backticks (`)
const name = "Jithu";
const age = 22;
console.log(
`My name is ${name} and I am ${age} years old.`
);
Output:
My name is Jithu and I am 22 years old.
Before ES6:
const text = "Hello\n" + "World";
After ES6:
const text = ` Hello World `; console.log(text);
Output:
Hello World
const a = 10;
const b = 20;
console.log(`Sum = ${a + b}`);
Output:
Sum = 30
Extract values from arrays or objects into variables.
Without Destructuring
const colors = ["red", "green", "blue"]; const first = colors[0]; const second = colors[1];
With Destructuring
const colors = ["red", "green", "blue"]; const [first, second] = colors; console.log(first); console.log(second);
Output:
red green
const colors = ["red", "green", "blue"]; const [first, , third] = colors; console.log(third);
Output:
blue
const user = {
name: "Jithu",
age: 22,
city: "Trivandrum"
};
const { name, age } = user;
console.log(name);
console.log(age);
Output:
Jithu 22
const user = {
name: "Jithu"
};
const { name: userName } = user;
console.log(userName);
Output:
Jithu
Spread breaks an array or object into individual values.
Think:
...
means
"Spread everything out."
const nums = [1, 2, 3]; console.log(...nums);
Output:
1 2 3
const nums = [1, 2, 3]; const copy = [...nums]; console.log(copy);
Output:
[1,2,3]
const arr1 = [1, 2]; const arr2 = [3, 4]; const merged = [...arr1, ...arr2]; console.log(merged);
Output:
[1,2,3,4]
DOM = Document Object Model
When the browser loads an HTML page, it converts the HTML into a tree-like structure called the DOM.
<body>
<h1>Hello</h1>
<p>Welcome</p>
</body>
Document
│
└── html
│
├── head
│
└── body
│
├── h1
│ └── "Hello"
│
└── p
└── "Welcome"
JavaScript can access and modify any node in this tree.
Without DOM, JavaScript cannot:
Almost every frontend website uses DOM.
Used to select ONE element.
It always returns the first matching element.
Suppose you have:
<button class="menu-btn">
Menu
</button>
When user clicks menu button:
const menuBtn =
document.querySelector(".menu-btn");
Now JavaScript can control it.
Used when multiple elements need to be selected.
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
const cards =
document.querySelectorAll(".card");
Now all cards are selected.
Used to select an element by ID.
IDs should be unique.
Example:
<h1 id="hero-title">
Welcome
</h1>
const title =
document.getElementById("hero-title");
const heading = document.getElementById("title");
const headings = [
"Welcome",
"Learn JavaScript",
"Become a Frontend Developer"
];
let index = 0;
setInterval(() => {
heading.textContent = headings[index];
index = (index + 1) % headings.length;
}, 3000);
Selects the first matching element.
<p class="text">Paragraph 1</p> <p class="text">Paragraph 2</p>
const para = document.querySelector(".text");
console.log(para);
<p class="text">Paragraph 1</p>
Only the first match is selected.
const heading = document.querySelector("h1");
const heading = document.querySelector("#title");
const heading = document.querySelector(".box");
Selects all matching elements.
<li>Apple</li> <li>Orange</li> <li>Banana</li>
const items = document.querySelectorAll("li");
console.log(items);
Output:
Apple Orange Banana
Used to read or change text.
<h1 id="title">
Hello
</h1>
Read:
title.textContent
Output:
Hello
title.textContent = "Welcome";
Used to read or insert HTML.
<div id="box"> </div> box.innerHTML = "<h2>Hello</h2>";
Result:
<div id="box">
<h2>Hello</h2>
</div>
Adds a class to an element.
element.classList.add("classname");
HTML
<h1 id="title">
Hello
</h1>
CSS
.active{
color:red;
}
JavaScript
const title =
document.getElementById("title");
title.classList.add("active");
Result
<h1 id="title" class="active">
Hello
</h1>
Text becomes red.
Before
<div class="menu">
After
<div class="menu active">
menu.classList.add("active");
Menu becomes visible.