Simply JavaScript 1

Goo GooAugust 24, 2010Javascript and Ajax

Web Development မှာ JavaScript ကတော့ မပါမဖြစ်ပါ။ အခုနောက်ပိုင်းမှာ jQuery, MooTools စတဲ့ JavaScript Library တွေ သုံးပြီး Rich Internet Application တွေ ဖန်တီးလာကြပါတယ်။ ဒီ JavaScript Library တွေကို လေ့လာဖို့ Raw JavaScript ကို သိထားဖို့တော့ လိုအပ်မယ်လို့ ထင်ပါတယ်။ ဒီကျူတိုရီရယ်မှာ Raw JavaScript ရဲ့ syntax နဲ့ usage ကိုပဲ ပြောသွားမှာ ဖြစ်ပါတယ်။ တကယ့် လက်တွေ အသုံးတွေကိုတော့ JS Library တွေမှာမှပဲ သုံးပြပါတော့မယ်။

JavaScript လေ့လာဖို့အတွက် ပြင်ဆင်ရပါမယ်။ အောက်ပါ Software တွေ လိုအပ်ပါမယ်။ သွင်းထားပေးပါ။

ထုံးစံ အတိုင်း Hello, World! program ပဲ စရေးကြပါမယ်။

<!DOCTYPE html>
<html>
 <head lang="en">
 <meta charset=utf-8 />
 <title>index</title>
 <script type="text/javascript">
 alert("Hello, World!");
 </script>
 </head>
 <body>

 </body>
</html>

JavaScript code တွေကို script tag အဖွင့်၊ အပိတ် ကြားထဲမှာ ရေးပေးရပါတယ်။ အဖွင့် tag မှာ type=”text/javascript” attribute ထည့်ပေးရပါတယ်။ နောက် javascript statement တစ်ခုပီးတိုင်း semi-colon ( ; ) ပိတ်ပေးရပါတယ်။ အခု နောက်ပိုင်းမှာ page loading မြန်ဖို့အတွက် page ရဲ့ အောက်ဆုံး body အပိတ် tag ရဲ့ အပေါ်နားလေးမှာ ရေးကြပါတယ်။ လောလောဆယ်တော့ script တွေကို head ထဲမှာပဲ ရေးပါမယ်။ alert() function က သူ့ထဲမှာ ထည့်ပေးလိုက်တဲ့ string value ကို message box နဲ့ ထုတ်ပြပေးပါတယ်။ ဒီနေရာမှာတော့ Hello, World! လို့ ပြပေးသွားပါတယ်။ သဘော ပေါက်မယ် ထင်ပါတယ်။

