ကဗ်ာ/ရသ/နည္းပညာ

3.JS Functions

Oct 1, 2016
(3)


JS မှာ function တွေကို name ရော nameless ရောလက်ခံပါတယ်။ function execute လုပ်တဲ့အခါ function name နဲ့ပြန်ခေါ်ရပါတယ်။nameless အတွက်တော့ var တစ်ခုထဲသွားထည့်ပေးမှ ရှေ့ဆက်နိုင်မှာပါ။



function a(){ }



function name aဖြစ်ပါတယ်.

a(); 

ဒါက executive function ပါ. ဒါကမှရလဒ်ပါ။


var a= function (){….}


function name တောင်မပါပါဘူး.a ဟာ value of function assigned ဖြစ်ပြီး return result (ရလဒ်)မဟုတ်ပါ။





ဒီနေရာမှာတစ်ခုထပ်ရှင်းပြချင်တာက လိုအပ်ချက်အရ function scope ထဲမှာ variable ထပ်ကြေငြာရတယ်ဆိုရင်သူ့ကို local variable လို့ခေါ်ပါတယ်။သူ့ကို function အပြင်ဘက်မှာသုံးလို့မရပါဘူး။ function ရဲ့အပြင်ဘက်မှာ ကြေငြာထားတဲ့ variableကိုတော့ global variable လို့ခေါ်ပါတယ်.သူ့ကို function ထဲ ကနေလည်းလှမ်းခေါ်နိုင်ပါတယ်။


