Dom manipulation

Dom manipulating implementation

Dom ကိုအသုံးပြုမယ်ဆို document နဲ့စရပါတယ်။

html element တွေကို dom အသုံးပြုပြီး manipulate လုပ်မယ်ဆို document နောက်မှာ getElementBy ကိုသုံးပြီး html element တွေကို access လုပ်ရပါတယ်။ Html element တွေကို access လုပ်မယ်ဆို သူ့ရဲ့ id နဲ့လား, class name နဲ့လား, tag နဲ့လား စတာတွေရှိပါတယ်။ getElementById, getElementByClassName, getElementByTagName စတာတွေပဲ ဖြစ်ပါတယ်။ အောက်က code ကိုလေ့လာကြည့်ပါ။

အပေါ်က code ကို run ကြည့်တဲ့အခါ console မှာ html element တွေကို object အနေနဲတွေ့ရမှာပဲ ဖြစ်ပါတယ်။

tag name, class name တွေနဲ့ access လုပ်တဲ့အခါ object ထဲမှာ အဲ့တာနဲ့ပက်သက်တဲ့ object တွေအကုန် return ပေးမှာဖြစ်တဲ့အတွက် တစ်ခုချင်းစီကို access လုပ်ဖို့ for loop ကိုအသုံးပြုပြီး access လုပ်ရပါတယ်



နောက်တစ်ခုက parent နဲ့ child nodes တွေကို manipulate တဲ့နည်းပါ။ Html က အကုန်လုံးရဲ့ parent node ဖြစ်ပြီး div ကတော့ html ရဲ့ child nodes ဖြစ်ပြီး div ထဲက p ရဲ့ parent nodes က div ပဲ ဖြစ်ပါတယ်။ parent node ထဲက child node ကိုထည့်နည်း၊ ဖျက်နည်း က အရေးကြီးပါတယ်။ ဘာလို့လဲဆိုတော့ social media website တွေဖြစ်တဲ့ facebook, twitter တို့မှာ post တစ်ခုစီကို div နဲ့ စုထားတာပဲ ဖြစ်ပါတယ်။ အဲ့တာကြောင့် အထဲက data တွေကို access, update, delete လုပ်တတ်ဖို့က အရေးကြီးပါတယ်။ အောက်က code ထဲမှာ access, update, delete လုပ်နည်းကိုကြည့်ရအောင်။


Attribute တွေကို handle လုပ်တဲ့နည်းကလည်းအရေးကြီးပါတယ်။ attribute ဆိုတာ html tag ထဲက id တို့ class တို့ပဲ ဖြစ်ပါတယ်။ ဘာလို့ဒါက အရေးကြီးလဲဆိုတော့ ecommerce website တွေမှာ product ကို ဝယ်လို့ရတယ်, cart ထဲက ထည့်ထားလို့ရတယ်။ review ပေးလို့ရတယ်။ စတဲ့ button တွေအများကြီးက product တစ်ခုတည်းမှာရှိတာမလို့ user က ဘယ် button နှိပ်လိုက်လည်းဆိုတာသိမှ သူနဲ့သက်ဆိုင်တဲ့ functionality တွေ perform လုပ်လို့ရမှာဖြစ်ပါတယ်။ button tag ရဲ့ attribute မှာ data- နဲ့စပြီး button က ဘာ action လုပ်လဲ သတ်မှတ်ပေးရပါတယ်။ javascript မှာ dataset ကိုအသုံးပြုပြီး access လုပ်ပါတယ်။ ဒါ့အပြင် dom ကိုအသုံးပြုပြီး attribute တွေကို create, remove လုပ်လို့ရပါတယ်။


အောက်ဆုံးက Code နှစ်ခုကို comment လုပ်ထားပါတယ်။ class ကို remove လုပ်လိုက်လို့ အပေါ်က setAttribute လုပ်ထားတာ မမြင်သာမှာ စိုးလို့ပါ။ သင်စမ်းကြည့်မယ်ဆိုရင်တော့ comment ကိုဖြတ်လို့ရပါတယ်။

Html element ထဲက attribute တွေကို .attribute_name နဲ့လည်း ပြောင်းလဲနိုင်ပါတယ်။ ဉပမာ

