diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 54d1a6f0..51a0f993 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -1,23 +1,28 @@ - # JavaScript မိတ်ဆက် + JavaScript ဆိုတာဘာလည်း? JavaScript နဲ့ ဘာတွေလုပ်လို့ရလည်း နောက်ပြီး တခြားသော နည်းပညာတွေနဲ့ ဘယ်လို ချိတ်ဆက်အလုပ်လုပ်လည်း ဆိုတာ လေ့လာရအောင်။ + ## JavaScript ဆိုတာဘာလည်း? -*JavaScript* ကို ပထမ ပိုင်းမှာ web pages တွေ အလုပ်လုပ်နိုင်အောင် ဖန်တီးခဲ့ပြီး Script Language ကို အသုံးပြုထားပါတယ်။ + +_JavaScript_ ကို ပထမ ပိုင်းမှာ web pages တွေ အလုပ်လုပ်နိုင်အောင် ဖန်တီးခဲ့ပြီး Script Language ကို အသုံးပြုထားပါတယ်။ + JavaScript ဟာ web page တွေရဲ့ HTML တွေထဲမှာ ရေးနိုင်ပြီးတော့ page စလုပ်လုပ်ချင်းမှာ အလုပ်လုပ်နိုင်ပါတယ်။ + Scripts တွေဟာ ဆိုရင်လည်း plain text အနေနဲ့ အလုပ်လုပ်နိုင်ပြီး အထူးတလည်း တခြားလုပ်စရာ မလိုပါဘူး။ -ဒီနေရာမှာ ပြောချင်တာက JavaScript ဆိုတာဟာ တခြား programming language ဖြစ်တဲ့ [Java](https://en.wikipedia.org/wiki/Java_(programming_language)) နဲ့ လုံးဝမတူပါဘူး + +ဒီနေရာမှာ ပြောချင်တာက JavaScript ဆိုတာဟာ တခြား programming language ဖြစ်တဲ့ [Java]() နဲ့ လုံးဝမတူပါဘူး ```smart header="JavaScript လို့ ဘာလို့ခေါ်တာလည်း?" @@ -26,29 +31,33 @@ Scripts တွေဟာ ဆိုရင်လည်း plain text အနေန သို့သော် တိုးတက်ပြောင်းလဲလာသည်နှင့်အမျှ JavaScript ဟာ [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript) ဟုခေါ်သော ၎င်း၏ ကိုယ်ပိုင် သတ်မှတ်ချက်များနှင့် အပြည့်အဝလွတ်လပ်သော ဘာသာစကားတစ်ခု ဖြစ်လာပြီး ယခုအခါ Java နှင့်လုံးဝမသက်ဆိုင်တော့ပါ။ ``` + + ယခုအခါ JavaScript သည် browser ပေါ်တွင်သာ အလုပ်လုပ်သည် မဟုတ်တော့ဘဲ Server (သို့မဟုတ်) [the JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine) ဟုခေါ်သော special program ရှိသည့် မည်သည့် device မှာမဆို အလုပ်လုပ်နေပါပြီ ဖြစ်ပါသည်။ + Browser တွင် သူ့ရဲ့ ကိုယ်ပိုင် ထည့်သွင်းထားသော "JavaScript virtual machine" လို့ခေါ်သည့် engine ရှိပြီး Browser ပေါ်မူတည်ပြီး engine တွေမှာ ကိုယ်ပိုင် နာမည် များရှိပါသည်။ ဥပမာ အားဖြင့် -- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome, Opera and Edge. +- [V8]() -- in Chrome, Opera and Edge. - [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. -- [Chakra](https://en.wikipedia.org/wiki/Chakra_(JScript_engine)) -- in IE -- "JavaScriptCore","Nitro" and "SquirrelFish" for Safari +- [Chakra]() -- in IE +- "JavaScriptCore","Nitro" and "SquirrelFish" for Safari စသည်ဖြင့် ရှိပါသည်။ + -အပေါ်က Engine နာမည်တွေဟာ Online စာမျက်နှာတွေ မှာ မကြာမဏ တွေ့မြင်နိုင်ပြီး ကျွန်တော် တို့လည်း ကျွန်တော်တို့လည်း ရှေ့ဆက် သင်ခန်းစာများတွင် အသုံးပြုသွားပါမယ်။ ဥပမာအားဖြင့် X ဆိုသော feature ကို V8 တွင် အလုပ်လုပ်သည်ဆိုလျှင် ထို feature သည် Chrome, Opera and Edge မှာ အလုပ်လုပ်သည်ဟု ယူဆနိုင်ပါသည်။ +အပေါ်က Engine နာမည်တွေဟာ Online စာမျက်နှာတွေ မှာ မကြာမဏ တွေ့မြင်နိုင်ပြီး ကျွန်တော် တို့လည်း ကျွန်တော်တို့လည်း ရှေ့ဆက် သင်ခန်းစာများတွင် အသုံးပြုသွားပါမယ်။ ဥပမာအားဖြင့် X ဆိုသော feature ကို V8 တွင် အလုပ်လုပ်သည်ဆိုလျှင် ထို feature သည် Chrome, Opera and Edge မှာ အလုပ်လုပ်သည်ဟု ယူဆနိုင်ပါသည်။ ```smart header="Engine တွေက ဘယ်လိုအလုပ်လုပ်လည်း?" -Engines တွေက ရှုပ်ထွေးပါတယ် ဒါပေမယ့် အခြေခံကတော့ ရိုးရှင်းပါတယ်။ +Engines တွေက ရှုပ်ထွေးပါတယ် ဒါပေမယ့် အခြေခံကတော့ ရိုးရှင်းပါတယ်။ @@ -57,79 +66,99 @@ Engines တွေက ရှုပ်ထွေးပါတယ် ဒါပေမ 3. ပြောင်းထားတဲ့ machine codes တွေကို အလွန်လျင်မြန်စွာ run ပေးတယ်။ -Engine တွေဟာ အလုပ်လုပ်သည့် အဆင့်တိုင်းတွင် ပိုမိုကောင်းမွန်စွာ အလုပ်လုပ်ပေးပါသည်။ ထို့အပြင် Script တွေကို run နေသည့် အဆင့်တိုင်းမှာလည်း ခွဲခြမ်းစိတ်ဖြာပေးပြီး နောက်လာမယ့် machine code တွေမှာ ပိုမိုကောင်းမွန်အောင် ထိုအချက်အလက်တွေကို အသုံးပြုပါသည်။ +Engine တွေဟာ အလုပ်လုပ်သည့် အဆင့်တိုင်းတွင် ပိုမိုကောင်းမွန်စွာ အလုပ်လုပ်ပေးပါသည်။ ထို့အပြင် Script တွေကို run နေသည့် အဆင့်တိုင်းမှာလည်း ခွဲခြမ်းစိတ်ဖြာပေးပြီး နောက်လာမယ့် machine code တွေမှာ ပိုမိုကောင်းမွန်အောင် ထိုအချက်အလက်တွေကို အသုံးပြုပါသည်။ ``` + ## Browser မှာပါတဲ့ JavaScript တွေက ဘာတွေလုပ်နိုင်လည်း? + နောက်ပိုင်း JavaScript Version ဟာ လုံခြုံပါတယ်။ သူတို့ကို low-level တွေ ဖြစ်တဲ့ memory ဒါမှမဟုတ် CPU တို့ကို ဆက်သွယ် အလုပ်လုပ်ခွင့် ပေးမထားပါဘူး။ ဘာကြောင့်လည်းဆိုတော့ အစပိုင်းတုန်းက JavaScript တွေကို low-level access မလိုတဲ့ browser တွေအတွက် ဖန်တီးထားခဲ့လို့ပါ။ + JavaScript ရဲ့လုပ်ဆောင်နိုင်စွမ်းဟာ သူ ဘယ်မှာ Run နေလည်းဆိုတဲ့ environment အပေါ်မှာ မူတည်ပါတယ်။ ဥပမာ - [Node.js](https://wikipedia.org/wiki/Node.js) ဆိုလျှင် JavaScript နဲ့ Files တွေ read/write လုပ်တာ , network request တွေလုပ်တာ စသည်ဖြင့် လုပ်ဆောင်နိုင်ပါတယ်။ -Browser မှာ ပါဝင်တဲ့ JavaScript တွေကတော့ webpage တွေဖော်ပြတာ, အသုံးပြုသူတွေ user နဲ့ webserver ကို ချိတ်ဆက်ပေးတာ စသည်ဖြင့် လုပ်ဆောင်နိုင်ပါတယ်။ - + +Browser မှာ ပါဝင်တဲ့ JavaScript တွေကတော့ webpage တွေဖော်ပြတာ, အသုံးပြုသူတွေ user နဲ့ webserver ကို ချိတ်ဆက်ပေးတာ စသည်ဖြင့် လုပ်ဆောင်နိုင်ပါတယ်။ + -ဥပမာ အားဖြင့် , Browser မှ JavaScript တွေဟာ : + +ဥပမာ အားဖြင့် , Browser မှ JavaScript တွေဟာ : -- Html တွေ အလုပ်လုပ်နိုင်အောင် လုပ်ဆောင်ပေးတာ ၊ ရှိနေတဲ့ content တွေကို update လုပ်ပေးတာ ၊ Styles တွေ ချိန်းပေးတာ + +- Html တွေ အလုပ်လုပ်နိုင်အောင် လုပ်ဆောင်ပေးတာ ၊ ရှိနေတဲ့ content တွေကို update လုပ်ပေးတာ ၊ Styles တွေ ချိန်းပေးတာ - User actions တွေကို လုပ်ဆောင်ပေးတာ ဥပမာ mouse clicks, pointer movements, key pressess -- Server ဆီကို network ကနေ တစ်ဆင့် request တွေ ပေးပို့ခြင်း ၊ files တွေ download ချတာ upload တင်တာ (so-called [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) and [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) technologies) +- Server ဆီကို network ကနေ တစ်ဆင့် request တွေ ပေးပို့ခြင်း ၊ files တွေ download ချတာ upload တင်တာ (so-called [AJAX]() and [COMET]() technologies) + - cookies တွေ သိမ်းဆည်းတာ ၊ ထုတ်ယူတာ ၊ website ကို လာတဲ့ သူတွေကို မေးခွန်းတွေမေးတာ ၊ message တွေ ပြပေးတာ + - client-side (local storage) က data တွေကို ပြန်လည်ထုတ်ယူတာ စသည်ဖြင့် လုပ်ဆောင်နိုင်ပါတယ်။ + ## Browser မှာ ပါတဲ့ JavaScript တွေက ဘာတွေမလုပ်နိုင်ဘူးလည်း? -Browser မှာ အလုပ်လုပ်တဲ့ JavaScript တွေရဲ့ လုပ်ဆောင်နိုင်စွမ်းဟာ အသုံးပြူသူတွေရဲ့ လုံခြုံရေး ကြောင့် ကန်သတ်မှုတွေလုပ်ထားပါတယ်။ ရည်ရွယ်ချက်ကတော့ မသမာတဲ့ webpage တွေကနေ အသုံးပြုသူတွေရဲ့ private အချက်အလက်တွေ ရယူတာ ဒါမှမဟုတ် အသုံးပြုသူတွေရဲ့ အချက်အလက်တွေကို ဖျက်စီးပြစ်တာ စသည့် အကြောင်းအရာတွေ ဖြစ်နိုင်တာကြောင့်ပါ။ + +Browser မှာ အလုပ်လုပ်တဲ့ JavaScript တွေရဲ့ လုပ်ဆောင်နိုင်စွမ်းဟာ အသုံးပြူသူတွေရဲ့ လုံခြုံရေး ကြောင့် ကန်သတ်မှုတွေလုပ်ထားပါတယ်။ ရည်ရွယ်ချက်ကတော့ မသမာတဲ့ webpage တွေကနေ အသုံးပြုသူတွေရဲ့ private အချက်အလက်တွေ ရယူတာ ဒါမှမဟုတ် အသုံးပြုသူတွေရဲ့ အချက်အလက်တွေကို ဖျက်စီးပြစ်တာ စသည့် အကြောင်းအရာတွေ ဖြစ်နိုင်တာကြောင့်ပါ။ + ဥပမာ ဘယ်လိုဟာတွေကို ကန့်သတ်ထားလည်းဆိုတော့: + - Webpage တစ်ခုမှာ ရှိတဲ့ JavaScript တွေဟာ hard disk ပေါ်မှာ files တွေကို read/write လုပ်တာ , ကူးယူတာ ဒါမှမဟုတ် program တွေကို run တာ တွေမလုပ်နိုင်ပါဘူး။ သူတို့ကို OS functions တွေနဲ့ တိုက်ရိုက် အလုပ်လုပ်ခွင့် ပေးမထားပါဘူး။ - နောက်ပိုင်း browsers တွေကတော့ files တွေနဲ့ အလုပ်လုပ်ခွင့်ပေးထားပါတယ် ဒါပေမယ့် သတ်မှတ်ထားတဲ့ လုပ်ဆောင်ချက်တွေက လွဲပြီး ကျန်တာလုပ်ခွင့်မပေးပါဘူး ဥပမာ files တွေကို drag and drop လုပ်ပြီး browser ပေါ်တင်တာတို့ ဒါမှမဟုတ် `` tag ကို သုံးပြီး files တွေကို ရွေးချယ်တာ စသည်ဖြင့်ပါ။ + + နောက်ပိုင်း browsers တွေကတော့ files တွေနဲ့ အလုပ်လုပ်ခွင့်ပေးထားပါတယ် ဒါပေမယ့် သတ်မှတ်ထားတဲ့ လုပ်ဆောင်ချက်တွေက လွဲပြီး ကျန်တာလုပ်ခွင့်မပေးပါဘူး ဥပမာ files တွေကို drag and drop လုပ်ပြီး browser ပေါ်တင်တာတို့ ဒါမှမဟုတ် `` tag ကို သုံးပြီး files တွေကို ရွေးချယ်တာ စသည်ဖြင့်ပါ။ - camera/microphone အပြင် တခြား devices တွေ နဲ့ ချိတ်ဆက် အလုပ်လုပ်နိုင် ဖို့ အသုံးပြုသူ User ရဲ့ permission တော့လိုအပ်ပါတယ်။ ထို့မှသာ JavaScript အလုပ်လုပ်ခွင့်ပေးထားတဲ့ webpage တစ်ခုကနေ web-camera ကို အသုံးပြုပြီး နောက်ကွယ်ကနေ User တွေရဲ့ အချက်အလက်တွေကို [NSA](https://en.wikipedia.org/wiki/National_Security_Agency) စသည့် အဖွဲ့အစည်းတွေကို မပေးပို့နိုင်မှာပါ။ + + camera/microphone အပြင် တခြား devices တွေ နဲ့ ချိတ်ဆက် အလုပ်လုပ်နိုင် ဖို့ အသုံးပြုသူ User ရဲ့ permission တော့လိုအပ်ပါတယ်။ ထို့မှသာ JavaScript အလုပ်လုပ်ခွင့်ပေးထားတဲ့ webpage တစ်ခုကနေ web-camera ကို အသုံးပြုပြီး နောက်ကွယ်ကနေ User တွေရဲ့ အချက်အလက်တွေကို [NSA](https://en.wikipedia.org/wiki/National_Security_Agency) စသည့် အဖွဲ့အစည်းတွေကို မပေးပို့နိုင်မှာပါ။ + - မတူညီတဲ့ tabs/window တွေဟာ ပုံမှန်အားဖြင့် အဆက်အစပ်မရှိပါဘူး။ တစ်ခါတစ်လေတော့ ရှိနိုင်ပါတယ်။ ဥပမာအားဖြင့် Browser မှာ tab တစ်ခုကနေ နောက်ထပ် tab တစ်ခုကို ဖွင့်တယ် ဆိုပါစို့ ၊ အဲ့နေရာမှာ အသစ်ဖွင့်လိုက်တဲ့ tab က မူလ tab နဲ့ မတူညီတဲ့ sites (မတူညီတဲ့ domain, protocol or port) တစ်ခုဖြစ်နေမယ်ဆိုရင် access မရနိုင်ပါဘူး။ - ထိုအရာကို "Same Origin Policy" လို ခေါ်ပါတယ်။ သူနဲ့ အလုပ်လုပ်နိုင်ဖို့ဆိုရင် မူလ page နဲ့ အသစ် ဖွင့်လိုက်တဲ့ page နှစ်ခုစလုံးက data exchange လုပ်ဖို့ သဘောတူရမှာ ဖြစ်ပြီး သတ်မှတ်ထားတဲ့ JavaScript Code တွေကနေ လုပ်ဆောင်ပေးမှာ ဖြစ်ပါတယ်။ နောက် သင်ခန်းစာတွေမှာ ထပ်ပြီး ရှင်းပြပါမယ်။ + ထိုအရာကို "Same Origin Policy" လို ခေါ်ပါတယ်။ သူနဲ့ အလုပ်လုပ်နိုင်ဖို့ဆိုရင် မူလ page နဲ့ အသစ် ဖွင့်လိုက်တဲ့ page နှစ်ခုစလုံးက data exchange လုပ်ဖို့ သဘောတူရမှာ ဖြစ်ပြီး သတ်မှတ်ထားတဲ့ JavaScript Code တွေကနေ လုပ်ဆောင်ပေးမှာ ဖြစ်ပါတယ်။ နောက် သင်ခန်းစာတွေမှာ ထပ်ပြီး ရှင်းပြပါမယ်။ - အဲ့လို ကန့်သတ်မှုတွေက ထပ်ပြောရရင် user တွေရဲ့ လုံခြုံရေး ကြောင့်ပါပဲ။ ဥပမာ user ဖွင့်ထားတဲ့ `http://anysite.com` ဆိုတဲ့ tab တစ်ခုကနေ နောက်ထပ် tab တစ်ခုဖြစ်တဲ့ `http://gmail.com` က အချက်အလက်တွေကို မရယူနိုင်ပါဘူး + + အဲ့လို ကန့်သတ်မှုတွေက ထပ်ပြောရရင် user တွေရဲ့ လုံခြုံရေး ကြောင့်ပါပဲ။ ဥပမာ user ဖွင့်ထားတဲ့ `http://anysite.com` ဆိုတဲ့ tab တစ်ခုကနေ နောက်ထပ် tab တစ်ခုဖြစ်တဲ့ `http://gmail.com` က အချက်အလက်တွေကို မရယူနိုင်ပါဘူး + - JavaScript မှာ web server ရဲ့ domain နဲ့ လက်ရှိ web page domain တူတယ်ဆိုရင် အလွယ်တကူ ချိတ်ဆက်နိုင်ပါတယ်။ ဒါပေမယ့် လက်ရှိ website ကနေ တစ်ခြား sites/domains က အချက်အလက်တွေ ရယူဖို့ကတော့ သိပ်တော့ မရိုးရှင်းပါဘူး။ တကယ်လို့ တခြား websites/domain က တိကျတဲ့ သဘောတူညီမှု (ထိုအရာကို HTTP headers တွင် ဖော်ပြကျပါတယ်) တစ်ခုရှိရင်တော့ ဖြစ်နိုင်ပါတယ်။ ထပ်ပြောရရင် ဒါကလည်း လုံခြုံရေး ကန့်သတ်ချက်တစ်ခုပါပဲ။ ![](limitations.svg) + တကယ်လို့သာ JavaScript ကို Browser မှာ မဟုတ်ပဲ တစ်ခြားနေရာမှာ သုံးမယဆိုရင် အဲ့လို ကန့်သတ်ချက်တွေ မရှိပါဘူး။ ဥပမာ Server ပေါ်မှာ ဆိုရင်ပေါ့။ နောက်ပိုင်း Browser တွေကတော့ plugin/extensions တွေကို ထပ်တိုး permissions တွေတောင်းပြီး အလုပ်လုပ်နိုင်ပါတယ်။ + ## ဘယ်အရာက JavaScript ကို ထူးခြားစေလည်း? + JavaScript နဲ့ ပတ်သတ်ပြီး အကောင်းဆုံး အချက် ၃ ချက်ကတော့: ```compare @@ -140,34 +169,45 @@ JavaScript နဲ့ ပတ်သတ်ပြီး အကောင်းဆု + အဓိက browsers အားလုံးမှာ အလုပ်လုပ်ပြီး default ပါဝင်တာ. ``` + + JavaScript ဟာ ထို အချက်သုံးချက်ကို Browser ပေါ်မှာ လုပ်ဆောင်နိုင်တဲ့ တစ်ခုတည်းသော နည်းပညာ ဖြစ်ပါတယ်။ + အဲ့ဒီအရာကပဲ JavaScript ကို ထူးခြားစေပြီး browser interfaces တွေကို ဖန့်တီးတဲ့ လူသုံးအများဆုံး tool တစ်ခု ဖြစ်နေတာပါပဲ + ဒါအပြင် JavaScript ကိုသုံးပြီး server တွေ mobile applications, စတဲ့ အရာတွေလည်း ဖန်တီးနိုင်ပါတယ်။ + ## JavaScript ကို အခြေခံထားတဲ့ Languages များ + JavaScript ရဲ့ ရေးသားပုံတွေ က လူတိုင်းရဲ့ လိုအပ်ချက်နဲ့ တော့ မကိုက်ညီ နိုင်ပါဘူး။ မတူညီတဲ့ သူတွေမှာ မတူညီတဲ features တွေ လိုအပ်ကျပါတယ်။ + ဒါကလည်း ဖြစ်နိုင်ပါတယ်။ ဘာကြောင့်လည်းဆိုတော့ projects and requirements တွေက လူတိုင်း မတူလို့ပါ။ + ဒါကြောင့် မကြာသေးမှီ အချိန်အတွင်းမှာ Language အသစ်တွေ အများကြီးပေါ်လာပါတယ်။ အဲ့ဒီ Langulage တွေဟာ browser ပေါ်မှာ အလုပ်မလုပ်ခင် JavaScript code ကို ပြောင်းပြီး အလုပ်လုပ်ပေးပါတယ်။ -နောက်ပိုင်း tools တွေဟာ source code တစ်ခုကနေ နောက်တစ်ခုကို လျှင်လျှင်မြန်မြန် နဲ့ တိတိကျကျ ပြောင်းပေးနိုင်ပါတယ်။ တကယ်တော့ ချိတ်ဆက်မှု တစ်ခုအောက်မှာ developers တွေကို langulage ရဲ့ code တွေကို နောက်တစ်ခုကို ပြောင်းပေးတာပါပဲ။ + +နောက်ပိုင်း tools တွေဟာ source code တစ်ခုကနေ နောက်တစ်ခုကို လျှင်လျှင်မြန်မြန် နဲ့ တိတိကျကျ ပြောင်းပေးနိုင်ပါတယ်။ တကယ်တော့ ချိတ်ဆက်မှု တစ်ခုအောက်မှာ developers တွေကို langulage ရဲ့ code တွေကို နောက်တစ်ခုကို ပြောင်းပေးတာပါပဲ။ + အဲ့လို Languages တွေကတော့ : + - [CoffeeScript](http://coffeescript.org/) ကတော့ JavaScript ကို "syntactic sugar" လုပ်ပေးထားတာပါ (Sugar လုပ်ထားတယ်ဆိုတာက အခြေခံအားဖြင့် ရှည်တဲ့ syntex တွေကို တိုတိုလေး ရေးလို့ရအောင်လုပ်ပေးထားတာပါ). သူမှာ syntex တွေကို တိုတိုလေး နဲ့ ပိုရှင်း ပိုပြီး တိကျတဲ့ syntex တွေနဲ့ ​ရေးနိုင်ပါတယ်။ ပုံမှန်တော့ Reby developer တွေ သဘောကျ ကျပါတယ်။ - [TypeScript](http://www.typescriptlang.org/) ကတော့ "strict data typing" (stick data type ဆိုတာ strong data type ကို ဆိုလိုတာပါ။ ဥပမာ string + number လုပ်လို့မရပါဘူး) ကို ပို အာရုံစိုက်ထားပြီး development တွေကို ပိုမို ရိုးရှင်းအောင် လုပ်ဆောင်ပေးပြီး ရှုပ်ထွေးတဲ့ systems တွေ အတွက်လည်း အထောက်အကူဖြစ်အောင် လုပ်ပေးထားပါတယ်။ သူ့ကို Microsoft က ဖန်တီးထားပါတယ်။ @@ -181,15 +221,18 @@ JavaScript ရဲ့ ရေးသားပုံတွေ က လူတိုင - [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) ကတော့ ထွက်လာတာ မကြာသေးတဲ့ language ဖြစ်ပြီး ကျစ်ကျစ်လစ်လစ် နဲ့ safe programming langulage တစ်ခု ဖြစ်ပါတယ်။ သူကို့တော့ browser နဲ့ Node မှာ အသုံးပြုလို့ရပါတယ်။ + နောက်ထပ်လည်း အများကြီး ရှိနိုင်ပါသေးတယ်။ တကယ်လို့ transpiled language (langulage တစ်ခုကနေ တစ်ခြား langulage တစ်ခုကို ပြောင်းပေးနိုင်သော language) ကို သုံးနေတယ်ဆိုရင်တောင်မှ ကိုယ်ဘာလုပ်နေလည်း ဆိုတာကို သိဖို့ JavaScript ကို နားလည်ဖို့လိုပါတယ်။ + ## အနှစ်ချုပ် + - JavaScript ကို အစပိုင်းမှာ browser အတွက်ပဲ တီထွင်ထားခဲ့ပေမယ် အခုတော့ တစ်ခြား နေရာတွေမှာပါ သုံးလို့ရနေပါပြီ။ - ဒီကနေ့မှာတော့ JavaScript ဟာ HTML/CSS နဲ့ အပြည့်အဝ အလုပ်လုပ်နိုင်တဲ့ လူသုံးအများဆုံး browser language တစ်ခု ဖြစ်နေပါပြီ။ - - အခုတော့ "transpiled language" တွေ အများကြီးရှိနေပါပြီဖြစ်ပြီး တကယ်လို့ JavaScript ကျွမ်းကျင်သွားပြီလို့ ထင်ရင် တခြား "transpiled language" တွေကိုလည်း လေ့လာသင့်ပါတယ်။ diff --git a/1-js/01-getting-started/2-manuals-specifications/article.md b/1-js/01-getting-started/2-manuals-specifications/article.md index 41cd9f9d..ec8dda83 100644 --- a/1-js/01-getting-started/2-manuals-specifications/article.md +++ b/1-js/01-getting-started/2-manuals-specifications/article.md @@ -1,4 +1,4 @@ -# Manual နဲ့ သတ်မှတ်ချက် +# အသုံးပြုပုံ နှင့် သတ်မှတ်ချက်များ @@ -37,7 +37,9 @@ **MDN (Mozilla) JavaScript Reference** ကတော့ ဥပမာ တွေနဲ့ အခြားအချက်အလက်တွေအတွက် အဓိက ဖြစ်ပါတယ်။ language နဲ့ ပတ်သတ်တဲ့ functions တွေ methods တွေ နဲ့ ပတ်သတ်ပြီး အသေးစိတ် အချက်အလက်တွေ လေ့လာဖို့အတွက် ကောင်းတဲ့ နေရာပါပဲ။ + + ဒီမှာ သွားကြည့်လို့ရပါတယ်။ diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index 35f82bf5..35e55290 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -1,87 +1,128 @@ # Hello, world! -This part of the tutorial is about core JavaScript, the language itself. + -But we need a working environment to run our scripts and, since this book is online, the browser is a good choice. We'll keep the amount of browser-specific commands (like `alert`) to a minimum so that you don't spend time on them if you plan to concentrate on another environment (like Node.js). We'll focus on JavaScript in the browser in the [next part](/ui) of the tutorial. +ဒီ လေ့ကျင့်ခန်းကတော့ JavaScript Lanaguage ရဲ့ အခြေခံအကျဆုံး အကြောင်းအရာတွေကို လေ့လာရမှာ ဖြစ်ပါတယ်။ -So first, let's see how we attach a script to a webpage. For server-side environments (like Node.js), you can execute the script with a command like `"node my.js"`. + +ဒါပေမယ့် အဲ့ဒီ အကြောင်းအရာတွေကို မလေ့လာခင် အရင်ဆုံး ကျွန်တော်တို့ရေးထားတဲ့ scripts တွေကို run လို့ရတဲ့ environment တစ်ခုလိုပါတယ်။ -## The "script" tag +အရမ်းတွေးနေစရာမလိုပါဘူး။ -JavaScript programs can be inserted almost anywhere into an HTML document using the ` -*/!* + -

