MooTools ব্যবহার করে প্রথম প্রজেক্ট তৈরি করা একটি সহজ এবং কার্যকরী উপায় হতে পারে, যদি আপনি জাভাস্ক্রিপ্টের কিছু মৌলিক ধারণা জানেন। MooTools লাইব্রেরি আপনার ওয়েব পেজের DOM (Document Object Model) ম্যানিপুলেশন, ইফেক্টস এবং AJAX কার্যকারিতা সহজে পরিচালনা করতে সাহায্য করে। এখানে আমরা একটি মৌলিক MooTools প্রজেক্ট তৈরি করার প্রক্রিয়া দেখবো।
MooTools ব্যবহার করে প্রথম প্রজেক্ট তৈরি
১. MooTools লাইব্রেরি যুক্ত করা
প্রথমে আপনাকে MooTools লাইব্রেরিটি আপনার HTML পেজে অন্তর্ভুক্ত করতে হবে। MooTools লাইব্রেরি সাধারণত একটি সিডিএন (CDN) বা লোকাল ফাইলের মাধ্যমে যুক্ত করা যায়। এখানে একটি উদাহরণ দেয়া হলো:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MooTools প্রজেক্ট</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
</head>
<body>
<!-- HTML কন্টেন্ট -->
<button id="myButton">ক্লিক করুন</button>
<div id="myDiv" style="width:200px; height:200px; background-color:blue; color:white; text-align:center; line-height:200px;">
স্বাগতম
</div>
<script type="text/javascript">
// MooTools কোড
window.addEvent('domready', function() {
// বাটন ক্লিক ইভেন্ট
$('myButton').addEvent('click', function() {
// ডিভ টির ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা
$('myDiv').setStyle('background-color', 'red');
// কিছু সময় পর ডিভ টির ব্যাকগ্রাউন্ড রঙ ফিরিয়ে আনা
$('myDiv').fade(1000);
});
});
</script>
</body>
</html>
এখানে, <script> ট্যাগের মাধ্যমে MooTools লাইব্রেরি যুক্ত করা হয়েছে। লাইব্রেরিটি MooTools-এর সিডিএন লিঙ্ক থেকে লোড হচ্ছে, যা আপনার প্রজেক্টের কোডে MooTools এর সমস্ত ফিচার ব্যবহার করতে সাহায্য করবে।
২. HTML উপাদান তৈরি করা
এটি একটি সাধারণ HTML পেজ যেখানে একটি বাটন এবং একটি ডিভ (div) এলিমেন্ট রয়েছে। বাটনটি ক্লিক করলে ডিভটির ব্যাকগ্রাউন্ড রঙ পরিবর্তিত হবে।
<button id="myButton">ক্লিক করুন</button>
<div id="myDiv" style="width:200px; height:200px; background-color:blue; color:white; text-align:center; line-height:200px;">
স্বাগতম
</div>
<button id="myButton">: এটি একটি বাটন, যার মাধ্যমে আমরা ইভেন্টটি ট্রিগার করব।<div id="myDiv">: এটি একটি ডিভ এলিমেন্ট, যা প্রথমে নীল রঙে থাকবে। এই ডিভটি আমরা MooTools ব্যবহার করে পরিবর্তন করব।
৩. MooTools কোড লিখা
এখন MooTools এর ফিচার ব্যবহার করে কোড লেখা হবে। এখানে আমরা বাটনে ক্লিক করার মাধ্যমে ডিভ এলিমেন্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করব।
window.addEvent('domready', function() {
$('myButton').addEvent('click', function() {
// ডিভটির ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা
$('myDiv').setStyle('background-color', 'red');
// 1 সেকেন্ড পর ডিভটি ধীরে ধীরে আবার মূল রঙে ফিরে আসবে
$('myDiv').fade(1000);
});
});
window.addEvent('domready', function() {...}): এই কোডটি নিশ্চিত করে যে, পেজের DOM সম্পূর্ণভাবে লোড হওয়ার পর কোডটি রান হবে।$('myButton').addEvent('click', function() {...}): এই কোডটি বাটনটিতে ক্লিক ইভেন্ট যুক্ত করে, অর্থাৎ বাটনে ক্লিক করলে একটি কার্যক্রম শুরু হবে।$('myDiv').setStyle('background-color', 'red'): এটি ডিভটির ব্যাকগ্রাউন্ড রঙ লাল (red) করে দেয়।$('myDiv').fade(1000): এটি MooTools-এর ফেড ইফেক্ট, যার মাধ্যমে ডিভটি ধীরে ধীরে অদৃশ্য হয়ে যাবে এবং পরে আস্তে আস্তে দৃশ্যমান হবে।
সারাংশ
এই প্রজেক্টে আমরা MooTools ব্যবহার করে একটি সহজ ওয়েব ইন্টারঅ্যাকশন তৈরি করেছি। একটি বাটনে ক্লিক করলে ডিভটির ব্যাকগ্রাউন্ড রঙ পরিবর্তিত হয় এবং তারপর ধীরে ধীরে তা আবার আগের অবস্থায় ফিরে আসে। MooTools লাইব্রেরি ব্যবহার করে এমন ইন্টারঅ্যাকটিভ এবং ডাইনামিক ওয়েব পেজ তৈরি করা অনেক সহজ এবং কার্যকরী হয়।
Read more
