Web Storage

網路存儲

• 暫存網頁資料
• 已經有的功能：Cookie
  • 容量小 (4 KB)
  • 明文傳遞
• HTML5 存儲功能

  • localStorage (Key-value)

  • sessionStorage (Key-value)

  • indexedDB (Database)

存儲比較

JSON

• 用 javascript 的物件和陣列組織資料的格式
• 交換資料，和 XML 類似用途

• JSON 物件：將 JSON 格式的物件和字串之間轉換

  • JSON.parse()

  • JSON.stringify()

參考：MDN

DOM

​文件物件模型

DOM 和 BOM

• 上次提到 javascript 有三個部分

  • ECMAScript

  • 文件物件模型 (Document Object Model, DOM)

  • 瀏覽器物件模型 (Browser Object Model, BOM)

• 今天來講 DOM 和 BOM

BOM

• 用途：操作瀏覽器

  • 分頁

  • 歷史

  • 網址等，以此類推

• 物件：window

  • 網址操作：window.location.href

  • 定時器：window.setTimeout(func, ms)

• 關於 BOM

  • 沒有標準，各家瀏覽器自己做

瀏覽器物件模型

DOM

• 用來操作網頁

• 標準

  • 第一代 Level 1

  • 第二代 Level 2

  • 第三代 Level 3

渲染網頁

• 之前有提過大致上的流程
• DOM 與 CSSOM
  • 建構物件模型
  • 瀏覽器是怎樣工作的：渲染引擎、HTML 解析
• 流程
  • 建構 DOM 和 CSSOM
  • 由 DOM 和 CSSOM 建構渲染樹 (Render Tree)
  • 為渲染樹決定布局
  • 繪製渲染樹

jQuery

常用 API

Event 事件

自定義事件

• 事件本身是 Event 物件

參考：MDN

HTTP

Http

• HyperText Transfer Protocol
  • 超文本傳輸協定
• 版本
  • RFC 2616：HTTP/1.1 (Jun 1999)
  • RFC 7540：HTTP/2 (May 2015)
• 常見種類
  • GET
  • POST
  • PUT
  • DELETE

GET & post

• GET
  • 將參數寫在 URI 的查詢中
  • URI 長度限制
• POST
  • 將查詢塞在封包中

ajax

ajax

• Asynchronous Javascript and XML
• 減少重複傳輸資料
• 歷史
  • Java Applet (1995)
  • XMLHTTP (IE4, 1998)
  • Google 服務 (2000s)

ajax in JQUERY

• jQuery.ajax()

• jQuery.get()

• jQuery.post()

• jQuery.getJSON()