Design

JavaScript

အားလုံးပဲ မဂၤလာပါရွင့္။ ညီမကေတာ့ နီလာေဌး ျဖစ္ပါတယ္။ အခုလက္ရွိမွာေတာ့ Spiceworks Myanmar မွာ Web Designer အျဖစ္ ဝင္ေရာက္လုပ္ကိုင္ေနပါတယ္။ ဒီေန႔ ေျပာျပေပးခ်င္တဲ့ အေၾကာင္းအရာေလးကေတာ့ ညီမတို႔ လူေတာ္ေတာ္မ်ားမ်ားဟာ Programming Languages ေတြကို စၿပီး ေလ့လာမယ္ဆိုရင္ HTML, CSS ကို အရင္ေလ့လာၾကပါတယ္။ ၿပီးမွ JavaScript ကို ေလ့လာေလ့ရွိပါတယ္။ အဲ့ဒီအတြက္ အခုမွ JavaScript ကို စၿပီးေလ့လာမယ့္သူေတြအတြက္ JavaScript ရဲ႕ အေျခခံ အသုံးႏႈန္းေလးေတြကို ေျပာျပေပးသြားမွာပဲ ျဖစ္ပါတယ္။ ပထမဆုံးအေနနဲ႔ JavaScript ဆိုတာ ဘာလဲ။ JavaScript ဆိုတာ Interpreted Language တစ္မ်ိဳးျဖစ္ပါတယ္။ Script Language လို႔လည္း ေခၚပါတယ္။ Chrome, Edge, Firefox အစရွိတဲ့ Web Browser ထဲမွာ အလုပ္လုပ္တဲ့ Programming Language တစ္မ်ိဳးပဲ ျဖစ္ပါတယ္။ JavaScript ရဲ႕ အေျခခံ အသုံးႏႈန္းေတြ မ်ားစြာရွိတဲ့ အထဲမွာမွ ဒီေန႔မွာေတာ့ ပထမဆုံးအေနနဲ႔ အေျခခံက်ၿပီး အေရးပါတဲ့ အခ်က္ ၃ခ်က္ကို ေဝမွ်ေပးသြားမွာပဲ ျဖစ္ပါတယ္။

1. Variables

variables ဆိုတာ ကြန္ပ်ဴတာ memory ေပၚက ႏွစ္သက္ရာ တန္ဖိုးေတြ သိမ္းလို႔ရတဲ့ ေနရာေလးတစ္ခုပဲ ျဖစ္ပါတယ္။ ဥပမာအေနနဲ႔ var num လို႔ေပးလိုက္မယ္ဆိုရင္ ဒါဟာ memory ေပၚမွာ ေနရာတစ္ခုယူၿပီး အဲ့ဒီေနရာကို num လို႔ အမည္ေပးလိုက္တာပါ။ တန္ဖိုးထည့္ဖို႔အတြက္လည္း equal သေကၤတကို သုံးပါတယ္။ var num = 3 ဆိုၿပီး ေပါင္းေရးလို႔လည္း ရပါတယ္။ အမ်ားစုကေတာ့ equal ကို ညီတယ္လို႔ သိထားၾကပါတယ္။ ဒါေပမယ့္ JavaScript မွာေတာ့ Assignment Operator လို႔ ေခၚပါတယ္။ သိမ္းထားတဲ့ တန္ဖိုးေတြကိုလည္း လိုအပ္တဲ့အခါ ျပန္ယူသုံးလည္းရပါတယ္။ ဥပမာအေနနဲ႔
var num1 = 2
var num2 = 15 ဆိုၿပီး ေၾကညာထားမယ္ဆိုရင္
var num3 = num1 + num2 ဆိုၿပီး ျပန္ေခၚသုံးလို႔လည္း ရပါတယ္။

