使用 JavaScript 進行動態指令碼編寫

預備知識

在開始本模組之前，你不需要任何 JavaScript 知識，但你應該已經完成了本課程的前幾個模組。你至少應該瞭解HTML和CSS 的基本原理。

教程與挑戰

什麼是 JavaScript？

歡迎來到 MDN 初學者 JavaScript 課程！在第一篇文章中，我們將從宏觀角度審視 JavaScript，回答諸如“它是什麼？”、“它在做什麼？”等問題，並確保你熟悉 JavaScript 的用途。

初探 JavaScript

既然你已經瞭解了 JavaScript 的理論及其用途，我們將透過一個完全實用的教程，為你提供 JavaScript 基本功能的速成課程。在這裡，你將一步步構建一個簡單的“猜數字”遊戲。

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

當你在上一篇文章中構建“猜數字”遊戲時，你可能會發現它無法正常工作。別擔心——本文旨在透過提供一些查詢和修復 JavaScript 程式錯誤的簡單技巧，讓你不再為這些問題抓狂。

儲存所需資訊 — 變數

閱讀完前幾篇文章後，你應該已經瞭解了 JavaScript 是什麼、它能為你做什麼、如何將其與其他 Web 技術配合使用，以及它的主要功能從宏觀上看是怎樣的。在本文中，我們將深入瞭解真正的基礎知識，學習如何使用 JavaScript 最基本的構建塊——變數。

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

在本課程的這一部分，我們將討論 JavaScript 中的數學——我們如何結合運算子和其他功能，成功地運算元字以實現我們的意圖。

文字處理——JavaScript 中的字串

接下來，我們將把注意力轉向字串——這是程式設計中對文字片段的稱呼。在本文中，我們將介紹學習 JavaScript 時應該瞭解的所有常見字串知識，例如建立字串、在字串中轉義引號以及將它們連線起來。

有用的字串方法

既然我們已經瞭解了字串的最基本知識，讓我們更進一步，開始思考可以使用內建方法對字串進行哪些有用的操作，例如查詢文字字串的長度、連線和拆分字串、用一個字元替換字串中的另一個字元等等。

陣列

在本課中，我們將學習陣列——一種將資料項列表儲存在單個變數名下的整潔方式。在這裡，我們將探討它的用途，然後學習如何建立陣列、檢索、新增和刪除儲存在陣列中的專案，以及其他內容。

挑戰：傻瓜故事生成器 ^挑戰

在這個挑戰中，你需要運用迄今為止在本模組中學到的一些知識，將其應用於建立一個有趣的應用程式，生成隨機的傻瓜故事。在此過程中，我們將測試你對變數、數學、字串和陣列的知識。

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

在任何程式語言中，程式碼都需要根據不同的輸入做出決策並執行相應的操作。例如，在遊戲中，如果玩家的生命值為 0，那麼遊戲結束。在天氣應用程式中，如果是在早上檢視，則顯示日出圖形；如果是晚上，則顯示星星和月亮。在本文中，我們將探討 JavaScript 中所謂的條件語句是如何工作的。

迴圈程式碼

程式語言對於快速完成重複性任務非常有用，從多個基本計算到幾乎任何其他需要完成大量類似工作的場景。在這裡，我們將介紹 JavaScript 中可用的迴圈結構，以處理此類需求。

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

編碼的另一個基本概念是函式，它允許你將執行單一任務的程式碼塊儲存在一個定義的塊中，然後使用一個簡短的命令在需要時呼叫該程式碼——而不是多次輸入相同的程式碼。在本文中，我們將探討函式背後的基本概念，例如基本語法、如何呼叫和定義它們、作用域和引數。

構建你自己的函式

在上一篇文章中處理了大部分基本理論之後，本文將提供實踐經驗。在這裡，你將練習構建自己的自定義函式。在此過程中，我們還將解釋處理函式的一些有用細節。

函式返回值

