JavaScriptDOM编程艺术(第2版)课件.pptx

1、JavaScript DOM编程艺术(第2版)2025-11-11 演讲人01上一版译者序上一版译者序021 JavaScript简史1 JavaScript简史1.1 JavaScript的起源 1.5 小结 1.4 制定标准1.4.1 浏览器以外的考虑1.4.2 浏览器战争的结局1.4.3 崭新的起点1.2 DOM 1.3 浏览器战争1.3.1 DHTML1.3.2 浏览器之间的冲突032 JavaScript语法2 JavaScript语法2.1 准备工作012.4 条件语句042.2 语法022.5 循环语句052.3 操作032.6 函数062 JavaScript语法2.7 对象2

2、.8 小结2.2 语法2 JavaScript语法2.2.1 语句2.2.2 注释2.2.3 变量2.2.6 对象2.2.5 数组2.2.4 数据类型2 JavaScript语法2.3 操作算术操作符2 JavaScript语法2.4 条件语句2.4.1 比较操作符12.4.2 逻辑操作符22 JavaScript语法2.5 循环语句2.5.1 while循环12.5.2 for循环22 JavaScript语法2.6 函数变量的作用域2 JavaScript语法2.7 对象2.7.1 内建对象12.7.2 宿主对象2043 DOM3 DOM01033.1 文档：DOM中的“D”3.2 对象：

3、DOM中的“O”3.3 模型：DOM中的“M”020405063.4 节点3.5 获取和设置属性3.5.2 setAttribute3 DOM3.6 小结3 DOM3.4 节点3.4.1 元素节点3.4.2 文本节点3.4.3 属性节点3.4.4 CSS3.4.5 获取元素3.4.6 盘点知识点3 DOM3.5 获取和设置属性3.5.1 getAttribute054 案例研究：JavaScript图片库4 案例研究：JavaScript图片库4.5 小结4.4 对这个函数进行扩展4.3 应用这个JavaScript函数4.2 JavaScript4.1 标记LOGOM.94275.CN4 案

4、例研究：JavaScript图片库4.2 JavaScriptA4.2.1 非DOM解决方案4.2.2 最终的函数代码清单B4 案例研究：JavaScript图片库4.3 应用这个JavaScript函数事件处理函数4.4 对这个函数进行扩展4 案例研究：JavaScript图片库4.4.6 firstChild和lastChild属性4.4.5 nodeValue属性4.4.4 用JavaScript改变这段描述4.4.3 在标记里增加一段描述4.4.2 nodeType属性4.4.1 childNodes属性4 案例研究：JavaScript图片库4.4 对这个函数进行扩展4.4.7 利用

5、nodeValue属性刷新这段描述065 最佳实践5 最佳实践5.1 过去的错误5.2 平稳退化5.3 向CSS学习5.6 性能考虑5.5 向后兼容5.4 分离JavaScript5 最佳实践5.7 小结5 最佳实践5.1 过去的错误CBA5.1.1 不要怪罪JavaScript5.1.2 Flash的遭遇5.1.3 质疑一切5 最佳实践5.2 平稳退化CBA5.2.1“javascript:”伪协议5.2.2 内嵌的事件处理函数5.2.3 谁关心这个5 最佳实践5.3 向CSS学习5.3.1 结构与样式的分离5.3.2 渐进增强5 最佳实践5.5 向后兼容5.5.1 对象检测15.5.2 浏

6、览器嗅探技术25.6 性能考虑5 最佳实践5.6.2 合并和放置脚本5.6.1 尽量少访问DOM和尽量减少标记5.6.3 压缩脚本076 案例研究：图片库改进版6 案例研究：图片库改进版AEDFBC6.2 它支持平稳退化吗6.3 它的 JavaScript 与HTML标记是分离的吗6.5 优化6.4 不要做太多的假设6.6 键盘访问6.1 快速回顾6 案例研究：图片库改进版6.8 DOM Core和HTML-DOM6.7 把JavaScript与CSS结合起来6.9 小结6.3 它的 JavaScript 与HTML标记是分离的吗6 案例研究：图片库改进版6.3.2 共享onload事件6.3