အခု ညီမေျပာျပေနတဲ့ code ေတြကို တစ္ခါတည္း လက္ေတြ႕သုံးၿပီး စမ္းေရးၾကည့္လို႔ရပါတယ္။ အဲ့ဒီအတြက္ Web Browser တစ္ခုရွိရင္ အဆင္ေျပပါတယ္။ Browser ရဲ႕ console ထဲမွာ code ေတြကို စမ္းေရးလို႔ရပါတယ္။ code ေတြကို စမ္းေရးတဲ့အခါ တစ္ေၾကာင္းေရးရင္ တစ္ခါ အလုပ္လုပ္ပါတယ္။ ဥပမာအေနနဲ႔ 1+1 လို႔ေရးလိုက္တဲ့အခါမွာ 2 ဆိုတဲ့ အေျဖကို ခ်က္ခ်င္းျပန္ရပါတယ္။ var num ဆိုၿပီး ေရးလိုက္တဲ့အခါမွာေတာ့ တန္ဖိုး မရွိေသးတဲ့အတြက္ undefined လို႔ ျပေနပါလိမ့္မယ္။

အဲ့ဒီလို code ေတြကို လက္ေတြ႕ေရးလိုက္မွ အလုပ္လုပ္ပုံေတြကို တစ္ခါထဲ ျမင္ရေတာ့ ပိုၿပီးနားလည္လြယ္မယ္လို႔ထင္ပါတယ္။ variable အမည္ေတြေပးတဲ့အခါမွာ
1. abc စာလုံး အႀကီး၊ အေသး ေတြပါလို႔ရပါတယ္။
2. 123 number ေတြပါလို႔ရပါတယ္။ (ဒါေပမယ့္ number နဲ႔ေတာ့ မစရပါဘူး။)
3. space ေတြပါလို႔မရပါဘူး။ (လိုအပ္ရင္ underscore သေကၤတကို သုံးႏိုင္ပါတယ္။)
4. special character ေတြပါလို႔မရပါဘူး။ (ဒါေပမယ့္ $ သေကၤတကိုေတာ့ သုံးလို႔ရပါတယ္။)

ေနာက္ထပ္သတိျပဳရမယ့္ အခ်က္ကေတာ့ Case Sensitive ျဖစ္တဲ့အခ်က္ပဲ ျဖစ္ပါတယ္။ စာလုံးအႀကီးအေသး လြဲလို႔ မရပါဘူး။ တိက်ရပါမယ္။ ဥပမာအေနနဲ႔ ေအာက္ပါ ပုံေလးကို ၾကည့္မယ္ဆိုရင္ သိႏိုင္ပါတယ္။

ေနာက္တစ္ခုအေနနဲ႔ JavaScript မွာ variable ေၾကညာဖို႔ နည္းႏွစ္နည္းရွိပါတယ္။
1. var num3 = 3
2. let num4 = 3
ေရးပုံေရးနည္းကေတာ့ အတူတူပါပဲ။ keyword ပဲကြာသြားတာပါ။ အေပၚက ေပးထားတဲ့ variable ႏွစ္ခုစလုံးကို တြန႔္ကြင္းအဖြင့္အပိတ္ထဲမွာ ေရးထားလိုက္မယ္ဆိုရင္ var ကို အသုံးျပဳေၾကညာထားတဲ့ variable ကို အျပင္ကေန သုံးလို႔ရပါတယ္။ let ကို အသုံးျပဳေၾကညာထားတဲ့ variable ကို အျပင္ကေန သုံးလို႔မရပါဘူး။ မ်က္စိထဲရွင္းသြားေအာင္ ေအာက္ပါပုံေလးနဲ႔ စမ္းေရးျပထားပါတယ္။

ေနာက္ၿပီး variable ေတြကို comma ခံၿပီး အတြဲလိုက္ ေၾကညာလို႔ရပါတယ္။ ဥပမာအေနနဲ႔ let a, b, c = 3 ဆိုပါစို႔။ c တန္ဖိုးအေနနဲ႔ 3 လို႔သတ္မွတ္လို႔ရပါတယ္။ a, b မွာေတာ့ တန္ဖိုးေတြ မရွိပါဘူး။

