JavaScript简述.ppt

《JavaScript简述.ppt》由会员分享，可在线阅读，更多相关《JavaScript简述.ppt（103页珍藏版）》请在三一办公上搜索。

1、第3章 JavaScript,3.1 JavaScript简介3.2 JavaScript程序设计基础3.3 JavaScript程序结构3.4 JavaScript对象系统3.5 JavaScript事件和事件处理,第3章 JavaScript,主要内容,理解JavaScript语言的作用和执行方式掌握在网页中使用客户端脚本的方法掌握JavaScript语言的基本语法认识核心语言对象，使用核心语言对象的方法和属性掌握对页面中的不同种类的事件响应编程能够利用JavaScript语言完成对文档内容的交互了解客户端常见JavaScript特效程序的编程掌握JavaScript程序的一般调试技术,什

2、么是脚本,脚本（Script）实际上就是一段程序，用来完成某些特殊的功能。服务器端脚本：例如 ASP、JSP、PHP等客户端脚本：例如JavaScript、VBScript等。,客户端脚本的作用,客户端脚本经常用来检测浏览器、响应用户动作、验证表单数据以及显示各种自定义内容，如特殊动画、对话框等。,3.1 JavaScript简介,Javascript是由Netscape公司开发的一种解释性的，基于对象的脚本语言(an interpreted,object-based scripting language)。JavaScript语言的主要应用就是开发客户端的Web应用程序，将客户端的JavaS

3、cript脚本嵌入或链接到HTML文件中。当用户在客户端的浏览器中读取HTML文件时，就会以Web页面方式进行显示。,3.1 JavaScript简介,1.解释性2.基于对象 3.事件驱动 4.简单性 5.安全性 6.跨平台性,3.1.1 JavaScript语言特点,3.1 JavaScript简介,1.软件环境：Netscape Navigator浏览器或Internet Explorer浏览器。用于编辑HTML文档的字符编辑器(word、WPS、Notepad、WordPad等)或HTML文档编辑器。2.硬件配置：内存 32M。CPU 233mhz以上。显示器 256色，分辨率在640X

4、480以上。鼠标和其它外部设置（根据需要选用）。,3.1.2 JavaScript程序的运行环境,3.1 JavaScript简介,3.1.3 第一个JavaScript程序,这是我的第一个JavaScript程序 document.write(欢迎进入JavaScript学习之旅!);执行结果,3.2 JavaScript程序设计基础,JavaScript脚本语言的基本语法与C、C+和Java都非常的相似。所以对于已经具备了或+语言编程基础的人来说，学习JavaScript脚本语言是一件非常轻松愉快的事。同时由于JavaScript脚本语言的采取了简单语法的形式组织，如变量是弱变量，没有指针

5、，无需定义类等，使得即便是没有任何计算机语言基础的的初学者也可以很快的掌握。本节主要讨论JavaScript脚本语言的变量、运算符和表达式。,3.2 JavaScript程序设计基础,3.2.1 JavaScript脚本代码的声明,JavaScript脚本语言通过标签.告知浏览器其中包含的的内容为客户端程序代码，属性Language指名该客户段代码使用的何种语言，“JavaScript”表示这里使用的是JavaScript语言。,3.2.2 JavaScript放置和运行在HTML页面中使用JavaScript的方法有两种：一种是直接加入到HTML文件中另外一种是引用方式,3.2 JavaSc

6、ript程序设计基础,代码的位置位于HEAD部分的脚本如果把脚本放置到head部分，在页面载入的时候，就同时载入了代码。通常这个区域的JavaScript代码是为body区域程序代码所调用的事件处理函数。位于 BODY部分的脚本 当你把脚本放置于 body 部分后，在页面载入时不属于某个函数的脚本就会被执行，执行后的输出就成为页面的内容。,JavaScript直接加入到HTML文件中,JavaScript直接加入到HTML文件中,位于Head部分的代码实例,我的第一个JavaScript程序!,直接位于事件处理部分的代码中,这是我的第一个JavaScript程序 执行结果,JavaScript

7、直接加入到HTML文件中,引用方式,如果已经存在一个Javascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：其中的Url就是程序文件的地址。,引用方式,实现上述“直接插入方式”中所举例子的效果，步骤如下：1）创建一个Javascript源代码文件“as.js”，其内容如下：document.writeln(这是Javascript！采用引用的方法！);2）在网页中中添加代码：。,引用的例子,3.2.3 标识符和变量,1关于命名的规定 1）标识符关于标识符的规定：必须使用字母或者下划线开始；必须使用英文字母、数字、下划线组成，但不能有空格、

