第四週 - 網頁 DOM 操作與第三方 API 介接

開課提醒

1. 錄影！！！
2. 不需報到
3. 講解主線任務

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

Document (HTML 元素) -> Object（物件）

取 DOM 元素的方法

1. getElementsByTagName()
2. getElementsByClassName()
3. getElementsById()
4. querySelector()
5. querySelectorAll()

innerHTML

新增/修改/取得 DOM 元素

element.innerHTML = htmlString;

const title = document.querySelector('#title');
title.innerHTML = '你好';

中場休息

體驗營加碼福利：3 天快閃優惠活動

串接 API

串接 API 是指在客戶端與伺服器端之間進行資料交換時，客戶端使用特定的程式介面（API）來與伺服器溝通

與伺服器做資料交換

• 角色分為客戶端、伺服器端、資料庫
• 客戶端對伺服器端發出請求稱為 Request，伺服器端的回應稱為 Response
  • 以點餐舉例
  • 發網址拿連結內容：<a href=""></a>
  • 發網址拿圖片內容：<img src="">
  • 發網址拿資料

AJAX (Asynchronous JavaScript And XML)

用 JS 發一個 request 到 server，伺服器 response 後我拿到結果

axios 套件

1. 找到 CDN（Using unpkg CDN）放到自己的專案內
2. get 語法獲取資料

API

Application Programming Interface 應用程式介面
API 會去定義用於發送 Request 和接收 Response 的方法、資料格式、授權機制等
可以把介面想成是一種規格，規定，要和伺服器溝通拿資料的話必須根據這個介面去做

API 文件

串接資料的使用說明書
GET - /api/v1/works - HackMD

總結

作業參考範例

範例一：獲取遠端資料
範例二：將遠端資料渲染至畫面
範例三：完整程式碼

補充：以上範例都有載入 axios 套件在 Settings 裡面

講解小組任務

補充資料

VS CODE 套件：es6-string-html