document.getElementById('demo').class = 'New class name'



data- ကိုသုံးပြီး button ရဲ့ action ကို သတ်မှတ်တာပဲ ဖြစ်ပါတယ်။ code ကိုနည်းနည်းလေးရှင်းပြပါရစေ။ addEventListener ကိုသုံးပြီး click event ကို handle လုပ်မယ်ဆို parameter တစ်ခုကို input အနေနဲ့ယူလို့ရတယ်။ event parameter, အဲ့တာက ဘာလုပ်လဲဆိုတော့ click ခံရတဲ့ button ရဲ့ info တွေအကုန်အဲ့ parameter ထဲထည့်ထားတာ။ event.target ကကျတော့ သင် click လိုက်တဲ့ button ရဲ့ html tag တွေ, အကုန်ပြပေးပါတယ်။ Try ကြည့်ရင်ပိုနားလည်ပါလိမ့်မယ်။ dataset ကတော့ အဲ့ button ရဲ့ data- နဲ့စတဲ့ attribute တွေကို access လုပ်တဲ့နေရာမှာသုံးပါတယ်။ နောက်က action ကတော့ data- ရဲ့နောက်က action ကို​ပြောတာပါ။

Dom ကိုအသုံးပြုပြီး css style တွေကို manipulate လုပ်လို့ရပါတယ်။ element.style ကိုအသုံးပြုရပါတယ်။ style ရဲ့နောက်မှာ ကိုယ်ပြောင်းချင်တဲ့ နေရာကိုပဲရွေးနိုင်သလို cssText ကိုအသုံးပြုပြီး element ရဲ့ style တစ်ခုလုံးကိုပြောင်းနိုင်ပါတယ။ css မှာ background-color က js မှာ - အစား backgroundColor လို့ရေးရပါတယ်၊ ဘာလို့လဲဆိုတော့ - က js မှာ အနုတ်ဖြစ်နေလို့ပါ။ classList ကိုလည်းသုံးတတ်ရပါမယ် ဒါမှ bootstrap လို framework တွေသုံးတဲ့အခါ အဆင်ပြေမှာပါ။




Popular posts from this blog

Data Structure introduction

Image
Data Structure ဆိုတာ data တွေကို memory ထဲမှာ ပုံစံတစ်ခုခု ဒါမှမဟုတ် structure တစ်ခုအဖြစ်သိမ်းဆည်းထားတဲ့အရာဖြစ်ပြီး data structure တစ်ခုစီတိုင်းမှာ advantage တစ်ခုစီရှိပါတယ်။ အပေါ်ကပုံထဲကအတိုင်း data structure ကိုအမျိုးအစားခွဲထားပါတယ်။ Linear data structure ဆိုတာကတော့ data တွေက sequential ဖြစ်နေပြီး data တစ်ခုက သူ့ရဲ့ ရှေ့က data နဲ့ နောက်က data နဲ့ တစ်နည်းနည်းနဲ့ချိတ်ဆက်နေပါတယ်။ ဉပမာ array, stack, queue, linked list လိုမျိုပေါ့။ . Static data structure မှာတော့ data တွေက fixed memory size ရှိပါတယ်။ အဲ့တာကဘာလဲဆိုတော့ static data structure တစ်ခုကို ဖန်တီးပြီးရင် hard code လုပ်ရုံကလွဲပြီး ကျန်တဲ့နည်းနဲ့ ပြောင်းလို့မရပါဘူး။ python က tuple နဲ့ concept တူပါတယ်။ ဉပမာ array လိုမျိုးပေါ့။ array ကိုပြောင်းလဲလို့ရတာသိပါတယ်။ တစ်ချို့ Programming Laguage တွေဖြစ်တဲ့ java, c++ တွေမှာ array ကို create ပြီးပြန်ပြင်လို့မရတာကို static array ဖြစ်ပြီး၊ java.util package ထဲက ArrayList ကိုတော့ create ပြီးလည်းပြင်လို့ရတဲ့အတွက် dynamic array ပဲ ဖြစ်ပါတယ်။ . Dynamic data structure ကတော့ fixed memory ...
Read more

Algorithm basic examples

