這篇文章要和大家分享的是我最近這一個月在 ALPHA CAMP 上學習 Javascript 全端開發學期二課程的心得和筆記，會針對課程的架構、重點筆記和我個人在學習上的心得做為主軸，希望大家看完之後能有所收穫。
其實我本來就有打算在學期二的課程結束後來撰寫心得分享，剛好看到課程的 assignment 有一項是要我們在自己的部落格分享，於是我打鐵趁熱，趁著我剛從色碼編譯器的地獄中解脫，趕緊來分享一下我這一個月以來的學習路程。
為何想繼續深造？
這部分我想在前面幾篇文章中有更多的解釋，簡單來說就是想要好好熟悉一門程式語言。畢竟雖然之前有斷斷續續地透過自學和零碎的課程去學習基本的網頁切版概念、python 爬蟲和 SQL 的語法，但其實我並沒有好好地把一門語言從基礎開始學過。這也使得我對於自身的程式能力感到相當不自信。
也因此，在我嘗試了一些學習方法後，我認為 ALPHA CAMP 的課程安排是最適合我的學習資源，哪怕學期 2-1 的學費高達 12,000，我還是義無反顧地給他上下去（心在淌血），畢竟投資自己是最重要的！
這裡也幫大家整理一下我近期撰寫的程式語言學習相關文章，如果有興趣的人可以一次看完喔~
2-1 課程架構
和最初的入門課程不同，這次算是把一個月的時間塞好塞滿，每一週的內容對我來說都是相當新鮮且資訊量龐大的主題，分別是： 1️⃣ Javascript 基礎培養、2️⃣ CSS 切版概念釐清 & Bootstrap 基礎以及 3️⃣ DOM 網頁互動設計。最後是三者的綜合實作題目，實在是讓人上的又愉快又痛苦。
Javascript 基礎培養
在開始的第一週，教案的安排是讓我們對於 Javascript 的語法在做一次全面的學習，包含先前學過的變數、型別轉換和資料結構，在這個部分我們接觸到了 JS 最為重要的一個功能：「函式」，也就是俗稱的 function。
函式的功能主要是將程式碼封裝在函式裡面，等到我們寫到一半，需要用到這個程式碼的功能時，以引用函式的方法來叫出程式碼，達到節省空間、不用重複寫同樣功能的程式碼和讓 code 更加容易讀懂的效用。
聽起來似乎還是有點複雜，我們先來看函式的架構，以下我以教案的範例來給各位做參考：
基本上寫法就是把你要呈現的功能包覆在 function 裡面，並將其命名，而當你要教出這個函式的時候，你需要使用 ()來調用函式，如果只輸入函式本身，只是單純地回傳函式本身。下方有兩個案例，一個是有 key 入參數，另一個則是無。
function multiply( x, y ) {
return x * y
}
const a = multiply(10, 3)
console.log(a)
function greeting() {
console.log('Hi!')
}
greeting()
這裡你只需要稍微了解一下函式的功能即可，如果真的對這玩意有興趣的話，可以參考這份 MDN 文件，或是下方的 Youtube 影片，都有完整的介紹 function 的概念~
在這週算是重新將 JS 的概念灌到大腦裡，並且透過 AC 出的一些 Assignment 來讓我們對程式碼更加熟悉，這邊也稍微給大家看一下我當初寫的作業：
動力十足，提前預習
在第一週的時候，因為剛開始上課，所以渾身充滿幹勁，基本上我每天都會花 4 小時以上在上課和寫程式上，在週五的時候就已經完成第一週的所有課程。畢竟我知道人的惰性往往都是在快結束的時候浮現，因此我想趁著學習熱忱還在最高處的時候多完成一些進度，於是在周末申請了提前預習。
提前預習是 AC 的一項機制，當學員提前完成當週預習時，可以透過完成小任務來向教練申請提前開始下週進度，我個人認為這是個蠻好的機制，畢竟大家的學習時間和效率都不同，這樣做能讓這段時間投入較多心力和時間的同學能按照自己的速度繼續學習。
CSS 切版概念釐清 & Bootstrap 基礎
在上第二週的課程時，因為剛好是假日，所以有完整的學習時間。加上這週的進度又是我較為熟悉且擅長的 CSS，所以我學得相當愉快且進展快速。先是簡單複習的 CSS 的重要觀念 display: flex 的相關排版，還認識了 position 元素，這部分大家都可以透過關鍵字在網路上找到相關文件，我這邊就先不多提。
這裡也分享一些我在這階段實作的 Demo 圖：
Bootstrap 框架
在經過前面的一些小練習和觀念養成之後，就來到第二週的重頭戲：Bootstrap 框架。這個詞其實我先前就在其他專案中聽工程師夥伴說過，只是一直沒有好好去認識它，因此在這個部分我學得格外用力。
Bootstrap：一套現成的網頁架構
（下方說明摘錄自教案）
其實 Bootstrap 是由優 (懶) 秀 (惰) 的前端工程師們把這些使用過的樣式和元件整理出來，提供給公司內部共同協作的夥伴使用。2011 年，Twitter 團隊工程師提出了一個由 HTML、CSS 和 JavaScript 寫成的前端框架，本來只是想幫助公司內部的開始者工作更輕鬆、協作更有效率，後來開源出來，成為當前最廣泛使用的前端框架之一。
Bootstrap 預先做好一套網站的基礎建設，讓你能在框架的基礎上進行開發，不需要再去煩惱瑣碎的設定。其Bootstrap 的核心設計目標是達成響應式 (RWD) 與行動優先 (Mobile First)，這兩個概念我們會留到下個章節再仔細介紹，簡單來說，就是讓你的網站排版可以自動適應螢幕大小。
Bootstrap 的特色是讓你不寫 CSS，只需要配置恰當的 HTML 架構並加上幾個 Bootstrap class，這種高效讓大家對他愛不釋手。
而且 Bootstrap 本身有非常完善的教學文件，因此「學習如何使用 Bootstrap」幾乎就是弄清楚要怎麼查找 Bootstrap 的官方網站。另外，由於 Bootstrap 提供了很多現成的元件樣式，你甚至可以把 Bootstrap 的官方文件當成 CSS 範例書，參考它是怎麼架構 HTML 和 CSS，以及如何命名 CSS class 等等。
以下這張截圖就是我從 Bootstrap 的官方網站中，找尋 Button 元素的說明文件頁面，基本上在使用 Bootstrap 時，要做的就是知道自己想要的呈現方式為何，接著透過搜尋和閱讀文件，將你要的程式碼複製到自己的程式碼中，你就能 get 到你要的功能了！
言盡於此，剩下的交由個人自行摸索
當然，雖然 Bootstrap 的使用真的不難，但若要在這篇文章中講清也是不太可能。因此，我決定將內容停在這裡，剩下的資訊大家可以透過網路、直接閱讀文件來瞭解更深喔！最後給大家看幾個我利用 Bootstrap 做出來的作業：
DOM 網頁互動設計
接著來到第三週。和上週一樣，我提前一週進入到第三週的課程。不過相較於前兩週的愜意和充滿動力，我到了第三週已經有些疲勞，畢竟每天都寫 4 小時以上，實在是有點撐不住。在加上這週的概念又是我完全沒接觸過的 DOM – Document Object Model，用來讓網頁動起來的核心觀念，實在是讓我有種頭昏眼花的感覺。
DOM (Document Object Model)
其實 DOM 就是 JS 用來讓網頁動起來的媒介，是由 HTML 文件轉化而來，為的就是讓 Javascript 能夠找到需要做調整的元素，加以選取並給予指令。每次當我們輸入新的網址或按下重新整理時，從解析檔案到畫面顯示出來，瀏覽器會進行以下流程：
- 解析 HTML / CSS 檔案，建立物件模型：
- HTML → DOM (Document Object Model)
- CSS → CSSOM (CSS Object Model)
說的精準一點，JavaScript 能夠處理的是「物件模型」，也就是 DOM 和 CSSOM，模型本來就是瀏覽器為了要讓 JavaScript 去操作網頁元素而建立出來的。但因為我們不會需要透過 JavaScript 去修改 CSS 規則，會在操作 DOM 的同時使用現有的 CSS 規則，因此這裡教案只會專注在 DOM 的概念和使用教學上。
一頭霧水，硬著頭皮寫下去
說實話，在 DOM 的這個段落，我大概看了兩次，但對於整體的概念理解和實作上其實碰到不少難關，經常需要看很多遍其他同學的程式碼或解答才能理解這個 assignment 的解法，這也讓我學得相當艱辛。
但經過了之前學期一的磨練，還有學習之前對自己先做好的心理建設，讓我能在充滿挫折的環境下維持進度，繼續不停地學習、寫作業和觀摩。隨著看的資歷越多，我也逐漸了解 DOM 大致上的邏輯和概念，雖然痛苦，但這也算是成長的一部份。
事件驅動模式
接著也想簡單提一下 DOM 的延伸 – 事件驅動程式設計，直白一點說就是對網頁做特定動作後後會出現甚麼樣的動態變化，這個特殊動作就稱為事件。以教案的例子來說，要展現的功能是當我們用滑鼠點擊按鈕時，介面上的圖片會出現變化，從無背景變成黑色背景（請見下圖）：
這時，事件就是我們「點擊按鈕」的這個動作，事件驅動程式就是針對這個動作去觸發我們寫好的函式或指令，讓網頁可以隨著這個事件（或稱動作）去表現出我們期望中的動態變化。
這個段落若要寫到讓大家能理解會需要過長的篇幅，而且說實話我也沒有真的將這塊完全學透，因此，我就先簡單帶過這個「事件驅動程式」的概念，讓大家知道，我們在學完 HTML/CSS 後，要如何利用 Javascript 來讓網頁根據我們動作的不同來進行動態調整與變化。
痛苦的實作時間
其實在第三週我就已經感到相當吃力，在最後一週的進度裡，果然又迎來了技術驗收題組，俗稱期末考。跟學期一相同，在課程結束前，為了確認學員是否有在課程中學到足夠的程式能力，教案都會準備大約 3~4 題的實作題目來讓大家回答。
而和先前的 Assignment 不同的是，這次沒辦法先觀摩解答會其他同學的答案。如果卡關的話，要自己上網查詢相關的解決方法，抑或是向助教提出疑問。雖然這讓我在寫作業的難度大幅上升（畢竟我蠻常卡關），但同樣的，我也能從自行在網路上查詢資料來學習「解決問題」的能力。
這點其實我在學期一結束前就有感覺到，自己去思考、嘗試和得出假設，再透過網路資源來驗證你的想法，其實是非常好的實戰練習。我也因此獲得很多自行嘗試的經驗，解出了期末考的題目。
解題心路歷程：觀摩前輩的程式碼
這次的期末考一共有 3 題，分別是第一題得從 0 開始架設一個色碼編譯器，以及兩個用 JS 去設計的功能。我在第一題就卡關，寫了三個多小時都寫不出想要的功能，畢竟在 DOM 和事件驅動的底子上終究是太過淺薄，讓我難以寫出想要的功能。
於是我改變策略，先去寫另外兩題較為簡單的題目，大約花了 2 小時就完成指定功能，讓我頓時多了不少信心，決定再次回來挑戰這個色碼編譯器。（下圖是我寫的兩題 JS 題目）
但事情並沒有我想的那般順利，我還是在色碼編譯器上屢屢碰壁…，這時，我在網路上找到了前幾屆學長姊所寫的文章，有附上相同題目的程式碼，令我感到十分驚喜。雖說我原本還是希望能透過自己的能力去寫出想要的功能，但實在是力不從心，最終我還是透過觀摩多位學長姊的程式碼來完成這次的期末考題。
在看完之後才發現，其實我在規劃程式碼架構的時候想的過於簡單，事件的設計上也有蠻多漏洞，也難怪之前怎麼嘗試都沒辦法跑出我想要的功能。經過觀摩學長姊的答案後，我對這個題目有了更完整的認知，同時也可以看到其他人時如何撰寫完整的事件和函式架構，實在是一次不錯的體驗。
最終我也順利完成我的色碼編譯器，大概花了 2~3 天的時間才完成，比我預期中的要久許多…而且在完成之後，我還是認為我在 DOM 和事件驅動的邏輯上沒有很紮實的吸收進去，這部分可能要多加複習和多找一些 Side project 來練習，才能算的上真正熟悉~
總結
很充實的一趟學習之旅，也剛好我最近實習、課業和外務上都比較輕鬆，才能夠以每天 4 小時的學習強度來進修。蠻慶幸自己有在學生時期就接觸到這類跨域課程，很難想像那些已經在業界工作、需要一邊上班一邊進修的同學們是怎麼撐下來的，真的是大大的 respect。
學完更進階的網頁開發技能後，其實我還蠻想繼續往學期 2-2 學下去的，但是考量到我現在其實並沒有打算轉職工程師 ，也還有其他的技能跟課程想要進修。若繼續上下去，除了我需要將大量的時間和精力放在 AC 上以外，我的荷包也禁不起連續兩個月的龐大支出（課程…真的…好貴）
所以雖然我很喜歡這樣的學習方式，對於接下來的課程也相當感興趣，但基於現實層面的考量，我近期不會繼續參與 AC 的課程。如果有機會，我會考慮明年畢業前再回來將學期二的課程上完，以讓我在出社會時有著能夠「兩棲」於工程師和商管類職缺的多功能力！
