Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Javascript速成

Javascript速成
by

Kore Lui

on 21 July 2010

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Javascript速成

基礎篇 變量名中可以包含 $ javascript 的世界是簡單的:
沒有包(package)
沒有類(class)
沒有靜態類和方法(static class, static method)
沒有泛型(generic)
沒有註解(annotation)
... 拜金主義 $_$ = 10000000 正則表达式字面量 java:
Pattern pattern = new Pattern("\\w"); js:
var pattern = /\w/ javascript 正則表達式是用兩個 '/' 包起來的語法元素
正則表達式裡不需要進行雙重轉義 換行符“很有可能”相當於分號 javascript 不強制分號斷句 所以“大部分情況下”漏寫了也沒關係 parseInt 是進制敏感的 如果以0x開頭,就以16進制解析
如果以0開頭,就以8進制解析 在解析10進制數的時候,最好添加進制參數,
以避免把 0 開頭的數字解析成了8進制 parseInt('010', 10) for .. in 語句 訪問一個對象的所有屬性 對於數組,會訪問所有元素下標和屬性 var arr = [8, 9];
for (var i in arr) {
alert(i)
} 預期的表現是彈窗顯示 0 和 1 但是如果 Array 的原型被添加進屬性的話 ... Array.prototype.what = function() { alert('wtf') }
for (var i in arr) { alert(i) } json(1) 線性數據結構 var a = new Array();
a.push(1);
a.push(2);
... weired! var a = [1, 2, 3] js 的數組也是 "ArrayList"
不需要在創建時限制大小,
可以繼續塞東西進去 a.push(4) json(2) 鍵-直數據結構 任何 Object 都是一個 Map var o = new Object();
o.name = 'oliver';
o.daddy = 'big daddy';
... weired! var o = {
name: 'oliver',
daddy: 'big daddy'
} function 是一等公民 javascript 是 OO 語言
面向對象語言的基本特性就是:
function 是對象 對象字面量(Object Literal)

數組字面量(Array Literal) 陷阱篇 javascript 裡面也存在着一些陷阱
往往以此而滋生了一些不容易發現的 bug function add(a, b) {
return a + b;
} var add = function(a, b) {
return a + b;
} 相當於 function 同時也是構造函數 var Point = function(x, y) {
this.x = x; this.y = y
};
var pt = new Point(3, 4); function 是 javascript 裡面實現局部作用域
的唯一手段, 稍後再提 functional javascript functional 的編程風格 var Y = function(le) {
return function(f) {
return f(f)
}(function(f) {
return le(
function(x) { return (f(f))(x) }
)
})
}
用 javascript 寫的 Y-combinator 例:在 jQuery 裡可以用的兩個標準的 list 函數:
each 和 map $.each(array, function(i, e){
alert(e)
}) 為什麼用 each 而不用 for 呢?
因為用 for 很容易出亂子 for(i=0; i<array.length; i++) {
array[i] ...
} 給全局變量 i 賦直了,潛在危害! 就算給 i 加上 var 限定詞,在 for 語句後 i 依然存在! 注意:在 javascript 裡,
花括號並不能起局部作用域的作用

只有 function,才是真正的局部作用域 var result = $.map(array, function(e) {
return e * 2;
}) 上面的代碼相當於 var result = []
for(var i=0; i<array.length; i++) {
result.push(array[i] * 2)
} 同樣利用了 function 的局部作用域
對各種作用域的侵害減到了最少
而且代碼簡潔清晰 functional javascript 2 functional style 使得在 javascript 裡面可以輕鬆的實現一些設計模式,並且可以用直觀的方式來實現一些 AOP 的功能 visitor 模式
each 和 map 就是 visitor 模式:
你可以直接傳遞函數而不需要傳遞一個包含 "visit()" 方法的對象

例:
排序函數不需要 new Comparator ...
// 按照 name 屬性進行排序
arr.sort(function(a, b) {
a.name > b.name ? 1 : a.name === b.name ? : 0 : -1
})

定時函數不需要 new Thread ...
setTimeout(500, function(){alert('hi')}) strategy 模式
var searcher = {
depthFirst: function(){ ... },
widthFirst: function(){ ... }
};
var strategy = prompt() // 彈出窗口詢問策略
searcher[strategy]() // 運行對應的策略 o.name // 'oliver'
o['name'] // 'oliver' 下面兩種訪問方式是等價的: 這種特性對於 runtime dispatch 特別有用,
很多使用 eval 的代碼可以這樣改造 既然function 可以作為參數傳遞
那麼環切什麼的就變成顯然的事情了

準備不足,暫略 ... 類型 條件語句 if () 語句中,條件不限定為 boolean

