JavaScript এর হাতেখড়ি (পর্ব – ১১)

JavaScript Part 11

আগের পর্বে আমরা DOM Manipulation শিখেছি — এলিমেন্টের কন্টেন্ট ও স্টাইল বদলানো। কিন্তু এতদিন আমাদের কোড পেজ লোড হওয়ার সাথে সাথে একবার চলে যেত। আজকে শিখবো Event Handling — ইউজার যখন ক্লিক করে, টাইপ করে, বা ফর্ম সাবমিট করে, তখন কোড চালানো। এটাই আসল ইন্টারঅ্যাক্টিভিটি।

Event কী?

Event হলো ব্রাউজারে ঘটে যাওয়া যেকোনো কিছু — একটা ক্লিক, একটা কী-প্রেস, একটা ফর্ম সাবমিট, মাউস হোভার, পেজ লোড হওয়া। JavaScript এই ঘটনাগুলো "শুনতে" (listen) পারে, এবং সেগুলো ঘটলে নির্দিষ্ট কোড চালাতে পারে।

addEventListener() — Event শোনার পদ্ধতি

একটা এলিমেন্টে event listener যোগ করার বেসিক সিনট্যাক্স:

এলিমেন্ট.addEventListener("event-নাম", function() {
  // event ঘটলে এই কোড চলবে
});

একটা বাস্তব উদাহরণ:

<button id="btn">ক্লিক করো</button>

<script>
  const button = document.getElementById("btn");

  button.addEventListener("click", () => {
    console.log("বাটনে ক্লিক করা হয়েছে!");
  });
</script>

এখানে "click" হলো event-এর নাম, আর তার পরের arrow function-টা হলো callback function — মানে যে কোড event ঘটার সময় "কল ব্যাক" হয়ে চলবে। যতবার বাটনে ক্লিক হবে, ততবার এই function-টা চলবে।

কমন Event-এর তালিকা

Event কখন ঘটে
click এলিমেন্টে ক্লিক করলে
input ইনপুট বক্সে প্রতিটা অক্ষর টাইপ করার সাথে সাথে
submit ফর্ম সাবমিট করলে
mouseover মাউস এলিমেন্টের উপরে গেলে
keydown কীবোর্ডের কোনো কী চাপলে
DOMContentLoaded HTML সম্পূর্ণ লোড হয়ে গেলে

একটা কাউন্টার বানানো — Click Event

DOM Selection, Manipulation, ও Event Handling একসাথে ব্যবহার করে একটা সিম্পল কাউন্টার বানানো যাক:

<p>কাউন্ট: <span id="count">0</span></p>
<button id="increment">+১</button>

<script>
  let count = 0;
  const countDisplay = document.getElementById("count");
  const button = document.getElementById("increment");

  button.addEventListener("click", () => {
    count++;
    countDisplay.textContent = count;
  });
</script>

এখানে প্রতিবার ক্লিক করলে count variable ১ বাড়ে, আর সেই নতুন মানটা textContent দিয়ে পেজে দেখানো হয় — এটাই এতদিনের শেখা সবকিছুর প্রথম সত্যিকারের ইন্টারঅ্যাক্টিভ প্রয়োগ।

Input Event — টাইপ করার সাথে সাথে

<input type="text" id="nameInput" placeholder="তোমার নাম লেখো">
<p>স্বাগতম, <span id="greeting">___</span></p>

<script>
  const input = document.getElementById("nameInput");
  const greeting = document.getElementById("greeting");

  input.addEventListener("input", () => {
    greeting.textContent = input.value;
  });
</script>

input.value দিয়ে input বক্সে ইউজার যা লিখেছে সেটা পাওয়া যায়। "input" event প্রতিটা অক্ষর টাইপ করার সাথে সাথেই ঘটে, তাই greeting-টা রিয়েল-টাইমে আপডেট হবে।

preventDefault() — ডিফল্ট আচরণ থামানো

ফর্ম সাবমিট করলে ব্রাউজার ডিফল্টভাবে পেজ রিলোড করে ফেলে — যেটা আমরা বেশিরভাগ সময় চাই না, কারণ তাহলে আমাদের JavaScript-এর কাজ শেষ হওয়ার আগেই পেজ রিফ্রেশ হয়ে যায়:

<form id="myForm">
  <input type="text" id="username" placeholder="ইউজারনেম">
  <button type="submit">সাবমিট</button>
</form>

<script>
  const form = document.getElementById("myForm");

  form.addEventListener("submit", (event) => {
    event.preventDefault(); // পেজ রিলোড আটকে দিচ্ছে
    console.log("ফর্ম সাবমিট হয়েছে, পেজ রিলোড হয়নি");
  });
</script>

লক্ষ করো — callback function-এ এবার একটা প্যারামিটার (event) নেওয়া হয়েছে। JavaScript প্রতিটা event-এর সময় স্বয়ংক্রিয়ভাবে একটা event object পাঠায়, যেটার ভেতরে সেই event সম্পর্কিত তথ্য ও method (যেমন preventDefault()) থাকে।

টিপস: ফর্ম নিয়ে কাজ করার সময় event.preventDefault() প্রায় সবসময়ই দরকার হয় — এটা ছাড়া ফর্ম সাবমিট করলে পেজ রিলোড হয়ে JavaScript-এর সব কাজ হারিয়ে যায়। পরের পর্বে (Form নিয়ে কাজ করা) এটা আরও ব্যবহার করবো।

একটা সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Event Handling উদাহরণ</title>
</head>
<body>
  <h2>থিম টগল</h2>
  <button id="themeBtn">ডার্ক মোড অন করো</button>

  <h2>কাউন্টার</h2>
  <p>কাউন্ট: <span id="count">0</span></p>
  <button id="increment">+১</button>

  <style>
    .dark {
      background: #1a1a1a;
      color: white;
    }
  </style>

  <script>
    const themeBtn = document.getElementById("themeBtn");
    themeBtn.addEventListener("click", () => {
      document.body.classList.toggle("dark");
    });

    let count = 0;
    const countDisplay = document.getElementById("count");
    const incrementBtn = document.getElementById("increment");

    incrementBtn.addEventListener("click", () => {
      count++;
      countDisplay.textContent = count;
    });
  </script>
</body>
</html>

নিজে চেষ্টা করো

Exercise:

  1. একটা বাটন বানাও, ক্লিক করলে console-এ একটা মেসেজ দেখাও
  2. উপরের কাউন্টার উদাহরণটা নিজে বানাও, সাথে একটা "-১" বাটনও যোগ করো
  3. একটা input বক্স বানাও, টাইপ করার সাথে সাথে নিচে সেই টেক্সট দেখাও (input event দিয়ে)
  4. একটা ফর্ম বানাও, preventDefault() দিয়ে পেজ রিলোড আটকে সাবমিট হওয়া মান console-এ দেখাও

পরের পর্বে যা থাকছে

পর্ব ১২-এ আমরা শিখবো ফর্ম ও ইনপুট নিয়ে আরও বিস্তারিতভাবে কাজ করা — একাধিক ইনপুটের মান একসাথে পড়া, এবং বেসিক validation, উদাহরণসহ।

একটি মন্তব্য পোস্ট করুন

নবীনতর পূর্বতন

যোগাযোগ ফর্ম