টাইপস্ক্রিপ্টে DOM ম্যানিপুলেশন/ইভেন্ট হ্যান্ডলিংয়ের জন্য ব্যবহৃত ক্লাসগুলি

এই প্রবন্ধে, আমরা টাইপস্ক্রিপ্টে DOM ম্যানিপুলেশন/ইভেন্ট হ্যান্ডলিংয়ের জন্য ব্যবহৃত ক্লাসগুলির ব্যাখ্যা করব।

আপনি কোডের উদাহরণের মাধ্যমে Document ক্লাস, Element এবং NodeList ক্লাস এবং বিভিন্ন ইভেন্ট-সম্পর্কিত ক্লাস সম্পর্কে শিখতে পারবেন।

YouTube Video

টাইপস্ক্রিপ্টে DOM ম্যানিপুলেশন/ইভেন্ট হ্যান্ডলিংয়ের জন্য ব্যবহৃত ক্লাসগুলি

টাইপস্ক্রিপ্টে DOM ম্যানিপুলেশন এবং ইভেন্ট হ্যান্ডলিংয়ের জন্য প্রধানত Document Object Model (DOM) ইন্টারফেসগুলি ব্যবহৃত হয়। DOM ম্যানিপুলেশন এবং ইভেন্ট হ্যান্ডলিংয়ে সাধারণ জাভাস্ক্রিপ্ট ক্লাস এবং ইন্টারফেস ব্যবহার করা হয়, তবে টাইপস্ক্রিপ্টে এগুলিতে টাইপ তথ্য যোগ করা হয়, যা আরও সুরক্ষিত অপারেশন সক্ষম করে।

নিম্নে DOM ম্যানিপুলেশন এবং ইভেন্ট হ্যান্ডলিংয়ে সাধারণত ব্যবহৃত ক্লাস এবং ইন্টারফেসগুলি বর্ণনা করা হয়েছে।

DOM ম্যানিপুলেশনে ব্যবহৃত প্রধান ক্লাস/ইন্টারফেসগুলি

Document

Document হল HTML বা XML ডকুমেন্টগুলিকে উপস্থাপনকারী একটি অবজেক্ট। DOM ট্রিতে অ্যাক্সেস করতে বা উপাদানগুলি সন্ধান করতে ব্যবহৃত হয়।

কোড উদাহরণ

 1// Get the element using getElementById
 2const element = document.getElementById('myElement') as HTMLDivElement | null;
 3if (element) {
 4    element.textContent = 'Hello, TypeScript!';
 5}
 6
 7// querySelector can specify a generic type for more precise typing
 8const button = document.querySelector<HTMLButtonElement>('#myButton');
 9button?.addEventListener('click', () => {
10    console.log('Button clicked!');
11
12    // Create a new element dynamically
13    const newDiv = document.createElement('div');
14    newDiv.textContent = 'New element created!';
15    document.body.appendChild(newDiv);
16});

প্রধান পদ্ধতিসমূহ

• getElementById নির্দিষ্ট id বৈশিষ্ট্য সহ একটি উপাদান পুনরুদ্ধার করে।
• querySelector একটি CSS সিলেক্টর ব্যবহার করে একটি উপাদান পুনরুদ্ধার করে।
• createElement একটি নতুন HTML উপাদান তৈরি করে।

কোড ব্যাখ্যা

• getElementById ব্যবহার করে এই কোডটি একটি id অ্যাট্রিবিউটসহ এলিমেন্ট নিয়ে আসে এবং তার টেক্সট পরিবর্তন করে। এটি querySelector ব্যবহার করে একটি বাটন এলিমেন্টও নিয়ে আসে এবং তাতে একটি ক্লিক ইভেন্ট লিসেনার যোগ করে। ক্লিক করলে এটি createElement ব্যবহার করে একটি নতুন div এলিমেন্ট তৈরি করে এবং সেটিকে মূল কনটেন্টে যোগ করে। DOM অপারেশনের সময় টাইপ সুরক্ষার জন্য জেনেরিকস এবং টাইপ অ্যাসারশন ব্যবহার করা হয়েছে।

Element

