Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

客户端Javascript及浏览器

6,172 views

Published on

客户端Javascript及浏览器

Published in: Technology
  • Be the first to comment

客户端Javascript及浏览器

  1. 1. 客户端 javascript 及浏览器 金融界 UED| 王建军
  2. 2. <ul><li>JavaScript 概况 </li></ul><ul><li>客户端 JavaScript 的特性 </li></ul><ul><li>文档对象模型 -DOM </li></ul><ul><li>浏览器 </li></ul>
  3. 3. javascript 概况 <ul><li>轻型的、弱类型、解释型的语言 </li></ul><ul><li>具有面向对象的能力 </li></ul><ul><li>ECMA 制定 javascript 标准 </li></ul><ul><li>客户端 javascript </li></ul><ul><li>服务器端 javascript ,例如 node.js </li></ul>
  4. 4. 客户端 javascript <ul><li>客户端 javascript = javascript + DOM + BOM </li></ul><ul><li>JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象。 </li></ul><ul><li>DOM 描述了处理网页内容的方法和接口 </li></ul><ul><li>BOM 描述了与浏览器进行交互的方法和接口 </li></ul>
  5. 5. 客户端 JavaScript 的特性 <ul><li>控制文档的外观和内容 </li></ul><ul><li>对浏览器的控制 </li></ul><ul><li>与 HTML 表单交互 </li></ul><ul><li>与用户交互 </li></ul>
  6. 6. 常用 DOM 模块 <ul><li>DOM Core </li></ul><ul><li>DOM HTML </li></ul><ul><li>DOM Style </li></ul><ul><li>DOM Events </li></ul>
  7. 7. HTML DOM
  8. 8. 文档对象模型 <ul><li>DOM 是操作文档的应用程序接口 (API) </li></ul><ul><li>以树形结构表示 HTML 文档 </li></ul><ul><li>DOM 树是各种类型的 Node 对象的数 </li></ul><ul><li>Node 对象定义了遍历和操作数的属性和方法 </li></ul><ul><li>每个 Node 对象都有 nodeType 指定节点的类型 </li></ul>
  9. 9. nodeType 2 Attr 11 DocumentFragment 8 Comment 9 Document 3 Text 1 Element nodeType 值 节点类型
  10. 10. Node 属性和方法 <ul><li>属性: childNodes 、 firstChild 、 lastChild 、 parentNode 等 </li></ul><ul><li>方法: appendChild 、 removeChild 、 replaceChild 、 insertBefore 、 getElementById 等 </li></ul>
  11. 11. 浏览器 <ul><li>浏览器对象模型 (BOM) </li></ul><ul><li>浏览器的工作 </li></ul><ul><li>页面渲染引擎 </li></ul><ul><li>JavaScript 引擎 </li></ul><ul><li>渲染页面过程 </li></ul>
  12. 12. 浏览器对象模型
  13. 13. BOM 对象 <ul><li>window 对象 </li></ul><ul><li>document 对象 </li></ul><ul><li>location 对象 </li></ul><ul><li>navigator 对象 </li></ul><ul><li>screen 对象 </li></ul>
  14. 14. 浏览器的工作 <ul><li>加载 </li></ul><ul><li>解析 </li></ul><ul><li>脚本执行 </li></ul><ul><li>渲染 (Layout) </li></ul><ul><li>样式解析 </li></ul><ul><li>输出 </li></ul><ul><li>事件处理 </li></ul>
  15. 16. Layout <ul><li>所有元素都是一个 frame 对象 </li></ul><ul><li>Frame 可以抽象的看做一个矩形框 </li></ul><ul><li>Frame 表示框的大小位置嵌套关系 </li></ul>
  16. 18. 渲染页面过程
  17. 19. 页面渲染引擎 <ul><li>WebKit ( Chrome , Safari ,傲游,搜狗) </li></ul><ul><li>Gecko ( Firefox , netscape ) </li></ul><ul><li>Presto ( Opera ) </li></ul><ul><li>Trident ( IE 内核, IE 以及各种 IE 内核浏览器) </li></ul>
  18. 20. JavaScript 引擎 <ul><li>V8 是 chrome 最新脚本引擎 </li></ul><ul><li>TraceMonkey JagerMonkey </li></ul><ul><li>Chakra 是 IE9 脚本引擎 </li></ul><ul><li>JavaScriprCore 是 safari 引擎 </li></ul><ul><li>Carakan 是 opera 引擎 </li></ul>
  19. 21. 参考 <ul><li>http://www.w3school.com.cn/w3c/w3c_dom.asp </li></ul><ul><li>http://www.iefans.net/liulanqi-neihe-jiexi / </li></ul><ul><li>Firefox 的 LayoutReflow </li></ul>
  20. 22. 谢谢!

×