Learn Javascript Right Now!!!

Introduction

Javascript ဆိုတာဟာ Client-Side Scripting Language ျဖစ္ပါတယ္... Client-Side Scripting Language ဆိုတာကို နားမရွင္းတဲ့ Beginner ေတြအတြက္ နည္းနည္းရွင္းျပပါမယ္...

Web Browser (IE, Firefox, Chrome, etc...) ေတြဟာ အၾကမ္းဖ်င္းအားျဖင့္ HTML, CSS, Javascript တို႕ကိုသာနားလည္ပါတယ္... PHP, ASP, C#, Java, Python စတာေတြကို (လံုး၀) နားမလည္ပါဘူး... ဥပမာေလးတစ္ခုေလာက္ ၾကည့္ရေအာင္...ကြ်န္ေတာ္တို႕က google.com က Search Box ထဲမွာ တစ္ခုခုကို ရိုက္ထည့္ျပီး ရွာခိုင္းလိုက္ရင္ Search Result ျပန္က်လာပါတယ္... အဲ့ဒီလို Result ျပန္က်လာဖို႕အတြက္ လုပ္သြားတဲ့ အဆင့္ေလးေတြကို နည္းနည္းၾကည့္ရေအာင္...

၁.) ပထမဦးဆံုး ကြ်န္ေတာ္တို႕ ရွာခိုင္းလိုက္တဲ့ Key Words ေတြဟာ google.com ဆီကို ေရာက္သြားပါတယ္...
၂.) google.com က အဲ့ဒီ Keywords ေတြကို Python programming language သံုးျပီး သူရဲ႕ Server ထဲမွာ ရွာပါတယ္...
၃.) ရွာလို႕ ရတဲ့ Result ကို HTML အေနနဲ႕ ျပန္ပို႕လိုက္တဲ့အတြက္ ကြ်န္ေတာ္တို႕ Search Result ကို ျမင္ရပါတယ္...

အဲ့ဒီ Process မွာ Python ကို Server-Side Programming Language လို႕ေခၚပါတယ္... ဘာျဖစ္လို႕လဲဆိုေတာ့ သူက ရွာတဲ့အလုပ္ကို Server ေပၚမွာလုပ္တာပါ... အသံုးျပဳသူ User ရဲ႕ စက္နဲ႕ Web Browser ထဲမွာ (လံုး၀) အလုပ္မလုပ္ပါဘူး... ေနာက္ဆံုးထြက္လာတဲ့ Result ကို HTML အေနနဲ႕ ေျပာင္းျပီး User ရဲ႕ Web Browser ဆီကို ျပန္ပို႕ေပးတာပါ... ဒီလိုျပန္ပို႕ျပီးတဲ့ေနာက္မွာ ဘာမွ ထပ္မလုပ္ေတာ့ပါဘူး... သူရဲ႕ တာ၀န္ ျပီးသြားပါျပီ...

Javascript ကေတာ့ ဒီလိုမဟုတ္ပါဘူး... Server ေပၚမွာ လံုး၀အလုပ္မလုပ္ပဲ Web Browser ထဲမွာသာ အလုပ္လုပ္တဲ့ အတြက္ Client-Side Language လို႕ေခၚပါတယ္...

ဥပမာ။ ။ google.com ရဲ႕ အေပၚနားမွာ Link List ကေလးတစ္ခုရွိပါတယ္... အဲ့ဒီ Link List ရဲ႕ ေနာက္ဆံုးက more▼ ဆိုတဲ့ Link ေလးကို ႏွိပ္လိုက္ရင္ Drop Down Menu ေလးက်လာပါလိမ့္မယ္... အဲ့ဒီ Drop Down Menu ကို Javascript နဲ႕ ဖန္တီးထားတာျဖစ္ျပီး google.com ကုိ ဘာမွ အေၾကာင္းျပန္မေနပဲ အသံုးျပဳသူရဲ႕ Web Browser ထဲမွာပဲ အလုပ္လုပ္သြားပါတယ္...