Element হল একটি ইন্টারফেস যা DOM-এ পৃথক HTML উপাদানগুলিকে উপস্থাপন করে। এটি DOM ম্যানিপুলেশনের সময় সবচেয়ে সাধারণভাবে ব্যবহৃত হয়।

কোড উদাহরণ

 1// Use querySelector to manipulate element properties
 2const divElement = document.querySelector<HTMLDivElement>('.myClass');
 3if (divElement) {
 4    // Set innerHTML
 5    divElement.innerHTML = '<strong>Hello with innerHTML!</strong>';
 6
 7    // Set textContent
 8    divElement.textContent = 'Hello with textContent!';
 9
10    // Add a new class
11    divElement.classList.add('newClass');
12
13    // Set a custom attribute
14    divElement.setAttribute('data-role', 'content');
15}

প্রধান বৈশিষ্ট্য এবং মেথডগুলি

• innerHTML প্রপার্টি আপনাকে কোনো উপাদানের HTML বিষয়বস্তু নির্ধারণ বা পাওয়ার সুযোগ দেয়।
• textContent প্রপার্টি আপনাকে কোনো উপাদানের টেক্সট বিষয়বস্তু নির্ধারণ বা পাওয়ার সুযোগ দেয়।
• classList একটি প্রপার্টি যা ক্লাসসমূহ পরিচালনা করতে ব্যবহৃত হয়, এটি আপনাকে ক্লাস যোগ, অপসারণ এবং টগল করতে দেয়।
• setAttribute মেথড একটি উপাদানে কোনো অ্যাট্রিবিউট নির্ধারণ করে।

কোড ব্যাখ্যা

• এই কোডটি querySelector-এর মাধ্যমে প্রাপ্ত এলিমেন্টগুলোর জন্য innerHTML ও textContent ব্যবহার করে কনটেন্ট সেট করার, classList দিয়ে ক্লাস যোগ করার, এবং setAttribute-এর সাহায্যে কাস্টম অ্যাট্রিবিউট সেট করার উদাহরণ দেখায়। জেনেরিকস ব্যবহার করে অপারেশনগুলো টাইপ-নিরাপদভাবে সম্পন্ন করা হয়েছে।

NodeList এবং HTMLCollection

NodeList এবং HTMLCollection হল এমন সংকলন যা একাধিক DOM উপাদান ধারণ করে। যেমন, querySelectorAll একটি NodeList ফেরত দেয়, এবং getElementsByClassName একটি HTMLCollection ফেরত দেয়।

কোড উদাহরণ

 1// NodeList supports forEach iteration
 2const divs: NodeListOf<HTMLDivElement> = document.querySelectorAll('div');
 3divs.forEach(div => {
 4    div.textContent = 'Updated!';
 5});
 6
 7// HTMLCollection is not directly iterable, convert it to an array
 8const spans: HTMLCollectionOf<HTMLSpanElement> =
 9    document.getElementsByClassName('span-item') as HTMLCollectionOf<HTMLSpanElement>;
10Array.from(spans).forEach(span => {
11    span.textContent = 'Changed!';
12});

• এই কোডটি forEach দিয়ে সরাসরি NodeList পরিচালনা এবং HTMLCollection কে পুনরাবৃত্তির জন্য অ্যারে-তে রূপান্তর করার একটি উদাহরণ।

ইভেন্ট হ্যান্ডলিংয়ে ব্যবহৃত প্রধান ক্লাস/ইন্টারফেসগুলি

Event

Event হল DOM-এ সংঘটিত হওয়া সমস্ত ইভেন্টের জন্য বেস ক্লাস। ক্লিক, ইনপুট এবং পেজ লোডের মতো বিভিন্ন ইভেন্ট Event ক্লাসকে প্রসারিত করে।

কোড উদাহরণ

 1const form = document.querySelector<HTMLFormElement>('#myForm');
 2form?.addEventListener('submit', (event: Event) => {
 3    // target refers to the element that triggered the event (the form)
 4    const target = event.target as HTMLFormElement;
 5
 6    // type shows the kind of event, e.g., "submit"
 7    console.log(`Event type: ${event.type}`);
 8
 9    // preventDefault disables the default form submission
10    event.preventDefault();
11    console.log('Form submission prevented.');
12});

