第3章 JavaScript.ppt

1、第三章,JavaScript语法,课程目标,熟悉JavaScript的数据类型： 数值型、字符型、逻辑型、空值 掌握JavaScript的表达式与运算符 掌握JavaScript控制语句、内部对象 掌握JavaScript自定义对象,体验项目,想知道如何在浏览器中显示早上（中午、晚上）好，同时显示系统的当前日期和星期数吗？打开记事本或者其他文本编辑器，输入相关代码，将其保存为后缀是“.html”的文件，通过浏览器打开该文件，就可以在浏览器窗口中看到如图所示的显示效果:,知识结构,1.1 数据类型,1.2 表达式与运算符,1.3 控制语句,1.4 内部对象,1.5 自定义对象,数据类型,Java

2、Script是一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。JavaScript提供的脚本语言编程与C+非常相似，它只是去掉了C语言中有关指针等容易产生错误的内容，并提供了功能强大的类库。,JavaScript的格式,JavaScript对书写格式有如下要求： JavaScript语言区分大小写。 JavaScript脚本程序须嵌入到Html文件中。 JavaScript脚本程序中不能包含Html标记代码。 使用JavaScript编写程序时，一行只能写一条语句。 JavaScript语句末尾可以加分号，此时多条语句可以写在一行，语句中间以分号隔开。 JavaScript脚

3、本程序可以独立保存为一个外部文件，其中不包含标签。,JavaScript脚本程序的几种基本格式：,我们以在浏览器中显示“Hello World!”为例，说明JavaScript脚本程序的几种基本格式： （1） document.write(Hello World!); （2） document.write(Hello World!); （3） document.write(Hello World!); ,（4） document.write(Hello World!); （5） 语句document.write(“Hello World!”) 保存在一个外部文件“hello.js”中 （6）

4、（7）使用JavaScript协议： 请单击 或： 请单击 或： 请单击,下面是将JavaScript脚本加入Web文档中的例子：, document.write(这是清华培训基地); ,基本数据类型,JavaScript的四种基本数据类型如下：,数值：整数型、浮点数型 逻辑值：布尔型（True或False） 字符串型 空值,JavaScript采用弱类型的形式，因而一个数据变量或常量不必先做声明，而是在使用或赋值时确定其数据类型。,常量,整型常量 其整型常量可以使用十六进制、八进制和十进制的形式表示其值，例如：3721、0007、0 xaff、（0Xaff）等 实型常量 实型常量是由整数部分

5、和小数部分组成，如12.32、193.98。可以使用科学计数法或标准方法表示：5E7、4e5、12.68等 布尔值 布尔常量只有两种状态，True或False。它主要用来表示或说明一种状态，用于控制操作流程 字符型常量 是使用单引号（）或双引号（“”）括起来的一个或多个字符。如“This is a book of JavaScript”、“3245”、“ewrt234234”等,字符型常量中也可以包含转义字符,转义字符表,变量,变量的主要作用是存取数据、提供存放信息的容器。 对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。 变量命名规则： 首字符必须是大写或小写的字母或下划

6、线（_）或美元符（$）。 后续的字符可以是字母、数字、下划线或美元符。 变量名称不能是保留字。 长度可以是任意。 区分大小写。 约定：集中置顶。 使用局部变量。 易于理解：studentId 避免混乱：usrname、usrName,表达式与运算符,表达式 在定义完变量后，就可以对它们进行赋值、改变、运算等一系列操作了，这一过程通常由表达式来完成。可以说它是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表达式、字串表达式、赋值表达式以及布尔表达式等。 运算符 运算符是完成操作的一系列符号，在JavaScript中的算术运算符有：“+”、“-”、“*”、“/”等；比较运算符有：“!=”、

7、“= =”等；布尔逻辑运算符，如：“！”（逻辑非）、“|”（位或）、“|”（逻辑或）；字串运算符，如：“+”、“+=”等。,双目运算符,单目运算符,操作数1 运算符 操作数2,运算符 操作数,操作数 运算符,算术运算符,JavaScript中的算术运算符有单目运算符和双目运算符。 双目运算符： +（加）、-（减）、*（乘）、/（除）、%（取模）、|（按位或）、i0;i-) document.write(i=,i,); ,while循环,while循环语句的基本格式： while（条件） 语句集； ,while循环语句与for循环语句一样，当条件为真时，重复循环，否则退出循环。, var i=5