8、“”、“”、“，”或其它符号；不能使用JavaScript关键词与JavaScript保留字；不能使用JavaScript语言内部的单词，比如Infinity,NaN,undefined；大小写敏感，也就是说x和X是不一样的两个标识符。,1关于命名的规定(续),2）关键字 关键字对于JavaScript程序有着特别的含义，它们可标识程序的结构和功能，所以，在编写代码时，不能用它们作为自定义的变量名或者函数名。表3-1列出了JavaScript的关键字。,3）保留字除了关键字，JavaScript还有一些可能未来扩展时使用的保留字，同样不能用于标识符的定义。,1关于命名的规定(续),2 Java

9、Script的数据类型,JavaScript不是一种强类型的语言JavaScript 有六种数据类型。主要的类型有 number、String、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。,1.String 字符串类型字符串是用单引号或双引号来说明的（可以使用单引号来输入包含双引号的字符串），如“刘华”、刘华或者“刘华。字符串中每个字符都有特定的位置，首字符从位置 0 开始，第二个字符在位置 1，依此类推。这意味着字符串中的最后一个字符的位置一定是字符串的长度减 1。,2 JavaScript的数据类型（续）,2.数值数据类型JavaScript

10、 支持整数和浮点数。整数可以为正数、0 或者负数；浮点数可以包含小数点、也可以包含一个“e”（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项，下面是一些关于数的表示。正数：1、30、10.3；负数、-1、-30、-10.3有理数：0，正数，负数统称为有理数指数：2e3 表示2*103，5.1e4表示5.1*104八进制数：八进制数是以0开头的数，如070代表10进制的56十六进制数：16进制数是以0 x开头的数，如0 x1f代表10进制的31Infinity表示无穷大，这是一个特殊的Number 类型NaN，表示非数（Not a Number），这是一个特殊的Number 类

11、型,2 JavaScript的数据类型（续）,3.Boolean 类型Boolean 值有 true 和 false。这是两个特殊值，不能用作 1 和 0。4.undefined 数据类型一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值之以前所具有的值。5.null 数据类型null 值就是没有任何值，什么也不表示。6.object类型除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成部分，这部分将在后面介绍。,2 JavaScript的数据类型（续）,声明变量 JavaScript规定通过关键字“var”后面加上变量的名称来声明一个变量。基本语法：v

12、ar 变量名=初值,变量名=初值 语法说明：变量的起名应该符合标识符的规定；可以同时声明多个变量；可以在声明变量时，为变量赋予初值。,3 变量,以下变量命名合法。abc,china,a1,str_1,abc_h。,以下变量命名不合法。123,12.3,a.a,_abc。,声明一个变量var test;定义一个数值类型的变量areavar area=0;定义一个字符串类型的变量namevar name=“刘华;定义一个逻辑类型的变量statusvar status=true;将一个表达式的计算结果赋值给变量areaarea=a*b用一个 var 语句定义两个或多个变量，它们的类型不必一定相同va

13、r area=0,name=张华;变量声明示例,3 变量（续）,2.向变量赋值具体在为变量赋值时，需要注意：变量名在赋值运算符“=”符号的左边，而需要向变量赋的值在“=”的右侧；一个变量在声明后，可以多次被赋值或使用；向未声明的变量赋值如果在赋值时所赋值的变量还未进行过声明，该变量会自动声明。例如：area=0;name=张华;等价于：var area=0;var name=张华;,3 变量（续）,这种事先没有声明而直接使用的情况，并不是一个优秀程序员的习惯。作为一种良好的编码规则，任何变量都应当“先声明，后使用”。,4 转义字符,转义字符对在字符串中无法直接表示的一类字符而使用的特殊符号，例

14、如：r表示回车，n表示换行，t表示光标移到下一个输出位。var s=Hello,Mike;则变量s的值是：Hello,Mike。,JavaScript运算符包括：算术运算符、赋值运算符、自增、自减运算符、逗号运算符、关系运算符、逻辑运算符、条件运算符、位运算符，也可以根据运算符需要操作数的个数，可以把运算符分为一元运算符、二元运算符或者三元运算符。表达式:由操作数（变量、常量、函数调用等）和运算符结合在一起构成的式子。对应的表达式包括：算术表达式、赋值表达式、自增、自减表达式、逗号表达式、关系表达式、逻辑表达式、条件表达式、位表达式。,3.2 JavaScript程序设计基础（续）,3.2.4