প্রধান বৈশিষ্ট্য এবং মেথডগুলি

• target প্রপার্টি বোঝায় যে উপাদানটিতে (EventTarget) ইভেন্টটি ঘটেছে।
• type বোঝায় কোন ধরণের ইভেন্ট ঘটেছে, যেমন click বা input।
• preventDefault মেথড ইভেন্টের ডিফল্ট ক্রিয়া বাতিল করে।

কোড ব্যাখ্যা

• এই কোডটি দেখায় কিভাবে একটি ফর্মে submit ইভেন্ট লিসেনার যোগ করতে হয়। target হলো সেই ফর্ম এলিমেন্ট যেখানে ইভেন্টটি ঘটেছে, এবং type হলো ইভেন্টের ধরন (এই ক্ষেত্রে, "submit")। preventDefault মেথড কল করে আপনি ফর্ম সাবমিশনের ডিফল্ট আচরণ যেমন পেজ নেভিগেশন বা রিলোড বন্ধ করতে পারেন। এর পরিবর্তে এখানে কাস্টম প্রসেস—লগিং আউটপুট—সম্পাদিত হয়।

MouseEvent

MouseEvent মাউস অপারেশন সম্পর্কিত ইভেন্টগুলো উপস্থাপন করে। click এবং mousemove এর মতো মাউস ইভেন্টগুলোতে এই ক্লাস ব্যবহার করা হয়।

কোড উদাহরণ

1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}

• এই কোডটি মাউসের স্থানাঙ্ক লগ করতে MouseEvent ব্যবহারের একটি উদাহরণ।

মুখ্য বৈশিষ্ট্যসমূহ

• clientX হলো পৃষ্ঠার মধ্যে মাউস পয়েন্টারের X স্থানাঙ্ক।
• clientY হলো পৃষ্ঠার মধ্যে মাউস পয়েন্টারের Y স্থানাঙ্ক।
• button নির্দেশ করে কোন মাউস বোতাম চাপা হয়েছে। 0 হলো বাঁদিকের বোতাম, 1 মাঝের বোতাম, আর 2 ডানদিকের বোতাম।

KeyboardEvent

KeyboardEvent কীবোর্ড কার্যক্রম সম্পর্কিত ইভেন্টগুলো উপস্থাপন করে। keydown এবং keyup ইভেন্টগুলি এই শ্রেণীতে অন্তর্ভুক্ত।

কোড উদাহরণ

 1document.addEventListener('keydown', (event: KeyboardEvent) => {
 2    // Show the key name (e.g., "Enter", "a")
 3    console.log(`Key pressed: ${event.key}`);
 4
 5    // Show the physical key code (e.g., "Enter", "KeyA")
 6    console.log(`Key code: ${event.code}`);
 7
 8    // Check if Alt/Ctrl/Shift key was pressed
 9    console.log(`Alt pressed: ${event.altKey}`);
10    console.log(`Ctrl pressed: ${event.ctrlKey}`);
11    console.log(`Shift pressed: ${event.shiftKey}`);
12
13    if (event.key === 'Enter') {
14        console.log('Enter was pressed');
15    }
16});

মুখ্য বৈশিষ্ট্যসমূহ

• key হলো চাপা চাবির নাম, যেমন Enter বা a।
• code হলো কীবোর্ডের কোনো চাবি-সংক্রান্ত কোড।
• altKey, ctrlKey, এবং shiftKey হলো এমন বৈশিষ্ট্য, যা নির্দেশ করে Alt, Ctrl, বা Shift চাবি চাপা হয়েছে কিনা।

কোড ব্যাখ্যা

• এই কোডটি KeyboardEvent ব্যবহার করে চাপা কী-এর নাম (key), সংশ্লিষ্ট কী কোড (code), এবং মোডিফায়ার কী (altKey, ctrlKey, shiftKey) চাপা হয়েছে কিনা তা লগ করে। এছড়াও, Enter কী চাপা হলে এটি বিশেষ একটি কাজ সম্পাদন করে।

