LESSON-14｜JavaScript 基礎語法

先理解：這堂課解決什麼問題？

服務型網站需要根據訪客操作顯示一段清楚的服務資訊；本堂先用原生 JavaScript 建立最小的輸入、處理與輸出流程。

本堂要完成：完成一個能把服務名稱與價格格式化成「安心維護｜1200 元」的函式，並能說明參數、引數與回傳值各自負責什麼。

學習邊界：先完成「用值、型別、變數與函式把服務資訊整理成可顯示的結果」，不提前引入尚未教過的框架或建置工具。

第一次上課環境：先認識四個觀察位置

編輯器：修改並儲存 starter/files/main.js；檔案名稱與資料夾位置要和教材一致。
瀏覽器：開啟 starter/files/index.html；儲存後回到瀏覽器重新整理。
DevTools：Elements 看目前 DOM，Console 看值、型別、函式結果與錯誤，Network 看 main.js 是否成功載入。
操作習慣：每次先預測，再只修改一個 JavaScript 責任；儲存、重新整理、操作，最後留下畫面與工具證據。

先做最小實驗：先看見結果

這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。

開啟本堂最小實驗

入口：開啟 examples/minimal.html。
操作：開啟 examples/minimal.html，先觀察 Console 的型別，再按下顯示服務資訊。
預期：Console 顯示 string、number 與格式化結果；按鈕後畫面顯示可聯絡服務文字。
重設：重新整理頁面清除目前狀態；本實驗只使用固定本機資料。

學生練習流程

照這六步走；每一步先完成指定操作，再用「完成判斷」確認結果，最後才進入下一步。

1
先做最小實驗

先開啟 examples/minimal.html，觀察 Console 的型別，再按下顯示服務資訊。

完成判斷：Console 顯示 string、number 與格式化結果；按鈕後畫面顯示可聯絡服務文字。
開啟最小實驗
2
補齊必要名詞

回到名詞卡，理解值、型別、變數、函式、parameter、argument 與 return 的責任。

完成判斷：能說出資料、函式呼叫與回傳結果各自出現在哪裡。
查看名詞卡
3
完成 Starter

依序完成值與型別、函式骨架、按鈕事件三個微步驟；每一步都先預測，再重新整理觀察。

完成判斷：Console 能看到型別、函式呼叫結果與按鈕後的畫面變化。
進入 Starter
4
觀察 Checkpoint

先重現函式沒有 return 時的 undefined，再只修正指定的 return 位置。

完成判斷：能指出 undefined 的原因，且只在 formatService 函式內補上 return。
進入 Checkpoint
5
對照 Solution

逐檔比較 index.html 與 main.js，確認輸入、處理、return、事件與畫面輸出的完整路徑。

完成判斷：Console 與畫面都顯示「安心維護｜1200 元」，且沒有第一個紅色錯誤。
進入 Solution
6
完成變體與驗收

保留同一個 formatService 函式，改用另一個服務名稱與價格，並留下 Console 與畫面結果作為證據。最後回到 Live Lab，逐步留下檔案位置、Console 與畫面證據。

完成判斷：能用另一組服務名稱與價格重跑同一條輸入、處理、輸出路徑。
回到 Live Lab

檔案地圖：每個位置負責什麼？

先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。

files/index.htmlHTML 頁面：承載本堂「用值、型別、變數與函式把服務資訊整理成可顯示的結果」所需的內容與入口。
files/main.jsJavaScript 腳本：放置本堂「用值、型別、變數與函式把服務資訊整理成可顯示的結果」相關的互動邏輯。
constJavaScript 宣告語法：建立不重新指定的變數綁定。
letJavaScript 宣告語法：建立之後可能重新指定的變數綁定。
functionJavaScript 函式語法：把可重複執行的步驟包成一個單位。
parameter函式參數：呼叫函式時接收外部傳入的資料。
argument函式引數：呼叫函式時實際傳入的資料。
return函式回傳語法：把計算結果交回呼叫端。
typeof型別觀察語法：讀取一個值目前的 JavaScript 型別。
Console瀏覽器 DevTools 的主控台：查看值、型別、訊息與錯誤。

先學會這些詞

先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。

本堂 17 個詞先選一組，再展開需要的名詞卡；每次只保留目前的學習焦點。

瀏覽器browser 白話意思：把檔案讀成網頁，也會執行 JavaScript。展開查看正式定義、範例與驗收證據

