加入 Systematic Facebook 擁躉群  

這個頁面上的內容需要較新版本的 Adobe Flash Player。

取得 Adobe Flash Player


想定期知道最新課程及優惠嗎?
免費訂閱本中心的課程通訊!
觀看課程通訊
Reasonable Spread:
Permission email marketing

課堂錄影隨時睇 10 大優點之視像清晰:使用 LCD 闊螢幕來播放視像,可同時清楚觀看導師動作表情、白板上的圖畫文字、全螢幕的電腦實習畫面!

Object-oriented JavaScript 與 AngularJS 綜合課程

  • 課程時間
  • 課程簡介
  • 課程內容

推介服務:課堂錄影隨時睇
編號 地點 可預約星期及時間 學費低至 85 折  
JS1712MV 旺角 一至五:11:30 - 22:30   六及日:10:30 - 21:30   (公眾假期休息) 95 折後只需 $1,881 按此報名
JS1712OV 觀塘 一至五:13:30 - 22:00   六及日:12:30 - 21:00   (星期三及公眾假期休息) 9 折後只需 $1,782 按此報名
JS1712PV 北角 一至五:13:30 - 22:00   六及日:12:30 - 21:00   (星期三及公眾假期休息) 9 折後只需 $1,782 按此報名
JS1712SV 沙田 一至五:13:30 - 22:00   六及日:12:30 - 21:00   (星期三及公眾假期休息) 85 折後只需 $1,683 按此報名
JS1712YV 屯門 一至五:13:30 - 22:00   六及日:12:30 - 21:00   (星期三及公眾假期休息) 85 折後只需 $1,683 按此報名
* 各政府部門可使用 P Card 付款  
免費試睇: 首 1 小時,請致電與本中心職員預約。 查看各地點電話
旺角 2332-6544
觀塘 3563-8425
北角 3580-1893
沙田 2151-9360
屯門 3523-1560
免費重睇: 學員可於享用時期內於報讀地點不限次數地重看課堂錄影,從而可反覆重溫整個課程!
導師解答: 學員可於觀看某一課堂錄影後提出課堂直接相關的問題,課程導師會樂意為學員以單對單的形式解答!
課時: 12 小時
享用時期: 報讀日至 4 星期內,進度由您控制,可快可慢。
課堂錄影導師: Franco (任教課程清單)
課堂錄影隨時睇: 詳情及示範片段


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) 等概念。

課程時數: 12 小時 (共 4 堂)
適合人士: 對 JavaScript、AngularJS、Object-oriented JavaScript 有興趣的人士。
授課語言: 以廣東話為主,輔以英語
課程筆記: 本中心導師親自編寫中文為主筆記,而部份中文字附有英文對照。


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

 

更多綜合課程
  法律課程
  • 代理人的法律責任
  • 公司董事和合夥人的法律責任
  • 婚姻的法律責任
  • 遺產繼承的合法權益
  英文課程
  • IPA 拼音:級別 1 2 3 4
  普通話課程
  • 基礎普通話拼音 (免費)
  • 進階普通話拼音
  • 普通話會話:級別 1 2 3
  西班牙語文課程
  • 級別 1 2 3
  中醫課程
  • 濕疹與皮膚敏感病
  • 暗瘡與色斑 | 鼻敏感與感冒
  • 脫髮與白髮 | 從五官看健康
  攝影課程
  • 攝影初級
  • 攝影中級 (風景專題)
  風水命理課程
  • 紫微斗數:級別 1 2 3
  • 子平八字:級別 1 2 3
  • 八字風水:級別 1 2 3
  • 奇門遁甲:級別 1 2 3

這個頁面上的內容需要較新版本的 Adobe Flash Player。

取得 Adobe Flash Player