《JavaScript Dom 编程艺术》读书笔记 17%

笔记进度： 45/ 264 = 17%

第1章，JavaScript简史

JavaScript 起源

JavaScript由Netscape公司和Sun公司合作开发，为了对抗微软公司的竞争，Netscape和Sun联合欧洲计算机制造商协会对JavaScript进行标准化，于是出现了ECMAScript语言，即我们日常所说的JavaScript。

Dom

W3C对DOM的官方定义是：一个与系统平台和编程语言无关的接口API，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构与样式。

DHTML

动态HTML(Dynamic HTML)的简称，它是描述HTML,CSS,JavaScript技术组合的术语，背后的含义是：

利用HTML把网页标记为各种元素
利用CSS设置元素样式和它们的显示位置
利用JavaScript实时的操控页面和改变样式

第2章 JavaScript语法

JavaScript的两种引用方式

第一种方式是将JavaScript代码放到文档<head>标签中的<script> </script>标签之间
```
 <head>
 <script>
 
 	JavaScript goes here ... 
 
 </script>
 </head>
```
第二种方式是把JavaScript代码存为一个扩展名为.js的独立文件，用一个<script>标签的src属性引用它
```
 <script> src='file.js'>  </script>
```
最好的方法

把<script>标签放到HTML文档的最后，</body>标签之前，这样做的好处是可以更快的加载页面。而且可以避免出现引用失败
```
 <body>
 
 ... body content ... 
 
 <script>
 
 	JavaScript goes here 
 	
 </script>
 </body>
```

编程语言分类

编译型语言：需要一个编译器，将高等语言的源代码翻译为可以直接在计算机上执行的文件
解释型语言：不需要编译器，它们仅需要解释器

编译型语言如果有错误，这些错误在编译阶段可能就能被发现，而解释型语言代码中的错误只有解释器执行到有关代码时才能被发现，与解释型语言相比，编译型语言往往速度更快，可移植性更好，但他们的学习曲线也更陡峭。

语句

各条语句放在不同的行上
```
 var a = 'hello';
 var b = 'world';
```
多条语句放在一行时要在中间加;
```
 var a = 'hello'; b = 'world' ; 
```

注释

// 这是注释的第一种方式，适合单行注释 (建议使用)
```
 //	ele2.style.left = '600px';
```

/* 这是注释的第二种方式，适合多行注释 */ （不建议使用）

 /*  
   function moveLeft() {
         if (!document.getElementById) return false;
         if (!document.getElementById('kk')) return false;
         var ele2 = document.getElementById('kk');
         ele2.style.left = '600px';
         setTimeout('moveUp()', t)
     }
 */

变量名

JavaScript区分大小写
允许包含字母，数字，美元符号和下划线，第一个字符不允许是数字
不允许变量名中包含空格或标点符号（美元符号除外）
推荐驼峰格式，即删除下划线，后面的每个新单词改用大写字母开头。
```
 var myCurMood = 'happy'
```

变量声明

JavaScript 允许程序员直接对变量赋值而不用事先声明
提前声明变量是一种良好的编程习惯
可以每行声明一个变量，也可以一行声明多个变量
```
 var mood;  
 var age;  

 var mood, age ;
```

可以声明和赋值同时完成

 var mod = 'happy';
 var mod = 'happy', age=33

数据类型

JavaScript是一种弱类型语言，不需要进行类型声明，程序员可以在任何阶段改变变量的数据类型。

1. 字符串

字符串由0个或多个字符包裹在单引号/双引号之间表示，如果字符串中有特殊字符，使用反斜线 \ 对特殊字符进行转义

var mood = "don't  ask";
var mood = 'don\'t ask';

使用单引号或双引号取决于个人风格习惯，但是选定一种就应该在整个脚本中保持一致。

2. 数值

JavaScript使用一种数据类型表示所有的整数，浮点数，负数

3. 布尔值

布尔数据类型只有两种 -- true 或 false, 小写

var sleeping = true;

4. 数组

数组是指用一个变量表示一个值的集合，集合中的每个元素都是这个数组的一个元素。

数组的声明

方式1

	var beatles = Array(4)
	
	beatles[0] = 'John';
	beatles[1] = 'Paul';
	beatles[2] = 'George';
	beatles[3] = 'Ringo';

方式2

	var beatles = Array('John','Paul','George','Ringo');

方式3

	var beatles = ['John', 'Paul', 'George', 'Ringo']

