javaScriptDOM编程艺术.docx

1、javaScriptDOM编程艺术第一章、JavaScript简史一、 什么是DOM：简单的说，DOM是一套对文档的内容进行抽象和感念化的方法。二、 DHTMLDHTML是“dynamic HTML”(动态的HTML)的简称。严格的说，DHTML并不是一项单一的新技术，而是HTML、CSS和JavaScript这个三种技术相结合的产物。1. DHTM的含义是; 利用HTML把网页标记为各种元素； 利用CSS设计各有关元素的排版样式并确定它们在窗口中的显示位置； 利用javaScript实时的操控和改变各有关的样式。第二章、javaScript语法一、基本语法概要 1.和英语中的句子很相似，它们

2、是任何一个脚本的基本构成单位。2.javaScript对语法的要求不严格，程序员只需简单地把各条语句放在不同的行上就可以分隔它们，如下所示： First statement Second statement3.如果你想把多条语句放在同一行上，就必须用分号来分隔它们，如下所示： First statement; second statement;4.即使没有把多条语句放在同一个行上，在语句的末尾加个分号也是一个好的编程习惯。二、注释的基本写法 1.单行的注释方法例如：/Note to self 2.多行的注释方法例如：/* Note to self Comments are good */ 3.

3、还可以用HTML风格的注释，但是这种做法仅适用于单行注释。例如： 和/在javaScript中的处理是一样的，要注意的是，在Html允许注释多行，但是在javaScript中要求这种注释的每行都必须在开头加上!来作为标志。 4.如果没有特别的理由，用/做单行注释、用/*记号做多行注释。三、变量 1.javascript允许程序员直接对变量赋值而无需提前对它们做出声明。 2.在javaScript脚本中，如果程序员在对某个变量进行赋值之前未对其做出声明，赋值操作将自动声明该变量。 3.每次声明一个变量的做法并不是绝对的，javaScript也允许程序员用一天语句声明多个变量。甚至允许程序员把声明

4、变量和对该变量赋值的这个两项操作合起来一起完成。 4.javaScript中强烈区分字母的大小写。并不允许变量名字中包含空格或标点符号（但美元符号$例外）。 5.javaScript变量名允许包含字母、数字、美元符号、和下划线字符。为了让比较长的变量名有更好的可读性，可以在变量名中的适当位置插入一个下划线字符，例如： Var my_mood = “happy”;四、数据类型 1.javaScript这种不要求程序员进行类型声明的语言称为弱类型（weakly typed）语言。所谓的弱类型语言意味着程序员可以随意的改变某个变量的数据类型。 2.字符串： 有零个或多个字符构成。字符包括字母、数字、

5、标点符号和空格。 字符串必须放在引号里面单引号和双引号都允许使用。 可以随意选用，但是最好能根据字符串所包含的字符来加以选择：如果字符串包含有双引号字符，就应该把整个字符放在单引号里面；如果字符串中包含有单引号字符，就应该把整个字符串放在双引号中。 转义（escaping）字符的使用，例如： Var height=”about a10” tall”;转义字符可以确保后面的单个特殊字符按原样输出或保存值。 3.数值： 如果想让某个变量包含一个数值，不用限定它必须是一个整数。Javascript允许程序员使用带有小数点的数值，并且允许数值是任意位数，这个类型值称为是浮点数（floating-poi

6、nt number）； 还可以使用负数，负数的表示方式是在有关的数值前面加上一个减号（-）；4.布尔型 布尔型只有两种可取值true和false。 与字符串不同，千万不要把布尔值用引号括起来。5.数组小结和概述：字符串、数值和布尔值都属于离散值（scalar）。如果某个变量是离散的，它在任意时刻就只能有一个值。如果想用一个变量来存储一组值，就需要使用数组（array）。 数组是由名字相同的多个值构成的一个集合，集合中的每个值都是这个数组的元素。 在javaScript脚本中，数组要用关键字Array来声明。在声明数组的同时，程序员还可以对这个数组的元素个数，也就是这个数组的长度（length）

7、，做出规定，例如：Var beatles Array(4); 有的时候，我们没有办法提前预知某个数组最终会容纳多少个元素。这个没有关系，javascript并不要求在声明数组时必须给出它的元素个数，我们完全可以在声明数组时不给出明确具体的元素个数，例如：Var beatles Array(); 向数组中添加元素的操作称为填充(population)。在填充数组时，不仅需要给出新元素的值，还需要在数组中为新元素指定存放的位置，这个位置通过下标（index）给出。 数组里的每一个元素都有一个相应的下标，在语句中，下标必须放在方括号内，如下所示：Arrayindex = element ; 数组元素

8、的下标以0开始。 其他的几中声明数组的方法; Var beatles = Array(“john”,”Paul”,”George”,”Ringo”); 事实上我们甚至用不着明确地表明我们是在创建数组，只要用一对方括号把各个元素的初始值括起来就可以创建我们想要的数组了。例如：Var beatles =“john”,”Paul”,”George”,”Ringo”; 不过，在声明的时候或填充数组的时候写出Array关键字是个良好的习惯，这个可以提高javaScript脚本的可读性，并可以让我们一眼看出哪些变量是数组 数组元素不必非得是字符串，也可以是一些布尔值或一组数值，甚至可以把多种数据类型混在一

9、起存入一个数组。 数组元素还可以是变量，例如：Var name=”john”;Beatles0 = name ; 数组的元素还可以是一个数组的元素。数组的元素还可以包含其他的数组。6.关联数组 我们可以通过在填充数组时为每个新元素明确的给出下标的方式来改变数组的默认的数值下标。在为新元素给出下标时，不必局限于整数数字。数组下标可以是字符串。例如：Var lennon = Array();Lennon“name”=”john”;Lennon“year”=1940 ;这个就称为是关联数组（associative array）。从某种意义上讲，完全可以把所有的数组看作是关联数组。尽管数值数组的下标是

10、有系统自动创建的一些数字，但每个下标仍关联着一个特定的值。数值数组完全可以被当作关联数组的一种特例来对待。 用关联数组代替数值数组的做法意味着，我们可以通过各个元素的名字而不是一个下标的数值来引用它们，这个可以大大的提高脚本的可读性。五、操作 1.算数操作符：（和java的用法基本是相同的（略） 加号是个比较特殊的操作符，它既可以用于数值，也可以用于字符串。 把多个字符串首尾相连在一起的操作叫做拼接（concatenation）。这种拼接也可以通过变量来完成。 我们甚至可以把数值和字符串拼接在一起，因为javaScript是一种弱类型语言，所以这种操作是被允许的。2.条件语句 和java的用法

11、基本相同（略）3.比较操作符 和java的用法基本相同（略）4.逻辑操作符 和java的用法基本相同（略） 为了避免歧义要把条件语句中的逻辑操作数放在括号里面。5.循环语句 和java的用法基本相同（略）6.函数 如果需要多次使用同一组语句，就可以把它们打包成一个函数（function）。 作为一种良好的编程习惯，应该先对函数做出定义在调用它们。 其他的使用类同java（略）。7.变量的作用域 变量既可以是全局的也可以是局部的，变量的作用域（scope）； 全局变量（global variable），可以在脚本中的任何位置被引用。一旦你在哪个脚本里声明了一个全局变量，你就可以从这个脚本中的任何

12、位置包括各个有关函数的内部引用它。全局变量的作用域是整个的脚本。 局部变量（local variable）只存在于对它做出声明的那个函数的内部，在那个函数的外部是无法引用它的，局部变量的作用域仅限于某个特定的函数。 如果在某个函数内部不小心使用了某个全局变量的名字，即使本意是想使用一个局部变量，javaScript也会认为是在引用那个全局变量。 如果某个函数中使用了var，那整个变量就是局部变量。8.对象 对象（object）是一种非常 重要的数据类型，对象是自我包含的数据集合，包含在对象里的数据可以通过两种形式即属性（property）和方法(method)访问。 属性是隶属于某个特定对象的

13、 变量。 方法是只有某个特定对象才可以调用的函数。 对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据的实体。 在JavaScript语言里，为给定对象创建新的实例需要使用new 关键字如： Var Jeremy new person ；假设对象名是person。9.内建对象 数组就是javaScript的内建对象。当我们用new 关键字去初始化一个数组时，其实是在创建一个Array对象的新实例。 Date对象可以用来存储和检索与一个特定的日期和时间有关的信息。在创建Data对象的新实例时，javaScript解释器将自动地使用当前的日期和时间对它进行初始化。 Var current

14、_date = new Date(); Date()对象提供了getDay()、getHours()、getMonth()等一系列方法。第三章、DOM一、什么是DOM 1.DOM是document Object Model（文档对象模型）的首字母的缩写。如果没有了document（文档）,DOM也就无从谈起了。当创建一个网页并把它加载到WEB浏览器中时，DOM就在幕后悄然而生。它将根据你编写的网页创建一个文档对象。二、对象：DOM中的“O“ 1.javaScript语言里的对象可以分为三中类型： 用户定义对象(user-defined object)：由程序员自己创建的对象。 内建对象（nat

15、ive object）：内建在javaScript语言里的对象，如Array、math和Date对象等。 宿主对象（host obect）由浏览器提供的对象。 三、模型：DOM中的”M” DOM中的M代表着Model（模型），但说它代表着Map（地图）也未尝不可。它的含义是某种事务的表现形式。1. DOM把一份文档表示为一棵树（这里说的树是数学意义上的概念），这是我们理解和运用这一模型的关键。更具体的说，DOM把文档表示为一棵家谱树。三、 节点节点（node）这个名词来自网络理论，它但表着网络中的一个连接点。网络是由节点构成的集合。1. 元素节点 DOM的原子是元素节点（element nod

16、e） 元素可以包含其他的元素。2. 文本节点 元素是不同节点类型中的一种。如果一份文档完全由一些空白元素构成，它将有一个结构，但这份文档本身将不会包含什么内容。3. 属性节点 元素都或多或少地有一些属性，属性的作用是对元素做出更具体的描述。4. CSS：层叠样式表 DOM并不是人们与网页的结构打交道的唯一手段，我们还可以通过层叠样式表（CSS）告诉浏览器如何显示一份文档的内容。例如我们为body元素定义一些颜色或字体：Body Color:white; Background-color:black; Class属性 所有的元素都有class属性，不同的元素可以有同样的class属性值。例如：

17、this paragraph has this special calss so does this headline在样式表里，我们可以像下面这样为class属性值相同的所有元素定义一种共享样式：.special Font-style:italic;我们还可以像下面这样利用class属性为一种特定的类型的元素定义一种独享的样式：H2.special Text-transform:uppercase; Id属性 Id的属性的用途是给网页里面的某个元素加上一个独一无二的标识符，如下所示：在样式表里面我们可以这样为有特定的ID属性值定义一个独享的样式：#purchases Border:ipx s

18、olid white; Background-color:#33; Color:#ccc; Padding:iem;5. getElementById()方法 DOM提供了一个getElementById()方法，这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。 这个方法区分大小写，千万不能写错了。 这个方法是与document对象相关联的函数。 6. getElementsByTagName()方法 返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。 注意：即使整个文档里只有一个元素有着给定的标签名。getElementsByTagName()方法也将返回一

19、个数组。此时。那个数组的长度为一。 getElementsByTagName()方法允许我们把一个通配符当作它的参数，而这个意味着文档里的每一个元素都将在这个函数返回的数组里占有一席之地。 通配符*必须放在引号里面。四、 小结：1. 一份文档就是一棵节点树2. 节点分为不同的类型：元素节点、属性节点和文本节点等。3. getElementById()方法将返回一个对象，该对象对应着文档里的一个特定的节点。4. getElementsByTagName()将返回一个对象数组，它们分别对应着文档里的一个特定的元素的节点。5. 这些节点中的每个都是一个对象。五、 与对象相关联的属性和方法1. get

20、Attribute()方法 利用getElementById()和getElementsByTagName()方法，在找到那个元素以后，我们可以利用getAttribute()方法把他的各个属性值查询出来。 getAttribute()是一个函数。它只有一个参数你打算查询的属性的名字。例如：object.getAttribute(attribute); getAttribute()不能通过document对象调用，我们只能通过一个元素节点调用它。如下所示：var paras= document.getElementsByTagName(“p”);for(var i=0; iparas.leng

21、th; i+) alert(parasi.getAttribute(“title”);/加了一个判断空值var paras = document.getElementsByTagName(p);for(var i=0; iparas.length; i+)var title_text=parasi.getAttribute(title);if(title_text != null & title_text != )alert(title_text);2. setAttribute()方法： setAttribute()方法也是一个只能通过元素节点对象调用的函数，但是setAttribute()

22、方法需要我们向它传递两个参数。例如：object.setAttribute(attribute,value);var shopping = document.getElementById(purchases);shopping.setAttribute(title,a list of goods);alert(shopping.getAttribute(title); 上面的例子实现了tilte属性的值的变化。 通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看

23、文档的源代码时看到的仍将是原来的属性值也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种表里不一的现象源子于DOM工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档静态内容。这个正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户再它们的浏览器里执行刷新操作就可以实现。六、 小结： DOM提供的四种方法1. getElementById()方法2. getElementsByTagName()方法3. getAttribute()方法4. setAttribute()方法这个四种方法是将要编写的许多的DOM脚本的基石。

24、第四章、DOM中属性一、childNodes属性： childNodes属性让我们可以从给定文档的节点树里把任何一个元素的所有子元素检索出来。 childNodes将返回一个数组，这个数组包含给定元素节点的全体子元素。 使用方法：function countBodyChildern()var body_element = document.getElementsByTagName(body)0;/alert(body_element.childNodes.length);alert(body_element.nodeType); 以上方法显示的是body元素的所有的子元素的总数。二、nodeT

25、ype属性： nodeType属性总共有12种可取值，但是其中仅有3种有实用价值：元素节点、属性节点和文本节点。 分别对应的是属性值1、2、3。 元素节点nodeType的属性值是1。 属性节点nodeType的属性值是2。 文本结大的nodeType的属性值是3。 这个意味着，可以让我们的函数只对某种特定类型的节点进行处理。三、nodeValue属性： 如果想改变某个文本节点的值，那就是使用DOM提供的nodeValue属性，它的用途是检索（和设置）节点的值。例如：node.nodeValue; 调用nodeValue属性将返回一个null值。 获得某个节点的值的方法：description

26、.childNodes0.nodeValue/必须是节点的第一个子节点（文本节点的）四、firstChild和lastChild属性： 数组元素childNodes0有个更直观易读的同义词。无论何时何地，只要需要访问childNodes数组的第一个元素，我们都可以直接把它写成firstChild，这个记号本身就是一个属性。例如：node.firstChild lastChild代表着childNodes数组的最后一个元素。例如：node.lastChild五、小结： DOM提供的几个属性： childNodes获得给定元素的所有子元素的集合 nodeType获得元素的类型常用的有三种 node

27、Value firstChild lastChild第五章、JavaScript编程的原则和良好的习惯一、要点： 预留有退路，确保网页上没有javaScript的情况下也能正常的工作。 分离javaScript：把网页的结构和内容与JavaScript脚本动作行为分开。 向后兼容性：确保老版本的浏览器不会因为你的JavaScript脚本而死机。二、windwo.open()： javaScript使用window对象的open()方法来，这个方法有三个参数：window.open(url,name,features); 这个三个参数都是可选的。第一个参数是想在新窗口里打开的那份文档的URL地址

28、，如果省略的话，屏幕上将弹出一个空白的窗口。 第二个参数是新窗口的名字，可以在代码里通过这个名字与新窗口进行通信。 最后一个参数是一个以逗号分隔的字符串，其内容是新窗口的各种属性。这些属性包括新窗口的尺寸（宽度和高度）以及新窗口被激活或禁用的各种浏览功能（工具条、菜单条、初始显示位置，等等），对于这个参数应该掌握以下原则：新窗口的浏览功能要少而精。 Open()方法是DOM的一个典型的应用案例：它的功能既不依赖于文档的内容，对于文档的内容也无任何的影响。 这个方法只与此时此刻的用户浏览环境有关。function popUp(winURL,winName)window.open(winURL,w

29、inName,width=1024,height=768);三、javaScript伪协议 popup()函数还可以通过伪协议(pseudo-protocol)来调用 真协议特指那些用来在因特网上的两台计算机之间传输各种数据包的标准化通信机制。如http:/ ftp:/等。 伪协议则是指人们对非标准化通信机制的统称。 javaScript伪协议让我们可以通过一个链接来调用javaScript函数 下面是通过javaScript伪协议调用popUp()函数的具体做法：Example 这种做法的缺点是：如果客户端禁用了javaScript这种伪协议的链接将无法访问。 解决以上缺点的方法是：Example四、向后兼容性： 代码示例：function prepareLinks() if(document.getElementsByTagName) return false ; var links = document.getElementsByTagName(a); for(var i=0; ilinks.length; i+) if(linksi.getAttribute(class)=popup) linksi.onclick=function() popUp(this.getAttribute(href);