সম্পূর্ণ বাংলা JavaScript কোর্স

অধ্যায় ০ — JavaScript কী ও কেন

JavaScript দিয়ে ওয়েব পেজে logic, interaction, calculation, form validation এবং dynamic content তৈরি করা হয়।

JavaScript কী?

JavaScript একটি programming language। HTML structure তৈরি করে, CSS design করে, আর JavaScript page-কে কাজ করায়।

কোথায় ব্যবহার হয়?

Button click, menu, calculator, form validation, API data, game, dashboard এবং web app তৈরি করতে।

প্রথম JavaScript

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>প্রথম JavaScript</title>
</head>
<body>

    <h1 id="title">Hello</h1>

    <script>
        document.getElementById("title").textContent = "JavaScript কাজ করছে!";
    </script>

</body>
</html>

ফলাফল: Page load হলে heading-এর লেখা বদলে যাবে।

অধ্যায় ১ — JavaScript যুক্ত করার পদ্ধতি

Inline, Internal ও External JavaScript কোথায় ব্যবহার করবেন।

Inline

HTML attribute-এর ভিতরে JavaScript। শেখার শুরুতে ছোট demo ছাড়া এড়িয়ে চলুন।

Internal

HTML file-এর নিচে <script> tag-এর ভিতরে code।

External

আলাদা script.js file। Professional project-এর জন্য সেরা।

৩টি পদ্ধতি

<!-- Inline -->
<button onclick="alert('Hello')">Click</button>

<!-- Internal -->
<script>
    console.log("Internal JavaScript");
</script>

<!-- External -->
<script src="script.js" defer></script>

/* script.js */
console.log("External JavaScript");

সেরা নিয়ম: External file ব্যবহার করুন এবং defer দিন।

অধ্যায় ২ — Console, Comment ও Debugging শুরু

Console কীভাবে খুলবেন, message দেখবেন এবং error বুঝবেন।

Console methods

// Single-line comment

/*
Multi-line
comment
*/

console.log("Normal message");
console.warn("Warning message");
console.error("Error message");

const user = {
    name: "Rahim",
    age: 20
};

console.table(user);

DevTools খুলুন: Chrome-এ F12 → Console tab।

অধ্যায় ৩ — Variable: let, const ও var

Data সংরক্ষণ, পরিবর্তন এবং naming rules।

Variable basics

const name = "Nayme";
let age = 20;

age = 21;

console.log(name);
console.log(age);

// পুরোনো code ছাড়া var এড়িয়ে চলুন
var oldStyle = "Not recommended";

নিয়ম: Value পরিবর্তন না হলে const, পরিবর্তন হলে let ব্যবহার করুন।

অধ্যায় ৪ — Data Types

String, Number, Boolean, Null, Undefined, Object, Array ও Type checking।

সব গুরুত্বপূর্ণ data type

const name = "Karim";        // String
const age = 25;              // Number
const isStudent = true;      // Boolean
const emptyValue = null;     // Null
let notAssigned;             // Undefined

const user = {               // Object
    name: "Karim",
    age: 25
};

const fruits = ["Mango", "Apple"]; // Array

console.log(typeof name);
console.log(typeof age);
console.log(Array.isArray(fruits));

মনে রাখুন: Array আসলে object type, তাই array check করতে Array.isArray() ব্যবহার করুন।

অধ্যায় ৫ — Operator

Arithmetic, comparison, logical, assignment এবং ternary operator।

ধরন	Operator
Arithmetic	`+ - * / % **`
Comparison	`=== !== > < >= <=`
Logical	`&& \|\| !`
Assignment	`= += -= *= /=`

Operator demo

const a = 10;
const b = 3;

console.log(a + b);
console.log(a % b);
console.log(a ** b);

const isAdult = 20 >= 18;
const message = isAdult ? "Adult" : "Not adult";

console.log(message);

অধ্যায় ৬ — String

Text তৈরি, template literal, useful method এবং conversion।

String operations

const firstName = "Nayme";
const lastName = "Hasan";

const fullName = `${firstName} ${lastName}`;

console.log(fullName.length);
console.log(fullName.toUpperCase());
console.log(fullName.toLowerCase());
console.log(fullName.includes("Nayme"));
console.log(fullName.slice(0, 5));
console.log("  hello  ".trim());

const age = 20;
console.log(`আমার বয়স ${age} বছর`);

