---
# System prepended metadata

title: '[Live-log]_Week6'
tags: [real-time, draft]

---

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


![](https://img.shields.io/badge/Created_Date-12_Nov_2021-orange) 
- ![](http://img.shields.io/static/v1?logo=Pinboard&label=Edit&message=➦&style=style=flat) [![hackmd-github-sync-badge](https://hackmd.io/PZRN8LplTjKJwmM4WtihCg/badge)](/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
    - ![](https://i.imgur.com/pMHy3ly.png)

    - html 
        - use ul li list to show data
    - js
        - 宣告資料初始化
        - ...？（待補）
        - Q：![](https://i.imgur.com/UFeZkkX.png)
            - A：
        - Q：![](https://i.imgur.com/3819BH7.png)
            - 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
    - 找原生寫法的作品觀摩
    - ![](https://i.imgur.com/BcshfjU.png)
    - 這不是六角的專案啦，只是練功場

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

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

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

---

### [08:10]_Start

- [07:45] 錄影檔案
- Q：
![](https://i.imgur.com/FldS707.png)
    - 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 語法
    - ![](https://i.imgur.com/9lRYOZh.png)
        - <s> 教完了收工，下課囉 </s>
    - 其實原理都一樣
        - 【.】 物件屬性
        - 屬性為 get 函式
        - 【()】 括號裡面放參數
    - F12 觀察
        - response 會幫你組裝成物件回傳
        - ![](https://i.imgur.com/uwusBhN.png)

    - 常用：response.data

- Q： ![](https://i.imgur.com/j1ZAfIA.png)
    - A：不用擔心

- [09:25] CODING 示範

- [09:27] Q：![](https://i.imgur.com/3ii5R4y.png)
    - A：![](https://i.imgur.com/FrCfpiy.png)

<!-- ![](https://i.imgur.com/dCfhh0m.png)  -->

---

## Key-point

- [09:30] 超重點開始

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

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

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

- 示範：
    - 把功能放在函式裡面，比較容易閱讀
    - ![](https://i.imgur.com/GjhPayk.png)

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

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

- GET： input URL -> 回傳資料

- 預告 Week8：
    - POST, delete, put...
    - ![](https://i.imgur.com/9QIzlKQ.png)
    - 拿本機的資料跟遠端伺服器去比對請求



























