JavaScript前端开发实用技术教程第4章课件

JavaScriptJavaScript前端开发实用技术教程前端开发实用技术教程前端开发实用技术教程前端开发实用技术教程授课教师：授课教师：职务：职务：JavaScript前端开发实用技术教程授课教师：第第4章章 JavaScript面向对象程序设计面向对象程序设计课程描述课程描述面向对象编程是面向对象编程是面向对象编程是面向对象编程是JavaScriptJavaScriptJavaScriptJavaScript采用的基本编采用的基本编采用的基本编采用的基本编程思想，它可以将属性和程思想，它可以将属性和程思想，它可以将属性和程思想，它可以将属性和代码集成在一起，定义为代码集成在一起，定义为代码集成在一起，定义为代码集成在一起，定义为类，从而使程序设计更加类，从而使程序设计更加类，从而使程序设计更加类，从而使程序设计更加简单、规范、有条理。本简单、规范、有条理。本简单、规范、有条理。本简单、规范、有条理。本章将介绍如何在章将介绍如何在章将介绍如何在章将介绍如何在JavaScriptJavaScriptJavaScriptJavaScript中使用类和对中使用类和对中使用类和对中使用类和对象。象。象。象。第4章 JavaScript面向对象程序设计课程描述本章知识点本章知识点p4.1 4.1 面向对象程序设计思想简介面向对象程序设计思想简介p4.2 JavaScript4.2 JavaScript内置对象内置对象p4.3 DOM4.3 DOM编程编程p4.4 BOM4.4 BOM编程编程本章知识点4.1 面向对象程序设计思想简介4.1 面向对象程序设计思想简介面向对象程序设计思想简介4.1 面向对象程序设计思想简介面向对象程序设计的一些基本概念面向对象程序设计的一些基本概念p（1 1）对象（）对象（ObjectObject）：面向对象程序设计思想可以将一组数据和与这组）：面向对象程序设计思想可以将一组数据和与这组数据有关操作组装在一起，形成一个实体，这个实体就是对象。数据有关操作组装在一起，形成一个实体，这个实体就是对象。p（2 2）类（）类（classclass）：具有相同或相似性质的对象的抽象就是类。因此，对）：具有相同或相似性质的对象的抽象就是类。因此，对象的抽象是类，类的具体化就是对象。例如，如果人类是一个类，则一个象的抽象是类，类的具体化就是对象。例如，如果人类是一个类，则一个具体的人就是一个对象。具体的人就是一个对象。p（3 3）封装：将数据和操作捆绑在一起，定义一个新类的过程就是封装。）封装：将数据和操作捆绑在一起，定义一个新类的过程就是封装。p（4 4）继承：类之间的关系，在这种关系中，一个类共享了一个或多个其）继承：类之间的关系，在这种关系中，一个类共享了一个或多个其他类定义的结构和行为。继承描述了类之间的关系。子类可以对基类的行他类定义的结构和行为。继承描述了类之间的关系。子类可以对基类的行为进行扩展、覆盖、重定义。如果人类是一个类，则可以定义一个子类为进行扩展、覆盖、重定义。如果人类是一个类，则可以定义一个子类“男人男人”。“男人男人”可以继承人类的属性（例如姓名、身高、年龄等）和方可以继承人类的属性（例如姓名、身高、年龄等）和方法（即动作。例如，吃饭和走路），在子类中就无需重复定义了。从同一法（即动作。例如，吃饭和走路），在子类中就无需重复定义了。从同一个类中继承得到的子类也具有多态性，即相同的函数名在不同子类中有不个类中继承得到的子类也具有多态性，即相同的函数名在不同子类中有不同的实现。就如同子女会从父母那里继承到人类共有的特性，而子女也具同的实现。就如同子女会从父母那里继承到人类共有的特性，而子女也具有自己的特性。有自己的特性。p（5 5）方法：也称为成员函数，是指对象上的操作，作为类声明的一部分）方法：也称为成员函数，是指对象上的操作，作为类声明的一部分来定义。方法定义了可以对一个对象可以执行的操作。来定义。方法定义了可以对一个对象可以执行的操作。面向对象程序设计的一些基本概念（1）对象（Object）：面4.2 JavaScript内置对象内置对象4.2.1 JavaScript4.2.1 JavaScript的内置对象框架的内置对象框架4.2.2 4.2.2 基类基类ObjectObject4.2.3 Date4.2.3 Date类类4.2.4 String4.2.4 String类类4.2.5 Array4.2.5 Array类类4.2.6 Math4.2.6 Math对象对象4.2 JavaScript内置对象4.2.1 Java4.2.1 JavaScript的内置对象框架的内置对象框架4.2.1 JavaScript的内置对象框架JavaScript内置类的基本功能内置类的基本功能JavaScript内置类的基本功能4.2.2 基类基类Object4.2.2 基类Object4.2.3 Date类类pDate是JavaScript的日期类，用于管理和操作日期和时间数据。可以使用下面几种方法创建Date对象：pMyDate=newDate;/Date对象会自动把当前日期和时间保存为其初始值。MyDate=newDate(2013-11-20)MyDate=newDate(2013,11,20)4.2.3 Date类Date是JavaScript的日期Date类的常用方法类的常用方法Date类的常用方法【例例4-1】使用使用Date类的示例程序类的示例程序【例4-1】varMyDate;MyDate=newDate();document.write(现在是:+MyDate.getFullYear()+年+(MyDate.getMonth()+1)+月+MyDate.getDate()+日);【例4-1】使用Date类的示例程序4.2.4 String类类pStringString是是JavaScriptJavaScript的字符串类，用于管的字符串类，用于管理和操作字符串数据。可以使用下面理和操作字符串数据。可以使用下面2 2种种方法创建方法创建StringString对象：对象：MyStr=newString(这是一个测试字符串);/String对象会自动把参数保存为MyStr对象的初始值。MyStr=这是一个测试字符串;/直接对String对象赋值字符串4.2.4 String类String是JavaScrip1String类的属性类的属性pStringString类只有一个属性类只有一个属性lengthlength，用来返回字符串的长度。，用来返回字符串的长度。p【例【例4-24-2】计算计算StringString对象的长度。对象的长度。演示使用String对象的length属性varMyStr;MyStr=newString(这是一个测试字符串);document.write(“+MyStr+”的长度为:+MyStr.length);1String类的属性String类只有一个属性lengt2anchor()方法方法panchor()anchor()方法用来创建方法用来创建 HTMLHTML锚，语法如下：锚，语法如下：stringObject.anchor(anchorname)p参数参数anchornameanchorname用于定义锚的名称。锚的显示文本为用于定义锚的名称。锚的显示文本为stringObjectstringObject对象的值。对象的值。p【例例4-34-3】使用使用anchor()anchor()方法创建方法创建 HTMLHTML锚的例子。锚的例子。演示使用anchor()的使用varstr=我的网页!document.write(str.anchor(myanchor)返回顶部2anchor()方法anchor()方法用来创建 H3link()方法方法plink()link()方法用来创建超链接，语法如下：方法用来创建超链接，语法如下：stringObject.link(url)p参数参数urlurl用于定义超链接的用于定义超链接的URLURL。超链接的。超链接的显示文本为显示文本为stringObjectstringObject对象的值。对象的值。3link()方法link()方法用来创建超链接，语法如下【例例4-4】使用使用link()方法创建超链接的例子方法创建超链接的例子演示使用link()的使用varstr=新浪document.write(str.link(http:/ HTML HTML 标记放置标记放置在在 String String 对象中的文本两端对象中的文本两端,从而放大从而放大字体，语法如下：字体，语法如下：stringObject.big()3big()方法big()方法用来把 HTML【例例4-5】p使用使用big()big()方法放大字体的例子。方法放大字体的例子。演示使用big()函数加大字体的例子varstr=JavaScript;document.write(str);document.write(str.big();【例4-5】使用big()方法放大字体的例子。浏览浏览【例例4-5】结果结果浏览【例4-5】结果4charAt()方法方法pcharAt()charAt()方法用来返回字符串中指定位置的字方法用来返回字符串中指定位置的字符，语法如下：符，语法如下：stringObject.charAt(index)p参数参数indexindex用于指定字符串中某个位置的数字，用于指定字符串中某个位置的数字，从从0 0开始计数。开始计数。4charAt()方法charAt()方法用来返回字符【例例4-6】演示charAt()函数的例子varstr=JavaScript;document.write(str.charAt(3);【例4-6】5fixed()方法方法fixed()方法用于把字符串显示为打字机字体，语法如下：stringObject.fixed()p【例【例4-74-7】使用使用fixed()fixed()方法的例子。方法的例子。演示使用fixed()函数的例子varstr=JavaScript;document.write(str);document.write(str.fixed();5fixed()方法fixed()方法用于把字符串显示为浏览浏览【例例4-7】结果结果浏览【例4-7】结果5fontcolor()方法方法pfontcolor()fontcolor()方法用于把带有方法用于把带有 COLOR COLOR 属性属性的一个的一个 HTML HTML 标记放置在标记放置在StringString对对象中的文本两端，从而设置字符串的颜色，象中的文本两端，从而设置字符串的颜色，语法如下：语法如下：stringObject.fontcolor(颜色值)5fontcolor()方法fontcolor()方法用【例例4-8】演示使用fixed()函数的例子varstr=JavaScript;document.write(str);document.write(str.fontcolor(blue);【例4-8】6fontsize()方法方法pfontsize()fontsize()方法用于把带有方法用于把带有 SIZE SIZE属性的一个属性的一个 HTML HTML 标记放置在标记放置在StringString对象中的文本两对象中的文本两端，从而设置字符串的大小，语法如下：端，从而设置字符串的大小，语法如下：stringObject.fontsize(size)p参数参数sizesize用于指定字号，取值范围为用于指定字号，取值范围为1717。6fontsize()方法fontsize()方法用于把【例例4-9】演示使用fontsize()函数的例子varstr=JavaScript;document.write(str);document.write(str.fontsize(10);【例4-9】浏览浏览【例例4-9】结果结果浏览【例4-9】结果7indexOf()方法方法pindexOf()indexOf()方法用于返回方法用于返回 String String 对象内第一次出现对象内第一次出现子字符串的字符位置，语法如下：子字符串的字符位置，语法如下：stringObject.indexOf(searchvalue,fromindex)p参数说明如下。参数说明如下。p searchvalue searchvalue：指定需检索的字符串值。：指定需检索的字符串值。p fromindex fromindex：指定在字符串中开始检索的位置。取值：指定在字符串中开始检索的位置。取值范围为范围为0 stringObject.length-10 stringObject.length-1。如果省略该。如果省略该参数，则将从字符串的首字符开始检索。参数，则将从字符串的首字符开始检索。7indexOf()方法indexOf()方法用于返回 S【例例4-10】演示indexOf()函数的例子varstr=JavaScript;document.write(str.indexOf(c);p浏览【例浏览【例4-104-10】结果为】结果为5 5。【例4-10】8strike()方法方法pfixed()fixed()方法用于将方法用于将 HTML HTML 的的 标识放置标识放置到到StringString对象中的文本两端，从而显示加删除线对象中的文本两端，从而显示加删除线的字符串。语法如下：的字符串。语法如下：stringObject.strike()8strike()方法fixed()方法用于将 HTML 浏览浏览【例例4-11】结果结果浏览【例4-11】结果9sub()方法方法psub()sub()方法用于把字符串显示为下标。语法如下：方法用于把字符串显示为下标。语法如下：stringObject.sub()p【例例4-124-12】使用使用sub()sub()方法的例子。方法的例子。演示使用Strike()函数的例子varstr=JavaScript;document.write(str);document.write(str.sub();9sub()方法sub()方法用于把字符串显示为下标。语法浏览浏览【例例4-12】结果结果浏览【例4-12】结果10substring()方法方法psubstring()substring()方法用于返回位于方法用于返回位于 String String 对象对象中指定位置的子字符串，语法如下：中指定位置的子字符串，语法如下：stringObject.substring(start,stop)p参数说明如下。参数说明如下。pstartstart：指定要提取的子串的第一个字符在：指定要提取的子串的第一个字符在 stringObject stringObject 中的位置。中的位置。pstopstop：指定定要提取的子串的最后一个字符在：指定定要提取的子串的最后一个字符在 stringObject stringObject 中的位置。注意中的位置。注意stopstop比要提取比要提取的子串的最后一个字符在的子串的最后一个字符在 stringObject stringObject 中的中的位置多位置多 1 1。10substring()方法substring()方【例例4-13】演示substring()函数的例子varstr=JavaScript;document.write(str.substring(5,7);p浏览浏览【例例4-134-13】结果为结果为crcr。【例4-13】11concat()方法方法pconcat()concat()方法用于返回一个方法用于返回一个 String String 对对象，该对象包含了两个提供的字符串的连象，该对象包含了两个提供的字符串的连接，语法如下：接，语法如下：arrayObject.concat(str)p参数参数strstr是需要连接到是需要连接到arrayObjectarrayObject的字符的字符串。串。concat()concat()方法返回连接后的字符串。方法返回连接后的字符串。也可以直接使用也可以直接使用+连接两个字符串，方法连接两个字符串，方法如下：如下：str1+str2 11concat()方法concat()方法用于返回一【例例4-14】演示concat()函数的例子varstr1=Hellovarstr2=JavaScript!document.write(str1.concat(str2)document.write(str1+str2)【例4-14】12replace()方法方法preplace()replace()方法用于在字符串中用一些字符替方法用于在字符串中用一些字符替换另一些字符，语法如下：换另一些字符，语法如下：stringObject.replace(regexp/substr,replacement)p参数说明如下。参数说明如下。p substr substr：指定要对：指定要对stringObjectstringObject进行替换的进行替换的子串。子串。p replacement replacement：指定替换成的子串。：指定替换成的子串。12replace()方法replace()方法用于在字符【例例4-15】演示replace()方法的例子varstr=HelloJavascript!document.write(str.replace(Javascript,jQuery)p浏览【例浏览【例4-154-15】结果如下：】结果如下：Hello jQuery!Hello jQuery!【例4-15】13slice()方法方法pslice()slice()方法用于返回字符串的片段，语法如下：方法用于返回字符串的片段，语法如下：pstringObject.slice(start,end)stringObject.slice(start,end)p参数说明如下。参数说明如下。pstartstart：指定要返回的片断的起始索引。如果是：指定要返回的片断的起始索引。如果是负数，则从字符串的尾部开始算起的位置。负数，则从字符串的尾部开始算起的位置。-1-1指字符串的最后一个字符，指字符串的最后一个字符，-2-2指倒数第二个字指倒数第二个字符，以此类推。符，以此类推。pendend：指定要返回的片断的结尾索引。如果是负：指定要返回的片断的结尾索引。如果是负数，则从字符串的尾部开始算起的位置。数，则从字符串的尾部开始算起的位置。preplace()replace()方法返回在方法返回在stringObjectstringObject中将中将substrsubstr替换成替换成replacementreplacement得到的字符串。得到的字符串。13slice()方法slice()方法用于返回字符串的片【例例4-16】演示演示slice()slice()方法的例子方法的例子var str=Hello Javascript!var str=Hello Javascript!document.write(str.slice(6,16)document.write(str.slice(6,16)p浏览【例浏览【例4-164-16】结果如下：】结果如下：JavascriptJavascript【例4-16】14split()方法方法psplit()split()方法用于将一个字符串分割为子字符方法用于将一个字符串分割为子字符串，然后将结果作为字符串数组返回，语法串，然后将结果作为字符串数组返回，语法如下：如下：stringObject.split(separator,howmany)p参数说明如下。参数说明如下。p separator separator：指定分割符。：指定分割符。p howmany howmany：指定返回的数组的最大长度。如：指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个果设置了该参数，返回的子串不会多于这个参数指定的数组。参数指定的数组。psplit()split()方法返回对方法返回对stringObjectstringObject进行分割进行分割得到的数组。关于数组的概念将在得到的数组。关于数组的概念将在4.2.54.2.5小节小节介绍。介绍。14split()方法split()方法用于将一个字符串分【例例4-17】演示split()方法的例子varstr=HelloJavascript!document.write(str.split()p浏览浏览【例例4-174-17】结果如下：结果如下：Hello,Javascript!【例4-17】5sup()方法方法psup()sup()方法用于将方法用于将 HTML HTML 的的标签放置到标签放置到StringString对象中的文本两端，从而将字符串显对象中的文本两端，从而将字符串显示为上标，语法如下：示为上标，语法如下：stringObject.sup()5sup()方法sup()方法用于将 HTML 的SUP【例例4-18】演示使用演示使用sup()函数的例子函数的例子var str=2;document.write(str+str.sup()+=4);【例4-18】浏览浏览【例例4-18】结果结果浏览【例4-18】结果16toLowerCase()方法方法ptoLowerCase()toLowerCase()方法用来方法用来把字符串转换为小写，语把字符串转换为小写，语法如下：法如下：stringObject.toLowerCase()16toLowerCase()方法toLowerCase【例例4-19】pp演示使用toLowerCase()函数的例子pppvarstr=toLowerCase;pdocument.write(str.toLowerCase();ppp【例4-19】String类的其他常用方法类的其他常用方法String类的其他常用方法4.2.5 Array类类p1 1 数组的概念数组的概念p2 2创建创建ArrayArray对象对象p3 3ArrayArray类的属性类的属性p4 4遍历数组遍历数组p5 5连接数组元素连接数组元素p6 6连接数组连接数组p7 7排序数组元素排序数组元素4.2.5 Array类1 数组的概念1数组的概念数组的概念p数组是在内存中保存一组数据的数据结构，它具有如下数组是在内存中保存一组数据的数据结构，它具有如下特性：特性：p 和变量一样，每个数组都有一个唯一标识它的名称。和变量一样，每个数组都有一个唯一标识它的名称。p 同一数组的数组元素应具有相同的数据类型。同一数组的数组元素应具有相同的数据类型。p 每个数组元素都有索引和值两个属性，索引用于定义每个数组元素都有索引和值两个属性，索引用于定义和标识数组元素，索引是一个凑从和标识数组元素，索引是一个凑从0 0开始的整数，标识开始的整数，标识数组元素的位置；值当然就是数组元素对应的值。数组元素的位置；值当然就是数组元素对应的值。p 一个数组可以有一个或多个索引，索引的数量也称为一个数组可以有一个或多个索引，索引的数量也称为数组的维度。拥有一个索引的数组就是一维数组，拥有数组的维度。拥有一个索引的数组就是一维数组，拥有2 2个索引的数组就是二维数组，以此类推。个索引的数组就是二维数组，以此类推。1 数组的概念数组是在内存中保存一组数据的数据结构，它具一维数组的示意图一维数组的示意图一维数组的示意图2创建创建Array对象对象p可以使用可以使用newnew关键字创建关键字创建ArrayArray对象，方法对象，方法如下：如下：Array对象=newArray(数组大小)p例如下面的语句可以创建一个由例如下面的语句可以创建一个由8 8个元素个元素组成的数组组成的数组MyArrMyArr：MyArr=newArray(8)2创建Array对象可以使用new关键字创建Array对象3Array类的属性类的属性pArrayArray类只有一个属性类只有一个属性lengthlength，用来返回数组的长度。，用来返回数组的长度。p【例【例4-204-20】输出数组长度的例子。输出数组长度的例子。输出数组长度的例子varMyStr;MyArr=newArray(3);MyArr0=123;MyArr1=789;MyArr2=456;document.write(数组MyArr的长度为：+MyArr.length);p浏览【例浏览【例4-204-20】结果如下：】结果如下：数组MyArr的长度为：33Array类的属性Array类只有一个属性length，浏览浏览【例例1-8】的结果的结果 p可以通过下面的方法访问数组元素。可以通过下面的方法访问数组元素。数组元素值=数组名索引p可以使用可以使用forfor语句遍历数组的所有索引，语句遍历数组的所有索引，然后使用上面的方法访问每个数组元素。然后使用上面的方法访问每个数组元素。浏览【例1-8】的结果 可以通过下面的方法访问数组元素。【例【例4-21】使用使用for语句遍历数组语句遍历数组使用for语句遍历数组varMyStr;MyArr=newArray(3);MyArr0=123;MyArr1=789;MyArr2=456;for(vari=0;iMyArr.length;i+)document.write(MyArri+);【例4-21】使用for语句遍历数组浏览【例浏览【例4-21】结果如下】结果如下p123123p789789p456456浏览【例4-21】结果如下123使用使用forin语句遍历数组语句遍历数组for(索引变量in数组名)/通过数组名索引变量访问每个数组元素使用forin语句遍历数组for(索引变量 in 数组名【例【例4-22】使用使用forin语句遍历数组语句遍历数组使用forin语句遍历数组varMyStr;MyArr=newArray(3);MyArr0=123;MyArr1=789;MyArr2=456;for(xinMyArr)document.write(MyArrx+)【例4-22】使用forin语句遍历数组5连接数组元素连接数组元素p Array Array类的类的join()join()方法用于把数组中方法用于把数组中的所有元素连接为一个字符串，语法的所有元素连接为一个字符串，语法如下：如下：arrayObject.join(separator)p参数参数separatorseparator用于指定分隔符。如果用于指定分隔符。如果省略该参数，则使用逗号作为分隔符。省略该参数，则使用逗号作为分隔符。join()方法返回连接后的字符串。5连接数组元素 Array类的join()方法用于把数组【例【例4-23】将数组中所有元素连接成字符串varMyStr;MyArr=newArray(3);MyArr0=123;MyArr1=789;MyArr2=456;document.write(MyArr.join();document.write();document.write(MyArr.join(-);p浏览【例浏览【例4-234-23】结果如下：】结果如下：123,789,456123-789-456【例4-23】6连接数组连接数组pArrayArray类的类的concat()concat()方法用于连接两个或多个数组，语方法用于连接两个或多个数组，语法如下：法如下：arrayObject.concat(arrayX,arrayX,.,arrayX)pconcat()concat()方法将方法将arrayObjectarrayObject与参数中的与参数中的arrayXarrayX连接在连接在一起，并返回连接后的数组。一起，并返回连接后的数组。6连接数组Array类的concat()方法用于连接两个或【例【例4-24】连接数组的例子连接数组的例子连接数组varMyStr;MyArr1=newArray(3);MyArr10=123;MyArr11=456;MyArr12=789;MyArr2=newArray(3);MyArr20=abc;MyArr21=def;MyArr22=ghi;document.write(MyArr1.concat(MyArr2);浏览【例浏览【例4-244-24】结果如下：】结果如下：123,456,789,abc,def,ghi【例4-24】连接数组的例子7排序数组元素排序数组元素p使用使用ArrayArray类的类的sort()sort()方法可以对数组元方法可以对数组元素进行排序，语法如下：素进行排序，语法如下：arrayObject.sort()psort()sort()方法返回排序后的数组。方法返回排序后的数组。7排序数组元素使用Array类的sort()方法可以对数【例【例4-25】排序数组元素的例子。排序数组元素的例子。排序数组元素vararr=newArray(6)arr0=Georgearr1=Johneyarr2=Thomasarr3=Jamesarr4=Adrewarr5=Martindocument.write(arr+)document.write(arr.sort()【例4-25】排序数组元素的例子。浏览【例浏览【例4-25】结果如下】结果如下George,Johney,Thomas,James,Adrew,MartinAdrew,George,James,Johney,Martin,Thomas浏览【例4-25】结果如下George,Johney,Tho对数组元素进行倒序排序对数组元素进行倒序排序p使用使用ArrayArray类的类的reverse()reverse()方法可以对数组方法可以对数组元素进行倒序排序，语法如下：元素进行倒序排序，语法如下：parrayObject.reverse()preverse()reverse()方法返回连排序后的数组。方法返回连排序后的数组。对数组元素进行倒序排序使用Array类的reverse()方【例【例4-26】倒序排序数组元素的例子倒序排序数组元素的例子返回倒序数组的例子vararr=newArray(6)arr0=Georgearr1=Johneyarr2=Thomasarr3=Jamesarr4=Adrewarr5=Martindocument.write(arr+)document.write(arr.reverse()浏览【例浏览【例4-264-26】结果如下：】结果如下：George,Johney,Thomas,James,Adrew,MartinMartin,Adrew,James,Thomas,Johney,George【例4-26】倒序排序数组元素的例子TIT4.2.6 Math对象对象4.2.6 Math对象【例【例4-27】演示使用Math对象vartoday;document.write(Math.abs(-1)=+Math.abs(-1)+);document.write(Math.ceil(0.60)=+Math.ceil(0.60)+);document.write(Math.floor(0.60)=+Math.floor(0.60)+);document.write(Math.max(5,7)=+Math.max(5,7)+);document.write(Math.min(5,7)=+Math.min(5,7)+);document.write(Math.random()=+Math.random()+);document.write(Math.round(0.60)=+Math.round(0.60)+);document.write(Math.sqrt(4)=+Math.sqrt(4)+);【例4-27】浏览结果如下浏览结果如下Math.abs(-1)=1Math.ceil(0.60)=1Math.floor(0.60)=0Math.max(5,7)=7Math.min(5,7)=5Math.random()=0.9517934215255082Math.round(0.60)=1Math.sqrt(4)=2浏览结果如下Math.abs(-1)=14.3 DOM编程编程4.3.1 HTML DOM框架框架4.3.2 document 对象对象4.3.3 DOM对象的属性对象的属性4.3.4 DOM对象的方法对象的方法4.3 DOM编程4.3.1 HTML DOM框架4.3.1 HTML DOM框架框架pHTML DOM HTML DOM 定义了访问和操作定义了访问和操作HTMLHTML文档的文档的标准方法。它把标准方法。它把HTMLHTML文档表现为带有元素、文档表现为带有元素、属性和文本的树结构（节点树）属性和文本的树结构（节点树）4.3.1 HTML DOM框架HTML DOM 定义了访4.3.2 document 对象对象p1 1document document 对象的集合对象的集合4.3.2 document 对象1document 对【例例4-28】【例4-28】document.write(网页中共有+document.images.length+个img元素。);【例4-28】浏览浏览【例例4-28】结果结果浏览【例4-28】结果2document对象的属性对象的属性2document对象的属性3document对象的方法对象的方法3document对象的方法【例例4-29】functiongetValue()varx=document.getElementById(myinput)alert(x.value)获取文本框的内容【例4-29】4.3.3 DOM对象的属性对象的属性p1 1innerHTMLinnerHTML属性属性pinnerHTMLinnerHTML属性是最常用的属性是最常用的DOMDOM的属性，用于获的属性，用于获取或设置取或设置 HTML HTML 元素的内容。元素的内容。例如，使用例如，使用p p元元素的素的 innerHTML innerHTML属性可以获取或设置属性可以获取或设置 元素元素的内容。的内容。4.3.3 DOM对象的属性1innerHTML属性【例例4-30】HelloWorld!vartxt=document.getElementById(intro).innerHTML;document.write(txt);【例4-30】2firstChild 属性属性pfirstChild firstChild 属性可返回属性可返回DOMDOM对象的首个子节点。对象的首个子节点。p【例例4-314-31】使用使用firstChild firstChild 属性的例子。属性的例子。DIV的子对象alert(document.getElementById(abc).firstChild.innerHTML);/返回DIV的子对象2firstChild 属性firstChild 属性可返3nodeName 属性属性pnodeName nodeName 属性可依据节点的类型返回其属性可依据节点的类型返回其名称，例如名称，例如p p元素返回元素返回p p。3nodeName 属性nodeName 属性可依据节点的4nodeValue 属性属性p返回一个字符串，表示文本项节点的值。如果返回一个字符串，表示文本项节点的值。如果是其他类型节点，返回是其他类型节点，返回nullnull。4nodeValue 属性返回一个字符串，表示文本项节点的5nodeType 属性属性p返回节点的类型，返回节点的类型，1 1表示此节点是标记（表示此节点是标记（tagtag）；）；2 2表示表示属性（属性（attributeattribute）；）；3 3表示文本项。表示文本项。5nodeType 属性返回节点的类型，1表示此节点是标记6LastChild属性属性p返回一个对象，表示返回一个对象，表示DOMDOM对象的最后一个对象的最后一个子节点子节点6LastChild属性返回一个对象，表示DOM对象的最后7NextSibling属性属性p 返回一个对象（返回一个对象（ObjectObject），表示），表示DOMDOM对象对象的下一个相邻的兄弟节点。的下一个相邻的兄弟节点。7NextSibling属性返回一个对象（Object）8parentNode属性属性p返回一个对象（返回一个对象（ObjectObject），表示当前节点），表示当前节点的父节点。的父节点。8parentNode属性返回一个对象（Object），表9parentNode属性属性p返回一个对象（返回一个对象（ObjectObject），表示当前节点），表示当前节点的父节点。的父节点。9parentNode属性返回一个对象（Object），表10specified属性属性p返回一个布尔型变量（返回一个布尔型变量（BooleanBoolean），表示），表示是否设置了属性值（是否设置了属性值（attributeattribute）。）。10specified属性返回一个布尔型变量（Boolea11data属性属性p返回一个字符串，表示文本项节点的值。返回一个字符串，表示文本项节点的值。如果是其他类型节点，返回如果是其他类型节点，返回undefinedundefined。11data属性返回一个字符串，表示文本项节点的值。如果是12attributes属性属性p表示节点的属性集合。通过表示节点的属性集合。通过idid来访问，比如来访问，比如attributes.idattributes.id。12attributes属性表示节点的属性集合。通过id来13childNodes属性属性p表示节点的孩子节点集合。通过数组索引表示节点的孩子节点集合。通过数组索引方式访问，比如：方式访问，比如：childNodes2childNodes2。13childNodes属性表示节点的孩子节点集合。通过数4.3.4 DOM对象的方法对象的方法1 1appendChild()appendChild()方法方法appendChild()appendChild()方法用于把新的子节点添加到指定节点，方法用于把新的子节点添加到指定节点，语法如下：语法如下：appendChild(newchild)appendChild(newchild)appendChild()appendChild()方法返回新的子节点对象。方法返回新的子节点对象。4.3.4 DOM对象的方法1appendChild()【例例4-32】divdiv元素元素 var board=document.getElementById(board);var board=document.getElementById(board);var e=document.createElement(input);var e=document.createElement(input);e.type=button;e.type=button;e.value=e.value=这是测试加载的按钮这是测试加载的按钮;var object=board.appendChild(e);var object=board.appendChild(e);【例4-32】浏览浏览【例例4-32】结果结果浏览【例4-32】结果2removeChild()方法方法removeChild()removeChild()方法可从子节点列表中删除方法可从子节点列表中删除某个节点，语法如下：某个节点，语法如下：nodeObject.removeChild(node)nodeObject.removeChild(node)参数参数nodenode指定要删除的节点。指定要删除的节点。2removeChild()方法removeChild()3replaceChild()方法方法preplaceChild()replaceChild()方法用于替换子节点。语方法用于替换子节点。语法如下：法如下：nodeObject.replaceChild(new_node,old_node)p参数参数new_nodenew_node指定新的节点，参数指定新的节点，参数old_nodeold_node指定被替换的节点。指定被替换的节点。3replaceChild()方法replaceChild4insertBefore()方法方法insertBefore()insertBefore()方法用于在指定的子节点方法用于在指定的子节点前面插入新的子节点。语法如下：前面插入新的子节点。语法如下：pparentElement.insertBefore(newElement,targetElement);newElementnewElement是要插入的心的子节点，是要插入的心的子节点，targetElementtargetElement是要在其前面插入新节点是要在其前面插入新节点的子节点，的子节点，parentElementparentElement是是newElementnewElement和和targetElementtargetElement父节点。父节点。4insertBefore()方法insertBefore【例例4-33】div元素varboard=document.getElementById(board);vare=document.createElement(input);e.type=button;e.value=这是测试的按钮;varobject=board.parentNode.insertBefore(e,board);【例4-33】浏览浏览【例例4-33】结果结果浏览【例4-33】结果浏览浏览【例例1-25】的结果的结果 pgetAttribute()getAttribute()方法用于读取对应属性的方法用于读取对应属性的属性值。语法如下：属性值。语法如下：属性值=getAttribute(属性名)浏览【例1-25】的结果 getAttribute()方法用【例例4-34】getAttributediv2div3varlist=document.getElementsByTagName(div);varmydiv=listdiv2.getAttribute(id);alert(用listdiv2取到第2个id的属性的属性值:+mydiv);【例4-34】6setAttribute()方法方法p把指定属性设置或修改为指定的值。语法如下：把指定属性设置或修改为指定的值。语法如下：obiect.setAttribute(属性名,值)6setAttribute()方法把指定属性设置或修改为指4.4 BOM编程编程pBOMBOM是是Browser Object ModelBrowser Object Model（浏览器对象模型）（浏览器对象模型）的缩写，该模型由一组浏览器对象组成。的缩写，该模型由一组浏览器对象组成。4.4 BOM编程BOM是Browser Object MBOM对象的具体功能对象的具体功能BOM对象的具体功能4.4.1 Window对象对象4.4.1 Window对象Window对象的方法对象的方法Window对象的方法【例【例4-35】演示使用Window.alert()的使用functionClickme()alert(你好);点击试一下【例4-35】【例【例4-35】的浏览结果】的浏览结果【例4-35】的浏览结果Windows.setTimeout()方法方法pWindows.setTimeout()Windows.setTimeout()方法的语法如下：方法的语法如下：Windows.setTimeout(code,millisec)p参数参数codecode表示要调用的函数后要执行的表示要调用的函数后要执行的 JavaScript JavaScript 代码串，参数代码串，参数millisecmillisec表示表示在执行代码前需等待的毫秒数。在执行代码前需等待的毫秒数。Windows.setTimeout()方法Windows.4.4.2 Navigator对象对象4.4.2 Navigator对象【例【例4-37】浏览器信息document.write(浏览器名称：+navigator.appName+);document.write(浏览器版本：+navigator.appVersion+);document.write(浏览器的代码名称：+navigator.appCodeName+);document.write(是否启用cookie：+navigator.cookieEnabled+);document.write(浏览器的语言：+navigator.browserLanguage+);document.write(操作系统平台：+navigator.platform+);document.write(CPU等级：+navigator.cpuClass+);【例4-37】在在Chrome浏览器中浏览【例浏览器中浏览【例4-37】的结果】的结果在Chrome浏览器中浏览【例4-37】的结果查看查看 标签定义的描述文档标签定义的描述文档 查看 标签定义的描述文档 1.3.5 全新的表单设计全新的表单设计 pHTML5HTML5支持支持HTML4HTML4中定义的所有标准输入控中定义的所有标准输入控件，而且新增了下面的新输入控件，从而件，而且新增了下面的新输入控件，从而使使HTML5HTML5实现了全新的表单设计。关于实现了全新的表单设计。关于HTML5HTML5表单设计的具体情况将在第表单设计的具体情况将在第3 3章中介章中介绍。绍。1.3.5 全新的表单设计 HTML5支持HTML4中定1.3.6 强大的绘图和多媒体功能强大的绘图和多媒体功能 HTML4HTML4几乎没有绘图的功能，通常只能显示已有的图片；几乎没有绘图的功能，通常只能显示已有的图片；而而HTML5HTML5则集成了强大的绘图功能。在则集成了强大的绘图功能。在HTML5HTML5中可以通过中可以通过下面的方法进行绘图：下面的方法进行绘图：使用使用Canvas APICanvas API动态地绘制各种效果精美的图形；动态地绘制各种效果精美的图形；绘制可伸缩矢量图形（绘制可伸缩矢量图形（SVGSVG）。）。借助借助HTML5HTML5的绘图功能，既可以美化网页界面，也可以实的绘图功能，既可以美化网页界面，也可以实现专业人士的绘图需求。本书将在第现专业人士的绘图需求。本书将在第6 6章介绍使用章介绍使用Canvas APICanvas API画图的方法；并在第画图的方法；并在第7 7章介绍绘制可伸缩矢章介绍绘制可伸缩矢量图形（量图形（SVGSVG）的方法。）的方法。HTML4HTML4在播放音频和视频时都需要借在播放音频和视频时都需要借flashflash等第等第3 3方插件。方插件。而而HTML5HTML5新增了新增了和和元素，可以不依赖任元素，可以不依赖任何插件地播放音频和视频，以后用户就不需要安装和升何插件地播放音频和视频，以后用户就不需要安装和升级级flashflash插件了，这当然更方便了。本书将在第插件了，这当然更方便了。本书将在第8 8章介绍章介绍播放音频和视频大方法。播放音频和视频大方法。1.3.6 强大的绘图和多媒体功能 HTML4几乎没有绘1.3.7 打造桌面应用的一系列新功能打造桌面应用的一系列新功能 p在传统的在传统的WebWeb应用程序中，数据存储和数据处理都有服应用程序中，数据存储和数据处理都有服务器端脚本（例如务器端脚本（例如ASPASP、ASP.NETASP.NET和和PHPPHP等）完成，客户等）完成，客户端的端的HTMLHTML语言只负