Learning Objectives
- 說出 JavaScript 能在哪些地方執行：瀏覽器裡的網頁，以及伺服器端的 Node.js
- 了解這條 30 課學習路徑分成哪幾段、每一段要學會什麼
- 會使用 CodeLab 的逐步執行動畫、網頁沙箱、小測驗與實作題
JavaScript 能做什麼
打開任何一個網頁，按下按鈕出現選單、輸入帳號時立刻提示格式錯誤、捲動頁面自動載入更多內容，這些「網頁會回應你」的部分，幾乎都是 JavaScript 做的。 一個網頁通常由三種語言分工完成：
| 語言 | 負責 | 比喻 |
|---|---|---|
| HTML | 內容與結構：標題、段落、按鈕、表單 | 房子的骨架 |
| CSS | 外觀：顏色、字型、排版 | 裝潢 |
| JavaScript | 行為：按下按鈕之後要發生什麼事 | 水電與開關 |
JavaScript 最早在 1995 年為了讓網頁能有互動而設計，現在用途已經遠遠超出網頁：
- 瀏覽器裡的網頁：每個瀏覽器都內建 JavaScript 引擎，不用安裝任何東西就能執行
- 伺服器與命令列工具：Node.js 讓 JavaScript 可以在瀏覽器以外執行，用來寫網站後端、自動化腳本，以及前端開發用的各種工具（j23、j29 會用到）
- 前端框架：React、Vue、Angular 等框架都是用 JavaScript 寫網頁應用程式，學完這條路徑就有基礎往下學
兩個常見的誤會：JavaScript 和 Java 是兩個不同的語言，只是名字相像；JavaScript 的正式標準叫 ECMAScript，
ES2015（也叫 ES6）是一次大改版，加入了 let、const、箭頭函式、class 等語法，之後每年都會推出新版。這條路徑教的是現代的寫法。
學習地圖：30 課分成六段
這條路徑整理自「JavaScript 網頁程式設計」與「深入 JavaScript 程式設計」兩門課程的內容，依照學習順序排成 30 課：
| 階段 | 課程 | 學完之後你能 |
|---|---|---|
| 起步 | j00～j02 | 用開發者工具看網頁、在網頁中放入 JavaScript |
| 語言基礎 | j03～j07 | 宣告變數、分辨型別、寫運算式、處理字串、用 if 與迴圈控制流程 |
| 資料與函式 | j08～j14 | 使用物件、陣列、JSON，寫函式，理解作用域與閉包，用 Math、Date 與計時器 |
| 操作網頁 | j15～j22 | 取得與修改網頁元素、處理事件與表單、上傳檔案、用正規表示法驗證輸入 |
| 與伺服器溝通 | j23～j26 | 架設本機測試伺服器、用 Promise 與 async/await 處理非同步、用 fetch 交換資料 |
| 物件導向與工具 | j27～j29 | 用 prototype 與 class 寫物件導向程式，認識 ES 模組、npm 與建置工具 |
預備知識：看得懂基本的 HTML 標籤（<p>、<div>、<button>）與 CSS 選擇器（#id、.class）就可以開始；不會也沒關係，用到時課文會說明。
建議依照順序學。前兩段是後面所有課程的基礎；操作網頁的課程會用到前面的變數、函式與陣列。
在 CodeLab 怎麼學
每一課都由幾種區塊組成，左邊的大綱會在你完成一個區塊時打勾：
| 區塊 | 怎麼用 |
|---|---|
| 逐步執行動畫 | 按「下一步」一行一行執行程式。左邊高亮的是即將執行的那一行，右邊是執行這一行之前每個變數的值，下方是目前為止的輸出。程式可以直接修改後重新執行 |
| 網頁沙箱 | 有 HTML、CSS、JavaScript 分頁，改完按「執行」，右邊會出現網頁預覽、主控台輸出與 DOM 樹；下方的任務全部完成才會打勾 |
| 小工具 | 例如型別轉換、事件迴圈的互動圖，點一點、試不同的值 |
| 小測驗 | 選好答案按送出；答錯可以再試，解說會告訴你為什麼 |
| 實作題 | 照著 TODO 補完程式，執行結果和預期輸出相同就算完成；卡住時可以一條一條打開提示 |
畫面右下角有 AI 助教，它看得到你正在看的區塊，可以問它「這一步為什麼是 undefined」這類問題。
下面先試兩個：一個逐步執行動畫、一個網頁沙箱。
第一個程式：一步一步看它執行
按「下一步」，看右邊的變數一個一個出現。第 7 行執行之後，lessons 的值變了；下方的輸出區會依序出現三行文字。看完之後，試著把第 3 行的 30 改成別的數字，再重新執行一次。
需要準備什麼
在 CodeLab 上學習只需要一個瀏覽器。想在自己的電腦上練習時，準備這三樣：
- 瀏覽器：Chrome（或 Edge、Firefox）。課程以 Chrome 的開發者工具為例，j01 會介紹
- 文字編輯器：例如 Visual Studio Code（VS Code），用來寫
.html與.js檔 - Node.js（到 j23 再裝即可）：到 nodejs.org 下載標示 LTS（長期支援）的版本，安裝後就能在終端機執行 JavaScript、使用 npm 套件
也有 JSFiddle、CodePen 這類線上編輯器，可以直接在網頁上寫 HTML、CSS、JavaScript 並立刻看到結果，和這裡的網頁沙箱類似。
想一想：認識 JavaScript
關於 JavaScript 和 Java，下列哪一個說法正確？
想在瀏覽器以外（例如伺服器或命令列）執行 JavaScript，通常使用什麼？
下面的程式會印出什麼？
let lessons = 30;
lessons = lessons - 2;
console.log('還剩', lessons, '課');
在逐步執行動畫裡，右邊顯示的變數值是什麼時候的狀態？
重點精華回顧
- 網頁由 HTML（結構）、CSS（外觀）、JavaScript（行為）分工完成。
- JavaScript 在瀏覽器裡就能執行；Node.js 讓它也能在伺服器與命令列執行。JavaScript 和 Java 是不同的語言，標準叫 ECMAScript。
- 這條路徑 30 課分成六段：起步、語言基礎、資料與函式、操作網頁、與伺服器溝通、物件導向與工具。
- 逐步執行動畫看的是「即將執行這一行之前」的狀態；網頁沙箱改完程式要按「執行」，任務全部完成才算完成。
- 下一課從瀏覽器的開發者工具開始。