Burmese Coder

querySelector (! unicode version in under)
----------------

document.querySelector ကို HTML element ေတြကို selection လုပ္ဖို ့အသံုးျပဳပါတယ္။

querySelector မေပၚခင္အခ်ိန္မွာ HTML ေတြကို select မွတ္ဖို ့အတြက္ ->
document.getElementById();
(or)
document.getElementsByClassName();
(or)
document.getElementsByTagName စတဲ့ method ေတြကို သံုးျပီး selection လုပ္ရပါတယ္။
eg ->

This is Main Title

document.getElementById("main-title");


အထက္ပါ code block မွာ " h1 " element ကို main-title ဆိုတဲ့ id ေပးထားပါတယ္။ id ကို ေခၚသံုးမွာ ျဖစ္တဲ့ အတြက္
" document.getElementById(); "
ဆိုတဲ့ method သံုးျပီး selection ယူရပါတယ္။

တကယ္လို ့ id မဟုတ္ပဲ class="main-title" လို ့ေပးထားရင္ေတာ့
" document.getElementsByClassName(); " method သံုးရပါမယ္။ class ေတြ id ေတြမေပးပဲ " h1 " tag ကိုပဲ တိုက္ရိုက္ ေခၚျပီး selection ယူမယ္ဆိုရင္ေတာ့
" document.getElementsByTagName() " ကို သံုးရပါတယ္။

" id " နဲ ့ " class " မွာ => id က "indentical" (တစ္ခုတည္းရိွေသာ၊ ထပ္တူမက်ေသာ) လို ့ အဓိပၸာယ္ရတဲ့ အတြက္ တူညီတဲ့ နာမည္တစ္ခုကို ႏွစ္ခါေပးလို ့မရဘူးဆုိတာကို HTML & CSS မွာ သိခဲ့ျပီး ျဖစ္ပါလိမ့္မယ္။
ဥပမာ - id="main-title" လို ့ element တစ္ခုမွာ ထပ္ေပးလို ့မရေတာ့တာကို ဆိုလိုပါတယ္။

ဒါေၾကာင့္မို ့ အထက္ပါ method သံုးခုမွာ ကြာျခားခ်က္အေနနဲ ့ getElementById() မွာ Element မွာ " s " မပါတာကို ေတြ ့ရမွာပါ။ class နဲ ့ tag name ( like "" ) ေတြကေတာ့ တစ္ခုထက္ပိုျပီး အမ်ားအျပား select လုပ္ႏိုင္တဲ့ အတြက္ေၾကာင့္ "Elements" မွာ " s " ပါတာကို ေတြ ့ရမွာပါ။

-> အခု အဓိကေျပာမယ့္ method ကေတာ့ " querySelector " method ပါ

document.querySelector(" -title");
ဆိုျပီး selection ယူရပါတယ္။ document.getElementById("") method နဲ ့အတူတူပဲျဖစ္ပါတယ္။

querySelector ကို သံုးရတဲ့ အက်ိဳးေက်းဇူးက - တကယ္လို ့ id="main-title" မေပးခ်င္ေတာ့ဘူး ၊ class="main-title" လုိ ့ေျပာင္းေပးလိုက္ရင္ (" -title") ေနရာမွာ (".main-title") ဆိုျပီး " # " နဲ ့ "." ကို အလြယ္တကူေျပာင္းလို ့ရသြားတာပါပဲ။
document.getElementById() ကေန document.getElementsByClassName() အရွည္ၾကီး ျပန္ေျပာင္းေရးေနဖို ့ မလိုအပ္ေတာ့ပါဘူး ။

===> querySelector အလုပ္လုပ္ပံု

Title One
Title Two

ဒီ HTML code block မွာ Title One နဲ ့ Title Two ႏွစ္ခုလံုးကို " main-title " ဆိုတဲ့ class ႏွစ္ခုေပးထားေပမယ့္ ပထမေတြ ့ေတြ ့ခ်င္း Title One ကိုပဲ selection ယူေပးသြားတယ္။
ဒါေၾကာင့္ " main-title " class ေပးထားတဲ့ element ေတြကို အကုန္လံုးကို selection ယူႏိုင္ဖို ့အတြက္ querySelectorAll() ဆိုတဲ့ method ကိုသံုးေပးရတယ္။

