客户端Javascript及浏览器
- 1. 客户端 javascript 及浏览器 金融界 UED| 王建军
- 2. JavaScript 概况 客户端 JavaScript 的特性 文档对象模型 -DOM 浏览器
- 3. javascript 概况 轻型的、弱类型、解释型的语言 具有面向对象的能力 ECMA 制定 javascript 标准 客户端 javascript 服务器端 javascript ，例如 node.js
- 4. 客户端 javascript 客户端 javascript = javascript + DOM + BOM JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象。 DOM 描述了处理网页内容的方法和接口 BOM 描述了与浏览器进行交互的方法和接口
- 5. 客户端 JavaScript 的特性 控制文档的外观和内容 对浏览器的控制 与 HTML 表单交互 与用户交互
- 6. 常用 DOM 模块 DOM Core DOM HTML DOM Style DOM Events
- 7. HTML DOM
- 8. 文档对象模型 DOM 是操作文档的应用程序接口 (API) 以树形结构表示 HTML 文档 DOM 树是各种类型的 Node 对象的数 Node 对象定义了遍历和操作数的属性和方法 每个 Node 对象都有 nodeType 指定节点的类型
- 9. nodeType 2 Attr 11 DocumentFragment 8 Comment 9 Document 3 Text 1 Element nodeType 值 节点类型
- 10. Node 属性和方法 属性： childNodes 、 firstChild 、 lastChild 、 parentNode 等 方法： appendChild 、 removeChild 、 replaceChild 、 insertBefore 、 getElementById 等
- 11. 浏览器 浏览器对象模型 (BOM) 浏览器的工作 页面渲染引擎 JavaScript 引擎 渲染页面过程
- 12. 浏览器对象模型
- 13. BOM 对象 window 对象 document 对象 location 对象 navigator 对象 screen 对象
- 14. 浏览器的工作 加载 解析 脚本执行 渲染 (Layout) 样式解析 输出 事件处理
- 16. Layout 所有元素都是一个 frame 对象 Frame 可以抽象的看做一个矩形框 Frame 表示框的大小位置嵌套关系
- 18. 渲染页面过程
- 19. 页面渲染引擎 WebKit （ Chrome ， Safari ，傲游，搜狗） Gecko （ Firefox ， netscape ） Presto （ Opera ） Trident （ IE 内核， IE 以及各种 IE 内核浏览器）
- 20. JavaScript 引擎 V8 是 chrome 最新脚本引擎 TraceMonkey JagerMonkey Chakra 是 IE9 脚本引擎 JavaScriprCore 是 safari 引擎 Carakan 是 opera 引擎
- 21. 参考 http://www.w3school.com.cn/w3c/w3c_dom.asp http://www.iefans.net/liulanqi-neihe-jiexi / Firefox 的 LayoutReflow
- 22. 谢谢！
Editor's Notes
- #4: 当把一个 JavaScript 解释器嵌入浏览器时，就形成了客户端 Javascript
- #5: ECMA 制定 javascript 标准 W3C 指定 DOM 标准， DOM 级别分 1 2 3 IE5.5 以上支持几乎全部的 DOM Level 1 其它浏览器支持全部 DOM 1 ，几乎全部的 DOM 2 和部分的 DOM 3
- #7: DOM Core DOM Level 2 核心 规定了访问和更改文档内容及结构的一个 API ，此 API 同时包含用于 XML 的接口。 DOM Level 3 Core 规定了访问和更改文档内容、结构及样式的一个 API 。 DOM Level 2 HTML DOM HTML 规定了操作 HTML 文档结构和内容的 API 。 DOM Level 2 Style DOM Style 规定了动态访问及更改内容样式表的 API 。 DOM Events DOM Level 2 Events 规定了访问文档事件的 API 。 通过增加新的接口和新的事件集， DOM Level 3 Events API 对 Level 2 Event API 的功能进行了扩展。
- #8: DOM 树的根节点是个 Document 对象，该对象的 documentElement 属性引用表示文档根元素的 Element 对象 文档（ Document ）节点除了根元素外还可能有其它子节点，如 Comment 节点
- #9: DOM 是表示文档（如 HTML 文档）和访问、操作构成文档的各种元素（如 HTML 标记和文本串）的应用程序接口（ API ） 以树形结构表示 HTML 文档（或 XML ），定义了遍历这个树和检查、修改树的节点的方法和属性 The DOM is a programming API for documents.