---
# System prepended metadata

title: '[JS直播班2021春季] 最終心得分享'
tags: [JavaScript直播班2021]

---

---
tags: JavaScript直播班2021
---
# [JS直播班2021春季] 最終心得分享

![](https://i.imgur.com/KJ8i8ZU.jpg)

[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;
```
記憶體位置如下
![image alt](https://i.imgur.com/3fg9nTi.png)

每次**變數宣告**時，就會指向一個**新的記憶體空間**
變數做運算**被賦予新的值**，也會產生一個新的記憶體空間
或是說，變數運算時，**包含單純的數值**，也會產生一個新的記憶體空間
很多很多的情況，都會增加記憶體的空間
這個問題就比較**偏向底層的運作架構**
我們可以大概知道就可以了~

### 第二堂 邏輯判斷之術
> 判斷與流程圖的重要性

#### 判斷在生活中的重要性
在生活中，無時無刻都要做 `判斷`
起床時，就要**選擇要不要起床?**
起床之後要做什麼? 刷牙? 吃早餐? 早餐又要吃什麼?
等等的**選擇問題**

在程式中可以用 **`if ... else if ... else`** 來表示
```javascript
if(是否起床)
{
  //...
}else if(是否賴床)
{
  //...
}
else{
  //繼續睡zzz...
}
```
學會判斷之後，我們就可以做更複雜一點的**邏輯判斷**了~

#### 流程圖在程式中的重要性
有了基本的判斷邏輯後
如何把邏輯 **`實體化`** 或是 **`具象化`**
就要靠**流程圖**的幫忙了!

在課程中出了**很多的題目**以及**自己出題目**來練習流程圖的繪製

我們都有玩過**剪刀石頭布**
在程式題目中也是一個經典題目
運用**判斷的方式**可以寫出很多不同的解決方案
可能先出 **`剪刀`** 、**`石頭`** 或 **`布`**，先判斷 **`贏`** 或 **`輸`**
就能產生多種可能

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

那流程圖到底重要在哪?
如果我們寫程式只憑著**直覺**的話，那程式碼一定會很豐富?!
因為每個人都有自己的一套**想法**，所以**開發的邏輯也不一樣**
**這時候流程圖就發揮他的功用了!**

定義流程圖，就能讓程式碼**產生規則**，在**開發的時候**就能依照**這個規則**，去撰寫程式碼

### 第三堂 物件跟陣列處理之術
> 生活中，處處都是物件，「你/妳」也是物件?!

課程中說道「處處都是物件」，`物件` 可以說是一個**廣泛的形容詞**
舉個例
`房屋` 、`人` 、 `貓狗` 、 `食物` 等等，都可以稱為**物件**

> 我們可以用**物件的形式**，大致上去**詳細描述**一個事實
```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 ?
> 是一種資料視覺化的圖表物件

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

主線任務範例程式碼
```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

最後就是分享一下 **最終關卡** 的心得

**總結來說，最終關卡難度真的不簡單**

切版的部分不說，在架構上有很多細節要注意
而且也有分 **前/後台** 的架構
比如說
* 購物車在進行加入、刪除或修改的時候，要有提示訊息，也要確保是不是有資料
* 刪除訂單或是刪除購物車，要檢查有沒有資料可以刪除
* 預訂資料送出時，要驗證資料格式是否正確，有沒有輸入資料

基本上都是一些細節，也是很重要的部分
不管使用者體驗或是流程上，都是需要注意的
這部分我也是要再學習的

從最終關卡的任務，我也學到很多開發上的先後順序
怎麼調整執行順序或是把重複的程式碼轉成函式來使用
來提高效率、閱讀性以及架構的完整性

## 給學弟妹的一句話
> 一日六角學員，終生六角學員

六角學院的**好處**在於，課程的**內容**與**作業**都是 **`公開不藏私`** 的
所以參與課程的大家都能互相學習，一起成長與進步，這也是六角學院的**宗旨**

我也認為他們有**秉持著信念持續進步**，希望有參加課程的各位都能學習到東西
用各位都能理解的方式，講解著不容易的技術，以及追求新穎的技術能力

雖然我沒有主動問過助教或老師問題
但是再看其他學員問的問題，也讓我吸收很多的資訊
或許是已經知道的知識，也能夠再反覆學習，讓知識更熟練

**期許參加六角學院課程的各位，都能如願的提升自己的實力**


