---
tags: JavaScript直播班2021
---
# [JS直播班2021春季] 最終心得分享
[TOC]
## 給自己一個機會
> 從自學到實務經驗，**增進JS基礎能力**
在自學 JS/JQ 等前端技術時，經常會觀看 `六角學院` 在網路平台上的免費影片，每次在看的時候，都會覺得他們講解的方式，很不一樣，可以**很清楚重點在哪裡**，針對問題點去解決問題，不只是把問題敘述過而已。
後來看到六角學院要出JS直播班的時候，就立馬預訂了，另外還有搭配Vue3直播班，當時覺得**自學的程度還不是很好**，想了解**實務上**以及**其他同學**的想法，看看他們對同樣的問題，可以提出什麼不同的解決方法，**希望可以透過這個課程，增進自己的JS基礎能力**。
## 課程經歷
> 課程共九週 **(另外還有加碼的課程哦)**
> ※ 實際上課時數都會超過表定的時數
>
> 以下是**個人的心得與見解**
### 第一堂 重新認識Javascript
> 說明六角學院的精神，以及JS變數的運用
#### 變數的差異性
第一堂課讓我們從最初的起點開始，`變數` 開始介紹
雖然自己都有學過，或是看過，但沒有特別了解過**變數的差異性**
比如說
```javascript
//依ES6的規定，已經棄用 var 的宣告
var a = 0;
//建議使用 let 作為宣告
let a = 0;
```
這也是我上了這個課程，才知道ES6有做這樣的改變
以前都是用 var 在宣告
不知道已經被棄用了~~
#### 變數的記憶體位置
另外變數還有一個很重要的知識點，就是 **記憶體位置**
就是說 JS 程式在執行時，每個變數**儲存在哪裡**，**佔用了多少的記憶體空間?**
範例程式碼如下
```javascript
let d = 1;
let e = 1;
let f = d + e;
e += 1;
```
記憶體位置如下
每次**變數宣告**時，就會指向一個**新的記憶體空間**
變數做運算**被賦予新的值**，也會產生一個新的記憶體空間
或是說，變數運算時，**包含單純的數值**，也會產生一個新的記憶體空間
很多很多的情況，都會增加記憶體的空間
這個問題就比較**偏向底層的運作架構**
我們可以大概知道就可以了~
### 第二堂 邏輯判斷之術
> 判斷與流程圖的重要性
#### 判斷在生活中的重要性
在生活中，無時無刻都要做 `判斷`
起床時，就要**選擇要不要起床?**
起床之後要做什麼? 刷牙? 吃早餐? 早餐又要吃什麼?
等等的**選擇問題**
在程式中可以用 **`if ... else if ... else`** 來表示
```javascript
if(是否起床)
{
//...
}else if(是否賴床)
{
//...
}
else{
//繼續睡zzz...
}
```
學會判斷之後，我們就可以做更複雜一點的**邏輯判斷**了~
#### 流程圖在程式中的重要性
有了基本的判斷邏輯後
如何把邏輯 **`實體化`** 或是 **`具象化`**
就要靠**流程圖**的幫忙了!
在課程中出了**很多的題目**以及**自己出題目**來練習流程圖的繪製
我們都有玩過**剪刀石頭布**
在程式題目中也是一個經典題目
運用**判斷的方式**可以寫出很多不同的解決方案
可能先出 **`剪刀`** 、**`石頭`** 或 **`布`**，先判斷 **`贏`** 或 **`輸`**
就能產生多種可能
那流程圖到底重要在哪?
如果我們寫程式只憑著**直覺**的話，那程式碼一定會很豐富?!
因為每個人都有自己的一套**想法**，所以**開發的邏輯也不一樣**
**這時候流程圖就發揮他的功用了!**
定義流程圖，就能讓程式碼**產生規則**，在**開發的時候**就能依照**這個規則**，去撰寫程式碼
### 第三堂 物件跟陣列處理之術
> 生活中，處處都是物件，「你/妳」也是物件?!
課程中說道「處處都是物件」，`物件` 可以說是一個**廣泛的形容詞**
舉個例
`房屋` 、`人` 、 `貓狗` 、 `食物` 等等，都可以稱為**物件**
> 我們可以用**物件的形式**，大致上去**詳細描述**一個事實
```javascript
//描述一個事實 (人類個體)
const human = {
name:"TomTom", //姓名
age:22, //年齡
action:{ //會做的事
...
},
skills:{ //具備的能力
...
}
}
```
物件在開發時，可以提供我們更大的效益
把**變數**、**方法**都包成物件的話
那在使用上，就會便利許多~
#### 物件與陣列的差異性
> **物件** : 用 `{ }` 定義一個物件
> **陣列** : 用 `[ ]` 定義一個陣列
像我們要說明**一個大樓有好幾間住戶**，可以這樣表示
```javascript
const building = ["住戶1","住戶2","住戶3","住戶4"]
```
如果想要有**更詳細的資訊**，比如說**每間住戶的樓層**以及**住戶資訊**等等，可以這樣表示
```javascript
const building = {
resident : [
{
name:"住戶1",
floor:1,
isSold:false,
liveInfo:{}
},
{
name:"住戶2",
floor:2,
isSold:true,
liveInfo:{
total:5
}
}
]
}
```
從上述兩個例子來看，可以看出**物件**與**陣列**的差異性
`物件` 可以比 `陣列` **描述更多的細節**
這是我總結出來的一個心得
也比較好讓人理解差異性~~
### 第四堂 函式設計之術
> 包裝在包裝，消除重複，打造精簡程式碼
假如我想要做一個簡單的兩數加總
我們初次學寫程式的時候，可能會這樣寫
```javascript=
let a = 1;
let b = 2;
let c = a + b;
console.log(c);
```
不過我們想要顯示多次的加總結果，或許可以換種方式
```javascript=
function sum(a,b){
return a + b;
}
console.log(sum(1,2));
console.log(sum(4,3));
console.log(sum(6,7));
```
雖然這不是一個最好的例子，但我們可以得知**函式**可以**簡化重複**做的事情
#### BMI Kata 反覆練習
> 練習影片網址
> https://youtu.be/Y81FNjTu1YU
我覺得 **BMI Kata** 讓我學習到一些滿重要的細節
當你程式碼**重複寫個十遍以上**時
就會發現有些地方是可以再更精簡的
運用 **函式 (function)** 就能把重複或是相似的程式碼精簡化
開發的時候，效率也會跟著提高!!
### 第五堂 期中試煉
> 中途休息一下，給自己充足的時間，消化學習的東西
> https://codepen.io/kumatom/pen/OJbdEqj
### 第六堂 AJAX操控伺服器之術、第七堂 第三方JS套件整合之術、第八堂 API開發流程
> 學習套件整合之術，提升**自己的價值**
這邊統整了三個課程來分享，是因為我認為他們都是屬於 **`套件`** 的運用
#### 使用Axios與API串接
以前都是用 **ajax** 去接API，有時候都會忘記裡面的參數
看起來又是一大串的參數，覺得有點小複雜
```javascript
$.ajax({
type:"POST",
url:"https://..."
}).then(function(response){
console.log(response);
})
```
在這課程中學到了 **axios**，就簡化了不少的參數，使用上也直覺了很多
```javascript
axios.post(url,data,config)
.then(function(response){
console.log(response);
})
```
#### 什麼是C3.js ?
> 是一種資料視覺化的圖表物件
主線任務範例程式碼
```javascript
// 將 newData 丟入 c3 產生器
const chart = c3.generate({
size:{
width:240,
height:240
},
bindto: "#chart",
data: {
columns: newData,
type : 'donut',
colors:{
"高雄":"#E68618",
"台中":"#5151D3",
"台北":"#26C0C7"
}
},
donut: {
title: "套票地區比重",
label:{
show : false
},
width: 20
}
});
```
其實滿簡單使用的，只是有一些**參數設定要參考他們的手冊**，才會知道要怎麼用
主要是**資料的整合**，把要呈現成圖表的資料彙整一下，套入的指定參數中
就能呈現出你想要的圖表了呢!
在這堂課程中，除了學到 **套件使用** 以外，重點就是要怎麼 **創造自己的價值**
>洧杰老師有提到，**工程師的價值** => 就是在**資料整合**
>怎麼把一堆的資訊，依照需求整合資料，把圖表顯示出來
>我認為這也是**我們工程師所必備的核心價值**
### 第九堂 最終關卡任務
> 立下里程碑，統整學習的知識，為未來打下基礎，向更高的峰頂邁進
>
> 前台(Lv2)
>https://codepen.io/kumatom/pen/MWJOBNP
>
>後台(Lv1)
>https://codepen.io/kumatom/pen/ZELajgm
最後就是分享一下 **最終關卡** 的心得
**總結來說，最終關卡難度真的不簡單**
切版的部分不說，在架構上有很多細節要注意
而且也有分 **前/後台** 的架構
比如說
* 購物車在進行加入、刪除或修改的時候，要有提示訊息，也要確保是不是有資料
* 刪除訂單或是刪除購物車，要檢查有沒有資料可以刪除
* 預訂資料送出時，要驗證資料格式是否正確，有沒有輸入資料
基本上都是一些細節，也是很重要的部分
不管使用者體驗或是流程上，都是需要注意的
這部分我也是要再學習的
從最終關卡的任務，我也學到很多開發上的先後順序
怎麼調整執行順序或是把重複的程式碼轉成函式來使用
來提高效率、閱讀性以及架構的完整性
## 給學弟妹的一句話
> 一日六角學員，終生六角學員
六角學院的**好處**在於，課程的**內容**與**作業**都是 **`公開不藏私`** 的
所以參與課程的大家都能互相學習，一起成長與進步，這也是六角學院的**宗旨**
我也認為他們有**秉持著信念持續進步**，希望有參加課程的各位都能學習到東西
用各位都能理解的方式，講解著不容易的技術，以及追求新穎的技術能力
雖然我沒有主動問過助教或老師問題
但是再看其他學員問的問題，也讓我吸收很多的資訊
或許是已經知道的知識，也能夠再反覆學習，讓知識更熟練
**期許參加六角學院課程的各位，都能如願的提升自己的實力**
Sign in with Wallet
Connect another wallet