জাভাস্ক্রিপ্ট এবং এইচটিএমএল
এই প্রবন্ধটি জাভাস্ক্রিপ্ট এবং এইচটিএমএল ব্যাখ্যা করে।
YouTube Video
javascript-html-dom.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 2em;
14 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15 background-color: #f7f9fc;
16 color: #333;
17 line-height: 1.6;
18 }
19
20 .container {
21 max-width: 800px;
22 margin: 0 auto;
23 padding: 1em;
24 background-color: #ffffff;
25 border: 1px solid #ccc;
26 border-radius: 10px;
27 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
28 }
29
30 h1, h2 {
31 font-size: 1.5rem;
32 color: #007bff;
33 margin-top: 0.5em;
34 margin-bottom: 0.5em;
35 border-left: 5px solid #007bff;
36 padding-left: 0.6em;
37 background-color: #e9f2ff;
38 }
39
40 button {
41 display: block;
42 margin: 1em auto;
43 padding: 0.75em 1.5em;
44 font-size: 1rem;
45 background-color: #007bff;
46 color: white;
47 border: none;
48 border-radius: 6px;
49 cursor: pointer;
50 transition: background-color 0.3s ease;
51 }
52
53 button:hover {
54 background-color: #0056b3;
55 }
56
57 #output {
58 margin-top: 1em;
59 background-color: #1e1e1e;
60 color: #0f0;
61 padding: 1em;
62 border-radius: 8px;
63 min-height: 200px;
64 font-family: Consolas, monospace;
65 font-size: 0.95rem;
66 overflow-y: auto;
67 white-space: pre-wrap;
68 }
69
70 .highlight {
71 outline: 3px solid #ffc107; /* yellow border */
72 background-color: #fff8e1; /* soft yellow background */
73 transition: background-color 0.3s ease, outline 0.3s ease;
74 }
75
76 .active {
77 background-color: #28a745; /* green background */
78 color: #fff;
79 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
80 transition: background-color 0.3s ease, box-shadow 0.3s ease;
81 }
82 </style>
83</head>
84<body>
85 <div class="container">
86 <h1>JavaScript Console</h1>
87 <button id="executeBtn">Execute</button>
88 <div id="output"></div>
89 </div>
90
91 <div class="container">
92 <h2>HTML Sample</h2>
93 <div id="content">Hello, World!</div>
94 <button id="changeText">Change Text</button>
95 </div>
96
97 <script>
98 // Override console.log to display messages in the #output element
99 (function () {
100 const originalLog = console.log;
101 console.log = function (...args) {
102 originalLog.apply(console, args);
103 const output = document.getElementById('output');
104 output.textContent += args.map(String).join(' ') + '\n';
105 };
106 })();
107
108 document.getElementById('executeBtn').addEventListener('click', () => {
109 // Prevent multiple loads
110 if (document.getElementById('externalScript')) return;
111
112 const script = document.createElement('script');
113 script.src = 'javascript-html-dom.js';
114 script.id = 'externalScript';
115 //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116 //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117 document.body.appendChild(script);
118 });
119 </script>
120</body>
121</html>জাভাস্ক্রিপ্টে window অবজেক্ট
জাভাস্ক্রিপ্টে window অবজেক্টটি একটি ব্রাউজার পরিবেশে একটি গ্লোবাল অবজেক্ট, যা ওয়েব পেজ এবং ব্রাউজার উইন্ডো সম্পর্কিত কার্যাদি এবং তথ্য প্রদান করে। window ব্রাউজারের গ্লোবাল স্কোপ হওয়ায় ব্রাউজারে চলমান সমস্ত জাভাস্ক্রিপ্ট কোড window অবজেক্টের অংশ হয়ে যায়। window অবজেক্ট ব্রাউজার পরিবেশে জাভাস্ক্রিপ্ট চালানোর ক্ষেত্রে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে এবং এটি অনেক এপিআই এবং প্রপার্টি সরবরাহ করে।
window অবজেক্টের মূল বৈশিষ্ট্যগুলি
প্রপার্টিস
1// Get and display the document's title
2console.log(`Title: ${window.document.title}`);
3
4// Get and display the current URL
5console.log(`URL: ${window.location.href}`);
6
7// Go back to the previous page
8// Note: this will navigate back in history, so be careful when running it
9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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 অবজেক্ট ব্যবহার করুন।
DOM উপাদান পুনরুদ্ধার
জাভাস্ক্রিপ্টে DOM-এর উপাদানগুলোতে প্রবেশ করার জন্য বহু পদ্ধতি রয়েছে।
document.getElementById(): নির্দিষ্টidঅ্যাট্রিবিউট দ্বারা একটি এলিমেন্ট খুঁজে বের করে।document.getElementsByClassName(): ক্লাস নাম দ্বারা এক বা একাধিক এলিমেন্ট খুঁজে বের করে।HTMLCollectionরিটার্ন করে।HTMLCollectionএকটি লাইভ কালেকশন, যা DOM-এ পরিবর্তন ঘটলে তা রিয়েল-টাইমে প্রতিফলিত করে।document.getElementsByTagName(): ট্যাগ নাম দ্বারা এলিমেন্ট খুঁজে বের করে।HTMLCollectionরিটার্ন করে।document.querySelector(): CSS সিলেক্টর ব্যবহার করে প্রথম মিল থাকা এলিমেন্টটি খুঁজে বের করে।document.querySelectorAll(): CSS সিলেক্টর ব্যবহার করে সবগুলো মিল থাকা এলিমেন্ট খুঁজে বের করে।NodeListরিটার্ন করে।NodeListএকটি স্ট্যাটিক কালেকশন, যা ডেটা গ্রহণের সময়কার অবস্থা সংরক্ষণ করে এবং DOM-এ এরপরের যেকোনো পরিবর্তন প্রতিফলিত করে না।
উদাহরণ: getElementById এবং querySelector
1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>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"
3console.log(id);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: চাইল্ড নোডগুলি অ্যাক্সেস করে। আপনি সব ধরনের নোড অ্যাক্সেস করতে পারেন, শুধু HTML ট্যাগের মতো এলিমেন্ট নোড নয়, বরং টেক্সট নোড এবং কমেন্ট নোডও অ্যাক্সেস করতে পারেন।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// Get the container element where the HTML will be inserted
2const content = document.getElementById('content');
3
4// Create the <ul> element with id="list"
5const list = document.createElement('ul');
6list.id = 'list';
7
8// Add initial list items
9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28 const newItem = document.createElement('li');
29 newItem.textContent = 'New Item';
30 list.appendChild(newItem);
31});এই কোডে, "Add Item" বোতামে ক্লিক করলে তালিকায় একটি নতুন <li> উপাদান যোগ করা হয়।
সারসংক্ষেপ
- জাভাস্ক্রিপ্ট DOM ম্যানিপুলেশনের মাধ্যমে আপনি একটি HTML ডকুমেন্টে উপাদানগুলি পাওয়া, পরিবর্তন করা, তৈরি করা এবং মুছে ফেলার কাজ করতে পারেন।
- আপনি
getElementById()এবংquerySelector()এর মতো পদ্ধতিগুলি ব্যবহার করে উপাদান পেতে পারেন। textContentবাinnerHTMLব্যবহার করে পাঠ্য এবং HTML পরিবর্তন করুন, এবং অ্যাট্রিবিউট পরিচালনার জন্যsetAttribute()ব্যবহার করুন।createElement()ব্যবহার করে নতুন উপাদান তৈরি করুন এবংremove()ব্যবহার করে সেগুলি মুছে ফেলুন।- আপনি ইভেন্ট হ্যান্ডলিং-এর মাধ্যমে ব্যবহারকারীর ক্রিয়াগুলিতে সাড়া দেওয়া ইন্টারঅ্যাকটিভ ওয়েব পেজ তৈরি করতে পারেন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।