Downloaded 97 times
Uploaded byjay li
Browser Object Model
该文档探讨了 JavaScript 的重要性及其在浏览器中的使用，包括浏览器对象模型（BOM）、文档对象模型（DOM）和 AJAX 技术。它还回顾了浏览器的发展历史和相关标准，强调了 JavaScript 在用户体验和异步数据加载方面的作用。文档中包含了一些示例代码和事件处理的介绍，提供了对 JavaScript 编程的全面理解。
![[2008]网站重构 -who am i](https://cdn.slidesharecdn.com/ss_thumbnails/2008-whoami-100913035744-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Browser Object Model
- 1. Browser Object Model 2011-04-15
- 2. • 拔赤 淘宝前端开发工程师 http://jayli.github.com
- 3.
- 5.
- 6.
- 7. JavaScript是世界上 Douglas Crockford 最被误解的语言
- 8. JS丰富的表达能力让 人以为它是为外行设 Douglas Crockford 计的,而不是专业程序 员,这显然不是事实
- 9. 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%
- 10. • ECMAScript EMCA指定的标准化语言，JavaScript,ActionScript… http://www.ecmascript.org/
- 11.
- 12. Browsers’ history 1991 ~ present
- 13.
- 14. 高调的 NetScape 我来打酱油
- 15.
- 16. NetScape遭 到致命打击 微软免费捆绑 销售IE
- 17.
- 18. 划时代意义的 IE6诞生 继续打酱油,囧 NetScape的重生
- 19.
- 20.
- 21.
- 22. 拜拜了 NetScape 从IE7到IE8并 无本质的飞跃 Chrome火爆发布 惊艳的v8引擎
- 23.
- 25.
- 26. We should know: • DOM、BOM • Ajax • Event • YUI3
- 27. Javascript ECMAScript DOM BOM 浏览器JavaScript的组成
- 28. • DOM W3C标准提供的文档模型，浏览器均实现了这个标准 •BOM 浏览器对象模型，浏览器各自的实现
- 29. BOM • Document对象 - DOM根节点 • Frames数组 – 历史记录 • History对象 – 窗口浏览历史 • Location对象 – 地址栏相关 • Navigator对象 – 浏览器版本信息
- 30. 浏览器提供的全局方法 方法名 说明 alert/confirm/prompt 弹框 set(clear)Timeout 设置(清除)延时执行 set(clear)Interval 设置(清除)循环执行 close/open 关闭/打开窗口 scroll(To) 窗口滚动 move(resize)To 窗口移动到(改变为) eval 执行js代码 blur/focus 失去/得到焦点
- 31. 帧(window)相关的变量 方法名 说明 parent 如果当前窗口为frame，指向 包含该frame的窗口的frame self 指向当前的window对象 top 如果当前窗口为frame，指向 包含该frame的top-level的 window对象 window 指向当前的window对象
- 32. DOM HTML 文档对象模型（HTML Document ObjectModel）定义了访问和处理 HTML 文档的标准方法。 注意：渲染过程中的Javascript操作
- 33.
- 34.
- 35.
- 36. <!DOCTYPE HTML> <html lang="zh"> <head>head</head> <body> <script> error //error alert(document.getElementById('a')); </script> <span id="a“>error</span> </body> </html>
- 37. <!DOCTYPE HTML> <html lang="zh"> <head>head</head> <body> <span id="a">ok</span> <script> ok //ok alert(document.getElementById('a')); </script> </body> </html>
- 38.
- 39. <!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>
- 40. <!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>
- 41. <!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>
- 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> </div> div#J available </body> </html>
- 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> </html> span#a available
- 44. <!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
- 45. <!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
- 46. <!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>
- 47.
- 51.
- 52. Ajax(Asynchronous JavaScript AndXml) • Post • Get • Xdr • Jsonp
- 53.
- 54. 广义的 Ajax 异步加载数据 用户体验的提升 异步加载文档内容 页面性能的提升
- 55.
- 56. Events JavaScript是一种事件 驱动的编程语言 Y.on(‘domready’,function(){ //your code here… });
- 57.
- 58.
- 59. 事件委托 <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’);
- 60. 库提供了更多自定义事件 Y.on(‘mouseenter’,function(e){ //鼠标移入 },’#continer’); Y.on(‘mouseleave’,function(e){ //鼠标移出 },’#continer’); http://developer.yahoo.com/yui/3/event/
- 61.
- 62. 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