ဒါေၾကာင့္ ကြ်န္ေတာ္တို႕က ျပည့္စံုတဲ့ Web Site ျဖစ္ဖို႕ HTML, CSS အျပင္ Client Side Language ျဖစ္တဲ့ Javascript နဲ႕ Server Side Language တစ္ခုခုကို ပူးတြဲအသံုးျပဳရပါတယ္... ဒါေၾကာင့္ Web Developer တစ္ေယာက္အတြက္ HTML, CSS နဲ႕ Javascript သံုးမ်ိဳးဟာ မသိမျဖစ္ (must) ျဖစ္ျပီး၊ Server Side အတြက္ေတာ့ PHP, ASP, JSP, Python စသျဖင့္ ႏွစ္သက္ရာကို ေရြးခ်ယ္လို႕ရပါတယ္...

အခုလို ရွင္းျပေနရတာက Beginner ေတြအတြက္ျဖစ္ပါတယ္... Web Development လုပ္ေနတာၾကာျပီ၊ ASP.NET က control ေတြပဲသံုးတက္ျပီး Client Side နဲ႕ Server Side မကြဲတဲ့သူေတြအတြက္လဲ ပါ၊ ပါတယ္... HTML, CSS ဟာ ဒို႕အလုပ္မဟုတ္ဖူးလို႕ သက္သက္ေရလိုက္လြဲေနတဲ့ (အဲ့လို သင္တဲ့သူေတြကလဲ သင္ၾကတယ္) so-called Web Developer ေတြအတြက္လဲ ပါ၊ ပါတယ္... Professional Web Developer မွန္ရင္ Server Side Language ၾကိဳက္တာသံုး၊ ေရြးလို႕ရတယ္... ဒါေပမယ့္ HTML, CSS, Javascript ေတာ့ တက္ကိုတက္ရပါမယ္ (No reason, No excuse)...

Javascript in Web Development

အထက္က ရွင္းျပတာကိုၾကည့္ျပီး Javascript ရဲ႕ အခန္းက႑ကို အထင္ေသးေကာင္း ေသးႏုိင္ပါတယ္... ဒါေပမယ့္ Javascript ဆိုတာဟာ Web Developer တစ္ေယာက္အတြက္ မသိမျဖစ္ (must know) တစ္ခုျဖစ္တယ္ဆိုတာကို သတိခ်ပ္ေစခ်င္ပါတယ္...

ကြ်န္ေတာ္တို႕ ေလာေလာလတ္လတ္ ျပီးစီးထားတဲ့ Web Project တစ္ခုကို ျပန္ၾကည့္လိုက္တဲ့အခါမွာ Javascript ရဲ႕ Code Line အေရအတြက္ဟာ PHP Code Line အေရအတြက္ထက္ (၂)ဆေလာက္ ပိုမ်ားေနတာကို ေတြ႕ရပါတယ္... Drop Down Menu ေတြ၊ Model Dialog Box နဲ႕ Effect ေတြ၊ Calendar ေတြ၊ Image Light Box ေတြ၊ News Slider ေတြ Video Player ေတြ၊ Form Validation ေတြ စသျဖင့္ သံုးလိုက္ရတဲ့ Javascript ေတြဟာ အေတာ္ၾကီးကို မ်ားပါတယ္... ျပီးေတာ့ Google နဲ႕ တစ္ျခား Provider ေတြကေပးတဲ့ Service ေတြ Widgets ေတြလဲ Javascript နဲ႕ပဲ ေပးတာပါပဲ...

ကေန႕ေခတ္ Web Site ေတြအတြက္ Javascript ရဲ႕ အခန္းက႑ဟာ Server Side Language ေတြေလာက္ကို အေရးပါေနပါတယ္...

The beautiful language

Javascript ဟာလဲ Programming Language တစ္ခုျဖစ္ပါတယ္... C/C++, Java တို႕နဲ႕ Syntax ဆင္ျပီး OOP Language တစ္ခုပါ... ဒါေပမယ့္ Class Based OOP မဟုတ္ပဲ Prototype Based OOP ျဖစ္ပါတယ္... Javascript မွာ Class ေတြမရွိ ပါဘူး... ရိုးရိုး OOP Language ေတြမွာလို Object ေတြဟာ Class ေတြရဲ႕ Instance မဟုတ္ပဲ Object ေတြကို ခ်က္ခ်င္းတည္ေဆာက္ယူလို႕ရပါတယ္...

ဥပမာ။ ။ ရိုးရိုး OOP Language ေတြရဲ႕ ရွိေလ့ရွိတဲ့ ဒီလို ပံုစံေတြကို...

