---
tags: JS 直播班 - 2021 春季班
---
提交等級表
LV1：拿CSS 現成模版套用，練習下方的套票列表用 JS 的 innerHTML 套用，並需運用 Code JS 面板裡面的 data 變數資訊，上方新增套票功能與下拉篩選地區功能可不做。
LV2：自己運用XD 設計稿來切版，並做 LV1。
LV3：觀看此章節，全部效果都做

版型資料設計

地區用 change 監聽
上方新增的地區跟下方篩選的地區都寫死選項（依照目前提供的 JSON data area 欄位）
地區的篩選下拉需要加上『全部地區』option
不需要有「清除資料」的按鈕
預設資料為 3 筆（內容需依照目前提供的 JSON data）
篩選後會顯示『搜尋資料為 ? 筆』
描述欄位使用 textarea
星級區間是 1-10 分
金額、組數、星級的 type 為 Number
## 第五關主線任務

* <a href="https://rpg.hexschool.com/training/17/task?type=detail&id=172" target="_top">第五關主線任務</a>
* [流程圖建議]
* (https://whimsical.com/WZEyuJGJUCLmw9rCEHhPp9)
* [XD 設計稿]
* https://xd.adobe.com/view/868fdb37-d3f4-48bd-bdd9-8b2ae7963c9b-d3dc/
* (https://xd.adobe.com/view/868fdb37-d3f4-48bd-bdd9-8b2ae7963c9b-d3dc/)
* [CSS 現成模版](https://codepen.io/hexschool/pen/BaQveVm?editors=1010)

# 第五堂：期中試煉

* [報到](https://rpg.hexschool.com/training/17/calendar) Code：`YBYyn3ZqcAzX`
* [戰況分析](https://docs.google.com/spreadsheets/d/1fQNuoq96q_ovRaBUwCVhstMcGDZgYFgWRIW90-m73aE/edit?usp=sharing)，下週分享前 10 組排名！
* 60% 獎勵分享
* [Vue 直播專屬優惠(限50名)，下禮拜一不保證名額](https://shop.hexschool.com/order/create?coupon_code=2021_VUE3_VUE_TRAINING_MAR&phyProd[…]=-M7klmVj7JKm8uhH_PDp&phyProductSpec[]=-MOUJRMHkm9dYk9JdJIw)
## DOM
* 取 DOM： `document.querySelector("CSS選擇器")`
* DOM 內新增文字節點：`document.querySelector("CSS選擇器").textContent = "hello world"`;
* DOM 內新增 HTML：`document.querySelector("CSS選擇器").innerHTML = "<h2>新增標題</h2>"`;
* [程式碼範例](https://codepen.io/hexschool/pen/wvoRboe?editors=1010)


> textContent 是否能穿插 HTML tag？

## forEach 語法教學
* 為什麼要學 [forEach](https://www.hexschool.com/2017/09/01/2017-09-01-javascript-for/)？`[2,3,5] 裡面的文字你會如何加總？`
### forEach 語法講解

let data = [3,30,100]
data.forEach(function(item,array,ary){
    console.log(item,array,ary)
})

### forEach 陣列數字累加

let data = [3,30,100];
let total=0;
data.forEach(function(item,array,ary){
    total+=item;
})

### forEach 物件裡面的數字累加

let data = [
  {
    num: 10
  },
  {
    num: 30
  },
  {
    num: 100
  }
];
let total = 0;
data.forEach(function(item, array, ary){
  total+=item.num;
})

### forEach + innerHTML
* [範例零](https://codepen.io/hexschool/pen/wvoRboe?editors=1010)
* [範例一：字串累加](https://codepen.io/hexschool/pen/WNoLBjd?editors=1010)
* [範例二](https://codepen.io/hexschool/pen/GRNParj?editors=1010)
* 以[第五關主線任務](https://github.com/hexschool/js-training/blob/main/travelApi.json)為例、[CSS 現成模版](https://codepen.io/hexschool/pen/poNqmEL)

> 投票是否現場做？

## 中場休息
* 60% 獎勵分享
* 下週三：Bug 清除大隊 - 線上 Slack 助教

> 範例段落： 老師助教同學們好，這是我的 [Codepen](https://codepen.io/hexschool/pen/ZEBVdEd?editors=1010)，我原本預期「JS 第 8 行會出現數字 8」，但卻出現「預期外的結果是 0」，想問下問題出在哪裡？

## forEach + if

* [男生共有幾位？](https://codepen.io/hexschool/pen/yLVGWpx?editors=1010)
* [充電站資訊](https://data.kcg.gov.tw/dataset/a98754a3-3446-4c9a-abfc-58dc49f2158c/resource/48d4dfc4-a4b2-44a5-bdec-70f9558cd25d/download/yopendata1070622opendatajson-1070622.json)
* [國中學校人數](https://data.tainan.gov.tw/dataset/junior-number/resource/4f56ba22-0b13-4570-8be6-2d66483ffa5f)
* [高雄里長資訊](https://cabu4.kcg.gov.tw/KcgRegion/OpenData/%E9%87%8C%E9%95%B7%E9%80%9A%E8%A8%8A%E9%8C%84.JSON)

> 下週分享各組排名！