8、; while(i0) document.write(i=,i,); i-; ,do.while语句,dowhile语句的基本格式： do 语句集； while（表达式）, var i=5; do document.write(i=,i,); i-; while(i0) ,break和continue语句,与C+语言相同，使用break语句使得循环从for或while循环中跳出，continue语句使得程序跳过循环内剩余的语句而进入下一次循环。 下面的例子使用break语句跳出循环，实现在while循环中只显示i=5、i=4，当i=3时跳出循环。, var i = 5; while(i0) i

9、f(i=3) break; document.write(i=,i,); i-; ,下面的例子将用continue语句，实现在while循环中显示i=4、i=2、i=1、i=0，当i=3时不输出，直接进入下次的循环。, var i =5; while(i0) i-; if(i=3) continue; document.write(i=,i,); ,内部对象,JavaScript是基于对象的（Object-Based），而不是面向对象的（Object-Oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂

10、对象统一起来，从而形成一个非常强大的对象系统。 虽然JavaScript语言是一门基于对象的语言，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，编写功能强大的Web文档。,对象的基础知识,对象的基本结构 JavaScript中的对象是由属性（properties）和方法（methods）两个基本元素构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。 引用对象的途径 一个对象要真正地被使用，可采用以下几种方式获得： 引用JavaScr