正式定義: 解析 HTML、CSS 與 JavaScript 並產生可操作使用者介面的軟體。
什麼時候用: 要預覽結果、點擊按鈕或觀察錯誤時。
最小範例: Chrome 開啟 files/index.html 後建立畫面與 DOM。
可觀察證據: 畫面、Elements、Console 與 Network 都能看到執行結果。
容易混淆: 和編輯器混淆；編輯器修改檔案，瀏覽器呈現結果。

開發者工具DevTools 白話意思：瀏覽器裡用來查證和除錯的工具箱。展開查看正式定義、範例與驗收證據

正式定義: 提供 Elements、Console、Network 等面板以檢查執行中頁面狀態的工具。
什麼時候用: 畫面和預期不同，或需要知道哪個檔案出錯時。
最小範例: 在頁面按右鍵選檢查，重新整理後查看 Console。
可觀察證據: 能指出錯誤訊息、檔案行號或元素目前文字。
容易混淆: 和編輯器混淆；DevTools 看到的是瀏覽器實際執行結果。

主控台Console 白話意思：可以看到 JavaScript 訊息、值與錯誤的地方。展開查看正式定義、範例與驗收證據

正式定義: DevTools 中呈現腳本輸出、例外與警告的面板。
什麼時候用: 要知道程式執行到哪裡，或檢查 typeof 與函式結果時。
最小範例: console.log(servicePrice, typeof servicePrice)
可觀察證據: 重新整理後看到預期的值、型別或錯誤行號。
容易混淆: 和畫面上的文字混淆；Console 訊息不一定會出現在畫面。

deferdefer script attribute 白話意思：先讀完 HTML，再在適當時機執行外部 JavaScript。展開查看正式定義、範例與驗收證據

正式定義: script 的 defer 屬性讓外部腳本在文件解析完成後執行，並維持文件中的腳本順序。
什麼時候用: JavaScript 需要找到 HTML 元素，又不想把 script 放到 body 最後面時。
最小範例: <script src="main.js" defer></script>
可觀察證據: 重新整理後 querySelector 找得到 #status，Console 沒有 null 錯誤。
容易混淆: 和 async 混淆；本課只使用 defer，不引入非同步載入策略。

值與型別value and type 白話意思：資料有內容，也有它屬於哪一種資料。展開查看正式定義、範例與驗收證據

正式定義: JavaScript 用型別描述值可進行的運算與行為，例如 string 與 number。
什麼時候用: 資料要顯示、計算或除錯時。
最小範例: const servicePrice = 1200；它的值是 1200，型別是 number。
可觀察證據: typeof servicePrice 顯示 number。
容易混淆: 和變數名稱混淆；變數是名字，型別是資料的種類。

字串string 白話意思：文字資料。展開查看正式定義、範例與驗收證據

正式定義: 由一串字元組成、通常以引號包住的 JavaScript 原始值。
什麼時候用: 服務名稱、提示文字或使用者輸入是文字時。
最小範例: const businessName = "安心維護"
可觀察證據: typeof businessName 顯示 string。
容易混淆: 和數字混淆；"1200" 是文字，1200 才是 number。

數字number 白話意思：可以拿來計算的數值。展開查看正式定義、範例與驗收證據

正式定義: JavaScript 用 number 表示整數與小數的數值型別。
什麼時候用: 價格、數量或時間需要計算時。
最小範例: const servicePrice = 1200
可觀察證據: typeof servicePrice 顯示 number。
容易混淆: 和帶引號的數字字串混淆。

變數variable 白話意思：替資料取一個可以重複使用的名字。展開查看正式定義、範例與驗收證據

正式定義: 以宣告語法建立識別名稱與值之間綁定的 JavaScript 機制。
什麼時候用: 同一筆資料會在函式、畫面或事件中被多次使用時。
最小範例: const businessName = "安心維護"
可觀察證據: Console 能輸出 businessName 的值。
容易混淆: 和資料本身混淆；變數是名稱，值是名稱目前指向的資料。

const 與 letconst and let 白話意思：const 通常不重新指定，let 可以重新指定。展開查看正式定義、範例與驗收證據

正式定義: 兩種 JavaScript 區域變數宣告語法；const 建立不可重新指定的綁定，let 建立可重新指定的綁定。
什麼時候用: 要決定資料是否會被重新指定時。
最小範例: const name = "安心維護"；let message = "尚未執行"；message = "已完成"
可觀察證據: 重新整理後 Console 能看到 let 的新值，錯誤時能讀到 const assignment 錯誤。
容易混淆: 和型別混淆；const／let 是宣告方式，不是 string／number 型別。