document.querySelectorAll(".main-title");

ျဖစ္သြားတာေပါ့ဗ်ာ။ လက္ရွိ Title One နဲ ့ Title Two ႏွစ္ခုလံုးကို selection ယူႏိုင္သြားတာေပါ့။ ဥပမာ ထပ္ေပးရရင္ ->

document.querySelector(".main-title").style.color = "red";
ဒါဆုိရင္ အေပၚက Title One ပဲ အနီေရာင္ color ေျပာင္းေပးသြားတာကို ေတြ ့ရမယ္။ ႏွစ္ခုလံုး အနီေရာင္ ေျပာင္းသြားေစခ်င္ရင္
document.querySelectorAll(".main-title").style.color = "red"; ဆိုျပီးေရးေပးရမယ္။

BUT ---> အကုန္လံုးကို အေရာင္ေျပာင္းေစခ်င္လုိ ့ querySelectorAll() ကို သံုးလုိက္တယ္။ ဒါေပမယ့္ ဒီတစ္ေၾကာင္းတည္းနဲ ့ အေရာင္ေျပာင္းဦးမွာ မဟုတ္ေသးဘူး။ ဘာလို ့လဲဆိုေတာ့ သူက အကုန္လံုးကို selection ယူထားေပးတာပဲ ရွိေသးတယ္။ selection ယူထားတာက တစ္ခုတည္း မဟုတ္တဲ့ အတြက္ေၾကာင့္ အကုန္လံုးကို javascript ရဲ ့ looping တစ္ခုခုကို သံုးျပီး output ျပန္ထုတ္ရမယ္။ ဥပမာ ->

var getTitles = document.querySelectorAll('.main-title');

for(var i = 0; i < getTitles.length; i++){
getTitles[i].style.color = "red";
}

ဒီ looping ကိုေတာ့ ရွည္သြားမွာစိုးတဲ့ အတြက္ေၾကာင့္ ထည့္မရွင္းျပ ေတာ့ဘူး။ querySelector ကိုသံုးျပီး attribute ေတြ
eg - ကို document.querySelector("a[href]");

စသည္ျဖင့္ selection ယူျပီး အထဲက link ကို အေျခအေန တစ္ခုမွာ ေျပာင္းလဲႏိုင္တယ္၊ အမ်ိဳးမ်ိဳးရွိပါတယ္။ ကိုယ္တုိင္လည္းထပ္ေလ့လာရင္ ဒါနဲ ့ပတ္သတ္တာ အမ်ားၾကီး ေတြ ့ရဦးမွာပါ။

** Thanks for Reading **
If something confuse about that, please leave a comment !!

Unicode
-----------------------------------
querySelector
----------------
document.querySelector ကို HTML element ေတြကို selection လုပ္ဖို့အသုံးျပဳပါတယ္။

querySelector မေပၚခင္အခ်ိန္မွာ HTML ေတြကို select မွတ္ဖို့အတြက္ ->
document.getElementById();
(or)
document.getElementsByClassName();
(or)
document.getElementsByTagName စတဲ့ method ေတြကို သုံးၿပီး selection လုပ္ရပါတယ္။

eg ->
This is Main Title

document.getElementById("main-title");


အထက္ပါ code block မွာ " h1 " element ကို " main-title " ဆိုတဲ့ id ေပးထားပါတယ္။ id ကို ေခၚသုံးမွာ ျဖစ္တဲ့ အတြက္ " document.getElementById(); " ဆိုတဲ့ method သုံးၿပီး selection ယူရပါတယ္။
တကယ္လို့ id မဟုတ္ပဲ class="main-title" လို့ေပးထားရင္ေတာ့ " document.getElementsByClassName(); " method သုံးရပါမယ္။ class ေတြ id ေတြမေပးပဲ " h1 " tag ကိုပဲ တိုက္ရိုက္ ေခၚၿပီး selection ယူမယ္ဆိုရင္ေတာ့ " document.getElementsByTagName() " ကို သုံးရပါတယ္။

