browser object model
DESCRIPTION
DOM，BOM,Ajax,Event,JSONTRANSCRIPT
Browser Object Model
2011-04-15
Programming Languages
2003-2010 最受欢迎语言
What about JavaScript ?
JavaScript是世界上最被误解的语言
Douglas Crockford
JS丰富的表达能力让人以为它是为外行设计的,而不是专业程序
员,这显然不是事实
Douglas Crockford
0.24%0.29%
0.26%
0.13% 0.13% 0.12%
0.04%
0.15%0.10%
0.56%
0.05%
Google Code中语言出现
fuck一词的比率
• ECMAScriptEMCA指定的标准化语言，JavaScript,ActionScript…http://www.ecmascript.org/
ECMAScript 的实现
Browsers’ history1991 ~ present
ViolaWWW
Lynx
高调的NetScape
我来打酱油
NetScape 3.6
IE 1.0
微软免费捆绑销售IE
NetScape遭到致命打击
Opera 3.6
划时代意义的IE6诞生
NetScape的重生
继续打酱油,囧
Safari 3
IE 6
划时代意义的Firefox诞生
Firefox 1.0
从IE7到IE8并无本质的飞跃
拜拜了NetScape
Chrome火爆发布惊艳的v8引擎
向HTML5跃进
DOM & BOM
• DOM、BOM• Ajax• Event• YUI3
We should know:
Javascript
ECMAScript DOM BOM
浏览器JavaScript的组成
• DOMW3C标准提供的文档模型，浏览器均实现了这个标准
• BOM浏览器对象模型，浏览器各自的实现
• Document对象 - DOM根节点
• Frames数组 – 历史记录
• History对象 – 窗口浏览历史
• Location对象 – 地址栏相关
• Navigator对象 – 浏览器版本信息
BOM
方法名 说明
alert/confirm/prompt 弹框
set(clear)Timeout 设置(清除)延时执行
set(clear)Interval 设置(清除)循环执行
close/open 关闭/打开窗口
scroll(To) 窗口滚动
move(resize)To 窗口移动到(改变为)
eval 执行js代码
blur/focus 失去/得到焦点
浏览器提供的全局方法
方法名 说明
parent 如果当前窗口为frame，指向包含该frame的窗口的frame
self 指向当前的window对象
top 如果当前窗口为frame，指向包含该frame的top-level的
window对象
window 指向当前的window对象
帧(window)相关的变量
DOM
HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。
注意：渲染过程中的Javascript操作
Building DOM…
浏览器渲染过程
执行脚本过程中的渲染
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><script>//erroralert(document.getElementById('a'));
</script><span id="a“>error</span></body></html>
error
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><span id="a">ok</span><script>//okalert(document.getElementById('a'));
</script></body></html>
ok
三个重要的事件
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id=“b">ok</span>
</div></body></html>
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id="a">ok</span>
</div></body></html>
document
head
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id=“b">ok</span>
</div></body></html>
document
head
body
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id=“b">ok</span>
</div></body></html>
document
head
body
div#J
div#J available
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id=“b">ok</span>
</div></body></html>
document
head
body
div#J
span#a
span#a available
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id=“b">ok</span>
</div></body></html>
document
head
body
div#J
span#a
span#b
span#b available
div#J contentready
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><div id=“J”>
<span id="a">ok</span><span id=“b">ok</span>
</div></body></html>
document
head
body
div#J
span#a
span#b
domready
<!DOCTYPE HTML><html lang="zh"><head>head</head>
<body><script>Y.on(‘available’,function(){
alert(Y.one(‘#a’));},’#a’);
</script><span id="a">ok</span></body></html>
ok
JSON
AJAX
Ajax(Asynchronous JavaScript And Xml)
• Post• Get• Xdr• Jsonp
推荐：返回unicode转码后的数据
异步加载数据
异步加载文档内容
用户体验的提升
页面性能的提升
广义的 Ajax
更广义的 Ajax
短链接的限制，单向！？
Events
JavaScript是一种事件驱动的编程语言
Y.on(‘domready’,function(){//your code here…
});
绑定回调，等待事件发生
事件冒泡
Y.delegate(‘click’,function(e){//当事件冒泡至li处，触发回调
},’#continer’,’li’);
<div id="container"><ul>
<li id="item-1"><em>1</em></li><li id="item-2"><em>2</em></li>
</ul> </div>
事件委托
Y.on(‘mouseenter’,function(e){//鼠标移入
},’#continer’);
Y.on(‘mouseleave’,function(e){//鼠标移出
},’#continer’);
库提供了更多自定义事件
http://developer.yahoo.com/yui/3/event/
ref
• http://www.w3.org/DOM/• http://www.yuiblog.com/blog/2009/04/27/vi
deo-ppk-jsevents/• http://www.slideshare.net/lijing00333/yui3-
7203908
