这本书留给我的印象就是结构、表现和行为层的分离，以及书后面部分一直在强调的最佳实践原则：平稳退化，逐步增强，向后兼容以及性能考虑。

要注意这不是一本JavaScript入门书籍~

2.1 准备工作

用JavaScript编写的代码必须通过HTML/XHTML文档才能执行。最好的做法是把<script>标签放到HTML文档的最后，</body>标签之前：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Example</title>

</head>

<body>

  Mark-up goes here...

  <script src="file.js"></script>

</body>

</html>

这样能使浏览器更快地加载页面。

2.2 javascript语法

2.2.1 语句

我们建议在每条语句的末尾都加上一个分号，这是一种良好的编程习惯；

first statement;

second statement;

这样做让代码更容易阅读。让每条语句独占一行的做法能更容易跟踪JavaScript脚本的执行顺序。

2.2.2 注释

建议大家用"//"来注释单行，用"/*"注释多行

2.2.3 变量

虽然JavaScript没有强制要求程序员必须提前声明变量，但提前声明变量是一种良好的编程习惯。

在JavaScript语言里，变量和其他语法元素的名字都是区分字母大小写的。

JavaScript是一种弱类型语言，这意味着程序员可以在任何阶段改变变量的数据类型。

2.2.4 数组

用对象来代替传统数组的做法意味着可以通过元素的名字而不是下标数字来引用它们。这大大提高了脚本的可读性。

创建对象的方法：

var lennon = Object();

lennon.name = "John"

lennon.year = 1940;

lennon.living = false;

创建对象还有一种更简洁的语法，即花括号语法：

{propertyName:value, propertyName:value}

比如，lennon对象也可以写成下面这样:

var lennon = { name:"John", year:1940, living:false };

2.4 条件语句

因为花括号可以提高脚本的可读性，所以在if语句中总是使用花括号是个好习惯。

2.4.1 比较操作符

操作符==并不代表严格相等， 这一点很容易让人犯糊涂。例如比较false与空字符串会得到什么结果？

var a = false;

var b = "";

if (a == b) {

  alert("a equals b");

}

这个条件语句的求值结果是true，为什么？因为相等操作符==认为空字符串与false含义相同。要进行严格比较，就要使用另一种等号(===)。这个全等操作符会执行严格的比较，不仅比较值，而且会比较变量的类型。

当然，对于不等操作符!=也是如此，如果想比较严格不相等，就要使用!==。

2.6 函数

在命名变量时，用下划线来分隔各个单词，在命名函数时，从第二个单词开始把每个单词的第一个字母写成大写形式(也就是所谓的驼峰命名法)。这么做是为了能够一眼看出那些名字是变量，那些名字是函数。

如果在某个函数中使用了var，这个变量就将被视为一个局部变量，它只存在于这个函数的上下文之中；反之，如果没有使用var，那个变量就将被视为一个全局变量，如果脚本里已经存在一个与之同名的全局变量，这个函数就会改变那个全局变量的值。

function square(num) {

  total = num * num;

  return total;

}

var total = 50;

var number = square(20);

alert(total);

运行后全局变量total的值变成了400.

正确的做法是：

function square(num) {

  var total = num * num;

  return total;

}

3.3.4 CSS

继承(inheritance)是CSS技术中的一项强大功能，节点树上的各元素将继承其父元素的样式属性。

为了把某一个或某个元素与其他元素区别开来，需要使用class属性或id属性。

一份文档就是一颗节点树。

节点分为不同的类型：元素节点、属性节点和文本节点等。

3.4.5 获取元素

有3种DOM方法可获取元素节点，分别通过元素ID、通过标签名字和通过类名字来获取。

getElementById，getElementsByTagName，getElementsByClassName;

getElementById返回的是一个对象，getElementsByTagName和getElementsByClassName返回的是一个对象数组。

3.5 获取和设置属性

