web第04章输入精讲

《web第04章输入精讲》由会员分享，可在线阅读，更多相关《web第04章输入精讲（59页珍藏版）》请在金锄头文库上搜索。

1、webweb第第0404章章- -输入精讲输入精讲第第0303章章 输入输入主要内容主要内容一、输入方式一、输入方式二、常用表单元素二、常用表单元素三、三、form元素元素四、信息验证四、信息验证2WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入一、输入方式一、输入方式输入方式输入方式用户如何把信息提交给服务器用户如何把信息提交给服务器所有的所有的Web应用均相同应用均相同可以采用如下的输入方式可以采用如下的输入方式（1）通过浏览器的）通过浏览器的地址栏地址栏（可以使用（可以使用“？”）（2）通过）通过超链接或者按钮超链接或者按钮（3）通过）通过表单提交表单提交目目目目录录3

2、WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入二、常用表单元素二、常用表单元素1、单行文本框、单行文本框2、密码框、密码框3、单选按钮、单选按钮4、复选框、复选框5、下拉框、下拉框6、文本域、文本域7、按钮、按钮8、其他、其他4WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入1 1、单行文本框、单行文本框输入少量信息时使用，例如输入少量信息时使用，例如用户名用户名等信息。等信息。基本格式基本格式例如：例如：注册功能中，用户名的输入：注册功能中，用户名的输入：input ” /用用户名：名：input /5WEBWEB系统开发与设计系统开发与设计第第0303

3、章章 输入输入2 2、密码框、密码框输入密码时使用，显示输入密码时使用，显示“*”或者或者“.”提交至服务器的并非提交至服务器的并非“*”或者或者“.”基本格式基本格式例如：例如：注册功能中，用户输入的密码注册功能中，用户输入的密码input ” /密密 码：input =“” /6WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入3 3、单选按钮、单选按钮需要多选一的情况下使用需要多选一的情况下使用同组同组“name”相同，相同，“value”不同不同选中按钮的选中按钮的“value”信息值可传至服务器信息值可传至服务器注意注意value值与界面上显示的信息区分值与界面上显示

4、的信息区分需要默认，使用需要默认，使用checked属性属性基本格式基本格式例如：例如：input ” /显示的信息示的信息 input /男男 input /女女7WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入4 4、复选框、复选框与单选按钮相似，但复选框主要用于多个选择的情况与单选按钮相似，但复选框主要用于多个选择的情况基本格式：基本格式：例如例如input ” /显示的信息示的信息运运动看看电影影读书听音听音乐8WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入对于复选框和单选按钮对于复选框和单选按钮注意：注意：（1）同组复选框或者单选按钮，）同组复选

5、框或者单选按钮，名字（名字（name）必）必须相同须相同。（2）值必须指定值必须指定，且值和显示的内容无关，且值和显示的内容无关，和提和提交至服务器的信息有关。交至服务器的信息有关。（3）选定哪些或者哪个内容，对应的值将被提交）选定哪些或者哪个内容，对应的值将被提交给服务器（点击给服务器（点击“提交提交”按钮后）。按钮后）。9WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入5 5、下列框、下列框可单选也可多选可单选也可多选基本格式基本格式select=n /运运动option ” selected显示的示的值11option ” selected显示的显示的22option

6、” selected显示的显示的33 option value=1 浙江浙江 江江苏 安徽安徽 北京北京 上海上海 10WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入6 6、文本域、文本域输入多行文本时使用输入多行文本时使用基本格式基本格式例如：例如：textarea rows=“ 默默认值默默认值表示文本表示文本区区域每行域每行最多最多2020个个字符（中字符（中文文1010个个），无），无滚动条条情情况况下下显示示8 8行。行。11WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入7 7、按钮、按钮“提交提交”按钮按钮“重置重置”按钮按钮普通按钮普通按钮

7、input /input /input /12WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入8 8、其他、其他图像域图像域文件域文件域目目目目录录13WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入三、三、formform元素元素需要提交到服务器的信息，都要放在需要提交到服务器的信息，都要放在form（表单）内。（表单）内。同个页面可以有多个表单，各自独立，点击的同个页面可以有多个表单，各自独立，点击的“提交提交”按钮在哪个表单中即提交该表单的信息。按钮在哪个表单中即提交该表单的信息。基本格式：基本格式：action：指出提交给服务器哪个文件处理：指出提交