函式與呼叫function and function call 白話意思：函式把步驟包起來，呼叫才會真的執行。展開查看正式定義、範例與驗收證據

正式定義: function declaration 建立可重複執行的程式單位，function call 以名稱加括號執行它。
什麼時候用: 格式化資料或處理按鈕操作時。
最小範例: function formatService() {}；formatService()
可觀察證據: Console 只有在呼叫後才會出現函式內的訊息。
容易混淆: 和事件監聽混淆；呼叫是現在執行，監聽是等待事件發生。

參數與引數parameter and argument 白話意思：parameter 是函式接收資料的名字，argument 是呼叫時傳入的實際資料。展開查看正式定義、範例與驗收證據

正式定義: parameter 出現在函式定義，argument 出現在函式呼叫並對應到參數。
什麼時候用: 函式需要處理不同服務名稱或價格時。
最小範例: formatService(name, price) 的 name、price 是 parameter；formatService("安心維護", 1200) 的兩個值是 argument。
可觀察證據: 改變呼叫時的 argument，函式結果跟著改變。
容易混淆: 和變數混淆；parameter 只在函式介面中接收 argument。

回傳值與 undefinedreturn value and undefined 白話意思：return 把結果交回呼叫的地方；沒有 return 時結果通常是 undefined。展開查看正式定義、範例與驗收證據

正式定義: return 終止函式並將指定值交回呼叫端；undefined 表示沒有可用的值。
什麼時候用: 函式結果要被畫面、另一個函式或變數使用時。
最小範例: function formatService(name, price) { return ${name}｜${price} 元; }
可觀察證據: console.log(formatService("安心維護", 1200)) 顯示完整文字；刪掉 return 會顯示 undefined。
容易混淆: 和 console.log 混淆；console.log 只印出值，return 才把值交回呼叫端。

樣板字串template literal 白話意思：用反引號包住文字，能把變數放進 ${...}。展開查看正式定義、範例與驗收證據

正式定義: 以反引號建立、可使用插值運算式的 JavaScript 字串語法。
什麼時候用: 輸出同時包含固定文字與變數時。
最小範例: ${name}｜${price} 元
可觀察證據: 函式結果同時包含傳入的 name 與 price。
容易混淆: 和普通引號字串混淆；普通引號不會自動解析 ${...}。

DOMDocument Object Model 白話意思：瀏覽器把 HTML 變成 JavaScript 可以找到和修改的樹。展開查看正式定義、範例與驗收證據

正式定義: 代表目前文件節點與階層的程式介面。
什麼時候用: 要更新 status 或讀取按鈕時。
最小範例: document.querySelector("#status")
可觀察證據: Elements 的文字與畫面會隨 JavaScript 改變。
容易混淆: 和原始 HTML 混淆；DOM 是瀏覽器執行後的目前狀態。

選擇器與 querySelectorselector and querySelector 白話意思：選擇器描述要找誰，querySelector 依它找到第一個元素。展開查看正式定義、範例與驗收證據

正式定義: selector 是匹配元素的模式；querySelector 是依 CSS selector 查找文件節點的方法。
什麼時候用: JavaScript 要找到 action 或 status 時。
最小範例: document.querySelector("#status")
可觀察證據: 結果不是 null，且 status 文字能被更新。
容易混淆: 和 querySelectorAll 混淆；本課只先找一個元素。

textContenttextContent 白話意思：讀取或替換元素裡的純文字。展開查看正式定義、範例與驗收證據

正式定義: DOM 元素代表其文字內容的 JavaScript 屬性。
什麼時候用: 要把函式結果顯示到畫面，又不需要插入 HTML 時。
最小範例: status.textContent = 可聯絡服務：${message}
可觀察證據: 畫面與 Elements 中的 status 文字改變。
容易混淆: 和 innerHTML 混淆；textContent 只處理文字，不解析 HTML。

事件與事件監聽event and event listener 白話意思：事件是發生的事情，監聽器是事情發生後要執行的函式。展開查看正式定義、範例與驗收證據

