Javascript ကိို Html page ရဲ႕ <body> သို႔မဟုတ္ <head> ဆိုတဲ႔ html tag ေတြၾကားမွာထည္႔သြင္းအသံုးျပဳနိုင္ပါတယ္၊
Javascript ကို <body> ထဲ႔မွာထည္႔သြင္းျခင္း
ေအာက္မွာေရးထားတာကေတာ႔ page loading လုပ္တဲ႔အခါ <p>element ထဲမွာ လက္ရွိ date ကိုေရးသားမွာပါ
<html>
<head><title>Inser in body</title></head>
<body>
<h1>I am Header</h1>
<p id="showdate"></p>
<script type="text/javascript">
document.getElementById("showdate").innerHTML=Date();
</script>
</body>
</html>
Output is-----------------------------------------------------------------
I am Header
Sun Jul 01 2012 09:24:01 GMT+0630 (Myanmar Standard Time)
-----------------------------------------------------------------
သတိျပဳရမည္႔ အခ်က္ကေတာ႔ <p> ဆိုတဲ႔ element ကိုမဖန္တီးခင္အထိ Javascript ကို ေအာက္မွာထားခဲ႔အတြက္ အလုပ္လုပ္မွာမဟုတ္ပါဘူး
Function & Events
ပံုမွန္အားျဖင္႔ html page loading လုပ္တဲ႔အခါ javascript က execute လုပ္္ပါတယ္။
ကၽြန္ေတာ္တို႔က တစ္ခါတစ္ေလ အဲလိုမ်ိဳး html page loading လုပ္တဲ႔အခါ javascript ကို execute မလုပ္ခ်င္ဘူးဆိုရင္ေတာ႔
function and events ဆိုတာေတြကိုသံုးရမွာပါ ဘယ္လိုမ်ိဳးလဲဆိုေတာ႔ user တစ္ေယာက္က button ေလးကို click လုပ္လိုက္တယ္အခါမ်ိဳးေပါ႔
အဲလိုအခါ မ်ိဳးဆိုရင္ ကၽြန္ေတာ္တို႔က js script ကို button ထဲမွာ function အျဖစ္ထည္႔သြင္းနိုင္ပါတယ္။
Events ဆိုတာကလည္း function ေတြနဲ႔တြဲျပီး အသံုးျပဳသြားတာပါပဲ႔(event ကိုေတြ႔တဲ႔အခါ function ကိုျပန္ေခၚသံုးတာပါ)
ဥပမာ ကၽြန္ေတာ္ဗိုက္ဆာလို႔ ပန္ကန္ကို ယူလိုက္တယ္ ဒါက event ေပါ႔ဗ်ာ
ကဲ႔ event ကိုေတြ႔ျပီဆိုေတာ႔ ဘာလုပ္မလဲ ဟီး ပန္ကန္ကိုယူလိုက္တယ္ဆိုမွေတာ႔ တစ္ခုခုလုပ္ေတာ႔မယ္ေပါ႔ ဒါကေတာ႔ function (ထမင္းစားမယ္,မုန္႔ထည္႔မယ္)ပါ
ကိုယ္ၾကိဳက္တဲ႔ function ကို event နဲ႔တြဲျပီးသံုးလို႔ရပါတယ္
funciton and event အေၾကာင္းအေသးစိတ္ကိုေတာ႔ ေနာက္ပိုင္းမွာရွင္းျပပါမယ္ ..ေမွ်ာ္ ဟီး
Javascript ကို <head> ထဲ႔မွာထည္႔သြင္းျခင္း
ေအာက္က code ေလးက button ကို click လုပ္တဲ႔အခါ function ကိုျပန္ျပီးေခၚသံုးထားတာပါ
<html>
<head><title>inside in head</title>
<script type="text/javascript">
function displayDate()
{
document.getElementById("timeDisplay").innerHTML=Date();
}
</script>
</head>
<body>
<h1> My Header</h1>
<p id="timeDisplay"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
Output is
-----------------------------------------------------------------
My Header
Sun Jul 01 2012 09:44:08 GMT+0630 (Myanmar Standard Time)
____________
| Display Date |
**************
-----------------------------------------------------------------
Display Date ဆိုတဲ႔ button ကိုနွိပ္လိုက္ရင္ ကၽြန္္ေတာ္တို႔ date ကိုျပေပးမွာျဖစ္ပါတယ္
ကၽြန္ေတာ္တို႔ဟာ document တစ္ခုမွာ script ေတြအမ်ားၾကီးေရးလို႔ရပါတယ္ျပီးေတာ႔ တစ္ခ်ိန္တည္းမွာလည္း <body> ထဲ႔မွာေရာ <head> ထဲမွာပါ
ေရးသားနိုင္ပါတယ္
ဒါေပမယ္႔ <head> ဆိုတဲ႔ section ထဲမွာ script ေတြေရးသားတာက ပိုျပီးေတာ႔အဆင္ေျပေကာင္းမြန္တာေတြ႔ရပါတယ္
ေနာက္တစ္ခုက javascript ကိုအျပင္ကေနေခၚသံုးေရးသားတာပါ
Javascript ကိုအျပင္ကေနျပီးေတာ႔ေခၚျပီးသံုးနုိင္ပါတယ္၊
Web pages အမ်ားစုမွာ external js ဖိုင္ကိုေခၚသံုးတာေတြ႔ရမွာပါ
Javascript ရဲ႕ external script ကေတာ႔ .js လို႔သတ္မွတ္ထားပါတယ္
သတိထားရမယ္႔အခ်က္ကေတာ႔ external js ဖိုင္မွာ <script > and </script > tag မပါ ပါဘူး
external js ဖိုင္ကိုအသံုးျပဳေတာ႔မယ္ဆိုရင္ <script> tag ရဲ႕ attribute ျဖစ္တဲ႔ src ထဲ႔မွာ .js ဖိုင္ကို ညႊန္ျပေပးရမွာျဖစ္ပါတယ္
ေရးသားနည္းကေတာ႔ေအာက္ပါအတိုင္းပါ
<html> <head> <script type="text/javascript" src="filename.js"></script> </head> <body> </body> </html>
ဒါဆိုရင္ေတာ႔ အျပင္က filename.js ကို အလုုပ္လုပ္ေစမွာပါ
ဒီေန႔ေတာ႔ ဒီေလာက္နဲ႔နားျပီ ..
လာဖတ္ေပးတဲ႔အတြက္ လက္ေညာင္းရက်ိဳးလည္းနပ္ပါတယ္ ဟီး
----------------------------------------------------------------
---------------Written by Cyberoot------------------------
------------~~~Thanks For Reading~~~----------------
---------Module 4 ကိုေစာင္႔ေမွ်ာ္ေပးပါရန္....---------------------
****************************************************************
No comments:
Post a Comment
Thanks for your comments
Welcome from cyberoot