寫程式三大重點:

  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 裡面取出東西


#Web #javascript #DOM #捕獲冒泡 #local storage #session storage #cookie







Related Posts

6. 排序 (上篇)

6. 排序 (上篇)

PHP 與 MySQL 的互動:讀取、新增、刪除、編輯資料

PHP 與 MySQL 的互動:讀取、新增、刪除、編輯資料

ESM 模組 (ES6 Modules or JavaScript Modules)

ESM 模組 (ES6 Modules or JavaScript Modules)


Comments