အခု message box နဲ့ မပြပဲ browser မှာ ပြပါမယ်။ document object ရဲ့ write() method (function) ကို သုံးရပါတယ်။ (ဒီနေရာမှာ function နဲ့ method ရဲ့ အခေါ်အဝေါ်နဲ့ ပတ်သက်လို့ နည်းနည်းပြောချင်ပါတယ်။ အဲဒီ ၂ ခုက နာမည်ပဲ ကွဲပီး အလုပ်လုပ်ပုံကတော့ အတူတူပါပဲ။ ကျွန်တော် သိသလောက်ကတော့ Class တွေ Object တွေထဲ ရောက်သွားတဲ့ function တွေကို method လို့သုံးကြပါတယ်။ OOP language တွေဖြစ်တဲ့ C#, Java တို့မှာ Class အပြင်ရောက်နေတဲ့ function ရယ်လို့ မရှိပါဖူး။ ဒါကြောင့် အဲဒီ language တွေမှာ method လို့ပဲ သုံးပါတယ်။ တခြား language တွေမှာ Class ရဲ့ အပြင်မှာ function တွေ ရေးလို့ရပါတယ်။ အဲဒါတွေကိုတော့ ရိုးရိုး function လို့ပဲ ခေါ်ပါတယ်။)

စောစောက ဖိုင်မှာပဲ ပြင်ရေးလိုက်ပါ။

<script type="text/javascript">
 //alert("Hello, World!");
 document.write('Hello, World!');
</script>

JavaScript မှာ comment လုပ်ချင် double forward-slash ( // ) သုံးရပါတယ်။

ဒီတစ်ခါတော့ variable သုံးပါမယ်။ အရင်လိုင်းတွေ comment လုပ်ပီး အောက်က ဆက်ရေးပါ။

<script type="text/javascript">
var someVar = 'Hello, World!';
alert(someVar);
</script>

JavaScript မှာ variable ကြေငြာဖို့ အတွက် variable name ရဲ့ ရှေ့မှာ var ဆိုတဲ့ keyword ထည့်ပေးရပါတယ်။ variable တွေကို function ထဲ pass လုပ်တဲ့ အခါမှာ quote ထည့်ပေးဖို့ မလိုပါဖူး။ variable မှာ assign လုပ်ထားတဲ့ စာသားကို ပြောင်းတာနဲ့ message box မှာ လိုက်ပြောင်းသွားပါမယ်။ ပြောင်းပြီး စမ်းကြည့်ကြပါ။

ဒီတစ်ခါတော့ function သုံးပါမယ်။ function တစ်ခု ကြေငြာဖို့ function keyword, functionName(), { … } လိုပါမယ်။ function တစ်ခုကို call လိုက်ရင် သူ့ထဲမှာ ရှိတဲ့ code တွေ run ပေးပါတယ်။ ခဏခဏ ပြန်သုံးရတဲ့ code တွေကို function ထဲမှာ ရေးပြီး ပြန်ခေါ်သုံးတဲ့ အကျင့် လုပ်ထားပါ။

<script type="text/javascript">
 function doSomething() {
 alert('Hello, MMTuts Readers!');
 }
</script>

ဒီတိုင်း browser မှာ သွားကြည့်ရင် ဘာမှ ပေါ်မှာ မဟုတ်ပါဖူး။ ဒီအဆင့်က function create လုပ်တဲ့ အဆင့်ပဲရှိပါသေးတယ်။ သူ့ကို ပြန်ခေါ်သုံးရပါမယ်။ functionName(); လို့ ပြန်ခေါ်ရပါတယ်။ အောက်တစ်ကြောင်းမှာ doSomething(); ထည့်ဖြည့်ပီး စမ်းကြည့်ပါ။ alert() နေရာမှာ document.write(), variable တွေလဲ သုံးပီး စမ်းကြည့်ပါ။

ဒီတစ်ခါတော့ function ထဲမှာ parameter pass လုပ်ပီး ရေးပါမယ်။ parameter တွေကို function call မှာ pass လုပ်ပေးရပါတယ်။ function decleration မှာတော့ parameter လက်ခံဖို့ variable ထည့်ရေးပေးရပါတယ်။

<script type="text/javascript">
 function doSomething(name) {
 alert('Hello, ' + name);
 }
 doSomething('Goo');
</script>

ဒီနေရာမှာ ‘Hello, name’ လို့ သွားရေးရင် အဲဒီ quote ထဲက တစ်ကြောင်းလုံး string လို့ ယူသွားပါမယ်။ အဲဒီ အတွက် ‘Hello, ‘ ထိ တဖြတ်ဖြတ်ပီး + နဲ့ (variable) name ကို ပြန်ဆက်ပေးရပါတယ်။ + ကို string concatenation operator လို့ ခေါ်ပါတယ်။ variable pass လုပ်ပီးလဲ စမ်းကြည့်ပါ။

ဒီတစ်ခါတော့ console.log() function ကို လေ့လာကြည့်ပါမယ်။

<script type="text/javascript">
 function doSomething(name) {
 alert('Hello, ' + name);
 }
 var name = 'MMTuts';
 console.log('Goo');
</script>

ဒီနေရာမှာ console.log() function ထဲကို string တိုက်ရိုက် pass လုပ်ထားလို့ Goo လို့ ပြနေတာပါ။ (variable) name ကို pass လုပ်ရင် name ထဲမှာ ရှိနေတဲ့ တန်ဖိုးကို ပြပေးမှာပါ။ FireBug ကို ခေါ်ဖို့ FireFox ရဲ့ ညာဖက်အောက်ထောင့်က ပိုးဟပ်ပုံလေးကို ကလစ်လဲရပါတယ်။ Function key F12 ကို နှိပ်လဲရပါတယ်။ ကျွန်တော်တို့ တွက်ချက်မှုတွေလုပ်ပြီး variable ထဲကို ထည့်လိုက်တဲ့အခါ တန်ဖိုးတွေမှန်ရဲ့လား အဲလို log လုပ်ပီး စစ်လို့ရပါတယ်။ တော်တော် အသုံးဝင်ပါတယ်။ ပိုရှင်းအောင် နမူနာ တစ်ခုကြည့်ကြည့် ရအောင်…

<!DOCTYPE html>
<html>
 <head lang="en">
 <meta charset=utf-8 />
 <title>index</title>
 <script type="text/javascript">
 var heading = document.getElementById('heading');
 console.log(heading);
 </script>
 </head>
 <body>
 <h2 id="heading">This is H2 tag.</h2>
 </body>
</html>

var heading ထဲမှာ ကိုလိုချင်တဲ့ တန်ဖိုးရောက်ရဲ့လား ပြန်ကြည့်တာပါ။ ဒီနေရာမှာ log မှာ null လို့ ပြနေပါလိမ့်မယ်။ ဘာလို့လဲဆိုတော့ browser က code ကို ပေါ်ကနေ အောက် တစ်ကြောင်းချင်း ဘာသာပြန်ပါတယ်။ အဲတော့ getElementById(‘heading’) လိုင်းရောက်တဲ့ အချိန်မှာ အောက်က <h2 id=”heading”>.. လိုင်းကို မဖတ်ရသေးတဲ့တွက် var heading ထဲကို null ထည့်ပေးသွားပါတယ်။ script tag ကို heading လိုင်းရဲ့အောက် body အပိတ်ရဲ့ ပေါ်ကို ရွှေ့လိုက်ပါ။ ဒီလို ဖြစ်သွားပါမယ်။

getElementById() function က id ပေးထားတဲ့ element တွေကို လှမ်းယူလို့ရပါတယ်။ အဲလို လှမ်းယူပီးမှ style ပြောင်းတာတို့ စာသားထပ်ထည့်တာတို့ လုပ်လို့ရပါတယ်။ အခုလောလောဆယ်တော့ id=”heading” ပေးထားတဲ့ element ကိုပဲ ယူထားပါတယ်။ သူ့ထဲမှာ ပါသမျှ properties တွေကို FireBug ရဲ့ DOM tag မှာ ကြည့်နိုင်ပါတယ်။

DOM tag ရဲ့ အပေါ်ဆုံးမှာ heading ဆိုတဲ့ node ကိုတွေ့ပါလိမ့်မယ်။ အဲဒါ ကျနော်တို့ရဲ့ var heading ပါ။ heading node ကို ဖွင့်လိုက်ပါ။ သူ့ထဲမှာ ပါသမျှ property တွေ မြင်ရပါမယ်။ innerHTML property ရောက်တဲ့ထိ အောက်ဆင်းလိုက်ပါ။ အဲမှာ innerHTML ရဲ့ တန်ဖိုးက This is H2 tag. လို့ တွေ့ရမှာပါ။ အဲလို property တွေထဲမှာ ရှိတဲ့ တန်ဖိုးတွေကို property name သုံးပြီး ယူလို့ရပါတယ်။ console.log(heading.innerHTML) လို့ ပြင်ရေးလိုက်ပါမယ်။

ဒီတစ်ခါ property မှာ တန်ဖိုး assign လုပ်ကြည့်ပါမယ်။

<!DOCTYPE html>
<html>
 <head lang="en">
 <meta charset=utf-8 />
 <title>index</title>
 </head>
 <body>
 <h2 id="heading">This is H2 tag.</h2>
 <script type="text/javascript">
 var heading = document.getElementById('heading');
 heading.innerHTML = "Welcome from MMTuts!";
 </script>
 </body>
</html>

h2 tag ထဲက စာသားကို script နဲ့ လှမ်းပြောင်းတာပါ။

Element တွေကို tag name နဲ့လဲ access လုပ်လို့ ရပါသေးတယ်။ getElementsByTagName() function သုံးရမှာ ဖြစ်ပါတယ်။

<!DOCTYPE html>
<html>
 <head lang="en">
 <meta charset=utf-8 />
 <title>index</title>
 </head>
 <body>
 <h2 id="heading">This is H2 tag.</h2>
 <h2>This is another heading.</2>
 <script type="text/javascript">
 var heading = document.getElementsByTagName('h2');
 console.log(heading);
 </script>
 </body>
</html>

ရှိသမျှ h2 တွေကို arrary အနေနဲ့ return ပြန်လာပါတယ်။ ဒီနေရာမှာ element ၂ ခု return ပြန်လာပါတယ်။ array item တွေကို access လုပ်ဖို့အတွက် index ပြန်ညွှန်းရပါတယ်။ array index က 0 (zero) based ဖြစ်ပါတယ်။ အဲတော့ ပထမ item ကို index 0 နဲ့ညွှန်းပြီး ဒုတိယကို 1 …. အသီးသီး ပြန်ညွှန်းရပါတယ်။

<script type="text/javascript">
 var heading = document.getElementsByTagName('h2');
 console.log(heading[0].innerHTML);
 console.log(heading[1].innerHTML);
</script>

variable ထဲမထည့်ခင် functin ရဲ့ နောက်မှာ index ထည့်ပီးလဲ access လုပ်လို့ရပါတယ်။

<script type="text/javascript">
 var heading = document.getElementsByTagName('h2')[1].innerHTML;
 console.log(heading);
</script>

ဒီလိုလဲ တခါထဲ စာသားတန်းပြောင်းလို့ ရပါတယ်။

<script type="text/javascript">
 document.getElementsByTagName('h2')[1].innerHTML = 'Change from JavaScript!';
</script>

ဒီတစ်ခါ style တွေပြောင်းကြည့်မယ်။

<!DOCTYPE html>
<html>
 <head lang="en">
 <meta charset=utf-8 />
 <title>index</title>
 </head>
 <body>
 <h2 id="heading">This is H2 tag.</h2>
 <h2>This is another heading.</h2>
 <script type="text/javascript">
 document.getElementById('heading').style.color = 'red';
 </script>
 </body>
</html>

background color ပြောင်းချင်ရင်တော့ style.backgroundColor သုံးရပါမယ်။ ဒီနေရာမှာ CSS မှာလို background-color (dash) နဲ့ မဟုတ်ပါဖူး။ backgroundColor ပါ။ ပထမ word ရဲ့ အစ စာလုံးမှာ အသေးနဲ့ စပြီး ဒုတိယ၊ တတိယ word တွေရဲ့ အစ စာလုံးကို အကြီး ပြောင်းရေးတဲ့ ပုံစံနဲ့ပါ။ အဲဒါကို Camel Case naming လို့ ခေါ်ပါတယ်။ JavaScript မှာ camelCaseNaming ကို အဓိက သုံးပါတယ်။

အခု Scope အကြောင်း ပြောချင်ပါတယ်။ project ကြီးလာတဲ့အခါမှာ variable name တွေ ပေးတဲ့အခါ ထပ်လာတာမျိုး ရှိလာနိုင်ပါတယ်။ သူ့ scope နဲ့ သူရှိနေရင် နာမည်တွေ တူနေလဲ ပြဿနာမရှိတော့ပါဘူး။ နမူနာ ကြည့်ကြည့်ရအောင်..

<!DOCTYPE html>
<html>
 <head lang="en">
 <meta charset=utf-8 />
 <title>index</title>
 </head>
 <body>
 <h2 id="heading">This is H2 tag.</h2>
 <h2>This is another heading.</h2>
 <script type="text/javascript">
 function doSomething() {
 //alert('Hello, World!');
 var myVar = "Hello!";
 console.log('inside func: ' + myVar);
 }
 doSomething();
 console.log('outside func: ' + myVar);
 </script>
 </body>
</html>

function ထဲမှာ ကြော်ငြာထားတဲ့ variable ကို အပြင်ကနေ access လုပ်လို့မရပါဖူး။ အဲဒါကြောင့် အပြင်က log လုပ်ထားတဲ့လိုင်းမှာ myVar is not defined ဆိုပြီး ပြတာပါ။ var key word နဲ့ ကြေငြာတဲ့ variable တွေဟာ local scope မှာပဲ ရှိပါတယ် ်function ထဲမှာ ဆိုရင် function ထဲကပဲ access လုပ်လို့ရပါတယ်။ အပြင်က access လုပ်နိုင်ဖို့ဆိုရင် global variable အနေနဲ့ ကြေငြာပေးရပါမယ်။ global လုပ်ဖို့ var keyword ကို ဖြုတ်လိုက်ရုံပါပဲ။

global နဲ့ access မလုပ်ချင်ရင်တော့ function မှာ return ပြန်ပေးမှရပါမယ်။ function return ပြန်လာတာကို လက်ခံဖို့ var တစ်ခု ထပ်လိုပါမယ်။

<!DOCTYPE html>
<html>
 <head lang="en">
 <meta charset=utf-8 />
 <title>index</title>
 </head>
 <body>
 <h2 id="heading">This is H2 tag.</h2>
 <h2>This is another heading.</h2>
 <script type="text/javascript">
 function doSomething() {
 //alert('Hello, World!');
 myVar = "Hello!";
 console.log('inside func: ' + myVar);
 return myVar;
 }
 var myVar = doSomething();
 console.log('outside func: ' + myVar);
 </script>
 </body>
</html>

ကဲ ဒီအပိုင်းမှာ တော့ ဒီလောက်ပါပဲ…

Facebook comments:

4 Responses

ack says:

August 26, 2010 at 8:40 PM

Thanks for your sharing.

Reply
- Goo Goo says:
  
  August 28, 2010 at 4:09 PM
  
  welcome!
  
  Reply
tulip says:

September 19, 2010 at 4:50 PM

နောက်ဆက်တွဲ အပိုင်းလေးတွေ ထပ်ရေး ပေးပါဦးလား အစ်ကိုဂူးဂူးရေ.. စောင့်မျှော် နေပါတယ်.. ပျော်ရွှင်ပါစေ………

Reply
junemoe says:

September 23, 2010 at 1:55 PM

Thanks a lot!.. I appreciate you..

Junemoe

Reply

About the Author

Goo Goo

ေန႔နဲ႔ည မွားေနေသာ လူတစ္ပိုင္း ဇီးကြက္တစ္ပိုင္း။ မ်က္စိႏွစ္လံုး ပြင့္တာနဲ႔ ကီးဘုတ္ေပၚ လက္ေရာက္ေနတတ္သူ။ ကြန္ပ်ဳတာ နည္းပညာမ်ား အားလံုးလိုလို စိတ္ဝင္စားေသာ္လည္း ဝဘ္ဒီဇိုင္းကို အားသန္သူ။ စိတ္ပါလွ်င္ ဂီတာတီး၊ သီခ်င္းေရးတတ္ေသာ အခ်ိန္ပိုင္း အသံဖမ္းအင္ဂ်င္နီယာ။