Javascript 4 PDF

JavaScript အားအသံုးျပဳျခင္း Programmingknowledge.blogspot.
com
JavaScript အားအသံုးျပဳျခင္း
Event Handlers in Javascript
Event handler ေတြဟာ web development အပိုင္းမွာ အရမ္းကို အသံုးှင္ပါတရ္။ Event
Handler ေတြဟာ javascript code ေတြျဖစ္ၿပီး script tag ထဲမွာ သံုးနဳိင္သလို၊ script tag ထဲမေရးပဲလဲ
သံုးနိုင္ပါတရ္။ အခု ပထမဆံုး Event Handler ဘရ္နွစ္မ်ိဳး ရွိတရ္ဆိုတာေလးကို အရင္ ေလ့လာ
ၾကည္႔ၾကရေအာင္။
အမ်ိဳးအစားေတြနဲ႔ သေဘာတရားကို နားလည္ၿပီဆိုရင္ေတာ့ က်ေနာ္တုိ႔ ပထမဦးဆံုး အေနနဲ႔ syntax

ပံုစံေလးကို အရင္ေလ့လာၾကည္႔မရ္။
Name of handler= “javascript code”
Handler ရဲ႔ အသံုးျပဳပံုကိုလဲ သိၿပီ ဆိုရင္ေတာ့ အခု က်ေနာ္တို႔ onClick handler အေၾကာင္းကို
အရင္ေဆြးေႏြးၾကတာေပါ့။
OnClick Handler
OnClick ရဲ႕ သေဘာ သဘာှကေတာ့ ကလစ္တခ်က္နွိပ္လိုက္တာနဲ႔ မိမိ ေဖာ္ျပေစခ်င္တဲ့
action, အေၾကာင္းအရာ၊ အခ်က္အလက္၊… စတာေလးေတြကို ေဖာ္ျပေစခ်င္တဲ့ အခါမ်ိဳးမွာ
အသံုးျပဳပါတရ္။ အခု ပထမဆံုး onClick handler ကို html tag အတြင္းမွာ အလြတ္ သံုးပံုေလးကို
ေလ့လာၾကည္႔ၾကရေအာင္ ..
<html>
<head><title>onClick</title></head>
<body>
<a href="http://programmingknowledge.blogspot.com" onClick="alert('မဂၤလာပါဗ်ာ။ မိတ္ေဆြ၊ ညီအစ္ကို၊
ေမာင္နွမအေပါင္း အၿမဲတမ္း ေပ်ာ္ရႊင္ ခ်မ္းေျမ႔နုိင္ပါေစ')">Programming Knowledge</a>
</body>
</html>
Result:
ေလ့လာျခင္းျဖင့္ ကၽြန္ုပ္တို႔၏ မနက္ျဖန္မ်ားကို ျဖတ္သန္းၾကပါစို႔ ….။

JavaScript အားအသံုးျပဳျခင္း Programmingknowledge.blogspot.com
အေပၚက ကုဒ္ေလးကို run ၾကည္႔လုိက္ပါ။ Link တခုတည္း ခ်ိတ္ထားတဲ့အတြက္ က်ေနာ္တို႔ webpage