class Car
{    

  public int wheels = 4;

  public float fuel = 60.5;

  public void drive() {

    fuel -= 0.5;

  }

}



car = new Car();

print car.wheels;          // 4

car.drive();

Javascript မွာ ဒီလို တည္ေဆာက္ယူလို႕ ရပါတယ္...

car = {    
  wheels: 4,  

  fuel: 60.5,

  drive: function() {

    this.fuel -= 0.5;

  }

};

document.write( car.wheels );          // 4

car.drive();

ရိုးရိုး OOP Language ေတြကို personally မၾကိဳက္ေပမယ့္ Javascript ရဲ႕ Prototype Based OOP ကိုေတာ့ အလြန္ပဲ သေဘာက်ပါတယ္... ေနာက္ျပီး Javascript က Dynamic Type Language လဲျဖစ္ပါတယ္... Function Programming Style First Class Function အမ်ိဳးအစား Language လဲျဖစ္ပါတယ္... First Class Function ဆိုတာက Function ေတြကို Execution Time မွာ တည္ေဆာက္ေပးတဲ့ Language အမ်ိဳးအစားျဖစ္ပါတယ္...

Closures ေတြ Support လုပ္တာေတြ၊ Native Object ေတြကို extend လုပ္လို႕ရတာေတြ စသျဖင့္ အလြန္ေကာင္းမြန္တဲ့ Features ေတြေၾကာင့္ Javascript ဟာ ကြ်န္ေတာ္ အၾကိဳက္ဆံုး နံပါတ္(၂) Language တစ္ခုျဖစ္ပါတယ္... (နံပါတ္(၁) က Ruby ပါ၊ အမ်ားဆံုးသံုးျဖစ္တဲ့ PHP က နံပါတ္(၃) ပဲရွိပါတယ္... :)

Write less, do more with jQuery

အခုအခ်ိန္မွာ jQuery လို Library ေၾကာင့္ Javascript ဟာအမ်ားၾကီး ပိုမိုထိေရာက္လာသလို အသံုးျပဳရတာလဲ အမ်ားၾကီးလြယ္ကူလာပါတယ္... jQuery Plugins ေတြဟာ Integrate လုပ္ရတာ၊ Implement လုပ္ရတာ၊ လြယ္တာေၾကာင့္ အခ်ိန္ကုန္ အမ်ားၾကီး သက္သာလာပါတယ္... အရင္က လုပ္ၾကည့္ဖို႕ စိတ္ေတာင္ မကူး၀ံ့တာေတြကို အခုေတာ့ jQuery နဲ႕ လုပ္ႏုိင္လာပါျပီ...

jQuery Plugins ေတြျဖစ္တဲ့....

 

Inline Validation

Table Sorter

 

 

 

Charts & Graphs

Auto Completion

စတာေလးေတြကို နည္းနည္းေလာက္ ၾကည့္ၾကည့္လိုက္ပါ... အသံုးျပဳရလြယ္ကူျပီး အခ်ိန္ကုန္ အမ်ားၾကီး သက္သာတာကို ေတြ႕ရပါလိမ့္မယ္... Google Chrome နဲ႕ Firefox တို႕က ေနာက္ဆိုရင္ jQuery ကို သူတို႕ရဲ႕ Browser ထဲမွာ တစ္ခါတည္း ထည့္ေပးေတာ့မယ္လို႕ ေျပာၾကပါတယ္... ဒါေၾကာင့္ ေနာက္ဆိုရင္ Javascript ဆိုတာ jQuery ကိုေျပာတာလို႕ ေျပာရမလို ျဖစ္လာပါလိမ့္မယ္ (အခုလဲ အ့ဲလိုျဖစ္ေနတာပါပဲ)...

ဒါေၾကာင့္ ေျပာခ်င္တာက...

Learn Javascript (and jQuery) Right Now!!!

Web developer ေတြအတြက္ မသိမျဖစ္ ျဖစ္သလို... Web Developer မဟုတ္သူေတြအတြက္လဲ Prototype Based OOP ကို သံုးဖူးသြားျပီး ကိုယ့္ရဲ႕ Programming Style ကို Improve လုပ္ႏုိင္ပါလိမ့္မယ္...

--
[ Ei Maung ]