JavaScript-এর মৌলিক বিষয়: ভ্যারিয়েবল, ডেটা টাইপ, অপারেটর, DOM ও Event

JavaScript কী

JavaScript ওয়েব পেজকে ইন্টারঅ্যাকটিভ করে: বাটন চাপলে কিছু ঘটা, ফর্ম যাচাই, পেজ রিলোড ছাড়া কন্টেন্ট বদলানো।

• ১৯৯৫ সালে Netscape-এ Brendan Eich তৈরি করেন। স্ট্যান্ডার্ডের নাম ECMAScript।
• মূলত Client-side ব্রাউজারে চলে; Node.js দিয়ে সার্ভারেও চলে।
• Java আর JavaScript সম্পূর্ণ আলাদা ভাষা; নামের মিল শুধু ইতিহাসের কারণে।
• ফাইল এক্সটেনশন .js।

পেজে যুক্ত করা

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

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

<script> সাধারণত </body>-এর ঠিক আগে রাখা হয়, অথবা <head>-এ defer দিয়ে, যাতে HTML লোড হওয়ার পর স্ক্রিপ্ট চলে।

আউটপুট ও ইনপুট

• console.log(): ব্রাউজারের Console-এ (F12 → Console)।
• alert(): বার্তা বক্স।
• document.write(): পেজে লেখে (এখন কম ব্যবহৃত)।
• element.innerHTML / textContent: এলিমেন্টের ভেতরের লেখা বদলায়।
• prompt() ইনপুট নেয়, confirm() OK/Cancel নেয়।

ভ্যারিয়েবল: var, let, const

const pi = 3.1416;
let count = 0;
count = count + 1;   // ঠিক আছে
// pi = 3;           // TypeError: const-এ নতুন মান দেওয়া যায় না

ডেটা টাইপ

• Primitive: string, number, boolean, undefined, null, bigint, symbol।
• Object: object, array, function।

typeof "Dhaka"    // "string"
typeof 42         // "number"
typeof 3.5        // "number" (int/float আলাদা টাইপ নেই)
typeof true       // "boolean"
typeof undefined  // "undefined"
typeof null       // "object"  (ভাষার পুরনো একটি ত্রুটি)
typeof [1, 2]     // "object"
typeof NaN        // "number"

অপারেটর ও টাইপ মিশ্রণ

• + দুই পাশে একটি string থাকলে জোড়া লাগায়; -, *, / string-কে সংখ্যায় রূপান্তর করে।

"5" + 2      // "52"
5 + 2 + "3"  // "73"   (বাম থেকে: 5+2=7, তারপর "7"+"3")
"5" - 2      // 3
"5" * "2"    // 10
"abc" * 2    // NaN
10 % 3       // 1

• == টাইপ রূপান্তর করে তুলনা করে, === টাইপ ও মান দুটোই মেলায়।

5 == "5"    // true
5 === "5"   // false
0 == false  // true
null == undefined   // true
null === undefined  // false

শর্ত ও লুপ

let marks = 72;
if (marks >= 80) {
  console.log("A+");
} else if (marks >= 60) {
  console.log("A");
} else {
  console.log("চেষ্টা চালিয়ে যান");
}

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

• while আগে শর্ত দেখে; do...while অন্তত একবার চলে, তারপর শর্ত দেখে।
• for...of অ্যারের মান দেয়, for...in দেয় key/index।

ফাংশন ও অ্যারে

function area(w, h) {
  return w * h;
}
const square = x => x * x;   // arrow function

const nums = [10, 20, 30];
nums.push(40);      // শেষে যোগ: [10, 20, 30, 40]
nums.pop();         // শেষেরটা বাদ
nums.unshift(5);    // শুরুতে যোগ
nums.shift();       // শুরুরটা বাদ
nums.length;        // 3
nums.indexOf(20);   // 1 (index 0 থেকে শুরু)
nums.join("-");     // "10-20-30"

DOM ও Event

DOM (Document Object Model): ব্রাউজার HTML পেজকে অবজেক্টের গাছ হিসেবে রাখে, JavaScript তা পড়ে ও বদলায়।

<p id="result">0</p>
<button id="btn">বাড়াও</button>

<script>
  let n = 0;
  const result = document.getElementById("result");
  document.getElementById("btn").addEventListener("click", function () {
    n++;
    result.textContent = n;
  });
</script>

অন্যান্য: document.querySelector(".note") প্রথম মিল পাওয়া এলিমেন্ট দেয়। প্রচলিত event: click, change, submit, load, mouseover, keyup।

উদাহরণ: ফর্ম যাচাই

document.querySelector("form").addEventListener("submit", function (e) {
  const phone = document.getElementById("phone").value;
  if (phone.length !== 11) {
    e.preventDefault();   // ফর্ম যাওয়া আটকায়
    alert("মোবাইল নম্বর ১১ সংখ্যার হতে হবে");
  }
});

Client-side যাচাই ব্যবহারকারীর সুবিধার জন্য; নিরাপত্তার জন্য সার্ভারেও আবার যাচাই করতে হয়।

পরীক্ষায় যা আসে

• JavaScript client-side scripting ভাষা; Java-র সাথে সম্পর্ক নেই।
• Block scope: let ও const; মান বদলানো যায় না const-এ।
• "5" + 2 → "52", "5" - 2 → 3।
• === টাইপসহ তুলনা করে।
• id দিয়ে এলিমেন্ট ধরা: document.getElementById()।
• কমেন্ট: এক লাইনে //, একাধিক লাইনে /* */।

পরীক্ষার ফাঁদ

• typeof null হলো "object", "null" নয়।
• typeof NaN হলো "number"।
• অ্যারের প্রথম index 0; length সবসময় শেষ index-এর চেয়ে ১ বেশি।
• 0.1 + 0.2 === 0.3 হলো false, কারণ দশমিক সংখ্যা বাইনারিতে হুবহু রাখা যায় না।