Web应用开发技术教学课件-第13章JavaScript对象简介.ppt

2019年4月7日,管理学院,第 13 章 javascript对象简介,2019年4月7日,管理学院,13.1 javascript对象的特征,面向对象技术是现代软件开发中的重要技术之一，其主要特征是类、封装、继承和多态。c+、c#和java等都是典型的面向对象语言。 相比之下，javascript并没有从语法上明确提供类、继承、重载等有关面向对象语言特征的实现。有人认为，javascript是基于对象的语言，而不是面向对象的语言。 但是，这并不妨碍我们在javascript中使用这些特性。javascript是一种相当灵活的语言，它把其它语言中的的类与对象用更简洁的形式统一起来，形成一个非常强大的对象(object)系统。其实， javascript确实具有面向对象的基本特征，它可以根据需要创建自己的对象，只是其表现形式和其他面向对象编程语言有很大差异。,2019年4月7日,管理学院,13.1 javascript对象的特征,在传统的web网站中，javascript只完成很有限的功能，而在ajax应用中，利用javascript对象的特征能完成复杂的功能，并使得逻辑更加清晰。从而进一步扩大javascript的应用范围，实现功能强大的web应用。 程序13.1：jso01.htm function helloworld() this.myprint = function() return “javascript语言“; /创建对象的实例 var myhelloworld = new helloworld(); /调用方法 document.write(myhelloworld.myprint (); ,这段代码，首先创建了一个名为helloworld的对象，并为该对象定义了一个方法myprint；然后，使用new运算符实例化该对象，调用对象中定义的方法，并将该方法返回的结果写在网页上。 在这个例子中，helloworld()虽然是作为一个函数定义的，但它自身却包含一个myprint()方法，说明 helloworld()在这里是被当成一个对象来处理的。准确地说，helloworld()是一个“函数对象”。,2019年4月7日,管理学院,13.2 javascript对象的操作,javascript中的对象是由属性(properties)和方法(methods)构成的，前者与对象中的变量相关联；后者是对象执行的动作，与特定的函数相关联。 javascript的对象操作也是围绕对象的属性和方法进行的，包括对象属性和方法的引用以及对象的定义。 javascript对象的引用 对象属性的引用 对象方法的引用 javascript对象的操作语句,2019年4月7日,管理学院,13.2 .1 javascript对象的引用,javascript对象属性的引用有三种方法： 使用点“.”运算符 通过字符串的形式实现 通过对象的下标实现引用 假如用一个student对象来描述一个学生，name、sex、date是它的3个属性，分别表示学生的姓名、性别和出生年月。 下面通过3种方式分别实现对其赋值或访问属性的值。,对象属性的引用,2019年4月7日,管理学院,13.2 .1 javascript对象的引用,使用点“.”运算符 其格式为： 对象名.属性名 上面的student对象属性用该方法可表示为： student.name=”春华” student.sex =”女” student.date=“1982.09.02“ 通过字符串的形式实现 student“name“ =”春华” student“sex “ =”女” student“date“ = “1982.09.02“ 这种表示方式与关联数组(associative array)是一样的。可见，在javascript中，关联数组就是对象，对象就是一个关联数组,2019年4月7日,管理学院,13.2 .1 javascript对象的引用,通过对象的下标实现引用 student 0= ”春华” student 1= ”女” student 2= “1982.09.02“ 使用下标方式引用对象，实际上是将对象看做一个数组，对象名即数组名，对象属性看做数组的元素。通过数组形式访问对象属性，可以使用循环操作获取其值。例如： function showstudent (object) for (var j=0;j=2; j+) document.write(objectj) ,showstudent函数是通过数组下标的index值来访问每个对象的属性，使用这种方式首先必须知道数组的下标值，否则若超出范围，就会发生错误。,2019年4月7日,管理学院,13.2 .1 javascript对象的引用,可以使用for.in语句来访问对象属性。上面的语句用for.in循环可表示为： function showstudent (object) for (var st in this) document.write(thisst); 上面的代码等价于： function showstudent (object) for (avr i=0; i object.length;i+) document.write(thisi); ,showstudent()函数的功能是将一个已知对象的所有属性依次赋给同一个变量，而不是使用计数器来实现的，其优点是无需知道对象中属性的个数即可进行操作。该函数中用到关键字this，this的含义和作用将在后面详细介绍。,2019年4月7日,管理学院,13.2 .1 javascript对象的引用,对javascript中对象方法的引用也是非常简单的。其格式为： 对象名.方法名() 例如引用student对象中的showstudent（）方法， 可使用下面的方式： document.write (student.showstudent () 或： with(student) document.write(showstudent (),对象方法的访问,2019年4月7日,管理学院,13.2.2 javascript对象的操作语句,javascript提供了几个用于操作对象的语句、关键字和运算符，用于对象的使用和定义。它们是this、with和new。 1this 关键字 this是面向对象语言中的一个重要概念，在java、c#等语言中，this固定指向运行时的当前对象。但在javascript中，由于其动态性，this的指向在运行时才确定。 this是对“当前”对象的引用，在不同的地方，this代表不同的对象。在页面的标签中的javascript的“主程序”中（不在任何 function和事件处理程序中）使用this，它就代表window对象；如果在with 语句块中使用 this，它就代表with所指定的对象；如果在事件处理程序中使用this，它就代表发生事件的对象；如果在function中使用this，this通常指向正在执行的函数本身，或者指向该函数所属的对象。,2019年4月7日,管理学院,13.2.2 javascript对象的操作语句,2 with关键字 with语句的作用是为一个或一组语句指定默认对象。在with语句体内，任何对变量的引用被认为是这个对象的属性。 with语句的语法如下： with （object） 执行语句 with语句通常用来缩短代码的书写量。下面的表达式多次引用了math对象中的静态方法。 x = math.cos(3 * math.pi) + math.sin(math.ln10); y = math.tan(14 * math.e); 当使用with 语句时，上面的代码变得更简单： with (math) x = cos(3 * pi) + sin(ln10); y = tan(14 * e); ,2019年4月7日,管理学院,13.2.2 javascript对象的操作语句,3new运算符 new语句是一种对象构造器，可以用new语句来定义一个新对象(或称为对象的实例)。其使用格式如下： 新对象名= new 对象名(参数列表); 其中对象名必须是一个已经存在的对象。 例如，可以用如下的语句创建一个日期对象。 newdata=new date(),2019年4月7日,管理学院,13.2.2 javascript对象的操作语句,例子程序13.2是一个with和new语句应用的例子。 程序13.2：jso02.htm var name = “sunny“; var st=function() = “apple“; this.age = 24; var st1 = new st(); with(document) write(name+“); with(st1) write(name + “); write(age); 运行该页面程序，输出结果如下： sunny apple 24,2019年4月7日,管理学院,13.3 javascript对象与函数,javascript中没有类的概念，只有对象。javascript中有两种可对象化的数据类型： object和function 通过object数据类型，可以创建一个新的对象。javascript所提供的 内置对象(如string、date等)都是以该对象为基础的。 另一种称为“函数对象”，就是我们通常定义的function，类似于其他面向对象语言中的方法(或函数)。在javascript中，函数是被当成对象来处理的，同时函数又可作为对象的方法。 程序13.3：jso03.htm var student = new object(); s = “sunny“; student.age = 25; document.write(s + “); document.write(student.age); ,也可以通过下标“”操作符来创建对象属性，上面的例子程序可以改为： 程序13.4：jso04.htm var student = new object(); student“name“ = “sunny“; student“age“ = 25; document.write(student“name“ + “); document.write(student“age“); ,2019年4月7日,管理学院,13.3.1 javascript对象的创建,上面定义了对象的属性，还可以为对象添加方法，javascript中通常用函数来定义对象的方法。例子程序13.5为student对象添加了一个方法。 程序13.5：jso05.htm var student = new object(); s = “sunny“; student“age“ = 25; student.show=function() document.write( + “); document.write(this“age“); student.show(); ,在上面的代码中，我们为student对象定义了一个方法show()，其方法体是一个函数，在函数体内又用this关键字来引用对象的属性，最后通过student.show()语句调用该对象的方法在页面上显示属性的值。,2019年4月7日,管理学院,13.3.1 javascript对象的创建,下面介绍javascript的第三种对象的表示方法，这是javascript的独特的对象表示方法，其语法更加简洁。 程序13.6：jso06.htm var student = name : “sunny“, age : 25, show : function()document.write( + “); document.write(this“age“); student.show(); ,用student =来创建一个对象时，javascript会自动调用object对象的构造器来构造对象，其效果与 new obiect()是等价的。,2019年4月7日,管理学院,13.3.1 javascript对象的创建,还可以在对象中嵌套定义对象。 程序13.7：jso07.htm var student = basic : name : “sunny“ , age : 25 , family : city:“melboure“,address:“30 carlton street,vic 26500,australia“, show : function () document.write(“name: “) + document.write(this.b + “); document.write(“ages: “) + document.write(this.basic.age + “); document.write(“city: “) + document.write(this.family.city + “); document.write(“address: “) + document.write(this.family.address + “); ; student.show(); 运行后页面上显示： name: sunny ages: 25 city: melboure address: 30 carlton street, vic 26500, australia,这种语法因为其清晰的结构和紧凑的代码格局而非常流行，在各种javascript框架中也经常看到，这就是上一章所介绍的json。json是一种轻量级的数据交换格式，用于javascript在互联网上交换数据。,2019年4月7日,管理学院,13.3.2 javascript的函数对象,在上一章中，已经给出了javascript函数的基本定义，即： fnction 函数名（参数列表） 函数体；. return 表达式; 或写成： function funcname() 用function关键字定义一个函数，并为每个函数指定一个函数名，然后通过函数名来进行调用。这是函数的经典定义方法，与其他的语言中的函数定义没有什么差异。,2019年4月7日,管理学院,13.3.2 javascript的函数对象,其实，javascript中函数定义的语法很多，主要有以下几种形式： function funcname () var objname =function(); var objname =function funcname (); var objname =new function(); 这些都是函数定义的正确语法。与其他语言中常见的函数的定义方式有着很大的区别。 第二种方式和第三种方式是类似的，其区别是第二种方式是匿名函数，而第三种不是。 这里的objname不是函数的返回值，而是一个对象类型数据，可以用objname来访问函数对象的属性和方法。,2019年4月7日,管理学院,13.3.2 javascript的函数对象,下面是javascript函数定义的例子： 程序13.9：jso09.htm var func1 = function() alert(“声明一个匿名函数“); func1(); /调用函数 javascript中的匿名函数可以在声明之后立即调用，代码如下： 程序13.10：jso10.htm var i=function(a,b) alert(a+b); (7,8) ,2019年4月7日,管理学院,13.3.2 javascript的函数对象,javascript函数本身是一个对象，也可以作为对象的方法来使用，如： 程序13.11：jso11.htm var student = name:“sunny“, study:function(course) return +“ 正在学习 “+c var course=name:“web应用技术“ alert(student.study(course); ,javascript的灵活性和复杂性就在于其函数具有对象的特性。实际上，javascript中的函数扮演着函数与对象的双重角色。 一方面它扮演像其他语言中的函数的角色 可以接收参数并作为模块被调用； 另一方面它还被作为对象的构造器来使用 可以用来创建对象。 course既是一个对象，也是函数的参数,2019年4月7日,管理学院,13.3.2 javascript的函数对象,为什么javascript函数具有函数与对象的双重作用呢？ 在javascript中，当函数对象创建时，系统会默认为其创建两个属性call和constructor。当函数对象被当做一个普通函数被调用的时候(例如myfunc()，函数对象的call属性就被执行；当它被当做一个构造器被调用的时候(例如new myconst()，其constructor属性就被执行。 程序13.12：jso12.htm function student(name) =name; this.study=function(course) alert( + “ 学习 “ + c); var st1=new student(“sunny“); var st2=new student(“web应用技术“); st1.study(st2); ,该例子程序中，先定义了一个函数对象student，其属性为name，方法为study()，然后用new student()语句建立了两个新的对象st1、st2 (student对象的实例)，对象st1、st2继承了student对象的所有属性和方法。,2019年4月7日,管理学院,13.3.2 javascript的函数对象-购物车,在javascript中，任何一个对象都是object的实例。下面是javascript的函数对象实现购物车的例子。 程序13.13：jso13.htm function cart() this.items = ; function item(id,name,desc,price) this.id = id; = name; this.desc = desc; this.price = price; ,2019年4月7日,管理学院,13.3.2 javascript的函数对象-购物车,/ 建立一个购物车的实例，并添加数据 var cart = new cart(); cart.items.push(new item(“01“,“打印纸“,“a4型号高级打印纸“,30); cart.items.push(new item(“02“,“签字笔“, “中华高级签字笔“, 55); / document.write(cart.items0 + “); var total = 0; for(i in cart.items) total = total + cart.itemsi.price; document.write(cart.itemsi.id + “,“ + + “,“ + cart.itemsi.desc + “,“ + cart.itemsi.price + “); document.write(“); document.write(“合计价格： = “ + total + “); ,2019年4月7日,管理学院,13.4 javascript内部对象,javascript为我们提供了一些常用的内部对象和方法，用户不需要用脚本来实现这些功能。javascript提供的内部对象包括： string（字符串对象） date（日期对象） boolean （逻辑对象） number（数值对象） array （数组对象） math（数值计算） 等对象及其相关的方法。 在javascript中，对于对象属性与方法的引用有两种情况： 静态对象，即在引用该对象的属性或方法时不需要为它创建实例； 动态对象，在引用其对象或方法时必须为它创建一个实例。,2019年4月7日,管理学院,13.4.1 javascript的string（字符串）对象,string对象提供字符串的查找操作等函数。string对象属于静态对象，内容是不可变的。有两种方法可以建立string对象的实例。 用new 操作符。格式如下： var st = new string(str); 或者： var str=string(str); 使用new操作符调用构造函数string(str)可以将参数str转换为一个字符串，并且返回包括这个字符串的string对象。 不使用new操作符，直接调用string函数，将转换参数str为一个字符串，并返回这个值。例如： var str=“i have a dream“; 第二种方法是建立一个字符串最简单、最常用的方法。,2019年4月7日,管理学院,13.4.1 javascript的string（字符串）对象,string对象只有一个属性length。它表示字符串中的字符个数。 程序13.14：jso14.htm mytest = “ this is a javascript string object “ len = mytest.length document.write(mytest + “); document.write(len); 运行页面，返回 this is a javascript string object 34,2019年4月7日,管理学院,13.4.1 javascript的string（字符串）对象,string对象内置了很多的函数，用于对字符串的处理。按照函数的功能可分为： 字符串查找函数 字符串操作函数 类型转换函数 字符串比较函数 大小写转换函数 html标签处理函数。 这些函数可实现对字符串的操作与控制。 主要函数及功能描述如表13.1所示。,2019年4月7日,管理学院,13.4.1 javascript的string（字符串）对象,string对象中的函数使用非常简单，下面的例子使用字符串对象的长度属性来计算字符串的长度，并使用字符串对象的touppercase()方法将字符串转换为大写。 程序13.15：jso15.htm var txt=“hello world!“ document.write(txt.length) document.write(txt.touppercase() 运行上面的代码在页面上输出： 12 hello world!,2019年4月7日,管理学院,13.4.1 javascript的string（字符串）对象,string对象还提供了丰富的html标签处理函数，利用这些函数可以很方便地控制web页面中字符串的字体大小、字体颜色等显示式样。 程序13.：jso16.htm var txt=“web应用开发技术，清华大学出版社“ document.write(“放大：“ + txt.big() + “) document.write(“缩小：“ + txt.small() + “) document.write(“加粗：“ + txt.bold() + “) document.write(“倾斜：“ + txt.italics() + “) document.write(“填充：“ + txt.fixed() + “) document.write(“删除：“ + txt.strike() + “) document.write(“颜色：“ + txt.fontcolor(“red“) + “) document.write(“大小：“ + txt.fontsize(5) + “) document.write(“小写：“ + txt.tolowercase() + “) document.write(“大写：“ + txt.touppercase() + “) document.write(“下标：“ + txt.sub() + “) document.write(“上标：“ + txt.sup() + “) document.write(“链接：“ + txt.link(““) + “) ,2019年4月7日,管理学院,13.4.2 javascript的date（日期）对象,date继承自object对象，此对象提供操作、显示日期与时间的函数。 date做为javascript的一种内置对象，必须使用new语句的方式创建，date对象具有多种构造函数，因此new语句有很多种形式，常用的有： new date() new date(datestring) new date(year, month) new date(year, month, day) new date(year, month, day, hours) new date(year, month, day, hours, minutes) new date(year, month, day, hours, minutes, seconds) 其中： datestring 表示日期与时间的字符串，可以使用date.parse()转换。 year、month、day 分别表示年、月、日。 hours、 minutes、seconds 分别表示时、分、秒。,2019年4月7日,管理学院,13.4.2 javascript的date（日期）对象,程序13.17：jso17.htm document.write(date() document.write(“); var d1 = new date(); document.write(d1.todatestring(“yyyy.mm.dd“); document.write(“); var d2 = new date(2009, 8, 8); document.write(d2.todatestring(); ,2019年4月7日,管理学院,13.4.2 javascript的date（日期）对象,date对象没有提供直接访问的属性，只有获取和设置日期和时间的方法，用于处理日期类型的数据。这些函数按功能可分为日期获取类函数、日期设置类函数、日期打印类函数和日期解析类函数等。常用的日期处理函数如表13.2所示。 日期对象中函数(方法)的使用有两种形式。 date.方法名(参数1,参数2,); date.方法名(); date代表一个日期对象的实例，date代表日期对象，date.方法名调用的为对象的成员函数。date.方法名调用的为对象的静态函数。 date 对象具有两个可以直接调用的静态方法，它们是parse和utc。例如： var d1= date.utc(); var d2= date.parse();,2019年4月7日,管理学院,13.4.2 javascript的date（日期）对象,下面是一个date对象函数应用的综合示例，其功能是获取客户端计算机的当前日期，并显示中文的日期和星期。该例子中用到date对象的多个函数。 程序13.18：jso18.htm var objdate=new date();/创建一个日期对象表示当前时间 var year=objdate.getfullyear(); var month=objdate.getmonth()+1; /getmonth返回的月份是从0开始的，因此要加1 var date=objdate.getdate(); var day=objdate.getday();,2019年4月7日,管理学院,13.4.2 javascript的date（日期）对象,switch(day) case 0: day=“星期日“; break; case 1: day=“星期一“; break; case 2: day=“星期二“; break; case 3: day=“星期三“; break; case 4: day=“星期四“; break; case 5: day=“星期五“; break; case 6: day=“星期六“; break; document.write(“今天是：“+year+“年“+month+“月“+date+“日 运行该例子页面上显示： 今天是：2009年12月30日 星期三,2019年4月7日,管理学院,13.4.3 javascript的boolean（逻辑）对象,boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false ) 可以用new语句调用boolean的构造函数来定义一个逻辑对象。其格式为： var bool = new boolean(value); 其中，value为初始值。构造函数将转换参数(value)为一个逻辑值，并且返回包括这个逻辑值的boolean对象。 如果无初始值或者其值为 0、null、“”、false、undefined，那么对象的值为 false；否则，其值为 true。例如：下面的语句会创建初始值为true的boolean对象： var myboolean=new boolean(“false“) var myboolean=new boolean(“sunny“) 也可以不用new，直接声明一个变量，并赋一个逻辑值作为初值。例如： var bool=false; var bool=true;/这是建立一个逻辑值最简单的方法。 逻辑对象相关的方法有tostring()和valueof()，tostring()把逻辑值转换为字符串，valueof()返回逻辑对象的值。,2019年4月7日,管理学院,13.4.4 javascript的number（数值）对象,在javascript中，数值是一种基本的数据类型。number对象数值类型数据的原始对象。建立number对象的语法格式如下： var num=new number(value); 其中，参数value是可以转换为数量的值。 也可以不用new操作符，直接声明一个变量并赋一个数值作为初始值。例如： var num=60; 这是建立一个数值对象最简单的方法，num会被转换成一个number对象。,2019年4月7日,管理学院,13.4.4 javascript的number（数值）对象,number 对象的属性 number对象有5个属性，不过它们均为number对象自身的静态属性，而不能用于某个数值类型的变量。这些属性见表13.3。,2019年4月7日,管理学院,2number 对象的方法,number 对象的方法 javascript的number对象提供了6个方法，用于处理数值类型的数据 表13.4 number对象的方法,下面的例子程序将把一个数字转换为字符串： 程序13.19：jso19.htm var number = new number(8202); document.write(number.tostring() ,2019年4月7日,管理学院,13.4.5 javascript的array（数组）对象,javascript中的数组对象用new语句建立。其格式如下： var arrayobj = new array(); /创建一个默认数组，长度是0 var arrayobj = new array(size); /创建一个size长度的数组 var arrayobj = new array(item1,item2,); /创建一个数组并赋初值 或者直接列出数组的元素： var arrayobj = “red”, “green”, “blue”; /最简单的数组定义方法 需要说明的是，虽然在创建数组时指定了长度，但实际上javascript的数组是变长的。也就是说即使指定了长度，仍然可以将元素存储在规定长度以外的index，这时长度会随之改变。所以size不是上限，而是数值的长度。,2019年4月7日,管理学院,13.4.5 javascript的array（数组）对象,array数组对象在建立后，可以通过下列的语句动态地给数值赋值，例如： var mycars=new array() mycars0=“bmw“ mycars1=“benz“ mycars2=“buick“ 也可以在定义时给数组赋初值。例如： var mycars=new array (“bmw“,“benz“,“buick“); 或者： var mycars=“bmw“，“benz“，“buick“; 这两种方式是等价的。,2019年4月7日,管理学院,13.4.5 javascript的array（数组）对象,数组对象的访问 javascript数组是通过数组名以及索引号码来访问数组中的元素，这里的访问包括获取、修改数组元素的值。需要注意的是，javascript数组元素的索引号是从0开始的。下面是一个数组访问的例子。 程序13.20：jso20.htm var mycars=“bmw“,“benz“,“buick“; document.write(mycars0 + “); mycars2=“boxster“ mycars3=“法拉利“ document.write(“修改后:“ + “); document.write(mycars0 + “); document.write(mycars1 + “); document.write(mycars2 + “); document.write(mycars3 + “); ,程序13.20首先获取数组mycars的第1个元素，然后修改了第3个元素，并添加了第4个元素mycars3=“法拉利“。,2019年4月7日,管理学院,13.4.5 javascript的array（数组）对象,可以通过使用for in 循环来访问数组中的所有元素，其代码如下。 程序13.21：jso21.htm var mycars=“bmw“,“benz“,“buick“,“boxster“,“法拉利“; for(i in mycars) document.write(mycarsi + “); ,此例子可以看出javascript的数组访问是非常简单的。,2019年4月7日,管理学院,13.4.5 javascript的array（数组）对象,数组对象的属性 javascript数组只有一个属性length，它表示数组的长度，即其中元素的个数。因为数组的索引总是由0开始，所以一个数组的上下限分别是0和length - 1。与其他大多数语言不同的是，javascript数组的length属性是可变的。 例如： var arr=12,24,5,6,25,98,82,50,56,76; /定义了一个包含10个数字的数组 alert(arr.length); /显示10 arr15=34; /增加第16个元素 alert(arr.length); /显示16,2019年4月7日,管理学院,13.4.5 javascript的array（数组）,对象数组对象的方法 数组对象提供了10多个内置的方法，用于对数组中的数据进行增加、插入、删除、排序和转换等操作。常用方法见表13.5。 程序13.22用join()方法将数组中的所有元素转换成字符串，并连接起来， join()默认是使用“,”作为分隔符，当然也可以在方法中指定分隔符。 程序13.22：jso22.htm var a = new array(“red“, “green“, “blue“) var s = a.join(“,“) document.write(s) document.write(“) var s = a.join(“.“) document.write(s) ,2019年4月7日,管理学院,13.4.5 javascript的array（数组）,concat()方法可以返回一个在原有数组上增添了元素的数组，元素中如果有数组，将被展开并继续添加，但不支持多维数组形式的展开添加。 程序13.23：jso23.htm var a = “red“,“green“,“blue“; var b = “apple“,“vegetables“,“sky“; var s = a.concat(b); document.write(a); document.write(“); document.write(b); document.write(“); document.write(s); ,程序13.23 将数组b的元素添加到数组a后面，组成一个新的数组s，原来的数组不变。,2019年4月7日,管理学院,13.4.5 javascript的array（数组）,sort()方法对数组中的元素进行排序操作，对于字符串值，sort()方法默认是按字母的顺序进行排序。 程序13.24：jso24.htm var a = “federer“,“safen“,“nadal“,“rodick“,“davydenko“,“novak“; document.write(a + “) document.write(a.sort() ,请读者自己实现一个用sort()方法对数字数组的排序，并找出有什么问题。,2019年4月7日,管理学院,13.4.6 javascript的math对象,javascript的math对象提供常用的算术计算方法，执行常见的算术计算功能。math 对象并不像 date 和 string 那样是对象的类，因此没有构造函数math()。math中的函数全部为静态函数，不是某个对象的方法，无需实例化。把math作为对象使用就可以直接调用其所有属性和方法。 math对象的属性 math对象提供了8个属性，它们是数学中经常用到的常数，见表13.6。,2019年4月7日,管理学院,13.4.6 javascript的math对象,程序13.25：jso25.htm document.write(“math.e = “);document.write(math.e + “); document.write(“math.pi = “);document.write(math.pi + “); document.write(“math.sqrt2 = “);document.write(math.sqrt2 + “); document.write(“math.sqrt1_2 =“);document.write(math.sqrt1_2+“); document.write(“math.ln2 = “);document.write(math.ln2 + “); document.write(“math.ln10 = “);document.write(math.ln10 + “); document.write(“math.log2e = “);document.write(math.log2e + “); document.write(“math.log10e = “);document.write(math.log10e + “); ,2019年4月7日,管理学院,13.4.6 javascript的math对象,math对象的方法 math对象的方法就是常规的数学函数，通过math.sin(x)的形式就可以直接调用。调用格式为： math.方法名(参数1,参数2,.); math的内置数学函数见表13.7 程序13.26是math函数应用的几个简单例子。 程序13.26：jso26.htm document.write(math.round(4.7) + “) document.write(math.random() + “) document.write(math.sin(160) + “) ,2019年4月7日,管理学院,13.4.7 javascript中的系统函数,javascript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数，使用这些函数不需创建任何实例,可直接用。表13.8列出了javascript的系统函数。例如：下面的代码可以返回一个表达式的值。 程序13.27：jso27.htm document.write(eval(“8+9+9/2“) + “) ,2019年4月7日,管理学院,13.5 javascript html dom 对象,使用javascript除了可以访问和操作javascript内置的对象外，还可以对html dom对象进行操作。 html dom 是一个w3c标准，它是html页面的文本对象模型(document object model for html)的缩写。 html dom把html文档呈现为带有元素、属性和文本的树结构(节点树)。在dom 模型中，html文档中的所有节点组成了一个文档树，html 文档中的每个元素、属性、文本等都代表着树中的一个节点。节点树起始于文档节点，并由此继续派生出子节点，直到处于这棵树最低层次的所有文本节点为止。,什么是html dom对象,2019年4月7日,管理学院,13.5 javascript html dom 对象,图13.1表示一个文档树。,2019年4月7日,管理学院,13.5 javascript html dom 对象,dom就是一个层次结构，其原理是用树形结构来描述页面中的元素及其相互关系。dom把层次结构中的每一个对象都称为节点(node)。 html整个文档的一个根节点就是，它就是整个节点树的根节点(root)。根节点以下最大子节点就是主文档区，标签内所有的html标签及文本都是文档的节点，分别称为元素节点（或者叫标签节点）、文本节点。 请看下面这个html文档： dom tree this is a dom element hello world! ,html页面上除文档节点之外的每个节点都有父节点。例如，和的父节点是节点，文本节点“hello world!”的父节点是节点。 大部分元素节点都有子节点。如