" id " နဲ႔ " class " မွာ => id က "indentical" (တစ္ခုတည္းရွိေသာ၊ ထပ္တူမက်ေသာ) လို့ အဓိပၸာယ္ရတဲ့ အတြက္ တူညီတဲ့ နာမည္တစ္ခုကို ႏွစ္ခါေပးလို့မရဘူးဆိုတာကို HTML & CSS မွာ သိခဲ့ၿပီး ျဖစ္ပါလိမ့္မယ္။
ဥပမာ - id="main-title" လို့ element တစ္ခုမွာ ထပ္ေပးလို့မရေတာ့တာကို ဆိုလိုပါတယ္။

ဒါေၾကာင့္မို့ အထက္ပါ method သုံးခုမွာ ကြာျခားခ်က္အေနနဲ႔ getElementById() မွာ Element မွာ " s " မပါတာကို ေတြ႕ရမွာပါ။ class နဲ႔ tag name ( like "" ) ေတြကေတာ့ တစ္ခုထက္ပိုၿပီး အမ်ားအျပား select လုပ္နိုင္တဲ့ အတြက္ေၾကာင့္ "Elements" မွာ " s " ပါတာကို ေတြ႕ရမွာပါ။

-> အခု အဓိကေျပာမယ့္ method ကေတာ့ " querySelector " method ပါ

document.querySelector(" -title");
ဆိုၿပီး selection ယူရပါတယ္။ document.getElementById("") method နဲ႔အတူတူပဲျဖစ္ပါတယ္။

querySelector ကို သုံးရတဲ့ အက်ိဳးေက်းဇူးက - တကယ္လို့ id="main-title" မေပးခ်င္ေတာ့ဘူး ၊ class="main-title" လို့ေျပာင္းေပးလိုက္ရင္ (" -title") ေနရာမွာ (".main-title") ဆိုၿပီး " # " နဲ႔ "." ကို အလြယ္တကူေျပာင္းလို့ရသြားတာပါပဲ။
document.getElementById() ကေန document.getElementsByClassName() အရွည္ႀကီး ျပန္ေျပာင္းေရးေနဖို့ မလိုအပ္ေတာ့ပါဘူး ။

===> querySelector အလုပ္လုပ္ပုံ

Title One
Title Two

ဒီ HTML code block မွာ Title One နဲ႔ Title Two ႏွစ္ခုလုံးကို " main-title " ဆိုတဲ့ class ႏွစ္ခုေပးထားေပမယ့္ ပထမေတြ႕ေတြ႕ခ်င္း Title One ကိုပဲ selection ယူေပးသြားတယ္။
ဒါေၾကာင့္ " main-title " class ေပးထားတဲ့ element ေတြကို အကုန္လုံးကို selection ယူနိုင္ဖို့အတြက္ querySelectorAll() ဆိုတဲ့ method ကိုသုံးေပးရတယ္။

document.querySelectorAll(".main-title");

ျဖစ္သြားတာေပါ့ဗ်ာ။ လက္ရွိ Title One နဲ႔ Title Two ႏွစ္ခုလုံးကို selection ယူနိုင္သြားတာေပါ့။ ဥပမာ ထပ္ေပးရရင္ ->

document.querySelector(".main-title").style.color = "red";
ဒါဆိုရင္ အေပၚက Title One ပဲ အနီေရာင္ color ေျပာင္းေပးသြားတာကို ေတြ႕ရမယ္။ ႏွစ္ခုလုံး အနီေရာင္ ေျပာင္းသြားေစခ်င္ရင္
document.querySelectorAll(".main-title").style.color = "red"; ဆိုၿပီးေရးေပးရမယ္။

BUT ---> အကုန္လုံးကို အေရာင္ေျပာင္းေစခ်င္လို့ querySelectorAll() ကို သုံးလိုက္တယ္။ ဒါေပမယ့္ ဒီတစ္ေၾကာင္းတည္းနဲ႔ အေရာင္ေျပာင္းဦးမွာ မဟုတ္ေသးဘူး။ ဘာလို့လဲဆိုေတာ့ သူက အကုန္လုံးကို selection ယူထားေပးတာပဲ ရွိေသးတယ္။ selection ယူထားတာက တစ္ခုတည္း မဟုတ္တဲ့ အတြက္ေၾကာင့္ အကုန္လုံးကို javascript ရဲ့ looping တစ္ခုခုကို သုံးၿပီး output ျပန္ထုတ္ရမယ္။ ဥပမာ ->