မွာ programming knowledge ဆိုတဲ့ link တခုပဲ ရွိေနပါလိမ့္မရ္။ က်ေနာ္တုိ႔က link မွာ onClick နဲ႔
တြဲထားတဲ့အတြက္ programming knowledge ဆိုတဲ့ လင့္ကို နွိပ္လိုက္ရင္ က်ေနာ္တို႔ အထပ္ပါ
ပံုအတုိင္း alert messag တခု တတ္လာပါလိမ့္မရ္။ နားလည္မရ္ထင္ပါတရ္။ တခ်ိဳ႕ website ေတြမွာ ဒီလို
message ေလးေတြ သံုးထားတာ ေတြ႔ဖူးၾကပါလိမ့္မရ္။
Event handler ေတြကို Object ေတြနဲ႔လဲ ေပါင္းဆက္အသံုးျပဳနုိင္ပါတရ္။ အခု onClick handler
နဲ႔ Document object တို႔ ေပါင္းဆက္အသံုးျပဳပံုေလးကို ေလ့လာၾကည္႔ၾကမရ္။
<html>
<head><title>onClick with Document Object</title></head>
<body>
<fieldset><legend>BACKGROUND COLOR</legend>
<form name="Background Color">
<input type="radio" name="LB" onclick="document.bgColor='lightblue'">Lightblue<br>
<input type="radio" name="LY" onclick="document.bgColor='lightyellow'">Lightyellow<br>
<input type="radio" name="LG" onclick="document.bgColor='lightgreen'">Lightgreen
</form></fieldset><p>
<fieldset><legend>FONT COLOR</legend>
<form name="Font Color">
<input type="radio" name="blue" onclick="document.fgColor='blue'">blue<br>
<input type="radio" name="yellow" onclick="document.fgColor='yellow'">yellow<br>
<input type="radio" name="green" onclick="document.fgColor='green'">green
</form></fieldset>
</body>
</html>
Result:
ဒါကေတာ့ code ကို run လိုက္တဲ့အခါ ေပၚလာမဲ့ ပံုစံပါ။ ကုဒ္ကို ၾကည္႔လိုက္ပါ။ က်ေနာ္တို႔ Document
Object ထဲကမွ bgColor=“…” method နဲ႔ fgColor=“…” method ကို အသံုးျပဳထားပါတရ္။ Document

Object အေၾကာင္းကို အက်ယ္မရွင္းခဲ့ေသးေတာ့ ဒီ method ေတြကို နားလည္အံုးမရ္ မထင္ပါဘူး။

အေပၚေလ့က်င့္ခန္းေတြမွာေတာ့ က်ေနာ္ Document Object ျဖစ္တဲ့ write( ), writeln( ) method
နွစ္ခုကို အသံုးျပဳဖူးပါတရ္။ အခု ဒီေလ့က်င့္ခန္းေလးမွာပဲ Document Object ထဲမွာ ရွိတဲ့ Properties
ေတြ method ေလးေတြကို ၾကည္႔လိုက္ပါေတာ့ဗ်ာ။
ကဲ အခု fgColor နဲ႔ bgColor အေၾကာင္းကို နားလည္သြားၿပီထင္ပါတရ္။ အေပၚက ေလ့က်င့္ခန္းမွာ

ၾကည္႔လိုက္ပါ။ က်ေနာ္တုိ႔ BgColor ကို အသံုးျပဳၿပီး Background color သံုးခုကို Radio button
ေလးေတြနဲ႔ user စိတ္တိုင္းၾက ေရြးခ်ယ္ခြင့္ေပးထားပါတရ္ ။ ဒီလိုပါပဲ ဒုတိယ form မွာေတာ့ FgColor
ကိုအသံုးၿပဳၿပီး Foreground color သံုးခုကို radio button ေလးေတြနဲ႔ user စိတ္တိုင္းက် ေရြးခ်ယ္ခြင့္
ေပးထားပါတရ္။ အားလံုးက OnClick handler ေလးေတြနဲ႔ ထိန္းခ်ဳပ္ထားတဲ့အတြက္ က်ေနာ္တို႔
နွစ္သက္ရာ color ကိုေရြးလိုက္တိုင္း user interface result က ေျပာင္းလဲေနပါလိမ့္မရ္။ အခု က်ေနာ္
စာဖတ္သူ ကြဲကြဲျပားျပား နားလည္သြားေအာင္ BgColor မွာ Lightgreen ကိုေရြးေပးထားၿပီး
Foreground Color ကိုေတာ့ Blue ေရးျပထားတာပါတရ္။ result ကို ၾကည္႔လုိက္ပါအံုးဗ်ာ။
ဒီေလာက္ဆိုရင္ေတာ့ က်ေနာ္တို႔ event handler ေတြကို html tag ထဲမွာ အလြတ္ဆြဲသံုးတာကို

