---
tags: JS 直播班 - 2021 秋季班
---
# 第五堂：期中試煉

1. 報到 Code：`zlz5LA79cFKp`
2. 下週五公布小組排名，記得[投稿]((https://forms.gle/FAbNfYdqWsfyzyZX8))
3. 公布 80~100% 獎品，70~80% 獎品將會額外拉出提供錄影課程
* 報到任務
* 第一週
* 第二週
* 第三週
* 第四週
* 第五週
* 第六週
* 第七週
* 第九週 (8~9 一起)
* 心得牆 (挑精選前 5 位送書)

## 和自己比較 ([洧杰訓練菜單](https://hackmd.io/iE6mxohOS-ujKU398Ewk1w?view))
1. 先求有再求好
2. 先熟悉程式語言，再熟悉[熱鍵](https://github.com/hexschool/VSCode_Hotkey_Translation)
3. 熟悉熱鍵，再熟悉[英打](https://www.youtube.com/playlist?list=PLYrA-SsMvTPOxjOi9BvWLJcbGLULH-uQF)、[歷年活動](https://www.hexschool.com/2020/03/24/2020-03-24-21days-keybr-game/)

## 之後行程
* 11 月下旬釋出 The F2E 作品直播班授課時間(會在晚上)
* 12/3 最後一堂課
* 12/17(日) 作業截止日
* 12/24(日) 心得牆、獎品表單截止日

## 資料
* [2021 前端工程師薪資資料](https://raw.githubusercontent.com/hexschool/2021-ui-frontend-job/master/frontend_data.json?token=AAQWFQDSNRRXC6FBW7PDSETBOESVW)
* [前端問卷資源](https://docs.google.com/forms/d/e/1FAIpQLScJfMnHg27iDUG3aAecClJQMudzxiLpXsHfMXkhmDKTYKybcA/viewanalytics)

## 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,index,ary){
    console.log(item,index,ary)
})

### forEach 陣列數字累加

let data = [3,30,100];
let total=0;
data.forEach(function(item,index,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)

## forEach + if

* [男生共有幾位？](https://codepen.io/hexschool/pen/yLVGWpx?editors=1010)
* [國中學校人數](https://data.tainan.gov.tw/dataset/junior-number/resource/4f56ba22-0b13-4570-8be6-2d66483ffa5f)
<!-- * [練習](https://codepen.io/liao/pen/OJjzPWe?editors=0010) -->
* [高雄里長資訊](https://cabu4.kcg.gov.tw/KcgRegion/OpenData/%E9%87%8C%E9%95%B7%E9%80%9A%E8%A8%8A%E9%8C%84.JSON)
<!-- * [練習](https://codepen.io/liao/pen/XWaVJaa?editors=0010) -->

## 週末任務
1. 實用陣列操作大全 (filter、sort、map 等等)
2. 事件監聽常用種類 (click、mouseover、change、resize)

## 第五關主線任務

* <a href="https://rpg.hexschool.com/training/24/task?type=detail&id=225" target="_top">第五關主線任務</a>