MooTools এর বেসিক সিনট্যাক্স এবং ব্যবহার

MooTools একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি, যা ওয়েব ডেভেলপমেন্টে বিভিন্ন কার্যকরী ফিচার সরবরাহ করে। MooTools ব্যবহারে সঠিক সিনট্যাক্স জানা অত্যন্ত গুরুত্বপূর্ণ। এখানে MooTools এর বেসিক সিনট্যাক্স এবং এর ব্যবহার সম্পর্কে আলোচনা করা হলো।

MooTools এর বেসিক সিনট্যাক্স

MooTools ব্যবহারের জন্য প্রথমে MooTools লাইব্রেরি ফাইলটি আপনার HTML ডকুমেন্টে লিঙ্ক করতে হবে। এটি সাধারণত নিচের মতো করা হয়:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>

এখন, আপনি MooTools ফাংশন এবং বৈশিষ্ট্য ব্যবহার করতে পারবেন। নিচে কিছু সাধারণ সিনট্যাক্সের উদাহরণ দেয়া হলো:

১. DOM ম্যানিপুলেশন

MooTools ব্যবহার করে সহজেই HTML এলিমেন্টের উপর কাজ করা যায়। উদাহরণস্বরূপ, একটি HTML এলিমেন্ট নির্বাচন এবং তার স্টাইল পরিবর্তন করা:

<!-- HTML -->
<p id="demo">Hello, MooTools!</p>

<script type="text/javascript">
    var element = document.id('demo');  // id() ফাংশন দিয়ে এলিমেন্ট নির্বাচন
    element.setStyle('color', 'red');   // setStyle() ফাংশন দিয়ে স্টাইল পরিবর্তন
</script>

এখানে document.id() ফাংশনটি একটি এলিমেন্ট নির্বাচন করে এবং setStyle() ফাংশনটি এলিমেন্টের CSS স্টাইল পরিবর্তন করতে ব্যবহৃত হয়।

২. ইভেন্ট হ্যান্ডলিং

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

<!-- HTML -->
<button id="myButton">Click Me</button>

<script type="text/javascript">
    var button = document.id('myButton');
    button.addEvent('click', function() {
        alert('Button Clicked!');
    });
</script>

এখানে addEvent() ফাংশনটি ব্যবহার করে বাটনে ক্লিক ইভেন্ট অ্যাড করা হয়েছে এবং function() এর মাধ্যমে ক্লিক হলে একটি অ্যালার্ট মেসেজ প্রদর্শিত হয়।

৩. অ্যানিমেশন এবং ইফেক্ট

MooTools ইফেক্ট এবং অ্যানিমেশন সরবরাহ করে, যা ওয়েব পেজের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় করে তোলে। উদাহরণস্বরূপ, একটি এলিমেন্টকে ফেড ইন করা:

<!-- HTML -->
<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script type="text/javascript">
    var box = document.id('box');
    box.setStyle('opacity', 0);  // প্রথমে অপাসিটি শূন্য করা
    box.fade('in');  // ফেড ইন ইফেক্ট প্রয়োগ করা
</script>

এখানে fade() ফাংশনটি দিয়ে একটি ফেড ইন ইফেক্ট অ্যাপ্লাই করা হয়েছে।

৪. AJAX

MooTools AJAX ব্যবহার করে ডেটা সার্ভারে পাঠানো এবং গ্রহণ করা সম্ভব। এখানে একটি AJAX রিকোয়েস্টের উদাহরণ দেয়া হলো:

<script type="text/javascript">
    new Request({
        url: 'https://jsonplaceholder.typicode.com/posts',  // API URL
        method: 'get',
        onSuccess: function(responseText) {
            console.log(responseText);  // সার্ভার থেকে প্রাপ্ত ডেটা কনসোলে প্রদর্শন
        }
    }).send();
</script>

