জাভাস্ক্রিপ্টে কাস্টম অ্যাট্রিবিউট

HTML এ আপনার নিজস্ব, কাস্টম অ্যাট্রিবিউট ট্যাগে যোগ করা অনুমোদিত। এই ধরনের অ্যাট্রিবিউট শুরু হতে হবে data- দিয়ে, এবং তার পরে যেকোনো অ্যাট্রিবিউট নাম থাকতে পারে যা আপনার জন্য সুবিধাজনক।

কাস্টম অ্যাট্রিবিউট অনেক বিভিন্ন উপায়ে ব্যবহার করা যেতে পারে। এই পদ্ধতিগুলির অনেকগুলি আমরা পরে শিক্ষানবিসে অধ্যয়ন করব, এবং আরও অনেক কিছু আপনি ভবিষ্যতে নিজে থেকেই উদ্ভাবন করতে সক্ষম হবেন।

এই ধরনের অ্যাট্রিবিউটে অ্যাক্সেস করা স্ট্যান্ডার্ড উপায়ে সাজানো হয় না। একই নামের এলিমেন্ট প্রপার্টিতে অ্যাক্সেস করা যায় না যেমন আমরা আগে করতাম, বরং একটি বিশেষ প্রপার্টি ব্যবহার করা উচিত dataset, যার পরে একটি ডট দিয়ে অ্যাট্রিবিউটের নাম লেখা হয় data- ছাড়া। উদাহরণস্বরূপ, যদি আমাদের অ্যাট্রিবিউটের নাম হয় data-test, তাহলে এটিতে অ্যাক্সেস করার জন্য আমরা লিখব elem.dataset.test, যেখানে elem - আমাদের এলিমেন্ট সহ ভেরিয়েবল।

আসুন একটি উদাহরণ দেখি। আমাদের কাছে নিম্নলিখিত这样一个 এলিমেন্ট দেওয়া আছে:

<div id="elem" data-num="1000"></div>

আসুন এর data-num অ্যাট্রিবিউটের মান স্ক্রীনে প্রদর্শন করি:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // 1000 প্রদর্শন করবে

এবং এখন এই অ্যাট্রিবিউটে অন্য একটি মান নির্ধারণ করি:

let elem = document.querySelector('#elem');
elem.dataset.num = 123;

নিম্নলিখিত কোড দেওয়া আছে:

<div id="elem" data-text="str">text</div>

এটি করুন যাতে ডিভে ক্লিক করলে এর টেক্সটের শেষে এর data-text অ্যাট্রিবিউটের বিষয়বস্তু যোগ হয়।

ডিভগুলি দেওয়া আছে, যাতে data-num অ্যাট্রিবিউটে রয়েছে তাদের ক্রমিক নম্বর:

<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>

এটি করুন যাতে যেকোনো ডিভে ক্লিক করলে এর শেষে এর ক্রমিক নম্বর লেখা হয়।

একটি বাটন দেওয়া আছে। এটি করুন যাতে এই বাটনটি এর উপর ক্লিকের সংখ্যা গণনা করে, সেগুলি কোনো কাস্টম অ্যাট্রিবিউটে লিখে রাখে। অন্য একটি বাটনে ক্লিক করলে স্ক্রীনে প্রদর্শিত হোক, প্রথম বাটনে কতগুলি ক্লিক করা হয়েছে।

একটি ইনপুট দেওয়া আছে:

<input id="elem" data-length="5">

এই ইনপুটটিতে data-length অ্যাট্রিবিউটে রয়েছে অক্ষরের সংখ্যা যা ইনপুটে প্রবেশ করাতে হবে। এটি করুন যাতে ফোকাস হারানোর সময়, যদি প্রবেশ করানো অক্ষরের সংখ্যা নির্ধারিত সংখ্যার সাথে না মেলে, তাহলে এ সম্পর্কে একটি বার্তা প্রদর্শিত হয়।

একটি ইনপুট দেওয়া আছে:

<input id="elem" data-min="5" data-max="10">

এই ইনপুটটিতে data-min এবং data-max অ্যাট্রিবিউটগুলিতে একটি সীমা রয়েছে। এটি করুন যাতে ফোকাস হারানোর সময়, যদি প্রবেশ করানো অক্ষরের সংখ্যা এই সীমার মধ্যে না পড়ে, তাহলে এ সম্পর্কে একটি বার্তা প্রদর্শিত হয়।