1.Javascript Introduction

Javascript introduction javascript ကိုမေျပာခင္java နဲ့ javascriptဘာမွမဆိုင္ဘူးဆိုတာေလးတစ္ခုေသေသခ်ာခ်ာသိထား ေစခ်င္ပါတယ္။ကြ်န္ေတာ္လည္း စေလ့လာခါစက အတူတူလို့ထင္ခဲ့ဖူးလို့ပါ။တကယ့္လက္ေတြ့မွာေတာ့ သူတို့ရဲ့ coding structure ေတြဟာလည္းကြဲျပားျခားနားျကပါေသးတယ္။ေနာက္တစ္ခုက HTML တို့ CSS တို့နားလည္ျပီးမွ Javascript ကိုေလ့လာမယ္ဆို ရင္ပိုျပီးအက်ိုးမ်ားပါလိမ့္မယ္။ Javascript ဟာ web ကိုတန္ဆာဆင္တဲ့ေနရာမွာမရွိမျဖစ္အေရးပါတဲ့ language တစ္ခုျဖစ္ပါတယ္။ထူူးျခားတာတစ္ခုက သူ့ code ကို browser ကတိုက္ရိုက္နားလည္တာေျကာင့္ editor တစ္ခုရွိမယ္ Browser လည္းရွိမယ္ဆိုရင္ JS စေရးလို့ရပါျပီ ။တစ္ျခားသီးသန့္ထပ္ျပီး install လုပ္ရမယ့္ framework သပ္သပ္မလိုပါဘူး ။ စမ္းမယ့္Browser ကိုေတာ့ Chrome ကိုသံုးဖို့ညြွန္းခ်င္ပါတယ္။Code editor အတြက္ကုိေတာ့ sublime text 3 ကိုညြွန္းခ်င္ပါတယ္ ။ sublime မသံုးခ်င္ဘူး..သံုးေနက် editor ရွိလို့အဲ့ဒါကိုပဲ သံုးခ်င္တယ္ဆိုရင္လည္းအဆင္ ေျပပါတယ္။ အခု သင္ခန္းစာအတြက္ ေတာ့ sublime editor ပဲသံုးမွာမို့ install သြင္းရေအာင္။ စက္ကို အင္တာနက္ခ်ိတ္လိုက္… ျပီးရင္ google.com မွာ ‘download sublime text 3’ လို့ရိုက္ထည့္။က်လာတဲ့ result ထဲမွအဆင္ေျပတဲ့လင့္တစ္ခုခုကေန download ဆြဲျပီး Sublime Text 3 ကို စက္မွာ install လုပ္။ခါတိုင္းလုပ္ေနက်အတိုင္း Next >Next > Finish ေပါ့ဗ်ာ :D
ေလ့က်င့္ဖို့အတြက္ document ေအာက္မွာ javascript နာမည္နဲ့ ဖိုဒါတစ္ခုေဆာက္ထားလိုက္ပါဦး။ ျပီးရင္ေတာ့ sublime မွာ index.html လို့ေရးျပီး Ctrl+S နွိပ္။ ျပီး ေစာေစာကေဆာက္ထားတဲ့ ကိုယ္ပိုင္ဖိုဒါထဲမွာသြား save လိုက္ဗ်.

index.html တစ္ဖိုင္ရျပီ ။ျပီးရင္ sublime စာမ်က္နွာမွာ html:5 လို့ေရးျပီး keyboard က Ctrl+E ကိုနွိပ္လိုက္မယ္ဆိုရင္ html skeleton ဒီလိုေလး ရပါျပီ ။

တကယ္လို့အဲ့လိုမေပၚလာဘူးဆိုရင္ေတာ့ sublime ထဲမွာ service packageေလးတစ္ခုလိုေနတာေျကာင့္ပါ။ဒါေပမယ့္ sublime 3 မွာေတာ့ default မွာကတည္းကပါျပီးသားျဖစ္ပါတယ္။တကယ္လို့မရခဲ့ဘူးဆိုရင္ဘယ္လိုလုပ္ရမလဲတစ္ခါတည္းရွင္းျပေပးပါဦးမယ္။(လ်ွာရွည္တယ္မထင္ပါနဲ့ဗ်ာ)တကယ္က ‘emmit’ ဆိုတဲ့ package ေလးမပါ၀င္ေသးတာေျကာင့္ ဒီ service ကိုသံုးလို့ မရေသးပဲျဖစ္ေနတာပါ ။ ဒါေျကာင့္ emmit ထည့္ေပးလိုက္မယ္ဆို html shortcutေလး ေတြျပန္ရသြားမွာပါ။ကဲ emmit ထည့္နည္းေျပာျပမယ္ ။ စက္ကိုအင္တာနက္ခ်ိတ္ထားျပီးရင္ sublime မွာ Ctrl (Mac မွာဆို command) +Shift+Pျပီးရင္ ေပါ္လာတဲ့ box မွာ install လို့ရိုက္ enter ေခါက္ျပီးရင္ emmit လို့ထပ္ရိုက္ enterထပ္ေခါက္။ရျပီ .. သူ့ဖာသာသြင္းသြားေပးလိမ့္မယ္ ။ျပီးရင္ sublime ကို restart ခ်လိုက္ရင္ ေစာနက မရတဲ့ shortcut သံုးလို့ရျပီ။ emmit ရဲ့ အသံုး၀င္မ်ားျပားလွတဲ့ shortcut ေတြကို ဒီမွာသြားျကည့္လို့ရပါတယ္။http://docs.emmet.io/cheat-sheet/ Mac user ေတြအေနနဲ့http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_osx.html ဒီလင့္မွာ sublime ရဲ့ အသံုး၀င္shortcut ေတြကို လည္း တစ္ခ်က္ေတာ့သြားေရာက္ ေလ့လာထားသင့္ပါတယ္။ဒီနည္းနဲ့ emmit သာမက တျခား service package ေတြလည္းလိုရင္လိုသလို ျဖည့္သြင္းအသံုးျပဳနိုင္ပါတယ္။ Javascript ရဲ့ အလုပ္လုပ္ပံုကိုရွင္းရွင္းလင္းလင္းသိျမင္ နိုင္ဖို့ ကြ်န္ေတာ္တို့ browser sync ေလး ထည့္ထားေပးရင္ပိုအဆင္ေကာင္းပါတယ္ ။မထည့္လည္း ရပါတယ္ ။ ဒါေပမယ့္ ယေန့ေခတ္ နည္းပညာေလးေတြသိထားရေအာင္ေတာ့ ေျပာျပထားခ်င္တယ္ဗ်ာ။ဒီေတာ့ က်ြန္ေတာ္တို့ node.js ေလးစက္မွာ ထည့္ထားလိုက္ရေအာင္။ထံုးစံအတိုင္း အင္တာနက္ခ်ိတ္ျပီး download node.js ဆိုျပီးရိုက္ရွာလိုက္ ။ျပီးရင္ေဒါင္း install လုပ္ ။

