Wednesday, August 15, 2012

Javascript Module 12

Javascript Functions
function တစ္ခုဟာ event ေတြေတြ႔တဲ႔အခါ ဒါမဟုတ္ရင္ function ကိုျပန္ေခၚသံုးတဲ႔အခါ အလုပ္လုပ္ပါတယ္
Page loading လုပ္တဲ႔အခါ script file ေတြကိုအလုပ္တစ္ခါတည္းမလုပ္ေအာင္ brower က function နဲ႔ ထိန္းထားပါတယ္
အလုပ္လုပ္ေစခ်င္ရင္ေတာ႔ function ထဲမွာ လုပ္ေစခ်င္တဲ႔ comand ကုိသြားထည္႔ေပးရမွာပါ

function ဆိုတာ script execute လုပ္တဲ႔ set တစ္ခုပါ ကၽြန္ေတာ္တို႔လုပ္ခ်င္တဲ႔ အခါမွာ function ေတြကိုလိုအပ္သလိုျပန္ေခၚသံုးနိုင္ပါတယ္
function script ထည္႔ထားတဲ႔ page ဒါမဟုတ္ရင္ js external link ခ်ိတ္ထားတဲ႔ ဘယ္ page မွာမဆိုေခၚသံုးနိုင္ပါတယ္
document ရဲ႕<head> နဲ႔ <body> ၾကားမွာ function ေတြကိုသတ္မွတ္ျပီးေရးနိုင္ပါတယ္
ပိုေကာင္းတာကေတာ႔ သူကိုေခၚမသံုးခင္ brower loading လုပ္တဲ႔အခါ အဆင္သင္႔ျဖစ္ေအာင္ head section ထဲမွာေရးတာကပိုသင္႔ေတာ္ပါတယ္

Function တစ္ခုသတ္မွတ္ျခင္း
function myfunction( var1,var2,var3,.. varN)
{
    //execute code ကၽြန္ေတာ္တို႔အလုပ္လုပ္မယ္႔ script ေရးရန္
}

myfunction  ထဲမွာေရးထားတဲ႔ var1,var2 ဆိုတာေတြကို parameters လိုေခၚပါတယ္ဗ်ာ မသိရင္မွတ္ထားေနာ္
ကၽြန္ေတာ္လည္းအရင္က ဘာေတြမွန္းလဲမသိဘူးဆိုျပီး တိုင္ပတ္ေနတာ
{ } ကေတာ႔ function ရဲ႕ start နဲ႔ end ပဲ႔ျဖစ္ပါတယ္
မွတ္ရန္ ။     ။ parameter မရွိတဲ႔ function ဆိုရင္ေတာ႔ parentheses() ေလာက္ပဲ႔ function name အေနာက္မွာထည္႔ရမွာပါ
function ကိုေတာ႔ lowercase နဲ႔ေရးရပါတယ္ ဒါမဟုတ္ရင္ေတာ႔ error ေပါ႔ လက္ေဆာင္ေပးတယ္သေဘာထားလိုက္ပါ
ျပန္ေခၚမယ္ဆိုုရင္လည္း function name ရဲ႕ capitals ေတြကိုေသခ်ာေအာင္ေရးေပးရမွာပါ

ဥပမာ
<html>
<head>
<script type="text/javascript">
function greet()
{
alert("Hello World");
}
</script>
<body>
<form>
<input type="button" value="Show message" onclick="greet()"/>
</form>
</body>
</html>

ရွင္းလင္းခ်က္
line 4 => greet ဆိုတဲ႔ နာမည္နဲ႔ function တစ္ခုေရးပါတယ္
line 6 => Hello World ကို alert နဲ႔ output ထုတ္ျပပါတယ္
line 12=> greet() ဆိုတဲ႔ function ကို button သံုးျပီး onclick နဲ႔ ျပန္ေခၚျပီးအလုပ္လုပ္ေစမွာပါ
ဒီေနရာမွာနည္းနည္းေလးေျပာျပခ်င္ပါတယ္
ပံုမွန္ function မသံုးပဲ႔ alert ကိုသံုးမယ္ဆိုရင္ brower loading လုပ္တာနဲ႔ ျပမွာပါ
အခုေတာ႔ loading လုပ္ျပီးမွ function ကို alert ျပထားပါတယ္

ေနာက္တစ္ခု
Return Statement
return statement ကိုေတာ႔ function ကေန return ျပန္လာတဲ႔ value ကိုသတ္မွတ္ျပီးအသံုးျပဳတာပါ
ဒါဆိုရင္ ေအာက္က ဥပမာေလးကိုၾကည္႔လုိက္ပါ

<html>
<head>
<script type="text/javascript">
function multiple(a,b)
{
    return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(multiple(2,5));
</script>
</body>
</html>

fmultiple ဆိုတဲ႔ function name ထဲမွာေရးထားတဲ႔ a နဲ႔ b က parameter ပါ
သူကို return ျပန္ျပီး * ေျမွာက္ထားပါတယ္
ျပီးေတာ႔ document.write ထဲ႔မွာ function ကိုျပန္ေခၚသံုးျပီး value ေပးထားေတာ႔
a က 2 ျဖစ္ျပီး b ကေတာ႔ 5 ျဖစ္ပါတယ္ a*b = 2*5 = 10
ကၽြန္ေတာ္တို႔ output ကေတာ႔ 10 ရပါတယ္ ဟီး

Javascript variable ရဲ႕ lifetime
တစ္ကယ္လို႔ function ထဲမွာ var ကိုသံုးျပီး variable တစ္ခုကိုေၾကျငာခဲ႔မယ္ဆိုရင္
အဲဒီ function က ပဲ႔ variable ကို access လုပ္နိုင္မွာပါ  function ျပီးသြားတဲ႔အခါမွာေတာ႔
variable ကအသံုးမ၀င္ေတာ႔ပါဘူး ဒီလို variable ေတြကို local variable လို႔ေခၚပါတယ္
ဒါေၾကာင္႔ မတူညီတဲ႔ function ေတြထဲမွာ တူညီတဲ႔ variable ေတြပါတတ္ပါတယ္

ဒါမဟုတ္ function ရဲ႕ အျပင္ဘက္မွာ variable ကိုေၾကျငာရင္ေတာ႔ page ထဲက function အားလံုးက ေခၚသံုးလို႔ရပါတယ္
variable စတင္ခ်ိန္ကေတာ႔ var ေၾကျငာတဲ႔အခ်ိန္ ပဲ႔ျဖစ္ျပီး page ကို ပိတ္လိုက္တဲ႔အခ်ိန္မွာေတာ႔ variable ကend ျဖစ္သြားမွာပါ

အဆင္ေျပၾကပါေစ..
Thanks for Reading..
Written by cyberoot1@gmail.com
www.cyberoot.blogspot.com

No comments:

Post a Comment

Thanks for your comments
Welcome from cyberoot