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 အရေအတွက်တိုးလာတာကို တွေ့ရဖို့ page ကို refresh လုပ်ဖို့ လိုတယ်။ ဘာလို့လဲဆိုတော့ database ထဲက like အရေအတွက်သာတိုးသွားတာ page က refresh မလုပ်ရသေးတဲ့အတွက် တိုးလာကို မပြနိုင်ပါဘူး။ အဲ့အချိန်မှာ လိုအပ်နေတာက DOM manipulation. ajax ကိုအသုံးပြုပြီးတော့, ajax ဆိုတာနောက် သင်ခန်းစာမှာ ရှင်းပြထားပါတယ်။ ajax ကိုသုံးပြီး web server က database ထဲမှာ ဒီ id နဲ့ post က like လုပ်ပြီးကြောင်း ajax စီပို့လိုက်တယ်။ ajax က အဲ့ data တွေကိုယူပြီး Dom manipulation ကိုအသုံးပြုပြီး၊ အဲ့ post ရဲ့ like အရေအတွက်ကို တစ်ခုတိုးပေးလိုက်တာပါ။ Dom manipulation အသုံးပြုရင် page refresh လုပ်စရာမလိုတော့ပါဘူး။

Web server ဆိုတာ database နဲ့ frontend ကို ချိတ်ပေးတာကို ဆိုလိုပါတယ်။ api လို့လည်းခေါ်ကြပါတယ်။ Web server ကိုဘယ်လိုလုပ်ရမလဲဆိုရင်တော့ web framework တွေဖြစ်တဲ့ django, laravel စတာတွေကို သိဖို့လိုပါတယ်။ 

website တွေမှာ dom နဲ့ ajax ကိုတွဲသုံးလေ့ရှိပါတယ်။ ဘယ်လိုနေရာတွေမှာလဲဆို comment တာတို့, like လုပ်တာတို့, edit လုပ်တာတို့ account bio ပြောင်းတာတို့ စတာတွေမှာသုံးပါတယ်။ visulaize ဖြစ်သွားအောင် တကယ့် implementation နဲ့ကြည့်ရအောင်။


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