Add JavaScript basic callback and promise documentation

docs/02_javascript/basic/callback-promises.md

@@ -0,0 +1,105 @@
+---
+
+sidebar_position: 1
+tags:
+
+- callbacks
+- promise
+
+---
+
+# Callbacks & Promise
+
+A callback function is a function passed into another function as an argument, so a callback is a function will be executed after parent function is executed
+
+## Callback
+
+```jsx
+function func1(x) { alert(x); }  
+// 用 func1 當作參數傳入函式 func2
+function func2(var1, callback) {     
+    callback(var1);  
+}
+func2(2, func1);
+```
+
+## Promise
+
+The Promise object represents the eventual completion (or failure) of an asynchronous operation and allow us to work with the results.
+Promises have three states: `pending`, `fulfilled` or `rejected`.
+
+Promises help you naturally handle errors, and write cleaner code by not having callback parameters.
+
+Promise 是一個表示非同步運算的最終 完成 或 失敗 的物件。Promise 物件會有三種狀態:：pending 初始狀態 、 fulfilled 表示操作成功地完成 、 rejected 表示操作失敗。如果我們需要依序串連執行多個 Promise 功能的話，可以透過 .then() 來做到。
+
+![alt text](image.png)
+
+```jsx
+var p = new Promise(function(resolve, reject) {
+    // Do an async task and then...
+    if(/* good condition */) {
+        resolve('Success!');
+    } else {
+       reject('Failure!');
+    }
+});
+
+p()
+  .then(() => {
+      /* do something with the result */
+  })
+  .catch(() => {
+      /* error */
+  })
+ .finally(() => {
+    /* runs when the promise is settled, 
+       doesn't matter successfully or not 
+       他在 promise 發生後一開始就被觸發
+    */
+  })
+```
+
+Advance Exercise
+
+<https://medium.com/hannah-lin/%E9%9D%A2%E8%A9%A6-%E8%80%83%E9%A9%97%E4%BD%A0%E5%B0%8D-promise-%E7%9A%84%E7%86%9F%E5%BA%A6%E4%B9%8B%E9%80%B2%E9%9A%8E%E6%87%89%E7%94%A8%E9%A1%8C-6eda0dd0d767>
+
+### 延伸考題 What’s about async?
+
+![alt text](image-1.png)
+
+The async function is syntactic sugar for promise.
+
+async/await 其實是 promise 語法糖，讓你可以用更簡潔的方法達到非同步。(async function 本身就會回傳 promise)
+
+用比較實務去 fetch API 就會如以下 (react Hook 為範例)
+
+```jsx
+const [lists, setLists] = useState([])
+useEffect(() => {
+    getPosts()
+},[]) 
+
+
+// promise
+const getPosts = () => {
+    fetch(`https://jsonplaceholder.typicode.com/posts`)
+    .then( res => res.json())
+    .then(json => {
+      setLists(json)
+    })    
+}
+
+// asyn await
+const getPosts = async () => {
+    const obj = await fetch(`https://jsonplaceholder.typicode.com/posts`)
+    const json = await obj.json()
+    setLists(json)
+}
+```
+
+兩種寫法結果相同
+
+### 推薦閱讀
+
+英文: Promises, async/await (這有一系列的文章，很推薦閱讀) (<https://javascript.info/async>)
+中文: Promise, generator, async與ES6 (Huli 寫的這篇是我四年前學 promise 第一篇看懂的中文文章) (<https://blog.huli.tw/2015/08/26/javascript-promise-generator-async-es6/>)

docs/02_javascript/basic/event.md

@@ -0,0 +1,73 @@
+---
+
+sidebar_position: 1
+tags:
+
+- bubbling
+- event-capturing
+
+---
+
+# Event Bubbling (propagation), Event Capturing
+
+### Bubbling
+
+When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.
+
+從啟動事件的元素節點開始，逐層往上傳遞
+
+### Event Capturing
+
+the event goes down to the element.
+從最上層的母元素開始，逐層往下傳遞
+
+### Comparison
+
+![alt text](image-2.png)
+
+事件兩者都會執行 ，會先執行 Capturing 再執行 Bubbling
+
+當然你可以提供 addEventListener 第二個參數去補抓順序
+
+If it’s false (default), 會被設定為 `Bubbling`
+
+If it’s true, 會被設定為 `Capturing`
+
+```jsx
+var btn = document.getElementById('btn');
+btn.addEventListener('click', function(){
+  console.log('HELLO');
+}, false ); // Bubbling
+```
+
+若需要取消 Bubbling 也可以使用 event.stopPropagation()
+
+### 延伸考題: What’s Event Delegation?
+
+If there are many elements inside one parent, and you want to handle events on them — don’t bind handlers to each element. Instead, bind the single handler to their parent and get the child from e.target
+
+Event Delegation是一種運用 Event Bubbling 概念而能減少監聽器數目的方法，將事件處理器綁在目標元素的父元素上進行處理，可以減少大量子事件監聽器的數量
+
+```jsx
+// Before using delegated event
+let elements = document.querySelectorAll('ul > li > a');
+for (let elem of elements) {
+    elem.addEventListener('click', function(e){
+       console.log(e.target)
+      // to something
+    })
+}
+
+// Attach a delegated event handler
+document.getElementById('list').addEventListener('click', function(e){
+    if (e.target.tagName == 'a'){
+      console.log(e.target)
+      // to something
+    }
+}
+```
+
+### 推薦閱讀
+
+英文: Bubbling and capturing, Event delegation： <https://javascript.info/bubbling-and-capturing>, <https://javascript.info/event-delegation>
+中文: 重新認識 JavaScript: Day 14 事件機制的原理 、Huli 的 DOM 的事件傳遞機制：捕獲與冒泡 : <https://blog.huli.tw/2017/08/27/dom-event-capture-and-propagation/>