In the <script> tag
HTML file တွေထဲမှာ JavaScript ကိုရေးတဲ့အခါ <script> နှင့် </script> အတွင်းမှာ ထည့်ရေးရပါတယ်။
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
ဟိုအရင်တုန်းကတော့ JavaScript တွေရေးတဲ့အခါ type Attribute ထည့်ပြီးရေးရပါတယ်။၊
ဥပမာ - <script type="text/javascript">
နောက်ပိုင်းမှာတော့ type Attribute ကမလိုအပ်တော့ပါဘူး။ JavaScript ဟာ HTML ရဲ့ Defualt Scrpiting Language ဖြစ်လာပါပြီ။
JavaScript Funcion & Event
JavaScript function ဆိုတာကတော့ JavaScript Code တွေစုစည်းထားတဲ့ အစုအဝေးတစ်ခုပါ။ အဲဒီ Function ဟာ ခေါ်ယူခြင်း ခံရတဲ့အချိန်မှာ အလုပ်ထလုပ်မှာ ဖြစ်ပါတယ်။
ဥပမာအားဖြင့် ခလုပ်လေးတစ်ခုကို နှိပ်လိုက်တဲ့ Event ပေါ်လာတဲ့အခါမှာ Function ကိုခေါ်ပြီး အလုပ်လုပ်ခိုင်းလိုက်တဲ့ သဘောပါ။
Event တွေကတော့ များစွာရှိပါတယ်။ ခလုပ်လေးကို နှိပ်လိုက်တာ၊ Mouse corsor လေးတင်လိုက်တာ စသည်ဖြင့်ပါ။
နောက်အခန်းတွေမျာ Function နှင့် Event တွေအကြောင်းကို ပိုမိုလေ့လာရပါဦးမယ်။
ဒီပေ့မှာကတော့ သဘောတရား မိတ်ဆက်လောက်ပါဘဲ။ သေခြာနားမလည်သေးလည်း စိတ်မပူပါနှင့်။
JavaScript In <head> or <body>
JavaScript တွေကို HTML Document အတွင်းမှာ ကြိုက်သလောက်ထည့်လို့ရပါတယ်။ အရေအတွက် ကန့်သတ်ချက် မရှိပါဘူး။
<head> tag ထဲမှာ ထည့်နိုင်သလို <body> tag ထဲမှာလည်း ထည့်လို့ရပါတယ်။ နှစ်ခုလုံးထည်းမှာလည်း ထည့်သွင်းထားနိုင်ပါတယ်။
JavaScript In <head>
အောက်က ဥပမာမှာ JavaScript function တစ်ခုတည်ဆောက်ပြီး <head> section ထဲမှာထားမယ်။
အဲဒိ function လေးကို User က ခလုပ်နှိပ်လိုက်တဲ့အချိန်မှာ လှမ်းခေါ်မယ့် ပုံစံလေးဖြစ်ပါတယ်။
Example Code
<!DOCTYPE HTML>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph<p>
<botton onclick="myFunction()">Try it!</botton>
<body>
<html>
Code ရှင်းလင်းချက်
- HTML ဖိုင်ရဲ့
HeadSection ထဲမှာ<script>Tag နဲ့ myFunction() လို့ခေါ်တဲ့ JavaScript Function တစ်ခု တည်ဆောက်ထားပါတယ်။ - myFunction() ထဲမှာတော့ id= "demo" ရှိတဲ့ Html Element ကိုရှာဖွေပြီး သူထဲက Content တွေကို
"Paragraph changed."ဆိုပြီး ပြောင်းလဲ ပေးမှာဖြစ်ပါတယ်။ bodySection ထဲမှာတော့<botton>တစ်ခုရှိပြီး အဲဒီ botton ကိုနှိပ်လိုက်တာနဲ့ myFunction() ဆိုတဲ့ JS Function ကိုလှမ်းခေါ်ပြီး အလုပ်လုပ်မှာဖြစ်ပါတယ်။- Code တွေရဲ့ အလုပ်လုပ်ပုံတွေကို ရှင်းရှင်းလင်းလင်း နားမလည်သေးရင်လည်း စိတ်မရှုပ်ပါနဲ့။ ဒီပေ့မှာက ရင်းနှီးသွားရုံသာ ရှင်းပြထားတာဖြစ်ပါတယ်။
- Try it Yourself ! ကိုနှိပ်ပြီး Code နှင့် အလုပ်လုပ်ပုံကို ကြည့်ရှုနိုင်ပါတယ်။
JavaScript In <body>
အောက်က ဥပမာမှာတော့ JavaScript Function တစ်ခုကို <body> tag အတွင်းမှာထားပြီး တည်ဆောက်ထားပါတယ်။
Button ကို Click လုပ်လိုက်တဲ့အချိန်မှာ အဲဒီ Function က အလုပ်ထလုပ်စေမှာ ဖြစ်ပါတယ်။
Example Code
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph<p>
<botton onclick="myFunction()">Try it!</botton>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
<body>
<html>
JavaScript Code များကို <bode> tag ရဲ့ အောက်ဆုံးမှာ ထားလေ့ရှိကြပါတယ်။
ဒီလိုထားလိုက်တာက Website ရဲ့ Speed ကို မြန်ဆန်စေပါတယ်။ ဘာကြောင့် ဒီလိုထားရတာလည်း ဆိုတော့ Websit Display လုပ်ဖို့အတွက် JavaScript တွေက သိပ်ပြီး မလိုအပ်လှပါဘူး။ ဒါကြောင့် အပေါ်မှာ ထားခြင်းဟာ JS Code တွေကို Loading လုပ်ရတဲ့ အချိန်ကို တိုးစေတာ ဖြစ်ပါတယ်။
External JavaScript
JavaScript ကို External File တစ်ခုအနေနှင့် ထားပြီးလဲ အသုံးပြုနိုင်ပါတယ်။
External JS : myScript.js
function myFunction(){
document.getElementById("demo").innerHTML = "Paragraph Changed.";
}
External JS ကိုသုံးတဲ့အခါမှာ တူညီတဲ့ Code တွေကို HTML Webpage များစွာကနေ ချိတ်ဆက် ခေါ်ယူအသုံးပြုနိုင်တဲ့ အကျိုးကျေးဇူးကို ရရှိပါတယ်။
JavaScript File တွေရဲ့ extension ကတော့ .js ဖြစ်ပါတယ်။
External JS တွေကို အသုံးပြုဖို့အတွက် <script> tag ထဲမှာ src="#" Attribute အနေနဲ့ JavaScript File ရဲ့ URI ကို ထည့်သွင်းပေးရပါတယ်။
သင့်ရဲ့ External JS ချိတ်ဆက်တဲ့ <script> tag ကို <head> ထဲမှာ ဖြစ်ဖြစ် <body> tag ထဲမှာ ဖြစ်ဖြစ် ကြိုက်ရာနေရာမှာ ထားနိုင်ပါတယ်။ တစ်ခုထက်ပိုပြီးတော့လည်း ထားနိုင်ပါတယ်။
<script> tag ထားတဲ့နေရာ အတိအကျမှာဘဲ External JS ပေါ်က Code တွေက နေရာယူသွားမှာ ဖြစ်ပါတယ်။
External Script File ထဲမှာတော့ <script> tag အဖွင့်အပိတ် မသုံးရပါဘူး။
External JS ရဲ့ အားသာချက်များ
External JS အနေနှင့် အသုံးပြုခြင်းကြောင့် အောက်ပါ အကျိုးကျေးဇူးများကို ခံစားနိုင်ပါတယ်
- HTML code နှင့် JavaScript Code များ သီးခြားစီဖြစ်စေခြင်း။
- JS code နှင့် HTML code များကို ရှင်းလင်းလွယ်ကူစွာ ဖတ်နိုင် ပြင်နိုင်ခြင်း။
- JS Cached အနေဖြင့် Webpage Speed ပိုမိုမြန်ဆန်စေခြင်း။
- တူညီသော ကုဒ်များကို Html file များစွာမှ ယူသုံးနိုင်ခြင်း။
HTML page တစ်ခုထဲမှား တစ်ခုထက်ပိုတဲ့ External JS ဖိုင်တွေ ထည့်သွင်းဖို့ အတွက်တော့ အောက်ပါအတိုင်း အသုံးပြုနိုင်ပါတယ်။
Example Code
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
External Refrences
External JS ကို URL အပြည့်အစုံနှင့် ညွှန်းဆိုနိုင်သလို လက်ရှိ html file နှင့် ဆက်စပ်နေတဲ့ လမ်းကြောင်း (Relative Path) အနေနှင့်လည်း ညွှန်းဆိုနိုင်ပါတယ်။
Bootstrp JS တို့ W3 JS တို့လို Third party JS Framework တွေကို အသုံးပြုတဲ့အခါမှာ Full Url နှင့် အသုံးများပါတယ်။
Example Code : Full Url Link
<script src="https://www.w3schools.com/js/myScript1.js"></script>
မိမိတို့ ကိုယ်ပိုင် JS file များအတွက်တော့ Relative Path ကို သုံးပြီး ချိတ်ဆက်ကြတာ များပါတယ်။
Example Code : Relative Path Link
<script src="/js/myScript1.js"></script>
File Path များ အသုံးပြုနည်း အသေးစိတ်ကို HTML File Path မှာ ပိုမိုလေ့လာနိုင်ပါတယ်။
No comments:
Post a Comment