读书笔记

W_x
2018-03-09 15:16:22

本书是一本实用的技术类书籍,预期读者是Web设计师。

编写的目的:让读者理解DOM脚本编程技术后面的思路和原则。

本书按照渐进的原则,首先介绍了JavaScript和DOM的基本概念(第一章——第三章),其次给出了一个图片库的实际例子让读者从简单到最佳实践(第四章——第六章),之后介绍了如何动态创建标记的方法(第七章),然后在之前搭好的web骨架基础上充实文档内容(第八章),介绍了CSS-DOM,然后利用第九章的知识实现动画效果(第九章——第十章),最后介绍了H5的技术,介绍了一个综合示例(第十一章——第十二章)。总的来说就是:从骨架到内容,从简单到复杂。

JavaScript和DOM的基本概念(第一章——第三章)

首先介绍了JavaScript的起源、DOM协议的制定过程伴随着远景和微软的浏览器竞争、最终W3C制定了标准

然后介绍了JavaScript的基础知识。

语法:语句、注释、变量、数据类型(字符串、数字、布尔值)、数组、对象

操作:算数操作符

条件语句:比较语句、逻辑操作语句

循环语句:while、for

函数:作用域(某个函数中使用了var,该变量将被视为一个局部变量

...
显示全文

本书是一本实用的技术类书籍,预期读者是Web设计师。

编写的目的:让读者理解DOM脚本编程技术后面的思路和原则。

本书按照渐进的原则,首先介绍了JavaScript和DOM的基本概念(第一章——第三章),其次给出了一个图片库的实际例子让读者从简单到最佳实践(第四章——第六章),之后介绍了如何动态创建标记的方法(第七章),然后在之前搭好的web骨架基础上充实文档内容(第八章),介绍了CSS-DOM,然后利用第九章的知识实现动画效果(第九章——第十章),最后介绍了H5的技术,介绍了一个综合示例(第十一章——第十二章)。总的来说就是:从骨架到内容,从简单到复杂。

JavaScript和DOM的基本概念(第一章——第三章)

首先介绍了JavaScript的起源、DOM协议的制定过程伴随着远景和微软的浏览器竞争、最终W3C制定了标准

然后介绍了JavaScript的基础知识。

语法:语句、注释、变量、数据类型(字符串、数字、布尔值)、数组、对象

操作:算数操作符

条件语句:比较语句、逻辑操作语句

循环语句:while、for

函数:作用域(某个函数中使用了var,该变量将被视为一个局部变量;反之视为全局变量)

对象:内建对象(Array、Math、Date)、宿主对象(Form、Image和Element等,或者document对象)

最后介绍了DOM的一些概念。

文档“D”:一个网页被加载到Web浏览器中,DOM就将网页文档转换为一个文档对象

对象“O”:用户定义对象、内建对象、宿主对象(最基础的是window对象,其属性和方法统称为BOM)

模型“M”:节点树模型

节点:元素节点、文本节点、属性节点;获取元素(document对象特有的getElementById()方法、element.getElementsByTagName()方法、element.getElementsByClassName()方法)、每个节点都是一个对象

获取和设置属性:object.getAttribute(attribute)、object.setAttribute(attribute,value)不会改变网页文档内容,DOM的工作模式:先加载文档的静态内容,再动态刷新,不影响文档的静态内容。

图片库的实际例子让读者从简单到最佳实践(第四章——第六章)

首先是案例研究:JavaScript图片库。

标记:1、增加一个占位符图片为图片预留一个浏览区域;2、点击链接,拦截网页的默认行为;点击链接时,占位符图片替换为链接对应图片

JavaScript:DOM方法和非DOM方法

应用JavaScript函数:onclick="return false"拦截默认行为

扩展函数:childNodes属性(包含这个元素的全部子元素的数组)、nodeType属性,共有12种可取的数值,3种具有实用价值(元素节点1、属性节点2、文本节点3)、firstChild和lastChild属性

然后是思考和总结最佳实践。

过去的错误:考虑使用JavaScript需要确认1、对于用户的浏览体验的影响;2、如果用户浏览器不支持JavaScript怎么办

平稳退化:用户的浏览器不支持js的情况下(javascript:伪协议、onclick来处理、搜索机器人关心)

向CSS学习:结构与样式的分离、渐进增强

分离JavaScript

向后兼容:判断浏览器对js的支持进度、浏览器嗅探技术

性能考虑:尽量减少访问DOM和减少标记;合并和放置脚本、压缩脚本(工作副本、精简副本min)

最后是案例研究:图片库的改进版。实际上是对于上一章的最佳实践原则的分条分析:平稳退化、向后兼容、分离JavaScript。

把事件处理函数移出文档:

想用JavaScript给某个网页添加一些行为,就不应该让JavaScript代码对于网页的结构有任何的依赖;

一般结构化程序设计的要求时说函数只有一个入口和出口,但是实际中,一个函数若有多个出口,只要出口集中在函数的开头部分,是可以接受的。

共享onload事件:写一个匿名函数window.onload = function(){};

向后兼容

确保可访问

如何动态创建标记的方法(第七章)

绝大多数js函数只改变网页的某些细节而不改变地层结构,网页的结构由标记负责创建。实际上js可以用来改变网页的结构和内容。

传统方法:document.write和innerHTML

DOM方法:document.createElement(nodeName)、parent.appendChild()、document.createTextNode(text)

重回图片库:parentElement.insertBefore(newElement, targetElement)

Ajax:

优势:对页面的请求以异步方式发送到服务器。

XMLHttpRequest对象

访问浏览器发送回来的数据要通过两个属性完成:responseText(保存文本字符串形式的数据)、responseXML(Document Fragment对象,可以通过各种DOM方法处理该对象)

渐进增强于Ajax

Hijax

在之前搭好的web骨架基础上充实文档内容(第八章)

一个为文档创建“缩略语里列表”的函数

一个为文档创建“文献来源链接“的函数

一个为文档创建“快捷键清单“的函数

注意:JavaScript脚本只应该用来充实文档的内容,要避免使用DOM技术来创建核心内容

这里有一个想法,为文档生成一个目录树,显示在可见区域的右上方,点击后跳转至文档相应位置

用JavaScript实现动画效果(第九章——第十章)

首先是CSS-DOM

三位一体的网页

结构层:对于网页的语义含义做出了描述,HTML或XHTML之类的标记语言创建

表示层:描述页面内容如何呈现,CSS

行为层:负责内容应该如何响应事件,Javascript语言和DOM

分离:特定的工具解决相应的问题

style属性:

文档每个元素都有个style属性,返回一个对象,包含了元素的样式;

DOM style属性不能用来检索在外部CSS文件里声明的样式,虽然是这样,但是我们可以通过赋值语句对于style的某一属性名进行赋值,以此来更新样式

利用DOM脚本设置样式

这个问题最简单的解决方案是什么;

那种解决方案会有更多的浏览器支持

className属性

然后是用JavaScript实现动画效果

动画基础知识

实用的动画

0
0

查看更多豆瓣高分好书

回应(0)

添加回应

JavaScript DOM编程艺术 (第2版)的更多书评

推荐JavaScript DOM编程艺术 (第2版)的豆列

了解更多图书信息

豆瓣
免费下载 iOS / Android 版客户端