課程介紹

一次掌握前端開發必備技術，升級你的專業 Web 能力！

前端技術日新月異，JavaScript 是所有網頁互動的核心，而 TypeScript 已成為企業前端專案的主流選擇。
本課程帶你從最常用的 JavaScript 語法開始，逐步升級到強型別與大型專案必備的 TypeScript，完整建立現代前端開發的程式基礎。

不論你是初學者、轉職工程師，或是希望提升前端技術的在職人員，本課程都能幫助你快速掌握前端開發邏輯、寫法、工具與實務技巧，打造可直接展現於作品集的成果。

課程目標

• 熟悉 JavaScript 語法並能開發互動式網頁功能
• 理解 TypeScript 型別系統並在專案中運用
• 能獨立建立前端開發環境並完成編譯/打包流程
• 撰寫更安全、可維護、企業友好的前端程式碼
• 產出可用於履歷的 Web 前端作品成果

適合對象

• 想進入前端 / 全端工程領域的初學者
• 已懂一點 JS 想升級為 TS 與企業級專案實務的人員
• 想打造互動式網頁、SPA、或前端作品集者
• 未來希望銜接 React / Vue / Angular 的學習者

先備知識

• 基礎電腦操作能力
• 一顆充滿好奇與願意動手的心

課程特色

• **雙技術一次打包！**完整學會 JavaScript → TypeScript
• 大量實作演練與情境練習
• 以專案思維導入強型別概念，降低犯錯率
• 學會前端必備工具：NPM、ES Modules、Vite 入門
• 真正可放作品集的小專案成果

課程大綱

Module 1｜JavaScript 基礎入門

• JavaScript 執行環境與基礎語法
• 變數、資料型別、運算子
• 條件判斷、迴圈、陣列與物件操作
• 函式、箭頭函式
• DOM 互動：改變畫面、事件處理

Module 2｜JavaScript 進階與實務技巧

• Scope、Hoisting、Closure
• 陣列高階方法（map / filter / reduce）
• 非同步程式：Promise、async/await
• 模組化與程式結構化設計

Module 3｜從 JS 邁向 TS：TypeScript 核心概念

• 為什麼企業大量使用 TypeScript？
• 型別系統（string、number、boolean、array、tuple、enum…）
• Union、Literal、any、unknown、never
• 函式型別、介面（interface）
• 類別（class）與物件導向在 TS 的應用

Module 4｜TypeScript 開發與編譯工具鏈

• tsconfig 設定與編譯流程
• ES Modules 與 NPM 介紹
• Webpack / Vite 基礎整合
• 型別提示（type hints）與程式品質提升技巧

Module 5｜前端實務專案開發

• 使用 TS 開發互動式網頁功能
• 表單驗證、資料處理
• 與 API 串接示範
• 打包、發布與專案最佳化