正式定義: 瀏覽器派送互動通知，addEventListener 將 callback 註冊到事件目標。
什麼時候用: 按鈕點擊需要觸發 JavaScript 時。
最小範例: action.addEventListener("click", showResult)
可觀察證據: 點擊按鈕後 status 與 Console 出現新結果。
容易混淆: 和直接呼叫函式混淆；監聽器是在等待，不是現在立刻執行。

最小例子：先看懂，再複製

這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。

<script src="main.js" defer></script>
console.log("LESSON-14：JavaScript 已載入");

Live Lab：逐段讀碼與驗證

每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。

Step 1
開啟瀏覽器與 DevTools

目的
先建立檔案、瀏覽器與 Console 的關係，知道證據要去哪裡找。

修改位置
starter/files/index.html、starter/files/main.js
重新整理頁面，在 Console 找到 JavaScript 是否成功載入。

預期結果
畫面可開啟，Network 找到 main.js，Console 沒有載入錯誤。

驗收證據
瀏覽器畫面、Network 的 main.js、Console 的載入訊息。

卡住先查
只確認目前網址是 starter/files/index.html，且 Network 的 main.js 不是 404。
Step 2
觀察值與型別

目的
先用最小程式分辨字串、數字、變數與 typeof。

修改位置
starter/files/main.js 的 lesson-behavior-slot
加入兩個 const，並各自輸出原始值與 typeof。

預期結果
Console 分別顯示 string 與 number。

驗收證據
Console 的原始值與 typeof 結果。

卡住先查
只檢查 servicePrice 是否沒有被引號包住。
Step 3
宣告函式並觀察 undefined

目的
分辨函式宣告、呼叫、parameter、argument 與沒有 return 的結果。

修改位置
starter/files/main.js 的 formatService
建立函式骨架，傳入服務名稱與價格並觀察呼叫結果。

預期結果
函式可以被呼叫，但 Console 顯示 undefined。

驗收證據
函式宣告、函式呼叫與 Console 的 undefined。

卡住先查
只搜尋 formatService 出現的兩處：一處是宣告，一處是呼叫。
Step 4
把函式結果接回畫面

目的
用最小 DOM、事件與 textContent 讓 JavaScript 結果可見。

修改位置
starter/files/index.html、starter/files/main.js 的 showResult
點擊按鈕時呼叫 formatService，將結果寫入 #status。

預期結果
點擊後畫面可看到 undefined，這是下一步要修正的證據。

驗收證據
#action 的 click、#status 的文字與 Console。

卡住先查
只對照 #action、#status、querySelector 與 addEventListener 的字串。
Step 5
修正 return

目的
把函式計算出的文字交回呼叫端，消除 undefined。

修改位置
checkpoint/files/main.js 的 formatService
只在函式的大括號內加入 return。

預期結果
Console 與畫面都顯示安心維護｜1200 元。

驗收證據
函式內的 return、Console 結果與畫面結果。

卡住先查
只確認 return 位於 formatService 的大括號內，且沒有第二個函式外 return。
Step 6
完成瀏覽器驗收

目的
用同一條輸入、處理、輸出路徑回顧整堂課。

修改位置
solution/files/index.html、solution/files/main.js
重新整理、檢查 Console，按鈕後確認畫面文字與 Console 一致。

預期結果
Console 無錯誤，畫面顯示完整服務資訊，390px 下仍可讀且沒有水平捲軸。

驗收證據
Console、Elements、畫面按鈕結果、窄版畫面。

卡住先查
只檢查 solution/files/index.html 是否載入 solution/files/main.js，且 Console 第一個錯誤為零。

操作層級Live Lab 段落導覽：切換六個實驗步驟

讀碼順序：先找入口，再用畫面、Elements、Console 與 Network 交叉驗證；本堂特別要把函式內的 return 與按鈕後的畫面結果連起來。

互動問答

先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。

Q1概念理解「瀏覽器（browser）」在本堂要解決什麼問題？本題線索：瀏覽器；回到名詞卡與畫面、Elements、Console 與 Network 都能看到執行結果。展開解析收合解析

白話解析：

把檔案讀成網頁，也會執行 JavaScript。正式來說，解析 HTML、CSS 與 JavaScript 並產生可操作使用者介面的軟體。

對照位置：

回到名詞卡「瀏覽器」，再看畫面、Elements、Console 與 Network 都能看到執行結果。

預期觀察：

你應該能用自己的話說出：要預覽結果、點擊按鈕或觀察錯誤時。

常見錯誤：

不要只回答「它是瀏覽器」；那是重複名詞，不是說明責任。

