⚡ JavaScript Complete Guide - From Basics to DOM Mastery#

📚 Table of Contents#

Part 1: JavaScript Basics#

What is JavaScript?
How to Add JavaScript
Variables
Data Types
Operators
Strings
Arrays
Objects
Conditionals
Loops
Functions
Arrow Functions
Array Methods
Object Methods
Destructuring
Spread and Rest
Classes
Promises and Async/Await
Error Handling
Modules

Part 1: JavaScript Basics#

1. What is JavaScript?#

JavaScript is a programming language that makes web pages interactive.

What can JavaScript do?#

✅ Change HTML content
✅ Change CSS styles
✅ React to events (clicks, typing)
✅ Validate forms
✅ Create animations
✅ Communicate with servers

2. How to Add JavaScript#

Inline (in HTML)#

1
<button onclick="alert('Hello!')">Click Me</button>

Internal (in `<script>` tag)#

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title>My Page</title>
5
</head>
6
<body>
7
    <h1>Hello</h1>
8

9
    <script>
10
        console.log("Hello from JavaScript!");
11
        alert("Welcome!");
12
    </script>
13
</body>
14
</html>

External (separate file) ⭐ Best#

1
<script src="script.js"></script>

1
console.log("Hello from external file!");

Script Placement#

1
<!-- In head with defer (waits for HTML) -->
2
<head>
3
    <script src="script.js" defer></script>
4
</head>
5

6
<!-- At end of body (most common) -->
7
<body>
8
    <!-- content -->
9
    <script src="script.js"></script>
10
</body>

3. Variables#

var, let, const#

1
// var - old way (avoid)
2
var name = "Ahmed";
3

4
// let - can be changed
5
let age = 25;
6
age = 26;  // OK
7

8
// const - cannot be changed
9
const PI = 3.14159;
10
// PI = 3;  // Error!
11

12
// const with objects/arrays - can modify contents
13
const user = { name: "Ahmed" };
14
user.name = "Sara";  // OK (modifying property)
15
// user = {};  // Error! (reassigning variable)

Naming Rules#

1
// Valid names
2
let userName;
3
let user_name;
4
let _private;
5
let $element;
6
let camelCase;
7

8
// Invalid names
9
// let 1user;     // Cannot start with number
10
// let user-name; // No hyphens
11
// let let;       // Reserved word

4. Data Types#

Primitive Types#

1
// String
2
let name = "Ahmed";
3
let message = 'Hello';
4
let template = `Hi ${name}`;
5

6
// Number
7
let age = 25;
8
let price = 19.99;
9
let billion = 1e9;
10

11
// Boolean
12
let isActive = true;
13
let isAdmin = false;
14

15
// Undefined
16
let x;
17
console.log(x);  // undefined
18

19
// Null
20
let empty = null;
21

22
// Symbol (unique identifier)
23
let id = Symbol("id");
24

25
// BigInt (large numbers)
26
let bigNumber = 9007199254740991n;

Check Type#

1
console.log(typeof "Hello");    // "string"
2
console.log(typeof 42);         // "number"
3
console.log(typeof true);       // "boolean"
4
console.log(typeof undefined);  // "undefined"
5
console.log(typeof null);       // "object" (JS quirk)
6
console.log(typeof {});         // "object"
7
console.log(typeof []);         // "object"
8
console.log(typeof function(){}); // "function"

Type Conversion#

1
// To String
2
String(123);        // "123"
3
(123).toString();   // "123"
4
123 + "";           // "123"
5

6
// To Number
7
Number("123");      // 123
8
parseInt("123");    // 123
9
parseFloat("12.5"); // 12.5
10
+"123";             // 123
11

12
// To Boolean
13
Boolean(1);         // true
14
Boolean(0);         // false
15
Boolean("");        // false
16
Boolean("hello");   // true
17
!!value;            // Convert to boolean

5. Operators#

Arithmetic Operators#

1
let a = 10, b = 3;
2

3
console.log(a + b);   // 13 (addition)
4
console.log(a - b);   // 7  (subtraction)
5
console.log(a * b);   // 30 (multiplication)
6
console.log(a / b);   // 3.33... (division)
7
console.log(a % b);   // 1  (modulus/remainder)
8
console.log(a ** b);  // 1000 (power)
9

10
// Increment/Decrement
11
let x = 5;
12
x++;  // x = 6
13
x--;  // x = 5
14
++x;  // x = 6 (pre-increment)

Comparison Operators#

1
console.log(5 == "5");   // true (loose equality)
2
console.log(5 === "5");  // false (strict equality) ⭐
3
console.log(5 != "5");   // false
4
console.log(5 !== "5");  // true ⭐
5
console.log(5 > 3);      // true
6
console.log(5 < 3);      // false
7
console.log(5 >= 5);     // true
8
console.log(5 <= 3);     // false

Logical Operators#

1
// AND (both must be true)
2
console.log(true && true);   // true
3
console.log(true && false);  // false
4

5
// OR (at least one true)
6
console.log(true || false);  // true
7
console.log(false || false); // false
8

9
// NOT (opposite)
10
console.log(!true);   // false
11
console.log(!false);  // true
12

13
// Nullish coalescing
14
let name = null;
15
console.log(name ?? "Guest");  // "Guest"
16

17
// Optional chaining
18
let user = {};
19
console.log(user?.address?.city);  // undefined (no error)

