---
tags: 軟體工程師體驗營 - 2023
---
# 第四週 - 網頁 DOM 操作與第三方 API 介接
## 開課提醒
1. 錄影！！！
2. 不需報到
3. 講解[主線任務](https://rpg.hexschool.com/training/35/task)

## DOM(Document Object Model) 文件物件模型
Document (HTML 元素) -> Object（物件）

### 取 DOM 元素的方法
1. getElementsByTagName()
2. getElementsByClassName()
3. getElementsById()
4. **querySelector()**
5. **querySelectorAll()**

### [innerHTML](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/innerHTML)
新增/修改/取得 DOM 元素

element.innerHTML = htmlString;

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

## 中場休息
體驗營加碼福利：[3 天快閃優惠活動](https://www.notion.so/e9ee114518444977b86e4bb6d9c3caa4)

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

### 與伺服器做資料交換

- 角色分為客戶端、伺服器端、資料庫
- 客戶端對伺服器端發出請求稱為 Request，伺服器端的回應稱為 Response
- 以點餐舉例
- 發網址拿連結內容：`<a href=""></a>`
- 發網址拿圖片內容：`<img src="">`
- 發網址拿資料
### AJAX (Asynchronous JavaScript And XML)
**用 JS** 發一個 request 到 server，伺服器 response 後我拿到結果

### [axios](https://github.com/axios/axios) 套件
1. 找到 CDN（Using unpkg CDN）放到自己的專案內
2. get 語法獲取資料

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

### API 文件
串接資料的使用說明書
[GET - /api/v1/works - HackMD](https://hackmd.io/wA0Zeuk8QI-i7jeEXVssIA?view)

## 總結

### 作業參考範例
[範例一：獲取遠端資料](https://codepen.io/AliceChiang/pen/wvYYwyJ?editors=0010)
[範例二：將遠端資料渲染至畫面](https://codepen.io/AliceChiang/pen/dygaOYJ?editors=1010)
[範例三：完整程式碼](https://codepen.io/AliceChiang/pen/yLRGzBY?editors=1010)

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

### 講解小組任務

### 補充資料
VS CODE 套件：[es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html)