Posts

Api in javascript

Fetch api ကို အသုံးပြုမယ်ဆို အရင်ဆုံး js မှာ fetch() နဲ့စရပါမယ်။ () ထဲမှာသင် request လုပ်ချင်တဲ့ api ကို url ကနေတစ်ဆင့်ပို့ပေးရပါမယ်။  ဒီ github link ထဲမှာ jsonplaceholder website ကိုသုံးပြီး data တွေကို ဘယ်လိုယူလဲ ပြပေးမှာပဲ ဖြစ်ပါတယ်။ ပထမဆုံး fetch နဲ့ data ယူမယ့် url ကိုထည့်ပေးပါမယ်။ website ထဲကိုဝင်ကြည့်မယ်ဆို /users အပြင် ကျန်တာတွေလည်းထည့်လို့ရပါတယ်။ jsonplaceholder.com ထဲမှာ ကြည့်လို့ရပါတယ်။ Project link in github ဒီတော့ .then(response => response.json()) က ဘာလုပ်တာလဲဆိုတော့ jsonplaceholder website က ပို့ပေးလိုက်တဲ့ data တွေကို json အဖြစ် ပြောင်းလိုက်တာပါ။ .then(resp => {}) မှာ resp နေရာမှာကြိုက်တာသုံးလို့ရပါတယ်။  resp က ဘာကိုကိုယ်စားပြုလဲဆိုတော့ အပေါ်က then() မှာ json အဖြစ်ပြောင်းလိုက်တဲ့ data တွေကို ကိုယ်စားပြုပါတယ်။ ဒါမယ့် အဲ့ data တွေက json object အဖြစ် အများကြီးဖြစ်နေပါတယ်။ အဲ့ data တစ်ခုစီကို website မှာပြချင်တာပါ၊ အဲ့တော့ forEach ကိုသုံးပြီး json object ထဲက data တစ်ခုစီကိုယူမယ်။ div တစ်ခုကို create လုပ်ပြီး အဲ့ div ထဲမှာ data တွေကို innerHTML နဲ့ သင်လိုချင်တ...

Storage implementation in javascript

Image
Cookie တွေကို implement လုပ်မယ်ဆို name, value, expire date, path လေးခုထည့်ပေးဖို့လိုပါမယ်။ expire date ကတော့ cookie တစ်ခုက ဘယ်ရက်ကျရင် auto-remove လုပ်ရမလဲဆိုတာဖြစ်ပါတယ်။ path ကတော့ website domain နောက်မှာ / ဒါတွေခံထားတဲ့ url တွေပဲဖြစ်ပါတယ်။ setCookie ရဲ့ ပထမ code က expire date ကိုဒီနေ့အဖြစ်သတ်မှတ်ပြီး သင် နောက်သတ်တမ်းကုန်စေချင်တဲ့ရက်နဲ့ ပေါင်းပေးတာပါ။ cookieString ကတော့ cookie format ကိုသတ်မှတ်ပေးပြီး cookie ထဲက data တွေကို ; ခြားပါတယ်။ နောက်ပြီးမှ cookieString ကို တကယ့် cookie အဖြစ် document.cookie နဲ့ create လုပ်ပါတယ်။ ဒီ function တွေကို တစ်ခါလုပ်ပြီးတာနဲ့ နောက်တစ်ခါအသုံးလိုတဲ့အခါ အဲ့ function တွေကို ပြန်သုံးရုံပါပဲ။ သင်ဒီ function တွေကိုနားမလည်ဘူးဆိုရင်တောင် stackoverflow မှာ copy and paste လုပ်နိုင်ပါတယ်။ getCookie function ကတော့ ပထမ code က cookie မှာ ; နဲ့ခြားထားတဲ့ data တွေကို ခွဲပြီး array ထဲမှာထည့်ပါတယ်။ ပြီးမှ အဲ့ array ကို loop လုပ်၊ သင်လိုချင်တဲ့ key ကိုရှာပြီး value ကို return ပေးပါတယ်။ cookie တွေကို delete ဖို့ကတော့ အဲ့ Cookie ရဲ့ expire date ကို နောက်ပြန်ထားဖို့ပါပဲ။ ဉပ...

Javascript Bom

Image
BOM ရဲ့အရှည်ကောက်ကတော့ Browser Object Model ပဲဖြစ်ပါတယ်။ ဘယ်မှာအသုံးများလဲဆိုတော့ javascript ကိုအသုံးပြုပြီး browser တွေနဲ့ communicate လုပ်တဲ့နေရာမှာသုံးပါတယ်။ Bom ကိုအသုံးပြုမယ်ဆို window နဲ့စရပါတယ်။ Screen နဲ့ပက်သက်တဲ့ properties တွေပါ။ console မှာ window.screen.property နဲ့ စမ်းကြည့်ပါ။ ဉပမ window.screen.colorDepth Navigator နဲ့ပက်သက်တဲ့ properties တွေပါ။ ဉပမာ window.navigator.language location နဲ့ပက်သက်တဲ့ properties တွေပါ။ ဉပမာ window.location.origin History နဲ့ပက်သက်တဲ့ properties တွေပါ။ history object ကဘာအတွက်သုံးလဲဆိုတော့ user visited url တွေကိုအသုံးပြုတဲ့အခါသုံးပါတယ်။ ဉပမာ window.history.go(-2) source from internet and w3schools.com

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 အရေအတွက်တိုးလာတာကို တွေ့ရဖိ...

Dom manipulation

Image
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 m...

Linked List implementation

Image
Linked List Linked List မှာ သုံးမျိုးရှိပါတယ်။ Singly Linked List, Doubly Linked List ရယ် Circular Linked List ဆိုပြီး။  Singly Linked List implementation ကို အသေးစိတ်ကျကျရှင်းပြပေးမှာဖြစ်ပြီး၊ ကျန်တဲ့နှစ်ခုကတော့ Singly Linked Link ကိုနားလည်ရင် နားလည်လွယ်ပါတယ်။ OOP အကြောင်းနားလည်ဖို့တော့ လိုအပ်ပါတယ်။  အရင်ဆုံး Linked List ကို ဘယ်လို create ရမလဲ ရှင်းပြပါမယ်။ Node ဆိုတဲ့ class ကတော့ linked list ထဲက data တစ်ခုကိုကိုယ်စားပြုပါမယ်။ Linked_List class ကတော့ linked list တစ်ခုလုံးကိုကိုယ်စားပြုပါတယ်။ linked list တစ်ခုမှာ head ဆိုတဲ့ဟာက linked list ရဲ့အပေါ်ဆုံးက data ဖြစ်ပြီး၊ အဲ့တာကိုအသုံးပြုပြီး နောက် node တွေကို ရှာရတာတွေ, ဖျက်တာတွေလုပ်ရပါတယ်။ Singly Linked List မှာ operations 5 ခုရှိပါတယ်။ -insert after node -insert at front -insert at end -delete node စတာပဲ ဖြစ်ပါတယ်။ insert at front ဆိုတာကတော့ linked list ရဲ့ရှေ့ဆုံးမှာ item တစ်ခုထည့်တာဖြစ်ပြီး။ အောက်က code ကို step by step ရှင်းပြထားပါတယ်။  Step by step explaination insert at end ဆိုတာကတော့ linked li...

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 ...