Assignment Operators#

1
let x = 10;
2
x += 5;   // x = x + 5  → 15
3
x -= 3;   // x = x - 3  → 12
4
x *= 2;   // x = x * 2  → 24
5
x /= 4;   // x = x / 4  → 6
6
x %= 4;   // x = x % 4  → 2
7
x **= 2;  // x = x ** 2 → 4

6. Strings#

Creating Strings#

1
let str1 = "Hello";
2
let str2 = 'World';
3
let str3 = `Hello ${str2}`;  // Template literal

String Methods#

1
let text = "Hello, World!";
2

3
// Length
4
console.log(text.length);  // 13
5

6
// Access characters
7
console.log(text[0]);       // "H"
8
console.log(text.charAt(0)); // "H"
9
console.log(text.at(-1));   // "!" (last char)
10

11
// Find
12
console.log(text.indexOf("World"));    // 7
13
console.log(text.lastIndexOf("o"));    // 8
14
console.log(text.includes("World"));   // true
15
console.log(text.startsWith("Hello")); // true
16
console.log(text.endsWith("!"));       // true
17

18
// Extract
19
console.log(text.slice(0, 5));      // "Hello"
20
console.log(text.slice(-6));        // "World!"
21
console.log(text.substring(0, 5));  // "Hello"
22

23
// Transform
24
console.log(text.toUpperCase());    // "HELLO, WORLD!"
25
console.log(text.toLowerCase());    // "hello, world!"
26
console.log("  hi  ".trim());       // "hi"
27
console.log(text.replace("World", "JS"));  // "Hello, JS!"
28
console.log("a-b-c".split("-"));    // ["a", "b", "c"]
29

30
// Repeat
31
console.log("Ha".repeat(3));  // "HaHaHa"
32

33
// Pad
34
console.log("5".padStart(3, "0"));  // "005"
35
console.log("5".padEnd(3, "0"));    // "500"

Template Literals#

1
let name = "Ahmed";
2
let age = 25;
3

4
// String interpolation
5
let message = `My name is ${name} and I am ${age} years old.`;
6

7
// Multi-line strings
8
let html = `
9
    <div>
10
        <h1>${name}</h1>
11
        <p>Age: ${age}</p>
12
    </div>
13
`;
14

15
// Expressions
16
let result = `2 + 2 = ${2 + 2}`;  // "2 + 2 = 4"

7. Arrays#

Creating Arrays#

1
let fruits = ["apple", "banana", "orange"];
2
let numbers = [1, 2, 3, 4, 5];
3
let mixed = [1, "hello", true, null];
4
let empty = [];
5
let arr = new Array(3);  // [undefined, undefined, undefined]

Accessing Elements#

1
let arr = ["a", "b", "c", "d"];
2

3
console.log(arr[0]);      // "a"
4
console.log(arr[2]);      // "c"
5
console.log(arr[arr.length - 1]);  // "d" (last)
6
console.log(arr.at(-1));  // "d" (last)

Modifying Arrays#

1
let arr = [1, 2, 3];
2

3
// Add to end
4
arr.push(4);          // [1, 2, 3, 4]
5

6
// Add to beginning
7
arr.unshift(0);       // [0, 1, 2, 3, 4]
8

9
// Remove from end
10
arr.pop();            // [0, 1, 2, 3]
11

12
// Remove from beginning
13
arr.shift();          // [1, 2, 3]
14

15
// Remove/Add at position
16
arr.splice(1, 1);           // Remove 1 at index 1: [1, 3]
17
arr.splice(1, 0, 2);        // Add 2 at index 1: [1, 2, 3]
18
arr.splice(1, 1, "two");    // Replace: [1, "two", 3]
19

20
// Combine arrays
21
let combined = [1, 2].concat([3, 4]);  // [1, 2, 3, 4]
22
let combined2 = [...[1, 2], ...[3, 4]]; // [1, 2, 3, 4]

Searching Arrays#

1
let arr = [1, 2, 3, 2, 1];
2

3
console.log(arr.indexOf(2));      // 1 (first occurrence)
4
console.log(arr.lastIndexOf(2));  // 3 (last occurrence)
5
console.log(arr.includes(3));     // true
6
console.log(arr.find(x => x > 2));     // 3 (first match)
7
console.log(arr.findIndex(x => x > 2)); // 2 (index of first match)

Other Array Methods#

1
let arr = [3, 1, 4, 1, 5];
2

3
// Sort
4
arr.sort();                    // [1, 1, 3, 4, 5] (as strings!)
5
arr.sort((a, b) => a - b);     // [1, 1, 3, 4, 5] (numbers)
6
arr.sort((a, b) => b - a);     // [5, 4, 3, 1, 1] (descending)
7

8
// Reverse
9
arr.reverse();                 // Reverses in place
10

11
// Copy
12
let copy = arr.slice();        // Shallow copy
13
let copy2 = [...arr];          // Spread operator
14

15
// Join
16
console.log(["a", "b", "c"].join("-"));  // "a-b-c"

8. Objects#

Creating Objects#

1
// Object literal
2
let user = {
3
    name: "Ahmed",
4
    age: 25,
5
    isAdmin: true,
6
    greet: function() {
7
        console.log(`Hello, ${this.name}!`);
8
    }
9
};
10

11
// Shorthand
12
let name = "Ahmed";
13
let age = 25;
14
let user2 = { name, age };  // Same as { name: name, age: age }

