---
# System prepended metadata

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

---

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


![](https://img.shields.io/badge/Created_Date-19_Nov_2021-orange) 
- ![](http://img.shields.io/static/v1?logo=Pinboard&label=Edit&message=➦&style=style=flat) [![hackmd-github-sync-badge](https://hackmd.io/7s-O8RAyQhi0MyDkcwztAQ/badge)](/7s-O8RAyQhi0MyDkcwztAQ?both)



---

[TOC]

---

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


:::warning 
- **預計 tag**
    - [ ] 待補充項目：`#TODO`
    - [ ] 需要練習的部分：`#practice`
    
:::

---
---

## Summary

### 關鍵重點

- [Key-Point](#Key-Point)

- 老師課堂的提問很重要

### [10:06] 主線任務講解

- Lv.2
    - 加上圖表
    - 先不用篩選搞自己

- Lv.3
    - 新增資料後要更新圖表

### [10:11] 小組任務講解

### [10:12] 預告 - W8
- 主題：接 API
- W8 沒有主線作業 
- 最終作業開始要把前面的東西整合起來

### [10:15] 講義上面的日期寫錯惹

### [10:20] 週末任務還是可以繼續繳交
- 包含課程結束後
- 官網海報真的不是詐騙集團啦
    - ![](https://i.imgur.com/icWX16k.png)
    - 94 FREE


---

## 上半堂

- ![](https://i.imgur.com/9ZqCuz7.png)

### [08:05] Start

#### C3.js 基本教學

- D3 比較冗長

- C3 寫法容易

- [08:07] 載入示範複習
    - 先載入套件
    - 自己寫的放後面
        - ![](https://i.imgur.com/zvRvXMK.png)

- Q 
![](https://i.imgur.com/lfqmk7n.png)

- 放後面比較保險
    - 例如畫面要先跑出來才可以監聽
    - 

- [08:15] CODING
    - ![](https://i.imgur.com/df7ASPj.png)
    - 想放什麼要按照規則放

- Q：C3 VS CHART.JS
    - 有其各自的特性
    - 自己好用就好
        - 用老闆叫你趕快交件的東西
        - 不用有套件迷思

- [08:23] 示範軸線
    - 時間序

- ![](https://i.imgur.com/GQ0sZjy.png)

- 了解套件特性
    - 如果文件沒有寫
    - 可以改程式碼自己試試看

- 先求有再求好

- [08:29] 示範圓餅圖

- 有些套件會有預設值
    - 不寫屬性也可以跑
    - 但不是每個都是

- [08:33] 示範檢視文件的方式

- [08:35] UI 
    - ![](https://i.imgur.com/FZfBooU.png)

![](https://i.imgur.com/IFxMznl.png)
![](https://i.imgur.com/9YhshEz.png)

### [08:37] QK time
![](https://i.imgur.com/uep4jxk.png)

### [08:42] 

- 很常用套件
    - 拋棄羞恥心
    - 有專案時程壓力QQ

- [08:45] 
    - F12 -> Network
    - 載入別人的樣式
        - font, icon


### Key-Point

- [08:50] 講義觀念一

- 重申【物件取值】

- 找不到屬性
    -  ![](https://i.imgur.com/WhcxvE2.png)

- [08:56] 利用這個特性，自動新增屬性，就可以把資料分類好
    - 先建立空陣列
    - 未知屬性很好用
    - 不用一開始先寫死 
        - ==#TODO==: SOP 筆記
        - ==#practice==


- [09:05] 觀念二


- ![](https://i.imgur.com/7vVukHO.png)

- ![](https://i.imgur.com/rxTXGPA.png)

- ==#TODO==: 記錄上述回答

- 資料不一定都很乾淨
    - 搞不好全部都是給物件
    - 要有心理準備
        - <s> 政府單位 </s>

- 只要有規律，就可以讀取出來
    - 要思考怎麼過濾

![](https://i.imgur.com/3Q6vrol.png)


- [09:25] code for C3.js

- 篩選資料 -> 處理資料

- [09:30] 畫圖說明流程

- 工程師的價值：
    - 處理資料 -> **【篩選資料】** -> 輸出成有需要的資訊
    - 不是在學習套件本身

- 80-20 法則
    - 先學成最有價值的部分
    - 不是把 MDN 全部背下來

- [09:38] coding 流程講解

- [09:49] Q：![](https://i.imgur.com/jmcEA8c.png)
    - A：如何與 UI 溝通

- Q：![](https://i.imgur.com/t6QRrqp.png)

- [09:50] CODING
    - ![](https://i.imgur.com/fe7Thni.png)
    - 18-25：篩選資料
    - 26-35：處理資料

- **【養成好習慣】**
    - 1 個函式盡量只做 1 件事


- [10:00] 講解新增按鈕

- [10:05] 下拉選單

- 可以嘗試先看懂老師的小範例，再去實作




---

## 下半堂

- Q：![](https://i.imgur.com/F4iX6Qm.png)


---