15、 运算符和表达式,1算术数运算符和表达式,基本语法：双目运算符：操作数1 operator 操作数2单目运算符：操作数 operator operator 操作数算术运算示例例3.4,2 关系运算符和表达式,关系运算符和表达式关系运算符负责判断两个值是否符合给定的条件，包括的运算符见书P58表3-3。用关系运算符和运算对象(操作数)连接起来，符合规则的式子，称”关系表达式”关系表达式返回的结果为“true”或“false”，分别代表符合给定的条件或者不符合。关系表达式一般用于分支和循环控制语句中，根据逻辑值的真假来决定程序的执行流向。基本语法：操作数1 operator 操作数2,语法说明,1

16、.不同类型间的比较当两个操作数的类型不同进行比较时，遵循以下规则：无论何时比较一个数字和一个字符串，都会把字符串转换成数字，然后按照数字顺序比较它们，如果字符串不能转换成数字，则比较结果为false；如果一个操作数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1；如果一个操作数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串；如果一个操作数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。,2.=与=的区别“=”是赋值运算符，用来把一个值赋予一个变量，比如 var i=5;“=”是相等运算符，用来判断两个操作数

17、是否相等，并且会返回true或false，比如 a=b。3.=与!=“=”代表恒等于，即判断数值，又判断类型，如：var a=5,b=5;var result1=(a=b);/结果是truevar result2=(a=b);/结果是false这里，a是数值类型，b是字符串类型，虽然数值相等但是类型不等，同样的“!=”代表恒不等于，也是要判断数值与类型。,语法说明（续）,4.相等性判断的特殊情况,语法说明（续）,例3-5 关系运算符的应用,3 逻辑运算符和表达式,基本语法：双目运算符：boolean_expression operator boolean_expression逻辑非运算符：!b

18、oolean_expression,语法说明：逻辑或(|)和逻辑与(&)是双目运算符，要求两端的操作数类型均为逻辑值，逻辑非!则是一个单目运算符，它们的运算结果还是逻辑值，其使用的场合和关系表达式类似，一般都用于控制程序的流向，如分支条件、循环条件等等。,例3-6 逻辑运算符的应用,4 条件运算符和表达式,条件运算符是一个3目运算符，也就是该运算涉及到了3个操作数。基本语法：variable=boolean_expression?true_value:false_value;语法说明：该条件表达式表示，如果boolean_expression的结果为true，则variable的值取true_

19、value，否则取false_value。,条件运算符应用示例,5 位运算符和表达式,位运算是在数的二进制位的基础上进行的操作，具体的位运算符见书P59表3-5所示。,例3-7 位运算符的应用,6 赋值运算符和表达式,简单的赋值运算符由等号（=）实现，只是把等号右边的值赋予等号左边的变量。基本语法：简单赋值运算：=operator 复合赋值运算：operator=各种赋值运算符见书P61表3-6,例3-8 赋值运算符的应用,7 特殊运算符,见书P63表3-7,3.3 JavaScript程序结构,结构化程序设计的最基本的原则程序本身只能有一个入口和一个出口；程序只能由顺序结构、判断结构和循环结

20、构三种基本流程结构构成。,3.3 JavaScript程序结构,三种结构的流程图,3.3 JavaScript程序结构,3.3.1 JavaScript判断语句,双分支if语句if（判断表达式）/分支1语句段1else/分支2语句段2,例3-9 ifelse语句的使用1,例3-10 ifelse语句的使用2,3.3 JavaScript程序结构,3.3.1 JavaScript判断语句（续）,2.多分支if.else if.语句,if(判断表达式1)语句段1;else if(判断表达式2)语句段2;else 语句段n;,例3-11 ifelse语句的使用3,3.3 JavaScript程序结构

21、,3.3.1 JavaScript判断语句（续）,3.多分支switch语句,switch(表达式)case 判断值1:语句段1;break case 判断值2:语句段2;break.case 判断值n:语句段n;break default:语句段n+1;,具体在使用switch语句时，还需要注意：顺序执行case后面的每个语句，最后执行default下面的语句；每个case后面的语句可以是一条，也可以是多条，但要使用包括起来；每个case后面的判断值必须互不相同；关键字 break 会使代码结束于一个case，之后跳出 switch 语句。如果没有关键字 break，代码执行就会继续进入下一

