基礎 JavaScript

寫程式三大重點：

1. 介面：如何改變介面
2. 事件：如何監聽事件並做出反應
3. 資料：如何跟伺服器交換資料

JavaScript 執行環境

有些東西在 Node.js 上可以用，但在瀏覽器上不見得可以，因為瀏覽器可能看不懂那個語法，ex. require 在 Node.js 上可以用，但是在瀏覽器上就不支援

DOM (Document Object Model)

html document 轉換成 object，JavaScript 藉由 DOM 跟瀏覽器做溝通

使用 DOM 的語法

抓取元素

document.getElementsByTagName('')：根據 tag name 選取
document.getElementsByClassName('')：根據 class name 選取
document.getElementsById('')：根據 id 選取
querySelector('')：根據 CSS 選擇器選取，只會選到第一個符合的
document.querySelectorAll('')：根據 CSS 選擇器選取，選到所有符合的
document.createElement('')：新增元素

改變元素

element.style.css 的屬性 = 'css 的值'：改變元素 CSS (這不常用，會太亂)
ex. element.style.paddingTop = '10px'
element.classList.add('')：加上 class 來幫元素添加 CSS
element.classList.remove('')：去除 class 來幫元素移除 CSS
element.classList.toggle('')：任意添加或刪除 class 改變元素 CSS

element.innerText('')：元素的文字內容變成 () 內的內容
element.innerHTML('')：元素內的 html 變成 () 內的內容
element.outerHTML('')：元素的 html(包含自己) 變成 () 內的內容

element.removeChild('')：移除元素的子元素
element.appendChild('')：添加元素的子元素

事件監聽 Event Listener

element.addEventListener('click', function(){})：在元素上新增一個 click 的監聽事件，並在 click 之後執行 function(這是一個 callback function，直到元素被 click，才會請去呼叫這個 function 來執行)

監聽的事件：click、keydown、keypress、submit、scroll

e：被點按到的地方(瀏覽器傳過來的變數，會帶上很多跟 e 有關的資訊)
e.target：被點按到的元素
e.key：打字按到的鍵
e.target.getAttribute('')：取到元素的 attribute

e.preventDefault：阻止瀏覽器預設行為，但事件仍然會繼續傳遞
ex.阻止送出表單、阻止連到連結，阻止按鍵輸入

事件傳遞機制

先捕獲再冒泡
Capture Phase -> Target Phase -> Bubbling Phase

addEventListener('事件', function, boolean)，事件監聽的第三個參數，boolean 值，如果是 true，代表再捕獲階段，如果是 false，代表在冒泡階段

e.stopPropagation()：阻止 e 後面的事件繼續傳遞
e.stopImmediatePropagation()：阻止其他任何的事件傳遞

事件代理 event delegation

派一個代表，用一個 addEventListener 就可以套用在裡面所有要做相同事情的元素上面
e.target.classList.contains('')：被點到的地方包含某個 class

// outer 是那個代表，只要 outer 裡面的東西被點按到，就會觸發 function
document.querySelector('.outer').addEventListener('click', 
  function(e) {
    if(e.target.classList.contains('btn')) {
      alert(e.target.getAttribute('data-value'))
  }
})

在瀏覽器儲存資料

Cookie

瀏覽器裡面可以儲存資訊的地方，Server 端有 set-cookie，上面會帶一些資訊，瀏覽器會把 set-cookie 的資訊寫入 cookie，request 會把 cookie 帶上去，用來辨識身分

Local Storage

不同 tab 可以共享 loacl storage
window.localStorage.setItem('item', value)：把東西存到 local storage 裡面
window.localStorage.getItem('item')：從 local storage 裡面取出東西

可以在 DevTool->Application->Storage->Local Storage 裡面查看

Session Storage

一個 session 一段期間，一個 session storage 只存在於同一個 tab 開啟時，如果關掉 tab，session storage 就會消失，且不同 tab 沒辦法共用 session storage，存的資訊通常較短暫

window.sessionStorage.setItem('item', value)：把東西存到 session storage 裡面
window.sessionStorage.getItem('item')：從 session storage 裡面取出東西