本书重点：关于Javascript和DOM脚本编程工作的基本原则、良好习惯、正确思路

预留退路、循序渐进、以用户为中心

一、JavaScript简史

XHTML:可扩展超文本标记语言

BOM:浏览器对象模型（Web浏览器窗口的高度、宽度和屏显位置等属性）

DOM:文档对象模型（一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改）

Javascript:脚本语言（解释型，解释器），有Web浏览器进行解释和执行

二、Javascript语法

1.注释

（1）//:单行注释（2）/*多行注释*/

2.变量

Javascript允许程序员直接对变量进行赋值而无需提前对它们做出声明。

变量名不能包含 空格或标点符号($除外)

var mood,age;

var mood="happy",age=33;

3.数据类型

Javascript:弱类型（不要求对数据进行类型声明，可以随便改变某个变量的数据类型）

（1）字符串

字符串必须放在单引号或双引号里。

字符转义（escaping）：反斜杠

（2）数值

（3）布尔值（不要加引号！）

（4）数组

声明数组：var beatles=Array(4); / var beatles=Array(); (在声明时可不给出数组元素个数)

声明同时填充数组：var beatles=Array("John","Paul","George","Ringo"); / var beatles=["John","Paul","George","Ringo"];

数组里数据类型可不一样：var lennon=Array("John",1940,false);

关联数组(associative array)：数组下标为字符串

var lennon=Array();
lennon["name"]="John";
lennon["year"]=1940;
lennon["living"]=false;

4.操作operation

+:拼接（concatenation）

var message="I am feeling"+"happy";

字符串和数值拼接，结果为更长的字符串。

+=：加法和赋值/拼接和赋值

5.条件语句

if(condition){statements;
}

逻辑与：&& 逻辑或：||

6.循环语句

（1）while

while(condition){statements;
}

(2)do...while

do{statements;
}while(condition);

(3)for

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

7.函数

function multiply(num1,num2){var total=num1*num2;return total;
}

变量命名：下划线分隔各个单词函数命名：Camel法

全局变量（global variable）:作用域为整个脚本

局部变量（local variable）:作用域仅限于函数内部

在函数中使用var关键字，变量即为局部变量，可避免二义性隐患。

8.对象object

对象是自我包含的数据集合，包含在对象里的数据可通过2种形式——属性和方法访问：

属性是隶属于某个特定对象的变量；object.property

方法是只有某个特定对象才能调用的函数。object.method()

实例（instance）:对象的具体表现；对象是统称，实例是个体。

创建实例：var jeremy=new Person;

内建对象（native object）：Javascript预先定义好的对象（数组Array对象，Math对象，Date对象...）

宿主对象（host object）：由Web浏览器提供的预定义对象（Window(BOM)、Form、Image、Element）

三、DOM

Document Object Model（文档对象模型）

一份文档就是一颗节点数
节点分为不同的类型：元素节点、属性节点和文本节点。
getElementById()方法返回一个对象，该对象对应文档里的一个特定的元素节点。
getElementsByTagName()方法返回一个对象数组，它们分别对应文档里的一个特定的元素节点。
getAttribute()方法：查询元素节点属性的值 object.getAttribute(attribute)
setAttribute()方法：修改属性节点的值 object.setAttribute(attribute,value)

DOM工作模式：先加载文档的静态内容，再以动态的方式对它们进行刷新。动态刷新不影响文档的静态内容。

childNodes属性：返回一个数组，这个数组包含给定元素节点的全部子元素
nodeTyoe属性：元素节点（1）、属性节点（2）、文本节点（3）
nodeValue属性：文本节点的值
firstChild属性：node.childNodes[0] lastChild属性：node.childNodes[node.childNodes.length-1]

四、JavaScript编程原则和良好习惯

1.预留退路

确保网页在没有JavaScript的情况下也能正常工作。

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

<a href="http://www.example.com/" onclick="popUp(this.href); return false;">Example</a>

2.分离JavaScript

把网页的结构和内容与JavaScript脚本的动作行为分开。

window.onload=prepareLinks;
function prepareLinks(){var links=document.getElementsByTagName("a");for(var i=0;i<links.length;i++){if(links[i].getAttribute("class")=="popup"){links[i].onclick=function(){popUp(this.getAttribute("href"));return false;}}}
}function popUp(winURL){window.open(winURL,"popup","width=320,height=480");
}

3.向后兼容性

确保老版本的浏览器不会因为JavaScript脚本而死机。

window.onload=function(){if(!document.getElementByTagName) return false;//保证兼容性var links=document.getElementsByTagName("a");for(var i=0;i<links.length;i++){if(links[i].getAttribute("class")=="popup"){links[i].onclick=function(){popUp(this.getAttribute("href"));return false;}}}
}function popUp(winURL){window.open(winURL,"popup","width=320,height=480");
}

五、动态创建HTML内容、充实文档内容

（这2章暂时略过，以后再补）

六、CSS-DOM

网页分层：结构层（HTML）、表示层(CSS)、行为层(JavaScript、DOM)

style属性：文档的每个元素节点有一个属性style，style属性包含元素的样式信息，查询这个属性将返回一个对象。

DOM采用“Camel记号”来表示名字里有多个单词的CSS属性。（fontFamily、backgroundColor）

style对象的属性值必须放在引号里，单引号或双引号均可。

para.style.color='black';

（1）根据元素在节点树里的位置来设置样式信息（styleHeaderSiblings()函数）

//查找下一个元素节点
function getNextElement(node){if(node.nodeType==1){return node;}if(node.nextSibling){return getNextElement(node.nextSibling);}return null;
}function styleHeaderSiblings(){if(!document.getElementsByTagName) return false;var headers=document.getElementsByTagName("h1");for(var i=0;i<headers.length;i++){var elem=getNextElement(headers[i].nextSibling);elem.style.fontWeight="bold";elem.style.fontSize="1.2em";}
}

