জাভাস্ক্রিপ্ট এবং এইচটিএমএল

এই প্রবন্ধটি জাভাস্ক্রিপ্ট এবং এইচটিএমএল ব্যাখ্যা করে।

YouTube Video

জাভাস্ক্রিপ্টে window অবজেক্ট

জাভাস্ক্রিপ্টে window অবজেক্টটি একটি ব্রাউজার পরিবেশে একটি গ্লোবাল অবজেক্ট, যা ওয়েব পেজ এবং ব্রাউজার উইন্ডো সম্পর্কিত কার্যাদি এবং তথ্য প্রদান করে। window ব্রাউজারের গ্লোবাল স্কোপ হওয়ায় ব্রাউজারে চলমান সমস্ত জাভাস্ক্রিপ্ট কোড window অবজেক্টের অংশ হয়ে যায়। window অবজেক্ট ব্রাউজার পরিবেশে জাভাস্ক্রিপ্ট চালানোর ক্ষেত্রে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে এবং এটি অনেক এপিআই এবং প্রপার্টি সরবরাহ করে।

window অবজেক্টের মূল বৈশিষ্ট্যগুলি

প্রপার্টিস

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);

• window.document: বর্তমান এইচটিএমএল ডকুমেন্ট অ্যাক্সেস করে।
• window.location: বর্তমান ইউআরএল এবং ব্রাউজার নেভিগেশন পরিচালনা করে।
• window.history: ব্রাউজারের হিস্টোরি তথ্য অ্যাক্সেস করে এবং এগিয়ে বা পিছিয়ে যাওয়ার অনুমতি দেয়।
• window.navigator: ব্রাউজার এবং ডিভাইস সম্পর্কে তথ্য সরবরাহ করে।
• window.innerWidth / window.innerHeight: ভিউপোর্টের প্রস্থ এবং উচ্চতা খুঁজে আনে।

মেথডস

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);

• window.alert(): একটি সতর্কতা ডায়ালগ দেখায়।
• window.confirm(): ব্যবহারকারীর নিশ্চিতকরণের জন্য একটি ডায়ালগ দেখায় এবং একটি OK বা Cancel ফলাফল প্রদান করে।
• window.prompt(): ব্যবহারকারীর ইনপুট নেওয়ার জন্য একটি ডায়ালগ দেখায় এবং প্রবেশ করা মানটি গ্রহণ করে।
• window.open(): একটি নতুন উইন্ডো বা ট্যাব খুলে।
• window.setTimeout() / window.setInterval(): একটি নির্দিষ্ট সময় পরে বা নির্দিষ্ট অন্তরালে একটি ফাংশন চালানোর জন্য একটি টাইমার সেট করে।

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

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};

• window.onload: একটি ইভেন্ট যা পেজ সম্পূর্ণ লোড হওয়ার পরে চালিত হয়।
• window.onresize: একটি ইভেন্ট যা উইন্ডোর আকার পরিবর্তন হলে চালিত হয়।
• window.onscroll: একটি ইভেন্ট যা ব্যবহারকারী পেজ স্ক্রোল করলে ট্রিগার হয়।

গ্লোবাল ভেরিয়েবল হিসেবে ভূমিকা

1var myVar = 10;
2console.log(window.myVar); // 10

• window অবজেক্ট গ্লোবাল ভেরিয়েবল এবং ফাংশন ধারণ করে। অন্য কথায়, ডিক্লেয়ার করা ভেরিয়েবল এবং ফাংশনগুলো স্বয়ংক্রিয়ভাবে window-এর প্রোপার্টি হয়ে যায়।

জাভাস্ক্রিপ্টে DOM নিয়ন্ত্রণ

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

DOM-এর মৌলিক বিষয়গুলো

DOM ওয়েবপৃষ্ঠার HTML-কে অবজেক্ট হিসেবে বিবেচনা করে, যা উপাদান এবং অ্যাট্রিবিউটগুলোতে প্রবেশ এবং তাদের পরিবর্তন করতে দেয়। HTML ডকুমেন্টে প্রবেশ করার জন্য document অবজেক্ট ব্যবহার করুন।

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

DOM উপাদান পুনরুদ্ধার

জাভাস্ক্রিপ্টে DOM-এর উপাদানগুলোতে প্রবেশ করার জন্য বহু পদ্ধতি রয়েছে।

• document.getElementById(): একটি উপাদান id অ্যাট্রিবিউটের মাধ্যমে পান
• document.getElementsByClassName(): ক্লাস নাম (HTMLCollection) দ্বারা উপাদানগুলো পান
• document.getElementsByTagName(): ট্যাগ নামের (HTMLCollection) ভিত্তিতে উপাদানগুলো পান
• document.querySelector(): একটি CSS সিলেক্টরের মাধ্যমে প্রথম মেলানো উপাদানটি পান
• document.querySelectorAll(): একটি CSS সিলেক্টরের মাধ্যমে সমস্ত মেলানো উপাদান (NodeList) পান