var getTitles = document.querySelectorAll('.main-title');

for(var i = 0; i < getTitles.length; i++){
getTitles[i].style.color = "red";
}

ဒီ looping ကိုေတာ့ ရွည္သြားမွာစိုးတဲ့ အတြက္ေၾကာင့္ ထည့္မရွင္းျပ ေတာ့ဘူး။ querySelector ကိုသုံးၿပီး attribute ေတြ
eg - ကို document.querySelector("a[href]");

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

** Thanks for Reading **
If something confuse about that, please leave a comment !!

BurmeseCoder

Javascript " Let "
----------------------

let ဆိုတဲ့ keyword ကို Javascript ES2015 မွာစတင္မိတ္ဆက္ခဲ့ပါတယ္။ အလားတူပဲ const ဆိုတဲ့ keyword ကိုလည္း မိတ္ဆက္ခဲ့ပါတယ္။
အရင္တုန္းက ေတာ့ data ေတြ သိုေလွာင္တဲ့ keyword အေနနဲ ့ var ကိုပဲသံုးရပါတယ္။

Javascript မွာ data ေတြသိုေလွာင္တဲ့ keyword ေတြကို နယ္ပယ္ သံုးခုခဲြ ေၾကညာျပီး သံုးလို ့ရပါတယ္။ အဲဒီ scope သံုးခုကေတာ့ -

1. Global Scope
2. Function Scope
3. Block Scope
တို ့ျဖစ္ပါတယ္။

ES 2015 မတိုင္ခင္မွာေတာ့ var keyword ကိုသံုးျပီး Global Scope နဲ ့ Function Scope ႏွစ္ခုပဲ ခဲြေျကညာျပီး ေခၚသံုးႏိုင္ပါတယ္။
ေနာက္ပိုင္းမွာေတာ့ let keyword ကို သံုးျပီး block scope ကို ေၾကညာႏိုင္ပါတယ္။

*အခုကေတာ့ data သိုေလွာင္တဲ့ keyword ေတြကို scope သံုးမ်ိဳး ခဲြျပီး အသံုးျပဳႏုိင္တာကို အၾကမ္းဖ်င္း ေဖာ္ျပထားတယ္။ ေနာက္အေၾကာင္းအရာမွာ
- global scope, function scope နဲ ့block scope ဆိုတာဘာေတြလဲ။
- data သိုေလွာင္တဲ့ keyword ေတြျဖစ္တဲ့ var နဲ ့ let ကဘာေတြကြာျခားလဲဆိုတာပါ ဆက္ေရးေပးပါ့မယ္။

javascript ရဲ ့အေျခခံအက်ဆံုး data သိုေလွာင္သိမ္းဆည္းတဲ့ keyword ျဖစ္တဲ့ var အေၾကာင္းကို မသိေသးသူအတြက္ပါ var အေၾကာင္းကုိ သီးသန္ ့ ထပ္ေဖာ္ျပေပးပါမယ္။

"Developer Console"
-----------------------

Web browser တုိင္းမွာ Developer ေတြအတြက္ အရမ္းအသံုးဝင္တဲ့ developer tools ေတြကို embed လုပ္ေပးထားပါတယ္ ။ Developer Tools ကိုေတာ့ ေအာက္ပါ ပံုအတိုင္း ျမင္ရမွာျဖစ္ပါတယ္ ။ ဒါကေတာ့ chrome မွာျမင္ရတဲ့ပံုစံပဲျဖစ္ပါတယ္..browser အမ်ိဳးအစားေပၚမူတည္ျပီးေတာ့ ပံုစံကေတာ့ အနည္းငယ္ ကြာျခားပါလိမ့္မယ္။ Developer Tools ထဲကမွ javascript နဲ ့ဆိုင္တဲ့ function တစ္ခုျဖစ္တဲ့ console ရဲ ့ အလုပ္လုပ္ပံုအေၾကာင္းကို ေဖာ္ျပေပးမွာ ျဖစ္ပါတယ္။