এখানে Request() ফাংশনটি AJAX রিকোয়েস্ট তৈরি করার জন্য ব্যবহৃত হয়েছে, এবং onSuccess ফাংশনটি সার্ভার থেকে ডেটা পাওয়ার পর তা কনসোলে প্রদর্শন করে।

৫. প্লাগইন ব্যবহার

MooTools-এর প্লাগইন সিস্টেম ডেভেলপারদের বিভিন্ন অতিরিক্ত ফিচার ব্যবহার করার সুযোগ দেয়। এখানে একটি প্লাগইন ব্যবহার করার উদাহরণ:

<script type="text/javascript">
    // MooTools প্লাগইন ব্যবহার করে একটি এলিমেন্টের উপর রটেট ইফেক্ট প্রয়োগ করা
    var element = document.id('box');
    element.set('tween', { duration: 500 }).tween('rotate', 360);
</script>

এখানে tween() ফাংশনটি ব্যবহার করে এলিমেন্টের উপর রটেট ইফেক্ট দেয়া হয়েছে।

MooTools এর বেসিক ফিচারসমূহ

• DOM ম্যানিপুলেশন: HTML উপাদান নির্বাচন এবং স্টাইল পরিবর্তন।
• ইভেন্ট হ্যান্ডলিং: ইউজার ইন্টারঅ্যাকশন (যেমন ক্লিক) ইভেন্ট পরিচালনা করা।
• ইফেক্টস: ফেড, স্লাইড, মুভ, জুম ইত্যাদি ইফেক্ট প্রয়োগ করা।
• AJAX: সার্ভারের সঙ্গে ডেটা আদান-প্রদান করা।
• টুইনিং এবং অ্যানিমেশন: অ্যানিমেশন এবং অটোমেটেড মুভমেন্ট তৈরি করা।

MooTools এর বেসিক সিনট্যাক্স খুবই সরল এবং ব্যবহারকারী-বান্ধব। এটি ডেভেলপারদের দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য অনেক শক্তিশালী ফিচার প্রদান করে।

MooTools এর বেসিক সিনট্যাক্স পরিচিতি ডেভেলপারদের জন্য খুবই গুরুত্বপূর্ণ, কারণ এটি MooTools লাইব্রেরির বিভিন্ন ফিচার এবং ফাংশন ব্যবহার করতে সহায়তা করে। MooTools এর সিনট্যাক্স এমনভাবে ডিজাইন করা হয়েছে, যাতে এটি জাভাস্ক্রিপ্টের সাধারণ সিনট্যাক্সের সঙ্গে মানানসই হয় এবং কোড লেখাকে সহজ ও দ্রুত করে তোলে।

MooTools সিনট্যাক্স

MooTools-এ কাজ শুরু করার জন্য সাধারণত তিনটি মৌলিক বিষয় থাকে: DOM ম্যানিপুলেশন, ইফেক্টস এবং অ্যানিমেশন, এবং ইভেন্ট হ্যান্ডলিং। এগুলো MooTools এর প্রধান ফিচার, এবং এগুলি সঠিকভাবে ব্যবহার করার জন্য আপনাকে MooTools এর বেসিক সিনট্যাক্স জানতে হবে।

১. DOM ম্যানিপুলেশন

MooTools-এর মাধ্যমে আপনি DOM এলিমেন্টগুলিকে খুব সহজে ম্যানিপুলেট করতে পারেন। উদাহরণস্বরূপ, কোনো HTML এলিমেন্টের ক্লাস অ্যাড বা রিমুভ করা:

// MooTools এ কোনো এলিমেন্টের ক্লাস যোগ করা
$('elementID').addClass('newClass');

// MooTools এ কোনো এলিমেন্ট থেকে ক্লাস মুছে ফেলা
$('elementID').removeClass('oldClass');

এখানে, $ একটি ফাংশন যা MooTools এর মাধ্যমে ডম এলিমেন্ট চিহ্নিত করতে ব্যবহৃত হয়। আপনি যেকোনো এলিমেন্টের আইডি, ক্লাস বা এলিমেন্ট নাম দিয়ে এটি সিলেক্ট করতে পারেন।