উদাহরণ: getElementById এবং querySelector

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

DOM নিয়ন্ত্রণ

পুনরুদ্ধার করা উপাদানগুলোর উপর বিভিন্ন অপারেশন প্রয়োগ করা যেতে পারে।

টেক্সট পরিবর্তন করা

কোনো উপাদানের টেক্সট পরিবর্তন করার জন্য textContent বা innerHTML ব্যবহার করুন।

• textContent: একটি উপাদানের টেক্সট কনটেন্ট পান বা পরিবর্তন করুন। HTML ট্যাগগুলো ব্যাখ্যা করা হয় না।
• innerHTML: উপাদানের HTML কনটেন্ট পান বা পরিবর্তন করুন। HTML ট্যাগসমৃদ্ধ স্ট্রিংগুলোও প্রসেস করা হয়।

1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

বৈশিষ্ট্য পরিবর্তন করা

setAttribute() এবং getAttribute() ব্যবহার করে উপাদানের বৈশিষ্ট্য পরিবর্তন করুন।

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

CSS পরিবর্তন করা

style প্রপার্টি ব্যবহার করে CSS স্টাইল পরিবর্তন করুন।

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

ক্লাস ব্যবস্থাপনা

classList ব্যবহার করে কোনও উপাদানে ক্লাস যোগ করুন বা সরান।

• add(): একটি ক্লাস যোগ করুন
• remove(): একটি ক্লাস সরান
• toggle(): উপস্থিতি অনুযায়ী ক্লাস যোগ করুন বা সরান
• contains(): কোনো ক্লাস বিদ্যমান কিনা তা পরীক্ষা করুন

1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

DOM উপাদান তৈরি এবং মুছে ফেলুন

নতুন উপাদান তৈরি করা

document.createElement() ব্যবহার করে একটি নতুন উপাদান তৈরি করুন এবং এটি DOM এ যোগ করুন।

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

উপাদান মুছে ফেলা

remove() পদ্ধতি ব্যবহার করে একটি উপাদান মুছে ফেলুন।

1newDiv.remove();  // Remove the created element

ইভেন্ট যোগ করা

DOM ব্যবস্থাপনার অংশ হিসাবে, আপনি ইভেন্ট হ্যান্ডলার যোগ করতে পারেন যা ব্যবহারকারীর প্রতিক্রিয়াগুলোর জবাব দেয়। addEventListener() ব্যবহার করে ক্লিক এবং কীবোর্ড ইন্টারঅ্যাকশন এর মতো ইভেন্ট পরিচালনা করুন।

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

এই উদাহরণে, একটি বোতামে ক্লিক করলে #content উপাদানের টেক্সট পরিবর্তন হবে।

DOM ট্রি-তে নেভিগেশন করুন

আপনি প্যারেন্ট এবং সিবলিং উপাদানগুলি অ্যাক্সেস করার জন্য DOM-তে নেভিগেট করতে পারেন।

• parentNode: প্যারেন্ট নোডে অ্যাক্সেস করুন
• childNodes: শিশু নোডে অ্যাক্সেস করুন (সমস্ত প্রকার)
• firstChild / lastChild: প্রথম/শেষ শিশু উপাদান
• nextSibling / previousSibling: পরবর্তী সিবলিং/পূর্ববর্তী সিবলিং উপাদান

1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

উদাহরণ: একটি তালিকায় নতুন আইটেম যোগ করা

এখানে একটি তালিকায় নতুন আইটেম যোগ করার একটি উদাহরণ রয়েছে।

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

এই কোডে, "Add Item" বোতামে ক্লিক করলে তালিকায় একটি নতুন <li> উপাদান যোগ করা হয়।

সারসংক্ষেপ

• জাভাস্ক্রিপ্ট DOM ম্যানিপুলেশনের মাধ্যমে আপনি একটি HTML ডকুমেন্টে উপাদানগুলি পাওয়া, পরিবর্তন করা, তৈরি করা এবং মুছে ফেলার কাজ করতে পারেন।
• আপনি getElementById() এবং querySelector() এর মতো পদ্ধতিগুলি ব্যবহার করে উপাদান পেতে পারেন।
• textContent বা innerHTML ব্যবহার করে পাঠ্য এবং HTML পরিবর্তন করুন, এবং অ্যাট্রিবিউট পরিচালনার জন্য setAttribute() ব্যবহার করুন।
• createElement() ব্যবহার করে নতুন উপাদান তৈরি করুন এবং remove() ব্যবহার করে সেগুলি মুছে ফেলুন।
• আপনি ইভেন্ট হ্যান্ডলিং-এর মাধ্যমে ব্যবহারকারীর ক্রিয়াগুলিতে সাড়া দেওয়া ইন্টারঅ্যাকটিভ ওয়েব পেজ তৈরি করতে পারেন।

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

YouTube Video