Sunday 2 June 2013

M-JavaScript Lesson 7


ေရွ႕အခန္းမွာ function ကို တည္ေဆာက္ပံုန႔ဲေခၚယူ အသံုးျပဳပံုကို သင္ေပးခဲ့ပါတယ္၊ ဒီအခန္းမွာေတာ့ ေရွ႕အခန္းက ကုတ္ကိုပဲ button ေလးကိုတစ္ခ်က္ႏွိပ္ျပီး function ကိုေခၚတဲ့ နည္းကို ေလ့လာပါမယ္၊ HTML မွာ Form ကိုေလ့လာခဲ့ျပီးပါပီ၊ အခု Form ကိုအသံုးခ်ျပီး button တစ္ခုတည္ေဆာက္မယ္၊ အဲ့ဒီ့ button ေပၚမွာ ခလစ္ႏွိပ္ရင္ function ရဲ့ အလုပ္ျဖစ္တဲ့ alert box ေပၚလာေအာင္ function ကိုေခၚမယ့္ နာမည္ကို button မွာထည့္မယ္၊ ေအာက္မွာ form ကိုထည့္ေဆာက္မယ္၊ (HTML form သံုးမွာျဖစ္တဲ့အတြက္ နားမည္ေသးရင္ html မတတ္ေသးရင္ HTML သင္ခန္းစာကိုသြား)
<form>
<input type= “button” value= “touch me” onclick =”fonky( );”>
</form>
အထက္က လို HTML form ကိုတည္ေဆာက္ျပီရင္ ေနာက္ဆံုးမွာ JavaScript ရဲ့ onclcik method ကို သံုးမယ္၊ onclick ရဲ့တန္ဖိုးက fonky( ); ပါ၊ Fonky( ); က function ကိုေခၚတယ္ဆိုတာေတာ့ သိျပီးပီေနာ္၊ ဒါဆိုရင္ အေရွ႕ခန္းမွာတည္ေဆာက္ခဲ့တဲ့ကုတ္က ေအာက္ပါအတိုင္းေျပာင္းသြားမယ္၊
အထက္က ကုတ္ကို Run ၾကည့္ရင္ေတာ့ ခလုပ္ေလးေပးလာမယ္၊ အဲ့ဒီ့ ခလုပ္ေလးကို ႏွိပ္လိုက္ရင္ function ကိုေခၚတာျဖစ္လို႔ That look goofy ဆိုတဲ့စာလံုးေပၚလာမယ္၊
HTML Form ထဲမွာ Onclick သံုးျပီး Onclick ရဲ့ တန္ဖိုးကို function ကိုေခၚမယ့္ fonky( ); လို႔ ေပးထားတာကိုသတိျပဳပါ၊
ေနာက္ထပ္ တစ္ဆင့္အေနနဲ႔ Parameter လို႔ေခၚတဲ့ ဂြင္းစ ဂြင္းပိတ္ထဲမွာထည့္ရမယ့္ ကုတ္အေၾကာင္းကိုရွင္းျပမယ္၊ သူကေတာ့ ပံုမွန္အေျဖထုတ္မယ့္ Varaible ေတြကုိ သတင္းအခ်က္အလက္ေျပာင္းျပီးထုတ္လို႔ရေအာင္ကူညီေပးတယ္၊ ဥပမာ သင္က alert(“hello”) ဆိုတဲ့စာသားကို  function ရဲ့အလုပ္အေျဖစ္ထည့္ထားတယ္၊  ဒါဆိုရင္ function ကိုေခၚလတဲ့ အခါ အဲ့ဒီ့ function ရဲ့ အလုပ္ျဖစ္တဲ့ hello ကိုအေျဖမွာထုတ္ေပးမယ္၊ ေအာက္မွာၾကည့္ပါ၊
အထက္က ဥပမာက ေတာ့ သံုးျပီးသားပါ၊  ဒါေပမယ့္ အထက္က ဥပမာမွာ I am a function ေနာက္မွာ ေနာက္ထပ္ စာသားထပ္ထည့္ခ်င္တယ္၊ ထပ္ထည့္တဲ့အခါမွာလဲ ေခၚတဲ့ function ေပၚမူတည္ျပီးထည့္ခ်င္တယ္၊ ဒီလိုဆိုရင္ေတာ့ ေခၚတဲ့ Function ရဲ့ေနာက္က ေလးေထာင့္ကြက္ထဲမွာ သင္ထပ္ျဖည့္လိုတဲ့ အခ်က္အလက္ကို ထည့္လိုက္ပါ၊ ဆိုၾကပါစို႔ created by 72coder ဆိုတဲ့စာသားကိုထပ္ျဖည့္ခ်င္တယ္၊ ဒါဆိုရင္ အဲ့ဒီ့ စာသားကို  ေခၚမယ့္ function ရဲ့ေနာက္က ဂြင္းစ ဂြင္းပိတ္ထဲထည့္မယ္၊ ေအာက္မွာၾကည့္ပါ၊
bookie (“created by 72coder”); ထည့္ရတာ၊ ေအာက္က ဥပမာကိုၾကည့္ပါ၊
အထက္က လို ထပ္ျဖည့္ခ်င္တဲ့ function ေခၚတဲ့ ကုတ္ထဲကိုထည့္ျပီးရင္ျဖင့္ ေနာက္တစ္ဆင့္အေနနဲ႔ အဲ့ဒီ့ စာသားကို အေပၚက function bookie ( ) ရွိ ဂြင္းစ ဂြင္းပိတ္ထဲကို လွမ္းပို႔မယ္၊ (passing လုပ္တယ္လုိ႔ေခၚတယ္)၊ ဘယ္လို passing လုပ္မလဲ ဘယ္လိုမွ အေထြအထူးလုပ္စရာမလိုဘူး၊ function bookie ( ) ေနာက္က ဂြင္းစ ဂြင္းပိတ္ထဲမွာ သင္သတ္မွတ္လိုတဲ့ အကၡရာကိုထည့္လိုက္ရံုပဲ၊  အခု ဥပမာ အေနနဲ႔ x လို႔ထည့္လိုက္၊  ဒါဆိုရင္ x ရဲ့တန္ဖိုးက ေအာက္က function ကိုေခၚဖို႔ အတြက္သံုးတဲ့ bookie ေနာက္က ဂြင္းစ ဂြင္းပိတ္ထဲမွာရွိတဲ့ တန္ဖိုး ျဖစ္သြားမယ္၊ Variable အသစ္သတ္မွတ္သလိုပါပဲ၊ အေပၚက x ရဲ့တန္ဖိုးက ေအာက္က bookie ေနာက္ရွိ ဂြင္းစ ဂြင္းပိတ္ထဲက တန္ဖိုးျဖစ္သြားတာပါ၊
အထက္က အတိုင္း  function bookie (x) ဆိုျပီး ေအာက္က function ထဲက တန္ဖိုးကို x က လက္လြဲယူျပီးေနာက္မွာေတာ့ အဲ့ဒီ့ x ကိုသံုးျပီး အေျဖထုတ္မယ္၊ အေျဖထုတ္နည္းကေတာ့ အေရွ႕က သင္ခန္းစာေတြမွာ သင္ခဲ့တဲ့ အတိုင္း adding sign ကိုသံုးမယ္၊ ေအာက္မွာၾကည့္ပါ၊
အထက္က ဥပမာကိုေသခ်ာေလ့လာပါ၊ bookie ေနာက္က ဂြင္းစ ဂြင္းပိတ္ထဲမွာရွိတဲ့ created by 72coder ဆိုတဲ့ စာသားကို အေပၚက function bookie ရဲ့ေနာက္က x  ကို လွမ္းျပီး လြဲေပးတာကိုေတာ့ passing လုပ္တာလို႔ေခၚပါတယ္၊ ေနာက္ပိုင္းလက္ေတြ႔သံုးလာရင္ တကယ့္ကိုအသံုး၀င္တာကိုသေလာေပါက္လာပါမယ္၊ ေအာက္မွာဥပမာ ၾကည့္ပါ၊