7、.1 添加事件处理函数6 案例研究：图片库改进版6.6 键盘访问小心onkeypress087 动态创建标记7 动态创建标记D7.4 AjaxE7.5 小结A7.1 一些传统方法B7.2 DOM方法C7.3 重回图片库7 动态创建标记7.1 一些传统方法A7.1.1 document.write7.1.2 innerHTML属性B7.2 DOM方法7 动态创建标记7.2.2 appendChild方法7.2.4 一个更复杂的组合7.2.1 createElement方法7.2.3 createTextNode方法7 动态创建标记7.3 重回图片库CBA7.3.1 在已有元素前插入一个新元素7.

8、3.2 在现有元素后插入一个新元素7.3.3 图片库二次改进版7 动态创建标记7.4 Ajax7.4.2 渐进增强与Ajax7.4.3 Hijax7.4.1 XMLHttpRequest对象098 充实文档的内容8 充实文档的内容018.1 不应该做什么028.2 把“不可见”变成“可见”038.3 内容048.4 显示“缩略语列表”058.5 显示“文献来源链接表”068.6 显示“快捷键清单”8 充实文档的内容8.7 检索和添加信息8.8 小结8 充实文档的内容8.3 内容8.3.1 选用HTML、XHTML还是HTML58.3.2 CSS8.3.3 JavaScript8.4 显示“缩略

9、语列表”8 充实文档的内容8.4.2 创建标记8.4.1 编写displayAbbreviations函数8.4.3 一个浏览器“地雷”8 充实文档的内容8.5 显示“文献来源链接表”编写displayCitations函数109 CSS-DOM9 CSS-DOM9.5 小结9.4 className属性9.3 何时该用DOM脚本设置样式9.2 style属性9.1 三位一体的网页9 CSS-DOM9.1 三位一体的网页019.1.1 结构层9.1.2 表示层029.1.3 行为层039.1.4 分离049.2 style属性9 CSS-DOM9.2.1 获取样式19.2.2 设置样式29 C

10、SS-DOM9.3 何时该用DOM脚本设置样式9.3.2 根据某种条件反复设置某种样式贰9.3.1 根据元素在节点树里的位置来设置样式壹9.3.3 响应事件叁9 CSS-DOM9.4 className属性对函数进行抽象1110 用JavaScript实现动画效果10 用JavaScript实现动画效果10.2 实用的动画0210.3 小结0310.1 动画基础知识0110 用JavaScript实现动画效果10.1 动画基础知识10.1.1 位置110.1.3 时间递增量310.1.2 时间210.1.4 抽象410.2 实用的动画10 用JavaScript实现动画效果10.2.1 提出问

11、题10.2.2 解决问题10.2.3 CSS10.2.6 改进动画效果10.2.5 变量作用域问题10.2.4 JavaScriptLOGOM.94275.CN10 用JavaScript实现动画效果10.2 实用的动画110.2.7 添加安全检查210.2.8 生成HTML标记1211 HTML511 HTML51 1.1 H T ML 5 简介1 1.2 来 自朋 友 的 忠 告11.3 几个示例1 1.4 H T M L 5 还 有其 他 特 性 吗11.5 小结 1 1.3.1 C a n v a s1 1.3.2 音 频 和视 频1 1.3.3 表 单 1312 综合示例12 综合示

12、例12.1 项目简介A12.2 设计B12.3 CSSC12.4 标记D12.5 JavaScriptE12.6 小结F12 综合示例12.1 项目简介12.1.1 原始资料12.1.2 站点结构12.1.3 页面结构12 综合示例12.3 CSS12.3.1 颜色12.3.2 布局12.3.3 版式12.5 JavaScript12 综合示例12.5.1 页面突出显示12.5.2 JavaScript幻灯片12.5.3 内部导航12.5.6 增强表单12.5.5 增强表格12.5.4 JavaScript图片库12 综合示例12.5 JavaScript12.5.7 压缩代码14附录 JavaScript库附录 JavaScript库感谢聆听