Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

জাভাস্ক্রিপ্ট class


জাভাস্ক্রিপ্ট একটি শক্তিশালী স্ক্রিপ্টিং ভাষা যা ওয়েব ডেভেলপমেন্টে ব্যাপকভাবে ব্যবহৃত হয়। এতে অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং (OOP) এর সুবিধা রয়েছে যা আমাদের কোডকে আরও সংগঠিত এবং পুনঃব্যবহারযোগ্য করতে সাহায্য করে। এই টিউটোরিয়ালে আমরা জাভাস্ক্রিপ্ট ক্লাস এবং OOP সম্পর্কে বিস্তারিত আলোচনা করব এবং HTML এর সাথে কিভাবে এটি ব্যবহৃত হয় তা দেখব।


অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং (OOP) এর মূল ধারণা

অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং এমন একটি প্রোগ্রামিং প্যারাডাইম যা ডেটা এবং ফাংশনকে একটি একক ইউনিটে আবদ্ধ করে। OOP এর মূল ধারণাগুলি হলো:


জাভাস্ক্রিপ্ট ক্লাসের মৌলিক ধারণা

জাভাস্ক্রিপ্ট ES6 (ECMAScript 2015) এ ক্লাসের কনসেপ্ট যোগ করা হয়েছে। এটি OOP এর ধারণাগুলোকে আরও সহজে ব্যবহার করতে সাহায্য করে। নিচে কিছু মৌলিক ধারণা দেওয়া হলো।

ক্লাস ডিক্লেয়ারেশন

জাভাস্ক্রিপ্টে একটি ক্লাস তৈরি করতে class কীওয়ার্ড ব্যবহার করা হয়। নিচে এর উদাওরন দেকুন।

উদাহরণ


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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

কোড এডিটর


এখানে Person ক্লাসটি একটি constructor মেথডসহ তৈরি হয়েছে যা ক্লাসের অবজেক্ট তৈরি করার সময় কল করা হয়। greet মেথডটি একটি সাধারণ মেথড যা অবজেক্টের ডেটা ব্যবহার করে একটি বার্তা প্রিন্ট করে।

অবজেক্ট তৈরি করা

ক্লাস থেকে অবজেক্ট তৈরি করতে new কিওয়ার্ড ব্যবহার করা হয়। নিচে এর উদাওরন দেকুন।

উদাহরণ


const person1 = new Person('Alice', 30);
person1.greet();  // Output: Hello, my name is Alice and I am 30 years old.

কোড এডিটর


ইনহেরিট্যান্স

জাভাস্ক্রিপ্ট ক্লাসে ইনহেরিট্যান্স সহজে করা যায়। নিচে এর উদাওরন দেকুন।

উদাহরণ


class Student extends Person {
  constructor(name, age, studentId) {
    super(name, age);
    this.studentId = studentId;
  }

  study() {
    console.log(`${this.name} is studying.`);
  }
}

const student1 = new Student('Bob', 22, 'S12345');
student1.greet();  // Output: Hello, my name is Bob and I am 22 years old.
student1.study();  // Output: Bob is studying.

কোড এডিটর


এখানে Student ক্লাসটি Person ক্লাস থেকে ইনহেরিট করেছে এবং নতুন studentId প্রোপার্টি এবং study মেথড যোগ করেছে।


HTML এবং জাভাস্ক্রিপ্ট ক্লাসের ইন্টিগ্রেশন

জাভাস্ক্রিপ্ট ক্লাসকে HTML এর সাথে ব্যবহার করা খুবই সহজ। আমরা একটি HTML পেজ তৈরি করব এবং তাতে জাভাস্ক্রিপ্ট ক্লাস ব্যবহার করব।

HTML পেজ তৈরি করা

উদাহরণ


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Class Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>JavaScript Class Example</h1>
    <button id="greetButton">Greet</button>
    <p id="message"></p>
  </div>

  <script src="script.js"></script>
</body>
</html>

কোড এডিটর


এখানে একটি সাধারণ HTML পেজ তৈরি করা হয়েছে যেখানে একটি বাটন এবং একটি প্যারাগ্রাফ রয়েছে। আমরা বাটনে ক্লিক করলে greet মেসেজ দেখাব।

জাভাস্ক্রিপ্ট ক্লাস যুক্ত করা

উদাহরণ


// script.js
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

const person1 = new Person('Alice', 30);

document.getElementById('greetButton').addEventListener('click', () => {
  document.getElementById('message').textContent = person1.greet();
});