var message= “in global”;
var a =function (){
var message= “in local”;
console.log(message);
b();


function b(){
console.log(message);
};

result ဘာထွက်မယ်ထင်လဲ၊?

in local တစ်ကြောင်း, in global တစ်ကြောင်းထွက်လာပါမယ်။ function b ကို a ကနေလှမ်းခေါ်ထားပေမယ့် b ထဲကိုရောက်နေမယ့် message တန်ဖိုးဟာ “in global”ပဲဖြစ်နေမှာမို့ပါ။

ဥပမာလေးတွေလေ့လာကြည့်ရအောင်။


// ***** String concatination

var string = "Hello";

// string += " World";

string = string + " World";

console.log(string + "!");


+= ဆိုတာမူလတန်ဖိုးမှာပဲ ထပ်ပေါင်းထည့်သွင်းမယ်လို့ပြောတာပါ။ဒါကြောင့် string + world နဲ့တူတူပါပဲ။ Js မှာစာကြောင်းတစ်ကြောင်းနဲ့တစ်ကြောင်း ဆက်ဖို့ + ကိုသုံးပါတယ်။



// ***** Regular math operators: +, -, *, /

console.log((5 + 4) / 3);

console.log(undefined / 5);

function test1 (a) {

console.log( a / 5);

}

test1();


test1 ကို execute လုပ်တဲ့အခါ ဘာရမလဲ ? အခု parameter ပါတဲ့ function လေးတွေကြည့်ကြည့်ရအောင် ။ parameter ကို argument လို့လည်းခေါ်ပါတယ်။


function multiply(x, y) {

return x * y;

}

multiply.version = "v.1.0.0";

console.log(multiply.version);

var ans = multiply (4,5);



compare က function name, xနဲ့y က argument, argument မှာ var ကြေငြာစရာမလိုပါ။argument တွေကိုတော့ return ပြန်ပြဖို့ခေါ်တဲ့အခါ ထည့်သွင်းပေးရပါတယ်။ return ဆိုတာက keyword ပါ.အဖြေထုတ်ပြဖို့သုံးပါတယ်။ အခုဥပမာလေးကိုကြည့်ကြည့်မယ်ဆိုရင် - answer မှာ ဘာ result ထွက်မလဲ? multiply. version ကိုပြခိုင်းတဲ့အခါ ဘာ result ရမလဲ? နောက်ထပ်- multiply(4,” a”); ဆိုရင် ဘာ resultရမလဲ၊? argument ထည့်ရမယ့် function ဖြစ်ပေမယ့် multiply() လို့ပဲရေးပြီး execute လုပ်ခိုင်းမယ်ဆိုဘာ result ရမလဲ?

ဒီဥပမာလေးတွေကိုလည်းဆက်လေ့လာပေးပါဦး….


// Function factory

function makeMultiplier(multiplier) {

var myFunc = function (x) {

return multiplier * x;

};

return myFunc;

}

var multiplyBy3 = makeMultiplier(3);

console.log(multiplyBy3(10));

var doubleAll = makeMultiplier(2);

console.log(doubleAll(100));

// Passing functions as arguments

function doOperationOn(x, operation) {

return operation(x);

}

var result = doOperationOn(5, multiplyBy3);

console.log(result);

result = doOperationOn(100, doubleAll);

console.log(result);



ဆက်ပြီးတော့ လေ့လာနေတဲ့သူငယ်ချင်းတို့အတွက် မှတ်ထားသင့်တဲ့အရမ်းအသုံးဝင်တဲ့ဆိုက်တစ်ချို့ပြော ပြပေးချင်ပါသေးတယ်။အောက်ကဆိုက်လေးတွေကိုမှတ်ထားပါ။

https://jsfiddle.net/

CSS ရော JS ရောအတွက် ကိုယ်ရေးမယ့် Code တွေကို text editor တစ်ခုလို သွား စမ်းကြည့်လို့ရပါတယ်။

http://codepen.io/

CSS ရော JS ရော ရေးပြီးသား Design တွေကိုအခမဲ့ယူလို့ရပါတယ် ။စမ်းလို့ရပါတယ်။သွားစမ်းကြည့်ပါ။

http://stackoverflow.com/

ဒီဆိုက်ကအိုင်တီသမားတွေလက်စွဲဆိုက်တစ်ခုပါ.မသိတာမှန်သမျှမေးလို့ရပါတယ်။

ရှေ့သင်ခန်းစာမှာတော့ Javascript ရဲ့ language construct အကြောင်းရှင်းပြပါမယ်။

Read more ...

2.Javascript Data Types

Oct 1, 2016
(2)


Javascript ကို HTML ထဲမွာပဲ <script></script> tag ထဲမွာေပါင္းျပီးေရးလို့ရသလို သီးသန့္ ဖိုဒါတစ္ခုေဆာက္ script.js ဖိုင္တစ္ခုသပ္မွတ္ျပီးသပ္သပ္စီလည္းေရးလို့ရပါတယ္။ သပ္သပ္ေရးတဲ့အခါ HTML ဖိုင္ထဲမွာ JS ဖိုင္ေနရာကို source “src” ဆိုတဲ့ keyword နဲ့ညြွန္းေပးရပါတယ္။






<script src="/js/script.js"></script>



script tag ကို HTML head tag ထဲမွာသြားေရးေရး .body tag အဆံုးနားမွာသြားေရးေရး အဆင္ေျပပါတယ္။But, body အပိတ္ tag မတိုင္မီအဆံုးနားမွာေနရာခ်တာက အေကာင္းဆံုးေရးသားနည္းျဖစ္ပါတယ္။
Javascript ဟာ dynamically typed language ျဖစ္ပါတယ္.variable ေတြဟာကြဲျပားတဲ့ data type ကို execute မလုပ္မခ်င္းလက္ခံထားနိုင္ပါတယ္.






var a= ‘a’;  //var လို့ေရးရင္ရပါျပီ

var b= 30;



‘a’ (or)”a” လို့ေရးလိုက္တာနဲ့ String data type ျဖစ္ေျကာင္း Js ကသိပါတယ္။30 လို့ေရးလိုက္တာနဲ့ ဒါဟာ Number data type ျဖစ္ေျကာင္း js ကသိပါတယ္။ ေကာ္မန့္ေတြေရးခ်င္ရင္ // ေနာက္မွာေရးနိုင္ပါတယ္။ေကာ္မန့္ေတြက ကိုယ့္ဖာသာျပန္ျကည့္ရင္ျဖစ္ျဖစ္ ကိုယ့္ကုတ္ကိုသူမ်ားယူျကည့္ရင္ျဖစ္ျဖစ္ နားလည္လြယ္ေစတာမို့ေရးျဖစ္ေအာင္အေလ့အက်င့္လုပ္ထားေစခ်င္ပါတယ္။ Javascript မွာ data type နွစ္မ်ိုးပဲရွိပါတယ္ Primitive နဲ့ Object ပါ။ Primitive မွာ string(စာသားေတြ),number(64bitတြက္ခ်က္မွုကိုပဲအေျခခံထားတဲ့ နံပါတ္ေတြ),Boolean(မွန္/မွား ဆံုးျဖတ္ခ်က္ေတြ) ပါ၀င္ျပီး Object မွာ name:value (အမည္ တန္ဖိုး )အတြဲလိုက္data ေတြပါ၀င္ပါတယ္။






firstname:"AungAung",

lastname:"MinMaung",

social:{

facebook:"BlahBlah",

twitter:"Someone"

}



AungAung ဟာ stringျဖစ္လို့ “” လိုပါတယ္။name ျဖစ္တဲ့ firstnameမွာေတာ့ မလိုပါ။ျပီးေတာ့ ‘=’ အစား ‘ : ’ သံုးရပါတယ္။social ဆိုတဲ့ name မွာ value ဟာတစ္ခုမကတာေျကာင့္ { } ထဲထည့္ေပးလိုက္ရပါတယ္။ Js မွာမွထူးျခားစြာပါ၀င္တဲ့ data type တစ္ခုကေတာ့ undefined ပါ။variable တစ္ခုမွာ ဘာတန္ဖိုးမွ မပါ၀င္ရင္ undefined ကို js က အလိုလို ထည့္ေပးပါတယ္။ variable တစ္ခုကို undefined အျဖစ္ေျကျငာလို့ရေပမယ့္ ဘယ္ေတာ့မွမလုပ္ပါနဲ့။ undefined type ဟာေျကျငာဖို့ရည္ရြယ္ဖန္တီးထားတာမဟုတ္လို့ပါ။ တကယ္လို့ေျကျငာခ်င္တယ္ဆိုရင္ null အျဖစ္ေျကျငာလို့ရပါတယ္။ ေနာက္တစ္ခုက NaN ပါ Not a Number ျဖစ္ပါတယ္။



var c=a/b ;

console.log(c); 



လို့ေရးျပီး resulet ျကည့္လိုက္ရင္ NaN error ျပပါလိမ့္မယ္။ a ဟာ number မဟုတ္လို့ 30 နဲ့စားလို့မရပါဘူး။ဒါေျကာင့္ c ထဲကို Js က not a number (NaN) ကိုထည့္ေပးလိုက္ပါတယ္။colsole.log ကေတာ့ ဒီရလဒ္ကို ျပသေပးပါတယ္။ ေနာက္ဆံုးတစ္ခုကေတာ့ ES6 လို့ေခၚတဲ့ symbolic type ပါ။2015 ကတည္းက release လုပ္ထားျပီးျဖစ္ေပမယ့္ widely support မျဖစ္တာေျကာင့္ခုထက္ထိ widely မသံုးရေသးပါဘူး။
Programming တိုင္းမွာလိုလို variable သတ္မွတ္တာ..Array ေဆာက္တာ… functionတည္ေဆာက္တာ..condition စစ္တာ..looping ပတ္တာ….error handling လုပ္တာ.. စတဲ့အေျခခံက်တဲ့လုပ္ေဆာင္ခ်က္ေတြဟာေရးသားပံုသာကြဲမယ္ လုပ္ငန္းတူေတြအေနနဲ့ပါ၀င္ေလ့ရွိပါတယ္။ ဒါေျကာင့္language တစ္ခု ကိုေသခ်ာနားလည္ထားျပီးသား ,သေဘာေပါက္ထားျပီး သားဆိုရင္ေနာက္တစ္ခုကို ေလ့လာတဲ့အခါအရမ္းကိုပဲလြယ္ကူသြားတတ္ပါတယ္။ေလ့လာေနစလူငယ္ေတြ အေနနဲ့ေတာ့ဟိုဟာေကာင္းနိုးဒီဟာေကာင္းနိုးေလ့လာေနမဲ့အစားတစ္ခုခုကိုေဇာက္ခ်ေလ့လာသင့္ပါတယ္။ အခု javascript ကိုရွင္းျပတဲ့အခါမွာလည္း/သည္မေရြးေတာ့ေျပာျဖစ္မွာမဟုတ္ဘူး..နားလည္သေဘာေပါက္ျပီးကိုယ္တိုင္ေရွ့ဆက္ေလ့လာသြားလို့ရေအာင္ပဲ အဓိကထားေျပာျဖစ္မွာပါ။ဒါေျကာင့္ တျခားေမးခ်င္တာရွိရင္ ဖြဘုတ္ကေနလာေမးလို့ရပါတယ္။Facebook Search မွာက်ြန္ေတာ့္နာမည္ ရိုက္ထည့္ရွာလိုက္ .... ကိုရီးယားမင္းသားေခ်ာအလားထင္မွတ္ရတဲ့ ရူူပါ ကိုေတြ့ျပီဆို တာနဲ့ခ်က္ေဘာက္ကလာေမးလို့ ရပါတယ္ဗ်ာ.:D ျပီးေတာ့ မေန့က ရွင္းျပသြားတာေလးေတြလက္ေတြ႔လိုက္လုပ္ျကည့္တဲ့အခါ မွာ လည္းအဆင္မေျပတာေလးေတြ ေတြ႕ေကာင္းေတြ႕ပါလိမ့္ဦးမယ္ .. ကြ်န္ေတာ့္တုန္းကေတာ့ BrowserSync ကို terminal ကေနသြင္းတာ ဘယ္လိုမွမရဘူး..ေခ်ြးပါပ်ံသြားတယ္။ ေနာက္မွ Network ေျကာင့္လားဆိုျပီး ရံုး Wifi ကိုျဖုတ္ ျပီးကိုယ့္ဖုန္း Wifi နဲ့ျပန္စမ္းေတာ့မွရသြားတယ္ ရံုး Wifi က Network Admin ကပညာေတြစြန္း ျပထားေလေတာ့ သြင္းမရဘူးျဖစ္ေနတာကိုးအဲ့ဒါေျကာင့္ သူငယ္ခ်င္းတို့ စမ္းတဲ့အခါက်ရင္လည္း အဆင္မေျပတာရွိေကာင္းရွိမယ္ .. ဆက္လက္ ေလ့လာရင္း ကြ်န္ေတာ္မျမင္လိုက္တာေတြေတာင္ ခင္ဗ်ားတို့က ျမင္လာမွာမို့ အားမေလ်ွာ့ပါနဲ့လို့ ေျပာခ်င္ပါတယ္

ေနာက္သင္ခန္းစာမွာ functionေတြအေျကာင္းရွင္းျပပါမယ္။
Read more ...

1.Javascript Introduction

Oct 1, 2016
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 စေရးရေအာင္
Read more ...

Introduction Angular JS

Feb 20, 2016
Angular Js , 
ဒါေလးေတြ အရင္မွတ္ထားလိုက္ 
ng-app ,ng-bind, ng-model
ဒါဆိုစလို့ရျပီ .. angularjs.org ကေန သူ့ရဲ့ stable ျဖစ္တဲ့ js file ကို ေဒါင္းထားလိုက္မယ္ .
xampp ျဖစ္ျဖစ္ wamp ျဖစ္ျဖစ္ local server တခုခုလည္း ကုိယ့္စက္ထဲသြင္းထားျပီးသားလို့ယူဆရေအာင္ ။ 
ဘာေျကာင့္server လိုတာလဲဆိုေတာ့ သူအလုပ္လုပ္ပံုက brower request လွမ္းလုပ္တဲ့အခ်ိန္မွာ server ကေန 
browser cache ထဲမွာ ေနေနျပီး  လိုအပ္တဲ့အပိုင္းေလာက္ပဲ server ကုိလွမ္း လွမ္းျပီးအလုပ္လုပ္
ေပးတာမို့လို့ပါ ။ရနိုင္တဲ့ အက်ိုးေက်းဇူးကေတာ့ အရမ္းျမန္သြားတာေပါ့..
တျခားလုပ္နိုင္တာေတြရွိပါေသးတယ္ .စမ္းျကည့္ယံုအတြက္ မွာ server မပါပဲလည္းရပါတယ္ ။
html တစ္ဖိုင္ေဆာက္လိုက္ , angular Js နဲ့ လင့္ဖမ္းခ်ိတ္လိုက္ ရင္ angular Js ရဲ့ directive ေတြယူသံုးလို့ရေနပါျပီ။
 ပံုစံေလးျပမယ္။ေအာက္မွာျကည့္ျကည့္ ..
<!DOCTYPE html>
<html lang="en-US">
<script src=“js/angular.min.js”></script> // ဒါဆို angularJs နဲ့ခ်ိတ္လိုက္ျပီ
<body>

<div ng-app=“”>//ခုနက မွတ္ထားခိုင္းတာေလးလာျပီ။ angularJs အလုပ္လုပ္မယ့္ေနရာကိုသတ္မွတ္ေပးလိုက္တာပါ။
အျမဲတမ္း ဒီကေနပဲစရပါတယ္ ။ညီမ်ွျခင္း ဒီဘက္ “”အလြတ္ထားထားတာက ေလာေလာဆယ္ ဒီ div tag အတြက္သီးသန့္ app မရွိဘူး လို့ေျပာခ်င္တာပါ။
  <p>Name : <input type="text" ng-model="name"></p>//ng-model ထဲသတ္မွတ္ထားတဲ့အရာကိုျပန္ေခၚသံုးလို့ရပါတယ္။
  <h1>Hello {{name}}</h1><br/>//ဒီမွာျပန္ေခၚသံုးလိုက္ပါျပီ ။{{}} အထဲမွာေရးဖို့ angular Js ကသတ္မွတ္ထားပါတယ္.
<h1>Hello <em ng-bind=“name”></em></h1> // {{}}နဲ့မေရးခ်င္ရင္ေတာ့ ng-bind ကုိေခၚသံုးနိုင္ပါတယ္ ။
</div>

</body>
</html>

browser မွာစမ္းျကည့္ .. ရျပီ ။
na-app ထည့္ထားတဲ့ tag က ေနစျပီး angularJs အလုပ္လုပ္ပါတယ္။သူ့အတြက္ app တစ္ခုဖန္တီးမယ္ဆိုရင္ ေတာ့module ေရးရပါတယ္။ 
အဲ့ဒီ module ထဲမွာ controller တစ္ခုေတာ့အနည္းဆံုးရွိရတယ္။ အဲ့ဒါကို ေစာေစာ က ng-model ကေနျပန္ေခၚျပီး HTML မွာresult ျပန္ျပလို့ရပါတယ္။
module , controller တစ္ခုစီသပ္သပ္စီေရးတာျဖစ္လို့ ဒီလိုပံုစံကပိုျပီး ျပင္ဆင္တည္းျဖတ္ ခ်ဲ့ထြင္ လုပ္ကုိင္ရတာမွာလြယ္ကူေစပါတယ္။
ကဲပံုစံသစ္ေလးစရေအာင္ .. ဒါေလးေတြထပ္မွတ္ထားလိုက္ ပါဦး။
<div ng-app="myApp" ng-controller=“myCtrl”>…</div>
<p>blah blah </p>
<script>
var app = angular.module("myApp", []); 
app.controller(“myCtrl”,function(){
………………
});
</script>
အခု ng-app ထဲမွာသံုးမယ့္ app ရွိေနပါျပီ .. controller မွာေတာ့ ကိုယ္အလုပ္လုပ္ေစခ်င္တဲ့ အရာအတြက္ function  ေရးရပါတယ္ ။ 
function မွာ javascript ပံုစံ အတိုင္း function name မပါပဲ function (){…….} ဆိုျပီးေရးနိုင္ပါတယ္ ။angular Jsရဲ့ ပံုစံျဖစ္တဲ့ module 
နဲ့ controller မွာေတာ့ na-app , ng-controller တို့ကေနျပန္ေခၚဖို့အတြက္ name ေတြလိုအပ္ပါတယ္ ။ကြင္းထဲမွာေရးရတာ(“myApp”,[])
က angular ရဲ့ပံုစံပါ ။ေစာေစာက ေရးထားတာေလးကိုပဲ Model ,View ,Controller (MVC) ပံုစံျပန္ေရးျကည့္မယ္ .
ပိုျပီး ရွင္းရွင္းလင္းလင္းျဖစ္ေအာင္ myApp အတြက္ js တစ္ဖိုင္သပ္သပ္ေရးျပီး လာထည့္ေပးလိုက္ပါတယ္ ။
(HTML ဖိုင္မွာ )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular Intro</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl"> // module myApp ထဲက controller myCtrl အေနနဲ့ ေရးထားတဲ့ functionကိုလွမ္းေခၚတာပါ။
<label>First Name :</label><input type="text" ng-model="firstName" ><br/>
<label>Last Name:</label><input type="text" ng-model="lastName">
<br/>
<p>Hello ! {{firstName + " " + lastName}}</p><br/>
</div>
<script src="js/angular.min.js"></script>
<script src="js/myapp.js"></script>
</body>
</html>
javascript ဖိုင္ကို ခ်ိတ္ရာမွာ CSS လိုမ်ိုး <head> ထဲမွာပဲခ်ိတ္ရမယ္လို့မဆိုလိုပါဘူး ။ အခုလိုမ်ိုး </body> အပိတ္နားမွာ ခ်ိတ္လည္း
ရပါတယ္။ပံုမွန္အားျဖင့္ Browser က HTML ကို run ျပီးမွ Javascript ကို
run တာျဖစ္လို့ သူ့ကိုေနာက္ဆံုးနားမွ လာေရးတာကပိုျပီး သဘာ၀က်ပါတယ္။
(myApp.js ဖိုင္မွာ )

var app=angular.module("myApp”,[]); // module တစ္ခုကိုေရးနည္းအတိုင္းေဆာက္ျပီး app နာမည္နဲ့ထားလိုက္ပါတယ္ ။
app.controller ("myCtrl",function ($scope){ // အဲ့ module class ထဲကေန controller တစ္ခုကိုဆြဲယူတည္ ေဆာက္ျပီး function တစ္ခုထည့္သြင္းေပးလိုက္ပါတယ္ ။
$scope.firstName ="Aung";
$scope.lastName ="Maung";
});
browser မွာ run ျကည့္ပါဦး။ ေနာက္ထပ္ ng-init ,ng-hide ,ng-show တို့ရဲ့ စိတ္၀င္စားဖြယ္ အသံုး၀င္ပံုေတြေလးေတြေျပာစရာရွိပါေသးတယ္။
ပညာရပ္ တစ္ခုေလ့လာမယ္ဆိုရင္ ‘အစ’ ေလးကအရမ္းအေရးျကီးပါတယ္။ အစေလးေသခ်ာနားလည္ရင္ ထပ္ျပီးဆြဲထုတ္ေလ့လာသြားလို့ရပါျပီ ။


Read more ...

Python Programming notes(Basic)

Feb 15, 2016

အခုေနာက္ပိုင္း ကြ်န္ေတာ့္အေနနဲ့ စဥ္းစားမိတာက programming tutorials ကိုသင္ျပေပးခ်င္ရင္
VDO အေနနဲ့သင္ေပးတာက ပိုထိေရာက္တယ္လို့စဥ္းစားမိလာတာ ..
စာအေနနဲ့အမ်ားျကီးရွင္းျပရေပမယ့္ တကယ္ေလ့လာတဲ့သူက နားမရွင္းတတ္ဘူး ..
ေပးတဲ့သူကလညး္နားလည္ေအာင္အမ်ိုးမ်ိုးရွင္းျပရင္းနဲ့ပဲ စာရွည္ျပီး ဘေလာ့ေနာက္တစ္ပုဒ္ျဖစ္သြားေရာ
ျပီးေတာ့ တခ်ို့အပိုင္းေတြမွာစာအေနနဲ့ေတာ္ေတာ္လက္ေပါက္ကပ္ပါတယ္ .
ဒါေျကာင့္ ေနာက္ပိုင္း ကြ်န္ေတာ္ေလ့လာတဲ့ Note  ကုိပဲျပပါမယ္ ... မရွင္းရင္ ေမးလို့ရပါတယ္ ..
facebook မွာဆိုရင္ Philip Macque ကုိအက္ထားလို့ရပါတယ္..

Python programming note ,
g=input("Please type any number here:")
Please type any number here: 3
g**3
27

pow(g,3)
27

import math
math.sqrt(9)
3.0

aungaung=math.sqrt
aungaung(9)
3.0

aungaung=math.floor
aungaung(9.9)
9.0

x=raw_input("Enter name:")
print "Hay" + x
raw_input("press<enter>")

num=str(18)
print "Bucky is "+ num
Bucky is 18

num2=18
print "Bucky is "+ `num2`
Bucky is 18

//input is only for numbers.
//raw_input is multy way data accept by string .
----------------------------------------------------
//Python called array , 'sequences'
family=['mon','dad','bro','sis','dog']
family[3]
'sis'
faimly[-2]
'sis'
'bucky'[3]
'k'
family[1:4:2]
['mon','sis']
---------------------------------------------------
>>> [7,4,5]+[4,5,6]
[7, 4, 5, 4, 5, 6]

>>> 'bucky ' * 10
'bucky bucky bucky bucky bucky bucky bucky bucky bucky bucky '

>>> 21*10
210
>>> [21]*10
[21, 21, 21, 21, 21, 21, 21, 21, 21, 21]

>>> name='roastbeef'
>>> 'x' in name
False
>>> 'r' in name
True

>>> number=[8,1,4,17,28,165,7]
>>> len(number)
7
>>> max(number)
165
>>> min(number)
1

>>> list('bucky')
['b', 'u', 'c', 'k', 'y']
>>> number[3]=77
>>> number
[8, 1, 4, 77, 28, 165, 7]
>>> del number[3]
>>> number
[8, 1, 4, 28, 165, 7]
>>>

>>> example=list('easyhoss')
>>> example[4:]=list('baby')
>>> example
['e', 'a', 's', 'y', 'b', 'a', 'b', 'y']

>>> example[1:1]=[3,3,3]
>>> example
['e', 3, 3, 3, 'a', 's', 'y', 'b', 'a', 'b', 'y']
>>> example[1:5]=[]
>>> example
['e', 's', 'y', 'b', 'a', 'b', 'y']
>>>
-------------------------------------(movie14)
//about the built-in functions/methods.........
>>> aung=[1,2,3,4]
>>> aung.append(5)
>>> aung
[1, 2, 3, 4, 5]

>>> aung.count(5)
1
>>> aung.append(5)//become [1, 2, 3, 4, 5, 5]
>>> aung.count(5)//result must two
2
>>>
>>> aung.count('a')//there haven't 'a' character
>>>

>>> philip=[1,2,3,4,5]
>>> macque=[6,7,8,9,0]
>>> philip.extend(macque)
>>> philip
[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
>>>
-------------------------------------(movie15)
>>> say=['koko','bobo','dodo','momo']
>>> say
['koko', 'bobo', 'dodo', 'momo']
>>> say.index('bobo')
1
>>> say.insert(2,'MinMin')
>>> say
['koko', 'bobo', 'MinMin', 'dodo', 'momo']
>>> say.pop(1) //first "print-out the value" and then remove
'bobo'
>>> say
['koko', 'MinMin', 'dodo', 'momo']
>>> say.remove('dodo') //just remove form list
>>> say // if you want to show result you need to type again
['koko', 'MinMin', 'momo']
>>> say.reverse()
>>> say
['momo', 'MinMin', 'koko']
>>> 
Read more ...

MY PHP မွတ္စု

Feb 15, 2016
//getimagesize($_GET['img']) ကေနအဓိကသံုးတာက img array ကေဖာ္ျပမယ့္ index [0] width [1] height ၿပီးရင္
['mime']=image/jpeg
//imagecopy(ပင္မပံု,watermarkပံု,watermarkရဲ႕အေပၚေအာက္,watermarkရဲ႕ဘယ္ညာ,ပင္မပံုရဲ႕အေပၚေအာက္,
ပင္မပံုရဲ႕ဘယ္ညာ,watermarkရဲ႕ထားမယ့္အျမင့္,watermarkရဲ႕ထားမယ့္အက်ယ္)
//move_uploaded_file() က tmp_name ထဲက ဖိုင္ကုိေရြ႕ဖို႔သံုးတယ္
//ေနာက္ထပ္တစ္ခုက ဖိုင္ကုိေရြ႕တဲ့အခါ ဖိုင္ရဲ႕ extension ကုိစစ္ၿပီးမွေရြ႔မယ္ဆို imagecreatefromjpeg($image)
နဲ႕အရင္ Cache လုပ္ၿပီးရင္ imagejpeg({$GLOBALS['core_path']}/watermark.jpeg) ဆိုရတယ္။
//အေပၚက လင့္လမ္းေၾကာင္းယူျပတာမွာ ပထမက $core_path=dirname(__FILE__); ဆိုၿပီးယူထားတယ္။
// ေနာက္တစ္မ်ိဳး က $core_path=$_SERVER['SCRIPT_FILENAME']; နဲ႕ယူတာျဖစ္ပါတယ္။
အဲဒါကုိ Global ထပ္မေၾကျငာပဲ တန္းယူျပခ်င္ေတာ့ {$GLOBALS['core_path']} လို႕သံုးလိုက္တာျဖစ္ပါတယ္။
//scandir('image/') ဆိုရင္ image folder ထဲက ဖိုင္ေတြကုိ scan စစ္ေပးတယ္။သူကစစ္ယံုစစ္ေပးတာ။
// သူ႔ထက္လန္းတာရွိေသးတယ္။အဲ့ဒါက glob(*.*); ဆိုရွိသမွ်အကုန္ျပမယ္။ glob(*.jpg) ဆို Jpg ပဲျပမယ္။
glob('*.{jpg/png/gif}',GLOB_BRACE) ဆို jpg,png,gif သံုးခုျပေပးမယ္ GLOB_BRACE ထည့္ေပးဖို႕လိုမယ္။
//extension ပဲျဖတ္ယူဖို႕ အတြက္ဆို explode('.',$img)
သူက [0]=>aungaung,[1]=>.,[2]=>jpg ဆိုၿပီးခြဲထုတ္ေပးတယ္။အဲဒီထဲကမွေနာက္ဆံုးတစ္ခုကုိယူမယ္ဆိုရင္
strtolower(end($exploded_img))ဒါဆို ေနာက္ဆံုးတစ္ခုပဲယူမယ္။ထြက္လာတာကုိစာလံဳးေသးနဲ႕ျပလိမ့္မယ္
//md5(microtime()) က နာမည္မထပ္ေအာင္ေပးရင္သံုးတယ္ microtime အခ်ိန္ကိုယူၿပီး md5 နဲ႕ Hash လုပ္လိုက္တာ
//img_sizeကုိခ်ံဳ႕ဖို႕တြက္ခ်င္ရင္ $new_size=(width+height)/(width*(height/100))
ၿပီးရင္ imagecreatetruecolor(width,height); နဲ႕ အခ်ိဳးညီညီပံုထြက္လာေအာင္လုပ္လုိ႕ရတယ္
/* if(is_dir('image/')==false){
     mkdir('image/',0744); 0744က parmission ေပးတာ Linux အတြက္ပဲသံုးတယ္ Windows မွာမသံုးဘူး
}*/
//ပံုဆိုဒ္အတြက္သံုးတာ imagecopyresampled($thumb, $src, 0, 0, $src_pos[0], $src_pos[1], $new_size[0], $new_size[1], $src_size[0], $src_size[1]);
//ပံုဆိုဒ္အတြက္သံုးတာimagecopyresized($new_image,$old_image,0,0,0,0,$new_width,$new_height,$img_width,$img_height);
//အဲ့ဒီ function ႏွစ္ခုကြာျခားခ်က္ကုိ အြန္လိုင္းမွာရွာၾကည့္ေတာ့ imagecopyresize uses the nearest pixel algorithm, imagecopyresampled
uses the the bicubic interpolation. The results clearly shows the difference  . လို႕ရတယ္ အရည္အေသြးမေလွ်ာ့ခ်င္ရင္ေတာ့ imagecopyresampled()သံုးတာ
ပိုေကာငး္လိမ့္မယ္။
ေနာက္သင္ခန္းစာ Javascript ႏွစ္ဖိုင္ခ်ိတ္ၿပီး Progress bar ဖန္တီးတာ တစ္ဖိုင္က function ကုိေနာက္တစ္ဖိုင္က obj ေဆာက္ၿပီးသံုးသြားတာ ။
library.js မွာဒါေတြကုိေရး
function progress_bar(container){
var bar=document.createElement('div');
bar.style.width='0px';
bar.style.height='100%';
bar.style.background='#eef';
container.appendChild(bar);

var text=document.createElement('div');
text.style.marginTop='-26px';
text.style.textAlign='center';
text.style.color='#222';
text.style.size='15px';
text.appendChild(document.createTextNote('0%'));
container.appenChild(text);

this.setpercentage =function(percentage){
bar.style.width=percentage+'%';
text.removeChild(text.firstChild);
text.appendChild(document.createTextNote(percentage+'%'));
}
}
Main.js မွာဒါေရး
window.onload=function(){
var bar=new progress_bar(document.getElementById('progress_bar'));
document.getElementById('set_50').onclick=function(){
bar.setpercentage(50);
}

document.getElementById('0to100').onclick=function(){
var i=0;
var interval=window.setInterval(function(){
if(i>=100) window.createInterval(interval);
bar.setpercentage(i);
i++;
},50)
}
}

မွတ္ထားရမယ့္ SQL Coding
INSERT INTO page_hit(name,name) VALUES (values,values) ON DUPLICATE KEY UPDATE hit=hit+1;

array ႏွစ္ထပ္နဲ႕ ရလဒ္ကုိထုတ္ျပမယ္ဆိုရင္ေအာက္ကပံုစံကုိမွတ္ထား ..
$sql=SELECT * FROM page_hit ;
$result=mysqli_query($GLOBALS['$conn']$sql);
$stat=array();
while($row=mysqli_fetch_assoc($result)){
$stat[]=array('value1'=>$row['something1'],'value2'=>$row['something2']);
}stat array() ထဲကုိ $row() ကလာမည့္ေဒတာေတြ ေနရာခ်ေပးလိုက္တယ္။အဲ့ဒါကိုမွ
HTML ထဲေရာက္ရင္ foreach နဲ႕ပတ္ၿပီးျပန္ထုတ္ျပရမယ္။

function __construct($something){...} က Class ကုိေခၚတာနဲ႕တန္းအလုပ္လုပ္တယ္။
က်န္တာေတြက class ကုိ obj ေျပာင္းၿပီး $class->function ပံုစံနဲ႕ေခၚရတာ

__toString() က string မျဖစ္ေသးတာကို string ေျပာင္းေပးႏိုင္တယ္ ။ေအာက္ကဥပမာမွာ
URL ကုိ string ေျပာင္းခိုင္းထားတယ္။
function __toString(){
return $this->site_path."<br/>".$_SERVER['REQUEST_URI'];
}
အခုထပ္ျပထားတဲ့ဥပမာမွာေတာ့ URL ထဲက '/' ေတြကုိဖယ္ထုတ္တဲ့ method ေလးကိုျပထားတယ္
function segment($segment){
$url=str_replace($this->site_path,'',$_SERVER['REQUEST_URI']);
$url=explode('/',$url);
if (isset($url[$segment])){
return $url[$segment];
}else{
return false;
}
Read more ...