Accessing Properties#

1
let user = { name: "Ahmed", age: 25 };
2

3
// Dot notation
4
console.log(user.name);  // "Ahmed"
5

6
// Bracket notation
7
console.log(user["name"]);  // "Ahmed"
8

9
// Dynamic key
10
let key = "age";
11
console.log(user[key]);  // 25

Modifying Objects#

1
let user = { name: "Ahmed" };
2

3
// Add property
4
user.age = 25;
5
user["email"] = "ahmed@mail.com";
6

7
// Modify property
8
user.name = "Sara";
9

10
// Delete property
11
delete user.email;
12

13
// Check if property exists
14
console.log("name" in user);  // true
15
console.log(user.hasOwnProperty("name"));  // true

Object Methods#

1
let user = { name: "Ahmed", age: 25 };
2

3
// Get keys
4
console.log(Object.keys(user));    // ["name", "age"]
5

6
// Get values
7
console.log(Object.values(user));  // ["Ahmed", 25]
8

9
// Get entries
10
console.log(Object.entries(user)); // [["name", "Ahmed"], ["age", 25]]
11

12
// Merge objects
13
let extra = { city: "Casa" };
14
let merged = { ...user, ...extra };
15
let merged2 = Object.assign({}, user, extra);
16

17
// Freeze (no modifications)
18
Object.freeze(user);
19

20
// Seal (no add/delete, can modify)
21
Object.seal(user);

9. Conditionals#

if / else if / else#

1
let age = 18;
2

3
if (age < 13) {
4
    console.log("Child");
5
} else if (age < 20) {
6
    console.log("Teenager");
7
} else {
8
    console.log("Adult");
9
}

Ternary Operator#

1
let age = 20;
2
let status = age >= 18 ? "Adult" : "Minor";
3
console.log(status);  // "Adult"
4

5
// Nested
6
let grade = 85;
7
let result = grade >= 90 ? "A" : grade >= 80 ? "B" : grade >= 70 ? "C" : "F";

Switch Statement#

1
let day = 3;
2
let dayName;
3

4
switch (day) {
5
    case 1:
6
        dayName = "Monday";
7
        break;
8
    case 2:
9
        dayName = "Tuesday";
10
        break;
11
    case 3:
12
        dayName = "Wednesday";
13
        break;
14
    default:
15
        dayName = "Unknown";
16
}
17

18
console.log(dayName);  // "Wednesday"

Logical Operators in Conditions#

1
let user = { name: "Ahmed", isAdmin: true };
2

3
// AND
4
if (user.name && user.isAdmin) {
5
    console.log("Welcome, Admin!");
6
}
7

8
// OR
9
let displayName = user.nickname || user.name || "Guest";
10

11
// Nullish coalescing
12
let count = 0;
13
console.log(count || 10);   // 10 (0 is falsy)
14
console.log(count ?? 10);   // 0 (only null/undefined)

10. Loops#

for Loop#

1
for (let i = 0; i < 5; i++) {
2
    console.log(i);  // 0, 1, 2, 3, 4
3
}
4

5
// Loop through array
6
let arr = ["a", "b", "c"];
7
for (let i = 0; i < arr.length; i++) {
8
    console.log(arr[i]);
9
}

while Loop#

1
let i = 0;
2
while (i < 5) {
3
    console.log(i);
4
    i++;
5
}

do…while Loop#

1
let i = 0;
2
do {
3
    console.log(i);
4
    i++;
5
} while (i < 5);

for…of (Arrays, Strings)#

1
let arr = ["a", "b", "c"];
2
for (let item of arr) {
3
    console.log(item);  // "a", "b", "c"
4
}
5

6
let str = "Hello";
7
for (let char of str) {
8
    console.log(char);  // "H", "e", "l", "l", "o"
9
}

for…in (Objects)#

1
let user = { name: "Ahmed", age: 25 };
2
for (let key in user) {
3
    console.log(`${key}: ${user[key]}`);
4
}
5
// name: Ahmed
6
// age: 25

break and continue#

1
// break - exit loop
2
for (let i = 0; i < 10; i++) {
3
    if (i === 5) break;
4
    console.log(i);  // 0, 1, 2, 3, 4
5
}
6

7
// continue - skip iteration
8
for (let i = 0; i < 5; i++) {
9
    if (i === 2) continue;
10
    console.log(i);  // 0, 1, 3, 4
11
}

11. Functions#

Function Declaration#

1
function greet(name) {
2
    return `Hello, ${name}!`;
3
}
4

5
console.log(greet("Ahmed"));  // "Hello, Ahmed!"

Function Expression#

1
const greet = function(name) {
2
    return `Hello, ${name}!`;
3
};

Default Parameters#

1
function greet(name = "Guest") {
2
    return `Hello, ${name}!`;
3
}
4

5
console.log(greet());         // "Hello, Guest!"
6
console.log(greet("Ahmed"));  // "Hello, Ahmed!"

Rest Parameters#

1
function sum(...numbers) {
2
    return numbers.reduce((a, b) => a + b, 0);
3
}
4

5
console.log(sum(1, 2, 3));     // 6
6
console.log(sum(1, 2, 3, 4, 5)); // 15

Return Multiple Values#

1
function getUser() {
2
    return { name: "Ahmed", age: 25 };
3
}
4

5
const { name, age } = getUser();

