JavaScript Mastery: Complete Guide for Beginners to Advanced

sultan khan

 




Table of Contents

  1. Introduction to JavaScript

  2. History & Key Features

  3. Setup & First Program

  4. Variables & Constants

  5. Data Types

  6. Operators

  7. Conditional Statements

  8. Loops

  9. Functions

  10. Arrays

  11. Objects

  12. Strings

  13. Date & Math

  14. DOM Manipulation

  15. Events

  16. Form Validation

  17. ES6+ Features

  18. Asynchronous JavaScript

  19. Error Handling

  20. LocalStorage & SessionStorage

  21. JSON

  22. Classes & OOP

  23. Prototype & Inheritance

  24. Hoisting & Scope

  25. Closures

  26. Execution Context & Event Loop

  27. Map, Filter, Reduce

  28. Regular Expressions

  29. Advanced Concepts

  30. Interview Questions & Practice Projects





🧩 Chapter 1: Introduction to JavaScript

JavaScript is a lightweight, interpreted scripting language used to create dynamic and interactive web pages.
HTML defines the structure, CSS adds styling, and JavaScript adds logic and behavior.

🔹 Example

<!DOCTYPE html>
<html>
<head>
<title>Intro Example</title>
</head>
<body>
<h2 id="text">Hello World!</h2>
<button onclick="changeText()">Click Me</button>

<script>
function changeText() {
  document.getElementById("text").innerHTML = "Welcome to JavaScript!";
}
</script>
</body>
</html>

🧠 Key Notes

  • JavaScript runs inside browser engines

    • Chrome → V8

    • Firefox → SpiderMonkey

  • JavaScript controls the behavior of a webpage

Chapter 2: History & Key Features

History

JavaScript was created in 1995 by Brendan Eich at Netscape.
Originally named Mocha → LiveScript → JavaScript.
It is standardized as ECMAScript (ES).

Important Features

  • Lightweight & fast

  • Interpreted

  • Object-Oriented

  • Dynamic typing

  • Prototype-based inheritance

  • Event-driven

Example

<script>
let name = "Sultan";
console.log("Welcome " + name);
</script>

Chapter 3: Setup & First Program

To write JavaScript, you only need:

  • A browser

  • A text editor (VS Code recommended)

Basic Steps

  1. Open VS Code

  2. Create an HTML file

  3. Use <script> tags inside body or head

Example

<!DOCTYPE html>
<html>
<body>

<script>
alert("Hello JavaScript!");
console.log("This is your first JS program.");
</script>

</body>
</html>

Chapter 4: Variables & Constants

Variable Types

KeywordScopeReassign?Use Case
varfunctionyesold JS
letblockyesmodern use
constblocknoconstant values

Example

<script>
let name = "Sultan";
const pi = 3.14;
var age = 17;
console.log(name, pi, age);
</script>

Chapter 5: Data Types

Primitive Types

  • String

  • Number

  • Boolean

  • Undefined

  • Null

  • Symbol

  • BigInt

Example

<script>
let a = "Sultan";
let b = 20;
let c = true;
let d;
let e = null;
console.log(typeof a, typeof b, typeof c, typeof d, typeof e);
</script>

Composite Types

  • Object

  • Array

Chapter 6: Operators

Categories

  • Arithmetic → +, -, *, /, %, **

  • Comparison → ==, ===, !=, >, <

  • Logical → &&, ||, !

  • Assignment → =, +=, -=

  • Ternary → condition ? true : false

Example

<script>
let x = 10, y = 5;
console.log(x + y);
console.log(x > y ? "x is greater" : "y is greater");
</script>

Chapter 7: Conditional Statements

if-else

<script>
let age = 18;
if(age >= 18){
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}
</script>

switch

<script>
let day = 2;
switch(day){
  case 1: console.log("Monday"); break;
  case 2: console.log("Tuesday"); break;
  default: console.log("Other day");
}
</script>

Chapter 8: Loops

  • for

  • while

  • do...while

  • for...of

  • for...in

Example

<script>
for(let i=1; i<=5; i++){
  console.log("Number: " + i);
}
</script>

Chapter 9: Functions

Normal Function

<script>
function greet(name){
  return "Hello " + name;
}
console.log(greet("Sultan"));
</script>

Arrow Function

<script>
const sum = (a,b) => a + b;
console.log(sum(4,5));
</script>

Chapter 10: Arrays

Example

<script>
let fruits = ["Apple", "Mango", "Banana"];
fruits.push("Orange");
console.log(fruits);
</script>

Common Methods

  • push(), pop()

  • shift(), unshift()

  • slice(), splice()

  • indexOf()

Chapter 11: Objects

Example

<script>
let person = {
  name: "Aryan",
  age: 17,
  greet: function(){ console.log("Hello " + this.name); }
};
person.greet();
</script>

Chapter 12: Strings

Example

<script>
let text = "JavaScript Mastery";
console.log(text.length);
console.log(text.toUpperCase());
console.log(text.includes("Mastery"));
</script>

Chapter 13: DOM Manipulation

<h2 id="title">Old Text</h2>
<button onclick="change()">Click</button>

<script>
function change(){
  document.getElementById("title").innerHTML = "Changed Text!";
}
</script>

Chapter 14: Events

Common Events

  • onclick

  • onchange

  • onmouseover

  • onkeyup

  • onload

Example

<input type="text" onkeyup="show(this.value)">
<p id="output"></p>

<script>
function show(val){
  document.getElementById("output").innerText = val;
}
</script>

Chapter 15: ES6+ Features

Popular Features

  • let & const

  • Template literals

  • Arrow functions

  • Destructuring

  • Spread operator

  • Modules

  • Classes

  • Promises

Example

<script>
const user = {name:"Rizwan", age:17};
const {name, age} = user;
console.log(`Hello ${name}, you are ${age} years old.`);
</script>

Chapter 16: Asynchronous JavaScript

Promise Example

<script>
let promise = new Promise((resolve)=>{
  setTimeout(()=> resolve("Data Loaded!"), 2000);
});
promise.then(msg => console.log(msg));
</script>

Async/Await Example

<script>
async function loadData(){
  let result = await promise;
  console.log(result);
}
loadData();
</script>

Chapter 17: Closures

Example

<script>
function outer(){
  let count = 0;
  return function(){
    count++;
    console.log(count);
  }
}
let counter = outer();
counter();
counter();
</script>

Chapter 18: Hoisting & Scope

<script>
console.log(a); // undefined
var a = 5;
</script>

Chapter 19: Map, Filter, Reduce

<script>
let nums = [1,2,3,4,5];
let doubled = nums.map(n => n*2);
let evens = nums.filter(n => n%2===0);
let total = nums.reduce((a,b)=>a+b);
console.log(doubled, evens, total);
</script>

Chapter 20: Event Loop (Advanced)

<script>
console.log("Start");
setTimeout(()=>console.log("Inside timeout"),0);
console.log("End");
</script>

Chapter 21: Final Practice Projects

  1. Calculator App

  2. To-Do List

  3. Digital Clock

  4. Form Validation System

  5. Typing Speed Tester

  6. Weather App (API based)

  7. Notes App (LocalStorage)


Thank you for reading! Keep learning, keep building, and continue your journey toward JavaScript mastery.


0 Comments