JavaScript တွင် အသုံးပြုသူစိတ်ကြိုက် Attributes များ

HTML တွင် သင့်ကိုယ်ပိုင်၊ အသုံးပြုသူစိတ်ကြိုက် attributes များကို tag များထဲသို့ ပေါင်းထည့်ခွင့်ပြုပါသည်။ အဆိုပါ attributes များသည် data- ဖြင့် စတင်ရမည်ဖြစ်ပြီး၊ ထို့နောက်တွင် သင့်အတွက်အဆင်ပြေသော မည်သည့် attribute အမည်မဆို လာနိုင်ပါသည်။

အသုံးပြုသူစိတ်ကြိုက် attributes များကို များပြားလှသော နည်းလမ်းအမျိုးမျိုးဖြင့် အသုံးပြုနိုင်ပါသည်။ ထိုနည်းလမ်းများစွာကို နောက်ပိုင်းတွင် သင်ခန်းစာအဖြစ် လေ့လာပါမည်၊ ထို့ထက်များစွာသော အသုံးပြုပုံများကို နောင်တွင် သင်ကိုယ်တိုင် တီထွင်နိုင်ပါသည်။

�ဆိုပါ attributes များကို ရည်ညွှန်းခြင်းသည် စံနည်းလမ်းအတိုင်း မဟုတ်ပါ။ ယခင်က ကျွန်ုပ်တို့လုပ်ခဲ့သကဲ့သို့ element ၏ တူညီသောအမည်ရှိ property သို့ ရိုးရိုးရှင်းရှင်း ရည်ညွှန်း၍ မရပါ။ အထူး property ဖြစ်သော dataset ကို အသုံးပြုရမည်ဖြစ်ပြီး၊ ထို property ၏နောက်တွင် data- မပါသော attribute ၏အမည်ကို အောက်ဆီပြခြင်းဖြင့် ရေးသားရပါမည်။ ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့၏ attribute ၏အမည်သည် data-test ဖြစ်ပါက၊ ၎င်းကို ရည်ညွှန်းရန် elem.dataset.test ဟု ကျွန်ုပ်တို့ ရေးသားပါမည်။ ထိုelem သည် ကျွန်ုပ်တို့၏ element ပါဝင်သည့် variable ဖြစ်ပါသည်။

ဥပမာတစ်ခုဖြင့် ကြည့်ရှုကြပါစို့။ ကျွန်ုပ်တို့တွင် အောက်ပါ element ရှိသည်ဆိုပါစို့။

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

၎င်း၏ data-num attribute ၏တန်ဖိုးကို စခရင်ပေါ်တွင် ဖော်ပြကြပါစို့။

javascriptlet elem = document.querySelector('#elem');
console.log(elem.dataset.num); // 1000 ကိုဖော်ပြမည်

ယခု ထို attribute သို့ အခြားတန်ဖိုးတစ်ခု သတ်မှတ်ပါမည်။

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

Задание 1

အောက်ပါ code ကို ပေးထားပါသည်။

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

div ကို ကလစ်နှိပ်လိုက်သောအခါ ၎င်း၏ text ၏အဆုံးသို့ ၎င်း၏ data-text attribute အတွင်းရှိ အကြောင်းအရာများ ပေါင်းထည့်သွားရန် ပြုလုပ်ပါ။

Задание 2

data-num attribute အတွင်း၌ ၎င်းတို့၏ အစဉ်လိုက်နံပါတ်များပါရှိသော div များကို ပေးထားပါသည်။

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 ကိုမဆို ကလစ်နှိပ်လိုက်သောအခါ ၎င်း၏အဆုံးသို့ ၎င်း၏ အစဉ်လိုက်နံပါတ်ကို ရေးသွင်းသွားရန် ပြုလုပ်ပါ။

Задание 3

ခလုတ်တစ်ခုကို ပေးထားပါသည်။ ၎င်းခလုတ်သည် ၎င်းကို နှိပ်ချက်အရေအတွက်ကို ရေတွက်ပြီး၊ မည်သည့် အသုံးပြုသူစိတ်ကြိုက် attribute အတွင်း၌မဆို သိမ်းဆည်းသွားရန် ပြုလုပ်ပါ။ အခြားခလုတ်တစ်ခုကို ကလစ်နှိပ်သောအခါ ပထမခလုတ်ပေါ်တွင် နှိပ်ချက်မည်မျှရှိခဲ့သည်ကို စခရင်ပေါ်တွင် ဖော်ပြရန် လုပ်ဆောင်ပါ။

Задание 4

input တစ်ခုကို ပေးထားပါသည်။

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

ဤ input တွင် data-length attribute အတွင်း၌ input ထဲသို့ ရိုက်ထည့်ရန် လိုအပ်သော စာလုံးအရေအတွက် ပါရှိပါသည်။ focus ပျောက်သွားသောအခါ၊ ရိုက်ထည့်ထားသော စာလုံးအရေအတွက်သည် သတ်မှတ်ထားသည့် အရေအတွက်နှင့် မကိုက်ညီပါက ၎င်းအကြောင်းကို message တစ်ခု ဖော်ပြသွားရန် ပြုလုပ်ပါ။

Задание 5

input တစ်ခုကို ပေးထားပါသည်။

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

� input တွင် data-min နှင့် data-max attributes များတွင် အတိုင်းအတာအပိုင်းအခြားတစ်ခု ပါရှိပါသည်။ focus ပျောက်သွားသောအခါ၊ ရိုက်ထည့်ထားသော စာလုံးအရေအတွက်သည် ဤအတိုင်းအတာအပိုင်းအခြားအတွင်း မကျရောက်ပါက ၎င်းအကြောင်းကို message တစ်ခု ဖော်ပြသွားရန် ပြုလုပ်ပါ။