12. Arrow Functions#

Basic Syntax#

1
// Regular function
2
function add(a, b) {
3
    return a + b;
4
}
5

6
// Arrow function
7
const add = (a, b) => {
8
    return a + b;
9
};
10

11
// Short form (implicit return)
12
const add = (a, b) => a + b;
13

14
// Single parameter (no parentheses needed)
15
const double = x => x * 2;
16

17
// No parameters
18
const greet = () => "Hello!";

Arrow Functions in Callbacks#

1
let numbers = [1, 2, 3, 4, 5];
2

3
// Regular function
4
numbers.map(function(n) {
5
    return n * 2;
6
});
7

8
// Arrow function
9
numbers.map(n => n * 2);

this in Arrow Functions#

1
// Arrow functions don't have their own 'this'
2
const user = {
3
    name: "Ahmed",
4

5
    // Regular function - 'this' is the object
6
    greet: function() {
7
        console.log(`Hello, ${this.name}`);
8
    },
9

10
    // Arrow function - 'this' is from outer scope
11
    greetArrow: () => {
12
        console.log(`Hello, ${this.name}`);  // undefined
13
    }
14
};

13. Array Methods#

forEach#

1
let arr = [1, 2, 3];
2
arr.forEach((item, index) => {
3
    console.log(`${index}: ${item}`);
4
});

map (transform)#

1
let numbers = [1, 2, 3];
2
let doubled = numbers.map(n => n * 2);
3
console.log(doubled);  // [2, 4, 6]

filter#

1
let numbers = [1, 2, 3, 4, 5];
2
let evens = numbers.filter(n => n % 2 === 0);
3
console.log(evens);  // [2, 4]

reduce#

1
let numbers = [1, 2, 3, 4, 5];
2

3
// Sum
4
let sum = numbers.reduce((acc, n) => acc + n, 0);
5
console.log(sum);  // 15
6

7
// Max
8
let max = numbers.reduce((a, b) => a > b ? a : b);
9
console.log(max);  // 5

find / findIndex#

1
let users = [
2
    { id: 1, name: "Ahmed" },
3
    { id: 2, name: "Sara" }
4
];
5

6
let user = users.find(u => u.id === 2);
7
console.log(user);  // { id: 2, name: "Sara" }
8

9
let index = users.findIndex(u => u.id === 2);
10
console.log(index);  // 1

some / every#

1
let numbers = [1, 2, 3, 4, 5];
2

3
// some - at least one matches
4
console.log(numbers.some(n => n > 3));   // true
5

6
// every - all match
7
console.log(numbers.every(n => n > 0));  // true
8
console.log(numbers.every(n => n > 3));  // false

sort#

1
let numbers = [3, 1, 4, 1, 5];
2

3
// Ascending
4
numbers.sort((a, b) => a - b);  // [1, 1, 3, 4, 5]
5

6
// Descending
7
numbers.sort((a, b) => b - a);  // [5, 4, 3, 1, 1]
8

9
// Sort strings
10
let names = ["Charlie", "Alice", "Bob"];
11
names.sort();  // ["Alice", "Bob", "Charlie"]

Chaining Methods#

1
let users = [
2
    { name: "Ahmed", age: 25 },
3
    { name: "Sara", age: 17 },
4
    { name: "Ali", age: 30 }
5
];
6

7
let result = users
8
    .filter(u => u.age >= 18)
9
    .map(u => u.name)
10
    .sort();
11

12
console.log(result);  // ["Ahmed", "Ali"]

14. Object Methods#

Object.keys / values / entries#

1
let user = { name: "Ahmed", age: 25 };
2

3
Object.keys(user);    // ["name", "age"]
4
Object.values(user);  // ["Ahmed", 25]
5
Object.entries(user); // [["name", "Ahmed"], ["age", 25]]

Object.assign / spread#

1
let defaults = { theme: "dark", lang: "en" };
2
let userPrefs = { lang: "ar" };
3

4
// Merge
5
let settings = Object.assign({}, defaults, userPrefs);
6
// or
7
let settings2 = { ...defaults, ...userPrefs };
8

9
console.log(settings);  // { theme: "dark", lang: "ar" }

Object.fromEntries#

1
let entries = [["name", "Ahmed"], ["age", 25]];
2
let obj = Object.fromEntries(entries);
3
console.log(obj);  // { name: "Ahmed", age: 25 }

15. Destructuring#

Array Destructuring#

1
let arr = [1, 2, 3];
2

3
// Basic
4
let [a, b, c] = arr;
5
console.log(a, b, c);  // 1 2 3
6

7
// Skip elements
8
let [first, , third] = arr;
9
console.log(first, third);  // 1 3
10

11
// Default values
12
let [x = 0, y = 0, z = 0, w = 0] = arr;
13
console.log(w);  // 0
14

15
// Rest
16
let [head, ...tail] = arr;
17
console.log(head, tail);  // 1 [2, 3]
18

19
// Swap variables
20
let a = 1, b = 2;
21
[a, b] = [b, a];

Object Destructuring#

1
let user = { name: "Ahmed", age: 25, city: "Casa" };
2

3
// Basic
4
let { name, age } = user;
5
console.log(name, age);  // "Ahmed" 25
6

7
// Rename
8
let { name: userName, age: userAge } = user;
9
console.log(userName, userAge);  // "Ahmed" 25
10

