♦ 本課程另有數位版本，歡迎洽詢

關鍵字：Web前端、Web後端、Web全端、 Node.js、javaScript、 JQuery、 FORM表單處理、HTML、DOM、CSS 、MongoDB、Webscoket、Express、非阻塞I/O等關鍵技術

• 讓您清楚了解Web前後端架構與技術分野。。
• 讓您精通JavaScript 程式語言與除錯方法。
• 讓您學會用JQuery操作HTML、DOM、CSS、FORM表單處理。
• 讓您掌握Node.js 處理異步、單執行緒與非阻塞I/O等關鍵技術。
• 讓您學會AJAX 及Webscoket的Web通訊方法。
• 教您用Express為Web和移動應用程序提供強大功能。
• 教您如何用HTML Template Engine讓開發事半功倍。
• 讓您學會MongoDB資料庫應用。

• 前(後)端工程師，想了解後(前)端技術。
• 想快速學習Web Front End及Backend的技術。
• 對JavaScript & Node.js相關開發有興趣。
• 有程式基礎，想朝網站設計領域發展者。
• 想朝Web APP應用程式設計開發者。
• ※本課程另有數位版本可選擇

第一階段:Web 前端程式設計-JavaScript & JQuery

• Web基礎概念

  • Web 技術前端技術架構簡介
  • HTML 簡介與Tag 概念
  • CSS 簡介與Style 屬性

• JavaScript 程式語言

  • 關於JavaScript
  • 開發方式與除錯方法
  • JavaScript 操作HTML DOM & Browser Object Model
  • JavaScript 變數 & 基本資料型態
  • JavaScript運算式與運算子
  • JavaScript物件 型態
  • JavaScript陣列 型態
  • JavaScript函式
    • call by value & call by reference式
    • Self-Invoking Functions
    • Nested Function
    • Function Closures
  • JavaScript 數值處理與型別轉換
  • JavaScript Array Methods
    • push , pop, split, map
  • JavaScript Timing Events
  • JavaScript類別定義 (Object with property and method)
  • JSON資料格式與處理
  • Image Map

• 使用JQuery

  • JQuery簡介
  • JavaScript vs JQuery
  • JQuery selectors
  • JQuery操作HTML DOM
  • JQuery操作CSS
  • JQuery Form表單處理
  • HTTP GET vs HTTP POST
  • JQuery AJAX

第二階段:Web 後端程式開發-Node.js

• 關於Node.js

  • 非同步式 I/O 與事件式程式設計
  • 安裝Node.js
  • Node Package Manage-npm
  • 製作package.json
  • 我的第一個node.js "Hello world"

• Node.js HTTP 請求與回應

  • Node.js 處理HTTP Get & Post
  • Express HTTP Server提供靜態檔案
  • 用Express處理HTTP Get & Post

• Node.js 其他模組

  • Child Process Module
  • File System Module
  • Net Module-Socket 網路通訊

• HTML Template Engine

  • Why use Template Engine ?
  • Handlebars.js Template Engine
  • Handlebars.js 的運作流程說
  明
  • Client Side HTML範本引擎 (Template Engine)
  • 實驗 Handlebars.js

• The WebSocket Protocol

  • 各種Web 通訊方法
  • Long Polling技術
  • Lab:實驗: Websocket 前後端通訊
  • Lab:實驗: 建立多人聊天室

• MongoDB

  • MongoDB 簡介與使用
  • Node.js 操作MongoDB
  • Lab實驗: 使用Node.js 進行新增/查詢/更新/刪除 MongoDB

• Node.js Serial 序列資料讀取

  • Node.js 讀取Micro:bit 資料使用序列界面
  • Canvas.js 動態折線圖結
  • Lab實驗: 使用瀏覽器顯示Micro:bit狀態(A,B按鍵與加速度計值)