立即驗證：

開啟 examples/minimal.html，依序做「開啟 examples/minimal.html，先觀察 Console 的型別，再按下顯示服務資訊。」並記下畫面或工具證據。

Q2程式碼閱讀修改指定規則後，你預測畫面會看到什麼？本題線索：starter/files/index.html、starter/files/main.js；要修改：重新整理頁面，在 Console 找到 JavaScript 是否成功載入。；觀察：瀏覽器畫面、Network 的 main.js、Console 的載入訊息。展開解析收合解析

白話解析：

先看檔案責任，再預測結果。這一步的目的：先建立檔案、瀏覽器與 Console 的關係，知道證據要去哪裡找。

對照位置：

對照 Live Lab Step 1，位置是 starter/files/index.html、starter/files/main.js；範例內容：<script src="main.js" defer></script> console.log("LESSON-14：JavaScript 已載入");

預期觀察：

畫面可開啟，Network 找到 main.js，Console 沒有載入錯誤。

常見錯誤：

如果只改了檔案但沒有結果，先不要重寫全部；只確認目前網址是 starter/files/index.html，且 Network 的 main.js 不是 404。

立即驗證：

實際操作後檢查瀏覽器畫面、Network 的 main.js、Console 的載入訊息。。

Q3概念比較「瀏覽器」和「開發者工具」在本堂的責任有什麼不同？本題線索：比較瀏覽器與開發者工具；操作位置：starter/files/main.js 的 lesson-behavior-slot 展開解析收合解析

白話解析：

瀏覽器：把檔案讀成網頁，也會執行 JavaScript。；開發者工具：瀏覽器裡用來查證和除錯的工具箱。

對照位置：

對照兩張名詞卡的正式定義：解析 HTML、CSS 與 JavaScript 並產生可操作使用者介面的軟體。／提供 Elements、Console、Network 等面板以檢查執行中頁面狀態的工具。

預期觀察：

你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。

常見錯誤：

不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。

立即驗證：

在 starter/files/main.js 的 lesson-behavior-slot 做「加入兩個 const，並各自輸出原始值與 typeof。」，再用 Console 的原始值與 typeof 結果。比較前後差異。

Q4除錯驗收如果完成操作後結果不對，你會先從哪一個證據開始查？本題線索：solution/files/index.html、solution/files/main.js；第一個檢查位置：Console、Elements、畫面按鈕結果、窄版畫面。展開解析收合解析

白話解析：

先描述症狀，再提出一個最小假設。本堂常見錯誤是：只看程式碼不操作頁面，或把 Console 的成功當成畫面一定成功。

對照位置：

對照最後一段 Live Lab：solution/files/index.html、solution/files/main.js；檢查方式：只檢查 solution/files/index.html 是否載入 solution/files/main.js，且 Console 第一個錯誤為零。

預期觀察：

你要能指出一個具體位置，而不是一次修改很多檔案。

常見錯誤：

不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。

立即驗證：

重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。

常見誤解

看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
本堂只使用原生 HTML、CSS、JavaScript 與瀏覽器 DevTools；陣列、物件、非同步、框架、npm、API 與部署都延後。

本堂任務與驗收

完成一個能把服務名稱與價格格式化成「安心維護｜1200 元」的函式，並能說明參數、引數與回傳值各自負責什麼。

能用瀏覽器與 DevTools 位置留下可重現證據。
能用 Console 的 typeof 留下可重現證據。
能用函式宣告與呼叫留下可重現證據。
能用 undefined 重現與修正留下可重現證據。
能用按鈕後畫面結果留下可重現證據。
Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
遇到問題時能先寫出症狀，再檢查一個最小假設。

JavaScript 基礎語法

先理解：這堂課解決什麼問題？

第一次上課環境：先認識四個觀察位置

先做最小實驗：先看見結果

學生練習流程

先做最小實驗

補齊必要名詞

完成 Starter

觀察 Checkpoint

對照 Solution

完成變體與驗收

檔案地圖：每個位置負責什麼？

先學會這些詞

最小例子：先看懂，再複製

Live Lab：逐段讀碼與驗證

開啟瀏覽器與 DevTools

觀察值與型別

宣告函式並觀察 undefined

把函式結果接回畫面

修正 return

完成瀏覽器驗收

互動問答

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

常見誤解

本堂任務與驗收

官方延伸閱讀

修正 `return`