22、个 case，并且不会再对照判断，依次执行后续所有case的语句，直到switch语句结束，或者碰到一个break；default语句表示其他情况都不匹配后，默认执行的语句。一般在使用switch语句时，case后面总跟一个常量，但有时可以是一个有值的变量.,3.多分支switch语句（续）,例3-12 switch语句的使用,3.3 JavaScript程序结构,3.3.2 JavaScript循环语句,1.for语句,for(初始化表达式1;判断表达式2;循环表达式3)循环体,例3-13 for语句的使用,3.3 JavaScript程序结构,3.3.2 JavaScript循环语句(续)

23、,2.while 语句,while(判断表达式)循环体,例3-14 while语句的使用,3.3 JavaScript程序结构,3.3.2 JavaScript循环语句(续),3.do.while 语句,do循环体while(判断表达式);,例3-15 dowhile语句的使用,break和continue的作用前面介绍了三种类型的循环，每次循环都是从头执行到尾，然而情况并不都是如此，有时在循环中，可能碰到一些需要提前中止循环的情况，或者放弃某次循环的情况。break语句break语句的作用就是立即结束循环，转到循环后的语句继续执行。continue语句continue语句的作用则是本次循环结

24、束了，后面的语句本次不再执行，开始下一次的循环，如果还有的话。,3.3.2 JavaScript循环语句(续),循环嵌套应用,1.函数的定义函数一般定义在HTML文档的部分，位于标记内部，函数可以出现在任何位置。此外，函数也可以在单独的脚本文件中定义，并保存在外部文件中，在使用的位置根据函数名和所在的外部文件名引用。,3.3 JavaScript程序结构,3.3.3 JavaScript函数,2.基本语法：function 函数名(参数1,参数2,.参数N)函数体；语法说明：组成一个函数必须有“function”关键字、自定义的函数名、放在小括号中的可选参数（可以没有参数，但括号必须保留）、以

25、及包含在大括号内的由若干条语句构成的函数体。注意：每个函数声明都是独立的,不能在其他语句或其自身中嵌套function语句，也就是说，。,3.3 JavaScript程序结构(续),3.3.3 JavaScript函数,3.Javascript函数参数的特点：javascript本身是弱类型，所以，它的函数参数也没有类型检查和类型限定，一切都要靠编程者自己去进行检查；一般情况下，实参和形参要一一对应；实参的个数可以和形参的个数不匹配。尽管在函数声明时，可以定义要有个参数，而在实际的使用中，可以传任意个参数给这个函数。它的识别仅仅是依靠函数名，这与其他语言中的函数调用有很大的不同。如果函数在执行

26、时，发现参数不够，不够的参数被设置为undefined类型。,3.3.3 JavaScript函数(续),4.调用函数 函数必须被调用才能发挥作用，具体调用规则是：函数必须通过名字加上括号调用，括号必不可少；函数调用时，必须满足参数传递的要求，按照形式参数的声明要求，保证类型、顺序和个数的统一。调用函数的语法格式如下：函数名（实际参数1，实际参数2,实际参数n）,3.3.3 JavaScript函数(续),5.用return返回函数的计算结果 return的作用：结束程序的执行；利用return 可以返回一个结果。return 语句后可以跟一个具体的值，也可以是简单的变量，还可以是一个复杂的表

27、达式。当然，一个函数也可以没有返回值，但并不妨碍最后添加一条return语句，明确表示函数执行结束，,3.3.3 JavaScript函数(续),自定义函数的应用,例3.16 求10!,消息对话框,1.alert()Alert(文本);实现了一个简单的信息告知的功能 例2.confirm()confirm(文本);确认框是一个带有显示信息和“ok/确认”及“cancel/取消”两个按钮对话框，用户可以验证或者接受某些信息。如果用户单击确认，那么返回值为 true。如果用户单击取消，那么返回值为 false。例 3.Prompt()prompt(文本,默认值);提示框用于提示用户在进入页面前输入

