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