HTML element တွေကို သီးသန့် id တွေပေးလိုတဲ့အခါမှာ id Attribute ကိုသုံးပါတယ်။
HTML document တစ်ခုမှာ id တစ်ခုကို တစ်ခုထက်ပိုတဲ့ element တွေမှာ မသုံးရပါဘူး။ id တစ်ခုဟာ သက်ဆိုင်ရာ element အတွက်သီးသန့်သာ သုံးရပါမယ်။ HTML decoument တစ်ခုဆိုတာ .html ဖိုင်တစ်ဖိုင်ကို ဆိုလိုတာပါ။
Id Attribute အသုံးပြုခြင်း
id Attribute ဟာ html element တစ်ခုကို သီးသန့် id သတ်မှတ်ဖို့အတွက် သုံးပါတယ်။ သီးသန့် ဖြစ်တဲ့အတွက် id value တွေဟာ ထပ်လို့မရပါဘူး။
id Attribute တွေကို style sheet တွေမှာ သီးသန့် Style များကြေညာရန်နှင့် JavaScript မှာ သီးသန့်လုပ်ဆောင်ချက်များ ပြုလုပ်ရန်အတွက် အသုံးပြုပါတယ်။
Style Sheet များအတွက် id ကိုအသုံးပြုရာမှာတော့ hash (#) နောက်က id value လိုက်ပြီး Style Properties များကို carli braces {...} အတွင်းမှာ ရေးရပါတယ်။ Style Property တစ်ခုဆုံးတိုင်း Semicolum (;) နဲ့ပိတ်ပေးရပါတယ်။ အောက်က ဥပမာ ကိုကြည့်ပါ။
Id Attribute Syntax
#id-name{style-property_1 : value;style-property_2 : value;}
အောက်က ဥပမာမှာဆိုရင် id "myHeader" နဲ့ <h1> element တစ်ခုရှိပါတယ်။ အဲဒီ <h1> element ကို <head> tag ထဲက #myHeader နဲ့ ဖမ်းပြီး Style Property ထည့်ပြထားပါတယ်။
Notic : တကယ်တော့လေ class နဲ့ id တွေက Attribute ပေါ့နော။ သူနောက်က = "value" က Attribute Value ပေါ့နော်။ ဒါပေမယ့် class value "myHeader" , id value "myHeader" စသည်ဖြင့် မပြောတော့ဘဲ class "myHeader", id "myHeader" စသည်ဖြင့်ဘဲ အလွယ်သုံးစွဲလေ့ရှိကြပါတယ်။ ဒီတော့ သင်ခန်းစာများမှာလဲ အဲဒီလိုဘဲ သုံးစွဲသွားပါမယ်။
Example Code
<!Doctype HTML><html><head><style>#myHeader {background-color : lightblue;color : black;padding : 40px;text-align : center;</style></head><body><h1 id="myHeader"> My Header </h1></body></html>
id တွေဟာ Case Sensitive ဖြစ်ပါတယ်။
id တွေမှာ character တစ်ခုတော့ အနည်းဆုံးပါရမည်ဖြစ်ပြီး၊ whitespace ( space bar တို့၊ tab တို့) ထည့်ရေးလို့မရပါဘူး။ ( class မျာလည်း အတူတူပါဘဲ။ whitespace တွေထည့်လို့မရပါဘူး။)
Class နှင့် Id ခြားနားချက်များ
classတစ်ခုကို html element တစ်ခုထက်ပိုပြီး သုံးစွဲနိုင်ပေမယ့် ၊idကတော့idတစ်ခုကို element တစ်ခုသာသုံးနိုင်ပါတယ်။idကထပ်လို့မရပါဘူး။- Style Sheet တွေကနေ လှမ်းဖမ်းတဲ့အခါမှာ
classအတွက်အတွက် period character (.) ကိုသုံးပြီးidအတွက်ကိုတော့ hash character (#) ကိုသုံးပါတယ်။
CSS Tutorials များကိုလေ့လာပြီးတဲ့အခါမှာ ပိုမိုပြီး နားလည်ပါလိမ့်မယ်။
ID နှင့် Link ကိုသုံးပြီး HTML Bookmark ပြုလုပ်ခြင်း
မာတိကာ (သို့) Link တစ်ခုကနေ Website ရဲ့ သတ်မှတ်ထားတဲ့ အပိုင်းတွေကို ခုန်ပျံကျော်လွှား သွားစေချင်တဲ့ အခါမျိုးတွေမှာ Bookmark ကိုသုံးကိုသုံးပါတယ်။
အရမ်းရှည်တဲ့ Webpage တွေမှာ Bookmark တွေဟာ အလွန်အသုံးဝင်ပါတယ်။
Bookmark ပြုလုပ်ဖို့အတွက် အရင်ဆုံး သွားချင်တဲ့နေရာ (Mark) ကို အရင်ဆုံးသတ်မှတ်ပေးရပါတယ်။ ပြီးတော့မှ အဲဒီနေရာကို Link ကနေ ညွှန်းရပါတယ်။
အဲဒိလင့်ကို နှိပ်လိုက်တဲ့အခါမှာ သတ်မှတ်ထားတဲ့ အမှတ်အသားနေရာ (Bookmark) ကို ခုန်ပျံကျော်လွှားပြီး ရောက်သွားမှာပါ။ အမှတ်အသားက link ရဲ့ အပေါ်မှာ ဖြစ်ဖြစ် အောက်မှာ ဖြစ်ဖြစ် ကြိုက်သလိုထားလို့ရပါတယ်။
Example Bookmark
ပထမဆုံး သွားချင်တဲ့နေရာ (Mark) ကို id attribute နဲ့ သတ်မှတ်ပါတယ်။
<h2 id="C4"> Character 4</h2>
ပြီးတဲ့အခါမှာတော့ Link မှာ အဲဒီ id "C4" ကိုညွှန်းဆိုလိုက်ပါတယ်။ ဒါက Wabpage တစ်ခုထည်းအတွင်းမှာ Bookmark လုပ်နည်းဖြစ်ပါတယ်။
<a href="#C4"> Jump to Chapter 4 </a>
အခြား Webpage တစ်ခုက Mark ကိုထည့်ချင်ရင်တော့ Absolute URL (or) Relative Url ရဲ့ နောက်ကမှ #mark_name ကိုထည့်ရပါတယ်။ အောက်က ဥပမာမှာ ကြည့်ပါ။
<a href="demo_page.html#C4"> Jump to Chapter 4 </a>
Id ကို JavaScript မှာ အသုံးပြုခြင်း
သတ်မှတ်ထားတဲ့ html element တွေအတွက် အထူးလုပ်ဆောင်ချက်တွေ ပြုလုပ်လိုတဲ့အခါမှာ JavaScript နဲ့တွဲပြီးတော့ id Attribute ကိုအသုံးပြုရပါတယ်။
JavaScript ကနေ html element ကို id သုံးပြီး ဖမ်းချင်တဲ့အခါမှာ getElementById() method ကိုအသုံးပြုပါတယ်။
Example Code
<script>function displayResult(){document.getElementById("myHeader").innerHTML = "Have a nice Day!";}</script>
JavaScript အကြောင်းကို ကျွန်တော်တို့ရဲ့ JavaScript Tutorials သင်ခန်းစာများမှာ ပိုမိုလေ့လာပါ။
Chapter Summary
idvalue တွေဟာ document တစ်ခုအတွင်းမှာ Unique ဖြစ်ရပါမယ်။ .html ဖိုင်တစ်ခုထဲမှာidvalue တစ်ခုနှင့် တစ်ခု မတူရဘူးလို့ ဆိုလိုတာပါ။idAttribute ကို Style Sheet နဲ့ JavaScript တွေကနေ html element တွေကို ဖမ်းဖို့ (Select လုပ်ဖို့၊ ရွေးခြယ်ဖို့ပေါ့နော်) အတွက် အသုံးပြုပါတယ်။idValue တွေဟာ Case Sensitive ဖြစ်ပါတယ်။ စာလုံး အကြီးအသေး မှားရင် အလုပ်, မလုပ်ပါဘူး။idAttribute ကို Bookmark တွေလုပ်တဲ့အခါမှာလည်း အသုံးပြုနိုင်ပါတယ်။- JavaScritp ကနေ
idတွေကိုလှမ်းခေါ်တဲ့အခါgetElementById()method ကိုသုံးပါတယ်။
No comments:
Post a Comment