ကိုယ္က Mac ဆို Mac အတြက္ကိုေဒါင္းေပါ့ဗ်ာ ။ျပီးရင္ terminal (or )cmd ကိုဖြင့္ျပီးေတာ့ node --version လို့ရိုက္ထည့္ enterေခါက္ ။version ကိုေဖာ္ျပေပးေနလိမ့္မယ္။ျပီးရင္ npm --version လို့ရိုက္ထည့္ enter ေခါက္ ။node package manager version ကိုျပေနတယ္ဆိုရင္ install successful ေအာင္ျမင္ပါျပီ။ဆက္ျပီးရွင္းျပခ်င္တာက node.js နဲ့တြဲသံုးရမယ့္ browser sync ေလးအေျကာင္း။ google မွာရွာရင္ လည္းရတယ္ But ဒီလိပ္စာ www.browsersync.io မွန္ဖို့ေတာ့လိုမယ္။

သူ့ install code (npm install -g browser-sync)ကို ေကာ္ပီကူးျပီးရင္ terminal(or) cmd မွာ pasate လုပ္ enter ေခါက္ ။စာသားေတြတသီတတန္းျကီးက်လာျပီးရင္ install အဆင္ေျပသြားပါလိမ့္မယ္။ ရမရေသခ်ာေအာင္ terminal(or)cmd မွာ ေစာေစာကပံုစံအတိုင္း browser-sync --version လို့ရိုက္ထည့္ enter ေခါက္ version နံပါတ္ျပေနရင္ complete ျဖစ္ပါျပီ။

browser sync ကိုဘယ္လိုခ်ိတ္ဆက္အသံုးျပုရမလဲဆိုရင္ ပထမဆံုးကိုယ့္ရဲ့ html file ရွိတဲ့ folder ကို terminal (or) cmd ကေနသြားရမယ္ ။လက္ရွိေနရာကိုျကည့္ခ်င္ရင္ dir(for windows) ls(for mac) လို့ရိုက္ထည့္လိုက္ ။ကိုယ္သိမ္းထားတဲ့ေနရာကိုသြားခ်င္ရင္ေတာ့ cd command နဲ့သြားလို့ရတယ္။ ပံုမွာျကည့္ျကည့္ . folder ေနရာေရာက္ျပီဆို browser-sync start --server --directory --files “ */ ”ဆိုတဲ့ code ေလးနဲ့ on ေပးရတယ္။အေပၚကျပထားတဲ့ကုတ္က လက္ရွိအဆင္အေျပဆံုးပံုစံပါ။သူ့ website မွာေတာ့ start code က static site,dynamic site အတြက္ sync code သပ္သပ္ စီခြဲထားပါေသးတယ္။ https://browsersync.io/#install လင့္မွာတစ္ခ်က္ ရွိဳးျကည့္ဗ်။ ကဲခုဆို ကိုယ္ index.html ထဲေရးလိုက္သမ်ွ code ဟာ စကၠန့္မျခားပဲ ဖြင့္ထားတဲ့ chrome browserကဖြင့္ထားတဲ့ webpage ေပၚမွာ up to date ေပၚေနေစမွာျဖစ္ပါတယ္။ဒါေျကာင့္ အခ်ိန္ကုန္အမ်ားျကီးသက္သာသြားေစပါတယ္။ဘယ္ဘက္မွာ code ေရး ညာဘက္ကမွာ google chrome ရဲ့ code view( chrome R-click>inspect>console) ကိုဖြင့္ထားမယ္ဆိုရင္ ဘယ္ဘက္မွာေရးသမ်ွ code ကို ညာဘက္မွာ အခ်ိန္မဆိုင္းပဲ အလုပ္လုပ္ေပးေနတာေတြ့ေနပါလိမ့္မယ္။ သိပ္အဆင္မေျပလို့… ဒီအတိုင္း ခပ္ရွင္းရွင္း တစ္ဆင့္ခ်င္း code ေရးလိုက္ျပန္ျကည့္လိုက္လုပ္မယ္ဆို ရင္လည္းရပါတယ္။ ခုထိေတာ့ code တေျကာင္းမွစမေရးရေသးပါဘူး။ေနာက္သင္ခန္းစာက်မွ code စေရးရေအာင္ ။