28、某个值。如果用户单击确认，那么返回值为输入的值。如果用户单击取消，那么返回值为 null。例,3.4 JavaScript对象系统,对象对象是我们认识世界的基本单元，它可以是人，物，一件事。对象的主要特性：每一个对象必须有一个标记名称以便区别于其它对象。用状态（或属性）可以描述对象具有的特征。对象含有一组操作，每个操作都决定对象的一种行为。对象操作与对象属性是不可分离的。,JavaScript语言中对象的概念所谓对象就是若干变量的一个集合体，这些变量被称为属性。支持对象的可重用性，实现“一次开发多次使用”。在对象和属性的基础上，对象还有自己的函数，计算函数被称为方法。对象的分类内置对象浏览器对

29、象,JavaScript语言中的对象,3.4 JavaScript对象系统,3.4.1 JavaScript的对象运算符和对象操作语句1.对象运算符（1）成员选择运算符“.”作用：访问一个对象的属性和方法基本语法：对象名称.属性名对象名称.方法名(参数列表)例：var s=“Welcome to you!”;这条语句创建了一个字符串对象，通过变量名s来引用它。要想知道它的字符个数，可以这样：var len=s.length;如果希望获得一个字符串某个位置的字符，可以这样：var ch=s.charAt(3);,1.对象运算符（续）（2）新建对象运算符“new”作用：创建一个新对象基本语法：va

30、r 变量名=new 对象名称()例：var Array1=new Array()；（3）删除对象运算符“delete”作用：删除一个对象的实例或数组的元素基本语法：delete 对象实例；delete 数组元素例：delete s；delete Array14；例3.17 对象运算符的使用,2.对象操作语句（1）with语句作用：用于一次引用一个对象的多个属性或方法基本语法：With(对象名).例3.18 with语句的使用,2.对象操作语句（续）（2）for in语句作用：用于顺序遍历某个对象的所以属性或数组的所有元素基本语法：for(变量 in 对象名)循环体；例3.19 for in 语

31、句的使用,3.4 JavaScript对象系统（续）,3.4.2 JavaScript的内置对象,3.4 JavaScript对象系统（续）,3.4.2 JavaScript的内置对象1.Array 数组对象数组对象用来在单独的变量名中存储一系列的值。数组一般用在需要对一批同类的数据逐个进行处理中。（1）数组对象的声明var 变量=new Array()var 变量=new Array(整数常量)var 变量=new Array(参数1,参数2,参数n),例：数组的定义与元素初始化1)定义数组var course=new Array()var course=new Array(4)var co

32、urse=new Array(Java程序设计,HTML开发基础,数据库原理,计算机网络);2)先定义数组，后初始化数组元素var course=new Array();course0=Java程序设计;course1=HTML开发基础;course2=数据库原理;course3=计算机网络;注意：（1）数组元素的数据类型可以是任意的Java Script数据类型；（2）同一数组中可定义不同类型的数据。例：var Student=new Array(“刘华”,“男”,19,true),（2）访问/修改数组元素访问数组的元素可以通过下标(也就是元素在数组中存放的顺序)来访问。数组的下标总是从0开

33、始，访问第一个元素的代码可以这样写：var cn=course0;同样，访问第3个元素的代码是：var cn=course2;最大的数组元素下标是“数组长度数-1”，通常用下面的方式获得：var last_position=course.length-1;下标可以用变量替代，例如：var i=3;var cn=coursei;如果指定的下标超出了数组的边界，则返回值为“undefined”。可以用再赋值的方式来修改数组对应位置的元素，如：course2=“数据库原理与应用”;例：数组的应用,（3）二维数组的定义与使用var 变量=new Array();变量名0=new Array();变量名

34、1=new Array();变量名2=new Array();变量名n=new Array();例：二维数组的定义例3.20 二维数组的实现,3.4 JavaScript对象系统（续）,3.4.2 JavaScript的内置对象（续）2.Date对象Date对象用来处理和日期时间相关的事情（1）对象声明new Date()new Date(year,month day,hours:minutes:seconds)new Date(时间字符串)new Date(数值型整数),例：var Date1new Date()var Date2new Date(2012,8,8,10,10)var Dat

35、e3new Date(“2012,9,8,10,10”)var Date4new Date(100000),(2)常用方法根据定义对象的方法，可以看出日期对象包括年月日时分秒等各种信息，Date对象提供了获得这些内容的方法。例如：getDate()：从 Date 对象返回一个月中的某一天(1 31)getDay()：从 Date 对象返回一周中的某一天(0 6)getMonth()：从 Date 对象返回月份(0 11)getFullYear()：从 Date 对象以四位数字返回年份getHours()：返回 Date 对象的小时(0 23)getMinutes()：返回 Date 对象的分钟

