WebX

জাভাস্ক্রিপ্ট চিটশিট

জাভাস্ক্রিপ্ট (JS) একটি প্রোগ্রামিং ভাষা যা ওয়েব পেজকে ইন্টারেক্টিভ করে। এই চিটশিটে জাভাস্ক্রিপ্টের সব গুরুত্বপূর্ণ ধারণা অন্তর্ভুক্ত করা হয়েছে।

১. জাভাস্ক্রিপ্ট কীভাবে যোগ করবেন

HTML-এ JS তিনভাবে যোগ করা যায়:

  1. ইনলাইন: <script> ট্যাগে।
  2. ইন্টারনাল: HTML-এর মধ্যে।
  3. এক্সটারনাল: .js ফাইলে।

উদাহরণ:

ইনলাইন

<script>
    console.log("হ্যালো, জাভাস্ক্রিপ্ট!");
</script>

এক্সটারনাল

<script src="script.js"></script>
// script.js
console.log("এটি এক্সটারনাল JS");

২. মৌলিক ধারণা

২.১ ভেরিয়েবল

কীওয়ার্ডবর্ণনাউদাহরণ
varপুরানো স্টাইল, ফাংশন স্কোপ।var x = 10;
letব্লক স্কোপ, পরিবর্তনযোগ্য।let y = 20;
constব্লক স্কোপ, অপরিবর্তনীয় (মান নয়, রেফারেন্স)const z = 30;

উদাহরণ:

let name = "আনিস";
const age = 25;
console.log(name, age); // আনিস 25

২.২ ডেটা টাইপ

টাইপবর্ণনাউদাহরণ
Numberসংখ্যা।let num = 42;
Stringটেক্সট।let str = "হ্যালো";
Booleanসত্য/মিথ্যা।let bool = true;
Objectকী-ভ্যালু জোড়া।let obj = {name: "করিম"};
Arrayতালিকা।let arr = [1, 2, 3];
Nullশূন্য মান।let n = null;
Undefinedসংজ্ঞায়িত নয়।let u;
Symbolঅনন্য মান।let sym = Symbol("id");

উদাহরণ:

let x = 10; // Number
let y = "টেক্সট"; // String
let z = [1, "দুই", 3]; // Array

২.৩ অপারেটর

