Jquery ToDo List App

အရင္ေန့ေတြတုန္းက JavaScript MVC comparison ေတြ အေျကာငး္လိုက္ရွာဖတ္ေနရင္းနဲ့ သူတို့ရဲ့ အားသာခ်က္ အားနည္းခ်က္ေတြကို ToDo List apps ေတြ ေရးျပီး နွုိငး္ယွဥ္ျပထားတဲ့ website တစ္ခု သြားေတြ့မိတယ္။ ဒါနဲ့ အျကံရျပီး သူတို့လို ToDo list app တစ္ခုေရးျကည့္မယ္ဆိုျပီး စိတ္ကူးရမိတယ္။ Javascript နဲ့ Jquery ကို ေလ့လာေနရင္း ဘာ app ေရးျကည့္ရင္ ေကာင္းမလဲ လို့ စဥ္းစားေနတဲ့ အခ်ိန္မွာ idea ရသြားခဲ့တာ။ ဒါနဲ့ Pure Javascript ပဲ သံုးမလား  Jquery ကိုပဲ သံုးမလားဆိုျပီး ကိုယ့္ကိုယ္ ကို ျပန္ျပီး ေမးခြန္းထုတ္ေနတာနဲ့ပဲ အခ်ိန္ေတာ္ေတာ္ ကုန္သြားတယ္။ ဒါေပမယ့္ ေနာက္ပိုင္း jQuery နဲ့ပဲ ေရးဖို့ ဆံုးျဖတ္လိုက္တယ္။ ToDo list app တစ္ခုက အဓိကက DOM ကို ကိုင္တြယ္ေျဖရွင္းနိုင္ရင္ အဆင္ေျပသြားျပီ။ ကိုယ္ကိုတိုင္ကလည္း DOM api ေတြ ေမ့သေလာက္ရွိေနျပီ ေနာက္ျပီး jQuery ကိုလည္း အသံုးခ်ျကည့္ခ်င္တာနဲ့ jquery နဲ့ပဲ ေရးဖို့ ဆံုးျဖတ္လိုက္တယ္။

ToDo list အတြက္ HTML markup ေတြ ဘာသံုးရမလဲဆို ဘာမွ ရွည္ရွည္ေ၀းေ၀း စဥ္းစား စရာ မလိုပါဘူး။ Unorder list (ul) က သာ အသင့္ေတာ္ဆံုးပါ။ task တစ္ခုခ်င္းစီ  ကို li နဲ့ ကိုယ္စားျပုလိုက္တာပါပဲ။ li ကို task wrapper တစ္ခု အေနနဲ့ ထားလိုက္တယ္ဆိုရင္ေတာ့ ပိုမွန္ပါလိမ့္မယ္။ (တကယ္ေတာ့ task ထဲမွာ mark လုပ္ဖို့ checkbox ရယ္  delete button ရယ္ ပါပါေသးတယ္။) UI design ခ်ျပီးသြားေတာ့ firefox နဲ့ chrome ေပါ္မွာ run ျကည့္လိုက္ေတာ့ rendering က အဆင္ေျပေျပ ေပါ္လာတာ ေတြ့ရတယ္။ ေနာက္ေနဲ့ ရံုးကစက္က IE ေပါ္မွာ စမ္းလိုက္ေတာ့လည္း အဆင္ေျပတယ္။ ဒါနဲ့ web design နဲ့ ပတ္သတ္ျပီး တိုးတက္လာတယ္လို့ ကိုယ့္ကိုယ္ကို သံုးသပ္မိတယ္။ (အမ်ားျကီးေတာ့ မဟုတ္ဘူး၊ အရင္က အေတာ္ပိန္းတာ :D) ဘယ္ HTML markup ေတြ ဘယ္ေနရာမွာ ဘယ္လိုသံုးရမလဲ ဆိုတာ နည္းနည္း သေဘာေပါက္လာတယ္။ ဒီလိုပဲ CSS property ေတြ ဥပမာ position ကို ဘယ္လိုသံုးရမလဲဆိုတာ ေတာ္ေတာ္ေလး သေဘာေပါက္သြားတယ္။

Web development နဲ့ ပတ္သတ္ရင္ client side ေကာ server side ေကာ နွစ္ခုစလံုးကို စိတ္၀င္စားတယ္။ web application developer တေယာက္လုပ္မယ္ဆိုရင္ client side technology မသိလည္း ျဖစ္တယ္လို့ ယူဆလို့ရေပမယ့္ web developer လုပ္မယ္ဆိုရင္ေတာ့ မသိမျဖစ္ သိသင့္တယ္လို့ထင္တယ္။ ေက်ာင္းမွာ တခ်ို့ သူငယ္ခ်င္းေတြ server side ကို ေကာင္းေကာင္းျကီး ရေပမယ့္ client side ဘာ္က်ရင္ သိပ္မက်ြမ္းက်င္ဘူး။ ပိုဆိုးတာက html/css ေတြ အေျခခံေတြကိုေတာင္ မသိတာပါ။ အထူးသျဖင့္ framework ေတြ ဥပမာ ASP.NET web form ကို based လုပ္တဲ့ developer ေတာ္ေတာ္မ်ားမ်ားက မသိလည္း ျဖစ္တာကိုး။ ဒါေပမယ့္ သူတို့က server side ဘက္မွက်ေတာ့ ကြ်မ္းက်င္သြားျပန္ေကာ။ က်ြန္ေတာ္သာ ဟိုမေရာက္ ဒီမေရာက္ျဖစ္ေနတာ။ ထားပါေတာ့ ToDo list ဘက္ကို ျပန္ဆက္ရေအာင္။

