# [Live-log]_Week6
###### tags: `draft`, `real-time`

-  [](/PZRN8LplTjKJwmM4WtihCg?both)

---

[TOC]

---

:::info
:::spoiler **主要連結**
- <span style="color: #000;
font-weight: bold;
background: #76b0f3;
border-radius: 8px;
padding: 3px 2px;">【Week6】</span>
- **【課堂講義】**
https://hackmd.io/@hexschool/SyLgoyKvt [target=_blank]
- **【小組任務】**
https://hackmd.io/@hexschool/r1OwwisxY [target=_blank]
:::

:::warning
- **未完成項目快速 tag**
- [ ] （？）
- [ ] （待補）
:::

---

## Summary

- 本季才開始學 Javascript 的同學不用急著參加 THE F2E

- Week6 也是很關鍵、銜接後續作業、要跟上
- Week7, Week8 沒有補充預習的影音錄影

- Week6, Week7, Week8：CSR
- 培養進入業界的開發流程、實作能力
- Week9 是最後統整

- 本日課程 [Key-point](#Key-point)

### [10:05]_講解主線作業-W6

- LV.2
- 實務上的資料不會很乾淨
- 思考如何取得自己所需要的東西
- 複習 WEEK3
- 有小陷阱

- [10:10] W6 Live Demo - TDX
- 

- html
- use ul li list to show data
- js
- 宣告資料初始化
- ...？（待補）
- Q：
- A：
- Q：
- A：

### [10:08]_小組任務-W6

- 資料集的變數名稱
- 1-1. salary_score
- 1-2. market
- 2-1. gender
- 3-1. 自己玩

### [09:00]_週末任務-W6

- review 自己目前的籌碼
- 先探索自己、並 TAG 老師建議
- 在 Slack 分享出來
- 也可以私訊，但是在版上可以讓大家互相學習一起成長

- 已想好的以下狀態也可以到「Slack 求職特訓班」尋求方向
1. 本季結束後準備找工作
2. 跟完下一季「VUE 養成班」再找工作

- 想參加下一季「VUE 養成班」的有提供優惠

- 人生沒有一直都準備好的
- 只能不斷前進

---

## 上半堂

- THE F2E
- 找原生寫法的作品觀摩
- 
- 這不是六角的專案啦，只是練功場

- Team Kata intro
- 跟自己比
- 前面的人有些很早就開始練習了

- 建議台北以外找工作要學框架
- vue, react
- 因為台北機會較多，有些職缺接受可以入職後再學

- 提供薪資問卷：200x
- 樣本數足夠

---

### [08:10]_Start

- [07:45] 錄影檔案
- Q：
- A：下半堂再問

- url q 關鍵字

- 網路請求

- 後端設定的篩選參數不一定大家都相同

- 概念：通常大型網站都會有很多外連資源

- 範例：網站打開之後去觀察
- F12 -> request -> .css
- font awesome

- 差異比較
- **外連 CDN**：
- 可以減少伺服器資源
- 適合自己的專案
- 但是以老師的經驗：
- 從業 15 年，只遇到 2 次外部資源掛掉
- Swiper 照片輪播功能

- **程式碼跟檔案都放在自己的伺服器上面：**
- 適合比較嚴謹的單位

- 輸入網址：也是一種網路請求
- 範例：「Postman」
- 觀察 F12 -> Response ：回傳資料
- Headers -> contentType：格式
- 通常請求的第 1 個就是文件本身

- 發出網路請求，不是瀏覽器的特權
- 任何程式都可以做到
- Js 也可以

- 外部套件
- 可以引用人家寫好的 code
- jQuery
- Bootstrap

> ***edit:***
> - jQuery：函示庫
> - Bootstrap：框架
>
>> - 【函示庫與框架的差異】- 良葛格
>> https://openhome.cc/Gossip/CodeData/PythonTutorial/LibraryFrameworkPy3.html

- [08:45] How to use
- 剛開始可能誤以為看不懂
- 因為會有開發者自訂的命名
- 可以查閱該作者所提供的文件
- 通常換湯不換藥
- 【.】點用來讀取物件屬性
- 【()】括號是函式、括號裡面放函示要用到的參數

- axios
- 幫我們透過 JS 來撈回網路請求的 JS 套件
- 回傳的物件是 Promise，可以用 `.then` 和 `.catch` 去處理成功和失敗結果

### [08:53]_QK-time

- 有時候感覺似同非懂
- 沒關係，代表還是有在前進
- 以後獲得更多知識的時候就可以回顧
- 這很常見
- F2E talk
- 設計師提供的稿件資訊沒有很明確
- <s> 歡迎來到業界 </s>

## [09:00]_下半堂

- [09:00] 說明週末任務
> ***edit:*** 已置頂到 [Summary](#Summary)

### [09:12]_Start

- 範例：How to import
- 載入位置
- 放在自己的 js 上面

- [09:16] 示範使用 get 語法
- 
- <s> 教完了收工，下課囉 </s>
- 其實原理都一樣
- 【.】 物件屬性
- 屬性為 get 函式
- 【()】 括號裡面放參數
- F12 觀察
- response 會幫你組裝成物件回傳
- 

- 常用：response.data

- Q： 
- A：不用擔心

- [09:25] CODING 示範

- [09:27] Q：
- A：

<!--  -->

---

## Key-point

- [09:30] 超重點開始

- 非同步
- 發請求的時候先註冊起來
- 同時間，程式碼會繼續往下跑
- 等回傳後就會開始執行函式裡面的程式碼
- 回傳時間無法保證

- [09:37] 解說順序
- 之前的記憶體觀念很重要

- 但也不代表真的最後執行
- 如果是放非常複雜的運算式要跑很久
- 可能資料就先回傳了

- 示範：
- 把功能放在函式裡面，比較容易閱讀
- 

- **【養成好習慣】**：先把功能封裝到函式裡面
- 需要的時候再去呼叫
- 所以之前的函式觀念很重要

- 實作流程：切割任務
- 先取得資料才把資料秀出來

- GET： input URL -> 回傳資料

- 預告 Week8：
- POST, delete, put...
- 
- 拿本機的資料跟遠端伺服器去比對請求