资讯专栏INFORMATION COLUMN

《JavaScript DOM编程艺术(第2版)》笔记

lentrue / 2998人阅读

摘要:编程艺术第版笔记第章简史的起源是公司和公司合作开发的。第章文档对象用户定义对象内建对象如等。宿主对象由浏览器提供的对象。伪协议非标准化的协议。结构样式行为要分离。压缩脚本第章案例研究图片库改进版共享事件函数需要多个函数都在页面加载时执行。

《JavaScript DOM 编程艺术(第2版)》笔记

第1章:JavaScript 简史

JavaScript 的起源

JavaScript 是 Netscape 公司和  Sun 公司合作开发的。

DOM

DOM 是一套对文档的内容进行抽象和概念化的方法。

浏览器战争

今天,几乎所有的浏览器都内置了对 DOM 的支持,只要遵循 DOM 标准,就可以放心大胆的去做。
第2章:JavaScript 语法

语句

建议在每条语句末尾都加上分号。

注释

// 单行注释
/* 多行注释
   多行注释*/

变量

var mood = "happy";
var age = 33;

数据类型

字符串

数值

布尔值

数组

数组

关联数组

对象

操作符

算术操作符

+ ,-,*,/,++,--,+=

比较操作符

>,=,<,>=,<=,==,!=,===.......

==并不表示严格相等,认为 false 与 "" 表示的含义相同。

false == "";
// true

=== 进行严格比较,不仅比较值,而且比较变量的类型。

false === "";
// false

逻辑操作符

条件语句和循环语句

if (condions) {
    statemen}

while循环

while (conditions) {
    statements;
}

for 循环

函数与对象

函数:

function name(arguments) {
    statements;
}

对象(object):

对象是一种非常重要的数据类型。

对象的两种访问形式:

属性 Object.property

方法 Object.method()

宿主对象:在Web应用中就是由浏览器提供的预定义对象。

第3章:DOM

DOM:

文档:D (document)

对象:O(object)

用户定义对象

内建对象:如 Array,Math,Data等。

宿主对象:由浏览器提供的对象。

模型: M(model)

节点(node):

元素节点

文本节点

属性节点

获取元素:

getElementById

getElementsByTagName

getElementsByClassName

获取属性:

getAttribute

设置属性:

setAttribute

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

介绍了 DOM 提供的几个新属性:

childNodes

nodeType

nodeValue

firstChild

lastChild

第5章:最佳实战 平稳退化
平稳退化(graceful degradation):正确使用 JavaScript 脚本,可以让访问者在他们的浏览器不支持 JavaScript 的情况下仍然能顺利地浏览你的网站。

不能平稳退化会影响你的网页在搜索引擎上的排名。

"javascript:" 伪协议:这种做法非常不好

真协议:用来在因特网上的计算机之间传输数据包,如HTTP协议(http://)、FTP协议(ftp://)等。

伪协议:非标准化的协议。

// 用"javascript:" 伪协议调用 popUp()函数:
Example

内嵌的事件处理函数

Example

非常不好,因为#只是创建了一个空链接。

平稳退化办法:将 href 属性设置为真实存在的 URL 地址,让它成为一个有效的链接。

Example

这样,即使 javascript 被禁止,这个链接也是可用的。

渐进增强
渐进增强就是用一些额外的信息层去包裹原始数据。

按照“渐进增强”原则创建出来的网页几乎都符合“平稳退化”原则。

结构、样式、行为要分离。

向后兼容

对象检测

// 例如
if (!document.getElementById) {
    return false;
}

浏览器嗅探技术

通过提取浏览器供应商提供的信息来解决向后兼容问题。

性能考虑

尽量少访问DOM和尽量减少标记

合并和放置脚本

推荐把 functionA.js,functionB.js,functionC.js合并到一个脚本文件中,这样可以减少加载页面时发送的请求数量。

阅读需要支付1元查看
<