About Serie
Practical JavaScript
Practical JavaScript သင်ခန်းစာသည် JavaScript အခြေခံသိသူများနှင့် DOM အကြောင်းကို သိသူများကို ရည်ရွယ်ထားပါတယ်။ ယခု series တွင် JavaScript ကိုအခြေခံပြီး project အသေးလေးများကို ပြုလုပ်ထားခြင်း ဖြစ်ပါတယ်။
Episodes
episodesUpdated
2021-12-06Level
Intermediate
About Current Episode
32
Remove Game Item
ဒီသင်ခန်းစာမှာတော့ Game မှာပါတဲ့ item လေးတွေကို click လုပ်လိုက်တဲ့အချိန်မှာ အမှတ်အတိုးအလျော့လုပ်တာလေးတွေကို ဖန်တီးသွားမှာ ဖြစ်ပါတယ်။ 2021-12-06
9:50
1
Practical JavaScript Series Outline
ယခု series တွင် ပါဝင်သည့်အချက်အလက်များကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ ယခု series တွင် todo list ၊ gallery ၊ form validation ၊ sliders အစရှိသည့် project အသေးများကို လုပ်ဆောင်သွားမှာ ဖြစ်ပါတယ်။ 2021-12-06
10:30
2
JavaScript Local Storage
Local Storage က အသုံးပြုသူရဲ့ browser ထဲတွင် အချက်အလက်များကို ခဏသိမ်းထားချင်သည့်အခါ အလွန်အရေးပါပါတယ်။ Local storage နဲ့ ဆင်တူတဲ့ session storage ဆိုတာ ရှိပါတယ် ဒါပေမယ် session storage မှာ expire time ရှိပြီးတော့ local storage မှာတော့ expire time မရှိပါ။ 2021-12-06
21:18
3
Toggle Sidebar Menu With Local Storage
Sidebar menu တစ်ခုကို JavaScript နဲ့ toggle အဖွင့်အပိတ်လုပ်ပြီး local storage နဲ့ လုပ်ဆောင်သွားတာကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ 2021-12-06
13:00
4
Tag UI
JavaScript နဲ့ Tag UI ကို လုပ်ဖို့အတွက် ရှေ့ဦးစွာ static အနေနဲ့ အရင်တည်ဆောက်တာ ဖြစ်ပါတယ်။ ဒီသင်ခန်းစာမှာတော့ HTML နဲ့ CSS ကိုအသုံးပြုပြီး tag UI ကို ဖန်တီးထားတာ ဖြစ်ပါတယ်။ 2021-12-06
12:29
5
Show Tag Using JavaScript
ဒီသင်ခန်းစာမှာတော့ tag data ကို သတ်မှတ်ပြီးတော့ tag လေးတွေကို JavaScript နဲ့ ဘယ်လိုပြရမယ်ဆိုတာကို ရှင်းပြထားတာ ဖြစ်ပါတယ်။ 2021-12-06
17:01
6
Create Tag Using JavaScript
ဒီသင်ခန်းစာမှာတော့ form input value ကို tag တစ်ခုအနေနဲ့ ဘယ်လိုအပြောင်းအလဲ လုပ်ပြီးတော့ ဖန်တီးလဲဆိုတာကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ 2021-12-06
8:58
7
Remove Tag
ဒီသင်ခန်းစာမှာတော့ array အနေနဲ့ local storage ထဲမှာ ထည့်ထားတဲ့ tags လေးတွေကို ဘယ်လို ဖယ်ထုတ်သွားမယ်ဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ 2021-12-06
15:29
8
To do list UI
To do list တစ်ခုဖန်တီးဖို့အတွက် UI ကို CSS ကိုအသုံးပြုပြီးတော့ ဘယ်လိုတည်ဆောက်မလဲဆိုတာကို ရှင်းပြသွားမှာ ဖြစ်ပါတယ်။ 2021-12-06
14:32
9
Show to do list Item
ဒီ သင်ခန်းစာမှာတော့ To do list item တွေကို JavaScript နဲ့ ဘယ်လိုဖော်ပြသွားမလဲဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-12-06
12:00
10
Create dynamically to do item
To do list အချက်အသစ်များကို dynamically ဘယ်လိုပေါင်းထည့်သွားမလဲဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ 2021-12-06
12:13
11
Remove to do list item
ဒီတစ်ခါမှာတော့ to do list item တွေထဲကအချက်အလက်တွေကို ဖျက်တဲ့အပိုင်းကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ Array တစ်ခုထဲမှာ အချက်အလက်တွေကို ဖျက်လို့ရတဲ့ နည်းလမ်းတွေ အများကြီးရှိပေမယ် အရိုးရှင်းဆုံးဖြစ်တဲ့ splice ကိုအသုံးပြုထားပါတယ်။ 2021-12-06
16:07
12
Edit to do list item
JavaScript မှာ တစ်ခုခုကို edit လုပ်မယ်ဆိုရင် update ကိုပါ တွဲပြီးတော့ စဥ်းစားရပါတယ်။ ဒီသင်ခန်းစာမှာတော့ to do list တစ်ခုချင်းစီကို ဘယ်လို edit လုပ်မလဲဆိုတာကို ရှင်းပြသွားမှာ ဖြစ်ပါတယ်။ 2021-12-06
24:25
13
Password Listing UI
ဒီသင်ခန်းစာမှာတော့ သက်ဆိုင်ရာအလိုက် password တွေကို စီမံတာ လုပ်ဆောင်ဖို့အတွက် listing တစ်ခုအနေနဲ့ ပြသမှာ ဖြစ်ပါတယ်။ 2021-12-06
7:43
14
Password Information UI
Password တစ်ခုသိမ်းထားရာမှာ ၎င်းနဲ့ သက်ဆိုင်တဲ့အချက်အလက်တွေကို ကြည့်နိုင်ဖို့အတွက် သူ့ရဲ့ detail စာမျက်နှာ တစ်ခုကို တည်ဆောက်ဖို့လိုအပ်ပါတယ်။ 2021-12-06
7:50
15
Dynamically Password Listing
ဒီသင်ခန်းစာမှာတော့ Password listing တွေကို dummy data လေးတွေကို ဘယ်လို dynamically ပြသသွားမယ်ဆိုတာကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ 2021-12-06
13:19
16
Load Password Detial
Password List တစ်ခုချင်းစီမှာပါတဲ့အချက်အလက်လေးတွေကို dynamically ဘယ်လိုပြသသွားမယ်ဆိုတာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-12-06
19:28
17
Create Form Frame
ဒီသင်ခန်းစာမှာတော့ Password တစ်ခုကို သိမ်းဆည်းဖို့အတွက် Form frame လေးတည်ဆောက်တာကို ပြထားတာ ဖြစ်ပါတယ်။ 2021-12-06
17:29
18
Form Style And Toggle Control
Password တွေကို ဖန်တီးဖို့အတွက် Form တစ်ခုကို တည်ဆောက်ပြီး Style ပြုလုပ်မှာ ဖြစ်ပါတယ်။ ပြီးတော့မှာ Form ကို ပိတ်တာတွေ ဖွင့်တာတွေအတွက် ထိန်းချုပ်မှုပြုလုပ်မှာ ဖြစ်ပါတယ်။ 2021-12-06
9:03
19
Save Password Data
Password နဲ့ သတ်ဆိုင်တဲ့အချက်အလက်တွေကို array ထဲမှာ object တစ်ခုစီအနေနဲ့ သိမ်းထားတော့ array push method နဲ့ အသစ် object ကို ပြန်သိမ်းဆည်းပုံတွေကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ 2021-12-06
13:20
20
Show Message
ကိစ္စတစ်ခုကို လုပ်ဆောင်ပြီးတဲ့အချိန်မှာ လုပ်ဆောင်ချက် အောင်မြင်သည်၊ မအောင်မြင်ပါ၊ မည်သည့်ပြသာနာများနှင့် ကြုံနေရပါသည် စသဖြင့် အချက်အလက်များကို ဖော်ပြရာတွင် message သည် အလွန်အသုံးဝင်လှပါသည်။ 2021-12-06
8:40
21
Edit Password Information
Local Storage ထဲမှာ သိမ်းထားတဲ့အချက်အလက်တွေကို input form fields အများကြီးနဲ့ password information အတွက် ဘယ်လို edit လုပ်မလဲဆိုတာကို တွေ့ရမှာ ဖြစ်ပါတယ်။ 2021-12-06
12:17
22
Update Password Information
ဒီသင်ခန်းစာမှာတော့ အချက်အလက်တစ်ခု ဖန်တီးတာနဲ့ ပြုပြင်တာတွေကို form တစ်ခုတည်းထဲမှာ လုပ်ဆောင်သွားမှာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-12-06
8:56
23
Delete Password Record
ဒီသင်ခန်းစာမှာတော့ သိမ်းဆည်းထားတဲ့ record တွေကို ဘယ်လိုဖျက်မလဲဆိုတာကို တွေ့ရမှာ ဖြစ်ပါတယ်။ အချက်အလက်တွေကို local storage မှာကော UI မှာပါ ပျက်သွားတာကို တွေ့ရမှာ ဖြစ်ပါတယ်။ 2021-12-06
8:39
24
Form UI
JavaScript နဲ့ form validation တစ်ခုလုပ်ဆောင်ပုံဘယ်လို နည်းလမ်းလေးတွေနဲ့ လုပ်ဆောင်လို့ရတယ်ဆိုတာကို ပြသသွားမှာ ဖြစ်ပါတယ်။ 2021-12-06
8:06
25
Input validation for each input
Input field တစ်ခုချင်းစီကို ဘယ်လို validation လုပ်ရမလဲ message တွေကို ဘယ်လိုပြသရမလဲဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ 2021-12-06
15:27
26
Input required field
ဒီသင်ခန်းစာမှာတော့ form တစ်ခုရဲ့ input field ကို required စစ်လိုတဲ့အခါ ဘယ်လိုပုံစံမျိုးလုပ်ဆောင်လို့ရတယ်ဆိုတာကို ရှင်းပြထားတာ ဖြစ်ပါတယ်။ 2021-12-06
8:12
27
Max Input Validation
HTML input ထဲမှာ number တန်ဖိုးလေးတစ်ခုကို ထည့်တဲ့အချိန်မှာ validation လုပ်မယ် process ကို ဖော်ပြထားတာ ဖြစ်ပါတယ်။ ပြီးတော့ form တွေအများကြီးအတွက် validation process တည်ဆောက်ပုံကိုပါ ဖော်ပြထားပါတယ်။ 2021-12-06
19:16
28
Game Intro
ဒီသင်ခန်းစာမှာတော့ Game တစ်ခု စလုပ်ဖို့အတွက် ဘာတွေ HTML frame လေးတွေ CSS style လေးတွေကို စတင်လုပ်ဆောင်မှာ ဖြစ်ပါတယ်။ 2021-12-06
9:34
29
Game item dynamically loaded
ဒီသင်ခန်းစာမှာတော့ Game အတွက် item လေးတွေကို dynamically load လုပ်ပြီးတော့ အချိန်တစ်ခုသတ်မှတ်ပြီးတော့ item အသစ်အသစ်တွေကို ဘယ်လိုဖန်တီးမလဲဆိုတာကို တွေ့ရမှာ ဖြစ်ပါတယ်။ 2021-12-06
12:22
30
Adding icon and score
ဒီသင်ခန်းစာမှာတော့ game item လေးတွေကို emoji လေးတွေ အစားထိုးပြီးတော့ ဘယ်လိုလုပ်ဆောင်ပုံကို မြင်တွေ့ရမှာ ဖြစ်ပါတယ်။ Game တစ်ခုမှာ အမှတ်ပေးပြီး ဆုံးဖြတ်နိုင်အောင် score တွေကို ပါ dynamically ထည့်သွားတာကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ 2021-12-06
8:40
31
Game Information Box
လက်ရှိလုပ်ဆောင်နေတဲ့ Game နဲ့ ပတ်သတ်ပြီးအချက်အလက်တွေကို ဖော်ပြဖို့အတွက် Game information တွေပြသမဲ့ အရာလေးတစ်ခုကို ဖန်တီးပြမှာ ဖြစ်ပါတယ်။ 2021-12-06
4:05
32
Remove Game Item
ဒီသင်ခန်းစာမှာတော့ Game မှာပါတဲ့ item လေးတွေကို click လုပ်လိုက်တဲ့အချိန်မှာ အမှတ်အတိုးအလျော့လုပ်တာလေးတွေကို ဖန်တီးသွားမှာ ဖြစ်ပါတယ်။ 2021-12-06
9:50
33
Game show time
ဒီသင်ခန်းစာမှာတော့ game တစ်ခုအတွက် ကြာချိန်ဖော်ပြဖို့အတွက် အချိန်လေးကို ဘယ်လိုဖော်ပြမလဲဆိုတာကို ရှင်းပြသွားမှာ ဖြစ်ပါတယ်။ 2021-12-06
8:13
34
Element move using javascript
CSS ရဲ့ တစ်ချို့ animation တွေကို JavaScript နဲ့ ထိန်းချုပ်ဖို့ နည်းနည်းအခက်အခဲဖြစ်နေတဲ့အနေအထားမှာဆိုရင် JavaScript သီးသန့်နဲ့ပဲ animation လုပ်တာက ပိုပြီးတော့ ကောင်းပါတယ်။ ဒီသင်ခန်းစာမှာ JavaScript နဲ့ animation ဘယ်လိုလုပ်သွားလဲဆိုတာကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ 2021-12-06
11:58
35
About element position
Screen view port ထဲမှာ မြင်နေရတဲ့ element ရဲ့ position အနေအထားကို JavaScript နည်းပညာကို အသုံးပြုပြီး သိရှိနိုင်တဲ့ နည်းလမ်းတွေအများကြီးရှိပါတယ်။ အဲဒီအထဲကမှ ဒီသင်ခန်းစာမှာ လက်တွေ့မှာ အသုံးများတဲ့ ဟာလေးနှစ်ခုကို ရှင်းပြသွားမှာ ဖြစ်ပါတယ်။ 2021-12-06
3:31
36
Remove item and game control by keyboard
ဒီတစ်ခါမှာတော့ Game ထဲမှာရှိတဲ့ items လေးတွေကို အချိန်တစ်ခုသတ်မှတ်ပြီးတော့ dynamically ဖျက်ပါမယ်။ ပြီးမှ keyboard event ကို ဘယ်လိုထည့်မလဲဆိုတာကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ 2021-12-06
11:51
37
Game keyboard control and further study
Game application ရဲ့ နောက်ဆုံးသင်ခန်းစာအနေနဲ့ keyboard control လေးတွေ ထည့်တဲ့အပိုင်းတွေပါမယ်။ ဒီသင်ခန်းစာလေးကိုအခြေခံပြီးတော့ နောက်ထပ် ဘာတွေ ထပ်လေ့လာလို့ရမယ်ဆိုတာကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ 2021-12-06
11:00
38
Gallery HTML frame and style
ဒီသင်ခန်းစာမှာတော့ gallery တစ်ခုဖန်တီးဖို့အတွက် HTML structure တွေကို အရင်တည်ဆောက်ပြီးတော့ style decoration တွေ ပြုလုပ်သွားမှာကို တွေ့ရမှာ ဖြစ်ပါတယ်။ 2021-12-06
16:19
39
JavaScript closest and click image
ဒီတစ်ခါမှာတော့ Gallery pop up ကို ပေါ်အောင် style ကို ဘယ်လိုထည့်ရမယ်၊ JavaScript ရဲ့ closest method ကို ဘယ်လိုသုံးရမယ်ဆိုတာရယ် စတဲ့အချက်လေးတွေ ပါဝင်တာကို တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-12-06
8:51
40
Show gallery popup and close event
ဒီသင်ခန်းစာမှာတော့ ဓါတ်ပုံတစ်ခုကို နှိပ်လိုက်တဲ့အချိန်မှာ gallery တစ်ခုကို popup တစ်ခုအနေနဲ့ ဘယ်လိုပေါ်အောင် လုပ်ဆောင်ပုံ၊ Popup ကို ဘယ်လို ပြန်ပိတ်မလဲ စတဲ့အချက်လေးတွေကို ရှင်းပြထားခြင်း ဖြစ်ပါတယ်။ 2021-12-06
10:20
41
Gallery Navigation
Gallery တစ်ခုကို တည်ဆောက်တဲ့အခါ navigation တွေကို ဘယ်လိုတည်ဆောက်မလဲဆိုတာကို ဖော်ပြထားတာ ဖြစ်ပါတယ်။ navigation နဲ့ keyboard event တွဲစပ်အသုံးပြုထားပုံကိုလည်း တွေ့ရှိရမှာ ဖြစ်ပါတယ်။ 2021-12-06
17:09
42
Gallery autoplay
ဒီသင်ခန်းစာကတော့ Gallery ရဲ့ နောက်ဆုံးသင်ခန်းစာ ဖြစ်ပါတယ်။ ဒီအထဲမှာ auto play ဖြစ်အောင် ဘယ်လို လုပ်ဆောင်သွားလဲဆိုတာကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ ဒီ gallery ကို အခြေခံပြီးတော့ မိမိစိတ်ကူးရှိသလို ဖန်တီးယူနိုင်ပါတယ်။ 2021-12-06
13:34