Part 3 — Web Dev Series

JavaScript Seekhein — Websites ko Zinda Karein!

Variables se lekar DOM manipulation tak — ek complete beginner guide jo aapki website ko interactive aur dynamic banayegi.

35 minute read
Beginner Level
February 2026
8 Steps
1
Step 01

JavaScript kya hai?

JavaScript (JS) web ki programming language hai. Agar HTML ghar ki deewarein hain aur CSS rang aur design hai, to JavaScript bijli aur paani hai — yeh sab kuch chalata hai!

🧱

HTML

Structure — kya dikhana hai. <h1>, <p>, <button>

🎨

CSS

Design — kaisa dikhana hai. Rang, size, layout.

⚡

JavaScript

Behaviour — kya karna hai. Click, animation, data fetch.

🌐

Real Examples

YouTube play button, Instagram likes, Google search suggestions — sab JS!

JS kaise add karein: HTML file mein <script> tag use karein — ya alag .js file banayein. Hum aaj dono dekhenge!

JS ko HTML mein add karna
<!-- Method 1: HTML file ke andar -->
<script>
    alert("Hello Pakistan! JS chal rahi hai!");
</script>

<!-- Method 2: Alag file (recommended) -->
<script src="script.js"></script>

<!-- IMPORTANT: script tag body ke bilkul end mein rakhein! -->
2
Step 02

Variables — Data Store Karna

Variable ek dabba hai jisme aap koi bhi data rakh sakte hain — naam, number, ya kuch bhi. JS mein teen tarike hain variable banane ke:

var
  • ❌ Purana tarika
  • ❌ Bahut loopholes
  • ❌ Avoid karein
let
  • ✅ Modern tarika
  • ✅ Value badal sakte hain
  • ✅ Mostly use karein
const
  • ✅ Constant value
  • ✅ Value nahi badlegi
  • ✅ Default use karein
Variables
// let — value badal sakti hai
let naam = "Ali";
naam = "Ahmed";  // ✅ Theek hai

// const — value fix hai
const desh = "Pakistan";
// desh = "India";  ❌ ERROR aayega!

// Numbers
let umar = 22;
const PI = 3.14;

// Boolean (true/false)
let loginHai = true;
let adminHai = false;

// Console mein print karein (browser DevTools mein dekho)
console.log("Naam:", naam);
console.log("Umar:", umar);

console.log() aapka best dost hai! F12 dabayein browser mein → Console tab kholein → wahan aapka output dikhega. Debugging ke liye zaroor seekhein!

Live JS Console — Code likhein aur Run karein!
Output:
▶ Run button dabayein...
3
Step 03

Data Types — Kya kya store kar sakte hain?

JavaScript mein har variable ka ek type hota hai. Inhe samajhna bahut zaroor hai!

String
"Hello", 'Ali'

Text — quotes mein

Number
42, 3.14, -10

Koi bhi number

Boolean
true, false

Sirf haan ya nahi

Array
[1, 2, 3]

List of values

Object
{ naam: "Ali" }

Key-value pairs

null / undefined
null, undefined

Koi value nahi

Data Types Examples
// String — text
let shehr = "Karachi";
let msg = `Mera shehr ${shehr} hai`; // Template literal

// Array — list
const cities = ["Karachi", "Lahore", "Islamabad"];
console.log(cities[0]);  // "Karachi" — index 0 se shuru
console.log(cities.length); // 3

// Object — related data
const student = {
    naam: "Ayesha",
    umar: 20,
    city: "Lahore",
    loginHai: true
};
console.log(student.naam);  // "Ayesha"
console.log(student.city);  // "Lahore"

 Quick Quiz!

JavaScript mein list of items store karne ke liye kaunsa data type use hoga?

A String
B Boolean
C Array
D Number
4
Step 04

Functions — Kaam Package Karein

Function ek reusable block of code hai. Ek baar likhein, baar baar use karein! Jaise microwave — ek baar set karo, button dabao, kaam ho.

Functions
// Basic function
function salaamKaro() {
    console.log("Assalam o Alaikum!");
}
salaamKaro();  // Call karo

// Function with parameters (inputs)
function naamSaath(naam) {
    console.log(`Assalam o Alaikum, ${naam}!`);
}
naamSaath("Ahmed");   // Assalam o Alaikum, Ahmed!
naamSaath("Fatima");  // Assalam o Alaikum, Fatima!

