客户端Javascript及浏览器
Upcoming SlideShare
Loading in...5
×
 

客户端Javascript及浏览器

on

  • 3,339 views

客户端Javascript及浏览器

客户端Javascript及浏览器

Statistics

Views

Total Views
3,339
Slideshare-icon Views on SlideShare
3,338
Embed Views
1

Actions

Likes
2
Downloads
12
Comments
0

1 Embed 1

http://write.blog.csdn.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • 当把一个 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及浏览器 客户端Javascript及浏览器 Presentation Transcript

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