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

Like this? Share it with your network

Share

Browser Object Model

on

  • 3,450 views

DOM,BOM,Ajax,Event,JSON

DOM,BOM,Ajax,Event,JSON

Statistics

Views

Total Views
3,450
Views on SlideShare
3,395
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 Presentation Transcript

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