AppWorks School Batch #16 Front-End Class 學習筆記&心得（Week 2）

（本文所有內容禁止媒體引用）

本週正式進入「程式語言」環節，開始學習 JavaScript，從最基本的變數、條件判斷、陣列、迴圈，到進階的物件、文件物件模型（document object model, DOM）操作等，之前花了數個月才逐漸上手的內容，這次一週內就要搞定。

取自 AppWorks School 前端班課程大綱

進度安排

第二週的進度全部圍著 JavaScript 打轉，在報名前，School 就提供了 Udacity 的免費課程讓大家預習，內容涵蓋基本資料型別、變數、條件判斷、迴圈、函數、陣列與物件，如果申請前就把 Udacity 的課程內容都摸熟，這星期的學習內容理應不是太大的負擔，比較特別的是「文件物件模型（document object model, DOM）」與「事件（event）」的操作，這些概念比較抽象且複雜，需要更多時間適應。

本週所有課程都以 Treehouse 進行，內容與發音依舊是全英文，有同學在群組說感覺練了很多英文，真的是一點也沒錯，不過軟體開發相關資源確實是以英文為主，不管是 Stack Overflow、GeeksforGeeks、Codecademy、甚至是 YouTube等，練就「以英文學習」的本事可說是基本功。

JavaScript 重點

1. 與 HTML 連接：<script>。
2. 程式碼撰寫原則：DRY (Don’t Repeat Yourself)。
3. 命名規則（naming conventions）。
4. 真值（truthy value）：非虛值者些屬之。
5. 虛值（falsy value）：0、-0、0n、""/''/``、null、undefined、NaN。
6. 布林值：true、false。
7. 關鍵字：this。
8. 事件（event）。
9. 無障礙：ARIA live regions。

變數

1. 宣告（declaration）、賦值（assignment）。
2. ES5 以前：var。
3. ES6 起：let、const。
4. 作用域（scope）：全域作用域（global scope）、區域作用域（local scope）。

字串

1. 屬性：.length。
2. 方法：.toUpperCase()、.toLowerCase()。
3. 串接（concatenation）、樣板字面值（template literals）。

運算

1. 遞增：++。
2. 遞減：--。
3. 一元運算子：!。
4. 算數運算子：+。
5. 賦值運算子：+=。
6. 相等運算子：==（小記：0 == “”）、===。
7. 邏輯運算子：&&、||。

條件判斷

1. 語法：if...else、else if。

陣列

1. 陣列字面值（array literals）。
2. 二維陣列。
3. 索引值。
4. 屬性：.length。
5. 方法：.push()、.unshift()、.pop()、.shift()、.join() 、.includes()、.indexOf()。
6. 展開運算子：...。
7. 觀念：佇列／隊列（queue）~先進先出（first in, first out, FIFO）。

疊代（迴圈）

1. 類別：do...while、while（當心「無窮迴圈」）、for。
2. 終止運行：return、break。
3. 在陣列中遍歷資料：for...in、for...of。

函式

1. 定義（define）函式、呼叫（call）函式。
2. 參數（parameter）、引數（argument）。
3. 預設參數（default parameter）。
4. 一級函式（first-class function）。
5. 函式宣告（function declaration）、函式運算（function expression）、箭頭函式運算式（arrow function expression）。
6. 提升（hoist）。
7. 錯誤處理：throw、Error。
8. 數學相關：Math.max()、Math.min()。
9. 判斷是否為NaN：isNaN()。

物件

1. 物件字面值（object literal）、建構子（constructor）& 類別（class）。
2. 屬性訪問器：點號表示法（dot notation）、方括號表示法（bracket notation）。
3. 取得屬性：getter (get)、更改屬性：setter (set)。
4. 正規表達式（regular expressions）。
5. 在物件內遍歷資料：for...in。
6. 展開運算子：...。
7. 屬性：.length。
8. 方法：.keys()、.values()。

視窗物件（Window Object）

1. 屬性：window.location。
2. 方法：alert()、console.log()、prompt()。

元素物件（Element Object）

1. 介面：HTMLCollection、HTMLDataElement、Node、CSSStyleDeclaration。
2. 介面屬性：HTMLCollection.length、HTMLDataElement.value、Node.textContent。
3. 屬性：Element.innerHTML。
4. 方法：document.write()、document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()、document.querySelector()、document.querySelectorAll()、Element.remove()、Element.removeAttribute()、Element.append()、Element.prepend()、EventTarget.addEventListener()、document.createElement()、Element.insertAdjacentHTML()（搭配 'beforebegin'、'afterbegin'、'beforeend'、'afterend'）。
5. 改變 CSS 屬性：HTMLElement.style。

心得

打從第一週看到進度安排是學完 HTML、CSS 與版本控制，就知道開學後的生活將會十分緊湊，第二週依舊延續這樣的步調，一個星期內就要從「認識 JavaScript」學到物件操作，甚至還有「文件物件模型（document object model, DOM）」與「事件（event）」，這些內容我之前摸了快兩個月還是一頭霧水，但神奇的是，這次再看居然就看懂了，之前看示範影片看得滿頭問號的 DOM 經典專題「待辦清單（Todo List）」，現在要做出來基本上是沒有什麼問題。

JavaScript 的許多進階觀念尚未包含在本週課程內容，例如執行環境（execution context）、範圍鏈（scope chain）、調用棧（call stack）、原型（prototype）、繼承（inheritance）等收錄於「JavaScript 全攻略：克服 JS 的奇怪部分」的內容，但光要熟練 DOM 本身就已經需要下一些功夫，且搭配 CSS 已足以做出反饋感頗高的頁面，把這些基本功練熟，相信未來要操作框架會更容易上手，且可避免自己被侷限於使用特定框架。

下個星期的進度是 Node.js、Express.js 與 AJAX，雖是前端班，但也會開始接觸一些後端概念，操作多會以終端機（terminal）進行、而非純用瀏覽器，因此會更為抽象，不再像前端操作可以有像完成一件美術作品時的成就感，但沒有後端功能的網站就相當於只有用餐區而沒有廚房的餐廳，因此還是要好好學，這些也是我在入學前較少接觸的內容，希望能趕緊把基本功補齊。