《Javascript DOM编程艺术》阅读笔记一

本篇笔记是对于《Javascript DOM编程艺术第2版》的笔记！第二版哦~
第二版在第一版的基础上经过了扩展，涵盖了HTML5、Ajax和JavaScript库(尤其是jQuery)；且这一版以介绍库的附录代替了上一版介绍DOM方法的附录。（由Jerrymy Keith写的序得知）
编写代码时，切记“渐进增强，平稳退化”

第二章_JavaScript语法笔记

注释

“//” 用来注释单行
“/* xxx*/” 用来注释多行
"<!–“HTML风格注释，但这种做法仅适用于单行注释；如果是在HTML文档中，还需要以”–>“来结束注释，但JavaScript不要求这样做，它会把”–>"视为注释内容的一部分。

变量

• JavaScript允许程序员直接对变量赋值而无需事先声明，但提前声明变量是一种良好的编程习惯。
• JavaScript语言中，变量和其他语法元素的名字都是区分字母大小写的。
• JavaScript语言不允许变量名中包含空格或标点符号(美元符号"$“和下划线”_"例外)
• JavaScript变量名允许包含字母(A-Z,a-z)、数字(0-9)、美元符号($)和下划线(_)，但第一个字符不允许是数字
• 下划线命名法(变量命名),驼峰命名法(函数名、方法名和对象属性名命名)。
• 注意作用域！！！

数据类型

• JavaScript不需要进行类型声明，因此它是一种弱类型语言。
• 字符串，必须包在引号里；若遇字符串中包含引号需使用反斜线对字符“\”进行转义。标量
• 数值，浮点数。标量
• 布尔值。标量
• 数组，下标从0开始计数。变量
  1. 传统数组。
  2. 关联数组，不推荐使用。key值(下标)为字符串，本质上创建的是Array对象的属性。
• 对象，对象的每个值都是对象的一个属性。自包含的数据集合
  * 属性是隶属某个特定对象的变量；
  * 方法是只有某个特定对象才能调用的函数。

1. 内建对象，内建在JavaScript语言里的对象。例如Array,Math,Data…
2. 宿主对象，由运行环境提供。例如Form,Image,Element,document,window…
3. 用户定义对象，由程序员自行创建的对象。

• 在JavaScript中，所有的变量实际上都是某种类型的对象。

操作

！！这里主要是遇到不同情况，特别备注一下。
2.4.1比较操作符举例“下面是一个错误地进行“等于”比较的例子”使用了单个等号(=)来判断结果永远为true，说明的理由是“因为这个赋值操作总会成功，所以这个条件语句的结果将永远是true”，审校者注若赋值false的话判断结果为false。（此处小伙伴也做了测试，发现如果将赋值的变量(your_mood)赋值为flase|undefine|null，对应的my_mood=your_mood的值亦为flase|undefine|null。如果赋值为字符串，输出也为字符串。所以觉得判断与赋值成功与否无关，而是判断被赋值的变量最后的值，有非false或空的值便为true）

第三章_DOM笔记(DOM,D-document,O-object,M-model/map)

document.getElementById("id");// 通过元素ID获取元素对象
document.getElementsByTagName("tag");// 通过标签名获取元素对象数组
document.getElementsByTagName("*");// "*"通配符，获取文档中所有元素
documetn.getElementsByClassName("className");// 返回具有相同类目的元素数组
object.getAttribute("attribute");// 获取元素节点对象属性值
object.setAttribute("attribute","value");// 设置元素节点对象属性值

节点

PS：注意，文件节点为中间***，总是包含在元素节点的内部；属性节点为中间***=****，总是被放在起始标签里。<**></**>为元素节点。

CSS

PS:节点树上的各个元素将继承其父元素的样式属性。
typeof操作符，返回操作数类型。
类属性节点可赋值多个类型，且不具先后顺序关系。
文档中的每个元素节点都是一个对象。

第四章_案列研究:JavaScript图片库笔记

elements = element.childNodes;// 获取element元素全部子元素的数组elements(子元素并非只有元素节点)
nodeType = node.nodeType;// nodeType总共有12种可取值,元素节点1,属性节点2，文本节点3...
node.nodeValue;// 文本节点的值，注意找对文本节点！！否则极可能返回一个null值
element = node.firstChild();// 等价于node.childNodes[0]
element = ndoe.lastChild();// 等价于node.childNode[childNode.lenght - 1],不过后者写法复杂！no!!

window.onload = function funName(){};// 页面加载时执行，onload事件处理函数

DOM是一种适用于多种环境和多种程序设计语言的通用型API。
合并js->减少请求->提高性能

第五章_最佳实践笔记

window.open(url,name,features);// 创建新的浏览器窗口

当浏览器不支持js，用户禁用js，searchbot搜索机器人爬虫时，注意平稳退化。确保网页在没有JavaScript的情况下也能正常工作。

[多次使用同一个结果可保存在一个变量中，避免浪费搜索]
[减少整体文件大小，加快加载速度]
代码压缩工具：

1. Douglas Crockford的JSMin
2. 雅虎的YUI Compressor
3. 谷歌的Closure Compiler

• 平稳退化
• 分离JavaScript
• 渐进增强
• 向后兼容(对象检测)

第六章_案例研究:图片库改进版笔记

if(!document.getElementsByTagName)return false;// 检查工作，只举一个例子，其他方法同
variable = condition ? if true : if false;// 三元操作符

结构化程序设计(structed programming)中，有条原则：函数应该只有一个入口和出口。作者个人认为，如果函数有多个出口，只要这些出口集中出现在函数的开头部分，就是可以接受的。
onload加载事件事件处理函数追加：

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

最好不要使用onkeypress事件(处理键盘事件)处理函数，onclick事件处理函数已经能够满足需要。
nodeName得到的值为标签的大写版本。

DOM Core	HTML-DOM
支持DOM的任何一种语言都可使用	只能用来处于Web文档
document.getElementsByTagName(“form”)	document.form
element.getAttribute(“src”)	element.src

第七章_动态创建标记笔记

document.write();// 将字符串插入到文档; 避免使用！！！
element.innerHTML();// 读、写某个给定元素的HTML内容
document.createElement(nodeName);// 创建元素节点
parent.appendChild(child);// 将child节点插入parent节点树的末端
document.createTextNode(text);// 创建文本节点
parentElement.insertBefore(newElement,targetElement);// 在现有元素前加入一个新元素
targetElement.parentNode.insertBefore(newElement, targetElement);//同上
//上方的方法结合targetElement.nextSibling使用，可在现有元素后插入一个新元素
parent = element.parentNode;// 获取父节点
nextElement = element.nextSibling;// 下一个兄弟元素节点

/* 自制将新节点插入指定节点之后 */
function insertAfter(newElement, targetElement){
	let parent = targetElement.parentNode;
	if(parent.lastChild == targetElement){
		parent.appendChild(newElement);
	} else {
		parent.insertBefore(newElement,targetElement.nextSibling);
	}
}

元素节点的父元素必须是另一个元素节点（属性节点和文本节点的子元素不允许是元素节点）

《Javascript DOM编程艺术》阅读笔记二

=====================================================================
不在于你做什么，只在于你怎么做。
没有不好的技术，只有没有用好的技术。