Custom Data Attributes এবং DOM Elements এর মাধ্যমে ডেটা এক্সচেঞ্জ

Element Storage এবং ডেটা ম্যানিপুলেশন - মুটুলস (Mootools) - Web Development

172

MooTools-এ Custom Data Attributes এবং DOM Elements ব্যবহার করে ডেটা এক্সচেঞ্জ করা একটি শক্তিশালী উপায়, যা আপনাকে HTML এলিমেন্টের সাথে সংযুক্ত অতিরিক্ত ডেটা সংরক্ষণ করতে এবং সেই ডেটা এক্সেস করতে সাহায্য করে। এটি সাধারণত data- অ্যাট্রিবিউট ব্যবহার করে করা হয়, যা HTML5-এ পরিচিত এবং JavaScript বা MooTools দিয়ে সেই ডেটা ম্যানিপুলেট করা সম্ভব।

Custom Data Attributes কী?

Custom Data Attributes হল HTML এলিমেন্টে ব্যবহার করা অতিরিক্ত অ্যাট্রিবিউট যা data- দিয়ে শুরু হয়, যেমন data-id, data-name, data-price ইত্যাদি। এই অ্যাট্রিবিউটগুলি কোনো নির্দিষ্ট মান ধারণ করতে পারে এবং JavaScript বা MooTools এর মাধ্যমে সহজেই এক্সেস এবং ম্যানিপুলেট করা যায়।

Custom Data Attributes উদাহরণ

<div id="product1" data-id="101" data-name="Laptop" data-price="50000">
    প্রোডাক্ট: ল্যাপটপ
</div>

এখানে, data-id, data-name, এবং data-price হল কাস্টম ডেটা অ্যাট্রিবিউট, যা এই div এলিমেন্টের সঙ্গে অতিরিক্ত তথ্য সংরক্ষণ করে।

MooTools ব্যবহার করে Custom Data Attributes এক্সেস করা

MooTools এর মাধ্যমে আপনি get() এবং set() মেথড ব্যবহার করে কাস্টম ডেটা অ্যাট্রিবিউটগুলি সহজে এক্সেস এবং পরিবর্তন করতে পারেন। get() ব্যবহার করে আপনি কোন একটি data-* অ্যাট্রিবিউটের মান নিতে পারেন এবং set() ব্যবহার করে আপনি তা পরিবর্তন করতে পারেন।

১. Data Attribute পড়া

window.addEvent('domready', function() {
    var element = document.id('product1');
    
    // Custom data attribute পড়া
    var productId = element.get('data-id');
    var productName = element.get('data-name');
    var productPrice = element.get('data-price');
    
    console.log('Product ID: ' + productId);
    console.log('Product Name: ' + productName);
    console.log('Product Price: ' + productPrice);
});

এখানে:

element.get('data-id') দ্বারা data-id অ্যাট্রিবিউটের মান এক্সেস করা হয়েছে।
একইভাবে, data-name এবং data-price এর মানও এক্সেস করা হয়েছে।

২. Data Attribute পরিবর্তন

window.addEvent('domready', function() {
    var element = document.id('product1');
    
    // Custom data attribute পরিবর্তন করা
    element.set('data-price', '55000');
    console.log('Updated Price: ' + element.get('data-price'));
});

এখানে:

element.set('data-price', '55000') দিয়ে data-price অ্যাট্রিবিউটের মান পরিবর্তন করা হয়েছে।
এরপর get('data-price') দিয়ে আপডেট করা মানটি এক্সেস করা হয়েছে।

DOM Elements দিয়ে ডেটা এক্সচেঞ্জ

MooTools ব্যবহার করে আপনি DOM উপাদানগুলির মধ্যে ডেটা এক্সচেঞ্জ করতে পারেন। যেমন একটি ফর্মের ইনপুট ফিল্ডে ডেটা গ্রহণ করা, অথবা একটি div এলিমেন্টের ভিতর ডেটা রেখে সেই ডেটা অন্য একটি এলিমেন্টে প্রদর্শন করা।

১. ইনপুট ফিল্ড থেকে ডেটা নেওয়া

window.addEvent('domready', function() {
    var inputElement = document.id('userInput');
    
    // ইনপুট ফিল্ড থেকে ডেটা নেওয়া
    var userInput = inputElement.get('value');
    console.log('User Input: ' + userInput);
});

এখানে, inputElement.get('value') ব্যবহার করে ইনপুট ফিল্ড থেকে ইউজারের ইনপুট ডেটা এক্সেস করা হয়েছে।

২. ডেটা একটি DOM এলিমেন্টে সেট করা

window.addEvent('domready', function() {
    var outputElement = document.id('output');
    
    // একটি DOM এলিমেন্টে ডেটা সেট করা
    var userData = 'নতুন ডেটা';
    outputElement.set('html', userData);  // ডেটাকে HTML এর মাধ্যমে সেট করা
});

এখানে, outputElement.set('html', userData) দিয়ে একটি div বা অন্য কোন এলিমেন্টের মধ্যে ডেটা প্রদর্শন করা হয়েছে।