Javascript codes တွေကို tag အတွင်းမှာ ရေးခြင်းနဲ့ tag အတွင်းမှာ ရေးခြင်းရဲ့ ကွာခြားချက်လေး ကို ပြောပြပေးသွားမှာပါ
js codes တွေကိုရေးတဲ့အခါမှာ .js ဆိုတဲ့ Extension အမည်နဲ့ File တစ်ခုအနေနဲ့ သီးသန့်ခွဲရေးပြီး js file ကို ကြေညာပေးတာရယ်၊ Html Codes တွေအတွင်းမှာပဲ Inline ရေးတာရယ်ဆိုပြီး နှစ်မျိုးရှိပါတယ်။
သီးသင့် File နဲ့ပဲရေးရေး Inline ပဲရေးရေး Html အတွင်းမှာ Javascript ထားဖို့ နေရာ နှစ်နေရာ ရှိပါတယ်။ အဲ့တာကတော့ tag နဲ့ tag တွေပါပဲ။
ဒီနှစ်ခုရဲ့ ကွာခြားချက်ကတော့ Html Codes တွေကို rendering ဖတ်တဲ့အခါမှာ tag အတွင်းက Codes တွေကို အရင်ဆုံး rendering လုပ်ပါတယ်။ ပြီးမှ tag အတွင်းက Codes တွေကို rendering လုပ်တာပါ။
စာရဲ့ အရောင်ကို Js နဲ့ပြောင်းတဲ့ Code လေး ရေးကြည့်ရအောင်။
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Js Topic</title>
<script>
document.getElementById("col").style.color = 'red';
</script>
</head>
<body>
<p id="col">Change Color</p>
</body>
</html>အပေါ်က Code ကအလုပ်လုပ်မှာ မဟုတ်ပါဘူး Id name မသိဘူးဆိုတဲ့ Javascritp Error တက်ပါလိမ့်မယ်။
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Js Topic</title>
</head>
<body>
<p id="test">Change Color</p>
<script>
document.getElementById("test").style.color = 'red';
</script>
</body>
</html>ဒီ Codes ကတော့ စာရဲ့အရောင်ကို အနီရောင် ပြောင်းပေးပါလိမ်မယ်။
tag အတွင်းမှာ ထည့်ရေးထားလို့ ဖြစ်ပါတယ်။ ပထမ ရေးထားတဲ့ codes အလုပ်မလုပ်ရတဲ့ အကြောင်းကတော့ javascript codes ကို tag အတွင်းမှာရေးထားသောကြောင့် js codes တွေကို အရင် rendering လုပ်သွားလို့ id name ကို မသိဖြစ်သွားတာပါ။
ဒါပေမဲ့ jquery “document ready” နဲ့ ရေးမယ်ဆိုရင်တော့ ပြဿနာမရှိပါဘူး ကြိုက်တဲ့နေရာမှာ ရေးလို့ရပါတယ်။
$("document").ready(function(){
// your code here
});“document ready” ရဲ့အလုပ်လုပ်ပုံက Html Document တွေအကုန် Ready ဖြစ်မှ javascript codes ကို run မယ်လို့ ပြောလိုက်ခြင်းဖြစ်ပါတယ်။
ထို့ကြောင့် ကိုယ်ရေးမယ့် js Code အခြေအနေကိုကြည့်ပြီး tag သို့မဟုတ် tag အတွင်း ထည့်သင့်သလားကို ဆုံးဖြတ်နိုင်မယ်လို့ မျှော်လင့်ပါတယ်။
ပို့စ်လေးကို အဆုံးထိဖတ်ပေးတဲ့အတွက် ကျေးဇူးတင်ပါတယ်။
သင့်အတွက် အကျိုးရှိတယ်ဆိုရင် ပြန်ပြီးမျှဝေပေးဖို့လည်း တောင်းဆိုချင်ပါတယ်။