11
// Default values
12
let { name, country = "Morocco" } = user;
13
console.log(country);  // "Morocco"
14

15
// Nested
16
let user2 = {
17
    name: "Ahmed",
18
    address: { city: "Casa", zip: "20000" }
19
};
20
let { address: { city } } = user2;
21
console.log(city);  // "Casa"

Function Parameters#

1
// Array
2
function sum([a, b]) {
3
    return a + b;
4
}
5
sum([5, 3]);  // 8
6

7
// Object
8
function greet({ name, age }) {
9
    console.log(`${name} is ${age}`);
10
}
11
greet({ name: "Ahmed", age: 25 });

16. Spread and Rest#

Spread Operator (…)#

1
// Arrays
2
let arr1 = [1, 2, 3];
3
let arr2 = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]
4

5
// Objects
6
let obj1 = { a: 1, b: 2 };
7
let obj2 = { ...obj1, c: 3 };  // { a: 1, b: 2, c: 3 }
8

9
// Function arguments
10
function sum(a, b, c) {
11
    return a + b + c;
12
}
13
let nums = [1, 2, 3];
14
sum(...nums);  // 6

Rest Parameters#

1
// Function parameters
2
function sum(...numbers) {
3
    return numbers.reduce((a, b) => a + b, 0);
4
}
5
sum(1, 2, 3, 4);  // 10
6

7
// Destructuring
8
let [first, ...rest] = [1, 2, 3, 4];
9
console.log(first);  // 1
10
console.log(rest);   // [2, 3, 4]

17. Classes#

Basic Class#

1
class Person {
2
    constructor(name, age) {
3
        this.name = name;
4
        this.age = age;
5
    }
6

7
    greet() {
8
        console.log(`Hello, I'm ${this.name}`);
9
    }
10

11
    // Getter
12
    get info() {
13
        return `${this.name}, ${this.age}`;
14
    }
15

16
    // Setter
17
    set info(value) {
18
        [this.name, this.age] = value.split(", ");
19
    }
20

21
    // Static method
22
    static create(name) {
23
        return new Person(name, 0);
24
    }
25
}
26

27
let person = new Person("Ahmed", 25);
28
person.greet();  // "Hello, I'm Ahmed"
29
console.log(person.info);  // "Ahmed, 25"

Inheritance#

1
class Animal {
2
    constructor(name) {
3
        this.name = name;
4
    }
5

6
    speak() {
7
        console.log(`${this.name} makes a sound`);
8
    }
9
}
10

11
class Dog extends Animal {
12
    constructor(name, breed) {
13
        super(name);  // Call parent constructor
14
        this.breed = breed;
15
    }
16

17
    speak() {
18
        console.log(`${this.name} barks`);
19
    }
20
}
21

22
let dog = new Dog("Buddy", "Labrador");
23
dog.speak();  // "Buddy barks"

18. Promises and Async/Await#

Promises#

1
// Create a promise
2
const promise = new Promise((resolve, reject) => {
3
    setTimeout(() => {
4
        let success = true;
5
        if (success) {
6
            resolve("Data received!");
7
        } else {
8
            reject("Error occurred!");
9
        }
10
    }, 1000);
11
});
12

13
// Use the promise
14
promise
15
    .then(data => console.log(data))
16
    .catch(error => console.log(error))
17
    .finally(() => console.log("Done"));

Async/Await#

1
// Async function
2
async function fetchData() {
3
    try {
4
        let response = await fetch("https://api.example.com/data");
5
        let data = await response.json();
6
        console.log(data);
7
    } catch (error) {
8
        console.log("Error:", error);
9
    }
10
}
11

12
fetchData();

Promise.all / Promise.race#

1
// Wait for all
2
let promises = [
3
    fetch("/api/users"),
4
    fetch("/api/posts"),
5
    fetch("/api/comments")
6
];
7

8
let results = await Promise.all(promises);
9

10
// First to complete
11
let first = await Promise.race(promises);

19. Error Handling#

try / catch / finally#

1
try {
2
    let result = riskyOperation();
3
    console.log(result);
4
} catch (error) {
5
    console.log("Error:", error.message);
6
} finally {
7
    console.log("This always runs");
8
}

Throwing Errors#

1
function divide(a, b) {
2
    if (b === 0) {
3
        throw new Error("Cannot divide by zero!");
4
    }
5
    return a / b;
6
}
7

8
try {
9
    divide(10, 0);
10
} catch (e) {
11
    console.log(e.message);  // "Cannot divide by zero!"
12
}

Custom Errors#

1
class ValidationError extends Error {
2
    constructor(message) {
3
        super(message);
4
        this.name = "ValidationError";
5
    }
6
}
7

8
throw new ValidationError("Invalid email");

20. Modules#

Export#

1
// Named exports (utils.js)
2
export const PI = 3.14159;
3
export function add(a, b) { return a + b; }
4
export class Calculator { }
5

6
// Default export (one per file)
7
export default function greet(name) {
8
    return `Hello, ${name}!`;
9
}

Import#

1
// Named imports
2
import { PI, add } from './utils.js';
3

4
// Import all
5
import * as utils from './utils.js';
6
console.log(utils.PI);
7

8
// Default import
9
import greet from './utils.js';
10

11
// Both
12
import greet, { PI, add } from './utils.js';
13

14
// Rename
15
import { add as sum } from './utils.js';

