About Serie
Practical JavaScript
Practical JavaScript သင်ခန်းစာသည် JavaScript အခြေခံသိသူများနှင့် DOM အကြောင်းကို သိသူများကို ရည်ရွယ်ထားပါတယ်။ ယခု series တွင် JavaScript ကိုအခြေခံပြီး project အသေးလေးများကို ပြုလုပ်ထားခြင်း ဖြစ်ပါတယ်။
Episodes
episodesUpdated
2021-12-06Level
Intermediate
About Current Episode
30
Adding icon and score
ဒီသင်ခန်းစာမှာတော့ game item လေးတွေကို emoji လေးတွေ အစားထိုးပြီးတော့ ဘယ်လိုလုပ်ဆောင်ပုံကို မြင်တွေ့ရမှာ ဖြစ်ပါတယ်။ Game တစ်ခုမှာ အမှတ်ပေးပြီး ဆုံးဖြတ်နိုင်အောင် score တွေကို ပါ dynamically ထည့်သွားတာကို တွေ့မြင်ရမှာ ဖြစ်ပါတယ်။ 2021-12-06
8:40
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