အခု ေျပာသြားတဲ့ variable တန္ဖိုးေတြကို ေျပာင္းလို႔ရေပမယ့္ constant တန္ဖိုးကိုေတာ့ ေျပာင္းလို႔မရပါဘူး။ အကယ္၍ ေျပာင္းလိုက္မယ္ဆိုရင္ error ထြက္ေနတာကို ေအာက္ပါ ပုံမွာေတြ႕ျမင္ႏိုင္ပါတယ္။

2. Data Types

variable တစ္ခု ေၾကညာလိုက္တဲ့အခါမွာ memory ေပၚမွာ ေနရာယူၿပီးသြားၿပီ ျဖစ္တဲ့အတြက္ ဘယ္ေလာက္ ပမာဏယူတယ္ဆိုတာ ေျပာစရာရွိလာပါတယ္။ သိမ္းမယ့္ အခ်က္အလက္ အမ်ိဳးအစား Data Type ေပၚမူတည္ၿပီး လက္ခံသိမ္းႏိုင္ေလာက္တဲ့ ပမာဏကို ယူဖို႔လိုအပ္ပါတယ္။ Programming Language အမ်ားစုမွာက အေျခခံ Data Type ၄မ်ိဳး ရွိပါတယ္။
1. Character
2. Number
3. Boolean
4. String

ဒါေပမယ့္ JavaScript မွာေတာ့ အေျခခံက်ဆုံး Data Type ၃မ်ိဳးပဲရွိပါတယ္။
1. Number
2. Boolean
3. String

JavaScript မွာေတာ့ character ဆိုတဲ့ Data Type သီးျခားမရွိေတာ့ပါဘူး။ number က 64-bit float အမ်ိဳးအစား ျဖစ္တဲ့အတြက္ ဒီတစ္မ်ိဳးထဲနဲ႔ ကိန္းျပည့္၊ ဒႆမကိန္း၊ အေပါင္းကိန္း၊ အႏုတ္ကိန္း အားလုံးကို သိမ္းႏိုင္ပါတယ္။ boolean က true or false ႏွစ္ခုထဲက တစ္ခုကိုသာ လက္ခံသိမ္းႏိုင္ပါတယ္။ string ကေတာ့ စာေတြ သိမ္းလို႔ရတဲ့ Data Type ပဲ ျဖစ္ပါတယ္။ character ေတြ အတြဲလိုက္ သိမ္းထားတာပဲ ျဖစ္ပါတယ္။ string တည္ေဆာက္ဖို႔အတြက္ သေကၤတ ၃မ်ိဳး ရွိပါတယ္။
1. single quote
2. double quote
3. back tick

Character Data Type ရွိတဲ့ Language ေတြမွာေတာ့ single quote ကို character တန္ဖိုး သတ္မွတ္ဖို႔သုံးၿပီး double quote ကိုေတာ့ string တန္ဖိုး သတ္မွတ္တဲ့ ေနရာမွာ သုံးပါတယ္။JavaScript မွာေတာ့ Character Data Type မရွိတဲ့ အတြက္ string တန္ဖိုး သတ္မွတ္ဖို႔ရာ single quote ေရာ double quote ကိုပါ ကိုယ္ႀကိဳက္ႏွစ္သက္ရာကို သုံးႏိုင္ပါတယ္။ ဥပမာေလးနဲ႔ ေျပာျပေပးခ်င္ပါတယ္။
let blood = “A”
let greet = ‘Hello’ ဆိုၿပီး ေရးႏိုင္ပါတယ္။
အဖြင့္အပိတ္မွန္ဖို႔ေတာ့ လိုအပ္ပါတယ္။

ေနာက္တစ္ခုအေနနဲ႔ let time = “3 O’ Clock” ဆိုပါစို႔။ double quote ထဲမွာ single quote ပါေနတာ အဆင္ေျပပါတယ္။ အကယ္၍ single quote နဲ႔ ေရးမယ္ဆိုလွ်င္ single quote ထဲမွာ single quote ပါေနတဲ့အတြက္ \ ခံၿပီး let time = ‘3 O\’ Clock’ ဆိုၿပီး ေရးေပးရပါမယ္။ back tick ကေတာ့ string တစ္ခုအတြင္းမွာ တစ္ျခားတန္ဖိုးေတြကို ေရာထည့္ေရးခ်င္တဲ့အခါမွာ သုံးပါတယ္။ ဥပမာအေနနဲ႔
let name = “Nilar”
let greet = ‘Hello ${name}’ ဆိုၿပီး ေရးႏိုင္ပါတယ္။

