JavaScript DOM编程艺术.docx

第一章 JavaScript简史1、JavaScript是Netscape公司和Sun公司合作开发的。之后，微软公司以JScript为名发布了JavaScript的一个版本；面对微软公司的竞争，Netscape和Sun公司联合ECMA（欧洲计算机制造商协会）对JavaScript进行了标准化，于是出现了ECMAScript语言。现在谈论的JavaScript实际上就是ECMAScript。2、JavaScript与Sun公司开发的Java程序语言没有任何联系。JavaScript最开始的名字为LiveScript。Java在理论上几乎可以部署在任何环境中，但JavaScript倾向于只应用在Web浏览器上。3、JavaScript是一种脚本语言，需要由Web浏览器进行解释和执行，而不能独立运行。4、BOM（浏览器对象模型）设定浏览器属性的方法5、DOM（文档对象模型）DOM是一套对文档的内容进行抽象和概念化的方法。第0级DOM（DOM Level 0）常见用途是：翻转图片和验证表单数据（images和forms）浏览器之间的冲突Netscape、微软和其他一些浏览器制造商与W3C携手制定了一个标准化的DOM，即第1级DOM（DOM Level 1）6、DHTML Dynamic HTML（动态HTML）的简称，描述HTML、CSS和JavaScript技术组合的术语。（1）利用HTML把网页标记为各种元素。（2）利用CSS设置元素样式和它们的显示位置。（3）利用JavaScript实时地操控页面和改变样式。7、DOM是一种API（应用编程接口）。W3C对DOM的定义：一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。8、苹果公司Safari浏览器（基于Webkit） 遵循DOM标准Firefox、Chrome、Opera和IE等都支持DOM。 PS：Webkit是Safari和Chrome采用的一个开源Web浏览器引擎。第二章 JavaScript 语法1、用JavaScript编写的代码必须通过HTML/XHTML文档才能执行。有两种方式可以做到这点。方式一：将JavaScript代码放到文档标签中的标签之间。ExampleJavaScript goes here.Mark-up goes here.方式二：把JavaScript代码存为一个扩展名为.js的独立文件，在文档的部分放一个标签，并把它的src属性指向该文件。ExampleMark-up goes here.注意：最好的方式是把标签放到HTML文档的最后，标签之前，这样能使浏览器更快地加载页面。ExampleMark-up goes here.2、程序设计语言分为解释型和编译型两大类。解释型程序设计语言不需要编译器，只需要解释器。对于JavaScript语言，在互联网环境下，Web浏览器负责完成有关的解释和执行工作。浏览器中的JavaScript解释器将直接读入源代码并执行。浏览器中如果没有解释器，JavaScript代码就无法执行。3、变量（variable）（1）赋值（assignment） 把值存入变量的操作mood=”happy”;age=33;（2）JavaScript允许程序员直接对变量赋值而无需事先声明。在JavaScript脚本中，如果程序员在对某个变量赋值之前未进行声明，赋值操作将自动声明该变量。但是提前声明变量是一种良好的编程习惯。（3）声明（declare） var是一个关键字var mood,age;声明变量，同时赋值 var mood=”happy”,age=33;（4）在JavaScript中，变量和其他语法元素的名字都是区分大小写的。MOOD和 mood不是一个变量（5）JavaScript中不允许变量名中包含空格或标点符号（美元符号“$”除外）。JavaScript变量名允许包含字母、数字、下划线和美元符号（但是第一个字符不允许是数字）。（6）为了让比较长的变量名容易阅读，有两种方式： var my_mood=”happy”; var myMood=”happy”; 驼峰格式（camel case）4、数据类型（1）JavaScript是一种弱类型（weakly typed）语言，不需要进行类型声明。这意味着程序员可以在任何阶段改变变量的数据类型。、 var age=”thirty three”; age=33;（2）几种数据类型：A) 字符串字符串由零个或多个字符构成。字符包括字母、数字、标点符号和空格。字符串必须包含在双引号或者单引号里。var mood=”happy”;var mood=happy;可以随意选用引号，但最好是根据字符串所包含的字符来选择。如果字符串包含双引号，就把整个字符串放在单引号里；如果字符串包含单引号，就把整个字符串放在双引号里。 var mood=”dont ask”;var say=he says”hello”;转义（escaping）字符var mood=dont ask;var say=”he says”hello”;作为一个好的编程习惯，不管选择用双引号还是单引号，在整个脚本中最好保持一致。B) 数值C) 布尔值（boolean）只有两个可选值：true false布尔值不是字符串，不能将布尔值用引号括起来。var married=true; 将变量设置为布尔值var married=”true”; 将变量设置为字符串 5、数组（1）数组是指用一个变量表示一个值的集合，集合中的每一个值都是这个数组的一个元素（element）。（2）声明数组的同时还可以指定数组初始元素的个数，即数组的长度（length）。var beatles=Array();var beatles=Array(4);（3）向数组中添加元素的操作成为填充。beatles0=”John”;beatles1=”Paul”;beatles2=”George”;beatles3=”Ringo”;（4）在声明数组的同时对它进行填充。（用逗号把个元素隔开）var beatles=Array(“John”,” Paul”,” George”,” Ringo”); 该语句为每个元素自动分配一个下标。（5）数组元素可以是字符串、布尔值、数值，也可以是变量，还可以是另一个数组的元素。6、操作（1）算术操作符加法操作符（+）、减法操作符（-）、除法操作符（/）、乘法操作符（*） 加号（+）是一个非常特殊的操作符，既可以用于数值，又可以用于字符串。把多个字符串首尾相连在一起的操作叫做拼接（concatenation）。var message=”I am feeling”+”happy”;还可以把数值和字符串拼接在一起，数值将被自动转换为字符串，结果将是一个更长的字符串。alert(“10”+20); 输出结果：1020alert(10+20); 输出结果：30（2）比较操作符A)等于（=）var my_mood=happy;var your_mood=sad;if(my_mood=your_mood)alert(We both feel the same);B)不等于（!=）if(my_mood!=your_mood)alert(Were feeling different moods.);C)全等（=） 不仅比较值，而且比较变量的类型var a=false;var b=;if(a=b)alert(a equals b); 输出结果：a equals b 此时，相等操作符（=）认为空字符串与false的含义相同。var a=false;var b=;if(a=b)alert(a equals b); 输出结果：alert语句不执行此时，全等操作符（=）认为即使空字符串与false的含义相同，但是Boolean和String不是一种类型。（3）逻辑操作符（操作对象是布尔值）逻辑与（&）、逻辑或（|）、逻辑非（!）7、条件语句（1）条件的求值结果只能是true或false。if(12)alert(The world has gone mad!);elsealert(All is well with the world.);（2）如果if语句中的花括号部分只包含一条语句，可以不使用花括号。if(12) alert(The world has gone mad!);但是花括号可以提高脚本的可读性，所以最好使用花括号。（3）if(something) 如果something存在，则if语句的条件为真；如果something不存在，则if语句的条件为假。var message=good;if(message)alert(message);8、循环语句（1）while循环var count=1;while(count11)alert(count);count+;注意：在while循环的内部必须发生一些会影响循环控制条件的事情。此处，若不增加变量count的值，这个while循环将永远执行下去。dowhile循环与while循环的区别：对循环控制条件的求值发生在每次循环结束之后，即使循环控制条件的首次求值结果为false，包含在花括号里的语句也至少执行一次。var count=1;doalert(count);conut+;while(count1);（2）for循环 （其实就是while循环的一种变体）与循环有关的所有内容都包含在for语句的圆括号部分。for(var count=1;count11;count+)alert(count);for循环最常见的用途：对某个数组里的全体元素进行遍历处理。需要用到数组的array.length属性。注意：数组的下标是从0开始的。var beatles=Array(John,Paul,George,Ringo);for(var count=0;countbeatles.length;count+)alert(beatlescount);9、函数函数（function）就是一组允许在代码中随时调用的语句。（1）定义函数function shout()var beatles=Array(John,Paul,George,Ringo);for(var count=0;countbeatles.length;count+)alert(beatlescount);（2）调用函数shout();每当需要反复做一件事时，都可以利用函数来避免重复键入大量的相同内容。（3）参数（argument） 传递给函数的数据称为参数，在定义函数时，可以为它声明任意多个参数，用逗号分隔开。function multiply(num1,num2) /定义函数var total=num1*num2;alert(total);multiply(10,3); /调用函数（4）返回值函数不仅能够（以参数的形式）接受数据，还能返回数据，需用到return语句，可以返回一个数值、一个字符串、一个数组或者一个布尔值。function multiply(num1,num2)var total=num1*num2;return total;var result=multiply(10,2); /可以把一个函数的调用结果赋给一个变量alert(result);（5）为了清楚地看出哪些是变量名，哪些是函数名，可以采用下划线分隔的方式命名变量，采用驼峰方式命名函数。10、变量的作用域（scope）（1）全局变量（global variable）可以在脚本中的任意位置被引用。其作用域是整个脚本。（2）局部变量（local variable）只存在于声明它的那个函数内部，在函数的外部是无法引用的。其作用域仅限于某个特定的函数。（3）在函数的内部既可以使用全局变量，又可以使用局部变量，这样很有用，但是也会导致一些二义性的问题。注意：在定义一个函数时，一定要把内部的变量全都明确地声明为局部变量（在函数里使用var关键字来定义变量）。A)如果在某个函数中，没有使用var关键字来定义变量，那个变量将被视为一个全局变量，若脚本中已经存在一个与之同名的全局变量，这个函数将会改变那个全局变量的值。function square(num)total=num*num; /未把函数内部的total变量明确地声明为局部变量return total;var total=50;var number=square(20);alert(total); /输出结果：400 total的值改变了B)如果在某个函数中，使用了var关键字来定义变量，那个变量将被视为一个局部变量，只存于这个函数的上下文中。function square(num)var total=num*num;return total;var total=50;var number=square(20);alert(total); /输出结果：50 total的值没变11、对象对象就是由一些属性和方法组合在一起而构成的一个数据实体。（1）创建对象 使用Object关键字var Person=Object();（2）访问数据对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问属性和方法，都使用“点”语法来访问。A)属性（property）：隶属于某个特定对象的变量Person.moodB)方法（method）：只有某个特定对象才能调用的函数Person.sleep()（3）创建实例 使用new关键字实例（instance）是对象的具体个体。var Jeremy =new Person;Jeremy.mood（4）对象的分类A)用户定义对象（user-defined object）B)内建对象（预先定义好的对象）Array对象、Math对象、Date对象创建新实例：var beatles=new Array();var current_date=new Date();C)宿主对象（预先定义好的对象）由浏览器提供的预定义对象被称为宿主对象（host object）document对象、Form对象、Image对象和Element对象第三章 DOM1、文档：DOM中的D当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生，把网页文档转换为一个文档对象。2、对象：DOM中的OJavaScript语言中的对象分为三种类型：（1）用户定义对象（user-defined object）：由程序员自行创建的对象。（2）内建对象（native object）：内建在JavaScript语言里的对象。（3）宿主对象（host object）：由浏览器提供的对象。3、模型：DOM中的MDOM把一份文档表示为一棵树（节点树）。4、节点（node） 网络术语，表示网络中的一个连接点文档是由节点构成的集合。（1）元素节点（element node）（2）文本节点（text node）在XHTML文档里，文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。（3）属性节点（attribute node）属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。并非所有的元素都包含着属性，但所有的属性都被元素包含。（4）CSS继承（inheritance）是CSS技术中的一项强大功能。类似于DOM，CSS也将文档的内容视为一棵节点树。节点树上的各个元素将继承其父元素的样式属性。5、获取元素有3种DOM方法可获取元素节点，分别是通过元素ID、通过标签名字和通过类名字来获取。（1）getElementById（JavaScript语言区分字母大小写）getElementById是document对象特有的函数，该方法只有一个参数：想获得的那个元素的id属性的值，这个id值必须放在单引号或双引号里。Example What to buy Dont forget to buy this stuff. A tin of beans Cheese Milk alert( typeof document.getElementById(purchases); /输出结果：object（说明返回的是一个对象，文档中的每一个元素都是一个对象）typeof操作符可以告知一个操作数是字符串、数值、函数、布尔值还是对象。（2）getElementsByTagName（返回的是一个对象数组，数组里的每个元素都是一个对象） 即使在整个文档里该标签只有一个元素，也将返回一个数组，数组的长度为1。var items=document.getElementsByTagName(li); for(var i=0;iitems.length;i+) alert(typeof itemsi); /输出结果：三个alert对话框，都为objectPS：getElementsByTagName允许将通配符作为它的参数，且通配符（*）必须放在引号里。若想知道某份文档里共有多少个元素节点：alert(document.getElementsByTagName(*).length); /输出结果：12（3）getElementsByClassNamealert(document.getElementsByClassName(sale).length); /输出结果：26、获取和设置属性（1）getAttributegetAttribute方法不属于document对象，只能通过元素节点对象调用。var paras=document.getElementsByTagName(p);for(var i=0;iparas.length;i+) alert(parasi.getAttribute(title); /输出结果：a gentle reminder（若没有title属性，将返回null值）var paras=document.getElementsByTagName(p);for(var i=0;iparas.length;i+) var title_text=parasi.getAttribute(title); if(title_text) /添加if语句检查返回值是不是null 等同if(title_text!=null) alert(title_text); （2）setAttributevar shopping=document.getElementById(purchases);alert(shopping.getAttribute(title);shopping.setAttribute(title,a list of goods);alert(shopping.getAttribute(title); /输出结果：第一个alert对话框为null；第二个alert对话框为a list of goods第四章 几个DOM属性：1、childNodes属性在一棵节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含全部子元素的数组。eg:假设需要把某个文档的body元素的全部子元素检索出来。var body_element=document.getElementsByTagName(body)0;alert(body_element.childNodes.length);/每份文档只有一个body元素，所以是getElementsByTagName(body)方法所返回的数组中的第一个（也是唯一一个）元素。/childNodes属性返回的是一个数组，故用数组的length属性可以获得其包含元素的个数。注意：childNodes属性返回的数组包含所有类型的节点，而不仅仅是元素节点。（？）2、nodeType属性每一个节点都有nodeType属性nodeType属性共有12种可能取值，但仅有3种有意义：元素节点的nodeType属性值为1； eg. alert(body_element.nodeType);属性节点的nodeType属性值为2；文本节点的nodeType属性值为3；3、nodeValue属性假设要改变元素里的文本内容（包含在元素里的文本是另一个节点，是元素的第一个子节点）。Choose an image.var description=document.getElementById(description);description.firstChild.nodeValue=text;4、firstChild和lastChild属性childNodes数组的第一个元素：node.firstChild 等价于 node.childNodes0childNodes数组的最后一个元素：node.lastNode 等价于 node.childNodesnode.childNodes.length-1第五章1、window对象的open()方法JavaScript使用window对象的open()方法来创建新的浏览器窗口，有三个参数：window.open(url,name,features) （三个参数都是可选的）第一个参数：在新窗口中打开的网页的URL地址。如果省略这个参数，将弹出一个空白的浏览器窗口。window.open(,new_blank,width=200,height=300);第二个参数：新窗口的名字，可以在代码中运用这个名字。第三个参数：以逗号分隔的字符串，其内容是新窗口的各种属性（比如新窗口的尺寸）。2、“javascript:”伪协议真协议用来在因特网上的计算机之间传输数据包，如HTTP协议、FTP协议；伪协议是一种非标准化的协议。在HTML文档里通过“javascript:”伪协议调用JavaScript代码的做法非常不好。function popUp(winURL)window.open(winURL,popup,width=300,height=200);弹出窗口3、内嵌事件处理函数把onclick事件处理函数作为属性嵌入标签，来调用popUp函数。弹出窗口这里把href属性的值设置为“#”只是为了创建一个空链接。这种内嵌事件处理函数的做法同样也不好，不能平稳退化。3、平稳退化（graceful degradation）如果正确地使用了JavaScript脚本，就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览该网站，即所谓的平稳退化，就是说，虽然某些功能无法使用，但是基本的操作仍能顺利完成。弹出窗口弹出窗口这里把href属性设置为真实存在的URL地址，即使JavaScript被禁用，这个链接也是可用的。虽然这个链接在功能上打了点折扣（没有打开新窗口），但是它并没有彻底失效。4、分离JavaScript使用“挂钩”在外部JavaScript文件中把一个事件添加到HTML文档中的某个元素上to baidu /这里的popup就是一个挂钩window.onload=prepareLinks; /在HTML文档全部加载到浏览器后才可以执行；如果JavaScript文件是从HTML文档的部分用标签调用的，那将在HTML文档之前加载到浏览器中；如果标签位于文档底部之前，也不能保证哪个文件最先结束加载function prepareLinks()var links=document.getElementsByTagName(a); for(var i=0;ilinks.length;i+)if(linksi.getAttribute(class)=popup)linksi.onclick=function()popUp(this.getAttribute(href);return false;function popUp(winURL)window.open(winURL,popup,width=320,height=480);5、向后兼容不同的浏览器对JavaScript的支持程度是不一样的。绝大多数的浏览器都能或多或少地支持JavaScript；绝大多数的现代浏览器对DOM的支持很不错，但是，比较