JavaScript හි පරිශීලක ගුණාංග
HTML හි, ඔබේම, පරිශීලක ගුණාංග ටැග වෙත එක් කිරීමට අවසර ඇත.
එවැනි ගුණාංග ආරම්භ විය යුත්තේ
data- වලින් වන අතර,
ඊට පසුව ඔබට පහසු ඕනෑම
ගුණාංග නමක් යෙදිය හැකිය.
පරිශීලක ගුණාංග භාවිතා කළ හැකිය විවිධාකාර ක්‍රම ගණනාවක් මගින්. මෙම ක්‍රම බොහොමයක් අපි පසුව අධ්‍යයනය කරනු ඇත, එසේම ඔබට තවත් බොහෝ දේ නිර්මාණය කිරීමට හැකිවනු ඇත.
එවැනි ගුණාංග වෙත ප්‍රවේශ වීම සම්මතයට අනුව
ක්‍රියා නොකරයි. කලින් කරන ලද්දක් මෙන්,
මූලද්‍රව්‍යයේ එකම නමින් යුත් ගුණයකට
පහසුවෙන් ප්‍රවේශ විය නොහැක,
ඒ වෙනුවට විශේෂ ගුණයක්
dataset භාවිතා කළ යුතු අතර,
ඊට පසුව ලක්ෂ්‍යය මගින්
data- නොමැතිව ගුණාංගයේ නම ලියනු ලැබේ. උදාහරණයක් ලෙස,
අපගේ ගුණාංගයේ නම data-test නම්,
එය වෙත ප්‍රවේශ වීම සඳහා අපි elem.dataset.test ලියන්නෙමු,
මෙහි elem යනු අපගේ මූලද්‍රව්‍යය සමඟ ඇති විචල්‍යයයි.
අපි උදාහරණයක් බලමු. අපට පහත මූලද්‍රව්‍යය ලබා දී ඇතැයි සිතමු:
html<div id="elem" data-num="1000"></div>
අපි එහි data-num ගුණාංගයේ අගය තිරය මත ප්‍රදර්ශනය කරමු:
javascriptlet elem = document.querySelector('#elem');
console.log(elem.dataset.num); // 1000 ප්‍රදර්ශනය කරයි
දැන් අපි මෙම ගුණාංගයට වෙනත් අගයක් පැවරමු:
javascriptlet elem = document.querySelector('#elem');
elem.dataset.num = 123;
පහත කේතය ලබා දී ඇත:
html<div id="elem" data-text="str">text</div>
div එක මත ක්ලික් කළ විට, එහි
පාඨය අවසානයට එහි ගුණාංගයේ අන්තර්ගතය
data-text එකතු කරන ලෙස සකසන්න.
div ගණනක් ලබා දී ඇත, ඒවායේ data-num
ගුණාංගය තුළ තම අනුක්‍රමික අංකය අඩංගු වේ:
html<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>
ඕනෑම div එකක් මත ක්ලික් කළ විට, එහි අවසානයට එහි අනුක්‍රමික අංකය ලියා ඇති බවට සහතික කරන්න.
බොත්තමක් ලබා දී ඇත. මෙම බොත්තම එහි ක්ලික් සංඛ්‍යාව ගණනය කරන ලෙස සකසන්න, ඒවා යම් පරිශීලක ගුණාංගයකට ලියා තබමින්. වෙනත් බොත්තමක් මත ක්ලික් කළ විට තිරය මත ප්‍රදර්ශනය කරන්න, පළමු බොත්තම මත ක්ලික් කිරීම් කීයක් සිදු වී ඇත්දැයි.
input ක්ෂේත්‍රයක් ලබා දී ඇත:
html<input id="elem" data-length="5">
මෙම input ක්ෂේත්‍රයේ, data-length ගුණාංගය තුළ
input ක්ෂේත්‍රයට ඇතුළත් කළ යුතු අක්ෂර සංඛ්‍යාව අඩංගු වේ.
දර්ශන අවධානය අහිමි වූ විට, ඇතුළත් කරන ලද අක්ෂර සංඛ්‍යාව
නියම කරන ලද එකට නොගැලපේ නම්, ඒ පිළිබඳ පණිවිඩයක්
ප්‍රදර්ශනය කරන ලෙස සකසන්න.
input ක්ෂේත්‍රයක් ලබා දී ඇත:
html<input id="elem" data-min="5" data-max="10">
මෙම input ක්ෂේත්‍රයේ, data-min සහ
data-max ගුණාංගවල පරාසය අඩංගු වේ.
දර්ශන අවධානය අහිමි වූ විට, ඇතුළත් කරන ලද අක්ෂර සංඛ්‍යාව
මෙම පරාසය තුළට නොපැමිණේ නම්, ඒ පිළිබඳ පණිවිඩයක්
ප්‍රදර්ශනය කරන ලෙස සකසන්න.