getAttribute()用来获取元素的各个属性，setAttribute()则可以更改属性节点的值。

语法：getAttribute(attritute);  setAttribute(attribute, value);

4.3 应用这个JavaScript

onclick()函数的处理技巧

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>Image Gallery</title>

</head>

<body>

  <a href="fireworks.jpg" title="A fireworks display">Fireworks</a>

</body>

</html>

当我们点击链接时，会发现图片跳到了另外一个页面进行显示。

如果这不是我们想要的，可以在<a>元素中加入onclick="return false;"，使得页面不进行跳转。

想让func()函数在页面加载时执行，需要使用onload事件处理函数.

4.4.5 nodeValue属性

如果想改变一个文本节点的值，那就使用DOM提供的nodeValue属性，它用来得到（和设置）一个节点的值。

在用nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本。你要得到的其实是它的第一个子节点的nodeValue属性值。

firstChild和lastChild

第5章 最佳实践

  • 平稳退化：确保网页在没有JavaScript的情况下也能正常工作。
  • 分离JavaScript：把网页的结构和内容与JavaScript脚本的动作行为分开。
  • 向后兼容性：确保老版本的浏览器不会因为你的JavaScript脚本而死掉。
  • 性能考虑：确定脚本执行的性能最优。

5.2 平稳退化

如果正确地使用了JavaScript脚本，就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地访问你的网站。这就是所谓的平稳退化(graceful degradation)，就是说，虽然某些功能无法使用，但最基本的操作仍能顺利完成。

5.3 渐进增强

所谓"渐进增强"，就是用一些额外的信息层去包裹原始数据。按照"渐进增强"原则创建出来的网页几乎都符合"平稳退化"原则。

5.4 分离JavaScript

5.5 向后兼容

5.5.1 对象检测

if (!method) {

  return false;

}

5.6 性能考虑

  • 尽量少访问DOM和尽量减少标记
  • 合并和放置脚本
  • 压缩脚本(使用代码压缩工具)

每个优秀的网页设计人员总是会在每个细节上问自己这样一个问题："是否还有更好的解决办法？"

作为一条原则，如果想用JavaScript给某个网页添加一些行为，就不应该让JavaScript代码对这个网页结构有任何依赖。

最好不要使用onkeypress事件处理函数。onclick事件处理函数已经能满足需要。

同样的操作既可以只使用DOM Core来实现，也可以使用HTML-DOM来实现。正如大家所看到的那样，HTML-DOM代码通常会更短，必须提醒一下，他们只能用来处理Web文档。如果你打算用DOM处理其他类型的文档，请千万注意这一点。

一定要从DOM的角度去思考问题。在DOM看来，一个文档就是一棵节点树。如果你想在节点树上添加内容，就必须插入新的节点。如果你想添加一些标记到文档，就必须插入元素节点。

7.2 DOM方法

createElement()，appendChild()，createTextNode()，insertBefore()，insertAfter()。

7.4 Ajax

Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而JavaScript通过这个对象可以自己发送请求，同时也自己处理响应。

构建Ajax网站的最好方法，是先构建一个常规网站，然后Hijax它。

8.1 不应该做什么

如果你察觉到自己正在使用DOM技术把一些重要的内容添加到网页上，则应该立刻停下来去检讨你的计划和思路，你很可能会发现自己正在滥用DOM!

即使某种特定的浏览器会引起问题，也没有必要使用浏览器嗅探代码。对浏览器的名称和版本号进行嗅探的办法是很难做到面面俱到的，而且往往会导致非常复杂难解的代码。

在编写DOM脚本时，你会想当然地认为某个节点肯定是一个元素节点，这是一种相当常见的错误。如果没有百分之百的把握，就一定要去检查nodeType属性值。有很多DOM方法只能用于元素节点，如果用在了文本节点上，就会出错。

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

第10章 用JavaScript实现动画效果

