JavaScript Display Possibilities
JavaScript ဖြင့် Data တွေဖေါ်ပြရာမှာ အောက်ပါနည်း အမျိုးမျိုးဖြင့် ဖေါ်ပြနိုင်ပါတယ်။
innerHTMLကိုအသုံးပြု၍ HTML Tag တွေထဲကို ရေးချခြင်း။document.write()ကိုအသုံးပြု၍ HTML Code များအဖြစ် ရေးချခြင်း။window.alert()ကိုအသုံးပြု၍ Alert Box အဖြစ် အသုံးပြုခြင်း။console.log()ကိုအသုံးပြု၍ Browser Console ထဲသို့ရေးချခြင်း။
innerHTML အသုံးပြုခြင်း
HTML Element ကို သတ်မှတ်ဖို့အတွက် document.getElementById("id") ကို အသုံးပြုနိုင်ပါတယ်။
"id" ရှိတဲ့ html Element ကို သတ်မှတ်ပေးပါတယ်။ innerHTML ကတော့ HTMl Content ကို သတ်မှတ်ပေးတဲ့ Property ဖြစ်ပါတယ်။
Example Code
<!DOCTYPE HTML><html><body><h1>My First Web Page</h1><p>My First Paragraph</p><p id="demo"></p><script>documnet.getElementById("demo").innerHTML = 5+6;</script></body></html>
Code ရှင်းလင်းချက်
- Line 7 မှာဆိုရင် ဘာ Content မှ မရှိတဲ့ id="demo" နဲ့
<p>tag တစ်ခုရှိပါတယ်။ - Line 9 and line 11 မှာဆိုရင်
<script>အဖွင့်နှင့် အပိတ် အသီးသီးရှိကြပါတယ်။ - line 10 မှာတော့ JavaScript Code ရှိပါတယ်။
- line 10 မှာ
document.getElementById("demo")ဆိုတာကid="demo"ရှိတဲ့ element ကို ရွေးချယ်လိုက်တာဖြစ်တယ်။ ဒီတော့ line 7 က<p id="demo">ကိုရွေးချယ်လိုက်တာ ဖြစ်ပါတယ်။ - line 10 မှာ နောက်က
innerHTML = 5+6;ကတော့ ရွေးချယ်တားတဲ့ element ထဲမှာ 5+6 ကိုရေးချမယ်လို့ ဆိုတာဖြစ်တယ်။ ဒီတော့ အဖြေ 11 ကို Output ထုပ်ပေးတယ်။
documnet.getElementById("demo").innerHTML = 5+6;
ရဲ့ အဓိပ္ပါယ်က id="demo" ရှိတဲ့ Element ထဲမှာ 5+6 ကို ရေးထည့်မယ် လို့ ဆိုလိုတာဖြစ်တယ်။
innerHTML ဟာ အလွန်အသုံးများတဲ့ ပုံစံဖြစ်ပါတယ်။
documnet.write() အသုံးပြုခြင်း
document.write() ကို ကုဒ်စမ်းသတ်တာမျိုးတွေအတွက်ဘဲ အသုံးများပါတယ်။ တကယ့် Real World မှာ အသုံးနည်းတဲ့ ကုဒ်ပါ။
Example Code
<!DOCTYPE HTML><html><body><h1>My First Web Page</h1><p>My First Paragraph</p><script>documtne.write(5+6);</script></body></html>
document.write() ကို Event တွေနဲ့ တွဲသုံးတဲ့အခါ html file ထဲက Content တွေအားလုံးကို ဖျက်ပြီး အစားထိုးလိုက်ပါတယ်။
Try if Yourself ! ကိုနှိပ်ပြီး မြင်သာအောင် ကြည့်ပါ။
Example Code
<!DOCTYPE HTML><html><body><h1>My First Web Page</h1><p>My First Paragraph</p><botton onclick="documtne.write(5+6);">Try it !</botton></body></html>
window.alert() အသုံးပြုခြင်း
window.alert() ကို Alert Box တွေဖန်တီးရာမှာ အသုံးပြုပါတယ်။
Example Code
<!DOCTYPE HTML><html><body><h1>My First Web Page</h1><p>My First Paragraph</p><botton onclick="window.alert('Hello JavaScripter !');">Alert Now !</botton></body></html>
window keyword ကို မရေးရင်လည်းရပါတယ်။
JavaScript မှာ window object ဟာ Global Scope ဖြစ်တယ်။ ဒါက ဘာကို ဆိုလိုတာလည်း ဆိုတော့ ပုံမှန်အားဖြင့် Variable တွေ၊ properties တွေ၊ method တွေ အားလုံးဟာ window object ရဲ့ အောက်မှာရှိတယ်။ ဒီတော့ window ဆိုတာကို ထည့်မရိုက်လည်း ရပါတယ်။
ဒီတော့ အောက်ကလို ပြောင်းရေးရင်လည်း အတူတူပါဘဲ။
Example Code
<botton onclick="alert('Hello JavaScripter !');">Alert Now !</botton>
console.log() အသုံးပြုခြင်း
console.log() ကိုတော့ Debugging လုပ်ဖို့အတွက် အသုံးပြုကြတာဖြစ်ပါတယ်။ Debugging ဆိုတာကတော့ Error ရှာတဲ့အပိုင်းတွေမှာ အသုံးဝင်တာဘဲ ဖြစ်ပါတယ်။
console.log() ကိုအသုံးပြုတဲ့အခါမှာ Browser ထဲက Console ထဲမှာဘဲ log အဖြစ်နဲ့ ပြပေးမှာဖြစ်လို့ User တွေအနေနှင့် မြင်နိုင်မှာ မဟုတ်ပါဘူး။
Debugging အကြောင်းကို နောက်အခန်းတွေမှာ ပိုမိုလေ့လာရပါဦးမယ်။
Example Code
<!DOCTYPE HTML><html><body><script>console.log(5+6);</script></body></html>
JavaScript Print
JavaScript မှာ Print Object ရော Print Method ရော မရှိပါဘူး။
Output Device တွေကို JavaScript ကနေ မခိုင်းစေနိုင်ပါဘူး။
Print လုပ်နိုင်ဖို့ အတွက် ကတော့ Browser မှာပါဝင်တဲ့ window.print() Method ကို ခေါ်သုံးတာဘဲ ဖြစ်ပါတယ်။
Example Code
<!DOCTYPE HTML><html><body><botton onclick="window.print();">Print Now !</botton></body></html>
No comments:
Post a Comment