JavaScript 編程課程

實體編程教學課程內容

課程簡介

本課程旨在於三小時內協助學員快速掌握 JavaScript 編程基礎。JavaScript 是現今最廣泛使用的網頁與應用開發語言之一，可用於前端互動設計、後端伺服器開發（Node.js），甚至資料處理與人工智慧應用。

課程從基本語法與運作原理開始，教授變數、函式、流程控制與事件的使用方法，並透過實際網頁範例學習互動式功能的開發。學員將在短時間內理解程式結構與前端邏輯的核心理念，為日後進階學習（如 Vue.js、React、Node.js 或 Web App 開發）建立穩固基礎。

課程目標

1. 建立學員對 JavaScript 語言的基本認識與應用概念。

2. 能理解並撰寫 JavaScript 的基本語法、流程控制與函式。

3. 學會操作 HTML 元素與事件，實現簡單的網頁互動行為。

4. 熟悉瀏覽器主控台、除錯工具及程式運作流程。

5. 為前端、後端或全端開發進階課程做好基礎準備。

授課對象

• 無程式基礎但希望學習前端開發的初學者。

• 設計師、行銷人員、學生或有志轉職網頁開發者。

• 希望為學習 React、Vue、Node.js 等框架打好基礎者。

• 程式入門培訓課程或企業內部技術基礎課程對象。

課程大綱

第一部分：JavaScript 基礎概念與執行環境（約 40 分鐘）

• JavaScript 語言背景與應用範圍。

• JavaScript、HTML、CSS 的關係與互動模式。

• 程式執行環境與工具介紹（Browser Console、VS Code）。

• 第一個 JavaScript 範例：「Hello World」輸出實作。

• Console、alert、document.write 的使用。

第二部分：變數、資料型態與流程控制（約 60 分鐘）

• 變數宣告：var、let、const 的差異。

• 常用資料型態（Number、String、Boolean、Array、Object）。

• 運算子與條件判斷（if/else、switch）。

• 迴圈控制（for、while、forEach）。

• 實作練習：製作九九乘法表或簡易條件判斷程式。

第三部分：函式與事件操作（約 45 分鐘）

• 函式定義與呼叫（Function Declaration / Expression / Arrow Function）。

• 參數傳遞與回傳值說明。

• 瀏覽器事件介紹（onClick、onChange、onMouseOver 等）。

• 實作練習：透過按鈕觸發函式修改網頁文字顯示。

第四部分：DOM 操作與互動設計（約 35 分鐘）

• 了解 DOM（Document Object Model）的結構。

• 使用 JavaScript 存取與修改 HTML 元素（getElementById / querySelector）。

• 動態修改內容與樣式（innerHTML / style）。

• 簡易互動應用實作：表單驗證或倒數計時器範例。

• 延伸應用：前端互動設計與框架開發方向（React、Vue、Node.js）。

課程特色

• 三小時快速入門設計，聚焦 JavaScript 最核心概念。

• 理論與實作並重，適合零基礎學員。

• 課程以互動與應用為導向，強化學習動機。

• 完成後可銜接進階課程，如前端框架開發、全端應用或 API 整合。