২. ইফেক্টস এবং অ্যানিমেশন

MooTools অনেক ধরণের ইফেক্ট এবং অ্যানিমেশন সমর্থন করে। উদাহরণস্বরূপ, একটি এলিমেন্টকে হিডেন বা শো করা:

// MooTools এ একটি এলিমেন্ট ফেড আউট (অদৃশ্য) করা
$('elementID').fade('out');

// MooTools এ একটি এলিমেন্ট ফেড ইন (দৃশ্য) করা
$('elementID').fade('in');

এছাড়া, আপনি ইফেক্টস ব্যবহার করে এলিমেন্টকে স্লাইডও করতে পারেন:

// MooTools এ স্লাইড আউট
$('elementID').slide('out');

// MooTools এ স্লাইড ইন
$('elementID').slide('in');

৩. ইভেন্ট হ্যান্ডলিং

MooTools আপনাকে ইভেন্ট হ্যান্ডলিং খুব সহজে করতে দেয়। যেমন, ক্লিক ইভেন্ট:

// MooTools এ ক্লিক ইভেন্ট সেট করা
$('elementID').addEvent('click', function() {
  alert('Element clicked!');
});

এখানে addEvent ফাংশনটি একটি ইভেন্ট, যেমন ক্লিক ইভেন্ট, যুক্ত করতে ব্যবহৃত হয় এবং সেই ইভেন্টের জন্য একটি কাস্টম ফাংশন দেওয়া হয় যা ইভেন্টটি ট্রিগার হলে চালিত হবে।

৪. AJAX রিকোয়েস্ট

MooTools-এর মাধ্যমে আপনি AJAX রিকোয়েস্ট করতে পারেন, যা পেজ রিলোড ছাড়াই সার্ভার থেকে ডেটা লোড করতে সাহায্য করে। উদাহরণ:

// MooTools এ AJAX রিকোয়েস্ট
new Request({
  url: 'data.json',
  onSuccess: function(response) {
    console.log(response);
  }
}).send();

এখানে, Request ফাংশনটি একটি HTTP রিকোয়েস্ট তৈরি করে এবং onSuccess কলে সার্ভার থেকে রেসপন্স পাওয়া গেলে এটি চালিত হয়।

৫. প্লাগইন ব্যবহার

MooTools একটি প্লাগইন সিস্টেম প্রদান করে, যার মাধ্যমে আপনি সহজে অতিরিক্ত ফিচার যুক্ত করতে পারেন। উদাহরণ:

// MooTools প্লাগইন ব্যবহার
var slider = new Fx.Slider('sliderElement', {
  mode: 'horizontal',
  range: [0, 100]
});

এখানে, Fx.Slider একটি MooTools প্লাগইন যা স্লাইডারের মতো ইফেক্ট তৈরি করে।

MooTools-এর সিনট্যাক্সের সুবিধা

• সহজ এবং সংক্ষিপ্ত: MooTools-এর সিনট্যাক্স সহজ এবং কমপ্যাক্ট, যা কোড লেখার সময় সহায়তা করে।
• ফাংশনাল স্টাইল: MooTools জাভাস্ক্রিপ্ট কোডিংকে ফাংশনাল এবং অাবজেক্ট-ওরিয়েন্টেড স্টাইলে আনে, যা কোড পুনঃব্যবহার এবং মডুলার ডিজাইন সহজ করে তোলে।
• এডভান্সড ফিচার: MooTools জাভাস্ক্রিপ্টের বিভিন্ন জটিল কাজ যেমন, DOM ম্যানিপুলেশন, AJAX রিকোয়েস্ট, ইফেক্টস ইত্যাদি সহজে বাস্তবায়ন করতে সহায়তা করে।

MooTools এর বেসিক সিনট্যাক্স ওয়েব ডেভেলপারদের জন্য খুবই কার্যকরী, কারণ এটি কোড লেখাকে সহজ, দ্রুত এবং কার্যকর করে তোলে।