36、(0 59)getSeconds()：返回 Date 对象的秒数(0 59)getMilliseconds()：返回 Date 对象的毫秒(0 999)例3.21 日期对象方法的使用,Date 对象的应用,1.两个日期对象的比较var today=new Date();var oneDay=new Date(2012,10,1);if(todayoneDay)document.write(today is after 2012-10-1);else document.write(today is before 2012-10-1);2.调整日期对象的日期和时间var today=new Dat

37、e();today.setDate(today.getDate()+5);/将日期调整到5天以后，如果碰到跨年月，自动调整today.setFullYear(2013);/调整today对象到2013年，月和日期参数可以省略例 Date对象的应用1；应用2；应用3；应用4,3.4 JavaScript对象系统（续）,3.4.2 JavaScript的内置对象（续）3.Math对象Math 对象提供多种算数常量和函数，执行普通的计算任务。（1）Math对象的属性，见书P83 表3-11例3.22 Math对象属性（2）Math对象的方法，见书P84 表3-12例 Math对象方法应用,3.4 J

38、avaScript对象系统（续）,3.4.2 JavaScript的内置对象（续）4.String对象（1）字符串对象定义方法var s1=Welcome to you!;var s2=new String(Welcome to you!);（2）length属性作用：获取字符串长度例：var s=“Welcome to you!”;s.length15;,（3）String对象方法字符串处理方法说明toLowerCase()将字符串中的大写字母全部转换成 小写字母toUpperCase()将字符串中的小写字母全部转换成大写字母charAt()返回指定位置的一个字符indexOf()返回某个指

39、定的字符串值在字符串中首次出现的 位置如果没有发现，返回-1。lastIndexOf()返回一个指定的字符串值最后出现的位置，如果 没有发现，返回-1。例：显示字符串处理方法的调用,（4）处理字符串在Web网页中的显示效果方法名功能big()使字符串显示较大的字体small()使字符串显示较小的字体bold()使字符串以黑体显示fixed()使字符串以等宽度字体显示fontcolor()指定字符串的显示颜色fontsize()指定字符串的字体大小italics()使字符串斜体显示strike()同时显示删除线Sub()使字符串以下标形式显示Sup()使字符串以上标形式显示,例：利用字符串方法控

40、制字符的显示效果,上机练习,1.编写一个JavaScript程序，显示如下计算结果：var x=26%5;var result1=5+5;var result2=5+5;var result3=5+5+5;var a=10;var b=+a;var a=10;var b=a-;,上机练习（续）,2.自定义二维数组，显示如下信息：,上机练习（续）,3.编写一个JavaScript程序，显示如下图所示的内容。,课堂练习,4.编写JavaScript程序，输出100个数值范围在0至1000之间的随机数。5.编写一个JavaScript程序，实现如下图所示的数字时钟。,3.4 JavaScript对象

41、系统（续）,3.4.3 JavaScript浏览器对象 浏览器对象也称为文档对象模型（Document Object Model，简称DOM），它是由浏览器创建并可以被JavaScript等计算机程序调用的一组对象。,3.4.3 JavaScript浏览器对象（续）,1.浏览器对象简介浏览器对象是一种“树状层次”结构，对象之间是“父子”、“兄弟”的关系，窗口（window）对象位于最顶层，代表浏览器窗口。window对象的一级子对象：document（文档对象）：代表当前网页的各种特性，如所用语言、标题、背景等location（地址对象）：代表当前网页的统一资源定位符URL地址frame（框架

42、对象）：提供有关“框架”的管理方法，history（历史对象）：代表过去已经访问过网页的统一资源定位符URL地址navigator（浏览器对象）：管理所用浏览器的版本号、浏览器所用语言、OS平台等,1.浏览器对象简介（续）,document对象的子对象：form（表单对象）anchor（锚链接对象）image（图像对象）link（链接对象）applet（Java小程序对象）scripts（脚本对象）plugin（插件对象）layer（层对象）selection（选择对象）area（区域）,3.4.3 JavaScript浏览器对象（续）,2.Window对象window对象代表一个浏览器窗口或

