এক্সএইচটিএমএল (XHTML) একটি ওয়েব ডকুমেন্টের কড়া গঠন অনুসরণ করে, তবে এটি সাধারণ HTML এর মতো ইভেন্ট হ্যান্ডলিং এবং ইন্টারঅ্যাকশনের জন্য JavaScript ব্যবহার করতে পারে। ইভেন্ট হ্যান্ডলিং ব্যবহারের মাধ্যমে ব্যবহারকারীর সাথে ওয়েব পেজের ইন্টারঅ্যাকশন ঘটানো সম্ভব হয়। এক্সএইচটিএমএল ডকুমেন্টে JavaScript কোড ব্যবহার করতে হয়, যা ইভেন্টের জন্য নির্দিষ্ট ফাংশন কার্যকর করে।
১. ইভেন্ট হ্যান্ডলিং কি?
ইভেন্ট হ্যান্ডলিং হল এমন একটি প্রক্রিয়া, যেখানে ওয়েব পেজে ব্যবহারকারীর বিভিন্ন ক্রিয়াকলাপ (যেমন ক্লিক, হোভার, কী প্রেস) অনুসরণে কোনো কার্যক্রম সম্পাদিত হয়। এই ক্রিয়াকলাপগুলি "ইভেন্ট" হিসেবে গণ্য হয়, এবং JavaScript ব্যবহার করে এই ইভেন্টগুলোর জন্য হ্যান্ডলার তৈরি করা হয়, যা ঐ ইভেন্টের পরিমাণ অনুযায়ী কিছু কাজ সম্পাদন করে।
উদাহরণস্বরূপ, আপনি একটি বাটনে ক্লিক করলে কিছু তথ্য প্রদর্শন করতে পারেন। এই ধরণের কাজ JavaScript-এর মাধ্যমে করা হয়।
২. এক্সএইচটিএমএল ডকুমেন্টে JavaScript ব্যবহার
এক্সএইচটিএমএল ডকুমেন্টে JavaScript যুক্ত করার জন্য <script> ট্যাগ ব্যবহার করা হয়। JavaScript কোড সাধারণত <head> বা <body> সেকশনের মধ্যে লেখা হয়। এক্সএইচটিএমএল ডকুমেন্টে JavaScript কোড ব্যবহার করার সময় অবশ্যই তা XML-এর গঠনে সঠিকভাবে থাকতে হবে, যেমন:
- কোডের প্রতিটি এলিমেন্ট সঠিকভাবে বন্ধ করতে হবে।
- JavaScript-এর স্টেটমেন্টগুলো সেমিকোলন (;) দিয়ে শেষ করতে হবে।
২.১ JavaScript কোড যোগ করা
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>ইভেন্ট হ্যান্ডলিং উদাহরণ</title>
<script type="text/javascript">
function greetUser() {
alert("স্বাগতম, আপনি আমাদের সাইটে ক্লিক করেছেন!");
}
</script>
</head>
<body>
<button onclick="greetUser()">ক্লিক করুন</button>
</body>
</html>
এখানে:
<script>: এই ট্যাগের মধ্যে JavaScript কোড লেখা হয়।onclick="greetUser()": এটি একটি ইভেন্ট হ্যান্ডলার যা বাটনে ক্লিক করলেgreetUser()ফাংশনটি চালাবে এবং একটি এলার্ট পপ আপ করবে।
৩. ইভেন্ট হ্যান্ডলিং এর সাধারণ ইভেন্ট
এক্সএইচটিএমএল ডকুমেন্টে বিভিন্ন ইভেন্ট হ্যান্ডল করা যায়, যেমন:
৩.১ ক্লিক ইভেন্ট (Click Event)
এটি ব্যবহারকারীর ক্লিক করার প্রতিক্রিয়া দেখায়। এই ইভেন্টের মাধ্যমে আপনি একাধিক কাজ করতে পারেন যেমন ফর্ম সাবমিট করা, কোনো এলিমেন্ট দৃশ্যমান করা, অথবা নতুন ডেটা লোড করা।
<button onclick="alert('এটি একটি ক্লিক ইভেন্ট!');">ক্লিক করুন</button>
৩.২ মাউসওভার ইভেন্ট (Mouseover Event)
এটি তখন কার্যকর হয় যখন মাউস পয়েন্টার একটি এলিমেন্টের ওপর চলে আসে।
<p onmouseover="this.style.color='red'">মাউস এখানে নিয়ে আসুন</p>
এখানে, যখন মাউস প্যারাগ্রাফের উপর আছড়ে পড়বে, তখন তার রং বদলাবে।
৩.৩ মাউসআউট ইভেন্ট (Mouseout Event)
এটি তখন কার্যকর হয় যখন মাউস পয়েন্টার একটি এলিমেন্ট থেকে সরে যায়।
<p onmouseout="this.style.color='black'">মাউস এখান থেকে সরিয়ে নিন</p>
৩.৪ কী প্রেস ইভেন্ট (Keypress Event)
এই ইভেন্টটি তখন কার্যকর হয় যখন একটি কিবোর্ড কী চাপা হয়। সাধারণত এটি ফর্মে বা ইনপুট ফিল্ডে ব্যবহৃত হয়।
<input type="text" onkeypress="alert('আপনি একটি কী চাপলেন!')" />
৩.৫ ফোকাস এবং ব্লার ইভেন্ট (Focus and Blur Events)
focus ইভেন্টটি তখন ঘটে যখন একটি ইনপুট এলিমেন্টের উপর ফোকাস আসে, আর blur ইভেন্টটি তখন ঘটে যখন ফোকাস চলে যায়।
<input type="text" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'" />
এখানে, ইনপুট ফিল্ডের উপর ফোকাস আসলে ব্যাকগ্রাউন্ডের রঙ হলুদ হবে এবং ফোকাস চলে গেলে তা সাদা হয়ে যাবে।
৪. ইভেন্ট হ্যান্ডলারের জন্য অন্যান্য পদ্ধতি
এক্সএইচটিএমএল ডকুমেন্টে ইভেন্ট হ্যান্ডলিংয়ের জন্য JavaScript এর বাইরে আরও কিছু পদ্ধতি ব্যবহার করা যেতে পারে। যেমন, আপনি JavaScript কোডের মাধ্যমে ডাইনামিকভাবে ইভেন্ট হ্যান্ডলার যোগ করতে পারেন:
৪.১ addEventListener() ব্যবহার
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>addEventListener() উদাহরণ</title>
<script type="text/javascript">
function showAlert() {
alert("আপনি বাটনে ক্লিক করেছেন!");
}
window.onload = function() {
var button = document.getElementById("myButton");
button.addEventListener("click", showAlert, false);
}
</script>
</head>
<body>
<button id="myButton">ক্লিক করুন</button>
</body>
</html>
এখানে:
addEventListener(): এটি একটি JavaScript পদ্ধতি, যা ইভেন্ট হ্যান্ডলার যোগ করতে ব্যবহৃত হয়। এটি ইভেন্টের টাইপ (যেমনclick) এবং ইভেন্ট হ্যান্ডলার ফাংশন (যেমনshowAlert) গ্রহণ করে।
৫. এক্সএইচটিএমএল ডকুমেন্টে ইভেন্ট হ্যান্ডলিংয়ের সীমাবদ্ধতা
এক্সএইচটিএমএল ডকুমেন্টে ইভেন্ট হ্যান্ডলিং সাধারণ HTML এর মতোই কাজ করলেও, এখানে কিছু অতিরিক্ত গঠনগত কড়াই রয়েছে যা মেনে চলতে হয়:
- XML-এর কড়া নিয়ম: সব ট্যাগ সঠিকভাবে বন্ধ করতে হবে এবং অ্যাট্রিবিউটের মান কোটেশন চিহ্নের মধ্যে থাকতে হবে।
- JavaScript কোডের জন্য সঠিক গঠন: JavaScript কোড সঠিকভাবে লেখার জন্য সব স্টেটমেন্টের শেষে সেমিকোলন (;) ব্যবহার করতে হবে।
- সার্ভার-সাইড সিকিউরিটি: এক্সএইচটিএমএল ডকুমেন্টের মধ্যে সরাসরি JavaScript কোড ব্যবহারের ফলে ক্রস-সাইট স্ক্রিপটিং (XSS) আক্রমণের ঝুঁকি তৈরি হতে পারে। সুতরাং, ইভেন্ট হ্যান্ডলিংয়ের ক্ষেত্রে সুরক্ষা নিশ্চিত করা জরুরি।
সারাংশ
এক্সএইচটিএমএল ডকুমেন্টে ইভেন্ট হ্যান্ডলিং JavaScript ব্যবহার করে বিভিন্ন ব্যবহারকারী ক্রিয়া (ক্লিক, মাউসওভার, কী প্রেস ইত্যাদি) নিয়ে কাজ করতে পারে। XHTML একটি XML ভিত্তিক ভাষা হওয়ায়, এখানে ইভেন্ট হ্যান্ডলিংয়ের জন্য JavaScript কোড অবশ্যই XML গঠন অনুযায়ী লেখা হয়। JavaScript-এর সাহায্যে onclick, onmouseover, onkeypress ইত্যাদি ইভেন্ট হ্যান্ডল করে ইন্টারঅ্যাকশন তৈরি করা যায়।
Read more
