2. All services from your imperative.
2
JAVASCRIPT 物件導向觀念入門
Object-Oriented JavaScript
3. All services from your imperative.
3
Douglas Crockford 大師說:
JavaScript:世界上被誤解最深的程式語言
http://javascript.crockford.com/javascript.html
4. All services from your imperative.
4
JavaScript 的型別概念
JavaScript 變數類型
String
Number
Boolean
Object
Array
Date
Null ?
Undefined
5. All services from your imperative.
5
JavaScript 的型別概念
JavaScript 型別分類
基礎型別 (Primitive Type)
string
number
boolean
undefined
null
物件型別 (Object Type)
object
Function
Array
null ?
6. All services from your imperative.
6
JavaScript 的型別概念
JavaScript 是一種動態型別的語言
var x;
var x = 5;
var x = "John";
var carname="Volvo";
var carname;
這種變數型別又稱「弱型別」 (Weak Type)
7. All services from your imperative.
7
JavaScript 的物件概念
JavaScript 物件,僅包含屬性與方法
var car = new Object();
屬性
car.name = "BMW";
方法
car.start();
"Everything" in JavaScript is an Object!
var txt = "Hello World";
txt.length
txt.indexOf('World');
8. All services from your imperative.
8
JavaScript 的物件概念
JavaScript 如何建立一個物件
var car = new Object();
car.name = "BMW";
car.start = function() {
return true;
}
Object - JavaScript | MDN
9. All services from your imperative.
9
隨堂測驗 (1)
請回答以下問題:
var o1 = 'Hello World';
var o2 = new String('Hello World');
o1 == o2
o1 === o2
typeof o1
typeof o2
10. All services from your imperative.
10
隨堂測驗 (2)
以下陳述式是否會發生例外?
var car = 'Hello World';
car.name = "BMW";
car.start = function() {
return true;
}
car.start();
11. All services from your imperative.
11
隨堂測驗 (3)
以下陳述式是否會發生例外?
var car = new String('Hello World');
car.name = "BMW";
car.start = function() {
return true;
}
car.start();
12. All services from your imperative.
12
隨堂測驗 (4)
以下陳述式 txt.name 結果為何?
var car = 'Hello World';
String.prototype.name = "BMW";
String.prototype.start = function()
{
return true;
}
var txt = 'Will';
txt.name
13. All services from your imperative.
13
隨堂測驗 (5)
以下陳述式 txt.name 結果為何?
var car = new String('Hello World');
String.prototype.name = "BMW";
String.prototype.start = function()
{
return true;
}
var txt = 'Will';
txt.name
14. All services from your imperative.
14
JavaScript 的函數概念
JavaScript 如何建立一個函數 (1)
function HelloWorld()
{
return "Hello World";
}
15. All services from your imperative.
15
JavaScript 的函數概念
JavaScript 如何建立一個函數 (2)
var myFunc = function()
{
return "Hello World";
}
window.myFunc = function()
{
return "Hello World";
}
Function - JavaScript | MDN
16. All services from your imperative.
16
JavaScript 的函數概念
JavaScript 如何建立一個函數 (3)
var myFunc = new Function(
"return 'Hello World!!'");
17. All services from your imperative.
17
隨堂測驗 (6)
以下陳述式 txt.name 結果為何?
var o1 = function() {}
var o2 = new Function();
o1 == o2
o1 === o2
typeof o1
typeof o2
Zeros in JavaScript
http://zero.milosz.ca/
18. All services from your imperative.
18
隨堂測驗 (7)
這到底在寫什麼?
var A = function(foo)
{
var B = function() {
return A.prototype.constructor.apply(B, arguments);
};
B.prototype = A.prototype;
return B;
};
對不起,我又讓誤解加深了! >"<
19. All services from your imperative.
19
JavaScript 的類別概念
只有函數(Function)、沒有類別(Class )
如何宣告一個類類別
透過 Function 宣告一個 "Class"
var oo = function(){
this.a = 1;
this.b = '11';
this.c = function() { return 'ok'; }
}
宣告一個新物件
var oo2 = new oo();
oo2
20. All services from your imperative.
20
JavaScript 的類別概念
物件存取範圍? (Public / Private / Protected)
JavaScript 沒有 Class 只有 Function
Function 是一種 Object
所有 Object 屬性都是公開的 (public)
所以 JS 的類類別
沒有 private 或 protected 存取範圍!!
21. All services from your imperative.
21
TYPESCRIPT 簡介
JavaScript for tools
22. All services from your imperative.
22
TYPESCRIPT 簡介
TypeScript = "靜態型別" + "動態型別"
用「靜態型別」語法來描述 JavaScript 的動態型別
TypeScript 語法涵蓋完整 JavaScript 語法
TypeScript = JavaScript + Class-based OOP 語法
支援 class (類別)、interface (介面)、module (模組)
TypeScript 最終將編譯成傳統的 JavaScript
語法相容於 ECMAScript 3 (ES3)
Any browser. Any host. Any OS. (含Node.js)
TypeScript 是一個工具語言!(適用於開發時期)
TypeScript 適合用來開發 Web 應用程式
靜態型別, 編譯器, 開發工具支援, 開源碼, 免費
23. All services from your imperative.
23
TypeScript 語法
語法 v.s. 關鍵字
所有 ES3 語法
module
class , extends
constructor
export
public, private
interface
implements
? (nullable)
24. All services from your imperative.
24
TYPESCRIPT 開發實戰
現有專案如何循序漸進的改用 TypeScript 開發 JavaScript 應用程式
25. All services from your imperative.
25
STEP 0. 變更副檔名
作業方式
將 *.js 直接改成 *.ts
修正建置動作: TypeScriptCompile
注意事項
Visual Studio 2012 的專案裡,至少要有先有
一個 TypeScript 檔案,才能在手動修正副檔
名時選擇 “TypeScriptCompile” 這個建置動作
(Build Action)
26. All services from your imperative.
26
STEP 0. 變更副檔名
*.ts
標準 TypeScript 副檔名
*.d.ts
d is stand for declaration
此為 TypeScript 宣告檔專用的副檔名
用來預先宣告 TypeScript 開發環境中可能會
用到的變數、函數與物件,物件的部分皆以
interface 的方式宣告
36. All services from your imperative.
40
善用 TypeScript 工具支援
Visual Studio 2012
自動型別檢查 (Static type checking)
隱含強型別推演 (Strong type inference)
移至定義 (Go To Definition) ( F12 )
巡覽至 (Navigate To) ( Ctrl + , )
語法自動完成 / Intellisense ( Ctrl + j )
程式碼重構 (Code refactoring) ( F2 )
下載: TypeScript for Visual Studio 2012 ( v0.8.1.1 )
Monaco (線上版編輯器)
http://www.typescriptlang.org/Playground/
37. All services from your imperative.
41
TypeScript 的工具支援
TypeScript support for Sublime Text
http://www.interoperabilitybridges.com/media/15545
2/typescript_support_for_sublime_text.zip
TypeScript support for Emacs
http://www.interoperabilitybridges.com/media/15544
9/typescript_support_for_emacs.zip
TypeScript support for Vim
http://www.interoperabilitybridges.com/media/15544
6/typescript_support_for_vim.zip
40. All services from your imperative.
45
TypeScript 執行方式
透過工具事先轉換成 JavaScript
相容於 ECMAScript 3
可執行在各瀏覽器或 node.js
直接在 Browser 執行 TypeScript
typescript.js
https://github.com/niutech/typescript-compile
live demo
41. All services from your imperative.
46
使用 TypeScript 的 5 大理由?
支援 ECMAScript 6 語法,執行在 ECMAScript 3 的瀏覽器上 (IE6+)
ES 6 的 module, class
ES 3 的相容性: http://www.webdevout.net/browser-support-ecmascript
開源碼,採用 Apache 2.0 授權,可從 CodePlex 下載
http://typescript.codeplex.com/
工具支援 (Visual Studio 2012, Vi, Emac, Sublime Text)
支援 Intellisense、型別檢查、型別推導、程式碼重構、巡覽至、符號搜尋
與現有專案無縫整合
8 → ∞
名家之著
Anders Hejlsburg - C# 之父
42. All services from your imperative.
47
不用 TypeScript 的 6 大理由?
目前還在 Preview 階段
TypeScript 0.8.3.1
還不斷發現 Bugs、工具支援也還在陸續開發(不過前景可期)
有限的支援與函式庫(需要時間解決)
目前版本尚未支援泛型(但 TypeScript 規格中已經有定義)
所有型別都是 nullable 型別
僅 Visual Studio 2012 與 Monaco web editor 支援較完整的工具特性
43. All services from your imperative.
48
結論
TypeScript 值得一試
現在就能用在專案上,沒有相容性問題
循序漸進的改善 JavaScript 程式碼品質
工欲善其事,必先利其器!
Visual Studio 2012 是你的好朋友
44. All services from your imperative.
49
參考連結
TypeScript 官網
http://www.typescriptlang.org/
TypeScript 部落格
http://blogs.msdn.com/b/typescript/
TypeScript 原始碼下載
http://typescript.codeplex.com/SourceControl/BrowseLatest
TypeScript Language Specification
http://go.microsoft.com/fwlink/?LinkId=267121
多奇技術分享會 - 微軟最新程式語言:TypeScript 介紹
http://www.youtube.com/watch?v=BicYCnjBYvc
45. All services from your imperative.
50
聯絡資訊
The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
http://blog.miniasp.com/
Will 保哥的技術交流中心 (臉書粉絲專頁)
http://www.facebook.com/will.fans
★ ★ ★ Will 保哥的噗浪 ★ ★ ★
http://www.plurk.com/willh/invite
No expectations upon youWe invite you to join activitiesMicrosoft has no expectations of MVPs beyond courtesy, professionalism, and adherence to the rules of conduct (https://mvp.support.microsoft.com/default.aspx/codeofconduct)Remember the Non-Disclosure Agreement