第 1 課：認識 JavaScript 與執行環境

課程摘要：本課將帶你了解什麼是 JavaScript、它在網頁中的角色，以及如何在瀏覽器與編輯器中執行第一段程式。

基本資訊

• 難度：初階
• 預估時間：15 分鐘
• 先修需求：無
• 關鍵字：JavaScript, Browser, Console, Script Tag

學習目標

1. 理解 JavaScript 的用途與在前端中的角色。
2. 能區分 HTML、CSS、JavaScript 三者的功能。
3. 能在瀏覽器開發者工具中執行簡單的 JS 程式。

課程大綱

• 什麼是 JavaScript？
• 瀏覽器中的執行環境
• 開發者工具 Console 練習
• 第一段 JavaScript 程式

核心概念解說

JavaScript 是讓網頁「動起來」的語言。它負責處理使用者互動、資料運算以及網頁邏輯控制。 HTML 決定內容，CSS 決定外觀，而 JavaScript 決定行為。

<script>
  console.log("Hello, JavaScript!");
</script>
  

常見誤解 / 雷點

• ❌ 以為 JS 是 Java（其實完全不同的語言）。
• ❌ 忘了開啟 Console 就以為程式沒執行。
• ✅ 正確方式：在瀏覽器 Console 檢查輸出。

互動式範例

範例說明：請在下方輸入代碼並執行，觀察輸出結果。

常見錯誤與除錯指南

• SyntaxError: 缺少分號或括號未關閉。
• ReferenceError: 呼叫未宣告的變數。
• 解法：使用 Console 中的行號查看錯誤位置。

最佳實務 / 風格建議

• 使用 const / let 取代 var。
• 命名需有意義，例如：userName 而非 x。
• 保持縮排與註解清晰，便於閱讀。

名詞解釋

• Console：瀏覽器的開發者工具，可輸出程式執行結果。
• Script：指在 HTML 中執行的 JavaScript 區塊。

結語

恭喜你完成第一課！你已經能執行第一段 JavaScript 程式。接下來，我們將探索變數與資料型態。