数组的元素可以是数字，字符串，数组，变量等，非常灵活

关联数组

	var lennon = Array();
	
	lennon["name"] = "John" ;
	lennon["year"] = 40 ;

不推荐使用关联数组，本质上，在创建关联数组时，你创建的是Array对象的属性，理想情况下，你不应该修改Array对象的属性，如果要修改，应该使用通用对象Object.

5. 对象

对象也是一个名字表示一组值，对象的每个值都是对象的一个属性

对象的第1种创建方法

 var lennon = Object();
 
 lennon.name = "John" ;
 lennon.year = 40 ;

对象的第2种创建方法

 var lennon = {name : "John", year : 40}

对象的第3种创建方法

 var lennon = {} ;
 
 lennon.name = "John" ;

2.3 操作

算术操作符

 加  	+  
 减  	-  
 乘  	*	  
 除  	/
 
 + 	 还可以用于拼接字符串，拼接数字和字符串时自动将数字转为字符

 +=  -+ 	操作+赋值
 ++  -- 	自加/自减

条件语句

if ( condition ) {
	statements;
	}
	
如果statements只有一句可以不用{}

if (condition) statement ;


条件判断 
if ( condition ){
	statements;
	} 
else{
	statements;
	}

带上花括号是个好习惯，即使statement只有一句也应该带上{}。

比较操作符

>  <  >=  <=

!=    不等       # 布尔判断
!==   严格不等    

=     赋值
==    相等 （）   # 布尔判断 
===   严格相等

逻辑操作符

&&		逻辑 与
||		逻辑 或
! 		逻辑 非

循环

while 循环

while (condition){
	statements;
	}

for 循环

for (initial condition; test condition; alter condition)
{
statements;
}

函数

如果需要多次使用同一段代码，应该把他们封装成一个函数

作为一种良好的编程习惯，应该先定义函数再调用它们

函数真正的价值在于，我们可以把它当作一种数据类型来使用，这意味着可以把一个函数的调用结果赋值给一个变量。

变量作用域

全局变量可以在脚本中的任何位置被引用
局部变量只存在于声明它的那个函数内部，

局部变量使用关键字 var 声明
请记住：在定义一个函数时，一定要把它内部的变量全部明确定义为局部变量，这样才能避免二义性隐患。

对象

对象就是由一些属性和方法组合在一起而构成的一个数据实体。包含在对象里的数据可以通过两种形式访问 -- 属性（property）和方法（method）

属性 Object.property，属性是变量
方法 Object.property( ) ，方法是函数

在 JavaScript里，属性和方法都使用 “.” 语法访问

为了使用对象的属性或方法，我们需要使用new关键字创建一个对象的实例

var jeremy = new Person ;

内建对象

数组元素个数

var beatles = new Array();
beatles.length;

自建对象：

Array
Date
Math

第三章 DOM

DOM (document object model 文档对象模型)

D: 文档, document

当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然产生，它把编写的网页文档转换为一个文档对象。

O: 对象, object

JavaScript语言里的对象可以分为三种类型

用户定义对象
内建对象：内建在JavaScript语言里的对象 Array,Date,Math
宿主对象：即浏览器提供的对象

宿主对象中最基础的就是window对象
window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM（browser object model）

M: 模型, model

节点：

DOM代表着加载到浏览器窗口的当前网页，它把一份文档表示为一棵家谱树/节点树。

文档是由节点组成的集合。节点是文档树上的树枝和树叶

元素节点

标签的名字就是元素的名字，如<body> <p> <ul>

文本节点

<p>元素包含’xxx‘，它就是一个文本节点

属性节点

属性节点用来对元素做出更具体的描述

<p title = 'a gentle man'> Don't forget to buy this stuff. </p>

title = "a gentle reminder"是一个属性节点，因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。

CSS

CSS内容见其他文章，此处略

节点操作

获取元素

1 getElementById

document.getElementById('xxx') ;

返回一个与那个有着给定id属性值的元素节点对应的对象

2 getElementByTagName

返回一个对象数组 tag对应 li、p 之类

document.getElementByTagName('li') ;

3 getElementByClassName(class)

document.getElementByClass('xxx') ;

返回一个具有相同类名的对象数组，使用此方法可以查找那些带有多个类名的元素。

获取和设置属性

1 getAttribute

var xxx = document.getElementById('x');
xxx.getAttribute('title') ;  获取属性的值

2 setAttribute

object.setAttribute(attribute, value)

设置object的attribute为值value

小结

