---
tags: Cmoney_Web_檢討
---
WEEK3_HW
===

檢討後
---

1. 08_week3_bento
1. querySelector 盡量使用 id 不要用 class
2. map 用法
3. reduce javascript 加總用
4. input placeholder 是沒有值的 如果要給預設值 value 要設定 但這樣每次輸入都要刪掉預設值

2. 06_week3_car
1. mouseenter mouseleave 沒有事件流 建議使用這個

3. 04_week3_navigation
1. 判斷沒有子選單的 LI 去看裡面標籤有沒 UL

4. [陣列處理方法](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/)

評語
---

### 01_week3_swap: 87
1. 還原圖稿: 標題字沒有凹凸
2. 還原圖稿: 標題字應為無襯線字體
3. 還原圖稿: 沒有網頁背景色
4. 還原圖稿: 沒有區塊背景色
5. 不扣分 - CSS: 選取器寫錯導致 body 看不到背景色(前面以扣分)
6. 不扣分 - Js: 陣列值應包括完整檔名與副檔名
7. Js: querySelector 不應該選取 class
8. Js: 出現沒有使用的事件監聽
9. Js: 從 dataset 取出的 num 應該要轉型，之後使用較不會出現問題
10. 加分 - Js: 使用 nodeName 來辨識目前選到的目標，降低使用迴圈的機會
11. 加分 - Js: 使用 dataset 紀錄索引值

### 02_week3_swap: 88
1. 還原圖稿: 標題字沒有凹凸
2. Js: querySelector 不應該選取 class

### 03_week3_tab: 88
1. 還原圖稿: tab 間的邊框較粗
2. 還原圖稿: 內容區的上、下距離過大
3. HTML: tab 不應該是超連結
4. 不扣分 - CSS: 不建議將 transform 用在排版上
5. 加分 - CSS: 使用預處理器
6. 加分 - Js: 使用陣列物件管理
7. 不扣分 - Js: 物件內的文字不建議用反引號包覆
8. Js: querySelector 不應該選取 class
9. Js: 不應該取出全部的 DOM 再移除 class，明顯效能浪費

### 04_week3_navigation: 78
1. 還原圖稿: 標題與下方預留空間太小了
2. 還原圖稿: 最後一個不需右邊框
3. 還原圖稿: 邊框有凹凸
4. 還原圖稿: 文字有凹凸
5. HTML: \<nav> 太多了，子選單直接用 \<div> 即可
6. CSS: .nav__item__body 的 top 不應該設定 40px
7. CSS: .nav__item__body 的 width 不應該寫死 180px
8. CSS: .nav__item 的 width 不應該寫死 90px
9. CSS: .nav 不需要寫 align-items
10. Js: querySelector 不應該選取 class
11. 不扣分 - Js: 取網頁上的文字來使用不安全
12. 不扣分 - Js: 滑入事件請改用 mouseenter
13. Js: 不應該取出全部的 DOM 再移除 class，明顯效能浪費

### 05_week3_girl: 83
1. 還原圖稿: 初始化的第一張圖停留過久
2. HTML: 每換一張圖應有不同的 alt
3. Js: querySelector 不應該選取 class
4. Js: 出現 Magic Numaber

### 06_week3_car: 82
1. 還原圖稿: 初始化的第一張圖停留過久
2. HTML: \<button> 沒有 type
3. CSS: .btn 不應該有 text-align
4. CSS: 游標在按鈕上沒改變
5. 不扣分 - Js: 滑出事件請改用 mouseleave 才不會有事件流的問題，您使用 mouseout 還需要 toggle 來記錄狀態，愈寫愈複雜
6. Js: querySelector 不應該選取 class
7. Js: 出現 Magic Numaber

### 07_week3_slide: 83
1. 還原圖稿: 移動有問題
2. 還原圖稿: 按鈕的邊框
3. HTML: 按鈕語義不對
4. CSS: .slide 不應該設定 flex-wrap
5. Js: querySelector 不應該選取 class
6. Js: 不應該取出全部的 DOM 再移除 class，明顯效能浪費

### 08_week3_bento: 82
1. Js: 便當一定買 4 個才能結帳
2. Js: querySelector 不應該選取 class
3. Js: 出現 Magic Numaber

### 09_week3_slide: 78
1. 還原圖稿: 分頁鈕沒效用
2. 還原圖稿: 點選影像無法前往該網頁
3. Js: querySelector 不應該選取 class
4. Js: 不應該取出全部的 DOM 再移除 class，明顯效能浪費