關於函式，我們還需要討論最後一個基本概念——返回值。有些函式不返回有意義的值，但有些會。理解它們的值是什麼、如何在程式碼中使用它們以及如何使函式返回有用的值非常重要。我們將在下面介紹所有這些。

事件介紹

在本文中，我們討論了一些圍繞事件的重要概念，並探討了它們在瀏覽器中工作的基本原理。

事件冒泡

本文介紹了事件冒泡、事件捕獲和事件委託的概念，這些都涉及到當你向一個包含另一個元素的元素新增監聽器，並且事件發生在被包含元素上時所發生的情況。

挑戰：圖片畫廊 ^挑戰

既然我們已經瞭解了 JavaScript 的基本構建塊，我們將透過讓你構建一個在許多網站上都能看到的常見專案——一個由 JavaScript 驅動的圖片畫廊，來測試你對迴圈、函式、條件語句和事件的知識。

物件基礎

在本文中，我們將探討 JavaScript 物件的基本語法，並回顧本課程前面已經介紹過的一些 JavaScript 功能，重申你已經處理的許多功能都是物件這一事實。

DOM 指令碼簡介

在編寫網頁和應用程式時，最常見的操作之一就是以某種方式更改文件結構。這通常透過操作文件物件模型 (DOM) 來完成，透過一組用於控制 HTML 和樣式資訊的內建瀏覽器 API。在本文中，我們將向你介紹 DOM 指令碼程式設計。

使用 JavaScript 發出網路請求

現代網站和應用程式中另一個非常常見的任務是發出網路請求，從伺服器檢索單個數據項，以更新網頁的各個部分，而無需載入整個新頁面。這個看似微小的細節對網站的效能和行為產生了巨大影響，因此在本文中，我們將解釋這個概念並介紹使之成為可能的技術。

使用 JSON

JavaScript 物件表示法 (JSON) 是一種基於 JavaScript 物件語法的標準文字格式，用於表示結構化資料。它通常用於在 Web 應用程式中傳輸資料（例如，將一些資料從伺服器傳送到客戶端，以便在網頁上顯示，反之亦然）。你會經常遇到它，因此在本文中，我們為你提供了使用 JavaScript 處理 JSON 所需的一切，包括解析 JSON 以便你可以訪問其中的資料，以及建立 JSON。

挑戰：構建房屋資料 UI ^挑戰

在這個挑戰中，我們將讓你為一個房地產網站的房屋搜尋頁面編寫一些 JavaScript。這將包括獲取 JSON 資料，根據提供的表單控制元件中輸入的值過濾資料，並將資料渲染到使用者介面。在此過程中，我們還將測試你對條件語句、迴圈、陣列和陣列方法以及其他知識的掌握程度。

JavaScript 除錯和錯誤處理

在本課中，我們將回到 JavaScript 除錯的主題（我們最初在出了什麼問題？中探討過）。在這裡，我們將深入探討跟蹤錯誤的技術，同時也將探討如何在程式碼中進行防禦性編碼和處理錯誤，從一開始就避免問題。

檢驗你的技能

你會在教程文章之間找到“檢驗你的技能”文章，以檢查你是否在繼續學習之前掌握了最重要的資訊。如果你想一起探索所有這些內容，可以在檢驗你的技能：JavaScript中找到它們的列表。

另見

Scrimba: 學習 JavaScript ^{MDN 學習合作伙伴}

Scrimba 的《學習 JavaScript》課程透過解決 140 多個互動式編碼挑戰來教授 JavaScript，構建專案包括遊戲、瀏覽器擴充套件甚至移動應用程式。Scrimba 提供由知識淵博的老師教授的有趣互動課程。

學習 JavaScript

對於有抱負的 Web 開發人員來說，這是一個極好的資源——在互動式環境中學習 JavaScript，包括短課程和互動式測試，並透過自動化評估進行指導。前 40 節課是免費的，完整課程只需一次小額付款。

• 概述：核心學習模組
• 下一頁