JavaScript函数parseInt()可以把字符串里的数值信息提取出来。如果把一个数字开头的字符串传递给这个函数，它将返回一个数值： 例如parseInt("39 steps")返回数值39；

如果需要提取的是浮点数，就应该使用相应的parseFloat()函数。

JavaScript DOM 编程艺术(第二版) 初读学习笔记的更多相关文章

  1. 【JavaScript DOM编程艺术(第二版)】笔记

    第1章 javascript简史 1.什么是DOM? 简单的说,DOM是一套对文档的内容进行抽象和概念化的方法.\         第2章 javascript语法 1.内建对象: 内建在javasc ...

  2. JavaScript DOM编程艺术第二版学习（1/4）

    接下来项目需要网页相关知识,故在大牛的指引下前来阅读本书. 记录方式:本书分四部分阅读,完成阅读之后会多写一篇包括思维导图的算是阅读指南的东西,浏览的童鞋看着指南可以跳过一些不必要的坑~ 当前水平:H ...

  3. JavaScript DOM 编程艺术(第二版) 有待解决的问题

    原书 P181,var repeat = "moveElement('"+elementID+"', "+final_x+", "+fina ...

  4. JavaScript DOM 编程艺术(第二版) 常用JS小脚本

    function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') ...

  5. 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  6. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  7. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  8. JavaScript DOM编程艺术（第2版）的简单总结

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

  9. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

随机推荐

  1. 清除input输入框的历史记录

    当之前的input框输入了数据后,下次输入有历史记录问题的解决方法 <input id="vhcl_no"  type="text"  autocompl ...

  2. ribbon负载均衡循环策略源码

    (原) 在用ribbon负载均衡取eureka注册中心中的地址时,默认采用循环策略,例如商品服务有3个,分别为URL1,URL2,URL3,那么在客户端第一次取时,会取到URL1,第二次取时取到URL ...

  3. USRPX310 在GNU Radio上更改通道A或B

    UHD:USRP sink和USRP source默认是A通道发射接收.或设置 Mb0:Subdev Spec: A:0 更改为B通道收发:设置 Mb0:Subdev Spec: B:0

  4. jpa @Query()参数设置，:冒号方式、？NO.问号方式、实体类对象参数设置

    一.service层事务(update/delete) @Transactional(rollbackFor = Exception.class) 二.@Query()参数设置 ?x  和:XX不能混 ...

  5. Java笔试题及答案

    1.下列不可作为java语言修饰符的是(D) A) a1 B) $1 C) _1 D) 11 答案:java标识符不能以数字开头,包含英文字母,数字,下划线以及$ 2.有一段java 应用程序,它的主 ...

  6. Linux Bonding

    https://www.cnblogs.com/huangweimin/articles/6527058.html 管理   linux下网卡bonding配置   章节 bonding技术 cent ...

  7. MyBatis注解开发-@Insert和@InsertProvider

    @Insert和@InsertProvider都是用来在实体类的Mapper类里注解保存方法的SQL语句.不同的是,@Insert是直接配置SQL语句,而@InsertProvider则是通过SQL工 ...

  8. Word：表格在页面中垂直居中

    本文适用于Word 2007 + Windows 7,熊猫帮帮主@cnblogs 2018/2/22 如何让表格在页面上垂直居中呢.想当然的认为这属于表格的设置,在表格属性和其它表格相关选项中一通猛找 ...

  9. Confluence 6.15 博客页面（Blog Posts）宏

    博客页面宏允许你 Confluence 页面中显示博客页面.通过单击博客的标题将会把你链接到博客页面中. 使用博客页面宏 为了将博客页面宏添加到页面中:  从编辑工具栏中,选择 插入(Insert)  ...

  10. 苹果cms网站添加TV电视直播教程

    1,首先添加一个新分类,分类的名称填写“电视直播”[状态:选启用].这里要注意下面的分类模板和播放模板需要修改一下名称.即在默认名称前面添加 " v_" 即v加下划线即可. 2,刚 ...