Part 2: DOM Manipulation#

21. DOM Introduction#

DOM = Document Object Model

The DOM is a tree structure representing the HTML document.

1
document
2
└── html
3
    ├── head
4
    │   └── title
5
    └── body
6
        ├── h1
7
        └── p

22. Selecting Elements#

Single Element#

1
// By ID (fastest)
2
const element = document.getElementById("myId");
3

4
// By CSS selector (first match)
5
const element = document.querySelector(".myClass");
6
const element = document.querySelector("#myId");
7
const element = document.querySelector("div.container > p");

Multiple Elements#

1
// By class name
2
const elements = document.getElementsByClassName("myClass");
3

4
// By tag name
5
const elements = document.getElementsByTagName("p");
6

7
// By CSS selector (all matches)
8
const elements = document.querySelectorAll(".myClass");
9
const elements = document.querySelectorAll("p");
10

11
// Convert to array
12
const array = Array.from(elements);
13
const array = [...elements];

1
const element = document.querySelector(".item");
2

3
// Parent
4
element.parentElement;
5
element.parentNode;
6

7
// Children
8
element.children;           // HTMLCollection
9
element.childNodes;         // NodeList (includes text nodes)
10
element.firstElementChild;
11
element.lastElementChild;
12

13
// Siblings
14
element.nextElementSibling;
15
element.previousElementSibling;
16

17
// Closest ancestor matching selector
18
element.closest(".container");

23. Modifying Elements#

Content#

1
const element = document.querySelector("#myDiv");
2

3
// Text content
4
element.textContent = "Hello";
5
console.log(element.textContent);
6

7
// HTML content
8
element.innerHTML = "<strong>Hello</strong>";
9
console.log(element.innerHTML);
10

11
// Outer HTML (includes element itself)
12
console.log(element.outerHTML);

Attributes#

1
const link = document.querySelector("a");
2

3
// Get attribute
4
link.getAttribute("href");
5
link.href;  // Direct property
6

7
// Set attribute
8
link.setAttribute("href", "https://google.com");
9
link.href = "https://google.com";
10

11
// Remove attribute
12
link.removeAttribute("target");
13

14
// Check if has attribute
15
link.hasAttribute("target");
16

17
// Data attributes
18
// <div data-user-id="123" data-role="admin">
19
const div = document.querySelector("div");
20
div.dataset.userId;  // "123"
21
div.dataset.role;    // "admin"
22
div.dataset.newAttr = "value";  // Add data-new-attr

Classes#

1
const element = document.querySelector(".item");
2

3
// Add class
4
element.classList.add("active");
5
element.classList.add("class1", "class2");
6

7
// Remove class
8
element.classList.remove("active");
9

10
// Toggle class
11
element.classList.toggle("active");  // Add if missing, remove if present
12

13
// Check class
14
element.classList.contains("active");  // true/false
15

16
// Replace class
17
element.classList.replace("old", "new");
18

19
// Get all classes
20
console.log(element.className);  // String
21
console.log(element.classList);  // DOMTokenList

Styles#

1
const element = document.querySelector(".box");
2

3
// Set individual styles
4
element.style.color = "red";
5
element.style.backgroundColor = "blue";  // camelCase!
6
element.style.fontSize = "20px";
7

8
// Set multiple styles
9
element.style.cssText = "color: red; background: blue; font-size: 20px;";
10

11
// Get computed styles
12
const styles = getComputedStyle(element);
13
console.log(styles.color);
14
console.log(styles.getPropertyValue("background-color"));

24. Creating Elements#

Create and Append#

1
// Create element
2
const div = document.createElement("div");
3
div.textContent = "Hello";
4
div.classList.add("box");
5

6
// Append to document
7
document.body.appendChild(div);
8

9
// Append to specific element
10
const container = document.querySelector(".container");
11
container.appendChild(div);
12

13
// Insert at specific position
14
container.insertBefore(div, container.firstChild);
15

16
// Modern methods
17
container.append(div);           // End (multiple allowed)
18
container.prepend(div);          // Beginning
19
container.after(div);            // After container
20
container.before(div);           // Before container
21
element.replaceWith(newElement); // Replace

Create from HTML#

1
// Using innerHTML
2
container.innerHTML = "<div class='box'>Hello</div>";
3

4
// Using insertAdjacentHTML
5
container.insertAdjacentHTML("beforeend", "<div>Hello</div>");
6
// Positions: beforebegin, afterbegin, beforeend, afterend

Clone Elements#

1
const original = document.querySelector(".item");
2
const clone = original.cloneNode(true);  // true = deep clone
3
container.appendChild(clone);

Remove Elements#

1
// Remove element
2
element.remove();
3

4
// Remove child
5
parent.removeChild(child);
6

7
// Clear all children
8
container.innerHTML = "";
9
// or
10
while (container.firstChild) {
11
    container.removeChild(container.firstChild);
12
}

25. Events#

Adding Event Listeners#

1
const button = document.querySelector("#myButton");
2

3
// Add listener
4
button.addEventListener("click", function(event) {
5
    console.log("Button clicked!");
6
    console.log(event);  // Event object
7
});
8

9
// Arrow function
10
button.addEventListener("click", (e) => {
11
    console.log("Clicked!");
12
});
13

14
// Named function
15
function handleClick(e) {
16
    console.log("Clicked!");
17
}
18
button.addEventListener("click", handleClick);
19