ধরনউদাহরণ
গাণিতিক+, -, *, /, %, ** (ঘাত)
তুলনা==, ===, !=, !==, >, <, >=
লজিক্যাল&& (এবং), `
অ্যাসাইনমেন্ট=, +=, -=, *=, /=

উদাহরণ:

let a = 5 + 3; // 8
let b = a === 8; // true
let c = (a > 0 && b); // true

৩. কন্ট্রোল স্ট্রাকচার

৩.১ শর্ত (Conditionals)

ধরনবর্ণনাউদাহরণ
ifশর্ত সত্য হলে কোড চলে।if (x > 0) { console.log("ধনাত্মক"); }
else ifএকাধিক শর্ত।else if (x < 0) { console.log("ঋণাত্মক"); }
elseশর্ত মিথ্যা হলে।else { console.log("শূন্য"); }
switchএকাধিক কেস।switch (day) { case 1: ... }

উদাহরণ:

let num = 10;
if (num > 0) {
    console.log("ধনাত্মক");
} else {
    console.log("ঋণাত্মক বা শূন্য");
}

৩.২ লুপ (Loops)

ধরনবর্ণনাউদাহরণ
forনির্দিষ্ট সংখ্যকবার চলে।for (let i = 0; i < 5; i++) { ... }
whileশর্ত সত্য হলে চলে।while (x > 0) { x--; }
do...whileকমপক্ষে একবার চলে।do { x++; } while (x < 5);
for...ofঅ্যারে বা ইটারেবলের জন্য।for (let val of arr) { ... }
for...inঅবজেক্টের প্রোপার্টির জন্য।for (let key in obj) { ... }

উদাহরণ:

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

৪. ফাংশন

ধরনবর্ণনাউদাহরণ
Declarationনামসহ ফাংশন।function add(a, b) { return a + b; }
Expressionভেরিয়েবলে ফাংশন।const add = function(a, b) { return a + b; };
Arrowসংক্ষিপ্ত সিনট্যাক্স।const add = (a, b) => a + b;

উদাহরণ:

function greet(name) {
    return `হ্যালো, ${name}!`;
}
console.log(greet("আনিস")); // হ্যালো, আনিস!

৫. অবজেক্ট এবং অ্যারে

৫.১ অবজেক্ট

let person = {
    name: "করিম",
    age: 30,
    greet: function() {
        return `হ্যালো, আমি ${this.name}`;
    }
};
console.log(person.name); // করিম
console.log(person.greet()); // হ্যালো, আমি করিম

৫.২ অ্যারে

মেথডবর্ণনাউদাহরণ
pushশেষে যোগ।arr.push(4);
popশেষ থেকে সরানো।arr.pop();
shiftপ্রথম থেকে সরানো।arr.shift();
unshiftপ্রথমে যোগ।arr.unshift(0);
mapপ্রতিটি আইটেমে ফাংশন।arr.map(x => x * 2);
filterশর্ত মেনে আইটেম।arr.filter(x => x > 2);
reduceএকটি মানে রূপান্তর।arr.reduce((a, b) => a + b);

উদাহরণ:

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

৬. ইভেন্ট হ্যান্ডলিং

ধরনবর্ণনাউদাহরণ
onclickক্লিক ইভেন্ট।button.onclick = () => alert("ক্লিক!");
addEventListenerইভেন্ট লিসেনার।button.addEventListener("click", fn);

উদাহরণ:

<button id="btn">ক্লিক করুন</button>
<script>
    document.getElementById("btn").addEventListener("click", () => {
        alert("হ্যালো!");
    });
</script>

৭. DOM ম্যানিপুলেশন

মেথডবর্ণনাউদাহরণ
getElementByIdআইডি দিয়ে এলিমেন্ট।document.getElementById("id");
querySelectorCSS সিলেক্টর।document.querySelector(".class");
innerHTMLHTML কনটেন্ট।element.innerHTML = "<p>নতুন</p>";
styleস্টাইল পরিবর্তন।element.style.color = "red";

উদাহরণ:

document.querySelector("p").innerHTML = "নতুন টেক্সট";

৮. উন্নত ধারণা

৮.১ ক্লোজার (Closure)

function outer() {
    let count = 0;
    return function inner() {
        count++;
        return count;
    };
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

৮.২ প্রমিস (Promise)

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("সফল!"), 1000);
});
myPromise.then(result => console.log(result)); // সফল!

৮.৩ অ্যাসিঙ্ক/অ্যাওয়েট (Async/Await)

async function fetchData() {
    let response = await fetch("https://api.example.com");
    let data = await response.json();
    console.log(data);
}
fetchData();

৮.৪ ক্লাস (Class)

class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        return `হ্যালো, ${this.name}`;
    }
}
const p = new Person("আনিস");
console.log(p.greet()); // হ্যালো, আনিস

৮.৫ মডিউল

// math.js
export function add(a, b) {
    return a + b;
}
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

৯. এরর হ্যান্ডলিং

try {
    let x = undefinedVar;
} catch (error) {
    console.log("এরর:", error.message);
} finally {
    console.log("শেষ");
}

১০. উদাহরণ: একটি সম্পূর্ণ প্রোগ্রাম

<div id="output"></div>
<button id="btn">ক্লিক</button>
<script>
    const output = document.getElementById("output");
    const btn = document.getElementById("btn");
 
    let count = 0;
    btn.addEventListener("click", () => {
        count++;
        output.innerHTML = `ক্লিক সংখ্যা: ${count}`;
    });
</script>