FocusEvent

FocusEvent ফোকাস অর্জন বা হারানোর ইভেন্টগুলির সাথে সম্পর্কিত। focus এবং blur ইভেন্টগুলি এই শ্রেণীতে অন্তর্ভুক্ত।

কোড উদাহরণ

 1const inputElement = document.getElementById('myInput');
 2if (inputElement) {
 3    inputElement.addEventListener('focus', (event: FocusEvent) => {
 4        console.log('Input focused');
 5    });
 6
 7    inputElement.addEventListener('blur', (event: FocusEvent) => {
 8        console.log('Input lost focus');
 9    });
10}

• এই কোডটি কোনো ইনপুট ফিল্ডে ফোকাস এলে বা হারালে তা নির্ণয় ও লগ করতে FocusEvent ব্যবহারের একটি উদাহরণ।

টাইপস্ক্রিপ্টে টাইপ করা

টাইপস্ক্রিপ্ট ব্যবহার করার সময়, DOM পরিচালনা ও ইভেন্ট পরিচালনার টাইপ চেক উন্নত হয়। নীচে টাইপস্ক্রিপ্টে টাইপ-নিরাপদ DOM পরিচালনা ও ইভেন্ট পরিচালনার উদাহরণ দেওয়া হয়েছে।

টাইপ-কৃত ইভেন্ট শ্রোতারা

ইভেন্ট শ্রোতা যোগ করার সময়, ইভেন্টের ধরন নির্দিষ্ট করলে টাইপ চেকিং করে এবং ভুল সম্পত্তিগুলিতে প্রবেশ প্রতিরোধ করে।

1const input = document.querySelector<HTMLInputElement>('#myInput');
2// Event listener with explicit type annotation for safety
3input?.addEventListener('input', (event: Event) => {
4    // event.target is EventTarget, so it needs to be cast to the correct type
5    const target = event.target as HTMLInputElement;
6    console.log(`Current value: ${target.value}`);
7});

• এই কোডটি টাইপ করা ইভেন্ট লিসেনার ব্যবহার করে ইনপুট ইভেন্ট পরিচালনা এবং ইনপুট ফিল্ডের বর্তমান মান নিরাপদভাবে সংগ্রহ ও লগ করার একটি উদাহরণ।

সাধারণ ইভেন্ট পরিচালনা

টাইপস্ক্রিপ্টে জেনেরিক্স ব্যবহার করে, আপনি বিভিন্ন ধরনের ইভেন্টকে সমর্থনকারী সাধারণ ইভেন্ট পরিচালনা করতে পারেন।

 1// Generic event handler function
 2function handleEvent<T extends Event>(event: T) {
 3    console.log(`Event type: ${event.type}`);
 4    if (event.target instanceof HTMLElement) {
 5        console.log(`Target element: ${event.target.tagName}`);
 6    }
 7}
 8
 9const input = document.querySelector<HTMLInputElement>('#myInput');
10input?.addEventListener('input', handleEvent);

• এই কোডটি ইভেন্ট টাইপ এবং লক্ষ্য উপাদানের ট্যাগ নাম লগ করতে জেনেরিক ব্যবহার করে একটি সাধারণ ইভেন্ট হ্যান্ডলারের উদাহরণ।

সারসংক্ষেপ

টাইপস্ক্রিপ্টে, DOM পরিচালনা ও ইভেন্ট পরিচালনার সময় স্ট্যান্ডার্ড DOM API-তে টাইপ প্রয়োগ করা হয়, যা কোডের নিরাপত্তা ও পাঠযোগ্যতা বৃদ্ধি করে। Document এবং Element এর মতো ক্লাস এবং Event, MouseEvent এবং KeyboardEvent এর মতো ইভেন্ট সম্পর্কিত ক্লাস ব্যবহার করে টাইপ-নিরাপদ উন্নয়ন সম্ভব। অতিরিক্তভাবে, querySelector<T>() বা HTMLCollectionOf<T> ব্যবহার করলে টাইপ-নিরাপদ DOM পরিচালনা করা যায়।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video