কোড এডিটর


এখানে Person ক্লাসের একটি ইনস্ট্যান্স তৈরি করা হয়েছে এবং বাটনে ক্লিক করলে greet মেসেজটি প্যারাগ্রাফে প্রদর্শিত হবে।


উদাহরণ: সহজ ক্লাস এবং অবজেক্ট তৈরি

নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি সহজ ক্লাস তৈরি করা হয়েছে এবং সেটি ব্যবহার করে অবজেক্ট তৈরি করা হয়েছে।

উদাহরণ


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Class Example</title>
</head>
<body>
  <h1>Simple Class Example</h1>
  <button id="showDetailsButton">Show Details</button>
  <p id="details"></p>

  <script src="example.js"></script>
</body>
</html>

কোড এডিটর


নিচের কোড গুলো দেকুন। এখানে Car ক্লাসটি তৈরি করা হয়েছে যা getDetails মেথড ব্যবহার করে কারের বিস্তারিত তথ্য প্রদান করে। বাটনে ক্লিক করলে সেই তথ্য প্রদর্শিত হবে।

উদাহরণ


// example.js
class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  getDetails() {
    return `Car: ${this.make} ${this.model} (${this.year})`;
  }
}

const myCar = new Car('Toyota', 'Corolla', 2021);

document.getElementById('showDetailsButton').addEventListener('click', () => {
  document.getElementById('details').textContent = myCar.getDetails();
});

কোড এডিটর



উদাহরণ: ডম ম্যানিপুলেশন

ডম (Document Object Model) ম্যানিপুলেশন একটি গুরুত্বপূর্ণ বিষয়। জাভাস্ক্রিপ্ট ক্লাস ব্যবহার করে কিভাবে ডম ম্যানিপুলেশন করা যায় তা দেখব।

HTML

উদাহরণ


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Manipulation with Class</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>DOM Manipulation with Class</h1>
  

কোড এডিটর


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

উদাহরণ


// dom-example.js
class Highlighter {
  constructor(elementId) {
    this.element = document.getElementById(elementId);
  }

  highlight() {
    this.element.classList.add('highlight');
  }
}

const highlighter = new Highlighter('text');

document.getElementById('highlightButton').addEventListener('click', () => {
  highlighter.highlight();
});


কোড এডিটর


এখানে Highlighter ক্লাসটি ডম ম্যানিপুলেশন করে এবং একটি প্যারাগ্রাফে highlight ক্লাস যোগ করে যা CSS এর মাধ্যমে স্টাইল পরিবর্তন করে।


উদাহরণ: ইভেন্ট হ্যান্ডলার

ইভেন্ট হ্যান্ডলিং জাভাস্ক্রিপ্ট ক্লাসের সাহায্যে আরো সহজ করা যায়।

HTML

উদাহরণ


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Handling with Class</title>
</head>
<body>
  <h1>Event Handling with Class</h1>
  <button id="clickMeButton">Click Me<</button>
  <p id="output"></p>

  <script src="event-example.js"></script>
</body>
</html>

কোড এডিটর



উদাহরণ: সহজ ক্লাস এবং অবজেক্ট তৈরি

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

উদাহরণ


// event-example.js
class ClickHandler {
  constructor(buttonId, outputId) {
    this.button = document.getElementById(buttonId);
    this.output = document.getElementById(outputId);
  }

  initialize() {
    this.button.addEventListener('click', () => {
      this.output.textContent = 'Button was clicked!';
    });
  }
}

const handler = new ClickHandler('clickMeButton', 'output');
handler.initialize();

কোড এডিটর



উপসংহার

জাভাস্ক্রিপ্ট ক্লাস এবং অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং ওয়েব ডেভেলপমেন্টে শক্তিশালী এবং কার্যকরী টুল। HTML এর সাথে ক্লাস ব্যবহার করে আমরা সহজে ডম ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং এবং অন্যান্য কাজ করতে পারি। এই টিউটোরিয়ালে আমরা বিভিন্ন উদাহরণের মাধ্যমে জাভাস্ক্রিপ্ট ক্লাসের মৌলিক ধারণা এবং HTML এর সাথে এর ইন্টিগ্রেশন সম্পর্কে আলোচনা করেছি। আশা করি এটি আপনার জাভাস্ক্রিপ্ট এবং OOP শেখার যাত্রাকে আরও সহজ এবং কার্যকর করবে।