20
// Remove listener
21
button.removeEventListener("click", handleClick);

Common Events#

1
// Mouse events
2
element.addEventListener("click", handler);
3
element.addEventListener("dblclick", handler);
4
element.addEventListener("mouseenter", handler);
5
element.addEventListener("mouseleave", handler);
6
element.addEventListener("mousemove", handler);
7
element.addEventListener("mousedown", handler);
8
element.addEventListener("mouseup", handler);
9

10
// Keyboard events
11
document.addEventListener("keydown", handler);
12
document.addEventListener("keyup", handler);
13
document.addEventListener("keypress", handler);  // Deprecated
14

15
// Form events
16
form.addEventListener("submit", handler);
17
input.addEventListener("input", handler);
18
input.addEventListener("change", handler);
19
input.addEventListener("focus", handler);
20
input.addEventListener("blur", handler);
21

22
// Document events
23
document.addEventListener("DOMContentLoaded", handler);
24
window.addEventListener("load", handler);
25
window.addEventListener("scroll", handler);
26
window.addEventListener("resize", handler);

Event Object#

1
element.addEventListener("click", (e) => {
2
    // Common properties
3
    e.target;           // Element that triggered event
4
    e.currentTarget;    // Element with listener
5
    e.type;             // Event type ("click")
6

7
    // Mouse position
8
    e.clientX, e.clientY;  // Relative to viewport
9
    e.pageX, e.pageY;      // Relative to document
10

11
    // Keyboard
12
    e.key;              // Key pressed ("Enter")
13
    e.code;             // Physical key ("KeyA")
14
    e.ctrlKey;          // Ctrl held?
15
    e.shiftKey;         // Shift held?
16
    e.altKey;           // Alt held?
17

18
    // Prevent default behavior
19
    e.preventDefault();
20

21
    // Stop propagation
22
    e.stopPropagation();
23
});

26. Event Delegation#

Instead of adding listeners to many elements, add one to the parent.

1
// Bad: Listener on each item
2
document.querySelectorAll(".item").forEach(item => {
3
    item.addEventListener("click", handleClick);
4
});
5

6
// Good: Delegation
7
document.querySelector(".container").addEventListener("click", (e) => {
8
    if (e.target.classList.contains("item")) {
9
        handleClick(e);
10
    }
11

12
    // Or use closest()
13
    const item = e.target.closest(".item");
14
    if (item) {
15
        handleClick(item);
16
    }
17
});

27. Form Handling#

Get Form Values#

1
const form = document.querySelector("#myForm");
2

3
form.addEventListener("submit", (e) => {
4
    e.preventDefault();  // Prevent page reload
5

6
    // Get values
7
    const name = document.querySelector("#name").value;
8
    const email = document.querySelector("#email").value;
9

10
    // Or using FormData
11
    const formData = new FormData(form);
12
    const name = formData.get("name");
13
    const email = formData.get("email");
14

15
    // Convert to object
16
    const data = Object.fromEntries(formData);
17
    console.log(data);  // { name: "...", email: "..." }
18
});

Form Validation#

1
const form = document.querySelector("#myForm");
2
const email = document.querySelector("#email");
3

4
// Check validity
5
email.addEventListener("input", () => {
6
    if (email.validity.valid) {
7
        // Valid
8
    } else {
9
        if (email.validity.valueMissing) {
10
            console.log("Email is required");
11
        }
12
        if (email.validity.typeMismatch) {
13
            console.log("Invalid email format");
14
        }
15
    }
16
});
17

18
// Set custom validity
19
email.setCustomValidity("Please enter a valid email");

28. Local Storage#

Basic Operations#

1
// Store data
2
localStorage.setItem("name", "Ahmed");
3

4
// Get data
5
const name = localStorage.getItem("name");
6

7
// Remove item
8
localStorage.removeItem("name");
9

10
// Clear all
11
localStorage.clear();
12

13
// Check if exists
14
if (localStorage.getItem("name")) {
15
    // exists
16
}

Store Objects#

1
// Store object
2
const user = { name: "Ahmed", age: 25 };
3
localStorage.setItem("user", JSON.stringify(user));
4

5
// Get object
6
const storedUser = JSON.parse(localStorage.getItem("user"));
7
console.log(storedUser.name);  // "Ahmed"

Session Storage#

1
// Same API, but data cleared when tab closes
2
sessionStorage.setItem("temp", "data");
3
sessionStorage.getItem("temp");

29. Fetch API#

GET Request#

1
fetch("https://api.example.com/users")
2
    .then(response => response.json())
3
    .then(data => console.log(data))
4
    .catch(error => console.log("Error:", error));
5

6
// Async/await
7
async function getUsers() {
8
    try {
9
        const response = await fetch("https://api.example.com/users");
10
        const data = await response.json();
11
        console.log(data);
12
    } catch (error) {
13
        console.log("Error:", error);
14
    }
15
}

POST Request#

1
fetch("https://api.example.com/users", {
2
    method: "POST",
3
    headers: {
4
        "Content-Type": "application/json"
5
    },
6
    body: JSON.stringify({
7
        name: "Ahmed",
8
        email: "ahmed@mail.com"
9
    })
10
})
11
.then(response => response.json())
12
.then(data => console.log(data));

Other Options#