အထက္က ကုတ္မွာ function ကိုေခၚတဲ့ bookie ရဲ့ေနာက္မွာ တန္ဖိုး အမ်ိဳးမ်ိဳး ထားတယ္၊ အဲ့ဒီ့ တန္ဖိုးေတြကို အထက္က function bookie ရဲ့ေနာက္က ဂြင္းစ ဂြင္းပိတ္ထဲကိုပို႔ေပးတယ္၊ (passing လုပ္တယ္) အဲ့ဒီ့အေျဖကို alert( ) ေနာက္ရွိ ဂြင္းစ ဂြင္းပိတ္ထဲမွာ ရွိတဲ့ တန္ဖိုးနဲ႔ တြဲျပီး အေျဖထုတ္ေပးတယ္၊ အထက္မွာေတာ့ တန္ဖိုး ေလးခုကိုလြဲေပးတာျဖစ္တဲ့အတြက္ အေျဖေလးခုကိုထုတ္ေပးပါတယ္၊့

                                             .............မူရင္းလင့္.........
ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..

<<<မန္ဘာ၀င္ျပီး...Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္>>>
ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။
လယ္တီေျမသား www.ledimyethar.com
ဘေလာ့ခရီးသည္ http://aungsanmks.blogspot.com/
ဓမၼႏွင့္စာေပနန္းေတာ္ http://ninilayy.blogspot.com/

0 comments:

Post a Comment