MooTools ব্যবহার করে DOM (Document Object Model) এলিমেন্ট নির্বাচন এবং হ্যান্ডল করা খুবই সহজ এবং কার্যকর। এটি ডেভেলপারদের জন্য এমন একটি শক্তিশালী টুল সরবরাহ করে, যা ওয়েব পেজের বিভিন্ন উপাদান সহজে ম্যানিপুলেট করতে সাহায্য করে। MooTools-এর মাধ্যমে DOM এলিমেন্টগুলো নির্বাচন এবং তাদের ওপর বিভিন্ন অ্যাকশন বা ইভেন্ট অ্যাটাচ করা যায়, যেমন ক্লাস অ্যাড, স্টাইল পরিবর্তন, ভ্যালু সেট করা ইত্যাদি।

MooTools দিয়ে DOM এলিমেন্ট নির্বাচন

MooTools ব্যবহার করে DOM এলিমেন্ট নির্বাচন করার জন্য $$() ফাংশন ব্যবহৃত হয়, যা jQuery-এর $(selector) এর মতো কাজ করে। এই ফাংশনটি একটি বা একাধিক DOM এলিমেন্ট নির্বাচন করতে ব্যবহৃত হয়।

১. একক এলিমেন্ট নির্বাচন

একটি নির্দিষ্ট ID বা ক্লাসের DOM এলিমেন্ট নির্বাচন করতে নিম্নলিখিত কোড ব্যবহার করা হয়:

// ID দ্বারা এলিমেন্ট নির্বাচন
var element = $('elementId');

// ক্লাস দ্বারা এলিমেন্ট নির্বাচন
var elements = $$

এখানে, $('elementId') একটি নির্দিষ্ট ID সহ এলিমেন্ট নির্বাচন করে, এবং $('div.someClass')</code> সমস্ত <code inline="">div</code> ট্যাগ যার ক্লাস <code inline="">someClass</code>, নির্বাচন করে।</p><h4>২. একাধিক এলিমেন্ট নির্বাচন</h4><p><code inline="">$() ফাংশন দিয়ে একাধিক এলিমেন্ট নির্বাচন করা যায়। উদাহরণস্বরূপ, সমস্ত p ট্যাগ নির্বাচন করা:

var paragraphs = $$('p');

এইভাবে, আপনি একাধিক এলিমেন্টও সহজেই নির্বাচন করতে পারবেন।

MooTools দিয়ে DOM এলিমেন্ট ম্যানিপুলেশন

DOM এলিমেন্ট নির্বাচনের পর, MooTools ব্যবহার করে আপনি বিভিন্ন ম্যানিপুলেশন করতে পারেন, যেমন অ্যাট্রিবিউট পরিবর্তন, ক্লাস পরিবর্তন, স্টাইল অ্যাড বা রিমুভ ইত্যাদি।

১. স্টাইল পরিবর্তন

MooTools ব্যবহার করে এলিমেন্টের স্টাইল পরিবর্তন করতে আপনি .setStyle() ফাংশন ব্যবহার করতে পারেন। উদাহরণ:

// এলিমেন্টের ব্যাকগ্রাউন্ড কালার পরিবর্তন
$('elementId').setStyle('background-color', 'red');

২. ক্লাস পরিবর্তন

DOM এলিমেন্টের ক্লাস পরিবর্তন করতে .addClass() এবং .removeClass() ফাংশন ব্যবহার করা হয়:

// ক্লাস অ্যাড
$('elementId').addClass('newClass');

// ক্লাস রিমুভ
$('elementId').removeClass('oldClass');

৩. অ্যাট্রিবিউট পরিবর্তন

এলিমেন্টের অ্যাট্রিবিউট পরিবর্তন করতে .set() ফাংশন ব্যবহার করা হয়:

// এলিমেন্টের অ্যাট্রিবিউট পরিবর্তন
$('elementId').set('href', 'https://www.example.com');