တကယ္ development လုပ္ေတာ့ ကုိယ္သိထားတယ္လို့ထင္ရတာေတြက မေမ်ွာ္လင့္တဲ့ bugs ေတြ error ေတြ တက္လာျပန္ေရာ။ ထံုးစံအတိုင္း Google ကိုပဲ အားကိုးရတာပဲ။ ပထမဆံုး bugs ကေတာ့ dynamically create လုပ္လိုက္တဲ့ element ေတြ ရဲ့ click event ေတြ အလုပ္မလုပ္တာပါ။

$(elementId).click(function(){…})

dynamically create လုပ္ထားတဲ့ element ေတြရဲ့ click event ကို click method နဲ့ ေရးရင္ အလုပ္မလုပ္ပါဘူး။ Stackoverflow မွာ ေတာ့ on method သံုးဖို့ေျပာထားတယ္။

$(‘ul’).on(‘click’,’button’,function(){..})

အေပါ္ကအတုိင္ေရးလိုက္မွာ click event ကို ဖမ္းလို့ရသြားတယ္။ ေနာက္တစ္ခုက က်ြန္ေတာ့္အတြက္ ေတာ္ေတာ္ကို ထူးဆန္းတယ္။ Task title ကို label နဲ့ ကိုယ္စားျပုထားတယ္။ label ကို jquery နဲ့ dynamically create လုပ္ျပီ double click event ၀င္ရင္ contenteditable ကို true ေပးလိုက္တယ္။ task ကို edit လုပ္လို့ရေအာင္လို့ပါ။ ျပသနာက focusout event ကို ဖမ္းလို့မရတာပါ။ foucsout တင္မဟုတ္ဘူး blur event ပါ ဖမ္းလို့မရတာ။အဲဒီမွာ ေတာ္ေတာ္ အခ်ိန္ျကာသြားတယ္။ ဒါနဲ့ စိတ္မရွည္တာနဲ့ label ေနရာမွာ span ေျပာင္းေရးလိုက္ေတာ့မွ focusout event ကို ဖမ္းလို့ရသြားတယ္။ က်ြန္ေတာ္ကိုယ္တိုင္းလည္း ဘာလို့မွန္းမသိဘူး။ Google မွလည္း ရွာလို့လည္းမေတြ့ဘူး။ က်ြန္ေတာ္ရွာတဲ့ keyword ပဲ မွားေနလို့လားမသိဘူး။ အေျကာင္းရင္းသိရင္ ေျပာျပျကပါဦး။

ေနာက္တစ္ခုက က်ြန္ေတာ့္အတြက္ မွတ္မွတ္သားသားပါပဲ။ က်ြန္ေတာ္ အရင္တုန္းက ထင္တာက chrome မွာ အဆင္ေျပရင္ firefox မွာ အဆင္ေျပတယ္လို့ ပံုေသမွတ္ထားတာ။ ဒါနဲ့ firefox မွာ run လိုက္ေတာ့ ျပသနာတစ္ခု ထပ္ေတြ့ေရာ။ က်ြန္ေတာ့္ todo list app က task ေတြေပါ္ကို hover လုပ္လိုက္ရင္ ညာဘက္မွာ delete button ေပါ္လာတာပါ။ ဒါေပမယ့္ firefox မွာ ေပါ္မလာဘူး။ ပထမက ေအာက္က အတိုင္းေရးထားတာပါ။

$(‘ul’).on(‘mouseover’,’li’,function(){…});
$(‘ul’).on(‘mouseout’,’li’,function(){…});

ဒါနဲ့ ေအာက္က အတိုင္းေျပာင္းေရးလိုက္ေတာ့မွ ရသြားတယ္။

$(‘ul’).on(‘mouseenter’,’li’,function(){…});
$(‘ul’).on(‘mouseleave’,’li’,function(){…});

က်ြန္ေတာ့္အတြက္ ဒီapp ကေန အေတြ့အျကံု ေတာ္ေတာ္ရလိုက္တယ္။ jquery selector ေတြကို နားလည္သြားသလို event method ေတြကိုလည္း နားလည္သြားတယ္။ အသစ္တစ္ခုကို ေလ့လာရင္ စာဖတ္ေနရံုနဲ့မျပီးဆိုတာ သိသြားတယ္။ လက္ေတြ့အသံုခ်ျကည့္မွ သူ့ရဲ့ အသံုးျပုပံုကို ရင္းနွီးသြားတာ။

က်ြန္ေတာ့္ app ကို ဒီမွာ သြားစမ္းနိုင္ပါတယ္။ ဘာမွ ထူးထူးဆန္းဆန္းမဟုတ္ပါဘူး။ static app ပါပဲ။ စမ္းရင္းနဲ့ bugs ေတြ ေတြ့ရင္လည္း report လုပ္ေပးပါဦး။ ေနာက္မွ localStorage feature တစ္ခု ထပ္ထည့္ျကည့္ပါဦးမယ္။

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: