Prototype Framework হল একটি JavaScript লাইব্রেরি যা HTML ডকুমেন্টের ইন্টারঅ্যাকটিভিটি উন্নত করতে ব্যবহৃত হয়। এটি AJAX কল, DOM ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং এবং অন্যান্য ফিচার সহজ করে তোলে। Prototype ফ্রেমওয়ার্ক মূলত JavaScript এ DOM অপারেশনকে আরও দ্রুত এবং সহজ করে তোলে।
যদি আপনি Prototype ফ্রেমওয়ার্ক ব্যবহার করতে চান, তবে প্রথমে আপনাকে HTML ফাইলে Prototype লাইব্রেরি যোগ করতে হবে।
Prototype ফ্রেমওয়ার্ক HTML ফাইলে যোগ করার নিয়ম:
1. Prototype JavaScript লাইব্রেরি যোগ করা:
Prototype লাইব্রেরি HTML ফাইলে যোগ করার জন্য, আপনি CDN বা লোকাল ফাইল ব্যবহার করতে পারেন।
Option 1: CDN (Content Delivery Network) থেকে Prototype যোগ করা
Prototype লাইব্রেরি সোজাসুজি CDN থেকে ইনক্লুড করতে পারেন, যা আপনার ওয়েব পেজের জন্য লাইব্রেরি দ্রুত লোড করতে সাহায্য করে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prototype Example</title>
<!-- Add Prototype JS library from CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"></script>
</head>
<body>
<h1>Welcome to Prototype Framework Example</h1>
<button id="myButton">Click me!</button>
<script type="text/javascript">
// Using Prototype to add an event to the button
document.getElementById('myButton').observe('click', function() {
alert('Button Clicked!');
});
</script>
</body>
</html>
Option 2: Prototype ফ্রেমওয়ার্ক লোকাল ফাইল থেকে যোগ করা
আপনি যদি Prototype ফাইলটি আপনার প্রকল্পে লোকালভাবে রাখতে চান, তবে প্রথমে ফাইলটি ডাউনলোড করে সাইটের মধ্যে সংরক্ষণ করতে হবে। তারপর সেই ফাইলটি script ট্যাগের মাধ্যমে অন্তর্ভুক্ত করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prototype Example</title>
<!-- Link to the local Prototype JS file -->
<script type="text/javascript" src="js/prototype.js"></script>
</head>
<body>
<h1>Welcome to Prototype Framework Example</h1>
<button id="myButton">Click me!</button>
<script type="text/javascript">
// Using Prototype to add an event to the button
document.getElementById('myButton').observe('click', function() {
alert('Button Clicked!');
});
</script>
</body>
</html>
এখানে, prototype.js ফাইলটি আপনার প্রকল্পের js ফোল্ডারে সেভ করে তার লিংক HTML ফাইলে দেওয়া হয়েছে।
2. Prototype লাইব্রেরি ব্যবহার করে JavaScript ফাংশন
Prototype লাইব্রেরি DOM ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং, AJAX কল এবং আরো অনেক কাজ সহজ করে তোলে। Prototype ব্যবহার করে আপনি সহজে ইভেন্ট লিস্টেনার অ্যাড করতে, DOM এলিমেন্টকে পরিবর্তন করতে, এবং কলব্যাক ফাংশন তৈরি করতে পারবেন।
Example: Adding Event Listener
Prototype দিয়ে একটি বাটনে ক্লিক ইভেন্ট যোগ করার উদাহরণ:
document.getElementById('myButton').observe('click', function() {
alert('Button Clicked!');
});
এই কোডে, observe মেথডের মাধ্যমে click ইভেন্ট বাটনে যোগ করা হয়েছে। যখন ইউজার বাটনে ক্লিক করবে, তখন একটি এলার্ট মেসেজ প্রদর্শিত হবে।
Example: AJAX Request with Prototype
Prototype লাইব্রেরি দিয়ে AJAX রিকোয়েস্ট তৈরি করা খুবই সহজ:
new Ajax.Request('https://api.example.com/data', {
method: 'get',
onSuccess: function(response) {
console.log(response.responseText);
},
onFailure: function() {
alert('Request failed');
}
});
এখানে Ajax.Request ক্লাস ব্যবহার করে আপনি একটি GET রিকোয়েস্ট পাঠাচ্ছেন, এবং রেসপন্স পাওয়ার পর onSuccess ফাংশনটি কার্যকর হবে।
Prototype Framework একটি শক্তিশালী JavaScript লাইব্রেরি যা DOM ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং, AJAX রিকোয়েস্ট এবং অন্যান্য ওয়েব ডেভেলপমেন্ট কার্যক্রম সহজ করে তোলে। HTML ফাইলে Prototype যোগ করার জন্য CDN বা লোকাল ফাইল উভয় পদ্ধতি ব্যবহার করা যেতে পারে। আপনি যেকোনো পদ্ধতি অনুসরণ করে Prototype লাইব্রেরি আপনার প্রকল্পে অন্তর্ভুক্ত করতে পারেন এবং আপনার ওয়েব ডেভেলপমেন্ট আরও সহজ এবং কার্যকরী করতে পারেন।
Read more
