# 第九堂：最終關卡 DOM+API 操控
## 開課提醒
1. 錄影
2. [第八週週報](https://liberating-turtle-5a2.notion.site/EP8-4455d1a1981f4b8e94c638f9b67dea39)
3. [學員心得回饋任務](https://rpg.hexschool.com/#/training/12062289980171095264/board/content/12062289980171095265_12062289980171095286?tid=12062289980171193314)
4. 中場休息：加碼課資訊
11/29(五) 20:00 分享 Promise
1.5-2hr
影片只會上傳到「JS 直播菁英團課程」

## 今日上課知識點
1. 用 todolist 了解最終任務
2. live demo 最終任務
---

## [todoList](https://codepen.io/hexschool/pen/OJWRqrN)
1. 用新增和刪除功能理解跟畫面操作相關的部分
data-* 自訂屬性：

    <div data-自訂名稱="值"></div>

    <div data-num="3"></div>

取得 data-*的值：

    event.target.getAttribute("data-num"); // 3

    event.target.dataset.num; // 3

3. 新增、刪除功能，有串 API 和沒串 API 差異

## 最終關卡資訊
* [API 教學文件](https://www.notion.so/API-8b5b74eb052b451faf28013d76811fac#7598a1040d4f4c4aab5dec30f621d2b8)
* [API 申請平台](https://livejs-api.hexschool.io/)
* [API 線上測試文件](https://hexschool.github.io/hexschoolliveswagger/)
* [最終關卡 XD 設計稿](https://xd.adobe.com/view/a48b8617-4588-4817-9062-b62130dce916-f1d8/)
* [codepen 範例程式碼](https://codepen.io/hexschool/pen/JjERgYq?editors=0010)
* [最終關卡流程圖](https://whimsical.com/dom-api-ULyBu5TbMJG9v2tvnkgCFf)
* [API 前台規則流程圖](https://whimsical.com/Eg1f7MCzy9UcBJjkpq8TLP)

## DOM 與 API 規劃
上課示範：
1. 取得產品列表
2. 取得購物車列表
3. 加入購物車
4. 刪除購物車

完整範例程式碼：
* [最終關卡前台](https://codepen.io/hexschool/pen/qBRPByd)
> [補充進階寫法](https://codepen.io/hexschool/pen/KKJGbKK?editors=0010)
* [最終關卡後台](https://codepen.io/hexschool/pen/PoWJoBK)

## 重新複習

1. **變數**：基礎型別
> 延伸知識：作用域
2. **流程判斷**：流程圖設計
> 延伸知識：真值假值、三元運算、短路求值
3. **陣列與物件**：資料定義
> 延伸知識：物件淺拷貝、深拷貝
4. **函式設計**：讓程式能重複呼叫執行、消除重複的程式碼
> 延伸知識：箭頭函式、回呼函式
5. **資料處理**：陣列與物件資料處理，例如 ForEach 、Object.keys
> 延伸知識：其他陣列方法 ex: map, filter, find, findIndex, sort ...
6. **AJAX 取得資料**： Axios 取得網路請求、非同步
> 延伸知識：Promise、async await、Fetch
7. **套件整合**： C3 資料處理
> 延伸知識：嘗試使用其他套件
8. **第三方線上服務串接**：API 服務
> 延伸知識：Cors、網路知識

## 下一步
* 學 SPA 框架，整合 API 資訊 (Vue、React、Angular)
* [深入 JS 核心(常見面試題目)](https://www.hexschool.com/courses/js-core.html)
* [【2021轉職前端工程師之旅】面試篇：為自己選的路堅持下去](https://ithelp.ithome.com.tw/articles/10256018?sc=rss.qu)

---

## 本週任務
1. 最終任務、心得牆任務
2. 小組任務