6. JavaScript 基礎

學習成果

• 理解變數是什麼，以及它們在程式設計（不僅是 JavaScript）中的重要性。

• 使用 let 宣告變數併為其賦值。

• 使用新值重新賦值變數。

• 使用 const 建立常量。

• 變數和常量之間的區別，以及何時使用它們。

• 理解變數命名的最佳實踐。如果未明確涵蓋，所有示例都應展示良好的變數命名實踐。

• 可以儲存在變數中的不同型別的值——字串、數字、布林值、陣列和物件。

資源

• 儲存所需資訊 — 變數

學習成果

• JavaScript 中的基本數字運算——加、減、乘、除。

• 理解如果數字被定義為字串，它們就不是數字，這可能導致計算出錯。

• 使用 Number() 將字串轉換為數字。

• 運算子優先順序。

• 自增和自減。

• 賦值運算子，例如加法賦值和減法賦值。

• 比較運算子。

• 基本的 Math 物件方法，例如 Math.random()、Math.floor() 和 Math.ceil()。

資源

• JavaScript 中的基本數學 — 數值和運算子

• 數字和日期

學習成果

• 建立字串字面量。

• 理解匹配引號的必要性。

• 字串拼接。

• 在字串中跳脫字元。

• 模板字面量

  • 在模板字面量中使用變數。

  • 多行模板字面量。

• 使用常用屬性和方法進行字串操作，例如

  • length.

  • toString().

  • includes().

  • indexOf().

  • slice().

  • toLowerCase() 和 toUpperCase()。

  • replace().

資源

• 文字處理——JavaScript 中的字串

• 有用的字串方法

學習成果

• 理解陣列是什麼——一種儲存變數列表的結構。

• 陣列的語法——[a, b, c] 和訪問器語法 myArray[x]。

• 使用 myArray[x] = y 修改陣列值。

• 使用常用屬性和方法進行陣列操作，例如

  • length.

  • indexOf().

  • push() 和 pop()。

  • shift() 和 unshift()。

  • join() 和 split()。

• 高階陣列方法，例如 forEach()、map() 和 filter()。

資源

• 插曲：陣列簡介，Scrimba 課程合作伙伴

• 陣列

學習成果

• 理解條件語句是什麼——一種根據測試結果執行不同程式碼路徑的程式碼結構。

• if ... else ... else if.

• 使用比較運算子建立測試。

• AND、OR 和 NOT 在測試中的應用。

• Switch 語句。

• 三元運算子。

資源

• 在程式碼中做出決策——條件語句

學習成果

• 理解迴圈的目的——一種程式碼結構，允許你多次執行相似的操作，而無需為每次迭代重複相同的程式碼。

• 基本 for 迴圈。

• 使用 for ... of 遍歷集合。

注意:

JavaScript 中還有許多其他型別的迴圈，我們未在此列出。在這個階段，沒有必要（也無益）理解所有這些迴圈。目前，學生需要理解迴圈的目的以及最常見的型別。

• break 和 continue。

資源

• 迴圈程式碼

學習成果

• 理解函式的作用——實現可重用程式碼塊的建立，可以在需要的地方呼叫。

• 理解函式在 JavaScript 中無處不在，其中一些是瀏覽器內建的，一些是使用者定義的。

• 理解函式和方法之間的區別。

• 呼叫函式。

• 返回值。

• 理解全域性作用域和函式/塊作用域。

• 在函式呼叫中傳遞引數。

• 命名函式和匿名函式。

• 構建自己的自定義函式

  • 包含引數。

  • 包含返回值。

• 回撥函式——理解函式引數本身可以是函式，以及這種模式的用途。

• 箭頭函式。

資源

• 使用函式編寫更少的程式碼，Scrimba 課程合作伙伴

• 函式——可重用的程式碼塊

• 構建你自己的函式

• 函式返回值

• 箭頭函式表示式

學習成果

• 理解在 JavaScript 中，大多數東西都是物件，而且你每次接觸 JavaScript 時可能都使用過物件。

• 基本語法

  • 物件字面量。

  • 屬性和方法。

  • 在物件中巢狀物件和陣列。

• 使用建構函式建立新物件。

• 物件作用域和 this。

• 訪問屬性和方法——括號和點語法。

• 物件解構。

資源

• JavaScript 物件基礎

• 物件解構賦值

學習成果

• 理解 DOM 是什麼——瀏覽器對文件 HTML 結構的內部表示，以物件層次結構的形式存在，可以使用 JavaScript 進行操作。

• 理解 Web 瀏覽器中的重要部分以及它們在 JavaScript 中的表示——Navigator、Window 和 Document。

• 理解 DOM 節點在 DOM 樹中如何相互關聯——根節點、父節點、子節點、同級節點和後代節點。

• 獲取 DOM 節點的引用，例如使用 querySelector() 和 getElementById()。

• 建立新節點，例如使用 innerHTML() 和 createElement()。

• 使用 appendChild() 和 removeChild() 將節點新增到 DOM 或從中移除。

• 使用 setAttribute() 新增屬性。

• 使用 Element.style.* 和 Element.classList.* 操作樣式。

資源

• 操作文件

• DOM 指令碼，explainers.dev

學習成果

• 理解事件是什麼——瀏覽器在發生重要事件時發出的訊號，開發者可以編寫程式碼來響應。

• 事件處理器

  • addEventListener() 和 removeEventListener()

  • 事件處理程式屬性。

  • 內聯事件處理程式屬性，以及為什麼你不應該使用它們。

• 事件物件。

• 使用 preventDefault() 阻止預設行為。