Image
အရင်ဆုံး return statement ဘယ်လိုအလုပ်လုပ်လဲ သိရပါမယ်။ function တစ်ခုရဲ့ value ကိုသတ်မှတ်ပေးတယ့် statement ဖြစ်ပြီး၊ value တစ်ခုခုကို return လိုက်ရင်အောက်က code တွေကို ဆက်မ run ပဲ။ function ကိုအဆုံးသတ်ပေးပါတယ်။ example နဲ့ကြည့်ရအောင်။ အောက်က ပုံမှာ function နှစ်ခုကို နှိုင်းယှဉ်ကြည့်ပါ။ တစ်ခုက return statment နဲ့ နောက်တစ်ခုက print နဲ့နှိုင်းယှဉ်ထားတာပဲ ဖြစ်ပါတယ်။ print_variable ထဲက function က x ကို print ပဲ လုပ်တာပါ။ variable ထဲက function က ဘာတန်ဖိုးမှမရှိပါဘူး None ပါ။ နောက်တစ်ခုကတော့ return statement နဲ့ ဖြစ်ပြီး ဘာကိုမှ print မလုပ်ပါဘူး၊ return ရှေ့က value ကိုပဲ return_variable ထဲ assign လိုက်တာပါ။ အောက်က ဉပမာမှာတော့ x ကို return လိုက်တဲ့အခါ function က အဆုံးသတ်သွားပြီး အောက်က code တွေကိုရပ်လိုက်ပါတယ်။ အပေါ်ဆုံးက algorithm 3 ခု ကို pseudo code နဲ့ရေးထားပြီး အောက်ဆုံးကဟာကိုတော့ python2 အသုံးပြုထားပါတယ်။ 1. X and Y multiply Input နှစ်ခုယူပါမယ်။ X and Y ဖြစ်ပြီး၊ နှစ်ခုကိုမြှောက်မယ့် algorithm ပါ။ ဒါကတော့ ရိုးရှင်းပါတယ်။ ရှင်းပြစရာမလိုလောက်ဘူးထင်တယ်။ 2...
Read more

Dom introduction

ဒီ Series မှာအရင်ဆုံး DOM manipulation အကြောင်းနဲ့အရင်ဆုံးစတင်ပါမယ်။ အရင်ဆုံး DOM ဆိုတာဘာလဲ။ နောက်တစ်မျိုး Document Object Model လို့လည်းခေါ်လို့ရပါတယ်။ Html element တွေကို ​javascript ကိုသုံးပြီး ပြောင်းလဲချင်တယ်၊ attribute တွေကိုပြောင်းလဲမယ်၊ javascript ထဲမှာပဲ html element တွေဖန်တီးမယ် စတဲ့ task တွေကို DOM ကိုအသုံးပြုပြီး ပြုလုပ်ရမှာပဲ ဖြစ်ပါတယ်။ Dom မှာ Html element တွေကို object တစ်ခုအနေနဲ့ manipulate လုပ်ပါတယ်။ object ဆိုတာဘာလဲ မသိရင် javascript oop ကိုနည်းနည်းလေ့လာဖို့လိုပါမယ်။ Web development မှာ Dom manipulation ဟာအရေးကြီးပါတယ် ဘာလို့လဲဆိုတော့ Html element တွေကိုပြောင်းလဲတဲ့အခါမှာ refresh လုပ်စရာမလိုပါဘူး။ ဉပမာပေးပြီးပြောပါမယ်။ Social media website တစ်ခု သင့်မှာရှိတယ်။ အဲ့ website ထဲက post တစ်ခုကို like လုပ်လိုက်ရင် like လုပ်ခံထားရတဲ့ post ရဲ့ id ကို web server ကိုပို့လိုက်မယ်။ post တစ်ခုစီတိုင်းမှာ unique id တစ်ခုရှိတယ်သဘောထားလိုက်။ web server က database ထဲမှာအဲ့ id နဲ့ post ကိုရှာပြီး အဲ့ post ရဲ့ like အရေအတွက်ကို တစ်ခုတိုးပေးလိုက်ပြီ။ ဒါမယ့် like အရေအတွက်တိုးလာတာကို တွေ့ရဖိ...
Read more