1
fetch(url, {
2
    method: "POST",  // GET, POST, PUT, DELETE
3
    headers: {
4
        "Content-Type": "application/json",
5
        "Authorization": "Bearer token"
6
    },
7
    body: JSON.stringify(data),
8
    mode: "cors",
9
    credentials: "include"  // Send cookies
10
});

30. Practical Projects#

Project 1: Todo List#

1
<div id="app">
2
    <input type="text" id="todoInput" placeholder="Add todo...">
3
    <button id="addBtn">Add</button>
4
    <ul id="todoList"></ul>
5
</div>

1
const input = document.querySelector("#todoInput");
2
const addBtn = document.querySelector("#addBtn");
3
const list = document.querySelector("#todoList");
4

5
// Load from storage
6
let todos = JSON.parse(localStorage.getItem("todos")) || [];
7

8
function renderTodos() {
9
    list.innerHTML = todos.map((todo, index) => `
10
        <li class="${todo.done ? 'done' : ''}">
11
            <span onclick="toggleTodo(${index})">${todo.text}</span>
12
            <button onclick="deleteTodo(${index})">×</button>
13
        </li>
14
    `).join("");
15
}
16

17
function addTodo() {
18
    if (input.value.trim()) {
19
        todos.push({ text: input.value, done: false });
20
        input.value = "";
21
        saveTodos();
22
        renderTodos();
23
    }
24
}
25

26
function toggleTodo(index) {
27
    todos[index].done = !todos[index].done;
28
    saveTodos();
29
    renderTodos();
30
}
31

32
function deleteTodo(index) {
33
    todos.splice(index, 1);
34
    saveTodos();
35
    renderTodos();
36
}
37

38
function saveTodos() {
39
    localStorage.setItem("todos", JSON.stringify(todos));
40
}
41

42
addBtn.addEventListener("click", addTodo);
43
input.addEventListener("keypress", (e) => {
44
    if (e.key === "Enter") addTodo();
45
});
46

47
renderTodos();

Project 2: Dark Mode Toggle#

1
const toggle = document.querySelector("#darkModeToggle");
2

3
// Check saved preference
4
if (localStorage.getItem("darkMode") === "true") {
5
    document.body.classList.add("dark-mode");
6
}
7

8
toggle.addEventListener("click", () => {
9
    document.body.classList.toggle("dark-mode");
10
    localStorage.setItem(
11
        "darkMode",
12
        document.body.classList.contains("dark-mode")
13
    );
14
});

Project 3: Live Search#

1
const searchInput = document.querySelector("#search");
2
const results = document.querySelector("#results");
3

4
const items = ["Apple", "Banana", "Cherry", "Date", "Fig", "Grape"];
5

6
searchInput.addEventListener("input", (e) => {
7
    const query = e.target.value.toLowerCase();
8

9
    const filtered = items.filter(item =>
10
        item.toLowerCase().includes(query)
11
    );
12

13
    results.innerHTML = filtered.map(item =>
14
        `<li>${item}</li>`
15
    ).join("");
16
});

🎯 Quick Reference#

JavaScript#

Feature	Syntax
Variables	`let`, `const`
Functions	`function()`, `() => {}`
Arrays	`map`, `filter`, `reduce`
Objects	`{ key: value }`
Classes	`class Name {}`
Async	`async/await`, `Promise`

DOM#

Method	Description
`querySelector()`	Select element
`addEventListener()`	Add event
`createElement()`	Create element
`classList.add()`	Add class
`innerHTML`	Set HTML
`textContent`	Set text

Created by cat0x01 🥷🏻

⚡ JavaScript Complete Guide - From Basics to DOM Mastery#

📚 Table of Contents#

Part 1: JavaScript Basics#

Part 2: DOM Manipulation#

Part 1: JavaScript Basics#

1. What is JavaScript?#

What can JavaScript do?#

2. How to Add JavaScript#

Inline (in HTML)#

Internal (in <script> tag)#

External (separate file) ⭐ Best#

Script Placement#

3. Variables#

var, let, const#

Naming Rules#

4. Data Types#

Primitive Types#

Check Type#

Type Conversion#

5. Operators#

Arithmetic Operators#

Comparison Operators#

Logical Operators#

Assignment Operators#

6. Strings#

Creating Strings#

String Methods#

Template Literals#

7. Arrays#

Creating Arrays#

Accessing Elements#

Modifying Arrays#

Searching Arrays#

Other Array Methods#

8. Objects#

Creating Objects#

Accessing Properties#

Modifying Objects#

Object Methods#

9. Conditionals#

if / else if / else#

Ternary Operator#

Switch Statement#

Logical Operators in Conditions#

10. Loops#

for Loop#

while Loop#

do…while Loop#

for…of (Arrays, Strings)#

for…in (Objects)#

break and continue#

11. Functions#

Function Declaration#

Function Expression#

Default Parameters#

Rest Parameters#

Return Multiple Values#

12. Arrow Functions#

Basic Syntax#

Arrow Functions in Callbacks#

this in Arrow Functions#

13. Array Methods#

forEach#

map (transform)#

filter#

reduce#

find / findIndex#

some / every#

sort#

Chaining Methods#

14. Object Methods#

Object.keys / values / entries#

Object.assign / spread#

Object.fromEntries#

15. Destructuring#

Array Destructuring#

Object Destructuring#

Function Parameters#

16. Spread and Rest#

Spread Operator (…)#

Internal (in `<script>` tag)#