နားလည္ေလာက္ၿပီ ထင္ပါတရ္။ မိမိ နွစ္သက္၊ ဥာဏ္ရွိသလို အသံုးျပဳနုိင္ပါတရ္။ Html ကုဒ္
အသံုးျပဳပံုေတြကိုေတာ့ က်ေနာ္ Html အားအသံုးျပဳျခင္း ေလ့က်င့္ခန္းေတြမွာ ေဆြးေႏြးထားတာေတြ
ရွိပါတရ္။ မသံုးတတ္ေသးသူမ်ား html ေလ့က်င့္ခန္းေတြကို ေလ့လာၾကည္႔ၾကေပါ့ဗ်ာ။
အခု onClick handler ရဲ႕ ေနာက္ဆံုး ေလ့က်င့္ခန္းေလးအေနနဲ႔ <script> tag ထဲက action
result ေတြကို onClick နဲ႔ ဘရ္လို ဆြဲသံုးနုိင္မလဲ ဆိုတာကို ရွင္းျပပါ့မရ္။ ေလ့လာၾကည္႔လိုက္
ၾကပါအံုးဗ်ာ။

<html>
<head><title>onClick with external script </title></head>
<body>
<script>
function information( )
{
window.alert('Welcome to Programming Knowledge. Thank you for visit to.... ');
window.location="http://programmingknowledge.blogspot.com";
}
</script>
မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္နွမအေပါင္း မဂၤလာပါ။ က်ေနာ္ဆိုဒ္ေလးကို သြားခ်င္ရင္ေတာ့ ေအာက္က button ေလးကို
ကလစ္ ေပးလုိက္ပါ။
<form>
<input type="button" name="test" value="Click Here" onclick="information( )">
</form>
</body>
</html>
Result:
ဒါကေတာ့ က်ေနာ္တို႔ code ကို run လိုက္တာနဲ႔ ျမင္ရမဲ့ ျမင္ကြင္းပါ။ က်ေနာ္တုိ႔ Button action ထဲမွာ
onClick ကို information script နဲ႔ ခ်ိတ္ထားတ့ဲအတြက္ေၾကာင့္ button ကို နွိပ္လုိက္ရင္ေတာ့
information function ထဲက statement ေတြ စတင္အလုပ္လုပ္ပါၿပီး ပထမဆံုး ျမင္ေတြ႔ရတာက alert
message ပါ။ ၾကည္႔လိုက္ပါအံုးဗ်ာ။
ဒီမွာ message ကို ဖတ္ၿပီး ok ကို နွိပ္လုိက္ၿပီဆိုရင္ေတာ့ information function ထဲက ဒုတိယ
statement ျဖစ္တဲ့ window.location အလုပ္လုပ္ကို လုပ္ပါၿပီး။ ဒီေတာ့ က်ေနာ္တို႔ location မွာ
ညႊန္းထားတဲ့ webpage ၾကီး ေပၚလာပါလိမ့္မရ္။ ၾကည္႔လိုက္ပါအံုး။

ဒီေလာက္ဆိုရင္တာ့ က်ေနာ္တုိ႔ Javascript မွာ onClick ရဲ႕ အလုပ္လုပ္ကို နားလည္ၿပီ ထင္ပါတရ္။

က်ေနာ္တို႔ ေရွ႕ဆက္ၾကပါအံုးစို႔ဗ်ာ။
ဒီေန႔ေတာ့ ဒီေလာက္နဲ႔ပဲ နားၾကအံုးစို႔ဗ်ာ။ အားလံုးက အေျခခံေလးေတြ ျဖစ္လို႔

