JavaScript 線上編程課程教學影片

編程線上教學課程內容

課程簡介

這堂課程為想入門前端開發或了解網站互動邏輯的學員設計。透過一小時的精華內容，快速學會 JavaScript 的核心語法、資料處理、條件控制及動態網頁操作。課程整合理論與實戰，從基礎語法到 DOM 操作，讓初學者能在短時間內完成互動式小專案。

 

適合對象：

• 想入門網頁設計與前端程式開發的初學者

• 有 HTML/CSS 基礎但想掌握互動邏輯的學員

• 想快速理解 JavaScript 基本結構與應用者

---

 

一小時課程大綱

第一章：課程導入與基礎概念（約 5 分鐘）

• 什麼是 JavaScript：網頁的互動大腦

• 前端三要素：HTML、CSS、JavaScript 的關係

• 環境介紹與示範（瀏覽器開發者工具、VS Code）

• 第一個程式：「Hello, JavaScript!」

第二章：JavaScript 語法基礎（約 15 分鐘）

• 變數宣告與資料型態（var、let、const、number、string、boolean）

• 基本運算（算術、比較、邏輯運算子）

• 字串與數值操作常見技巧

• 輸入與輸出：alert()、console.log()、prompt()

• 小練習：輸入名字並動態顯示問候語

第三章：流程控制與函式（約 10 分鐘）

• 條件判斷：if、else if、switch

• 迴圈控制：for、while、break、continue

• 函式定義與參數、回傳值 (function 的應用)

• 範例實作：設計一個簡易成績判斷程式

第四章：陣列與物件（約 10 分鐘）

• 陣列建立、取值與常見方法（push、pop、length）

• 物件結構與屬性操作（key-value 形式）

• 實作：建立學生資料陣列，計算平均成績與最高分

第五章：DOM 操作入門（約 10 分鐘）

• 什麼是 DOM（Document Object Model）

• 選取與操作 HTML 元素：document.getElementById()、querySelector()

• 事件綁定與互動反應（onclick、addEventListener）

• 範例：建立互動式按鈕，點擊後改變文字或顏色

第六章：迷你專案實作（約 10 分鐘）

• 專案主題：網頁隨機語錄顯示器

  • 建立按鈕與文字區塊

  • 使用陣列儲存多條語錄

  • 按下按鈕隨機顯示不同文字

• 展示整體效果與除錯教學

---

第七章：延伸應用與課程總結（約 5 分鐘）

• 下一步學習建議：ES6 語法、事件處理、非同步程式（fetch、async/await）

• 延伸應用方向：前端框架（React、Vue）、Node.js 後端開發

• 提供額外線上資源與社群建議