// Function with return value
function jodo(a, b) {
    return a + b;
}
let jawab = jodo(10, 5);
console.log("Jod:", jawab);  // 15

// Arrow function (modern shorthand)
const zarb = (a, b) => a * b;
console.log(zarb(4, 3));  // 12
Functions Practice — Edit aur Run karein!
Output:
▶ Run button dabayein...
5
Step 05

Conditions — if / else

Conditions se aap code ko decisions lena sikhate hain — "agar yeh ho, to yeh karo, warna yeh karo." Real life mein aap bhi yahi karte hain!

if / else if / else
let marks = 75;

if (marks >= 80) {
    console.log("A Grade — Shabaash!");
} else if (marks >= 60) {
    console.log("B Grade — Acha kiya!");
} else if (marks >= 40) {
    console.log("C Grade — Pass ho gaye!");
} else {
    console.log("Fail — Mehnat karo!");
}

// Comparison operators
// ===  bilkul barabar (strict)
// !==  barabar nahi
// >    bada
// <    chhota
// >=   bada ya barabar
// <=   chhota ya barabar

// Logical operators
let umar = 20;
let cnicHai = true;

if (umar >= 18 && cnicHai) {    // && = aur
    console.log("Vote de sakte hain!");
}

Live Demo — Grade Checker

 Quick Quiz!

JS mein "aur" (both conditions true) check karne ke liye kaunsa operator use hoga?

A || (double pipe)
B && (double ampersand)
C == (double equals)
D & (single)
6
Step 06

Loops — Baar Baar Kaam Karein

Loop se aap ek kaam baar baar kara sakte hain bina code repeat kiye. Sochain — 100 students ke naam print karne hain. Manually likhoge ya loop chalao ge?

for / while Loop
// for loop — jab count pata ho
for (let i = 1; i <= 5; i++) {
    console.log(`Round ${i}`);
}
// Output: Round 1, Round 2 ... Round 5

// Array par loop (sabse common)
const cities = ["Karachi", "Lahore", "Islamabad", "Peshawar"];

// Method 1: forEach
cities.forEach((city) => {
    console.log("Shaher:", city);
});

// Method 2: for...of
for (let city of cities) {
    console.log(city);
}

// while loop — jab count pata na ho
let paisa = 100;
while (paisa > 0) {
    console.log("Paisa bacha:", paisa);
    paisa -= 25;  // Har baar 25 kam karo
}
Loops Practice
Output:
▶ Run button dabayein...
7
Step 07

DOM Manipulation — Webpage Control Karein

DOM (Document Object Model) wo tarika hai jisse JS aapke HTML ko padhti aur badal ti hai. Yeh JS ka sabse important concept hai — yahi se real magic hoti hai!

DOM — Elements Select aur Change Karna
// === ELEMENTS DHUNDNA ===

// ID se (sabse tez)
const heading = document.getElementById("myHeading");

// CSS selector se (flexible)
const btn = document.querySelector(".myButton");
const allCards = document.querySelectorAll(".card");

// === CONTENT BADALNA ===
heading.textContent = "Naya Heading!";
heading.innerHTML = "<strong>Bold Heading!</strong>";

// === STYLE BADALNA ===
heading.style.color = "red";
heading.style.fontSize = "2rem";

// === CLASS ADD/REMOVE KARNA ===
heading.classList.add("active");
heading.classList.remove("hidden");
heading.classList.toggle("dark");

// === CLICK EVENT ===
btn.addEventListener("click", function() {
    alert("Button click hua!");
});

🎮 Live Interactive Demos

Demo 1 — Counter (addEventListener)

0

Demo 2 — Background Color Changer

Rang chunein ⬆️

Demo 3 — Personalized Greeting (Input + DOM)

8
Step 08 — Final Project

To-Do App Banayein!

Ab hum sab kuch mila kar ek complete To-Do List App banayenge — HTML, CSS, aur JavaScript sab ek saath. Yeh aapka pehla real JavaScript project hoga!

🎯 Final Project: To-Do List App

Aaj ke project mein ye features honge:

✓ Task Add Karna ✓ Task Delete Karna ✓ Task Complete Mark ✓ Empty Check ✓ Counter ✓ Local Storage