...After the script.

+JavaScript code တွေကို HTML ဖိုင် ရဲ့ ဘယ်နေရာမှာမဆို ` + */!* + +

...After the script.

+ ``` ```online -You can run the example by clicking the "Play" button in the right-top corner of the box above. + +အခု ဥပမာ ရဲ့ ညာဖက် ထောင့်နားက "Play" button လေးကို နှိပ်ပြီး run ကြည့်လို့ရတယ်နော်။ ``` -The ` - ``` +``` + + - This trick isn't used in modern JavaScript. These comments hide JavaScript code from old browsers that didn't know how to process the ` ``` + +အပေါ်က ဥပမာ ထဲမှာဆိုရင် `/path/to/script.js` ဆိုတဲ့ file path အတိအကျကို ညွှန်ပြထားသလိုပဲ JavaScript file ရဲ့ တည့်နေရာနဲ့ HTML ရဲ့ တည်နေရာကို မူတည်ပြီး လည်း ညွှန်ပြလို့ရပါတယ်။ ဥပမာ `src="script.js"`, `src="./script.js"` အာလိုရေးထားမယ်ဆိုရင် သူက လက်ရှိ HTML file ရှိတဲ့ same folder ထဲက script.js file ကို ညွှန်ပြပေးတာ ဖြစ်ပါတယ်။ -Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"`, just like `src="./script.js"`, would mean a file `"script.js"` in the current folder. -We can give a full URL as well. For instance: +တကယ်လို့ ကိုယ်က တစ်ခြား website က JavaScript ကို သုံးချင်တယ်ဆိုရင်လည်း URL အတိအကျကို ညွှန်ပြပြီး သုံးလို့ရပါတယ်။ ဥပမာ : + + ```html ``` -To attach several scripts, use multiple tags: +တစ်ခုထပ်ပိုတဲ့ JavaScript file တွေကို သုံးချင်တယ်ဆိုရင် script tag တွေ ထပ်ဖွင့်ပြီး ရေးသွားလို့ရပါတယ်။ + ```html @@ -90,29 +131,35 @@ To attach several scripts, use multiple tags: ``` ```smart -As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files. - -The benefit of a separate file is that the browser will download it and store it in its [cache](https://en.wikipedia.org/wiki/Web_cache). + +စည်းကမ်းအရကတော့ ရိုးရှင်းတဲ့ scripts တွေကို ပဲ HTML ထဲ တိုက်ရိုက်ရေးသင့်ပါတယ်။ ရှုပ်ထွေးတဲ့ scripts တွေကို တစ်ခြား JavaScript file ထဲမှာ ခွဲရေးပါ။ -Other pages that reference the same script will take it from the cache instead of downloading it, so the file is actually downloaded only once. + +အဲ့လို file သတ်သတ်ခွဲရေးလိုက်ခြင်းရဲ့ ကောင်းတဲ့ အချက်က ပထမဆုံး run လိုက်တာနဲ့ browser က အဲ့ဒီ JavaScript file ကို download လုပ်ပြီး [cache](https://en.wikipedia.org/wiki/Web_cache) ထဲမှာ သိမ်းထားလိုက်ပါတယ်။ -That reduces traffic and makes pages faster. + +တကယ်လို့ နောက်ထပ် HTML file တွေကနေ အဲ့ဒီ script file ကို ပဲ ထပ်သုံးမယ်ဆိုရင် နောက်တစ်ခါ download ထပ်လုပ်စရာမလိုတော့ပဲ cache ထဲကနေပဲ တိုက်ရိုက် သုံးလိုက်လို့ loading time ကို ပိုမြန်သွားစေပါတယ်။ + ``` -````warn header="If `src` is set, the script content is ignored." -A single ` ``` +ဒါကြောင့်မို့လို့ ` @@ -120,13 +167,15 @@ The example above can be split into two scripts to work: alert(1); ``` -```` -## Summary +``` + +## အနှစ်ချုပ် -- We can use a ``. +- `` +Browser scripts တွေနဲ့ webpage တွေ ဘယ်လို အလုပ်လုပ်တယ်ဆိုတာလေ့လာဖို့က အများကြီး ကျန်ပါသေးတယ်။ အခု လက်ရှိ ကျွန်တော်တို့က JavaScript language ကိုပဲ လေ့လာနေတာကြောင့် တခြား browser နဲ့ ပတ်သတ်တဲ့ အလုပ်လုပ်ပုံတွေကို ဖယ်ထားလိုက်ပါအုန်းမယ်။ ဒါကြောင့် Browser ကို ကျွန်တော်တို့ လက်ရှိ လေ့လာနေတဲ့ JavaScript ကို run ဖို့အတွက်ပဲ လိုအပ်တာတွေကို လေ့လာကျတာပေါ့။ -There is much more to learn about browser scripts and their interaction with the webpage. But let's keep in mind that this part of the tutorial is devoted to the JavaScript language, so we shouldn't distract ourselves with browser-specific implementations of it. We'll be using the browser as a way to run JavaScript, which is very convenient for online reading, but only one of many. +```