8、给服务器哪个文件处理method：提交的方式：提交的方式get：少量信息时：少量信息时post：信息量大时：信息量大时form name=“form1” =“get post”各各种种表表单元素元素目目目目录录14WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入四、信息验证四、信息验证可以利用可以利用Javascript语言语言在客户端在客户端实现信息验证。实现信息验证。信息验证主要用于确保用户输入的信息合乎一些规范信息验证主要用于确保用户输入的信息合乎一些规范和要求，例如和要求，例如输入的用户名和密码字符长度是不是符合要求输入的用户名和密码字符长度是不是符合要求输入的日期格

9、式是否正确输入的日期格式是否正确按钮组有没有进行选择等按钮组有没有进行选择等。通过信息验证后再将信息提交至服务器，可以确保用通过信息验证后再将信息提交至服务器，可以确保用户输入的信息是户输入的信息是有效的有效的，此举可以，此举可以提高总体效率提高总体效率。15WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入1 1、信息验证的基本过程：、信息验证的基本过程：点点击提提交交触触发事事件件调用事件用事件处理程序理程序错误：返回警告：返回警告正确：什正确：什么么都不都不做做其其间调用各用各个个处理方法理方法非空验证方法非空验证方法字符串长度验证方法字符串长度验证方法日期验证方法日期验

10、证方法电子邮件验证方法电子邮件验证方法数字验证方法数字验证方法16WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入2 2、涉及的相关内容、涉及的相关内容Javascript语言语言在网页中嵌入在网页中嵌入Javascript语言的方法：语言的方法：P52函数：函数：P52事件和响应事件和响应事件：事件：JavaScript中的事件中的事件引用表单：引用表单：调用验证调用验证17WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入3 3、 JavaScript JavaScript脚本语言概述脚本语言概述JavaScript是一种基于对象和事件驱动并具有安全性能的

11、是一种基于对象和事件驱动并具有安全性能的解释型解释型脚本语言，在脚本语言，在Web应用中得到了非常广泛的应用。应用中得到了非常广泛的应用。它不但可以用于它不但可以用于编写客户端的脚本程序编写客户端的脚本程序，由，由Web浏览器解浏览器解释执行，而且释执行，而且还可以编写在服务器端执行的脚本程序还可以编写在服务器端执行的脚本程序，在服务器端处理用户提交的信息并动态地向浏览器返回在服务器端处理用户提交的信息并动态地向浏览器返回处理结果。处理结果。通常在通常在JSP中应用中应用JavaScript编写客户端脚本程序。编写客户端脚本程序。18WEBWEB系统开发与设计系统开发与设计第第0303章章 输

12、入输入（1 1）在在JSPJSP中引入中引入JavaScriptJavaScript有以下两种方法有以下两种方法：一种是在一种是在JSP页面中直接嵌入页面中直接嵌入JavaScript另一种是链接外部另一种是链接外部JavaScript。A A A A、在页面中直接嵌入在页面中直接嵌入在页面中直接嵌入在页面中直接嵌入JavaScriptJavaScriptJavaScriptJavaScript19WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入说明：在外部说明：在外部JS文件中，文件中，不需要将脚本代码用不需要将脚本代码用和和标记括起来。标记括起来。（2 2）在在JSPJS

13、P中引入中引入JavaScriptJavaScriptB B B B、链接外部链接外部链接外部链接外部JavaScriptJavaScriptJavaScriptJavaScript使用情况：使用情况：脚本代码比较复杂；脚本代码比较复杂；同一段代码可以被多个页面所使用。同一段代码可以被多个页面所使用。放置这些脚本代码的放置这些脚本代码的文件的扩展名为文件的扩展名为.js。在需要使用该。在需要使用该代码的代码的Web页面中链接该页面中链接该JavaScript文件即可。语法格文件即可。语法格式如下：式如下：20WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（3 3） Java

14、Script JavaScript的数据类型与运算符的数据类型与运算符 （A A A A）数据类型数据类型数据类型数据类型 （B B B B）变量变量变量变量 （C C C C）运算符运算符运算符运算符21WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（A A）数据类型数据类型JavaScript有有6种数据类型，种数据类型，如如下表下表所示所示。类类 型型含含 义义说说 明明示示 例例int数数值值整型整型整数，可以为正数、负数或整数，可以为正数、负数或017， 80，0float浮点型浮点型浮点数，可以使用实数的普通浮点数，可以使用实数的普通形式或科学计数法表示形式或科

15、学计数法表示3.14159.27，6.16e4string字符串类型字符串类型字符串，是用字符串，是用单引号单引号或或双引号双引号括起来的一个或多个字符括起来的一个或多个字符wgh，平平淡平平淡淡才是真淡才是真boolean布尔型布尔型只有只有true或或false两个值两个值true，falseobject对象类型对象类型null空类型空类型没有任何值没有任何值undefined未定义类型未定义类型指变量被创建，但未赋值时所指变量被创建，但未赋值时所具有的值具有的值22WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（B B）变量变量在在JavaScript中，可以使用命令

16、中，可以使用命令var声明变量，语法格声明变量，语法格式如下：式如下：varvar variable; variable;在声明变量的同时也可以对变量进行赋值：在声明变量的同时也可以对变量进行赋值：varvar variable=11; variable=11;JavaScript采用采用弱类型弱类型的形式，在声明变量时，的形式，在声明变量时，不需要不需要指定变量的类型指定变量的类型，而变量的类型将根据其变量赋值来确，而变量的类型将根据其变量赋值来确定。例如：定。例如：var varible=17;var varible=17;/ /数值型数值型var str=var str=爱护地球爱护地球

17、; ;/ /字符型字符型23WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（B B）变量变量但是变量命名必须遵循以下规则：但是变量命名必须遵循以下规则：B、不能使用、不能使用JavaScript中的关键字。中的关键字。JavaScript的关键的关键字如下表所示。字如下表所示。A、必须、必须以字母或下划线以字母或下划线开头，中间可以是数字、字母开头，中间可以是数字、字母或下划线，但是或下划线，但是不能有空格或加号、减号等符号不能有空格或加号、减号等符号。abstractcontinuefinallyinstanceofprivatethisbooleandefaultflo

18、atintpublicthrowbreakdoforinterfacereturntypeofbytedoublefunctionlongshorttruecaseelsegotonativestaticvarcatchextendsimplementsnewsupervoidcharfalseimportnullswitchwhileclassfinalinpackagesynchronizedwith注意：关键字同样注意：关键字同样不可用作函数名、不可用作函数名、对象名及自定义的对象名及自定义的方法名等。方法名等。24WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（C

19、C）运算符）运算符在在JavaScript中提供了算术运算符、关系运算符、逻辑中提供了算术运算符、关系运算符、逻辑运算符、字符串运算符、位操作运算符、赋值运算符和运算符、字符串运算符、位操作运算符、赋值运算符和条件运算符等条件运算符等7种运算符。下面进行详细介绍。种运算符。下面进行详细介绍。算术运算符等同于数学运算，即在程序中进行加、减、算术运算符等同于数学运算，即在程序中进行加、减、乘、除等运算。在乘、除等运算。在JavaScript中常用的算术运算符如下中常用的算术运算符如下表所示。表所示。（1）算术运算符25WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入运算符运算符运

20、算符运算符描描 述述示示 例例+加运算符加运算符1+6 /返回值为返回值为7减运算符减运算符5-2 /返回值为返回值为3*乘运算符乘运算符7*3 /返回值为返回值为21/除运算符除运算符9/3 /返回值为返回值为3%求模运算符求模运算符6%4 /返回值为返回值为2+自增运算符。该运算符有两种情况：自增运算符。该运算符有两种情况：i+（在使用（在使用i之后，使之后，使i的值加的值加1）；）；+i（在（在使用使用i之前，先使之前，先使i的值加的值加1）i=1; j=i+ /j的值为的值为1，i的值为的值为2i=1; j=+i /j的值为的值为2，i的值为的值为2-自减运算符。该运算符有两种情况：自

21、减运算符。该运算符有两种情况：i-（在使用（在使用i之后，使之后，使i的值减的值减1）；）；-i（在（在使用使用i之前，先使之前，先使i的值减的值减1）i=6; j=i- /j的值为的值为6，i的值为的值为5i=6; j=-i /j的值为的值为5，i的值为的值为526WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入运算符运算符关系运算符的基本操作过程是：首先对操作数进行比较，关系运算符的基本操作过程是：首先对操作数进行比较，这个操作数可以是数字也可以是字符串，然后返回一个这个操作数可以是数字也可以是字符串，然后返回一个布尔值布尔值true或或false。JavaScript支

22、持的常用关系运算符支持的常用关系运算符与与Java中的常用关系运算符相同。中的常用关系运算符相同。（2）关系运算符（3）逻辑运算符 逻辑运算符返回一个布尔值，通常和比较运算符一逻辑运算符返回一个布尔值，通常和比较运算符一起使用，用来表示复杂的比较运算，常用于起使用，用来表示复杂的比较运算，常用于if、while和和for语句中。语句中。JavaScript中常用的逻辑运算符如下表所示。中常用的逻辑运算符如下表所示。27WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入运算符运算符（4）字符串运算符 字符串运算符是用于两个字符型数据之间的运算符，字符串运算符是用于两个字符型数据之

23、间的运算符，除了比较运算符外，还可以是除了比较运算符外，还可以是+和和+=运算符。其中，运算符。其中，+运算符用于连接两个字符串（例如，运算符用于连接两个字符串（例如，World+Dream），而），而+=运算符则连接两个字符串，运算符则连接两个字符串，并将结果赋给第一个字符串（例如，并将结果赋给第一个字符串（例如，var a=One;a+=Dream;）。）。运算符运算符描描 述述运算符运算符描描 述述运算符运算符描述描述!逻辑非逻辑非&逻辑与逻辑与|逻辑或逻辑或（5）赋值运算符28WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入运算符运算符（6）位操作运算符 位操作运算符

24、用于对数值的位进行操作，如向左或向位操作运算符用于对数值的位进行操作，如向左或向右移位等。右移位等。JavaScript中常用位操作运算符如下表所示。中常用位操作运算符如下表所示。 最基本的赋值运算符是等于号最基本的赋值运算符是等于号“=”，用于对变量，用于对变量进行赋值，而其他运算符可以和赋值运算符进行赋值，而其他运算符可以和赋值运算符“=”联合联合使用，构成组合赋值运算符。使用，构成组合赋值运算符。JavaScript支持的常用赋支持的常用赋值运算符与值运算符与Java中的常用赋值运算符相同。中的常用赋值运算符相同。运算符描 述运算符描 述运算符描 述&与运算符与运算符|或运算符或运算符异

25、或运算符异或运算符带符号右移带符号右移填填0右移右移29WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入运算符运算符 条件运算符是条件运算符是JavaScript支持的一种特殊的支持的一种特殊的3目运算目运算符，同符，同Java中的中的3目运算符类似，其语法格式如下：目运算符类似，其语法格式如下：（7）条件运算符 如果如果“操作数操作数”的值为的值为true，则整个表达式的结果，则整个表达式的结果为为“结果结果1”，否则为，否则为“结果结果2”。操作数操作数? ?结果结果1: 1:结果结果2 230WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（4 4）

26、JavaScript JavaScript的流程控制语句的流程控制语句 （1 1 1 1）if if if if条件判断语句条件判断语句条件判断语句条件判断语句 （2 2 2 2）forforforfor循环语句循环语句循环语句循环语句（3 3 3 3）whilewhilewhilewhile循环语句循环语句循环语句循环语句（4 4 4 4）dowhiledowhiledowhiledowhile循环语句循环语句循环语句循环语句（5 5 5 5）switchswitchswitchswitch语句语句语句语句31WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入if if条件判

27、断语句条件判断语句 对变量或表达式进行判定并根据判定结果进行相应的处理，可以使用if语句。if语句的语法格式如下：if(条件表达式) 语句序列1 /条件满足时执行else 语句序列2 /条件不满足时执行 执行上述if语句时，首先计算“条件表达式（任意的逻辑表达式）”的值，如果为true，就执行“语句序列1”，执行完毕后结束该if语句；否则执行“语句序列2”，执行后同样结束该if语句。32WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入forfor循环语句循环语句 for语句是JavaScript语言中应用比较广泛的条件语句。通常for语句使用一个变量作为计数器来执行循环的次数

28、，这个变量就称为循环变量。for语句的语法格式如下：for(循环变量赋初值;循环条件;循环变量增值) 循环体循环变量赋初值：一条初始化语句，用来对循环变量进行初始化赋值。循环条件：一个包含比较运算符的表达式，用来限定循环变量的边限。如果循环变量超过了该边限，则停止该循环语句的执行。循环变量增值：用来指定循环变量的步幅。33WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入forfor循环语句循环语句 for语句可以使用break语句来中止循环语句的执行。break语句默认情况下是终止当前的循环语句。34WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入while

29、while循环语句循环语句 while循环语句是另一种基本的循环语句，其结构和for循环语句有些类似，但是while语句不包含循环变量的初始化及循环变量的步幅。其语法格式如下：while (条件表达式) 循环体 使用while语句时，必须先声明循环变量并且在循环体中指定循环变量的步幅，否则while语句将成为一个死循环。35WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入dowhiledowhile循环语句循环语句 dowhile循环语句和while循环语句非常相似，所不同的是它是在循环底部检测循环表达式，而不是像while循环语句那样在循环顶部进行检测。这就保证了循环体至少

30、被执行一次。dowhile语句的语法格式如下：do 循环体 while (条件表达式); 【例2-11】 分别利用for、while和dowhile循环语句将数字7格式化为00007，并输出到页面上。36WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入switchswitch语句语句 switch是典型的多路分支语句，其作用与嵌套使用if语句基本相同，但switch语句比if语句更具有可读性，而且switch语句允许在找不到一个匹配条件的情况下执行默认的一组语句。switch语句的语法格式如下：switch (expression) case judgement1: stat

31、ement1; break; case judgement2: statement2; break; default: defaultstatement; break;37WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入switchswitch语句语句 expression：任意的表达式或变量。 judgement：任意的常数表达式。当expression的值与某个judgement的值相等时，就执行此case后的statement语句，如果expression的值与所有的judgement的值都不相等时，则执行default后面的defaultstatement语句。 br

32、eak：用于结束switch语句，从而使JavaScript只执行匹配的分支。如果没有了break语句，则该switch语句的所有分支都将被执行，switch语句也就失去了使用的意义。38WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（5 5）函数的定义和调用函数的定义和调用在在JavaScript中，函数可以分为定义和调用两部分中，函数可以分为定义和调用两部分。（A A A A）函数的定义函数的定义函数的定义函数的定义在在JavaScript中，定义函数最常的方法是通过中，定义函数最常的方法是通过function语句实现，其语法格式如下：语句实现，其语法格式如下：func

33、tionfunction functionName(parameter1, parameter2,) functionName(parameter1, parameter2,) statementsstatements return expressionreturn expression 39WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入5 5、 函数的定义和调用函数的定义和调用（B B B B）函数的调用函数的调用函数的调用函数的调用要调用不带参数的函数：函数名加上括号即可；要调用不带参数的函数：函数名加上括号即可；要调用的函数带参数：则在括号中加上需要传递的参数要调用的

34、函数带参数：则在括号中加上需要传递的参数列表。列表。如果函数有返回值，可以使用赋值语句将函数值赋给一如果函数有返回值，可以使用赋值语句将函数值赋给一个变量。个变量。40WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（6 6） 事件事件事件概述事件概述事件概述事件概述JavaScript与与Web页面之间的交互是页面之间的交互是通过用户操作浏览通过用户操作浏览器页面时触发相关事件来实现器页面时触发相关事件来实现的。的。例如：例如：在页面载入完毕时，将触发在页面载入完毕时，将触发load（载入）事件；（载入）事件；当用户单击按钮时，将触发按钮的当用户单击按钮时，将触发按钮的cl

35、ick事件等。事件等。用于响应某个事件而执行的处理程序称为用于响应某个事件而执行的处理程序称为事件处理程序事件处理程序：例：当用户单击按钮时，将触发按钮的事件处理程例：当用户单击按钮时，将触发按钮的事件处理程序序onClick。例：当用户选择某段文本时，将触发时间处理程序例：当用户选择某段文本时，将触发时间处理程序onSelect41WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入A、在在JavaScript中分配中分配事件处理程序事件处理程序，要注意：，要注意：需需要要获得要处理对象的引用获得要处理对象的引用，将要将要执行的处理函数赋值执行的处理函数赋值给对应的事件处理程序

36、。例如给对应的事件处理程序。例如：var img=document.getElementById(img_download);var img=document.getElementById(img_download);img.onclickimg.onclick=function()=function() alert(alert(单击了图片单击了图片);); 在页面中加入这段代在页面中加入这段代码并运行，则当单击码并运行，则当单击图片图片img_downloadimg_download时，将弹出时，将弹出“ “单击了单击了下载图片下载图片” ”对话框。对话框。6 6 事件事件事件处理程序有两种

37、分配方式：事件处理程序有两种分配方式：在在JavaScript中分配中分配事件处理程序事件处理程序和和在在HTML中分配事件处理程序中分配事件处理程序。在在JavaScriptJavaScript中分配事件处理程中分配事件处理程序时，事件处理程序名称必须序时，事件处理程序名称必须小写，才能正确响应事件。小写，才能正确响应事件。42WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入6 6 事件事件B、在在HTML中分配事件处理程序中分配事件处理程序：只需要在：只需要在HTML标记标记中添加相应的事件处理程序的属性，并在其中指定作为中添加相应的事件处理程序的属性，并在其中指定作为属

38、性值的代码或是函数名称即可。例如：属性值的代码或是函数名称即可。例如：img src=images/download.GIF );在页面中加入上面的代码，并运行，在页面中加入上面的代码，并运行，则当单击图片则当单击图片img_downloadimg_download时，将时，将弹出弹出“ “您单击了图片您单击了图片” ”对话框。对话框。43WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入6 6 事件事件（2 2 2 2）事件类型事件类型事件类型事件类型多数浏览器内部对象都拥有很多事件，下面多数浏览器内部对象都拥有很多事件，下面的表中将给出的表中将给出常用的事件、事件处理程序及

39、何时触这些事件处理程序。常用的事件、事件处理程序及何时触这些事件处理程序。事件事件事件处理程事件处理程序序何何 时时 触触 发发bluronblur元素或窗口本身失去焦点时触发元素或窗口本身失去焦点时触发changeonchange选中选中元素中的选项或其他表单元素失去焦点时，并且在其获取焦元素中的选项或其他表单元素失去焦点时，并且在其获取焦点后内容点后内容发生过改变时触发发生过改变时触发clickonclick单击鼠标左键时触发单击鼠标左键时触发focusonfocus任何元素或窗口本身获得焦点时触发任何元素或窗口本身获得焦点时触发keydownonkeydown键盘键被按下时触发，如果一直

40、按着某键，则会不断触发；当返回键盘键被按下时触发，如果一直按着某键，则会不断触发；当返回false时，取消默认动作时，取消默认动作loadonload页面完全载入后，在页面完全载入后，在window对象上触发；所有框架都载入后，在框架集对象上触发；所有框架都载入后，在框架集上触发；上触发；标记指定的图像完全载入后，在其上触发；或标记指定的图像完全载入后，在其上触发；或标记指定的标记指定的对象完全载对象完全载入后，在其上触发入后，在其上触发selectonselect选中文本时触发选中文本时触发submitonsubmit单击提交按钮时，在单击提交按钮时，在上触发上触发unloadonunloa

41、d页面完全卸载后，在页面完全卸载后，在window对象上触发；或者所有框架都卸载后，在框对象上触发；或者所有框架都卸载后，在框架集上触发架集上触发44WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（7 7） JavaScript JavaScript常用对象的应用常用对象的应用45WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（7 7） JavaScript JavaScript常用对象的应用常用对象的应用（A A A A）StringStringStringString对象对象对象对象String对象是对象是动态对象动态对象，需要创建对象实例后才能引用

42、它的，需要创建对象实例后才能引用它的属性和方法属性和方法。在创建一个在创建一个String对象变量时，可以使用对象变量时，可以使用new运算符与来创运算符与来创建，也可以直接将字符串赋给变量建，也可以直接将字符串赋给变量。例如例如： strValue=“hello”strVal=new String(hello) 46WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入String对象的常用属性和方法对象的常用属性和方法如下表如下表所示所示。7 JavaScript7 JavaScript常用对象的应用常用对象的应用属性属性/方法方法说说 明明length用于返回用于返回Stri

43、ng对象的长度对象的长度split(separator,limit)用用separator分隔符将字符串划分成子串并将其存储到数组中，如分隔符将字符串划分成子串并将其存储到数组中，如果指定了果指定了limit，则数组限定为，则数组限定为limit给定的数，给定的数，separator分隔符可分隔符可以是多个字符或一个正则表达式，它不作为任何数组元素的一部以是多个字符或一个正则表达式，它不作为任何数组元素的一部分返回分返回substr(start,length)返回字符串中从返回字符串中从startIndex开始的开始的length个字符的子字符串个字符的子字符串substring(from,t

44、o)返回以返回以from开始、以开始、以to结束的子字符串结束的子字符串replace(searchValue,replaceValue)将将searchValue换成换成replaceValue并返回结果并返回结果charAt(index)返回字符串对象中的指定索引号的字符组成的字符串，位置的有返回字符串对象中的指定索引号的字符组成的字符串，位置的有效值为效值为0到字符串长度减到字符串长度减1的数值；一个字符串的第一个字符的索的数值；一个字符串的第一个字符的索引位置为引位置为0，第二个字符位于索引位置，第二个字符位于索引位置1，依次类推；当指定的索，依次类推；当指定的索引位置超出有效范围时，

45、引位置超出有效范围时，charAt方法返回一个空字符串方法返回一个空字符串toLowerCase()返回一个字符串，该字符串中的所有字母都被转换为小写字母返回一个字符串，该字符串中的所有字母都被转换为小写字母toUpperCase()返回一个字符串，该字符串中的所有字母都被转换为大写字母返回一个字符串，该字符串中的所有字母都被转换为大写字母47WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（B B B B）DateDateDateDate对象对象对象对象Date对象是一个有关日期和时间的对象。它具有动态性，对象是一个有关日期和时间的对象。它具有动态性，即必须使用即必须使用n

46、ew运算符创建一个实例。例如运算符创建一个实例。例如：mydatemydatenew Date();new Date();Date对象没有提供直接访问的属性，只具有获取和设置对象没有提供直接访问的属性，只具有获取和设置日期和时间的方法。日期和时间的方法。Date对象的方法如对象的方法如下表所示。下表所示。（7 7） JavaScript JavaScript常用对象的应用常用对象的应用48WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（7 7） JavaScript JavaScript常用对象的应用常用对象的应用获取日期和时间的方法说 明设置日期和时间的方法说 明getF

47、ullYear()返回用返回用4位数表示的年位数表示的年份份setFullYear()设置年份，用设置年份，用4位数表位数表示示getMonth()返回月份（返回月份（011）setMonth()设置月份（设置月份（011）getDate()返回日数（返回日数（131）setDate()设置日数（设置日数（131）getDay()返回星期（返回星期（06）setDay()设置星期（设置星期（06）getHours()返回小时数（返回小时数（023）setHours()设置小时数（设置小时数（023）getMinutes()返回分钟数（返回分钟数（059）setMinutes()设置分钟数（设置

48、分钟数（059）getSeconds()返回秒数（返回秒数（059）setSeconds()设置秒数（设置秒数（059）getTime()返回返回Date对象的内部对象的内部毫秒表示毫秒表示setTime()使用毫秒形式设置使用毫秒形式设置Date对象对象49WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（7 7） JavaScript JavaScript常用对象的应用常用对象的应用（C C C C）windowwindowwindowwindow对象对象对象对象window对象是浏览器（网页）的文档对象模型结构中对象是浏览器（网页）的文档对象模型结构中最高级的对象，它处

49、于对象层次的顶端，提供了用于控最高级的对象，它处于对象层次的顶端，提供了用于控制浏览器窗口的属性和方法。由于制浏览器窗口的属性和方法。由于window对象使用十对象使用十分频繁，又是其他对象的父对象，所以在使用分频繁，又是其他对象的父对象，所以在使用window对象的属性和方法时，对象的属性和方法时，JavaScript允许省略允许省略window对象对象的名称的名称。window对象的常用属性如对象的常用属性如下下表所示表所示。50WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入WindowWindow对象的常用属性对象的常用属性属 性描 述frames表示当前窗口中所有表

50、示当前窗口中所有frame对象的集合对象的集合location用于代表窗口或框架的用于代表窗口或框架的Location对象，如果将一个对象，如果将一个RUL赋予给该赋予给该属性，那浏览器将加载并显示该属性，那浏览器将加载并显示该URL指定的文档指定的文档length窗口或框架包含的框架个数窗口或框架包含的框架个数history对窗口或框架的对窗口或框架的History对象的只读引用对象的只读引用name用于存放窗口的名字用于存放窗口的名字status一个可读写的字符，用于指定状态栏中的当前信息一个可读写的字符，用于指定状态栏中的当前信息parent表示包含当前窗口的父窗口表示包含当前窗口的父窗

51、口opener表示打开当前窗口的父窗口表示打开当前窗口的父窗口closed一个只读的布尔值，表示当前窗口是否关闭；当浏览器窗口关闭一个只读的布尔值，表示当前窗口是否关闭；当浏览器窗口关闭时，表示该窗口的时，表示该窗口的window对象并不会消失，不过它的对象并不会消失，不过它的closed属性属性被设置为被设置为true51WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入WindowWindow对象的常用方法对象的常用方法方 法描 述alert()弹出一个警告对话框弹出一个警告对话框confirm()显示一个确认对话框，单击显示一个确认对话框，单击“确认确认”按钮时返回按钮时

52、返回true，否则，否则返回返回falseprompt()弹出一个提示对话框，并要求输入一个简单的字符串弹出一个提示对话框，并要求输入一个简单的字符串close()关闭窗口关闭窗口focus()把键盘的焦点赋予给顶层浏览器窗口，在多数平台上，这将把键盘的焦点赋予给顶层浏览器窗口，在多数平台上，这将使用窗口移到最前边使用窗口移到最前边open()打开一个新窗口打开一个新窗口setTimeout(timer)在经过指定的时间后执行代码在经过指定的时间后执行代码clearTimeout()取消对指定代码的延迟执行取消对指定代码的延迟执行resizeBy(offsetx,offsety)按照指定的位移

53、量设置窗口的大小按照指定的位移量设置窗口的大小print()相当于浏览器工具栏中的相当于浏览器工具栏中的“打印打印”按钮按钮setInterval()周期执行指定的代码周期执行指定的代码clearInterval()停止周期性地执行代码停止周期性地执行代码52WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入（7 7） JavaScript JavaScript常用对象的应用常用对象的应用【例例2-12】 window对象示例对象示例通过按钮打开一个新窗口，并在新窗口的状态栏中显示通过按钮打开一个新窗口，并在新窗口的状态栏中显示当前年份。当前年份。53WEBWEB系统开发与设计

54、系统开发与设计第第0303章章 输入输入4 4、常用方法和常用验证、常用方法和常用验证（1）常用方法：一般处理字符串较多，设字符串变量）常用方法：一般处理字符串较多，设字符串变量名为名为str，则常用的方法和属性：，则常用的方法和属性：str.lengthstr.charAt(i)str.indexOf(c)str.substring(index1,index2)（2）常用验证）常用验证A、是否为空是否为空：利用字符串的：利用字符串的length属性来判断。属性来判断。B、长度验证长度验证：同上：同上C、日期验证日期验证54WEBWEB系统开发与设计系统开发与设计日期验证流程日期验证流程查找分

55、隔符找分隔符是否找到是否找到？返回返回falsefalse否否获取年取年份份查找第二找第二个个分隔分隔符符是否找到是否找到？是是否否获取月和日取月和日是是判判断断年月日是否整年月日是否整数数否否判判断数断数字范字范围正确否正确否是是否否返回返回truetrue是是利用利用indexOf()indexOf()利用利用substring()substring()编写编写isNumber()isNumber()55WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入4 4、常用方法和常用验证、常用方法和常用验证D、整数验证、整数验证E、E-mail格式验证格式验证56WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入5 5、常用方法和常用验证、常用方法和常用验证（3）正则表达式）正则表达式自学自学57WEBWEB系统开发与设计系统开发与设计第第0303章章 输入输入实验：实验：（1）完成注册表单的制作以及信息验证）完成注册表单的制作以及信息验证（2）提高篇：采用正则表达式的方法实现验证）提高篇：采用正则表达式的方法实现验证58WEBWEB系统开发与设计系统开发与设计结束结束