စတင္ေလ့လာသူမ်ား အတြက္သာ ရည္ရြယ္ပါတရ္။ ေနာက္ေန႔ အပိုင္းေလးမွာေတာ့ Javascript ရဲ႕
Event handlers ထဲက ေလ့က်င့္ခန္းေလးေတြျဖစ္တဲ့ onload, onMouseover, onMouseout,…
အပိုင္းေလးေတြကို ေဆြးေႏြးသြားပါ့မရ္။
ဒါကေတာ့ Javascrip အားအသံုးျပဳျခင္း အပိုင္း(4)ေလးပါ။ အားလံုးက အေျခခံေလးေတြျဖစ္လို႔
စတင္ေလ့လာသူမ်ား အတြက္သာ ရည္ရြယ္ပါတရ္။ အခုမွ စဖတ္မိတဲ့ မိတ္ေဆြ၊ ညီအစ္ကို၊
ေမာင္နွမမ်ားအေနနဲ႔ ေရွ႔က ပို႔စ္ေလးကို အရင္ ဖတ္ေစခ်င္ပါတရ္။ က်ေနာ့္ မွားယြင္းတင္ျပမႈမ်ား
ရွိရင္လဲ နားလည္ေပးၾကေပါ့ဗ်ာ။ က်ေနာ္ ရည္ရြယ္ခ်က္ကေတာ့ အေျခခံေလးေတြကို ျမန္မာလို
ဖတ္ရႈျခင္းအားျဖင့္ လွ်င္ျမန္စြာ နားလည္ သြားနုိင္ၿပီး ဒီထပ္ ျမင့္ေသာ တျခားေသာ နယ္ပယ္မ်ားကို
ကူးသြားနုိင္ေအာင္ ပါ။ မိတ္ေဆြအေပါင္း ေလ့လာျခင္းျဖင့္ ေက်နပ္နုိင္ၾကပါေစ။
Tay Zar Lin

Koyinmaung007@gmail.com
Programmingknowledge.blogspot.com

Javascript 4 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript 4 PDF

Uploaded by

Copyright:

Available Formats

JavaScript အားအသံုးျပဳျခင္း Programmingknowledge.blogspot.

အမ်ိဳးအစားေတြနဲ႔ သေဘာတရားကို နားလည္ၿပီဆိုရင္ေတာ့ က်ေနာ္တုိ႔ ပထမဦးဆံုး အေနနဲ႔ syntax

ေလ့လာျခင္းျဖင့္ ကၽြန္ုပ္တို႔၏ မနက္ျဖန္မ်ားကို ျဖတ္သန္းၾကပါစို႔ ….။

အေပၚက ကုဒ္ေလးကို run ၾကည္႔လုိက္ပါ။ Link တခုတည္း ခ်ိတ္ထားတဲ့အတြက္ က်ေနာ္တို႔ webpage

ေလ့လာျခင္းျဖင့္ ကၽြန္ုပ္တို႔၏ မနက္ျဖန္မ်ားကို ျဖတ္သန္းၾကပါစို႔ ….။

Object အေၾကာင္းကို အက်ယ္မရွင္းခဲ့ေသးေတာ့ ဒီ method ေတြကို နားလည္အံုးမရ္ မထင္ပါဘူး။

ကဲ အခု fgColor နဲ႔ bgColor အေၾကာင္းကို နားလည္သြားၿပီထင္ပါတရ္။ အေပၚက ေလ့က်င့္ခန္းမွာ

ဒီေလာက္ဆိုရင္ေတာ့ က်ေနာ္တို႔ event handler ေတြကို html tag ထဲမွာ အလြတ္ဆြဲသံုးတာကို

ေလ့လာျခင္းျဖင့္ ကၽြန္ုပ္တို႔၏ မနက္ျဖန္မ်ားကို ျဖတ္သန္းၾကပါစို႔ ….။

ေလ့လာျခင္းျဖင့္ ကၽြန္ုပ္တို႔၏ မနက္ျဖန္မ်ားကို ျဖတ္သန္းၾကပါစို႔ ….။

ဒီေလာက္ဆိုရင္တာ့ က်ေနာ္တုိ႔ Javascript မွာ onClick ရဲ႕ အလုပ္လုပ္ကို နားလည္ၿပီ ထင္ပါတရ္။

ဒီေန႔ေတာ့ ဒီေလာက္နဲ႔ပဲ နားၾကအံုးစို႔ဗ်ာ။ အားလံုးက အေျခခံေလးေတြ ျဖစ္လို႔

Tay Zar Lin

ေလ့လာျခင္းျဖင့္ ကၽြန္ုပ္တို႔၏ မနက္ျဖန္မ်ားကို ျဖတ္သန္းၾကပါစို႔ ….။

You might also like