এটি href অ্যাট্রিবিউট পরিবর্তন করে, কিন্তু MooTools-এর মাধ্যমে অন্যান্য অ্যাট্রিবিউটও পরিবর্তন করা সম্ভব।

MooTools দিয়ে ইভেন্ট হ্যান্ডলিং

MooTools ইভেন্ট হ্যান্ডলিং সিস্টেমও খুবই শক্তিশালী এবং সহজ। এটি ইভেন্ট লিসেনার অ্যাড করার জন্য .addEvent() ফাংশন প্রদান করে, যা এলিমেন্টের উপর একটি ইভেন্ট ট্রিগার করলেই নির্দিষ্ট একটি ফাংশন চালু করে।

১. ক্লিক ইভেন্ট হ্যান্ডলিং

ক্লিক ইভেন্ট হ্যান্ডল করার জন্য MooTools এর .addEvent() ব্যবহার করা হয়:

$('elementId').addEvent('click', function() {
    alert('Element clicked!');
});

এটি যখন নির্দিষ্ট এলিমেন্টে ক্লিক করা হবে, তখন একটি অ্যালার্ট মেসেজ দেখাবে।

২. মাউসওভার ইভেন্ট হ্যান্ডলিং

এছাড়াও মাউসওভার বা অন্য কোন ইভেন্ট হ্যান্ডল করা যায়:

$('elementId').addEvent('mouseover', function() {
    this.setStyle('background-color', 'blue');
});

এই কোডে, যখন মাউস এলিমেন্টের উপর চলে আসে, তখন তার ব্যাকগ্রাউন্ড কালার পরিবর্তিত হবে।

সারাংশ

MooTools ব্যবহার করে DOM এলিমেন্ট নির্বাচন এবং ম্যানিপুলেশন অত্যন্ত সহজ এবং কার্যকরী। এটি ডেভেলপারদের বিভিন্ন DOM এলিমেন্ট নির্বাচন করতে এবং সেগুলোর ওপর স্টাইল, ক্লাস, অ্যাট্রিবিউট পরিবর্তন করতে সহায়তা করে। MooTools-এর ইভেন্ট হ্যান্ডলিং সিস্টেমও খুব শক্তিশালী, যা বিভিন্ন ইভেন্টের মাধ্যমে ইন্টারঅ্যাকটিভ ওয়েব পেজ তৈরি করতে সাহায্য করে।

MooTools লাইব্রেরি DOM (Document Object Model) ম্যানিপুলেশন সহজ এবং দ্রুত করতে সাহায্য করে। এর মাধ্যমে আপনি HTML উপাদানে (Elements) ক্লাস, আইডি (ID) এবং অ্যাট্রিবিউটস যোগ বা পরিবর্তন করতে পারেন। MooTools ব্যবহার করে এই কার্যাবলি খুবই সহজ এবং কমপ্যাক্ট কোডের মাধ্যমে করা যায়।

Elements এ Class যোগ করা

MooTools দিয়ে HTML উপাদানে নতুন ক্লাস (Class) যোগ করা খুব সহজ। এর জন্য addClass() মেথড ব্যবহার করা হয়। উদাহরণস্বরূপ, যদি আপনি একটি HTML উপাদানে নতুন ক্লাস যোগ করতে চান, তাহলে এটি করা যায়:

// একটি উপাদান নির্বাচন করা
var element = document.id('myElement');

// ক্লাস যোগ করা
element.addClass('newClass');

এখানে document.id('myElement') দিয়ে myElement আইডি সম্পন্ন উপাদানটি নির্বাচন করা হচ্ছে এবং addClass('newClass') দিয়ে তার মধ্যে newClass নামক একটি নতুন ক্লাস যোগ করা হচ্ছে।

Elements এ Class রিমুভ করা

কোনও উপাদান থেকে ক্লাস রিমুভ করতে removeClass() মেথড ব্যবহার করা হয়। উদাহরণ:

// একটি উপাদান নির্বাচন করা
var element = document.id('myElement');

// ক্লাস রিমুভ করা
element.removeClass('oldClass');

এখানে removeClass('oldClass') দিয়ে oldClass নামক ক্লাসটি উপাদান থেকে সরিয়ে ফেলা হচ্ছে।

Elements এ ID যোগ বা পরিবর্তন করা

MooTools-এর মাধ্যমে আপনি HTML উপাদানে নতুন ID যোগ বা বিদ্যমান ID পরিবর্তন করতে পারেন। এটি করার জন্য setProperty() মেথড ব্যবহার করা হয়। উদাহরণ:

// একটি উপাদান নির্বাচন করা
var element = document.id('myElement');

// নতুন ID সেট করা
element.setProperty('id', 'newID');

এখানে setProperty('id', 'newID') মেথডটি myElement আইডি সম্পন্ন উপাদানটির আইডি পরিবর্তন করে newID সেট করছে।

Elements এ Attributes যোগ বা পরিবর্তন করা

MooTools ব্যবহার করে একটি উপাদানে নতুন অ্যাট্রিবিউট যোগ বা পরিবর্তন করা খুবই সহজ। setProperty() মেথড দিয়ে আপনি এট্রিবিউট যোগ বা পরিবর্তন করতে পারেন। উদাহরণ:

// একটি উপাদান নির্বাচন করা
var element = document.id('myElement');

// নতুন অ্যাট্রিবিউট যোগ করা
element.setProperty('data-custom', 'value');

এখানে setProperty('data-custom', 'value') মেথডটি myElement উপাদানে data-custom নামক একটি নতুন অ্যাট্রিবিউট যোগ করছে, যার মান হচ্ছে value।

Elements থেকে Attributes রিমুভ করা

আপনি যদি কোনও উপাদান থেকে অ্যাট্রিবিউট সরিয়ে ফেলতে চান, তাহলে removeProperty() মেথড ব্যবহার করতে হবে। উদাহরণ:

// একটি উপাদান নির্বাচন করা
var element = document.id('myElement');

// অ্যাট্রিবিউট রিমুভ করা
element.removeProperty('data-custom');

এখানে removeProperty('data-custom') মেথডটি myElement উপাদান থেকে data-custom অ্যাট্রিবিউটটি সরিয়ে ফেলছে।

সারাংশ

MooTools লাইব্রেরি ব্যবহার করে HTML উপাদানে ক্লাস, আইডি এবং অ্যাট্রিবিউট যোগ বা পরিবর্তন করা খুবই সহজ এবং কার্যকরী। এর মাধ্যমে আপনি খুব দ্রুত এবং সহজভাবে ওয়েব পেজের উপাদানগুলি ম্যানিপুলেট করতে পারেন, যা ওয়েব ডেভেলপমেন্টে সময় এবং প্রচেষ্টা বাঁচায়।

MooTools-এ ইভেন্ট হ্যান্ডলিং একটি গুরুত্বপূর্ণ ফিচার যা ডেভেলপারদের ওয়েব পেজে ইন্টারঅ্যাকটিভ ফিচার তৈরি করতে সহায়তা করে। MooTools ব্যবহার করে আপনি সহজেই বিভিন্ন ধরনের ইভেন্ট যেমন click, mouseover ইত্যাদি হ্যান্ডল করতে পারেন। এই ইভেন্টগুলো ব্যবহার করে আপনি ইউজার ইন্টারঅ্যাকশন পরিচালনা করতে পারেন এবং ওয়েব পেজে ইন্টারঅ্যাকটিভ ফাংশনালিটি যোগ করতে পারেন।

MooTools-এ ইভেন্ট হ্যান্ডলিং

MooTools-এ ইভেন্ট হ্যান্ডলিং অত্যন্ত সহজ এবং কোডিং করতে কম সময় নেয়। আপনি addEvent মেথড ব্যবহার করে যে কোন HTML এলিমেন্টে ইভেন্ট হ্যান্ডল করতে পারেন।

