付款。推介服務：課堂錄影隨時睇
(在家觀看 = 0%，在校觀看 = 100%)
(在家觀看 = 0%，在校觀看 = 100%)
100% 在校觀看日期及時間：
自由選擇，點選以下地區觀看辦公時間及位置
不限：$1,980 (地點沒有限制)報名
課時： 12 小時
享用時期： 報讀日至 4 星期內，進度由您控制，可快可慢。
課堂錄影導師：Franco
在校免費試睇：首 1 小時，請致電以上地點與本中心職員預約。
本課程提供在校免費重睇及導師解答服務。
推介服務：課堂錄影隨時睇
(在家觀看 = 100%，在校觀看 = 0%)
(在家觀看 = 100%，在校觀看 = 0%)
100% 在家觀看日期及時間：
每天 24 小時全天候不限次數地觀看
學費：$1,980 報名 phone
電話：2332-6544
課時： 12 小時
享用時期： 報讀日至 4 星期內，進度由您控制，可快可慢。
課堂錄影導師：Franco
在校免費試睇：首 1 小時，請致電以上地點與本中心職員預約。
本課程提供導師解答服務。
JavaScript，一個多年前我們已經聽過、學過、用過的語言。多年前的 JavaScript主要用途大多是檢驗頁面輸入數據是否正確、有錯誤的時候會彈出警告窗口，功能相當有限。
早年，Google 推出了具 AJAX 技術的 Gmail 服務，那無需刷新 (refresh) 的用戶體驗引起不少人注意。而 AJAX 的操作核心就是 JavaScript。此後，JavaScript 在前端 (front end) 開發的角色漸漸穩固。之後，基於 Google V8 JS 引擎的 Node.js 出現了，這意味著 JavaScript 進軍前端開發之外的領域，例如伺服器端 (server side) 等，這令我們不得不重新接觸 JavaScript，它可以做的比以往的 JavaScript 多。
這幾年間，JavaScript 的發展相當蓬勃，基於 JavaScript 的開發框架 (frameworks) 也有不少。AngularJS 是現今相當流行並得到不少開發人員注視的 Superheroic JavaScript MVW (Model View Whatever, Whatever 一般理解為 whatever works for you) Framework。它令開發人員輕易實踐 MVC (Model View Controller)、雙向資料繫結 (Two Way Data-Binding)、相依性注入 (Dependency Injection) 等概念，將 JavaScript 的應用推向另一個層次。
《Object-oriented JavaScript 與 AngularJS 綜合課程》 是一個全面的 JavaScript 課程。在課程的初段導師會扼要地為大家溫習 JavaScript 基本語法 (如 var、if else、loop、array、string to number、日期時間處理、Math 物件、例外處理、DOM [Document Object Model]、BOM [Browser Object Model] 等)，然後詳細教授如何在 JavaScript 上實踐物件導向概念，並會教授 JavaScript 一些比較重要的概念如 functions as / are data、JSON 處理、事件處理等課題。完成物件導向式 JavaScript 後就會開始教授 AngularJS 從而實踐 MVC (Model View Controller)、雙向資料繫結 (Two Way Data-Binding)、相依性注入 (Dependency Injection) 等概念。
| 課程名稱： |
Object-oriented JavaScript 與 AngularJS 綜合課程 - 簡稱：Object-oriented JavaScript Training Course |
| 課程時數： | 12 小時 (共 4 堂) |
| 適合人士： | 對 JavaScript、AngularJS、Object-oriented JavaScript 有興趣的人士。 |
| 授課語言： | 以廣東話為主，輔以英語 |
| 課程筆記： | 本中心導師親自編寫中文為主筆記，而部份中文字附有英文對照。 |
|
課程名稱：Object-oriented JavaScript 與 AngularJS 綜合課程 - 簡稱：Object-oriented JavaScript Training Course |
1 事前準備
2 安裝編寫及執行 JavaScript 及 AngularJS 軟件的環境
2.1 安裝編寫 JavaScript 及 AngularJS 的軟件
2.2 執行編寫 JavaScript 及 AngularJS 的軟件
2.2.1 開啟編寫JavaScript 及 AngularJS 的軟件
2.2.2 Start Page
2.2.3 Projects / Files
2.2.4 Window
2.2.5 整理格式
2.2.6 還原視窗
2.2.7 還原 Toolbars
2.2.8 顯示行號
2.3 建立第一個 Project
3 JavaScript 語言
3.1 Comments (註釋)
3.1.1 實習：Single line comments (單行註釋)
3.1.2 實習：Multi-line comments (多行註釋)
3.2 Variables (變數)
3.2.1 變數的名稱
3.2.2 宣告變數的語法
3.2.3 實習：變數的特性：變
3.2.4 變數的有效範圍
3.2.4.1 實習1
3.2.4.2 實習2
3.3 Primitive data types
3.3.1 Number
3.3.1.1 實習：Number
3.3.2 Boolean
3.3.2.1 實習：Boolean
3.3.3 Null
3.3.4 Undefined
3.3.5 String
3.3.5.1 刪去左右兩邊多餘的空白字元
3.3.5.1.1 實習：未處理兩邊多餘的空白字元前
3.3.5.1.2 實習：處理兩邊多餘的空白字元後
3.3.5.2 字元的小寫和大寫
3.3.5.2.1 實習：字元的小寫和大寫
3.3.5.3 字串分割
3.3.5.3.1 實習：字串分割
3.3.5.4 比較兩個字串的值是否相同
3.3.5.4.1 實習： string == string / string === string
3.3.5.4.2 實習： number == string / number === string
3.3.5.5 檢查開始字串
3.3.5.5.1 實習：檢查開始字串
3.3.5.6 檢查結束字串
3.3.5.6.1 實習：檢查結束字串
3.3.6 Regular expression / Regex (正規表示式)
3.3.6.1 RegExp 物件
3.3.6.1.1 實習：RegExp 物件
3.3.6.2 Modifiers
3.3.6.2.1 實習：Modifiers
3.3.6.3 Brackets
3.3.6.3.1 實習：Brackets
3.3.6.4 Metacharacters
3.3.6.4.1 實習：Metacharacters
3.3.6.5 Quantifiers
3.3.6.5.1 實習：Quantifiers
3.3.6.6 綜合實習：刪去文字間多餘的空白字元
3.3.6.7 綜合實習：處理特殊字元
3.4 Flow Control (流程控制)
3.4.1 If
3.4.1.1 實習：If (第一部份)
3.4.1.2 實習：If (第二部份)
3.4.2 Switch case
3.4.2.1 句法
3.4.2.2 實習：Switch case
3.4.3 While loop
3.4.3.1 語法
3.4.3.2 實習：While loop
3.4.4 For loop
3.4.4.1 句法
3.4.4.2 實習：For loop (第一部份)
3.4.4.3 實習：For loop (第二部份)
3.4.5 Break 與 continue
3.4.5.1 實習：Break
3.4.5.2 實習：Continue
3.5 Operators (運算子)
3.5.1 Arithmetic Operators (算術運算子)
3.5.1.1 實習：Arithmetic Operators (算術運算子)
3.5.2 Assignment Operators (指定運算子)
3.5.2.1 實習：Assignment Operators (指定運算子)
3.5.3 Conditional Operators (條件運算子)
3.5.3.1 實習：Conditional Operators (條件運算子)
3.5.4 i++ vs ++i 與 i-- vs --i
3.5.4.1 實習：i++ vs ++i 與 i-- vs –i
3.6 String to Number
3.6.1 實習：String to Number
3.7 Array (陣列)
3.7.1 實習：建立 Array (陣列) [第一部份]
3.7.2 實習：建立 Array (陣列) [第二部份]
3.7.3 實習：Push 與 pop
3.7.4 實習：Join
3.7.5 實習：顯示 Array (陣列) 內所有的值
3.7.6 實習：顯示 regular expression 所 match 中的值
3.7.7 實習：搜尋Array (陣列) 內的值
3.7.8 實習：刪除 Array (陣列) 中間 (不是最前及最後) 的值
3.7.9 實習：Array (陣列) 排序 (預設的排序)
3.7.10 實習：Array (陣列) 排序 (自訂的排序)
3.7.11 實習：Array (陣列) 次序倒轉
3.8 Function (函式)
3.8.1 實習：建立及執行不具參數的 Function (函式)
3.8.2 實習：建立及執行具參數的 Function (函式)
3.8.3 實習：return
3.8.4 實習：Anonymous functions
3.8.5 實習：Callback functions
3.8.6 實習：Immediate functions
3.8.7 實習：Inner / private functions
3.9 Math 物件
3.9.1 實習：Round, Floor 和Ceil
3.9.2 實習：隨機數
3.10 日時與時間
3.10.1 實習：取得現在的日期和時間
3.10.2 實習：取得用戶環境的時區 / GMT offset
3.10.3 實習：建立本地日期時間
3.10.4 實習：建立格林威治標準日期時間
3.10.5 實習：顯示現在的年、月、日、時、分、秒、星期?
3.10.6 實習：加減日期時間
3.10.7 實習：計算兩個時間的差距
3.11 純 JavaScript (無需 PHP, JSP, etc.) 的 “Cookie” 和 “Session”
3.11.1 “Cookie”
3.11.1.1 實習：“Cookie”
3.11.2 “Session”
3.11.2.1 實習：“Session”
3.12 DOM (Document Object Model)
3.12.1 實習：取得一個 element
3.12.2 實習：取得多個 elements (Tags)
3.12.3 實習：取得多個 elements (Classes)
3.12.4 實習：修改CSS
3.12.5 實習：修改 attributes
3.12.6 實習：建立 element 及其 attributes 並新增到網頁中
3.12.7 實習：刪除 element 與 query selector
3.13 DOM Events
3.13.1 實習：直接在 element 上新增 DOM events (不使用函式)
3.13.2 實習：直接在 element 上新增 DOM events (使用函式) 與 this
3.13.3 實習：addEventListener：click
3.13.4 實習：addEventListener：KeyboardEvent
3.13.5 實習：addEventListener：MouseEvent
3.14 BOM (Browser Object Model)
3.14.1 實習：取得 language、platform、userAgent 和 vendor 等資料
3.14.2 實習：取得 host, hostname, href, pathname 和 port 等資料
3.14.3 實習：前往其他網站
3.14.4 實習：取得 Color depth, width, height 等資料
3.14.5 實習：OK / Cancel 方塊
3.14.6 實習：輸入方塊
3.14.7 實習：Timing event
4 JavaScript 的物件導向技術
4.1 實習：建立物件
4.2 實習：物件內的物件
4.3 實習：物件內的函式 (不使用 this)
4.4 實習：物件內的函式 (使用 this)
4.5 Constructor (建構子)
4.5.1 Classes and objects (類別和物件)
4.5.2 Java 的簡單例子
4.5.2.1 Classes (類別)
4.5.2.2 Objects (物件)
4.5.2.3 Constructor (建構子)
4.5.2.3.1 建立建構子
4.5.2.3.2 使用建構子
4.5.3 Constructor (建構子) in JavaScript
4.5.3.1 實習：Constructor (建構子) in JavaScript
4.5.3.2 實習：Constructor (建構子) in JavaScript：Arguments as objects
4.6 Object Arrays (物件陣列)
4.6.1 實習：建立儲存物件的陣列
4.6.2 實習：在儲存物件的陣列內進行自訂排序 (例如按產品價格排序)
4.6.3 實習：在儲存物件的陣列內進行過濾 (例如過濾太貴的產品)
4.7 Prototype, inheritance (繼承) 與 override (重新定義)
4.7.1 Prototype
4.7.1.1 實習：String 的 prototype
4.7.1.2 實習：Number 的 prototype
4.7.1.3 實習：Array 的 prototype
4.7.1.4 實習：自訂物件的 prototype
4.7.1.5 實習：新增 properties 和 methods 到 prototype
4.7.1.6 實習：設定 prototype 內 properties 內的值
4.7.2 Inheritance (繼承)
4.7.2.1 實習：建立 “父類別”
4.7.2.2 實習：建立 “子類別” (第一部份)
4.7.2.3 實習：建立 “子類別” (第二部份) 及建立 “子類別” 的物件
4.7.2.4 實習：了解屬性或函式是否從繼承而來
4.7.3 Override (重新定義)
4.7.3.1 實習：Override (重新定義)
4.7.3.2 更多的例子
4.8 Error handling (處理錯誤情況)
4.8.1 實習：Error (錯誤情況)
4.8.2 實習：處理錯誤情況
4.8.3 實習：拋出錯誤情況
4.9 JavaScript 與 JSON
4.9.1 JSON
4.9.2 實習：JSON → JavaScript 物件 (一個物件)
4.9.3 實習：JSON → JavaScript 物件 (多個物件)
4.9.4 實習：JavaScript 物件 → JSON (一個物件)
4.9.5 實習：JavaScript 物件 → JSON (多個物件)
4.10 AJAX
4.10.1 AJAX 介紹
4.10.2 實習：AJAX：取得文字內容
4.10.3 實習：AJAX：取得 JSON 內容
4.10.4 實習：AJAX：取得 XML 內容
5 AngularJS
5.1 AngularJS 簡介
5.2 下載 AngularJS
5.3 AngularJS 起步
5.3.1 實習：Hello World
5.3.2 實習：控制使用範圍 (更小的範圍)
5.4 資料繫結 (Data-Binding)
5.4.1 實習：資料繫結 (Data-Binding)：不涉及運算
5.4.2 實習：資料繫結 (Data-Binding)：涉及運算
5.4.3 實習：資料繫結 (Data-Binding)：預設值
5.5 雙向資料繫結 (Two Way Data-Binding)
5.5.1 雙向資料繫結 (Two Way Data-Binding) 概念
5.5.2 實習：雙向資料繫結 (Two Way Data-Binding)
5.6 Angular Expressions
5.6.1 Angular Expressions概念
5.6.2 實習：Angular Expressions：BMI (Body Mass Index) 計算機
5.6.3 實習：Angular Expressions：更多的例子
5.7 Built-in filters (第一部份)
5.7.1 number filter
5.7.1.1 number filter 概念
5.7.1.2 實習：number filter
5.7.2 currency filter
5.7.2.1 currency filter 概念
5.7.2.2 實習：currency filter
5.7.3 uppercase filter
5.7.3.1 uppercase filter 概念
5.7.3.2 實習：uppercase filter
5.7.4 lowercase filter
5.7.4.1 lowercase filter 概念
5.7.4.2 實習：lowercase filter
5.8 Module
5.8.1 實習：Module
5.9 Controller 和 $scope
5.9.1 Controller 和 $scope 概念
5.9.2 實習：Controller 和 $scope (第一部份)
5.9.3 實習：Controller 和 $scope (第二部份)
5.10 Built-in filters (第二部份)
5.10.1 date filter
5.10.1.1 date filter 概念
5.10.1.2 實習：date filter (沒有時區設定)
5.10.1.3 實習：date filter (具有時區設定)
5.10.1.4 更多的時間格式
5.10.2 limitTo filter
5.10.2.1 limitTo filter 概念
5.10.2.2 實習：limitTo filter (第一部份)
5.10.2.3 實習：limitTo filter (第二部份)
5.11 自訂的 filters (Custom filters)
5.11.1 實習：自訂的 filters (Custom filters)
5.12 用戶輸入驗證 (user input validation)
5.12.1 實習：用戶輸入驗證 (user input validation)：必須填寫
5.12.2 實習：用戶輸入驗證 (user input validation)：最少及最長字串長度
5.12.3 實習：用戶輸入驗證 (user input validation)：指定字串格式
5.12.4 實習：基於用戶輸入驗證的結果以啟用或停用 Submit 按鈕
5.12.5 實習：在 controller 內設定用戶輸入驗證的要求
5.13 AngularJS 的MVC
5.13.1 Model
5.13.2 View
5.13.3 Controller
5.13.4 實習：AngularJS 的MVC
5.14 Directives
5.14.1 Built-in directives
5.14.1.1 實習：ng-model
5.14.1.2 實習：ng-repeat
5.14.1.3 實習：ng-class
5.14.1.4 實習：ng-class-odd 和 ng-class-even
5.14.1.5 實習：不需自行編寫 search algorithm 的 search bar (第一部份)
5.14.1.6 實習：不需自行編寫 search algorithm 的 search bar (第二部份)
5.14.1.7 實習：自行編寫 search algorithm / predicate function 的 search bar
5.14.1.8 實習：Checkbox, ng-show 與 ng-hide (第一部份)
5.14.1.9 實習：Checkbox, ng-show 與 ng-hide (第二部份)
5.14.1.10 實習：ng-href
5.14.1.11 實習：ng-src
5.14.1.12 實習：ng-disabled
5.14.1.13 實習：ng-readonly
5.14.2 使用 directives 以處理事件 (events)
5.14.2.1 實習：ng-click 及 ng-if
5.14.2.2 實習：ng-copy
5.14.2.3 實習：ng-cut
5.14.2.4 實習：ng-paste
5.14.2.5 實習：ng-keyup, ng-keydown
5.14.2.6 實習：ng-mouseenter, ng-mousedown, ng-mousemove 和 ng-mouseleave
5.14.3 自訂的 directives (Custom directives)
5.14.3.1 實習：自訂的 directives (Custom directives)
5.15 Services, AJAX與 Dependency Injection (DI)
5.15.1 Built-in services
5.15.1.1 實習：$window 與顯示 alerts
5.15.1.2 實習：$interval
5.15.1.3 實習：$http 與 AJAX
5.15.1.3.1 實習：$http 與 AJAX (連線成功的情況)
5.15.1.3.2 實習：$http 與 AJAX (連線失敗的情況)
5.15.2 自訂的 Service (Custom services)
5.15.2.1 實習：自訂的 Service (Custom services) [第一部份]
5.15.2.2 實習：自訂的 Service (Custom services) [第二部份]
5.16 AngularJS routing 與 single-page application (SPA)
5.16.1 實習：AngularJS routing 與 SPA：不含 Controller
5.16.2 實習：AngularJS routing 與 SPA：controller
5.16.3 實習：AngularJS routing 與 SPA：$routeParams