這周剛完成了 Alpha Camp學期2-1的課程。
相比 學期一， 最有感的就是：難度難度大大提升了！
Alpha Camp第二學期分為三個階段，各有不同目標。
每個階段四個禮拜的課程，透過大量的實作、練習一步步邁向目標。
- 階段一：打造一個會動的前端頁面。
- 階段二：學會API，透過瀏覽器要資料。
- 階段三：開始碰後端，學會網路框架、打造資料庫。
Week 1 － 科普JavaScript、物件、陣列、函式
由於學期二的重點是要打造「網頁」會大量用到JavaScript，在最開頭用一個章節科普了JS的前世今生。
不簡單值－物件、陣列
在介紹了有不同的資料型態後。話鋒一轉過往所學到的型態都是基本型別，如：字串、數字、步林值…等，都是簡單值，只代表單一值。「物件跟陣列」則有別於簡單值，是較複雜「值的組合」的型態。
物件：
同時有屬性/值的資料，並且可以作為物件的內部資料堆。e.g.,
const swtich = {
name = 'switch',
price = '9780',
color = 'blue&red'
}陣列：
有次序的資料堆。e.g.,
let wishList = [Swtich, PS5, XBOX1]
// 可以用 wishList[0]，選到Switch。(物件的第一個資料編號為0)函式
函式是「常會重複用到的程式碼封裝」，以便隨時呼叫及簡化撰寫程式時間
想到一個比喻是：以前打格鬥天王KOF時，正常想尻絕招得記各種「上下左右AABB」才能放出。但開始遊戲前開個金手指，事情就簡化成只要按 ZL或 ZR鍵就能輕鬆放出絕招。
「上下左右AABB」就是常會重複用到的程式碼
ZL、ZR鍵就是函式，封裝了「上下左右AABB」
對應成程式：呼叫函式 → 「按下ZL、ZR鍵」；執行常用程式碼 → 「上下左右AABB」
第一周最後的大作業，利用物件、陣列、函式完成一個要自動摸彩的程式。
Week 2 －Bootstrap、RWD響應式設計
RWD
先了解RWD響應式設計
RWD：根據不同螢幕尺寸切換 對應的CSS 設定
實際達成的方法是：
1. 在CSS中利用 media屬性，界定出不同的media query跟breakpoint (要改變版型的臨界點尺寸)
2. 使用排版系統(目前常用為flexbox, grid 兩種) 為不同breakpoint ，排出對應的版型
3. 設計時要由行動版(小尺寸)優先考慮，再一路往大思考要加入哪些東西
Bootstrap
學會如何寫出RWD網頁後，再用Bootstrap套件，簡化原本所需寫程式碼的數量。
Bootstrap是一套方便的前端框架。特點是內建響應式系統、以及大量減去開發者撰寫CSS的所需時間。
只要在HTML中加入一些Bootstrap制定的class就可以瞬間套上很多版型、樣式。
Week 3 － DOM 讓網頁動起來！
在了解如何讓網頁動起來前，要先了解渲染及事件
渲染 (Render)
HTML/CSS文件在瀏覽器 轉變成 畫面的過程
每次輸入新網址或是F5後，解析檔案到出現畫面的流程順序：
- 解析HTML/CSS檔案，建立物件模型 (HTML→DOM；CSS→CSSOM)
DOM：Document Object Model；CSSOM：CSS Object Model。 - DOM跟CSSOM合併為 Render Tree
- 計算每個畫面的元素，產出layout。只有結構還沒有細節
- 繪製畫面細節 (paint)
Render Tree顧名思義為樹狀結構，樹狀的每一個部份為節點 (Node)
透過語法可以查詢、選取、修改或遍歷節點。
事件 (Event)
了解網頁如何被Render Tree渲染後，最後一步讓網頁動起來，要替目標節點：加上監聽器 (event listener)及處理器 (event handler)
- event listener ：使用者在設置監聽器的節點上做出我們預期的行為(如：點擊)，告知 event handler
- event handler ：預期行為出現後，需要執行的程式(會寫成一個函式)。
這個to-do list是現階段課程 Event事件的小作品。
線上工作坊
相比學期一，這學期的線上工作坊讓我更有感地覺得有幫助。
或許是因為難度提升了，所以開始工作坊前都會帶著不少疑惑。而工作坊過後，都會有豁然開朗的感受，我想主要是因為：
- 被點名實作的同學，有機會講解被點出盲點並糾錯
- 助教帶的練習過程，有時會補充線上課程外的小祕法
Week 4－綜合實作大魔王
經歷前三周的課程後，最後一周照慣例的要來個學習大驗收。會出幾道對現階段的自己難度不小的題目。需要綜合前面所學並融會貫通，才能將題目解出。
這次有三道題目，卡了我好幾天才完成…
- RBG to HEX 轉換器
- 找出句子中最長的單字
- 數字轉成羅馬字 (難得全程邏輯都是靠自己想出來，一定要寫成文章)
繼續看：
Alpha Camp 學期 2-2心得，認識API, HTTP, Ajax
