客户端 javascript 及浏览器 金融界 UED| 王建军
<ul><li>JavaScript 概况 </li></ul><ul><li>客户端 JavaScript 的特性 </li></ul><ul><li>文档对象模型 -DOM </li></ul><ul><li>浏览器 </li></ul>
javascript 概况 <ul><li>轻型的、弱类型、解释型的语言  </li></ul><ul><li>具有面向对象的能力 </li></ul><ul><li>ECMA 制定 javascript 标准 </li></ul><ul><l...
客户端 javascript <ul><li>客户端 javascript = javascript + DOM + BOM </li></ul><ul><li>JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象。...
客户端 JavaScript 的特性 <ul><li>控制文档的外观和内容 </li></ul><ul><li>对浏览器的控制 </li></ul><ul><li>与 HTML 表单交互 </li></ul><ul><li>与用户交互 </li...
常用 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>
HTML DOM
文档对象模型 <ul><li>DOM 是操作文档的应用程序接口 (API) </li></ul><ul><li>以树形结构表示 HTML 文档 </li></ul><ul><li>DOM 树是各种类型的 Node 对象的数 </li></ul>...
nodeType 2 Attr 11 DocumentFragment 8 Comment 9 Document 3 Text 1 Element nodeType 值 节点类型
Node 属性和方法 <ul><li>属性: childNodes 、 firstChild 、 lastChild 、 parentNode 等 </li></ul><ul><li>方法: appendChild 、 removeChild ...
浏览器 <ul><li>浏览器对象模型 (BOM)  </li></ul><ul><li>浏览器的工作 </li></ul><ul><li>页面渲染引擎 </li></ul><ul><li>JavaScript 引擎  </li></ul><u...
浏览器对象模型
BOM 对象 <ul><li>window 对象 </li></ul><ul><li>document 对象 </li></ul><ul><li>location 对象 </li></ul><ul><li>navigator 对象 </li><...
浏览器的工作 <ul><li>加载 </li></ul><ul><li>解析 </li></ul><ul><li>脚本执行 </li></ul><ul><li>渲染 (Layout) </li></ul><ul><li>样式解析 </li></...
 
Layout <ul><li>所有元素都是一个 frame 对象 </li></ul><ul><li>Frame 可以抽象的看做一个矩形框 </li></ul><ul><li>Frame 表示框的大小位置嵌套关系 </li></ul>
 
渲染页面过程
页面渲染引擎 <ul><li>WebKit ( Chrome , Safari ,傲游,搜狗) </li></ul><ul><li>Gecko ( Firefox , netscape ) </li></ul><ul><li>Presto ( ...
JavaScript 引擎 <ul><li>V8 是 chrome 最新脚本引擎 </li></ul><ul><li>TraceMonkey  JagerMonkey </li></ul><ul><li>Chakra 是 IE9 脚本引擎 </...
参考 <ul><li>http://www.w3school.com.cn/w3c/w3c_dom.asp   </li></ul><ul><li>http://www.iefans.net/liulanqi-neihe-jiexi /   <...
谢谢!
Upcoming SlideShare
Loading in …5
×

客户端Javascript及浏览器

6,066 views
5,945 views

Published on

客户端Javascript及浏览器

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,066
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 当把一个 JavaScript 解释器嵌入浏览器时,就形成了客户端 Javascript
  • ECMA 制定 javascript 标准 W3C 指定 DOM 标准, DOM 级别分 1 2 3 IE5.5 以上支持几乎全部的 DOM Level 1 其它浏览器支持全部 DOM 1 ,几乎全部的 DOM 2 和部分的 DOM 3
  • 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 的功能进行了扩展。
  • DOM 树的根节点是个 Document 对象,该对象的 documentElement 属性引用表示文档根元素的 Element 对象 文档( Document )节点除了根元素外还可能有其它子节点,如 Comment 节点
  • DOM 是表示文档(如 HTML 文档)和访问、操作构成文档的各种元素(如 HTML 标记和文本串)的应用程序接口( API ) 以树形结构表示 HTML 文档(或 XML ),定义了遍历这个树和检查、修改树的节点的方法和属性 The DOM is a programming  API  for documents.
  • 客户端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. 谢谢!

    ×