Monday, August 27, 2012

Javascript Module 16

For...In Statement
သူကေတာ႔ array ရဲ႕ element ေတြ သို႔ object ရဲ႕ properties ကို looping လုပ္ပါတယ္
Syntax
for ( variable in object )
{
//အလုပ္လုပ္မယ္႔ code ေရးရန္
}

Note: for..in loop ရဲ႕ body ထဲ႕က code ကို element/property တစ္ခုစီအတြက္ execute လုပ္ပါတယ္
နမူနာ
<html>
<body>
<script type="text/javascript">
var x;
var name=new Array();
name[0]="MHU";
name[1]="cyberoot";
name[2]="ibot";
for (x in name)
{
    document.write(name[x] + "<br/>");
}
</script>
</body>
</html>
The Output is
***************
MHU
cyberoot
ibot
**************

ေနာက္ထပ္တစ္ခုက Events
events ဆိုတာက javascript ရဲ႕ actions ေတြပဲ႔ျဖစ္ပါတယ္
Javascript ကိုအသံုးျပဳျခင္းျဖင္႔ ကၽြန္ေတာ္တို႔က dynamic web page ကိုဖန္တီးဖို႔ လုပ္ေဆာင္နိုင္ပါတယ္
Events ဆိုတာက js ရဲ႕ သတိျပဳမိေအာင္လုပ္တဲ႔ လုပ္ေဆာင္ခ်က္ေတြပဲ႔ျဖစ္ပါတယ္
web page တစ္ခုမွာရွိတဲ႔ ဘယ္ element မွာမဆို js က trigger လုပ္တဲ႔ တိက်တဲ႔ event ေတြရွိပါတယ္
ဥပမာေျပာရရင္ေတာ႔ button element ရဲ႕ onClick event ကိုအသံုးျပဳမယ္ဆိုရင္ button ေပၚမွာ user က click နွိပ္လိုက္တဲ႔အခါ
onclick event ထဲ႔က function ကိုရည္ညြန္းေပးတာျဖစ္ျပီး အဲဒီ function ကိုအလုပ္လုပ္ေစမွာပါ
ကၽြန္ေတာ္တို႔က events ေတြကို html tags ေတြထဲမွာ သတ္မွတ္နိုင္ပါတယ္

Events နမူနာ
mouse ကိုႏွိပ္တဲ႔အခါ
webpage or image loading လုပ္တဲ႔အခါ
webpage ေပၚမွာ mouse ကို ေရြ႔တဲ႔အခါ
html form ထဲက input field ကို ေရြးတဲ႔အခါ
html form ကို submit လုပ္တဲ႔အခါ
keystroke ကိုနွိပ္တဲ႔အခါ

စတာေတြကို event လို႔ေခၚပါတယ္
မွတ္ခ်က္ ၊၊ event ေတြကိုပံုမွန္ဆိုရင္ေတာ႔ function နဲ႔ေပါင္းျပီး အသံုးျပဳေလ႔ရွိပါတယ္
ကၽြန္ေတာ္တို႔ ရဲ႕ function က သတ္မွတ္ထားတဲ႔ event ကို မေတြ႔မခ်င္း  အလုပ္လုပ္မွာမဟုတ္ပါဘူး

onLoad and onUnload
သူကေတာ႔  user က page ကို loading or leave  လုပ္တဲ႔အခါမွာသံုးပါတယ္
onload event ကိုေတာ႔ webpage ရဲ႕ infomation ေပၚမွာမူတည္ျပီးသင္႔ေတာ္တဲ႔ version နဲ႔ loading လုပ္ပါတယ္ျပီးေတာ႔
visitor browser type ေတြ version ေတြကို စစ္တဲ႔အခါမွာ onload ကိုသံုးပါတယ္အျခားဟာေတြလည္းသံုးလို႔ရပါတယ္
အဲဒီ event ႏွစ္ခုစလံုးက cookies နဲ႔လည္းဆက္စပ္ေနပါတယ္ user က webpage ကို ၀င္ထြက္လုပ္တဲ႔အခါမွာ ထားသင္႔ပါတယ္
ဥပမာေျပာရရင္ ကၽြန္ေတာ္က webpage ကိုလာတဲ႔ user ကုိ ပထမဆံုး user ရဲ႕ နာမည္ကိုေမးတာမ်ိဳးကို popup နဲ႔ထားသလိုမ်ိဳးပါ
ျပီးေတာ႔ ဒီ name ကို cookie ထဲမွာ သိမ္းထားမွာပါ ေနာက္တစ္ခ်ိန္ user က webpage ကိုလာတယ္ဆိုရင္ေတာ႔ အရင္လိုမေမးေတာ႔ဘဲ
cookie ထဲ႔႕ user name နဲ႔ ေအာက္ကလိုမ်ိဳး popup ေလးတက္လာသလိုေပါ႔ Welcome our Friend!

onFocus,onBlur and onChange
သူကေတာ႔ form fields ကို validation လုပ္တာနဲ႔ေပါင္းစပ္ျပီးမၾကာခဏအသံုးျပဳၾကပါတယ္
ေအာက္က example မွာေတာ႔ onChange event ကိုဘယ္လိုသံုးရတယ္ဆိုတာနမူနာျပထားပါတယ္
field ရဲ႕ အေၾကာင္းရာကို user က ခ်ိန္းတဲ႔အခါမွာ checkEmail() function ကိုျပန္ေခၚသံုးထားပါတယ္
<input type="text" size="30" id="email" onchange="checkEmail()">

onSubmit
တူကေတာ႔ submitting မလုပ္ခင္ form fields အားလံုးကို အခ်က္လက္မွန္လားဆိုတာကို စစ္တဲ႔အခါမွာအသံုးျပဳပါတယ္
ေအာက္မွာက နမူနာသံုးျပထားတာပါ user က form ထဲ႔က submit button ကို နွိပ္တဲ႔အခါမွာ checkForm() function ကိုျပန္ေခၚထားပါတယ္
တစ္ကယ္လို႔  field value က accepted မရဘူးဆိုရင္ submit က cancelled ျဖစ္သြားပါမယ္ဒီေတာ႔ checkForm() က true or false လို႔ return ျပန္ပါတယ္
အကယ္ရွ္ return ture လိုျပန္ရင္ form ကို submit လုပ္ပါလိမ္႔မယ္,မဟုတ္ဘူးဆိုရင္ေတာ႔ submit က cancelled ျဖစ္တြားပါဘီ
<form method="post" action="text.html" onsubmit="return checkForm()">

onMouseOver and onMouseOut
သူကေတာ႔ animate လုပ္တဲ႔ပံုစံေတြလိုမ်ိဳးမွာအသံုးမ်ားပါတယ္
ေအာက္မွာကေတာ႔ onMouseOver event နမူနာပါ  onmouseOver event ကိုေတြ႔တဲ႔အခါမွာ alert box ေလးတက္လာမွာပါ
<a href="http://cyberoot.blogspot.com" onmouseover="alert('I am onMouseOver event'); return false">Cyberoot</a>


Thanks for Reading
Written by Cyberoot

No comments:

Post a Comment

Thanks for your comments
Welcome from cyberoot