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

-  [](/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] 週末任務還是可以繼續繳交
- 包含課程結束後
- 官網海報真的不是詐騙集團啦
- 
- 94 FREE

---

## 上半堂

- 

### [08:05] Start

#### C3.js 基本教學

- D3 比較冗長

- C3 寫法容易

- [08:07] 載入示範複習
- 先載入套件
- 自己寫的放後面
- 

- Q

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

- [08:15] CODING
- 
- 想放什麼要按照規則放

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

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

- 

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

- 先求有再求好

- [08:29] 示範圓餅圖

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

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

- [08:35] UI
- 


### [08:37] QK time

### [08:42]

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

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

### Key-Point

- [08:50] 講義觀念一

- 重申【物件取值】

- 找不到屬性
- 

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

- [09:05] 觀念二

- 

- 

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

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

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


- [09:25] code for C3.js

- 篩選資料 -> 處理資料

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

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

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

- [09:38] coding 流程講解

- [09:49] Q：
- A：如何與 UI 溝通

- Q：

- [09:50] CODING
- 
- 18-25：篩選資料
- 26-35：處理資料

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

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

- [10:05] 下拉選單

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

---

## 下半堂

- Q：

---