JavaScript ES6 邁向前端工程師之路

JavaScript ES6 前端教學課程 - 課程大綱

老師會因應職場的需求變化，做課程內容和範例的即時調整與修改，確保本課程的實用性和即時性。

【教學主題一】前端工程師 Front-End Engineer ( F2E )

• 網頁工程的演化
• 什麼是「前端」
• 前端工程師的價值與高發展性
• 前端工程師的職場日常

• 前端工程師的學習地圖
• javascript 橫跨網頁、手機、桌面程式
• 火力展示 - javascript 可以很有趣
• 新一代 JavaScript 語法

【教學主題二】JavaScript ES6

• const / let 宣告變數的新方法
• 箭頭函式 (arrow function)
• 函式的預設參數 (default parameter)
• 函式的其餘參數 (rest parameter)
• 其餘運算子 (rest operator)

• 展開運算子 (spread operator)
• 字串模板 (string template)
• 解構賦值 (destructuring assignment)
• 類別 (class)
• ES 2016、ES 2017、ES 2018...

【教學主題三】Javascript 資料型態與運算子

• 基本型別 - number、boolean、string、null、undefined
• 物件型別 - Object、Array、Function
• 「傳值」與「傳址」
• 弱型別與強型別語言

• 判斷變數的資料型別
• 資料比較與資料轉型規則
• null、undefined、NaN 的差別
• 運算子超載 (overloading)

【教學主題四】開發人員工具

• 什麼是開發人員工具
• Elements HTML與CSS元素編輯
• Network 網路狀態監控
• Console 主控台操作技巧

• Sources 程式碼偵錯
• Application 應用程式資料儲存資訊
• 用滑鼠查看畫面上元素
• 模擬手機、平板、RWD 效果

【教學主題五】 BOM DOM 事件處理與 Function

• 什麼是 Function
• Function 初始化的方式
• Function 的優缺點
• 回呼函式 (Callback Function) 的作用
• DOM 事件傳遞機制
• DOM 事件的生命週期
• DOM 事件的「捕獲」與「冒泡」

• 什麼是 BOM 什麼是 DOM
• DOM 事件傳遞機制
• DOM 事件的生命週期
• DOM 事件的「捕獲」與「冒泡」
• 了解作用域 (Scope)
• 使用 IIFE 切割作用域

【教學主題六】 Array 陣列的操作與應用

• 宣告 Array 陣列
• Array 陣列基礎組成結構
• Array 陣列索引數介紹
• Array 陣列資料存取方式

• Array 陣列索引數外存取
• Array 陣列篩選操作應用
• Array 陣列排序操作應用
• Array 陣列分頁操作應用

【教學主題七】AJAX 動態載入 API 與 JSON 資料結構

• 什麼是 AJAX
• AJAX 與現代網頁 SPA (Single Page Application)
• 同步與非同步的差異
• AJAX 的優缺點

• 什麼是 API
• 如何存取與使用 API
• JSON 資料結構
• 使用 Fetch 實作 AJAX

【教學主題八】 前端周邊工具

• Node.js 開發環境介紹
• NPM 套件管理工具
• 什麼是 GIT
• 設定 GIT 專案

• Init - 設定 GIT 專案
• Commit - 提交程式碼
• Remote - 遠端操作
• Branch - 使用分支

【教學主題九】前端下一步

• 我會 jQuery 夠了嗎?
• 前端框架淺談
• 使用前端框架的原因
• 各種前端框架淺談

• 如何準備前端工程師作品集
• 前端工程師面試重點
• 用工程師的角度與面試官應對進退
• javascript 面試題方向與範例