43、一个框架页面。,（1）window对象的属性表示窗口对象本身或其他窗口对象属性 说明open 表示打开当前窗口closed 代表浏览器窗口目前是否关闭的逻辑值parent 包含当前浏览器窗口的父窗口self表示引用当前文档对应的浏览器窗口top定义当前浏览器上层的浏览器窗口locationbar表示浏览器的地址栏toolbar表示浏览器中的工具栏menubar表示浏览器中的菜单栏scrollbar表示浏览器中的滚动条Statusbar 表示浏览器中的状态栏personalbar表示浏览器中的目录栏,2.Window对象（续）,（1）window对象的属性（续）表示窗口对象的状态或信息属性 说明

44、name 设置窗口名称status 设置或获取窗口状态栏中的信息Defaultstatus 设置或获取窗口状态栏中的缺省信息location 提供当前浏览器窗口的URL信息history 提供当前浏览器窗口的历史记录length 设置或获取当前窗口中的框架个数,2.Window对象（续）,（2）window对象的方法方法说明open()格式open(，)close()关闭当前浏览器窗口back()指定浏览器加载历史记录中的上一个URL地址forward()指定浏览器加载历史记录中的下一个URL地址home()指定浏览器加载预先设定的主页（home page）页面stop()指定浏览器停止加载网

45、页print()指定浏览器打印当前的网页,2.Window对象（续）,（2）window对象的方法（续）方法说明prompt()格式：prompt(，)弹出一个提示框alert()格式：alert()方法。该方法弹出一个信息框confirm()格式：confirm()。弹出一个确认框setTimeout()格式：setTimeout(，)，经过指定毫秒后计算一个表达式clearTimeout()格式 clearTimeout()，取消前面的定时设置。setInterval()格式：=setInterval(，args)，为系统设置时间间隔，每经过指定毫秒后执行一次表达式或函数clearInte

46、rval()取消setInterval()的定时设置,2.Window对象（续）,（2）window对象的方法（续）方法说明moveBy()该方法将窗口移动指定的位移量moveTo()格式：moveTo(，)，将窗口移动到指定坐标位置resizeBy()按指定的位移量重设浏览器窗口的大小resizeTo()将浏览器窗口设定为指定的大小scrollBy()按指定的位移量滚动浏览器窗口scrollTo()将浏览器窗口滚动到指定的位置,例题,1.open方法的使用例3.25打开指定窗口2.setInterval()与clearInterval()的使用例3.263.动态显示状态栏信息,3.4.3 J

47、avaScript浏览器对象（续）,3.Document对象Document 对象表示加载到浏览器内部的HTML文档。Document 对象代表了整个 HTML 文档，可用来访问页面中的所有元素。对一个html页面中的各个元素进行控制是JavaScript程序最精彩的地方，就是由Document 对象来控制和实现的。,格式：1：window.document 或 document2：窗口对象名.document,Document 对象的常用属性与方法见书P92 表3-16、表3-17,例题,1.Document对象常用属性的使用例3.272.动态显示网页文档的标题信息,3.Document对象

48、（续）,通过ID访问页面元素 语法：document.getElementById(id)参数：id 必选项，为字符串(String)返回值：对象。返回相同id对象中的第一个,如果无符合条件的对象，则返回 null 例如：var userName=document.getElementById(userName);使用该方法需要注意：在页面开发时，最好给每一个需要交互的元素设定一个唯一的id便于查找；getElementById()返回的是一个页面元素的引用，在页面中出现的所有元素都可以通过它来获得；如果页面上出现的不同元素使用了相同的id，则该方法返回的是第一个找到的页面元素。例：getEl

49、ementById()的应用,3.Document对象（续）,document对象中的数组anchors 网页中全部锚标记,每个锚记为数组中的一个元素links 网页中全部超链接,每个超链接为数组中的一个元素images 网页中的全部图像,每个图像为数组中的一个元素forms 网页中全部窗体信息,每个窗体为数组中的一个元素,document对象中的数组（续）anchors anchors 格式：window.document.anchorsn 窗口对象名.document.anchorsn说明：anchors数组由文档中所有的锚标记（）定义的锚对象组成，该集合按照锚记在文档中出现的顺序，依次对

50、应每一个元素。例：anchors 的应用1，anchors 的应用2links 格式：window.document.linksn 窗口对象名.document.linksn说明：links数组由用 标记的超文本或超媒体的元素的URL组成，即网页中的全部超链接,数组中的一个元素对应一个超链接,document对象中的数组（续）images 格式：window.document.imagesn 窗口对象名.document.imagesn说明：images数组由文档中所有标记定义图像对象组成。例：links 与images的应用 动态创建图像,document对象中的数组（续）Forms表单对象