Live To-Do App — Abhi Try Karein!

0 tasks
    Complete To-Do App — Copy & Save karo!
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Meri To-Do List</title>
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:Arial,sans-serif; background:#f8fafc;
               display:flex; justify-content:center;
               align-items:flex-start; min-height:100vh; padding:40px 20px; }
        .app { background:white; border-radius:16px; padding:32px;
               width:100%; max-width:500px; box-shadow:0 8px 32px rgba(0,0,0,.1); }
        h1 { font-size:1.8rem; color:#1c1917; margin-bottom:8px; }
        .subtitle { color:#78716c; font-size:14px; margin-bottom:24px; }
        .input-row { display:flex; gap:10px; margin-bottom:8px; }
        input { flex:1; border:2px solid #e2e8f0; border-radius:10px;
                padding:12px 16px; font-size:15px; outline:none;
                transition:border-color .2s; }
        input:focus { border-color:#f59e0b; }
        button.add { background:linear-gradient(135deg,#f59e0b,#ea580c);
                     border:none; color:white; font-weight:700;
                     padding:12px 20px; border-radius:10px; cursor:pointer; }
        .count { font-size:12px; color:#78716c; margin-bottom:16px; }
        ul { list-style:none; }
        li { display:flex; align-items:center; gap:12px; padding:12px 14px;
             background:#f8fafc; border-radius:10px; margin-bottom:8px;
             border:1px solid #e2e8f0; }
        li.done span.text { text-decoration:line-through; color:#a8a29e; }
        .check { width:22px; height:22px; border-radius:6px;
                 border:2px solid #d6d3d1; cursor:pointer;
                 display:flex; align-items:center; justify-content:center;
                 flex-shrink:0; transition:all .2s; }
        .check.done { background:#16a34a; border-color:#16a34a; color:white; }
        span.text { flex:1; font-size:15px; }
        .del { background:#fef2f2; border:none; color:#dc2626;
               width:28px; height:28px; border-radius:6px; cursor:pointer; }
        .empty { text-align:center; color:#a8a29e; padding:24px; font-size:14px; }
    </style>
</head>
<body>
<div class="app">
    <h1>✅ Meri To-Do List</h1>
    <p class="subtitle">Apne kaam manage karein</p>
    <div class="input-row">
        <input id="inp" placeholder="Naya kaam..."
               onkeydown="if(event.key==='Enter')add()">
        <button class="add" onclick="add()">+ Add</button>
    </div>
    <p class="count" id="cnt">0 tasks</p>
    <ul id="list"></ul>
</div>

<script>
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

function render() {
    const list = document.getElementById('list');
    const cnt = document.getElementById('cnt');
    cnt.textContent = `${tasks.length} task${tasks.length !== 1 ? 's' : ''}`;
    if (tasks.length === 0) {
        list.innerHTML = '<li class="empty">Koi task nahi! Kuch add karein 🎉</li>';
        return;
    }
    list.innerHTML = tasks.map((t, i) => `
        <li class="${t.done ? 'done' : ''}">
          <div class="check ${t.done ? 'done' : ''}" onclick="toggle(${i})">${t.done ? '✓' : ''}</div>
          <span class="text">${t.text}</span>
          <button class="del" onclick="remove(${i})">🗑</button>
        </li>`).join('');
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function add() {
    const inp = document.getElementById('inp');
    if (!inp.value.trim()) return;
    tasks.push({ text: inp.value.trim(), done: false });
    inp.value = '';
    render();
}
function toggle(i) { tasks[i].done = !tasks[i].done; render(); }
function remove(i) { tasks.splice(i, 1); render(); }

render();
</script>
</body></html>

    Mubarak ho! 🎉🎉 Aapne poori Web Dev Series complete kar li! HTML → CSS → Flexbox/Grid → JavaScript — aap ab ek real developer hain. Yeh To-Do App todo.html naam se save karein aur share karein!

    Agle Steps kya hain? JavaScript ke baad seekhein: React.js (modern UI framework), Node.js (backend), aur APIs (real data fetch karna). FreeToolsHub par ye sab tutorials jald aa rahe hain!

    Puri Tutorial Series

    Part 1: HTML & CSS

    Website ki bunyaad

    Part 2: Flexbox & Grid

    Modern layouts