11、ipt内部对象 由浏览器环境中提供 创建新对象 一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。,有关对象的操作语句,for.in语句,with语句,this关键字,new运算符,对象属性的引用,对象属性的引用可由下列三种方式之一实现：,使用点（.）运算符,通过对象的下标实现引用,通过字符串的形式实现,对象的方法的引用,在JavaScript中对象方法的引用是非常简单的，比如： ObjectName.methods() 假如引用university对象中的showmy()方法，则可使用： document.write(university.showmy() 若引用M

12、ath内部对象中的cos()方法，则可以用： with(Math) document.write(cos(35); document.write(cos(80); 若不使用with则引用时相对要复杂些： document.write(Math.cos(35) document.write(Math.cos(80),自定义对象,使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大，但JavaScript还是提供了创建一个新对象的方法。使其不必像超文本标识语言那样，求助于其它多媒体工具，就能完成许多复杂的工作。,对象的定义,JavaScript对象的

13、定义，其基本格式如下： function Object（属性表） p1=prop1 p2=prop2 . this.meth=functionName1; this.meth=functionName2; .,以下是一个关于university对象的定义： function university(name,city,Url) =name; this.city=city; this.Url=Url; ,创建对象实例,一旦对象定义完成后，就可以为该对象创建一个实例了： NewObject=new Object(); 其中NewObject是新的对象

14、，Object是已经定义好的对象。用上面的university对象创建实例： var U1=new university(陕西省,西安市, ); var U2=new university(西安电子科技大学,西安,);,对象方法的使用,在对象中除了使用属性外，有时还需要使用方法。对象的方法就是一个函数FunctionName，通过它实现自己的意图。 function university(name,city,Url) =name; this.city=city; this.Url=Url; this.showuniversity=showuniversity; functio

15、n showuniversity() var str =+ +this.city+ +this.Url; document.write(+str); var U1=new university(陕西省,西安市, ); var U2=new university(清华IT,北京,http:/ ); U1.showuniversity(); U2.showuniversity(); ,利用对象原型（prototype）为默认对象定义属性,对象原型（prototype）的好处是可以接收变量传来的值，例如下例中将实现一个字符串的替换，其中的对象原型用于接收一个函数的返回值。 Stri

16、totype.replaceAll=strReplace; function strReplace(findText,replaceText) var str=new String(this); while(str.indexOf(findText)!=-1) str=str.replace(findText,replaceText); return str; myStr=告诉你如果你正在做WEB开发,那么+JavaScript+会让你事半功倍,功力大增.; document.write(原稿是：+myStr+); document.write(利用replace()将你改成您：+

17、 +myStr.replace(你,您)+); document.write(利用自定义的字符串方法-全部取代 +myStr.replaceAll(你,您)+); ,实践项目,首先输入JavaScript标记，然后用new Date()生成一个日期对象。由于需要显示早上（中午、晚上）好，所以可以使用该对象的getHours()方法得到系统当前时间，然后用ifelse语句进行判断，如果时间属于早上，就输出“早上好”，由于需要多次判断，所以使用if的嵌套语句 。 now = new Date() hour=now.getHours() if(hour,由于需要输出当前系统的日期和星期数，所以还需要

18、使用new Date()得到一个日期对象today，然后用today.getYear()输出“年”，用today.getMonth()输出“月”，用today.getDate()输出“日”，为了输出星期数，需要一个数组initArray保存有关星期的字符串，然后再用一个循环将这些星期数分开成每个不同星期数的字符串，最后调用输出函数将年月日及星期数输出。 至此，本章实践项目的内容就全部完成了,本节总结,熟悉JavaScript的数据类型： 数值型、字符型、逻辑型、空值 掌握JavaScript的表达式与运算符 掌握JavaScript控制语句、内部对象 掌握JavaScript自定义对象,第2节

19、,函数和事件,课程目标,熟悉JavaScript的默认函数，包括eval()函数、isNaN()函数、parseInt()函数、parseFloat()函数 掌握JavaScript自定义函数的结构、参数及调用 熟悉定时器的相关操作，包括setTimeout()、clearTimeout() 、setInterval()、clearInterval()等函数的使用 理解JavaScript的函数及常用事件的使用,体验项目,你想在自己的网页上放一个比较符合中国人习惯的时间显示器吗？一个随时变化的时钟，显示效果如图所示：,我们可以用JavaScript实现文字循环滚动显示的功能，显示效果如下图所示

20、,默认函数,JavaScript提供了一些默认的函数 编码函数escape()：将非字母、数字字符转换成ASCII码 译码函数unescape()：将ASCII码转换成字母、数字字符 求值函数eval() 数值判断函数isNaN()：判断一个值是否为非数值类型 整数转换函数parseInt()：将不同进制（二、八、十六进制）的数值转换成十进制整数 浮点数转换函数parseFloat()：将数值字串转换成浮点数,本节只介绍后四种函数,eval()函数,求值函数eval()的格式为：eval(),下面的例子将用eval函数得到一个文本框的值， 然后通过点击按钮弹出一个对话框将其输出。, funct

21、ion show(obj) var str=eval(document.Form.+obj+.value); alert(“你输入的姓名是:”+str); 姓名： ,isNaN()函数,数值判断函数isNaN()的格式：isNaN() 下例中isNaN函数将判断变量是否不是数值，并输出判断结果。 var x=15; var y=黄雅玲; document.write(x不是数值吗？,isNaN(x); document.write(y不是数值吗？,isNaN(y); ,parseInt()函数,整数转换函数parseInt()的功能是将不同进制（二、八、十六）的数值转换成十进制整数。 格式：p

22、arseInt(数值字串，底数) 下面演示了将一个二进制数和一个十六进制数转换成十进制数。 document.write(11012=,parseInt(1101,2),10); document.write(BFFF16=,parseInt(BFFF,16),10); ,parseFloat()函数,parseFloat()是浮点数转换函数，它将数值字串转换成浮点数。 格式：parseFloat(数值字串) document.write(parseInt(3.1234A56),); document.write(parseFloat(3.1234A56),); ,自定义函数,函数是独立于主程

23、序的、具有特定功能的一段程序代码块。 JavaScript函数定义 function 函数名（参数表，变元） 函数体; return 表达式; ,说明： 当调用函数时，所用变量或字面量均可作为变元传递。 函数由关键字function定义。 函数名：定义自己函数的名字。 参数表，是传递给函数使用或操作的值，其值可以是常量、变量或其它表达式。 通过指定函数名（实参）来调用一个函数。 函数的返回值是可选项，如果需要返回值，就必须使用return语句将值返回。 函数名对大小写是敏感的。 约定： 函数名：易于识别（同变量命名规则）。 程序代码：模块化设计。 函数位置：按逻辑顺序，集中置顶。,函数中的形式

24、参数,在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments.length来检查参数的个数。 function function_Name(exp1,exp2,exp3,exp4) Number =function_Name.arguments.length; if(Number1) document.wrile(exp2); if(Number2) document.write(exp3); if(Number3) document.write(exp4);,获取形参的个数,函数的调用,格式：

25、函数名(参数，参数.) 下面的例子演示了没有返回值的函数的定义及调用。 function showName(name) document.write(我是+name); showName(玲玲); /函数调用 ,上例中的function showName(name)为函数定义，其中括号内的name是函数的形式参数，这一点与C语言是完全相同的，而showName(“玲玲”)则是对函数的调用，用于实现需要的功能。 下面的例子演示了带返回值的函数的定义及调用。 function showName(name) str=我是 +name; return str; document.write(showN

26、ame(周伯通); ,函数与事件,事件驱动及事件处理的基本概念 JavaScript是基于对象（Object-Based）的语言，这与Java不同，Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动（Event Driven）。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理的程序或函数，我们称之为事件处理程序（Event Handler）。,事件处理程序,浏览器响应某个事件，实现用户的交互操作而进行的处理（过程）。 事件处理程序的调用：浏览器等待用户的交互操作，并在事件发生时，自

27、动调用事件处理程序（函数），完成事件处理过程。 HTML标签属性： 格式：|”,由于在JavaScript中对象事件的处理通常由函数（function）来完成，且其基本格式与函数一样，所以可以将前面所介绍的所有函数作为事件处理程序。 格式如下： function 事件处理名（参数表） 事件处理语句集； ,事件驱动,JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件 ：,单击事件onClick,改变事件onChange,选中事件onSelect,获得焦点事件onFocus,失去焦点onBlur,载入文件onLoad,鼠标指示事件onMouseOver,提交事件

28、onSubmit,单击事件onClick,当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生单击事件：,button（按钮对象） checkbox（复选框）或（检查列表框） radio（单选钮） reset buttons（重要按钮） submit buttons（提交按钮）,比如，可以通过下面的按钮激活change()函数，当然change()函数是需要另外提供的： 在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript的内部函数，还可以直接使用JavaScript的代码等。,

29、 请输入基本资料： 姓名： ,点击“请单击”按钮后将引发onClick事件，即弹出“谢谢你的填写.”的对话框。,改变事件onChange,当一个text或textarea域失去焦点并更改值时触发onChange事件，当select下拉选项中的一个选项状态改变后也会引发该事件。 事件适用对象fileUpload、select、text、textarea。 下面的例子在文本框的内容改变后，将弹出一个显示“内容即将改变！”的对话框： ,页面运行后在文本框中输入内容，即内容发生改变，然后将鼠标拖走，就会引发onChange事件,将内容改成“Test1”后将鼠标拖走，即弹出对话框。,选中事件onSele

30、ct,当text或textarea对象中的文字被选中后（文字高亮显示），引发该事件。 下面的例子中，当文本框的内容被选中后，将弹出一个显示“内容已被选中!”的对话框： ,选中文本框中的内容后，就会弹出对话框,获得焦点事件onFocus,当用户单击text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。 该事件适用对象：button，checkbox，fileUpload，layer，password，radio，reset，select，submit，text，textarea，window。 下面的例子中，当鼠标移到文本域的地方即获得焦点时，立刻弹出一个提示“已

31、经获得焦点!”的对话框： ,失去焦点onBlur,当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该事件，onBlur事件与onFocus事件是一个对应的关系。 该事件适用对象：button，checkbox，fileUpload，layer，password，radio，reset，select，submit，text，textarea，window。 下面的例子中，浏览器的起始背景色为“lightgrey”，当鼠标移到文本域的地方即获得焦点时，浏览器的背景色变为“red”，当鼠标焦点移动到浏览器的其他地方时，浏览器的背景色变为“white”。, ,运

32、行后，文本框获得焦点后的页面显示效果如图所示：,载入文件onLoad,当文件载入时，产生该事件。onLoad的作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。 下面的代码在文档打开时，将弹出提示“建议浏览器的分辨率：800 x600”的对话框。 function show() var str=建议浏览器的分辨率：800 x600; alert(str); ,鼠标指示事件onMouseOver,当鼠标指到相应的位置时引发的事件。 事件适用对象：layer，link。 下面的例子中，用href给“Click me”加上一个超链接，当鼠标指到超链接“Cl

33、ick me”时，将在状态栏提示“Click this if you dare!”。 Click me ,当鼠标指到文字“Click me”上时，将在状态栏显示提示文字“Click this if you dare!”,提交事件onSubmit,它是在点击提交按钮时引发的事件。 事件适用的对象：form 语法：onSubmit=handlerText 下面的例子中，在点击“提交”按钮时，就会弹出一个“你确认提交吗?”的提示对话框。 ,在点击“提交”按钮后，将引发onSubmit事件，从而弹出提示对话框,定时器,定时器是用以指定在一段特定的时间后执行某段程序。常用的定时器函数有以下几个：,set

34、Timeout()：定时器,clearTimeout()：终止定时器,setInterval()：设置定时器,clearInterval()：取消使用setInterval()设置的定时器,本节总结,熟悉JavaScript的默认函数，包括eval()函数、isNaN()函数、parseInt()函数、parseFloat()函数 掌握JavaScript自定义函数的结构、参数及调用 熟悉定时器的相关操作，包括setTimeout()、clearTimeout() 、setInterval()、clearInterval()等函数的使用 理解JavaScript的函数及常用事件的使用,第三节,

35、窗口对象、文档对象与框架对象,课程目标,熟悉JavaScript的窗口对象，包括opener、self、parent、top等。 熟悉document、location、history、locationbar、menubar、scrollbars、statusbar、toolbar属性，alert()、confirm()、close()、open()、forward()，back()等方法。 理解文档对象中的links、anchors、forms、TITLE属性和write()方法，熟练框架对象中的Frames属性。,体验项目,想在窗口中使用框架吗？想将页面显示到框架中吗？想知道框架的标题吗？

36、想在页面中使用滚动字幕吗？请看本章的体验程序，程序运行后的首页面如图3-1所示：,当用户点击“学员登录”后，进入“学员登录”页面，如图所示,在“学员登录”页面中输入用户姓名，例如填入“那英”，然后点击“填写完毕”按钮，将显示如图所示页面：,当用户点击“热门课程”后，将进入“热门课程”页面，如图3-4所示,窗口对象,窗口对象是JavaScript对象的主要对象之一，而窗口对象中最常用的以下几种：,opener对象,self对象,parent对象,top对象,history历史对象,opener对象和self对象,opener对象可以用于确定open方法打开窗口的源窗口。 self对象实际上代表的

37、是窗口自身，是用于对窗口对象自身的一些属性进行控制。 下面看一个opener和self对象的使用示例，下例将用一个父窗口打开一个子窗口，然后在子窗口中设置两个链接接，用以改变父窗口的背景色。将主窗口的代码保存为main.html，而将子窗口的代码保存为sub.html。 主窗口main.html queryWin=open(sub.html,height=100 width=150) ,在主窗口用open方法打开文件sub.html作为子窗口，其中高度为100，宽度用默认值,子窗口sub.html function passToOpener(color) opener.document.bgC

38、olor=color; self.close(); 请选择你喜欢的颜色? 蓝色 红色 ,改变父窗口的颜色,关闭子窗口,调用改变父窗口颜色的函数,parent对象,parent对象仅仅是对子窗口有意义，也就是说，窗口不是顶层窗口。 parent的属性请大家参考框架的框架集窗口，这一点我们以后还会讲到，一个框架集内的子窗口可以使用parent.frameName来查访它的兄弟窗口，比如：一个框架集中的第四个窗口有一个属性name=“homeFrame”，那么它的兄弟窗口可以通过使用parent.homeFrame或者parent.frames3去访问它。,top对象,top对象是顶层窗口的同义词，

39、可以通过使用top.close()将顶层窗口关闭，可以通过使用top.length来得到顶层窗口中含有的框架个数。,location位置对象,location位置对象：用来代表特定窗口的URL信息。 URL的格式：protocol/host:port/path#hash?search URL的种类主要有：http、file、ftp、mailto、news,location位置对象的属性说明,location位置对象的方法,比如，要实现当按下一个按钮后前往网易网站，那么使用下面的代码,history历史对象,用于存储客户端最近访问过的网址清单,history历史对象的属性,history历史对象

40、的方法,窗口常用方法,窗口的常用方法有以下几种:,alert()方法,confirm()方法,close()方法,open()方法,forward()方法,back()方法,alert()方法,alert()方法显示一个带有“确定”按钮的消息框 语法：alert(message) 参数：message是一个字符串 下面的例子是点击按钮执行alert()方法，弹出一个对话框。, ,confirm()方法,confirm()方法显示一个带有确认信息及“确定”和“取消”按钮的消息确认对话框。 语法：confirm(message)。 参数：message 是一个字符串。 点击“确定”之后会返回tru

41、e，点击“取消”之后会返回false。, function confirmTest() alert(confirm(真的吗?); ,这里我们用alert()方法查看confirm()方法的返回值,点击,close()方法：关闭指定的窗口,语法：close() （直接使用） 参数：无 如果是关闭当前的窗口，可以用下列任意一种方法：,window.close(),self.close(),close(),如果是关闭主浏览器窗口，可以使用top.close(),如果是关闭已经打开的页面，可以使用如下的方法,用页面打开时返回的ID调用close函数。即页面如果用如下的方式打开： messageWin=

42、window.open(XXX.html),其中XXX.html为将要打开的页面，其中messageWin为window.open函数返回的ID。 那么关闭消息窗口，可以使用： messageWin.close(),open()方法：打开一个WEB浏览器窗口,语法：open(Url, windowName, windowFeatures),参数说明如表,forward()方法,指向浏览器历史列表中的下一个URL，相当于点击浏览器的“前进”按钮。,语法：history.forward() 参数：forward()方法没有参数,这个方法等价于浏览器的“前进”按钮,onClick=history.f

43、orward(),back()方法,指向浏览器历史列表中的上一个URL，相当于点击浏览器的“后退”按钮。,语法：history.back() 参数：back()方法没有参数,这个方法等价于浏览器的“后退”按钮, onClick=history.back(),文档对象,文档对象在JavaScript中是一个很重要的对象。,常用的文档对象属性包括,links属性,anchors属性,forms属性,TITLE属性,还有一个重要的方法：write()方法。,links属性,是一个对应于源文件中相应顺序的链接对象构成的数组。 如果文档里有三个链接标签即三个 ，那么可以使用如下的方法查询它们： docu

44、ment.links0 document.links1 document.links2,anchors属性,你可以在代码中通过使用anchors数组查询anchor对象，如果你在文档里容纳了三个命名anchor，它们的名字分别为anchor1，anchor2和 anchor3，那么可以使用下面的代码分别查询它们： document.anchorsanchor1 document.anchorsanchor2 document.anchorsanchor3 或者使用： document.anchors0 document.anchors1 document.anchors2 如果想要得到文档中a

45、nchors的数量，可以使用length属性，即调用：document.anchors.length。,forms属性,如果你在文档里容纳了三个命名forms，它们的属性名分别为form1，form2和form3，那么可以使用下面的代码分别查询它们： document.formsform1 document.formsform2 document.formsform3 或者用： document.forms0 document.forms1 document.forms2 如果想查询第二个form中一个名字为quantity的text对象的值，那么你可以使用 document.forms1.q

46、uantity.value,TITLE属性：代表文档标题的一个字符串,TITLE属性体现的是TITLE标签的开始和结束之间的值。如果一个文档没有标题，则它的TITLE属性是null，比如，在下面的例子中TITLE属性的值被保存在变量docTitle中。 var newWindow = window.open() var docTitle = newWindow.document.title 以上两行代码中，第一行代码是打开网页，同时返回一个ID保存在变量newWindow中，在第二行代码中用返回的ID调用document.title得到其标题，并将这个标题保存在变量docTitle中。,wri

47、te()方法,write()方法是文档对象中一个很重要的方法，它是将一个或多个表达式写到指定窗口的文档中。 语法：document.write(expr1，.，exprN) 。 参数：expr1，.，exprN，这些参数可以是任何JavaScript的表达式 var mystery = world; /用write方法输出字符串、字符串变量和数字 document.write(Hello ,mystery, testing ,123); /用write方法输出的同时将一个值赋给变量mystr document.write(mystr=Hello ,world.); document.write

48、(mystr); /输出变量mystr的值 var age=16; /如果age=18成立,则输出Adult,否则输出Minor,并将该字符串赋给newage变量 document.write(newage=(age=18)?Adult:Minor); document.write(newage); /输出newage变量 ,框架对象,框架对象：是在同一屏幕上显示多个互不干涉的可滚动框架的窗口。 frames属性：是由源文件中含有Frameset的Frame标签创建的子框架的对象构成的数组。 可以通过框架数组来查询窗口中的子框架，如果一个窗口含有三个名字分别为fr1、fr2和fr3的子框架，那

49、么可以用下面的方法查询它们： parent.framesfr1 parent.framesfr2 parent.framesfr3 或者用： parent.frames0 parent.frames1 parent.frames2 length属性：可以使用窗口的length属性来查询框架中的子框架的数量。,本节总结,熟悉JavaScript的窗口对象，包括opener、self、parent、top等。 熟悉document、location、history、locationbar、menubar、scrollbars、statusbar、toolbar属性，alert()、confirm(

50、)、close()、open()、forward()，back()等方法。 理解文档对象中的links、anchors、forms、TITLE属性和write()方法，熟练框架对象中的Frames属性。,第四节,表单对象,课程目标,熟悉JavaScript的action、elements、name、length属性 掌握JavaScript的submit()方法 掌握文本框、普通按钮、提交按钮、重置按钮、下拉框、单选按钮、复选按钮、文件上传等对象的使用方法,体验项目,想知道常用表单对象是如何使用吗？想在网页中自己设计一个“学生信息管理”的界面吗？请看本章的体验程序。,表单对象及其常用属性、方法

51、,表单对象是页面中最常用的对象之一，它有自己的属性和方法。,表单对象Form,文本对象Text,按钮对象Button,密码对象Password,Submit（提交按钮）对象、Reset（重置按钮）对象,选择对象Select,选择对象的子对象Option,单选按钮对象Radio,复选对象Checkbox,文本区域对象Textarea,文件上传对象File,表单对象Form,表单对象是文件对象的子对象，JavaScript的运行时引擎自动为每一个表单建立一个表单对象。 格式： document.forms索引.属性 document.forms索引.方法（参数） document.表单名称.属性

52、document.表单名称.方法（参数）,表单对象的属性说明,文本对象Text,格式： document.forms索引.elements索引.属性 document.forms索引.elements索引.方法（参数） document.表单名称.文本对象名称.属性 document.表单名称.文本对象名称.方法（参数）,文本对象的属性,文本对象的方法,事件处理程序,onBlur、onChange、onClick、onDbClick、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut

53、、onMouseMove、onSelect。,按钮对象Button,格式： document.forms索引.elements索引.属性 document.forms索引.elements索引.方法（参数） document.表单名称.按钮对象名称.属性 document.表单名称.按钮对象名称.方法（参数）,按钮对象的属性,方法： blur()、click()、focus()、handleEvent(事件),事件处理程序：,onBlur、onClick、onDbClick、onFocus、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove,密码对象Password,格式： document.forms索引.elements索引.属性 document.forms索引.elements索引.方法（参数） document.表单名称.密码对象名称.属性 document.表单名称.密码对象名称.方法（参数）,属性：,