104學習精靈

► 能夠掌握如何在網頁上設計互動性網頁動畫效果 ► 有辦法輕易整合別人寫好的第三方動畫插件，並套用在自己的網頁上 ► 有能力評估別人的網站究竟是用了哪些插件來設計網頁動畫效果 ► 當 jQuery 程式碼變多時，也能夠有條理地進行維護整理

Desktop Application及Install Wizard 將漸漸消失!Web APP程式開發將成為應用程式開發主流，未來任何東西都會在網路上，而未來所有的軟體程式都將用瀏覽器來執行 瀏覽器的能力將會愈來愈強，別停留在Web不就是個人網頁而已，...No! 那是20年以前的狀況。未來Web APP程式開發將成為應用程式開發主流，未來任何東西都會在網路上，應用程式也幾乎依賴瀏覽器來執行！換言之，瀏覽器就可以跑任何應用程式，開發者不須再各別為Windows、Linux、MacOS、 Android APP、iPhone等平台寫程式了。真的寫不完，不要說寫連維護都很難，因為沒有這麼多資源，可以養這麼多人去維護這麼多平台的程式碼。當然，可以找一個可以精通兩個平台以上的工程師，但實在太少了。瀏覽器的功能會逐漸增強，用AJAX, WebSocket(一種TCP Socket) 就能用瀏覽器進行雙向多工通訊，透過Canvas就可以在瀏覽器進行2D/3D繪圖，這些都是瀏覽器功能不斷演進才有的面貌。 [100%實作導向] 在每一個技術除了給你最清楚的觀念外，都有講師設計好準備讓你融會貫通的範例程式，讓你快速進行演練。課程不囉嗦! 強調動手實戰。 [名師醍醐灌頂] 對於初學者一開始想要進入Web APP開發領域，通常會發現，這個領域技術推進的步調很快且技術間盤根錯節! 艾鍗師資最厲害的地方就是，很複雜的東西可以講得很簡單，一針見血把技術精髓道盡! 要快速掌握Web程式精髓，唯有觀念清楚，才能快速開發，不得其要領，將曠日費時。 學習目標 1. 清楚了解Web前後端架構與DOM架構。 2. 精通JavaScript 程式語言與除錯方法。 3. 學會用JQuery操作HTML、CSS及FORM表單處理。 4. 掌握Node.js 處理異步、單執行緒與非阻塞I/O等關鍵技術。 5. 學會AJAX 及Webscoket的Web通訊方法。 6. 會用Express為Web和移動應用程序提供強大功能。 7. 會使用HTML模板引擎讓開發事半功倍。 8. 學會使用MongoDB資料庫進行資料的新增、更新、刪除、查詢動作。 章節架構 第一階段：Web 前端程式設計-JavaScript & JQuery ★ Web基礎概念 1. Web 技術前端技術架構與DOM架構簡介 2. HTML 簡介與Tag 概念 3. CSS 簡介與Style 屬性 ★ JavaScript 程式語言 1. 關於JavaScript 2. 開發方式與除錯方法 3. JavaScript 操作HTML DOM & Browser Object Model 4. JavaScript 變數 & 基本資料型態 5. JavaScript運算式與運算子 6. JavaScript物件 型態 7. JavaScript陣列 型態 8. JavaScript函式 1) call by value & call by reference式 2) Self-Invoking Functions 3) Nested Function 4) Function Closures 1. JavaScript 數值處理與型別轉換 2. JavaScript Array Methods 1) push , pop, split, map 1. JavaScript Timing Events 2. JavaScript類別定義 (Object with property and method) 3. JSON資料格式與處理 4. Image Map ★ 使用JQuery 1. JQuery簡介 2. JavaScript vs JQuery 3. JQuery selectors 4. JQuery操作HTML DOM 5. JQuery操作CSS 6. JQuery Form表單處理 7. HTTP GET vs HTTP POST 8. JQuery AJAX 第二階段：Web 後端程式開發-Node.js ★ 關於Node.js 1. 非同步式 I/O 與事件式程式設計 2. 安裝Node.js 3. Node Package Manage: 使用npm 4. 製作package.json 5. 我的第一個node.js "Hello world" ★ Node.js HTTP 請求與回應 1. Node.js 處理HTTP Get & Post 2. Express HTTP Server提供靜態檔案 3. 用Express處理HTTP Get & Post ★ Node.js 其他模組 1. Child Process Module 2. File System Module 3. Net Module-Socket 網路通訊 ★ HTML Template Engine 1. Why use Template Engine ? 2. Handlebars.js Template Engine 3. Handlebars.js 的運作流程說明 4. Client Side HTML範本引擎 (Template Engine) 5. 實驗 Handlebars.js ★ The WebSocket Protocol 1. 各種Web 通訊方法 2. Long Polling技術 3. Lab:實驗: Websocket 前後端通訊 4. Lab:實驗: 建立多人聊天室 ★ MongoDB 1. MongoDB 簡介與使用 2. Node.js 操作MongoDB 3. Lab實驗: 使用Node.js 進行新增/查詢/更新/刪除 MongoDB ★ Node.js Serial 序列資料讀取 1. Node.js 讀取micro:bit 資料使用序列界面 2. Canvas.js 動態折線圖結 3. Lab實驗: 使用瀏覽器顯示Micro:bit狀態(A,B按鍵與加速度計值)