# 2022 六角學院 JS 直播班 | 學習筆記

https://www.hexschool.com/courses/js-training.html

## 直播班心得

## 課堂筆記

### 週五直播課 - 基礎打底
✏️ [第一堂：重新認識 JavaScript 之術]()
✏️ [第二堂：邏輯判斷之術](https://hackmd.io/-NWNsKiDSp6VQT1_wNEtaA)
✏️ [第三堂：物件跟陣列資料處理之術](https://hackmd.io/y8Ip5YDATryYoYhpLynNOA)
✏️ [第四堂：函式設計之術](https://hackmd.io/XJiAUv7gTV-oqg4tUu6LsA)
✏️ [第五堂：期中試煉]
✏️ [第六堂：AJAX 操控伺服器之術](https://hackmd.io/0JhUvCg-RcyMtPxMxdgmTg)
✏️ [第七堂：第三方 JS 套件整合之術](https://hackmd.io/6DWLITQlTlq_w2z6pvCU1w)
✏️ [第八堂：RESTful API 整合開發之術](https://hackmd.io/9jhzKNozQgqexTFXNRSVrQ)
✏️ [第九堂：期末專案試煉]

### 週三直播課 - 常見 JS 面試考題

✒️ [核心篇第一堂：變數作用域與 Hoisting](https://hackmd.io/S3bg70ZrSHao2gm0H3Wb_Q?both)
🤯 [自學補充：Glovbal/Function Execution Context](https://hackmd.io/bLi8nNpvRcOLWkEskjgIfQ)
✒️ [核心篇第二堂：表達式、陳述式](https://hackmd.io/Wg9R-w29ROeX9R4f2L7Ylg)
✒️ [第三堂：型別陷阱]
✒️ [第四堂：物件與記憶體位置](https://hackmd.io/oNiDwCNrQjGf2ItAd-lbnA)
✒️ [第五堂：高級函式原理]
✒️ [第六堂：函式與 this]()
✒️ [第七堂：非同步與 Promise]
✒️ [第八堂：模組封裝]

### 影音課程筆記
🖊️ [AJAX: GET & POST API](https://hackmd.io/BVfVu3XJRB2AZJiLNuiovg)

---

## JS 等級能力表

* LV0：小萌新一枚！
* LV1：會一些基礎 JS(變數、if 流程判斷、函式)，或 jQuery 建置動畫效果
* LV2：介接第三方資料 GET API，做篩選器功能 (例：[蔬菜比價網](https://hexschool.github.io/js-filter/)、[API](https://hexschool.github.io/js-filter-data/data.json)、[出處](https://data.gov.tw/dataset/8066))
`👾目前等級`
* LV3：介接 restful API，透過 [JSON Server](https://www.youtube.com/watch?v=9TAanXxNvEI) 做 Todolist API 新增刪除修改([設計稿](https://hexschool.github.io/js-todo/#artboard0)、[CSS版本](https://codepen.io/hexschool/pen/KKmvpPP))
* LV4：介接 JWT 登入註冊功能，來做會員制代辦事項服務([設計稿](https://www.figma.com/file/pFivfS3rDX3N3u3dN9aIlx/TodoList?node-id=0%3A1)、[API](https://todoo.5xcamp.us/api-docs/index.html?fbclid=IwAR2k20zfzmWok6NTDX_S45KvBAzpqWaRazPGHg8K2Zb0FsmkF4FmK4WYwTE)、[活動影片](https://www.youtube.com/watch?v=DpvqDA_VUkY))
* LV5：會用 Vue、React、Angular 做 LV3~4
* LV6：會用 Vue、React、Angular 投入工作經驗達一年以上

---

## 主線任務
### Week 01
[第一週 - 變數設計](https://codepen.io/hexschool/pen/NWRJKBq)
[👾 Codepen](https://codepen.io/gretali/pen/WNJJmyK)

### Week 02
[第二週 - 邏輯判斷之術](https://codepen.io/hexschool/pen/ZEpwNwy)
[👾 Codepen](https://codepen.io/gretali/pen/yLjRVvy)

### Week 03
[第三週 - 物件與陣列](https://codepen.io/hexschool/pen/XWNWXoe)
[👾 Codepen](https://codepen.io/gretali/pen/QWroLZr)

### Week 04
[第四週 - 函式設計與陣列操作 BMI Kata]()
[👾 Codepen](https://codepen.io/gretali/pen/mdLYadM)

### Week 05
[第五週 - 期中試煉 旅遊套票生成及篩選](https://codepen.io/hexschool/pen/BaQveVm)
[👾 Codepen](https://codepen.io/gretali/pen/abKvyJV)

### Week 06
[第六週 - AJAX 操控](https://codepen.io/hexschool/pen/BaQveVm)
[👾 Codepen](https://codepen.io/gretali/pen/rNKWvLQ)

### Week 07
[第七週 - 第三方 JS 套件整合之術](https://codepen.io/hexschool/pen/BaQveVm)
[👾 Codepen](https://codepen.io/gretali/pen/KKemExK)

---

## 小組任務

### Week 02
[第二週 繪製與討論剪刀石頭布的邏輯](https://hackmd.io/PozZ0UgEQ_-blN8Ba2CdEg)
[剪刀石頭邏輯圖](https://whimsical.com/rock-paper-scissors-CXbputBeSeyictoXf9NGzz)

### Week 03

[第三週小組任務](https://hackmd.io/6aYaHg-CQ5yOjanEAmkqxA)

#### setTimeout( 執行函式, 延遲毫秒 )

[CodePen 小範例](https://codepen.io/gretali/pen/zYjbLwx)
https://surreal.tw/program/note/progessbar-timer

:::spoiler **小組討論資源分享**
正規表達式:
https://www.youtube.com/watch?v=Ex6cCWDwNJU&ab_channel=Will%E4%BF%9D%E5%93%A5
https://hackmd.io/@aaronlife/regular-expression
https://regex101.com/

樣板字面值:
[`裡面放${函式}`](https://www.casper.tw/javascript/2017/12/22/javascript-template-string/)

在裡面可以輸入中文
也可以輸入變數${變數}
也可以輸入運算${變數-1}
也可以輸入函式${函式}

:::

### Week 05

[第五週小組任務 - 高雄市里長資料](https://codepen.io/gretali/pen/OJEyWBB)

### Week 06
[第六週小組任務 - 撈取 2021 前端工程師薪資資料](https://hackmd.io/FtM-VzQpRIOsMzMd0viOpQ)
[CodePen](https://codepen.io/gretali/pen/NWzRjKJ)

### Week 07
[第七週小組任務 - 2021 前端工程師薪資資料，並用 C3.js 呈現](https://hackmd.io/X8oP7wULSpWH8ClxcQFcnQ)
[CodePen](https://codepen.io/gretali/pen/ExRoxjR)

### Week 08
[第八週小組任務 - 最終關卡討論](https://hackmd.io/zUnaC5kqRjaUsdIPLeQmyA)
[CodePen](https://codepen.io/gretali/pen/KKeZpPP)

:::spoiler 週末任務

:::

---

## 每週任務
### Week 01
[🏅 Week 01 - 四則運算](https://hackmd.io/lvFWrEseSuWrWs_tX7RuIg)
[👾 Codepen](https://codepen.io/gretali/pen/vYjjoZR)

### Week 02
[🏅 Week 02 - 字串處理](https://hackmd.io/aYelhQckT562HofGgkYfrw)
[👾 Codepen](https://codepen.io/gretali/pen/NWMEeJw)

### Week 03
[🏅 Week 03 - if 數值區間 + 邏輯運算子](https://hackmd.io/5HXwRYflS7aYuGknp5LMKQ)
[👾 Codepen](https://codepen.io/gretali/pen/VwxNmZg)

### Week 04
[🏅 Week 04 - 物件與陣列設計](https://hackmd.io/1b5-ZPU1QZifan5BKfWfcA)
[👾 Codepen](https://codepen.io/gretali/pen/ExRxywo)

### Week 05
[🏅 Week 05 - DOM 操作](https://hackmd.io/BCGMk6yYSbWGQXwFZLqGvQ)
[👾 Codepen](https://codepen.io/gretali/pen/wvXMoqz)

> **複習清單**
> - [ ] 手風琴

### Week 06 `🔺目前位置`
[🏅 Week 06 - DOM 操作](https://hackmd.io/jBhtTg6YTAig4wTXzJGsJg)
[👾 Codepen]()

---

## 每日任務
### 2022/10/03 (Mon)
[🏅 Day 1 - 變數自我介紹](https://hackmd.io/c3Te974CRoC33ZxMGPoy3g)
[👾 Codepen](https://codepen.io/gretali/pen/XWqqLew)

### 2022/10/04 (Tue)
[🏅 Day 2 - 型別與宣告](https://hackmd.io/G7Ca0owAQ9ymMGGvS8jRgg)
[👾 Codepen](https://codepen.io/gretali/pen/poVKdNV)

:::spoiler 小筆記

- 數字與數字型字串之間，或數字型字串之間，相加時變字串，減乘除則可運算
- 變數命名規則:
    - 開頭字元需要英文大小寫字元，或是下底線(_)、錢號($)。注意，數字不可用於開頭字元
    - 接下來的字元可以使用英文字元、數字或下底線(_)
    - 大小寫有差異
    - 不可使用 JavaScript 保留字
- var、let、const:
    var:
        - 可以重複宣告
        - 可能會汙染全域變數
    let:
        - 無法在同一層 Block 重複宣告變數
        - 所宣告的變數只有在區域塊（Block）內有效，不會產生全域變數
    const:
        - 具備 let 所有的特性
        - 在一宣告時就一定要賦予值，不然會產生錯誤
        - 宣告後不能更改值

:::

### 2022/10/05 (Wed)
[🏅 Day 3 - 小駝峰式命名](https://hackmd.io/_acxqX8pTCWq3SyqZvieag)
[👾 Codepen](https://codepen.io/gretali/pen/ZEojpdQ)

### 2022/10/06 (Thu)
[🏅 Day 4 - 型別陷阱題](https://hackmd.io/jjh0DvexSJqPsHNh1QRTHw)
[👾 Codepen](https://codepen.io/gretali/pen/XWqBwpp)

### 2022/10/07 (Fri)
[🏅 Day 5 - 賦值運算子與記憶體觀念](https://hackmd.io/spITRDqzTJO0BI_A7DX1rA)
[👾 Codepen](https://codepen.io/gretali/pen/qBYMyOy)

### 2022/10/10 (Mon)
[🏅 Day 6 - 比較運算子](https://hackmd.io/kEiaexWPTgyfULIMJ0zMCg)
[👾 Codepen](https://codepen.io/gretali/pen/poVQqdp)

### 2022/10/11 (Tue)
[🏅 Day 7 - 邏輯運算子](https://hackmd.io/ZzlCecYGTf2MeHRPjtOrmw)
[👾 Codepen](https://codepen.io/gretali/pen/PoexXQG)

### 2022/10/12 (Wed)
[🏅 Day 8 - 運算子大雜燴](https://hackmd.io/g1ImzzvuSp-u3VTi7033ew)
[👾 Codepen](https://codepen.io/gretali/pen/rNvoYzM)

### 2022/10/13 (Thu)
[🏅 Day 9 - if、else if、else 練習一](https://hackmd.io/NKf9tfsmQiymV88UaAZ3JQ)
[👾 Codepen](https://codepen.io/gretali/pen/wvjNGvJ)

### 2022/10/14 (Fri)
[🏅 Day 10 - if、else if、else 練習二](https://hackmd.io/U-Z68HfTQ_K4ikWrSlvOQg)
[👾 Codepen](https://codepen.io/gretali/pen/Jjvxxzd)

### 2022/10/17 (Mon)
[🏅 Day 11 - 陣列操作](https://hackmd.io/MNYUiyhkRSGFJGOq92ow6Q)
[👾 Codepen](https://codepen.io/gretali/pen/ZEoZpme)

### 2022/10/18 (Tue)
[🏅 Day 12 - 陣列操作應用](https://hackmd.io/w-aQ8qhGQEOTPjDfaOgL7A)
[👾 Codepen](https://codepen.io/gretali/pen/rNvbEgN)

### 2022/10/19 (Wed)
[🏅 Day 13 - 物件操作](https://hackmd.io/Pn6fkQYuTJCxMPA022HbHQ)
[👾 Codepen](https://codepen.io/gretali/pen/rNvgooM)

### 2022/10/20 (Thus)
[🏅 Day 14 - 物件取值](https://hackmd.io/h0ghddIzQmCPOr1CnJ-vkQ)
[👾 Codepen](https://codepen.io/gretali/pen/dyeBWmg)

### 2022/10/21 (Fri)
[🏅 Day 15 - 陣列物件整合操作應用](https://hackmd.io/w6ipbSHPTbWcPc9SOqBYrw)
[👾 Codepen](https://codepen.io/gretali/pen/vYjoKQN)

### 2022/10/24 (Mon)
[🏅 Day 16 - 函式觀念一](https://hackmd.io/JoUHqh-PQ6i2p8ckCzRIAg)
[👾 Codepen](https://codepen.io/gretali/pen/OJELQOB)

### 2022/10/25 (Tue)
[🏅 Day 17 - 函式觀念二](https://hackmd.io/MK4dGmuhRsmBaMNN_Kwpxw)
[👾 Codepen](https://codepen.io/gretali/pen/QWxWEKb)

### 2022/10/26 (Wed)
[🏅 Day 18 - 函式觀念三](https://hackmd.io/KJAvnCPmTIShvd7KxbFsyA)
[👾 Codepen](https://codepen.io/gretali/pen/bGKdBwo)

### 2022/10/27 (Thu)
[🏅 Day 19 - 函式觀念四](https://hackmd.io/QZBt-GC3R1uGLQOXFq3Jzw)
[👾 Codepen](https://codepen.io/gretali/pen/dyKoOWY)

### 2022/10/28 (Fri)
[🏅 Day 20 - 函式與陣列物件整合運用](https://hackmd.io/w8VoQTKfSO-_eyakxi6jDQ)
[👾 Codepen](https://codepen.io/gretali/pen/QWxbGMr)

### 2022/10/31 (Mon)
[🏅 Day 21 - 函式與陣列物件整合運用](https://hackmd.io/XUJ4VeG5QFKDCAzRCYGN_Q)
[👾 Codepen](https://codepen.io/gretali/pen/ZERbVaL)

### 2022/11/01 (Tue)
[🏅 Day 22 - textContent](https://hackmd.io/mpPYot1FQVKyDwvVf8IZYg)
[👾 Codepen](https://codepen.io/gretali/pen/qBKbaLK)

### 2022/11/02 (Wed)
[🏅 Day 23 - innerHTML](https://hackmd.io/w2rJBIIMREWCT3AfL1j-jg)
[👾 Codepen](https://codepen.io/gretali/pen/PoaNMNR)

### 2022/11/03 (Thu)
[🏅 Day 24 - 取得、設定元素屬性](https://hackmd.io/EXm5zuASSraoEIRrXcTyFQ)
[👾 Codepen](https://codepen.io/gretali/pen/NWzNQXo)

### 2022/11/04 (Fri)
[🏅 Day 25 - forEach](https://hackmd.io/8e21jAGwSMK7MeNluKjT3Q)
[👾 Codepen](https://codepen.io/gretali/pen/qBKaLqE)

### 2022/11/07 (Mon)
[🏅 Day 26 - addEventListener 事件監聽](https://hackmd.io/Wl1vhP5RRR-6W-p1MnI3Mg)
[👾 Codepen](https://codepen.io/gretali/pen/RwJGEpK)

### 2022/11/08 (Tue)
[🏅 Day 27 - 表單取值觀念](https://hackmd.io/9YzBBbl4RyO8da8MoHj-ww)
[👾 Codepen](https://codepen.io/gretali/pen/wvXombo)

### 2022/11/09 (Wed)
[🏅 Day 28 - axios 串接練習](https://hackmd.io/SuKvL0HYQBWfHqQ9RWsVWw)
[👾 Codepen](https://codepen.io/gretali/pen/abKJbdW)

### 2022/11/08 (Thu)
[🏅 Day 29 - API 資料渲染](https://hackmd.io/MOToIVUeQZu768ZBuSHtjA)
[👾 Codepen](https://codepen.io/gretali/pen/yLEELRO)

### 2022/11/09 (Fri)
[🏅 Day 30 - HTTP 狀態碼](https://hackmd.io/Boj6SWXETa2PEF08cd6G1Q)
[👾 Codepen](https://codepen.io/gretali/pen/zYaaxZW)

### 2022/11/14 (Mon)
[🏅 Day 31 - AJAX 非同步觀念](https://hackmd.io/s4DQvC6yQjirFju1eSwYXQ)
[👾 Codepen](https://codepen.io/gretali/pen/ZERRYNj)

### 2022/11/15 (Tue)
[🏅 Day 32 - 函式設計處理非同步](https://hackmd.io/m7Vv8z4CRyyWTcOh7xiNhA)
[👾 Codepen](https://codepen.io/gretali/pen/RwJJPaR)

### 2022/11/16 (Wed)
[🏅 Day 33 - 常見的 POST 請求](https://hackmd.io/Fv25vbizTUqUQIqcZ5282A)
[👾 Codepen](https://codepen.io/gretali/pen/yLEENgR)

### 2022/11/17 (Thu)
[🏅 Day 34 - C3.js 使用練習](https://hackmd.io/rqFYNK7CSfmfqVtejM-wlA)
[👾 Codepen](https://codepen.io/gretali/pen/GRGGqdw)

### 2022/11/18 (Fri)
[🏅 Day 35 - 多筆物件取值](https://hackmd.io/SzlWvClGS9-6Cl1brhxeyw)
[👾 Codepen]()

### 2022/11/21 (Mon)
[🏅 Day 36 - 箭頭函式](https://hackmd.io/li2EoJhkQjWmycxf1w_mwQ)
[👾 Codepen]()

### 2022/11/22 (Tue)
[🏅 Day 37 - 申請 API](https://hackmd.io/qpMD84apT1KmGmTtLxhcxA)
[👾 Codepen]()

### 2022/11/23 (Wed)
[🏅 Day 38 - data-* 屬性應用](https://hackmd.io/EdSGR9lwRUOjHlGO00lRbA)
[👾 Codepen]()

### 2022/11/24 (Thurs)
[🏅 Day 39 - 購物車 API](https://hackmd.io/bVL3ryaISGKAbzgwHmrRtw)
[👾 Codepen]()

### 2022/11/25 (Fri)
[🏅 Day 40 - 訂單 API](https://hackmd.io/9hMaPlJnTnKxhT1DJApaWg)
[👾 Codepen]()

11/21
https://hackmd.io/hPsUnThlQq6_qyUo91J5TQ