以下都可以放到 if 的條件中,相當於 false:
null, false, 0, undefined, "", '0', 0.0 switch 語句和邪惡雙子 可以對 String 進行 switch
switch 使用 === 進行比較
而不是 == === 會先比較 type,
再比較 value
‘0’ == 0 // true
'0' === 0 // false typeof 3 // "number"
typeof 0.0 // "number"
typeof '3' // "string"
typeof undefined // "undefined"
typeof null // "object"
typeof false // "boolean"
typeof function(){} // "function"
typeof /abc/ // "function" === 和 !== 的表現比較正常
但 == 和 != 經常會出現邪惡的詭異情況 '' == '0' // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' \t\r\n ' == 0 // true 盡量使用 === 和 !==,而不是 == 和 != API篇 常用標準方法
常用的 dom 方法
常用 event 方法 註釋和正則表達式 // 有時是個空正則,有時是行註釋 /*
var re = /\w*/
*/ 語法錯誤! 在 chrome 裡探索 API var methods = [];
for(var m in document) {
/* 獲取 document 中所有以 get 開頭的方法 */
if (/^get/.test(m)) methods.push(m)
} $D = document
$D.getElementById(id)
$D.getElementsByClass(klass)
$D.getElementsByTagName(tName)

常用元素属性
nodeName
nodeValue
childNodes
parent

innerHTML // 只在 html 中才可用,在 xhtml 中不可用

常用 dom 操作
appendChild(node)
removeChild(node)
insertBefore(anchorNode, node)
attribute
setAttribute

創建元素
$D.createElement('ul')
$D.createTextNode('hello')
Node 常用方法和屬性 summary
html 元素的屬性除了和關鍵字衝突的 class,
都可在直接訪問, 如:
var img = $D.getElementsByTagName('img')[0]
img.src // 'http://xxxx.png'

訪問 html class 屬性,使用 className

attributes 獲得所有屬性的 map (可以用 for in 和 [] 訪問)

getAttribute(attrName) 訪問屬性的另一種方式,不限於 html 屬性

setAttribute(attrName, val) 設置屬性

注意: attribute 相關的 API 在 IE 中經常會出問題,還不如直接訪問 ...
html 元素的屬性 慣用法:
$: jQuery 和 prototype
用來進行元素選擇、事件綁定、
調用工具函數 ... 的對象

// 選擇 class="nanally"的 div
$('div.nanally')

$(function() {
... // 在dom載入完成的時候做的事情
})

$E = YAHOO.util.Event
$D = YAHOO.util.Document trick篇 技巧 -> 技藝 -> 技術 -> 科學 1 用閉包做一些無公害的事情 (function() {
var a, b, c;
// 做一些事情
})()
// function 裡面的局部變量不會對外面造成危害 2 用閉包保存隱藏 state javascript 沒有 private 關鍵字,
如果要隱藏一些對象的屬性或者state,
可以用閉包和局部變量 var Natural = function() {
var i = 0; // private state attr
this.next = function() {
i ++;
return i
}
};
var nat = new Natural()
nat.next() // 1
nat.next() // 2 等價的 java 代碼? class Natural {
private int i = 0;
public int next() {
i ++;
return i;
}
} Natural nat = new Natural();
nat.next(); // 1
nat.next(); // 2 The venerable master Qc Na was walking with his student, Anton. Hoping to prompt the master into a discussion, Anton said "Master, I have heard that objects are a very good thing - is this true?" Qc Na looked pityingly at his student and replied, "Foolish pupil - objects are merely a poor man's closures."

Chastised, Anton took his leave from his master and returned to his cell, intent on studying closures. He carefully read the entire "Lambda: The Ultimate..." series of papers and its cousins, and implemented a small Scheme interpreter with a closure-based object system. He learned much, and looked forward to informing his master of his progress.

On his next walk with Qc Na, Anton attempted to impress his master by saying "Master, I have diligently studied the matter, and now understand that objects are truly a poor man's closures." Qc Na responded by hitting Anton with his stick, saying "When will you learn? Closures are a poor man's object." At that moment, Anton became enlightened. 3 雜項 編輯任意網頁
document.body.contentEditable=true;
document.designMode='on'

Qc Na 的捏他:Christian Queinnec 和 Norman Adams 分析請求參數
window.location.href.split('?')[1] 頁面跳轉
window.location = 'http://....' 訪問 cookie (cookie 以;分隔,各項都是 name=value)
document.cookie // 字符串 打開新窗口
window.open(...) The End 犀牛書 You may also want to have a look at ... javascript 高級程序設計 ajax 設計模式 javascript, the good parts 如果時間很少,就看最精要的吧 javascript(ECMA script) 速成 人生苦短
javascript in 1 hour
javascript in 10 minutes
javascript in 5 seconds
... 雖然 0.0 == '0.0'
但是 0.0 相當於 false,
而 '0.0' 相當於 true
Full transcript