Template literal: Backtick ` ব্যবহার করলে variable সহজে string-এর ভিতরে বসানো যায়।

অধ্যায় ৭ — Number ও Math

Number conversion, rounding, random number এবং calculation।

Number methods

const priceText = "250";
const price = Number(priceText);

console.log(price + 50);
console.log(Number.isNaN(price));

console.log(Math.round(4.6));
console.log(Math.floor(4.9));
console.log(Math.ceil(4.1));
console.log(Math.max(5, 20, 8));
console.log(Math.min(5, 20, 8));

const randomNumber = Math.floor(Math.random() * 10) + 1;
console.log(randomNumber);

Random: এই code ১ থেকে ১০ পর্যন্ত random integer তৈরি করে।

অধ্যায় ৮ — Condition: if, else ও switch

Decision নেওয়া এবং ভিন্ন condition অনুযায়ী code চালানো।

Condition demo

const marks = 78;

if (marks >= 80) {
    console.log("A+");
} else if (marks >= 70) {
    console.log("A");
} else if (marks >= 60) {
    console.log("A-");
} else {
    console.log("আরও অনুশীলন করুন");
}

const day = "Friday";

switch (day) {
    case "Friday":
        console.log("ছুটির দিন");
        break;
    case "Saturday":
        console.log("কাজের দিন");
        break;
    default:
        console.log("সাধারণ দিন");
}

অধ্যায় ৯ — Loop

for, while, for...of এবং loop control।

Loop demo

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

let count = 1;

while (count <= 3) {
    console.log(count);
    count++;
}

const fruits = ["Mango", "Apple", "Banana"];

for (const fruit of fruits) {
    console.log(fruit);
}

সতর্কতা: Loop-এর condition যেন একসময় false হয়, নাহলে infinite loop হবে।

অধ্যায় ১০ — Function

Reusable code, parameter, return, arrow function ও default value।

Function basics

function add(a, b) {
    return a + b;
}

const result = add(10, 5);
console.log(result);

function greet(name = "Guest") {
    return `Hello, ${name}`;
}

const multiply = (a, b) => a * b;

console.log(greet("Nayme"));
console.log(multiply(4, 3));

নিয়ম: Function এক কাজ করবে, পরিষ্কার নাম থাকবে এবং প্রয়োজন হলে value return করবে।

অধ্যায় ১১ — Scope ও Hoisting

Global, function, block scope এবং variable কোথা থেকে access করা যায়।

Scope demo

const globalName = "Global";

function testScope() {
    const functionName = "Function";

    if (true) {
        const blockName = "Block";
        console.log(globalName);
        console.log(functionName);
        console.log(blockName);
    }

    // console.log(blockName); // Error
}

testScope();

Best practice: Variable যত ছোট scope-এ রাখা যায় তত ভালো।

অধ্যায় ১২ — Array Zero to Hero

Array তৈরি, add/remove, search, map, filter, find ও reduce।

Array methods

const numbers = [10, 20, 30, 40];

numbers.push(50);
numbers.pop();
numbers.unshift(5);
numbers.shift();

const doubled = numbers.map(number => number * 2);
const filtered = numbers.filter(number => number >= 20);
const found = numbers.find(number => number === 30);
const total = numbers.reduce((sum, number) => sum + number, 0);

console.log(doubled);
console.log(filtered);
console.log(found);
console.log(total);

খুব গুরুত্বপূর্ণ: map, filter, find ও reduce নিয়মিত অনুশীলন করুন।

অধ্যায় ১৩ — Object Zero to Hero

Key-value data, method, nested object, destructuring এবং spread operator।

Object demo

const user = {
    name: "Rahim",
    age: 25,
    address: {
        city: "Dhaka"
    },
    greet() {
        return `Hello ${this.name}`;
    }
};

console.log(user.name);
console.log(user.address.city);
console.log(user.greet());

const { name, age } = user;

const updatedUser = {
    ...user,
    age: 26
};

console.log(name, age);
console.log(updatedUser);

অধ্যায় ১৪ — DOM নির্বাচন ও পরিবর্তন

HTML element select, text, style, class এবং attribute পরিবর্তন।

DOM basics

<h1 id="title">পুরোনো লেখা</h1>
<p class="message">একটি message</p>

<script>
    const title = document.getElementById("title");
    const message = document.querySelector(".message");

    title.textContent = "নতুন লেখা";
    message.classList.add("active");
    message.style.color = "blue";
    message.setAttribute("title", "Hover text");
</script>

পরামর্শ: JavaScript দিয়ে বেশি inline style না লিখে class add/remove করুন।

অধ্যায় ১৫ — Event

Click, input, submit, keydown এবং event object।

Live Button Demo

Button চাপুন

Event listener

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

button.addEventListener("click", function (event) {
    console.log(event.target);
    alert("Button clicked");
});

const input = document.querySelector("#name");

input.addEventListener("input", function (event) {
    console.log(event.target.value);
});

Professional rule: Inline onclick-এর বদলে addEventListener ব্যবহার করুন।

অধ্যায় ১৬ — Form Validation

Input value নেওয়া, empty check, email check এবং error message দেখানো।

Simple validation

<form id="signupForm">
    <input id="email" type="email" placeholder="Email">
    <p id="error"></p>
    <button>Submit</button>
</form>

<script>
const form = document.querySelector("#signupForm");
const email = document.querySelector("#email");
const error = document.querySelector("#error");

form.addEventListener("submit", function (event) {
    event.preventDefault();

    if (email.value.trim() === "") {
        error.textContent = "Email লিখুন";
        return;
    }

    error.textContent = "";
    alert("Form submitted");
});
</script>

অধ্যায় ১৭ — Create, Append ও Remove Element

JavaScript দিয়ে নতুন HTML element তৈরি এবং list update।

Dynamic list

const list = document.querySelector("#todoList");

const item = document.createElement("li");
item.textContent = "JavaScript অনুশীলন";

list.append(item);

// Remove
item.remove();

নিরাপত্তা: User input দেখাতে সাধারণত textContent ব্যবহার করুন, অপ্রয়োজনে innerHTML নয়।

অধ্যায় ১৮ — Date, Timer ও Random

Date object, setTimeout, setInterval এবং clearInterval।

Timer demo

const now = new Date();

console.log(now);
console.log(now.getFullYear());
console.log(now.toLocaleDateString("bn-BD"));

setTimeout(() => {
    console.log("২ সেকেন্ড পরে");
}, 2000);

let count = 0;

const timerId = setInterval(() => {
    count++;
    console.log(count);

    if (count === 5) {
        clearInterval(timerId);
    }
}, 1000);

অধ্যায় ১৯ — JSON ও Local Storage

Data convert, browser-এ save, read এবং delete।

LocalStorage demo

const user = {
    name: "Nayme",
    theme: "dark"
};

const jsonText = JSON.stringify(user);
localStorage.setItem("user", jsonText);

const savedText = localStorage.getItem("user");
const savedUser = JSON.parse(savedText);

console.log(savedUser.name);

localStorage.removeItem("user");

মনে রাখুন: LocalStorage শুধু string save করে, তাই object save করতে JSON conversion লাগে।

অধ্যায় ২০ — Error Handling

try, catch, finally, throw এবং user-friendly error handling।

Error handling

function divide(a, b) {
    if (b === 0) {
        throw new Error("Zero দিয়ে ভাগ করা যাবে না");
    }

    return a / b;
}

try {
    const result = divide(10, 0);
    console.log(result);
} catch (error) {
    console.error(error.message);
} finally {
    console.log("Operation finished");
}

অধ্যায় ২১ — Async JavaScript

Promise, async/await, fetch এবং loading/error state।

Fetch API

async function loadUsers() {
    try {
        const response = await fetch(
            "https://jsonplaceholder.typicode.com/users"
        );

        if (!response.ok) {
            throw new Error("Data load failed");
        }

        const users = await response.json();
        console.log(users);
    } catch (error) {
        console.error(error.message);
    }
}

loadUsers();

Real project: Loading, success এবং error—এই ৩টি state সবসময় handle করুন।

অধ্যায় ২২ — Modern JavaScript

Destructuring, spread, rest, optional chaining, nullish coalescing এবং module।

Modern syntax

const user = {
    name: "Rahim",
    address: {
        city: "Dhaka"
    }
};

const { name } = user;
const city = user.address?.city;
const country = user.country ?? "Bangladesh";

const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];

function total(...values) {
    return values.reduce((sum, value) => sum + value, 0);
}

console.log(name, city, country);
console.log(moreNumbers);
console.log(total(1, 2, 3));

অধ্যায় ২৩ — Class ও OOP Basics

Object blueprint, constructor, method এবং inheritance-এর ভিত্তি।

Class demo

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        return `Hello, ${this.name}`;
    }
}

const user1 = new User("Karim", 25);

console.log(user1.greet());

নোট: Beginner project-এর জন্য object ও function ভালোভাবে শেখাই আগে গুরুত্বপূর্ণ।

অধ্যায় ২৪ — Project Structure ও Best Practices

Clean code, file structure, naming, security এবং maintainable JavaScript।

Project structure

project/
├── index.html
├── css/
│   └── style.css
└── js/
    ├── app.js
    ├── api.js
    └── utils.js

ভালো অভ্যাস

পরিষ্কার নাম, ছোট function, duplicate code কমানো, user input validate করা এবং secret key frontend-এ না রাখা।

Security: Password, database credential বা private API key কখনও browser JavaScript-এর ভিতরে রাখবেন না।

অধ্যায় ২৫ — Mini Projects ও Final Challenge

বাস্তব project দিয়ে JavaScript শেখা সম্পূর্ণ করুন।

Project 1

Counter App

Increase, decrease ও reset button।

Project 2

Calculator

Input, operator, result ও error handling।

Project 3

Todo App

Add, complete, delete এবং LocalStorage।

Project 4

Quiz App

Question, option, score ও next button।

Project 5

Weather UI

API fetch, loading, error ও dynamic content।

Final

Complete Dashboard

Form, filter, search, LocalStorage, chart data এবং responsive UI।

আমি variable, data type ও operator বুঝি। আমি condition, loop ও function লিখতে পারি। আমি array ও object method ব্যবহার করতে পারি। আমি DOM পরিবর্তন ও event handle করতে পারি। আমি form validation ও LocalStorage ব্যবহার করতে পারি। আমি async/await ও fetch দিয়ে API data নিতে পারি। আমি DevTools দিয়ে error খুঁজে ঠিক করতে পারি।

JavaScript সম্পূর্ণ ধরা হবে যখন: আপনি tutorial copy না করে Todo App, Quiz App এবং API-based project নিজে বানাতে পারবেন এবং error বুঝে ঠিক করতে পারবেন।

JavaScript Quick Reference

সবচেয়ে প্রয়োজনীয় syntax-এর দ্রুত তালিকা।

কাজ	Syntax
Variable	`const name = "Rahim";`
Condition	`if (age >= 18) { ... }`
Loop	`for (let i = 0; i < 5; i++)`
Function	`function add(a, b) { return a + b; }`
Array map	`items.map(item => item.name)`
DOM select	`document.querySelector(".class")`
Event	`button.addEventListener("click", fn)`
LocalStorage	`localStorage.setItem("key", "value")`
Async	`const data = await response.json()`

অধ্যায় ০ — JavaScript কী ও কেন

JavaScript কী?

কোথায় ব্যবহার হয়?

অধ্যায় ১ — JavaScript যুক্ত করার পদ্ধতি

Inline

Internal

External

অধ্যায় ২ — Console, Comment ও Debugging শুরু

অধ্যায় ৩ — Variable: let, const ও var

অধ্যায় ৪ — Data Types

অধ্যায় ৫ — Operator

অধ্যায় ৬ — String

অধ্যায় ৭ — Number ও Math

অধ্যায় ৮ — Condition: if, else ও switch

অধ্যায় ৯ — Loop

অধ্যায় ১০ — Function

অধ্যায় ১১ — Scope ও Hoisting

অধ্যায় ১২ — Array Zero to Hero

অধ্যায় ১৩ — Object Zero to Hero

অধ্যায় ১৪ — DOM নির্বাচন ও পরিবর্তন

অধ্যায় ১৫ — Event

Live Button Demo

অধ্যায় ১৬ — Form Validation

অধ্যায় ১৭ — Create, Append ও Remove Element

অধ্যায় ১৮ — Date, Timer ও Random

অধ্যায় ১৯ — JSON ও Local Storage

অধ্যায় ২০ — Error Handling

অধ্যায় ২১ — Async JavaScript

অধ্যায় ২২ — Modern JavaScript

অধ্যায় ২৩ — Class ও OOP Basics

অধ্যায় ২৪ — Project Structure ও Best Practices

Project structure

ভালো অভ্যাস

অধ্যায় ২৫ — Mini Projects ও Final Challenge

Counter App

Calculator

Todo App

Quiz App

Weather UI

Complete Dashboard

JavaScript Quick Reference

Final Quiz