Burmese Coder

Burmese Coder Code Foundation by Burmese Coder

querySelector (! unicode version in under)----------------document.querySelector ကို HTML element ေတြကို selection လုပ္ဖ...
28/08/2019

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 !!

03/07/2019

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 ေတြက...
02/06/2019

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

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

Address

Yangon

Telephone

+959751178813

Website

Alerts

Be the first to know and let us send you an email when Burmese Coder posts news and promotions. Your email address will not be used for any other purpose, and you can unsubscribe at any time.

Contact The School

Send a message to Burmese Coder:

Shortcuts

Share

Category