Click ইভেন্ট হ্যান্ডল করা

click ইভেন্ট হ্যান্ডল করতে MooTools-এর addEvent মেথড ব্যবহার করা হয়। উদাহরণস্বরূপ, একটি বাটন ক্লিক করার পর কিছু কাজ করার জন্য নিচে একটি কোড দেওয়া হলো:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>MooTools Click Event Example</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
    <script type="text/javascript">
        window.addEvent('domready', function() {
            // বাটনে ক্লিক ইভেন্ট হ্যান্ডল করা
            $('myButton').addEvent('click', function() {
                alert('বাটনটি ক্লিক করা হয়েছে!');
            });
        });
    </script>
</head>
<body>

    <button id="myButton">ক্লিক করুন</button>

</body>
</html>

এখানে, domready ইভেন্টটি প্রথমে ওয়েব পেজের DOM তৈরি হওয়া নিশ্চিত করে, তারপর myButton নামক বাটনে click ইভেন্ট অ্যাটাচ করা হয়। যখন বাটনটি ক্লিক হবে, তখন একটি পপ-আপ এলার্ট দেখা যাবে।

Mouseover ইভেন্ট হ্যান্ডল করা

mouseover ইভেন্টও অনেকটা click ইভেন্টের মতো হ্যান্ডল করা হয়। এটি ব্যবহার করে আপনি মাউস পয়েন্টার একটি এলিমেন্টের উপর আসলে কিছু কাজ করতে পারেন, যেমন স্টাইল পরিবর্তন বা অন্য কোন ফিচার অ্যাক্টিভেট করা।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>MooTools Mouseover Event Example</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
    <script type="text/javascript">
        window.addEvent('domready', function() {
            // একটি এলিমেন্টে mouseover ইভেন্ট হ্যান্ডল করা
            $('myDiv').addEvent('mouseover', function() {
                this.setStyle('background-color', 'yellow');
            });
            $('myDiv').addEvent('mouseout', function() {
                this.setStyle('background-color', 'white');
            });
        });
    </script>
</head>
<body>

    <div id="myDiv" style="width: 200px; height: 100px; border: 1px solid black;">
        মাউসওভার করুন
    </div>

</body>
</html>

এখানে, mouseover ইভেন্টে যখন মাউস পয়েন্টার myDiv নামক ডিভে আসবে, তখন তার ব্যাকগ্রাউন্ড রঙ হলুদ হবে। আর mouseout ইভেন্টে মাউস ডিভ থেকে চলে গেলে ব্যাকগ্রাউন্ড রঙ আবার সাদা হবে।

MooTools-এ অন্যান্য ইভেন্ট হ্যান্ডলিং

MooTools এ শুধু click বা mouseover নয়, আরো অনেক ধরনের ইভেন্ট হ্যান্ডল করা যায় যেমন:

• keydown: কিবোর্ডের কী চাপা হলে ইভেন্ট হয়।
• keyup: কিবোর্ডের কী ছেড়ে দিলে ইভেন্ট হয়।
• focus: একটি ফর্ম ফিল্ডে ফোকাস হলে ইভেন্ট হয়।
• blur: একটি ফর্ম ফিল্ড থেকে ফোকাস চলে গেলে ইভেন্ট হয়।

সারাংশ

MooTools দিয়ে আপনি সহজে বিভিন্ন ধরনের ইভেন্ট হ্যান্ডল করতে পারেন, যেমন click, mouseover, mouseout, ইত্যাদি। এর মাধ্যমে আপনি ওয়েব পেজে ইন্টারঅ্যাকটিভ ফিচার তৈরি করতে পারেন, যা ইউজার এক্সপেরিয়েন্স (UX) উন্নত করে। MooTools-এর addEvent মেথডের মাধ্যমে ইভেন্ট হ্যান্ডলিং খুবই সহজ এবং কার্যকরী।