Browser Object Model
Upcoming SlideShare
Loading in...5
×
 

Browser Object Model

on

  • 3,271 views

DOM,BOM,Ajax,Event,JSON

DOM,BOM,Ajax,Event,JSON

Statistics

Views

Total Views
3,271
Views on SlideShare
3,216
Embed Views
55

Actions

Likes
4
Downloads
86
Comments
0

1 Embed 55

http://wiki.ued.taobao.net 55

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Browser Object Model Browser Object Model Presentation Transcript

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