About Serie
Myanmar JavaScript Document Object Model
JavaScript အခြေခံကို သိရှိပြီးနောက်မှာ HTML နဲ့ JavaScript ကို အသုံးပြုပြီး DOM structure ကို ဘယ်လိုလုပ်လုပ်ဆောင်နိုင်တယ်ဆိုတာကို သိရှိဖို့လိုအပ်လာပါတယ်။ ယခု series မှာတော့ JavaScript ရဲ့ DOM ( Document Object Model အလုပ်လုပ်ဆောင် တွေကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။
Episodes
episodesUpdated
2021-11-03Level
Beginner
About Current Episode
40
JavaScript Load Event
Document ထဲမှာရှိတဲ့ element ဖြစ်ဖြစ် Image ကို ဖြစ်ဖြစ် ဘယ်အရာကို မဆို loading ဆွဲပြီရင် လုပ်ဆောင်ချင်တယ်ဆိုရင် load ဆိုတဲ့ event နဲ့ လုပ်ဆောင်နိုင်တာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-11-03
9:55
1
Series Outline
DOM series ဟာ JavaScript အခြေခံ ကို သိရှိပြီးသားသူများအတွက် အလွန်အသုံးဝင်ပါတယ်။ DOM structure ကို ကောင်းကောင်းနားလည်မှ document ထဲမှာ ဘာတွေဖြစ်ပျက်နေလဲ ဆိုတာကို ပြောပြနိုင်မှာ ဖြစ်ပါတယ်။ အဲဒါကြောင့် ယခု series မှာ DOM အထဲမှာ လုပ်ဆောင်လို့ရတဲ့ လုပ်ဆောင်ချက်လေးတွေကို ရှင်းပြသွားမှာ ဖြစ်ပါတယ်။ free
2021-11-03
1:43
2
What is DOM
DOM ကို Document Object Model လို့ခေါ်ပါတယ်။ DOM ဟာ <b>Interface</b> တစ်ခုဖြစ်ပြီတော့ HTML document ထဲမှာရှိတဲ့ element တွေကို node object တစ်ခုအနေနဲ့ ကိုယ်စားပြုပြီးတော့ document tree structure ကို တည်ဆောက်ပါတယ်။ 2021-11-02
3:15
3
Setup Code Editor Snippet
Code တွေရေးသားတဲ့အခါ မိမိရေးသားမယ့် language အပေါ်မူတည်ပြီး code editor ကို ပြင်ဆင်ချက်လေးတွေ လုပ်ထားဖို့ လိုအပ်ပါတယ်။ ကျွန်တော်ကတော့ ယခု series အတွက် Visual studio code editor ကို အသုံးပြုသွားမှာ ဖြစ်ပါတယ်။ 2021-11-02
13:58
4
Live Server
ယခုနောက်ပိုင်း Code editor တော်တော်များများမှာ live server ဆိုတဲ့ extensions လေးပါတတ်ပါတယ်။ အဲဒီ extensions က မိမိရေးနေတဲ့ applications ထဲမှာ တစ်ခုခုအပြောင်းအလဲလုပ်လိုက်တိုင်း browser ပေါ်မှာ refresh လုပ်စရာမလိုပဲ auto refresh လုပ်ပေးမှာ ဖြစ်ပါတယ်။ အဲဒါကြောင့် development လုပ်တဲ့အခါ တော်တော်အသုံးဝင်တာ ဖြစ်ပါတယ်။ 2021-11-02
4:06
5
JavaScript Select By ID
ဒီသင်ခန်းစာမှာတော့ JavaScript ရဲ့ ID selector အသုံးပြုပုံကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ HTML document ထဲမှာ ရှိတဲ့ ID selector တွေကို JavaScript ထဲအသုံးပြုပုံ၊ window object လုပ်ဆောင်ပုံတွေကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-11-02
10:06
6
JavaScript Select By Class Name
JavaScript ရဲ့ class selector ကတော့ node တွေအများကြိးကို select ပြုလုပ်လိုတဲ့အခါ အသုံးပြုပါတယ်။ CSS selector တွေကို select လုပ်တဲ့အတိုင်း DOM မှာ လည်းအလားတူ အသုံးပြုနိုင်တာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-11-02
12:32
7
JavaScript Query Selector
Query selector ကတော့ ID ဖြစ်ဖြစ် class ဖြစ်ဖြစ် attribute နဲ့ ဖြစ်ဖြစ် select လုပ်ချင်တဲ့အခါမှာ အသုံးပြုပါတယ်။ selector လုပ်ဆောင်ပုံတွေကတော့ <b>CSS</b> selector တွေကို လုပ်ဆောင်ပုံနဲ့ အတူတူပါပဲ။ 2021-11-03
6:23
8
JavaScript Node & NodeList
ဒီသင်ခန်းစာမှာတော့ Node နဲ့ Nodelist အကြောင်းကို သိရှိရမှာ ဖြစ်ပါတယ်။ Node ဟာ interface abstract class ထဲကနေ ဘယ်လိုဆင်းသက်လာတယ်ဆိုတာကို ဖော်ပြထားခြင်း ဖြစ်ပါတယ်။ သင်ခန်းစာတွေ ရှေ့ဆက်မသွားခင်မှာ Node နဲ့ Nodelist အကြောင်းကို သိရှိဖို့လိုအပ်ပါတယ်။ 2021-11-03
4:45
9
JavaScript Query Selector All
Node elements အကုန်လုံးကို select လုပ်ချင်တဲ့အခါမျိုးမှာ ဒီ query selector all ကို အသုံးပြုနိုင်ပါတယ်။ CSS selector ကို အသုံးပြုပုံနဲ့ အတူတူပဲ ဖြစ်ပါတယ်။ 2021-11-03
5:29
10
JavaScript Child Element Select
JavaScript မှာ element တစ်ခုကို select လုပ်လို့ရပြီဆိုရင် ၎င်းအထဲမှာ ရှိတဲ့ child element တွေကိုပါ တစ်ခါတည်း select လုပ်လို့ရနိုင်ပါတယ်။ ဒီသင်ခန်းစာမှာ parent ကနေ့ child element ကို ဘယ်လို select လုပ်သွားတယ်ဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-11-03
12:50
11
JavaScript Select Parent Element
JavaScript မှာ element တစ်ခုကို select လုပ်လို့ရပြီဆိုရင် ၎င်းအပေါ်မှာ ရှိတဲ့ parent element တွေကိုပါ တစ်ခါတည်း select လုပ်လို့ရနိုင်ပါတယ်။ ဒီသင်ခန်းစာမှာ child element ကနေ့ parent element ကို ဘယ်လို select လုပ်သွားတယ်ဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-11-03
4:30
12
JavaScript Select Sibling Elements
JavaScript မှာ element တစ်ခုကို select လုပ်လို့ရပြီဆိုရင် ၄င်း element ရဲ့ parent element အောက်မှာ ရှိတဲ့ တစ်ခြား sibling tags တွေကို ဘယ်လို select လုပ်တယ်ဆိုတာကို တွေရှိရမှာ ဖြစ်ပါတယ်။ 2021-11-03
5:56
13
Selectors In JavaScript
JavaScript မှာ selectors အကုန်လုံးကို ပြန်ပြီး review လုပ်ပြထားတာ ဖြစ်ပါတယ်။ 2021-11-03
2:05
14
JavaScript Create Element
JavaScript မှာ Node Element တွေကို dynamically ဖန်တီးလို့ရပါတယ်။ Node element တစ်ခုမက အများကြီးကို ဖန်တီးနိုင်တယ်ဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-11-03
8:30
15
JavaScript Append Child
JavaScript မှာ element တစ်ခုအထဲကို dynamically နောက် child element တစ်ခုကို ပေါင်းထည့်နိုင်ပါတယ်။ တစ်ခုမက ထည့်မယ်ဆိုလည်း ထည့်နိုင်ပါသေးတယ်။ 2021-11-03
7:29
16
JavaScript Text Content
Element တစ်ခုထဲမှာ content တွေ ဥပမာ text content တွေကို ထည့်မယ်ဆိုရင် ထည့်လို့ရပါတယ်။ ရှိပြီးသား content တွေကို ပြောင်းမယ်ဆိုရင်လည်း ပြောင်းလို့ရပါတယ်။ 2021-11-03
5:05
17
JavaScript Inner HTML And Create Element
HTML element တစ်ခုအထဲ text content ဖြစ်ဖြစ် HTML elements ကိုဖြစ်ဖြစ် ထည့်လို့ရတဲ့ နည်းလမ်းတွေအများကြီးရှိပါတယ်။ innerHTML ဆိုတဲ့ နည်းလမ်းလေးကို အသုံးပြုပြီး ဘယ်လိုထည့်လဲ ကြည့်ကြည့်ရအောင်ပါ။ 2021-11-03
5:59
18
JavaScript Document Fragment
document fragment ကတော့ virtual document တစ်ခုကို ဖန်တီးလိုက်တာ ဖြစ်ပါတယ်။ လက်ရှိအလုပ်လုပ်နေတဲ့ document ကို အကျိုးသက်ရောက်မှုမရှိစေပါဘူး။ ဒါဟာ performance အတွက် အလွန်ကောင်းပါတယ်။ 2021-11-03
8:56
19
JavaScript Insert Before
Element တစ်ခုခုရဲ့မတိုင်ခင် နောက်ထပ် element တစ်ခုကို ထည့်လိုလျှင် insert Before ဆိုတဲ့ method ကို အသုံးပြုနိုင်ပါတယ်။ တခြားထည့်လို့ရတဲ့ နည်းလမ်းတွေအများကြီးရှိပေမယ် တစ်ခုခုရဲ့ရှေ့မှာ ထည့်မယ်ဆိုရင် insertBefore ကို အသုံးပြုနိုင်ပါတယ်။ 2021-11-03
7:18
20
JavaScript Insert After
Element တစ်ခုပြီးတော့ နောက်ထပ် element တစ်ခုကို ထည့်လိုလျှင် insertAfter ကို အသုံးပြုနိုင်ပါတယ်။ 2021-11-03
8:36
21
JavaScript Append
Element တစ်ခုရဲ့အထဲမှာ နောက်ထပ် element တစ်ခုကို child element အနေနဲ့ နောက်ဆုံးမှာ ပေါင်းထည့်တာကို append လို့ခေါ်ပါတယ်။ 2021-11-03
5:19
22
JavaScript Prepend
Element တစ်ခုရဲ့အထဲမှာ နောက်ထပ် element တစ်ခုကို child element အနေနဲ့ ရှေ့ဆုံးမှာ ပေါင်းထည့်တာကို prepend လို့ခေါ်ပါတယ်။ 2021-11-03
4:03
23
JavaScript Child Replace
Element တစ်ခုအထဲမှာ child elements တွေကို replace လုပ်ချင်တယ်ဆိုရင် replaceChild ကိုအသုံးပြုနိုင်ပါတယ်။ 2021-11-03
4:39
24
JavaScript Insert Adjacent
Insert adjacent ကတော့ element ဖြစ်ဖြစ် text node တစ်ခုခုပဲ ဖြစ်ဖြစ် dynamically insert လုပ်တဲ့အချိန်မှာ ထည့်မယ်လို့ သတ်မှတ်ထားတဲ့ selector ရဲ့ အပေါ်မှာဖြစ်ဖြစ်၊ အောက်မှာ ဖြစ်ဖြစ်၊ အထဲအပေါ်မှာ ဖြစ်ဖြစ်၊ အထဲအောက်မှာ ဖြစ်ဖြစ် စိတ်ကြိုက်ထည့်တာကို ခေါ်တာ ဖြစ်ပါတယ်။ 2021-11-03
5:34
25
JavaScript Clone Node
JavaScript မှာ ရှိပြီးသား element တွေကို clone လုပ်လို့ရသလို၊ dynamically create လုပ်တဲ့ element တွေကိုလည်း clone လုပ်လို့ရပါတယ်။ 2021-11-03
4:53
26
JavaScript Remove Child Element
Element တစ်ခုထဲမှာ ရှိတဲ့ child element တွေကို remove လုပ်မယ်ဆိုရင်တော့ removeChild ဆိုတဲ့ method လေးကို အသုံးပြုနိုင်ပါတယ်။ 2021-11-03
5:26
27
JavaScript Attributes
Element ထဲမှာရှိ attributes တွေကို JavaScript နဲ့ ဘယ်လို access လုပ်လို့ရတယ်၊ attribute အမျိုးအစားတွေကို ဘယ်လိုခွဲခြားလဲဆိုတာကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ 2021-11-03
4:38
28
JavaScript Set Attribute
Node Element တစ်ခုထဲမှာရှိတဲ့ attribute တွေကို dynamically စိတ်ကြိုက်ပြင်ဆင်နိုင်ပါတယ်။ အဲလိုပြင်ဆင်ဖို့အတွက် setAttribute ကို အသုံးပြုရတာ ဖြစ်ပါတယ်။ 2021-11-03
3:22
29
JavaScript Get Attribute
Element တစ်ခုမှာရှိတဲ့ attribute ကိုရရှိလိုတယ်ဆိုရင် getAttribute ကိုအသုံးပြုပြီး ရယူလို့ရပါတယ်။ 2021-11-03
2:51
30
JavaScript Remove Attribute
Element တစ်ခုထဲမှာရှိတဲ့ attribute ကို ဖြုတ်မယ်ဆိုရင် removeAttribute ကိုအသုံးပြုပြီး လုပ်ဆောင်နိုင်မှာ ဖြစ်ပါတယ်။ 2021-11-03
2:50
31
JavaScript Check Attribute
Element တစ်ခုမှာ attribute တစ်ခုရှိလားမရှိဘူးလားဆိုတာကို hasAttriubute နဲ့ စစ်ဆေးနိုင်တာကို တွေ့ရမှာ ဖြစ်ပါတယ်။ 2021-11-03
3:07
32
JavaScript Style
JavaScript မှာ style တွေကို ဘယ်လိုအသုံးပြုလဲဆိုတာကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ Element တစ်ခုကို JavaScript နဲ့ style ဘယ်လိုလုပ်ဆောင်မလဲဆိုတာကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ 2021-11-03
7:36
33
JavaScript Computed Style
Element တစ်ခုထဲမှာရှိတဲ့ style တွေရဲ့ property တစ်ခုချင်းစီရဲ့ value တန်ဖိုးကို ရယူတဲ့အခါ getComputedStyle ကိုအသုံးပြုနိုင်ပါတယ်။ 2021-11-03
9:04
34
JavaScript Class Name
Element တစ်ခုထဲမှာရှိတဲ့ class name ကို ရယူလိုရတဲ့နည်းလမ်းတွေအများကြီးထဲက className နဲ့ getAttribute ကိုအသုံးပြုပြီး ရယူပုံကို ရှင်းပြထားတာ ဖြစ်ပါတယ်။ 2021-11-03
1:49
35
JavaScript Classlist Method
Element တစ်ခုထဲမှာရှိတဲ့ class တွေကို စီမံတဲ့အခါ classList method က အလွန်အသုံးဝင်ပါတယ်။ class တစ်ခုကို ဖြုတ်တာတို့ ပြန်ထည့်တာတို့ စတဲ့ လုပ်ဆောင်ချက်တွေအကုန်လုံးအတွက် အသုံးပြုနိင်ပါတယ်။ 2021-11-03
7:35
36
JavaScript Element Width & Height Calculate
JavaScript နဲ့ Element တစ်ခုရဲ့ width တွေheight တွေ ကို တွက်ချက်ယူလို့ရပါတယ်။ 2021-11-03
9:24
37
JavaScript Event Intro
JavaScript မှာ Browser လုပ်ဆောင်ချက်ဖြစ်ဖြစ် Keyboard လုပ်ဆောင်ချက်ဖြစ်ဖြစ် Mouse လုပ်ဆောင်ချက်ဖြစ်ဖြစ်၊ မိမိစိတ်ကြိုက်လုပ်ဆောင်ချက်ဖြစ်ဖြစ် အဲဒီအရာအားလုံးကို JavaScript Event ကို အသုံးပြုပြီးလုပ်ဆောင်နိုင်တာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-11-03
15:58
38
JavaScript Event Handling
JavaScript Event တစ်ခုအတွက် လုပ်ဆောင်ချက်တွေလုပ်တာကို event handling လို့ခေါ်ပါတယ်။ တစ်ချို့ကတော့ event listener လို့လည်းခေါ်ကြပါတယ်။ 2021-11-03
7:57
39
JavaScript DOMContentLoaded Event
DOMContentLoaded event က HTML စာမျက်နှာထဲမှာ HTML တစ်ခုပဲ loaded ဆွဲပြီးတဲ့အခါ အလုပ်လုပ်တာ ဖြစ်ပါတယ်။ အဲဒီအချိန်မှာ CSS ၊ JavaScript တို့ ၊ Image တို့ ၊ တခြား external file တွေဘာမှ loaded မဖြစ်သေးပါဘူး။ အဲလိုမျိုးအနေအထားကို DOMContentLoaded လို့ခေါ်တာ ဖြစ်ပါတယ်။ 2021-11-03
7:50
40
JavaScript Load Event
Document ထဲမှာရှိတဲ့ element ဖြစ်ဖြစ် Image ကို ဖြစ်ဖြစ် ဘယ်အရာကို မဆို loading ဆွဲပြီရင် လုပ်ဆောင်ချင်တယ်ဆိုရင် load ဆိုတဲ့ event နဲ့ လုပ်ဆောင်နိုင်တာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-11-03
9:55
41
JavaScript Mouse Move Event
JavaScript နဲ့ mouse ရွေ့တဲ့အချိန်မှာ လုပ်ဆောင်ချက်တစ်ခုလုပ်ဆောင်ချင်ရင် mousemove event ကို အသုံးပြုနိုင်ပါတယ်။ 2021-11-03
8:44
42
JavaScript Click Event Mouse Down Mouse Up
JavaScript မှာ mouse ကို click လုပ်တဲ့အချိန်မှာ ဖြစ်ပေါ်တဲ့ event တွေအတွက် mouse up နဲ့ mouse down event ကို အသုံးပြုနိုင်ပါတယ်။ အဲဒီအထဲမှာ click event တို့ double click event တို့ပါ ပါဝင်တာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-11-03
6:24
43
JavaScript Double Click Event
Mouse ကို double click နှိပ်တဲ့အချိန်မှာ ဖြစ်ပေါ်တဲ့ event အတွက် dbclick ကို အသုံးပြုနိုင်ပါတယ်။ 2021-11-03
5:01
44
JavaScript Keyboad Event
Keyboard နဲ့ ပတ်သတ်ရင် JavaScript မှာ keypress ၊ keyup ၊ keydown ဆိုတဲ့ event တွေရှိပါတယ်။ ၄င်းတို့အကို အသုံးပြုပုံတွေကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ 2021-11-03
9:02
45
JavaScript Scroll Event
Mouse ကို scroll လုပ်တဲ့အချိန်မှာ ဖြစ်ပေါ်တဲ့ event ကို scroll event ကိုခေါ်ပါတယ်။ 2021-11-03
11:36
46
JavaScript Scroll Interact With Element
Scroll ကိုအသုံးပြုပြိးတော့ element တွေကို scroll လုပ်လို့ရဲဲ့ method နှစ်ခုကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ အဲဒါတွေကတော့ scrollIntoView နဲ့ scrollTo တို့ ဖြစ်ကြပါတယ်။ 2021-11-03
13:11
47
JavaScript Focus and Blur Event
Input field တွေအတွက် Event တွေထဲမှာ အရေးပါတဲ့ event တွေကတော့ focus ၊ blur event တွေဖြစ်ပါတယ်။ 2021-11-03
4:49
48
JavaScript Event Delegation
Event delegation ဟာ JavaScript Event တွေကို စီမံရာမှာ အရေးပါပါတယ်။ Performance ပါ ပိုမိုကောင်းမွန်လာတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-11-03
7:06
49
JavaScript Handling Form
JavaScript မှာ form ထဲမှာပါတဲ့ input တွေ ၊ အချက်အလက်ပို့ဆောင်ခြင်းတွေ၊ validation လုပ်ဆောင်ခြင်းတွေ form value ပြင်ဆင်ခြင်းတွေ စတဲ အချက်တွေကို JavaScript နဲ့ အကုန်စီမံနိုင်တယ်ဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-11-03
8:27
50
setTimeOut and clearTimeOut in JavaScript
ဘယ်အချိန်မှာ ဘယ် code တွေ functions တွေကို run မယ်စတဲ့အချိန်နဲ့ ဆိုင်တဲ့ ကိစ္စတွေအတွက် setTimeOut နဲ့ clearTimeOut ဆိုတဲ့ functions ကို အသုံးပြုနိုင်ပါတယ်။ 2021-11-25
12:31
51
Set Interval in JavaScript
မိမိရေးသားထားတဲ့ code တွေကို လုပ်ဆောက်ချက်များကို သတ်မှတ်ထားတဲ့အချိန်မှာ အလုပ်လုပ်စေချင်တဲ့အခါမျိုးမှာ setinterval ကို အသုံးပြုပြီးတော့ လုပ်ဆောင်ချက်အား ပြန်လည်ရပ်တန့်လိုတဲ့အခါ clearInterval ကို အသုံးပြုရပါတယ်။ 2021-11-25
12:46