• 事件委託。

資源

• 事件介紹

學習成果

• 理解非同步 JavaScript 的概念——它是什麼以及它與同步 JavaScript 的區別。

• 理解回撥函式和事件在歷史上一直是在 JavaScript 中進行非同步程式設計的方式。

• 使用 async 函式和 await 進行現代非同步程式設計

  • 基本用法。

  • 理解 async 函式的返回值。

  • 使用 try ... catch 進行錯誤處理。

• Promises

  • 理解 async/await 底層使用 Promise；它們提供了一個更簡單的抽象。

  • Promise 鏈式呼叫。

  • 使用 catch() 捕獲錯誤。

資源

• 非同步 JavaScript

學習成果

• 理解 fetch() 用於非同步網路請求，這是 Web 上最常見的非同步 JavaScript 用例。

• 從網路獲取的常見資源型別

  • 文字內容、JSON、媒體資源等。

  • 來自 RESTful API 的資料。瞭解 REST 的基本概念，包括常見的模式，如 CRUD。

• 理解單頁應用 (SPA) 是什麼，以及與之相關的問題

  • 非同步更新後面的可訪問性問題，例如，螢幕閱讀器預設情況下不會宣佈內容更新。

  • 非同步更新後面的可用性問題，如歷史記錄丟失和後退按鈕失效。

• 理解 HTTP 基礎。你應該瞭解常見的 HTTP 方法，如 GET、DELETE、POST 和 PUT，以及它們如何透過 fetch() 進行處理。

資源

• 從伺服器獲取資料

學習成果

• 理解 JSON 是什麼——一種基於 JavaScript 物件語法的非常常用的資料格式。

• 理解 JSON 也可以包含陣列。

• 使用 Web API 中可用的機制（例如，Fetch API 中的 Response.json()）將 JSON 作為 JavaScript 物件檢索。

• 使用括號和點語法訪問 JSON 資料中的值。

• 使用 JSON.parse() 和 JSON.stringify() 在物件和文字之間進行轉換。

資源

• 使用 JSON

• JSON 複習，Scrimba 課程合作伙伴

學習成果

• 理解第三方程式碼是什麼——由他人編寫的功能，你可以在自己的專案中使用，這樣你就無需自己編寫所有內容。

• 為什麼開發者使用第三方程式碼

  • 效率和生產力：大量複雜的功能已經為你寫好，並且以一種強制高效、模組化程式碼組織的方式建立。

  • 相容性：信譽良好的框架程式碼已經過最佳化，可以跨瀏覽器/裝置工作，以獲得最佳效能等。許多框架還具有輸出到特定平臺（例如 Android 或 iOS）作為構建目標的系統。

  • 支援/生態系統：流行的框架擁有活躍的社群和幫助資源來提供支援，以及豐富的擴充套件/外掛系統來新增功能。

• 庫和框架的區別

  • 庫通常是一個單一的程式碼元件，它提供了一個特定問題的解決方案，你可以將其整合到你自己的應用程式中（例如，使用 chart.js 建立基於 <canvas> 的圖表，或者使用 three.js 進行簡化的 3D GPU 圖形渲染），而框架通常是一個更廣泛的架構，由多個元件組成，用於構建完整的應用程式。

  • 庫通常對你如何在程式碼庫中使用它持開放態度，而框架通常會強制執行特定的編碼風格和控制流。

• 為什麼應該使用框架？

  • 它們可以提供大量功能併為你節省大量時間。

  • 許多公司使用 React 或 Angular 等流行框架來編寫他們的應用程式，因此許多工作將框架列為對申請人的要求。

• 為什麼框架不總是正確的選擇？框架

  • 對於小型專案來說可能很容易過度——你可能最好編寫幾行原生 JavaScript 來解決問題，或者使用定製的庫。

  • 通常會為你的應用程式的初始下載新增大量 JavaScript，導致初始效能下降和潛在的可用性問題。

  • 通常附帶自己的一套自定義語法和約定，這可能會給專案帶來巨大的額外學習曲線。

  • 可能由於其架構選擇而與現有程式碼庫不相容。

  • 需要定期更新，這可能導致你的應用程式需要額外的維護開銷。

  • 可能由於其架構（例如，SPA 式客戶端路由）而給使用輔助技術的使用者帶來重大的可訪問性問題，需要仔細考慮。

• 如何選擇？一個好的庫或框架必須

  • 解決你的問題，同時提供遠遠超過其帶來的任何負面影響的優勢。

  • 擁有良好的支援和友好的社群。

  • 積極維護——不要選擇一個一年以上未更新或沒有使用者的程式碼庫。

資源

• 客戶端框架介紹

• React 入門，Scrimba 課程合作伙伴

學習成果

• 理解不同型別的 JavaScript 錯誤，例如語法錯誤和邏輯錯誤。

• 瞭解常見的 JavaScript 錯誤訊息型別及其含義。

• 使用瀏覽器開發者工具檢查你頁面上執行的 JavaScript，並檢視它產生的錯誤。

• 使用 console.log() 和 console.error() 進行簡單的除錯。

• 錯誤處理

  • 使用條件語句避免錯誤。

  • try ... catch.

  • throw.

• 使用斷點、監視器等進行高階 JavaScript 除錯。

資源

• 哪裡出了問題？JavaScript 故障排除

• 控制流和錯誤處理 > 異常處理語句

• Firefox JavaScript 偵錯程式，Firefox Source Docs

• Chrome > Console 概覽，developer.chrome.com (2019)

• Chrome > Debug JavaScript，developer.chrome.com (2017)