---
tags: JS 直播班 - 2022 秋季班
---

# 第五堂：期中試煉

1. 記得錄影
2. 表揚小組

## 和自己比較 ([洧杰訓練菜單](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/)

## 時間點
1. 10/28（五）：截止專題報名，需通過 3-final，UI 設計師設計服務
2. 11/25（五）：課程結束
3. 12/9（五）：**助教批改截止，截止繳交主線任務作業**
4. 12/18（日）：專題成果發表會
5. 12/23(五)：履歷提交截止日
6. 12/28(三)：廠商交流時間

## 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. 請拿薪資資料集，出一個題目來接龍
### 資料
* [2021 前端工程師薪資資料](https://raw.githubusercontent.com/hexschool/2021-ui-frontend-job/master/frontend_data.json?token=AAQWFQDSNRRXC6FBW7PDSETBOESVW)、[欄位介紹](https://github.com/hexschool/2021-ui-frontend-job)
* [前端問卷資源](https://docs.google.com/forms/d/e/1FAIpQLScJfMnHg27iDUG3aAecClJQMudzxiLpXsHfMXkhmDKTYKybcA/viewanalytics)
## 第五關主線任務

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