JavaScript DOM编程艺术(第2版)的简单总结

时间:2021-09-26 16:14:12

介绍

JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript、DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发。

JavaScript DOM编程艺术(第2版)的简单总结

下面介绍一下各章节的讲到的内容。

第1章 JavaScript简史

本章主要讲解JavaScript的发展简史、不同的浏览器会采用不同的办法来完成一样的任务,这会影响JavaScript的发展,而DOM标准化,让这种情况有所改变。而本书要讲的就是JavaScript和DOM一起完成的任务,不需要讨论浏览器。

第2章 JavaScript语法

本章主要是在使用DOM之前,学习一下JavaScript语法。主要是讲解语法(语句/注释/变量/数据类型/数组/对象/)、用于计算和处理数据的操作符、使用if/if-else/if-else if-...-else的条件语句、循环语句、函数等在下面能用到的语法。

第3章 DOM

本章主要讲解 DOM 由文档、对象和模型三者组成,和三者在其中表达的意思。还有 DOM 提供了五个方法,用于操作DOM模型:getElementById/getElementsByTagName/getElementByClassName/getAttribute/setAttribute。除了上述的这些,还提供了许多其它的属性和方法,如 nodeName/nodeValue/childNodes/nextSibling/parentNode等。

第4章 案例研究:JavaScript图片库

本章介绍了一个简单的 JavaScript 应用案例,和 DOM 提供的几个新属性:childNodes/nodeType/nodeValue/firstChild/lastChild。重点就是如何利用DOM提供的方法去编写图片库脚本和如何利用事件处理函数把JavaScript代码与网页集成在一起。

第5章 最佳实践

本章介绍了一些与 DOM 脚本编程工作有关的概念和实践,如平稳退化、分离JavaScript、向后兼容和性能考虑。

第6章 案例研究:图片库改进版

本章主要是对上述案例的图片库进行多项优化,将HTML标记变得更加整齐。还提供一个基本的 CSS。还有最重要的JavaScript代码的改进。

  • 尽量让JavaScript代码不再依赖于没有保证的假设,为此引入许多项测试和检查。测试和检查能使JavaScript代码能够平稳退化。
  • 没有使用 onkeypress 事件处理函数,使得JavaScript代码的可访问性得到保证。
  • 最重要的是把事件处理函数从标记文档分离到一个外部的JavaScript文件。使得JavaScript代码不再依赖于HTML文档的内容和结构。

第7章 动态创建标记

本章主要介绍几种不同的向浏览器的文档动态添加标记的办法。

  • createElement方法。
  • createTextNode 方法。
  • appendChild方法。
  • insertBefore方法。

并且还简要地回顾两种“传统的”技术:

  • document.write方法。
  • innerHTML属性。

使用这些方法的关键是将 Web 文档视为节点树。要注意,用 createElement/createTextNode方法创建的节点还没有插入到HTML中。利用 appendChild/insertBefore方法,可以将这些DocumentFragment对象插入某个文档的节点树,让它们呈现在浏览器窗口中。

这一章还讲到了对图片库如何做进一步改进。这里,有一个实用的 insertAfter 函数的构建过程。在需要把一些标记添加到文档时,这个函数往往能帮上忙。

第8章 充实文档的内容

本章主要介绍使用 JavaScript 语言和 DOM 去维护和创建标记。用以充实文档的内容。主要是 JavaScript 和 DOM 的使用状况。

第9章 CSS-DOM

本章主要介绍 CSS-DOM 技术是如何得到和设置 style 对象的各种属性,而 style 对象本身又是文档中的每个元素节点都具备的属性。

style 属性的最大限制是它不支持获取外部 CSS 设置的样式。但仍可以利用 style 属性去改变各种 HTML 元素的呈现效果。这在无法或是难以通过外部 CSS 去设置样式的场合非常有用。只要有可能,就应选择更新 className 属性,而不是去直接更新 style 对象的有关属性。

在本章中,主要介绍了以下几种 CSS_DOM 技术的具体应用示例。

  • 根据元素在节点树里的位置设置样式(styleHeaderSiblings函数)。
  • 遍历一个节点集合设置有关元素的样式(stripeTables函数)。
  • 在事件发生时设置有关元素的样式(highlightRows函数)。

这几种应用都属于用 JavaScript 入侵 CSS 领地的情况,而这么做的理由不外乎两点:其一是 CSS 无法找到想要处理的目标元素,其二是用 CSS 寻找目标元素的办法还未得到广泛的支持。

第10章 用JavaScript实现动画效果

本章主要讲的是使用 JavaScript 实现动画效果。首先对 “动画” 进行了定义:随时间变化而改变某个元素在浏览器窗口里的显示位置。通过结合使用 CSS-DOM 和 JavaScript 的 setTimeout 函数,很容易实现一个简单的动画。

在这里,主要是使用 JavaScript 创建的动画,使得图片库能够有平滑的动画效果和平稳退化。

第11章 HTML5

本章主要讲解 HTML5 以及使用 Modernizr 等工具检测特性的重要性。同时编写几个例子来熟悉使用 HTML5 的特性。这里介绍的 HTML5 的新特性包括:

  • 可以用来在文档中绘制矢量及位图的 <canvas> 元素。
  • 可以免插件而直接在网页中嵌入音频和视频的 <audio><video> 元素。
  • 可以提供更广泛选择的新的表单控件类型以及新的属性。

第12章 综合示例

本章主要是学以致用,将上面的知识加入到你创建的网站中。这里主要把内容放在有效的、语义化的 HTML5 标签里面,并用外部样式表实现整个外观设计。最后,利用 JavaScript 和 DOM 为它添加诸多交互功能及可用性方面的增强。

到这里就已经学完了书中的内容并应用到实际,构建完整的站点。但是,前端之路也才刚开始,本书只是JavaScript入门书籍,都是围绕 DOM 技术进行编程。

如想获取本资源请按以下步骤操作:

  • 识别二维码并关注公众号 「海人的博客」
  • 在公众号后台回复关键字 「1367」

JavaScript DOM编程艺术(第2版)的简单总结