DOM提供的5种方法

getElementById
getElementByTagName
getElementByClassName
getAttribute
setAttribute

以上方法可配合使用

第四章案例研究：JavaScript图片库

1 把占位图片替换为想要查看的图片

思路：替换点位图片的src为想要查看的图片的src

实现：

获取要想查看的图片的引用

 var source = whichpic.getAttribute('href');

获取点位图片节点

 var placeholder = document.getElementById('placeholder');

设置点位图片的引用

 placeholder.setAttribute('src', source);

为了方便使用，将上面的代码封装为一个函数 showPic(whichPic)

事件处理函数

事件处理函数的作用是，在特定事件发生时调用特定的JavaScript代码，相应的JavaScript代码执行后返回一个值，这个值将被传递给那个事件处理函数。

例如：我们可以给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false，这样，当这个链接被点击时，如果那段JavaScript代码返回的值是true，onclick事件处理函数就认为“这个链接被点击了”，反之，如果返回的值是false，onclick事件处理函数就认为“这个链接没有被点击”

this 关键字

this关键字代表的含义是“当前操作的这个对象”

childNodes属性

在一棵节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组

element.childNodes

onload事件处理函数

想让一个函数在页面加载时执行，需要使用onload事件处理函数

window.onload  # 不需要加()

nodeType属性

每个节点都有nodeType属性，它不是英文字符串而是数字，用下面的语法可以获得

node.nodeType

元素节点的nodeType属性值是 1
属性节点的nodeType属性值是 2
文本节点的nodeType属性值是 3

用JavaScript改变文字描述

思路：替换图片说明

1 获取要显示的图片说明

var text = whichPic.getAttribute('title') ;

2 获取要设置的节点p

var description = document.getElementById('description')  ;

3 实现节点p的属性切换

# 注意！ <p>元素本身的nodeType属性是一个空值，包含在<p>元素里的文本是另一种
# 节点，它是<p>元素的第一个子节点，因此，需要切换的其实是节点p的第一个子节点
# 的nodeType属性。

description.firstChild.nodeValue = text ;

第5章最佳实践

平稳退化

如果正确地使用了JavaScript脚本，就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你的网站，这就是所谓的平稳退化。

window.open(url, name, features)

参数 url : 需要在新窗口里打开的网页的url
参数 name : 新窗口的名字
参数 features : 以逗号分隔的字符串，其内容是新窗口的各种属性。

结构与样式分离

作为CSS技术的突出优点，文档结构与文档样式的分离可以确保网页都能平稳退化
具备CSS支持的浏览器固然可以把网页结构呈现得美仑美奂，不支持或禁用了CSS功能的浏览器同样可以把网页的内容按正确的结构显示出来。

渐进增强

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

分离JavaScript

JavaScript语言不要求事件必须在HTML文档里处理，我们可以在外部JavaScript文件里把一个事件添加到HTML文档中的某个元素上。

element.event = action

如果想把一个事件添加到某个带有特定id属性的元素上，用getElementById就可以解决问题

getElementById.event = action

如果涉及多个元素，用getElementByTagName 和 getAttribute把事件添加到有着特定属性的一组元素上

具体步骤：

1 把文档里的所有链接全放入一个数组内
2 遍历数组
3 如果某个链接的class属性等于popup，就表示这个链接在被点击时应该调用popUp()函数

var links = document.getElementByTagName("a");
for (var i =0; i<links.length;i++){
	if links[i].getAttribute("class")=="popup {
		popUp(this.getAttribute("href"));
		return false;
		}
	}
}

以上代码将把调用popUp函数的onclick事件添加到有关的链接上。只要把它们存入一个外部JavaScript文件，就等于是把这些操作从HTML文档里分离出来了，这就是分离JavaScript的含义。

向后兼容

检测浏览器对JavaScript的支持程度

检测浏览器是否支持getElementById

if (!document.getElementById) return false;

检测··· getElementByTagName ````

if (!document.getElementById || !document.getElementByTagName) return false

这一句if语句可以确保那些“古老”的浏览器不会因为我的脚本代码而出问题，这么做是为了让脚本有良好的向后兼容性。

性能考虑

尽量减少访问DOM和尽量减少标记
合并和放置脚本
压缩脚本

posted @ 2017-09-24 13:07 云石海涯阅读(255) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

python之路

根深则叶茂，源远则流长

《JavaScript Dom 编程艺术》 读书笔记 17%

笔记进度 ： 45/ 264 = 17%