JavaScript က Dynamically Typed Language ျဖစ္တဲ့အတြက္ Data Type ေတြကို ကိုယ္တိုင္ေၾကညာစရာမလိုပဲ ထည့္လိုက္တဲ့ တန္ဖိုးေပၚမူတည္ၿပီး Data Type က အလိုအေလ်ာက္ လုပ္ေပးသြားမွာ ျဖစ္ပါတယ္။ ေအာက္ကပုံေလးကိုၾကည့္လိုက္မယ္ဆိုရင္ ရွင္းသြားပါလိမ့္မယ္။

3. Expressions, Statements & Operators

let sum = 1 + 2; ဆိုတာ Statement တစ္ခုပဲ ျဖစ္ပါတယ္။ 1 + 2 ေပါင္းလို႔ရလာတဲ့ အေျဖကို sum ဆိုတဲ့ variable ထဲ ထည့္လိုက္ပါလို႔ ၫႊန႔္ၾကားလိုက္ျခင္းျဖစ္ပါတယ္။ အဲ့ဒီအတြက္ Expressions ဆိုတာ လုပ္ေဆာင္ခ်က္တစ္ခု ျဖစ္ၿပီး Statements ဆိုတာ ၫႊန႔္ၾကားခ်က္ တစ္ခုျဖစ္တယ္လို႔ မွတ္သားႏိုင္ပါတယ္။

Comments
code ေတြေရးတဲ့အခါမွာ comment ေတြထည့္ေရးလို႔ရပါတယ္။ ဥပမာအေနနဲ႔
let count = 10          //   Number of items per page
ဆိုၿပီး ေရးႏိုင္ပါတယ္။ ကိုယ္ေရးထားတဲ့ comment က အလုပ္လုပ္တဲ့ code မဟုတ္ေပမယ့္ ေရးထားတဲ့ code ရဲ႕ အဓိပၸါယ္ကို comment နဲ႔ ရွင္းျပေပးထားတဲ့အတြက္ ေနာင္တစ္ခ်ိန္ျပန္ၾကည့္တဲ့အခါမွာ အသုံးဝင္ပါတယ္။

Operators
Expression ေတြ Statement ေတြ တည္ေဆာက္ဖို႔ အတြက္ operator ေတြလိုအပ္ပါတယ္။ ေပါင္း၊ ႏုတ္၊ ေျမႇာက္၊ စား အစရွိတဲ့ operator ေတြပဲ ျဖစ္ပါတယ္။ + သေကၤတက ကိန္းဂဏန္းေတြ ေပါင္းဖို႔အတြက္ သုံးသလို string ေတြတြဲဆက္ဖို႔အတြက္လည္း သုံးပါတယ္။ ေနာက္ထပ္ထူးျခားခ်က္ကေတာ့ + သေကၤတကို သုံးၿပီး ကိန္းဂဏန္းမဟုတ္တဲ့ တန္ဖိုးေတြကို ကိန္းဂဏန္းျဖစ္ေအာင္ ေျပာင္းလို႔ရပါတယ္။ ေအာက္ပါပုံေလးနဲ႔ ၾကည့္မယ္ဆိုရင္ ပိုၿပီး နားလည္လြယ္မယ္လို႔ ထင္ပါတယ္။

string တန္ဖိုး ျဖစ္တဲ့ 5 ကို ေရွ႕ကေန + သေကၤတ တြဲေပးလိုက္တဲ့ အခါ ကိန္းဂဏန္းျဖစ္သြားပါတယ္။ string တန္ဖိုး ျဖစ္တဲ့ a ကို ေရွ႕ကေန + သေကၤတ တြဲေပးလိုက္တဲ့ အခါ ေျပာင္းလို႔မရတဲ့ အတြက္ NaN ျဖစ္သြားပါတယ္။