(2)根据某种条件来设置样式信息（stripeTables()函数）

demo：为表格“画上斑马线”，每隔一行设置一次样式信息

function stripeTables(){if(!document.getElementsByTagName) return false;var tables=document.getElementsByTagName("table");for(var i=0;i<tables.length;i++){var odd=false;var rows=tables[i].getElementsByTagName("tr");for(var j=0;j<rows.length;j++){if(odd==true){rows[j].style.backgroundColor="#ffc";odd=false;}else{odd=true;}}}
}

(3)对事件做出响应（highlightRows()函数）

demo：鼠标悬停在表格上方时，把该行文本显示为黑体字

function highlightRows(){if(!document.getElementsByTagName) return false;var rows=document.getElementsByTagName("tr");for(var i=0;i<rows.length;i++){rows[i].onmouseover=function(){this.style.fontWeight="bold";}rows[i].onmouseout=function(){this.style.fontWeight="normal";}}
}

className属性：可读可写，所有元素节点都有这个属性。

element.className="intro";  //"intro"为value值

等价于：

element.setAttribute("class","intro");

以追加的方式设置class属性值：

function addClass(element,value){if(!element.className){element.className=value;}else{newClassName=element.ClassName;newClassName+=" ";newClassName+=value;element.className=newClassName;}
}

对函数进行抽象化！将具体的值转换为函数的参数，让它成为一个更通用的函数。

七、用JavaScript实现动画效果

CSS-DOM

setTimeout()函数：让某个函数在经过一段预定时间之后才开始执行。

//setTimeout函数第一个参数为字符串，是要执行的函数的名字；第二个参数为数值，是经过多长时间开始执行函数(单位：ms)
setTimeout("function",interval);
variable=setTimeout("function",interval);
clearTimeout(variable);//取消“等待执行”队列里某个尚未开始执行的函数

moveElement()函数：通用的可以沿任意方向移动多个页面元素的函数。

function moveElement(elementID,final_x,final_y,interval){if(!document.getElementById) return false;if(!document.getElementById(elementID)) return false;var elem=document.getElementById(elementID);if(elem.movement){clearTimeout(elem.movement);}if(!elem.style.left){elem.style.left="0px";}if(!elem.style.top){elem.style.top="0px";}var xpos=parseInt(elem.style.left);var ypos=parseInt(elem.style.top);if(xpos==final_x && ypos==final_y){return true;}if(xpos<final_x){xpos++;}if(xpos>final_x){xpos--;}if(ypos<final_y){ypos++;}if(ypos<final_y){ypos--;}elem.style.left=xpos+"px";elem.style.top=ypos+"px";var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";elem.movement=setTimeout(repeat,interval);
}

《JavaScript DOM 编程艺术》知识点整理相关推荐

软件体系结构知识点整理
包括软件体系结构风格.uml.软件质量属性.面向对象设计原则以及设计模式 pdf及goodnote版本
软件体系结构复习整理
一. 认识软件架构本书的主旨: 阐明企业目标.产品需求.设计师的经验.构架和最终系统之间的关系--它们构成带有回路的.可由开发组织实施管理的周期架构商业周期(ABC): 软件架构是技术.商业和社会 ...
软件项目管理知识点整理
目录项目管理定义及通俗理解: 框架: 五大标准化过程组一.项目启动项目类型: 1.初始项目分析 2.生存期模型瀑布模型: 原型模型: 增量模型: 3.项目立项二.项目计划范围计划 wbs任 ...
中级软件设计师知识点整理:法律法规与标准化
某软件公司项目组的程序员在程序编写完成后均按公司规定撰写文档,并上交公司存档.此情形下,该软件文档著作权应由( 公司 )享有. 李某购买了一张有注册商标的应用软件光盘,则李某享有(光盘的所有权和使用权 ...
中级软件设计师知识点整理:多媒体基础
数字语音的采样频率是8KHZ,是因为语音信号定义的频率最高值是4KHz,是根据一个定理得来的,要让取样速率大于模拟信号最高频率的2倍,这样就能在样本里恢复原来的信号了使用图像扫描仪以300DPI的分 ...
【软考】系统分析师知识点整理（待更新）
[软考]系统分析师知识点整理(待更新) 参考资料: <系统分析师>之路--备考分享系统分析师备考分享 [视频教程]软考高级系统分析师全套视频教程系统分析师历年真题含答案与解析历年真题 ...
《软件体系结构》知识点整理
软件元素包括程序代码.测试用例.设计文档.设计过程.需求分析文档甚至领域知识软件工程包括3要素:方法.工具.过程软件重用过程中需要重用的开发组织结构予以支持,它包括构件开发组.构件应用组.协调组三 ...
软件体系结构1~5章知识点整理
欢迎大家进入我们的个人博客网站一起交流讨论.http://codeingshuang.com 目录绪论第一章软件工程和软件设计概述第二章软件模型和描述第三章软件体系结构建模和UML 第四 ...
软件工程——第1章软件工程学概述知识点整理
本专栏是博主个人笔记,主要目的是利用碎片化的时间来记忆软工知识点,特此声明! 文章目录 1.为什么要有软件工程这门学科? 2.软件分为哪些阶段? 3.软件危机的定义? 4.软件危机包含的问题有哪些? ...
【软件服务外包概论】软件服务外包概论知识点整理
前言:这是期末阶段我与室友们共同制作整理完善的知识点整理,大部分内容都已在本文档中,但仍有一些相近概念需自行整理. 教材:<软件服务外包概论>(赵艳红主编) 第一章绪论生产外包和服务外 ...

《JavaScript DOM 编程艺术》知识点整理