ေနာက္ထပ္မွတ္ရမယ့္ operator ေတြကေတာ့ % , ** , ++ , — တို႔ပဲ ျဖစ္ပါတယ္။ % သေကၤတကို အႂကြင္းရွာဖို႔ အသုံးျပဳပါတယ္။ ** သေကၤတကိုေတာ့ Exponent Operator ရွာဖို႔အသုံးျပဳပါတယ္။ ++ သေကၤတကို တစ္တိုးဖို႔အတြက္ သုံးပါတယ္။ ဥပမာအေနနဲ႔ ++ သေကၤတကို မူလတန္ဖိုးရဲ႕ အေနာက္မွာ ထားမယ္ဆိုရင္ အရင္အလုပ္လုပ္ၿပီးမွ တစ္တိုးပါတယ္။ အေရွ႕မွာ ထားမယ္ဆိုလွ်င္ အရင္တစ္တိုးၿပီးမွ အလုပ္လုပ္ပါတယ္။

operator ေတြ အဆင့္တူေနရင္ ဘယ္ကေန ညာကို အလုပ္လုပ္ပါတယ္။ အကယ္၍ အဆင့္ေတြ မတူခဲ့လွ်င္ ေအာက္ပါအတိုင္း အလုပ္လုပ္ပါတယ္။
1. ဝိုက္ကြင္း
2. ++, —
3. *, /, %
4. +, – ဆိုၿပီး အစီအစဥ္အတိုင္း လုပ္ေဆာင္ေပးရပါမယ္။

Assignment Operators
Assignment Operators ေတြမွာေတာ့ အဆင့္တူရင္ ညာကေန ဘယ္ကို အလုပ္လုပ္ပါတယ္။ ဥပမာအေနနဲ႔
let num = 2
num = num + 3 ဆိုပါစို႔။
ညာဘက္က num + 3 ကို အရင္အလုပ္လုပ္ၿပီးမွ ရလာတဲ့ တန္ဖိုးက num variable ထဲေရာက္သြားပါတယ္။ အဲ့ဒီအတြက္ အတိုေကာက္ num += 3 ဆိုၿပီးေရးႏိုင္ပါတယ္။ တစ္ျခား Assignment Operator ျဖစ္တဲ့ -=, *=, /=, %= ေတြလည္းပဲ += နဲ႔ သေဘာသဘာဝအားျဖင့္ တူတူပဲ ျဖစ္ပါတယ္။

Comparison Operators
မွန္သလား၊ မွားသလား ဒီႏွစ္မ်ိဳးကိုပဲ စစ္ေပးတာ ျဖစ္ပါတယ္။ တန္ဖိုးေတြ ညီလား ႏႈိင္းယွဥ္တဲ့အခါမွာ double equal , triple equal သေကၤတေတြကို အသုံးျပဳပါတယ္။ double equal က တန္ဖိုးတူရင္ ရပါတယ္။ type အတိအက် တူစရာမလိုပါဘူး။ triple equal ကေတာ့ တန္ဖိုးေရာ type ေရာအတိအက် တူမွ ရပါတယ္။
5 == “5” // true
5 ===”5″ // false
5 != “5” // false
5 !==”5″ // true
5 > 5 // false
5 >= 5 // true
<, <= ကိုလည္း အေပၚက နည္းအတိုင္း စစ္ေပးလို႔ရပါတယ္။

အခု ညီမေျပာသြားတာ နားလည္လြယ္မယ္လို႔ထင္ပါတယ္။ အခုေတာ့ ဒီေလာက္နဲ႔ပဲ ရပ္လိုက္ပါမယ္။ ေနာက္တစ္ပတ္ ညီမအလွည့္က်မွ ဆက္ၿပီး ေျပာျပေပးသြားပါမယ္။ အခုလို အခ်ိန္ေပးၿပီး ဖတ္ရႈေပးတဲ့အတြက္ ေက်းဇူးအမ်ားႀကီးတင္ပါတယ္။

Reference
ဆရာအိေမာင္ရဲ႕ JavaScript လို – တို – ရွင္း
https://www.w3schools.com/

 

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *