Скачать презентацию 专题五 Java Script 专题五 Java Script 本章内容 5
7ddd6322d2d52615074d23762ba93710.ppt
- Количество слайдов: 130
Скачать презентацию 专题五 Java Script 专题五 Java Script 本章内容 5
Скачать презентацию 专题五 Java Script 专题五 Java Script 本章内容 5
专题五 Java. Script
专题五：Java. Script 【本章内容】 5. 1 Java. Script 语法基础 5. 2 Java. Script 核心语言对象 5. 3 Java. Script 中的浏览器对象 5. 4处理表单和表单元素事件 网站建设与网页设计
5. 1节 Java. Script 语法基础 网站建设与网页设计
一、逻辑结构介绍（2） 2. 层次型结构 主页 相对于按先后顺序组织 而成的线性结构，层次型 网页 1 网页 2 网页 3 结构是按照网页之间的包 含关系组织而成的。图 2 -4 所示的就是一个典型的层 网 页 11 网 页 22 网 页 31 次型结构，它很像一棵倒 置的树。 网站建设与网页设计 图 2 -4 层次型结构
目标 理解什么是 Java. Script 如何将 Java. Script 嵌入到 HTML 中 理解变量、数据类型和运算符 掌握 if-else 和 switch 语句 网站建设与网页设计
什么是Java. Script 3 -1 验证 Jeny 帐户详细信息 Jeny 想在银行存钱 瑞士银行 Jeny Smiss dollar 一万元整 Swiss Bank Florida, USA A/c No. 010077 “ 67 89 005 ’ 11’ 00’ 89 J. 90” ’ 778 $- 10, 000/ s Smis. . 帐户验证完毕 Jeny Smiss 网站建设与网页设计 帐号 签名 余额
什么是Java. Script 3 -2 同样， 帐户 Id： 密码： Jeny@hotmail. com 错误消息 年龄： *** 密码不能 ****** 少于六位 ! 24 OK 国家： 请等待，正在 US 创建您的帐户 提交 Jeny 想创建一个电子邮件帐户 这样，Java. Script 将验证数据并给出错误信息（如有） 网站建设与网页设计
运算符 q 运算符对一个或多个变量或值（操作数）进行运算，并 返回一个新值 q 根据所执行的运算，运算符可分为以下类别： 算术运算符 比较运算符 逻辑运算符 网站建设与网页设计
算术运算符-1 实现步骤： 1. 使用Dream. Weaver设计页面 2. 指定各个文本框的名称 3. 切换为代码视图，编写脚本代码 4. 浏览并调试 num 1 num 2 result 网站建设与网页设计
算术运算符-2 <HEAD> <SCRIPT language = "Java. Script"> function calcu( ) { 获取表单中输入的数据： document. 表单名. 表单元素名. value 定义calcu( )计算函数, 实现两个数 相乘的功能. 定义函数的语法： function 函数名(参数列表) { //Java. Script语句； } var numb 1= document. calc. num 1. value; var numb 2= document. calc. num 2. value; var total=parse. Float(numb 1)*parse. Float(numb 2); document. calc. result. value=total; } </SCRIPT> </HEAD> 计算总价并显示 添加单击事件，单击按钮时调用“calcu()” 函数 … <INPUT name="get. Answer" TYPE="button" on. Click="calcu( )" value=" 计算看看"> 网站建设与网页设计
比较运算符 2 -1 运算符 说明 示例 == 等于。 如果两个操作数相等，则返回真。 a==b != 不等于。 如果两个操作数不相等，则返回真。 Var 2 != 5 > Var 1 > var 2 大于。 如果左边的操作数大于右边的操作数， 则返回真。 < Var 2 < var 1 小于。 如果左边的操作数小于右边的操作数， 则返回真。 <= Var 2 <= 4 小于等于。 如果左边的操作数小于或等于右边的 Var 2 <= var 1 操作数，则返回真。 >= 大于等于。如果左边的操作数大于或 Var 1 >= 5 Var 1 >= var 2 等于右边的操作数，则返回真。 网站建设与网页设计
比较运算符 <HTML> <HEAD> <SCRIPT LANGUAGE = "Java. Script"> function calcu() { var numb 1= document. calc. num 1. value; var numb 2= document. calc. num 2. value; var total= parse. Float(numb 1)*parse. Float(numb 2); document. calc. result. value=total; 购买总价超过500， if (total>500) 赠送超级Q币2枚！ alert("购买总价超过500n支付时将赠送超级Q币2枚！"); } </SCRIPT> </HEAD> …. 其他代码略，同上例 网站建设与网页设计
运算符 逻辑运算符 值 说明 与 ( &&) expr 1 && expr 2 只有当 expr 1 和 expr 2 同为真时，才返回真。 否则，返回假。 或 ( || ) expr 1 || expr 2 如果其中一个表达式为真，或两个表达式同 为真，则返回真。否则，返回假。 非 (!) !expr 如果表达式为真，则返回假。如果为假，则 返回真。 网站建设与网页设计
逻辑运算符 <HEAD> <SCRIPT LANGUAGE = "Java. Script"> function calcu() { var numb 1= document. calc. num 1. value; var numb 2= document. calc. num 2. value; var total= parse. Float(numb 1)*parse. Float(numb 2); document. calc. result. value=total; if ((total>500) &&(total<=1000)) alert("购买总价超过500n支付时将赠送超级Q币2枚！"); if ((total>1000) &&(total<=2000)) alert("购买总价超过1000n支付时将赠送IBM光电智能鼠标1只！"); if ((total>2000)) 500－1000 之间，赠送超级Q币两枚； alert("购买总价超过2000n请直接与贵宾台联系！"); 1000－2000之间，赠送IBM智能鼠标一只； } 2000以上，直接与贵宾台联系。 </SCRIPT> </HEAD>…. 其他代码略，同上例 网站建设与网页设计
if 语句 2 -1 条件语句用于测试条件。 语法： if(条件) { Java. Script代码; } 如果要执行多个语句，必须将这些语句放在一对大括号 ({ }) 内。 但如果只要执行一个语句，则可以省略大括号 网站建设与网页设计
<HEAD> <SCRIPT LANGUAGE = "Java. Script"> function calcu() { var numb 1= document. calc. num 1. value; var numb 2= document. calc. num 2. value; if ((numb 1!="") && (numb 2!="")) { var total= parse. Float(numb 1)*parse. Float(numb 2); document. calc. result. value=total; if ((total>500) &&(total<=1000)) alert("购买总价超过500n支付时将赠送超级Q币2枚！"); if ((total>1000) &&(total<=2000)) alert("购买总价超过1000n支付时将赠送IBM光电智能鼠标1只！"); if ((total>2000)) 如果输入框中的数据用户漏填了， alert("购买总价超过2000n请直接与贵宾台联系！"); 出现Na. N的 bug 为什么呢? } } </SCRIPT> </HEAD>…. 其他代码略，同上例 网站建设与网页设计
嵌套 if 语句 2 -1 语法： if (条件 1) { if (条件 2) { //Java. Script代码; } } 网站建设与网页设计
嵌套If语句 2 -2 <SCRIPT LANGUAGE = "Java. Script"> function calcu() { var numb 1= document. calc. num 1. value; var numb 2= document. calc. num 2. value; if ((numb 1!="") && (numb 2!="")) { if (parse. Float(numb 1)<0) { alert("竞拍价格不能小于零！n请重填"); return; //函数返回，不再执行后面的代码 } if (parse. Float(numb 2)<0) 购买数量无意中输入负 { 数，出现 bug 怎么办? alert("购买数量不能小于零！n请重填"); return; } var total= parse. Float(numb 1)*parse. Float(numb 2); document. calc. result. value=total; 18 网站建设与网页设计 …. .
switch 语句 2 -1 语法： switch (表达式) { case 常量 1 : Java. Script语句; break; case 常量 2 : Java. Script语句; break; . . . default : Java. Script语句; } 网站建设与网页设计
总结 网页中嵌入脚本有两种方式：使用<Script>标签或外部 *. js文件 Java. Script 中声明变量：var 变量名 “+”可以用于两个数相加，还可以用于连接字符串 parse. Int() 和 parse. Float() 函数将字符串分别转换为整型和小数 运算符号分为算术运算符、比较运算符、逻辑运算符 条件语句分为if语句，if-else语句、if的嵌套 多分支语句switch根据表达式的值，进入不同的分支执行 网站建设与网页设计
5. 2节 Java. Script 核心语言对象 网站建设与网页设计
回顾 声明一个变量x，初值为 10，对应的js代码？ alert(10+” 30”)；显示为什么效果？ 将字符串转换为整数，使用哪个函数？ var x=“c”，var y; switch（x） { case “a”: y=5; case ‘b’ : y=6; default: y=0; } 网站建设与网页设计 指出代码错误
目标 使用数组 使用循环语句控制应用程序 创建自定义函数 理解 Java. Script 对象 使用 String、Math 和 Date 等对象 网站建设与网页设计
数组 4 -1 声明数组 var 数组名=new Array(数组大小); 例： var emp=new Array(3) 添加元素 emp AA emp[0] = “AA"; BB emp[1] = “BB"; CC emp[2] = “CC"; 也可以声明数组并赋初值： 例： var emp=new Array(“AA”，“BB”，“CC”)； 网站建设与网页设计
数组 4 -2 <HTML> <HEAD> <TITLE>使用数组</TITLE> <SCRIPT LANGUAGE = "Java. Script"> var emp = new Array(3); emp[0] = "Ryan Dias"; emp[1] = "Graham Browne"; emp[2] = "David Greene"; document. write("数组emp中的数据为: <HR>"); document. write(emp[0]+"<BR>"); document. write(emp[1]+"<BR>"); document. write(emp[2]+"<BR>"); </SCRIPT> </HEAD> </HTML> 网站建设与网页设计
数组 4 -3 常用属性 length ：返回数组中元素的个数 常用方法（参照Javascript函数集锦） 方法 Join() Reverse() Sort() 说明 将数组中的元素组合成字符串 颠倒数组元素的顺序，使第一个元素成为最后一个，而最 后一个元素成为第一个 对数组元素进行排序 网站建设与网页设计
数组排序 4 -4 <HTML> <HEAD> <SCRIPT LANGUAGE = "Java. Script"> var emp = new Array(3); emp[0] = "Ryan Dias"; emp[1] = "Graham Browne"; emp[2] = "David Greene"; emp. sort( ); document. write(“排序结果是：<HR>"); document. write(emp[0]+"<BR>"); document. write(emp[1]+"<BR>"); document. write(emp[2]+"<BR>"); </SCRIPT> </HEAD> </HTML> 网站建设与网页设计
循环 for循环 do-while 网站建设与网页设计
for 循环 q for循环 例： var i; for (i=0; i<10; i++) { // 语句; } 网站建设与网页设计
for 循环 如何实现 网站建设与网页设计
for 循环 <HTML> <HEAD> <TITLE>For 循环演示</TITLE> <SCRIPT LANGUAGE = "Java. Script"> document. write("<H 2 align=center>打印金字塔直线</H 2>"); for (var i= 0; i<100; i=i+5) document. write("<HR align=center width=" + i+"%>"); </SCRIPT> 当i=5 时，<HR align=center width=5％> </HEAD> <BODY> </HTML> 网站建设与网页设计
for 循环 如何实现 网站建设与网页设计
while和do－while循环 q while循环 while(循环条件) { //语句； } q do－while循环 do { //语句； }while(循环条件); 网站建设与网页设计
while和do－while循环 输入一个字符，直到N停止，用 哪个循环 网站建设与网页设计
while和do－while循环 <HEAD> <STYLE type="text/css">. myfont { font-size: 150; color: #c 99 c 96; font-family: Webdings //产生埃及图像的特殊字体 } </STYLE> <script language="Java. Script"> document. write("<H 3>每个字符都对应一个漂亮的埃及图像</H 3>"); do 先执行，后判断循环条件 { var c = prompt("输入一个字符，输入N 或n停止", "A") ; document. write ("<font class=myfont >"+c+"</font>"); }while (c !="N" && c !="n"); </SCRIPT> 35 网站建设与网页设计 </HEAD>
Java. Script 函数 内置函数 eval 函数：用于计算字符串表达式的值 is. Na. N 函数：用于验证参数是否为 Na. N（非数字） 网站建设与网页设计
Java. Script 函数 Java. Script 代码 <SCRIPT LANGUAGE = "Java. Script"> var str 1=prompt("输入一个表达式，我给您计算", "1+1"); var result=eval(str 1); document. write(str 1+"="+result); var x = prompt("输入一些数据", "0"); if (is. Na. N(x)) alert (x + " 不是一个数字"); else alert (x + " 是一个数字"); </SCRIPT> 37 网站建设与网页设计
自定义函数： function 函数名( 参数 1, 参数 2，… ) { 语句; } function sum ( one, two) { var result = one + two; return result; } 表示单击此按钮时， 调 用 调用函数sum( )执 函 数 ： 行 函数调用一般和表单元素的事件一起使用，调用格式为： <INPUT name=“add” type=“button” value=“加法" 事件名＝“函数名” ; on. Click="sum(2，5)"> 网站建设与网页设计
自定义函数： function 函数名( 参数 1, 参数 2，… ) { 语句; } function sum ( one, two) { var result = one + two; return result; } 表示单击此按钮时， 调 用 调用函数sum( )执 函 数 ： 行 函数调用一般和表单元素的事件一起使用，调用格式为： <INPUT name=“add” type=“button” value=“加法" 事件名＝“函数名” ; on. Click="sum(2，5)"> 网站建设与网页设计
定义函数 <HEAD> <SCRIPT language="Java. Script" > 定义函数compute( )，完成 function compute(op) 计算的功能。op参数代表运 { Java. Script 代码 算符号 var num 1, num 2; num 1=parse. Float(document. myform. num 1. value); num 2=parse. Float(document. myform. num 2. value); if (op=="+") document. myform. result. value=num 1+num 2 ; if (op=="-") document. myform. result. value=num 1 -num 2 ; if (op=="*") document. myform. result. value=num 1*num 2 ; if (op=="/" && num 2!=0) document. myform. result. value=num 1/num 2 ; } </SCRIPT> 40 </HEAD> 网站建设与网页设计
调用函数 <FORM action="" method="post" name="myform" > <P>第一个数<INPUT name="num 1" type="text"> <BR>第二个数<INPUT name="num 2" type="text"> </P><P> <INPUT name="add. Button" type="button" value="＋" on. Click="compute('+')"> <INPUT name="sub. Button" type="button" value="－" on. Click="compute('-')"> <INPUT name="mul. Button" type="button" value="×" on. Click="compute('*')"> <INPUT name="div. Button" type="button" value="÷" on. Click="compute('/ ')"> </P> <P>计算结果 <INPUT name="result" type="text"> </P></FORM> 网站建设与网页设计
Java. Script 对象简介 2 -1 对象是属性和/方法的组合 属性是对象所拥有的一组外观特征，一般为名词 方法是对象可以执行的功能，一般为动词 对象：汽车 例如：汽车 Ferrari 属性：型号：法拉利 颜色：绿色 方法：前进、刹车、倒车 网站建设与网页设计
Java. Script 对象简介2 -2 q三类对象 浏览器窗口window l文档 document lurl地址等 l 浏览器对象 脚本对象 HTML 对象 网站建设与网页设计 String字符串对象 l. Date日期对象 l. Math数学对象等 l 各种HTML标签: l段落<P> l图片<IMG> l超链接<A>等
String 对象 3 -1 创建字符串有两种不同方法 ： 使用 var 语句 var newstr = “这是我的字符串" 创建 String 对象 var newstr = new String (“这是我的字符串") 网站建设与网页设计
String 对象 3 -2 名称 返回字符串的长度 增大字符串文本 blink( ) 使字符串闪烁(IE不支持) bold( ) 加粗字符串文本 fontcolor( ) 确定字体颜色 italics( ) 用斜体显示字符串 index. Of(“子字符串”，起始位置 ) 查找子字符串的位置 strike( ) 显示加删除线的文本 sub( ) 将文本显示为下标 Substr(m, n ) 求子串 to. Lower. Case( ) 将字符串转换成小写 to. Upper. Case( ) 方法 length big( ) 属性 说 明 将字符串转换成大写 网站建设与网页设计
String 对象 3 -2 string. Object. Index. Of(searchvalue, fromindex) 参数 描述 searchvalue 必需。规定需检索的字符串值。 fromindex 可选的整数参数。规定在字符串中开始检索的位置。 它的合法取值是 0 到 string. Object. length - 1。如省 略该参数，则将从字符串的首字符开始检索。 网站建设与网页设计
String 对象 3 -3 检查电子邮件email 是否包含“@”和”. ” 网站建设与网页设计
String 对象 3 -3 <SCRIPT LANGUAGE = "Java. Script"> function check. Email( ) { var e=document. myform. email. value; if (e. length==0) //检测长度是否为 0，即是否为空 { 返回结果-1表示没 alert("电子邮件不能为空!"); 找到“@”字符 return ; } if (e. index. Of("@", 0)==-1) //检测是否包含”@”符号 { alert("电子邮件格式不正确n必须包含@符号！"); return ; } if (e. index. Of(". ", 0)==-1) //检测是否包含”. ”符号 { alert("电子邮件格式不正确n必须包含. 符号！"); return ; } 48 document. write("恭喜您！，注册成功！欢迎进入古城热线！"); } 网站建设与网页设计
Math 对象 2 -1 名称 PI ∏ 的值， 约等于 3. 1415 LN 10 10 的自然对数的值，约等于 2. 302 E 属性 说明 Euler 的常量的值，约等于 2. 718。Euler 的常 量用作自然对数的底数 返回 y 的绝对值 abs(y) Math. random( ) ：产生 0－1的随机小数 返回 y 的正弦，返回值以弧度为单位。 sin (y) Math. round( )： 四舍五入取整，如9. 34 取整为 9 返回 y 的余弦，返回值以弧度为单位 cos (y) Math. floor(): 取整数部分 返回 y 的正切，返回值以弧度为单位 tan (y) min (x, y) max (x, y) 49 返回 x 和 y 两个数中较大的数 random 方法 返回 x 和 y 两个数中较小的数 返回[0 -1)的随机数 round (y) 四舍五入取整 sqrt (y) 网站建设与网页设计 返回 y 的平方根
Math 对象 2 -2 如何实现 假定随机产生的数字i=3，上述代码即为： <IMG width=640 height=433 src=3. jpg> 显示第三幅图片（3. jpg） 网站建设与网页设计
Math 对象 2 -2 <HTML> 每隔 2秒刷新网页 <HEAD> <META http-equiv="refresh" content="2"> <TITLE>自动刷新</TITLE> Math. round(Math. random( )*8+1) <SCRIPT language="Java. Script" > document. write("2秒自动刷新，随机显示图片"); 产生 1 -9的数字 var i=0; i=Math. round(Math. random( )*8+1); document. write("<IMG width=640 height=433 src="+ i +". jpg>"); </SCRIPT> 假定随机产生的数字i=3，上述代码即为： </HEAD> <IMG width=640 height=433 src=3. jpg> <BODY> 显示第三幅图片（3. jpg） </BODY> </HTML> 网站建设与网页设计
Date 对象 10 -1 Date 对象存储的日期为自 1970 年 1 月 1 日 00: 00 以来的毫秒数 var 日期对象 = new Date (年、月、日等参数) 例： var mydate=new Date( “July 29, 1998, 10: 30: 00 ”) 如果没有参数，表示当前日期和时间 例： var today = new Date( ) 网站建设与网页设计
Date 对象 10 -2 q. Data 方法的分组： 方法分组 说 明 setxxx 这些方法用于设置时间和日期值 getxxx 这些方法用于获取时间和日期值 Toxxx 这些方法用于从 Date 对象返回字符串值 parsexxx & UTCxx 这些方法用于解析字符串 网站建设与网页设计
Date 对象 10 -3 q用作 Date 方法的参数的整数： 值 整数 Seconds 和 minutes 0 至 59 Hours 0 至 23 Day 0 至 6（星期几） Date 1 至 31（月份中的天数） Months 0 至 11（一月至十二月） 网站建设与网页设计
Date 对象 10 -4 q. Set 方法： 方法 说明 set. Date 设置 Date 对象中月份中的天数，其值介于 1 至 31 之间。 set. Hours 设置 Date 对象中的小时数，其值介于 0 至 23 之间。 set. Minutes 设置 Date 对象中的分钟数，其值介于 0 至 59 之间。 set. Seconds 设置 Date 对象中的秒数，其值介于 0 至 59 之间。 set. Time 设置 Date 对象中的时间值。 set. Month 设置 Date 对象中的月份，其值介于 1 至 12 之间。 网站建设与网页设计
Date 对象 10 -5 q. Get 方法： 方法 说明 get. Date 返回 Date 对象中月份中的天数，其值介于 1 至 31 之间 get. Day 返回 Date 对象中的星期几，其值介于 0 至 6 之间 get. Hours 返回 Date 对象中的小时数，其值介于 0 至 23 之间 get. Minutes 返回 Date 对象中的分钟数，其值介于 0 至 59 之间 get. Seconds 返回 Date 对象中的秒数，其值介于 0 至 59 之间 get. Month 返回 Date 对象中的月份，其值介于 0 至 11 之间 get. Full. Year 返回 Date 对象中的年份，其值为四位数 get. Time 返回自某一时刻（1970 年 1 月 1 日）以来的毫秒数 网站建设与网页设计
Date 对象 10 -6 q. To 方法： 方法 说明 To. GMTString 使用格林尼治标准时间 (GMT) 数据格式将 Date 对 象转换成字符串表示 To. Locale. String 使用当地时间格式将 Date 对象转换成字符串表示 q. Parse 方法和 UTC 方法 方法 说明 Date. parse (date string ) 用日期字符串表示自 1970 年 1 月 1 日以来的毫秒数 Date. UTC (year, month, day, hours, min. , secs. ) Date 对象中自 1970 年 1 月 1 日以来的毫秒数 网站建设与网页设计
Date对象 10 -7 <HTML> <BODY> 获得当前日期和时间 <script language="java. Script"> var now= new Date( ); 获得小时，即当前是几点 var hour = now. get. Hours( ); if (hour>=0 && hour <=12) document. write("上午好!") 判断上午、下午还是晚上 if (hour>12 && hour<= 18) document. write("下午好!"); if (hour>18 && hour <24) 如何实现 document. write("晚上好!"); document. write("<P>今天日期: "+now. get. Year()+"年“ +(now. get. Month( )+1)+"月"+now. get. Date()+"日"); document. write("<P>现在时间: "+now. get. Hours()+"点"+now. get. Minutes( )+"分"); </script> 月份数字 0－11，注意＋1 </body> </HTML> 58 网站建设与网页设计
Date对象 10 -8 set. Timeout的用法： set. Timeout（“调用的函数”, ”定时的时间”） 每隔 1000毫秒调用函数 例： disptime( )执行 关闭定时器 var my. Time＝set. Timeout（”disptime( )”, 1000）; clear. Timeout（my. Time）; 本例的时间可以采用定时显示，使用定时器函 数，每隔 1秒调用disptime( )函数显示时间 网站建设与网页设计
<SCRIPT language="Java. Script"> Java. Script 代码 function disptime( ) { Date 对象 10 -8 获得小时、分钟、秒 var time = new Date( ); //获得当前时间 var hour = time. get. Hours( ); //获得小时、分钟、秒 var minute = time. get. Minutes( ); var second = time. get. Seconds( ); 根据 12小时制调整时间 var apm="AM"; //默认显示上午: AM 和AM/PM标志 if (hour>12) //按12小时制显示 无边框的文本框myclock { hour=hour-12; var my. Time = set. Timeout("disptime( )", 1000); apm="PM" ; 设置定时器每隔 1秒（1000毫秒），调用函数disptime( )执行， } 刷新时钟显示 if (minute < 10) //如果分钟只有1位，补 0显示 确保分钟和秒显示 minute="0"+minute; 位数为 2 位 if (second < 10) //如果秒数只有1位，补 0显示 second="0"+second; document. myform. myclock. value= hour+": "+minute+": "+ second+" "+apm; 使用定时器函数，每 var my. Time = set. Timeout("disptime( )", 1000); 隔 1秒调用disptime( ) } 60 函数刷新显示 网站建设与网页设计 </SCRIPT>
Date对象 10 -10 <STYLE type="text/css"> <!-/*设置样式：无边框的文本框*/ 设置样式：无边框的文本框 INPUT { font-size: 50 px; color: #CC 0000; border-style: none } --> </STYLE> 61 网站建设与网页设计 Onload ( ) 事件，页面加载 就调用函数：disptime （显示时间）
总结 Array对象常用的属性是length，排序方法：sort 循环语句分为：for 循环、while循环、do-while循环 Eval( )函数可以计算某个计算表达式的值， is. Na. N( )函数可用于判断是否是一个数字 String对象的index. Of( )方法用于查找子字符串 Math对象的random( )方法可以产生 0－1的随机数 Date对象有setxxx( )方法用于设置日期和时间，getxxx( )方法用于获得日期和时间 网站建设与网页设计
5. 3节 Java. Script 中的浏览器对象 网站建设与网页设计
回顾 定义数组a，大小为 10，存放的数据分别是 1 -10，对应的js代码为？ 希望知道数组的大小，使用哪个属性？ 代码阅读，请问输出结果是多少？ <SCRIPT language="Java. Script"> var a="3" , b="4"; alert (is. Na. N(a)); alert (a+"+"+b ); alert (eval(a+"+"+b) ); </SCRIPT> 网站建设与网页设计
回顾 代码阅读，请问输出结果是多少？ <SCRIPT language="Java. Script"> var s="abcdefg" ; alert ( s. index. Of("cd", 0) ) ; alert (s. substr(1, 2)) ; alert (Math. round(9. 38)) ; var now=new Date( ); alert (now. get. Month( )) ; </SCRIPT> 网站建设与网页设计
目标 理解事件处理程序的概念 了解Java. Script 中的常用事件 掌握常用的浏览器对象： window document history 网站建设与网页设计
事件处理 q事件是发生并得到处理的操作 事件：电话振铃 网站建设与网页设计 处理事件
Java. Script 事件处理程序就是一组语句，在事件（ 如点击鼠标或移动鼠标等）发生时执行 事件处理程序的基本语法是： 事件名=" Java. Script 代码或调用函数" 例如： <INPUT type=”BUTTON” … on. Click=“alert(“单击我！”); ”> <INPUT type=”BUTTON” … on. Mouse. Down=“check( )”> 表示鼠标按下时，将调用执行函数check( ) 。 事件 处理事件 网站建设与网页设计
Java. Script 事件 事件名 说明 on. Click 鼠标单击 on. Change 文本内容或下拉菜单中的选项发生改变 on. Focus 获得焦点，表示文本框等获得鼠标光标。 on. Blur 失去焦点，表示文本框等失去鼠标光标。 on. Mouse. Over 鼠标悬停，即鼠标停留在图片等的上方 on. Mouse. Out 鼠标移出，即离开图片等所在的区域 on. Mouse. Move 鼠标移动，表示在<DIV>层等上方移动 on. Load 网页文档加载事件 on. Submit 表单提交事件 on. Mouse. Down 鼠标按下 on. Mouse. Up 鼠标弹起 网站建设与网页设计
on. Focus和on. Blur 事件-1 <HEAD> 文本框获得鼠标焦点时（ <SCRIPT language="Java. Script" > on. Focus）调用的函数： function myfun 1( ) 清空卡号文本框 { card if (document. myform. card. value=="请注意格式： 10 xxxxxx") document. myform. card. value="" ; } pass 文本框失去鼠标焦点时（ function myfun 2( ) on. Blur）调用的函数： { 判断格式是否正确 myform var a=document. myform. card. value; if (a. substr(0, 2)!="10" || is. Na. N(a)) { focus( )方法 alert("格式错误，请重新输入") ; document. myform. card. focus(); 再次获得焦点，即鼠标 } 光标回到卡号文本框 } </SCRIPT> </HEAD> 70 网站建设与网页设计
on. Focus和on. Blur 事件-2 <STYLE type="text/css"> <!-input { background-color: #55 FFFF; font-size: 20 px; border: 1 px solid; } --> </STYLE> 网站建设与网页设计 表单元素<INPUT>样式
on. Focus和on. Blur 事件-2 <BODY> <FORM name="myform"> <H 2>卡号： 添加事件处理 <INPUT name = card type = text on. Focus="myfun 1( ) " value="请注意格式： 10 xxxxxx" on. Blur="myfun 2( )" > <BR> 密码： <INPUT name=pw type = text > </H 2> </FORM> </BODY> 网站建设与网页设计
on. Mouse. Over和on. Mouse. Out 网站建设与网页设计
on. Mouse. Over和on. Mouse. Out <HTML> on. Mouse. Over="src='dog 2. jpg'" 添加事件处理 ： 表示本图片的图片名称替换为dog 2. jpg。 <HEAD> 切换图片 请注意： <TITLE>图片切换</TITLE> 由于外面两端已有双引号，为区别起见，dog 2. jpg改用为单 </HEAD> 引号括起来。 <BODY> <A href="http: //www. mycom. cn"> <IMG src=“dog 1. jpg” name=“picture” width=“ 400” height=“ 155” on. Mouse. Over=“ src=‘dog 2. jpg’ ” on. Mouse. Out=“ src=‘dog 1. jpg’ ”> 低价转让哈士奇弟弟 </A> <H 1> 移过来看看俺啊</H 1> </BODY> </HTML> 网站建设与网页设计
浏览器对象简介 2 -1 Window 窗口对象 http: //www. google. com location 地址对象 浏览器对象的分层结构 document 文档对象 form 表单对象 网站建设与网页设计 window. document. myform. text 1
浏览器对象简介 2 -2 q浏览器对象的分层结构 网站建设与网页设计
Window 对象 7 -1 q属性 名称 说明 document 表示给定浏览器窗口中的 HTML 文档。 history 包含有关客户访问过的URL的信息。 location 包含有关当前 URL 的信息。 name 设置或检索窗口或框架的名称。 status 设置或检索窗口底部的状态栏中的消息。 screen 包含有关客户端的屏幕和显示性能的信息。 网站建设与网页设计
Window 对象 7 -2 网站建设与网页设计
Window 对象 7 -2 q方法 名称 说明 alert (“m提示信息") 显示包含确定的对话框。 ！ confirm（“提示信息”） 显示一个确认对话框，包含确定和取消按钮。 ？ Prompt（”提示信息“） 显示一个输入对话框，提示等待用户输入。 open ("url", "name") 打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一 个空白文档 close ( ) 关闭当前窗口 set. Timeout(”函数”, 毫秒数 设置定时器：经过指定毫秒值后执行某个函数 ) clear. Timeout(定时器对象) 网站建设与网页设计
Window 对象 7 -3 网站建设与网页设计
Window 对象 7 -3 <HTML> <HEAD> 使用 Open 方法 因为window是最顶层的根，所以可以省略 <SCRIPT> 打开新窗口 window. open("google. htm"); function openwindow( ) { 可简写为： window. open("google. htm"); Close 方法 使用 } close（）方法也是如此。 关闭窗口 function closewindow( ) { window. close ( ); } 添加单击事件 </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE=button VALUE="打开窗口" on. Click="openwindow()"> <INPUT TYPE=button VALUE="关闭窗口" on. Click="closewindow()"> </FORM> 81 网站建设与网页设计 <BODY>
Window 对象 7 -4 网站建设与网页设计
Window 对象 7 -4 open（”打开窗口的url”，”窗口名”，”窗口特征”） 窗口的特征如下，可以任意组合： height： 窗口高度； width： 窗口宽度； top： 窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值； toolbar： 是否显示 具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable： 是否允许改变窗口大小，yes或 1为允许 location： 是否显示地址栏，yes或 1为允许 status：是否显示状态栏内的信息，yes或 1为允许； 网站建设与网页设计
Window 对象 7 -4 我们需要预先制作好广告页面，假设为adv. htm，打开广告窗 口的语句如下 ： open(“adv. htm”, “toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=650, height=150”); 网站建设与网页设计
Window 对象 7 -5 <HTML> <HEAD> 使用 Open 方法 <SCRIPT language="Java. Script" > 打开广告新窗口 function openwindow( ) { open("adv. htm", "toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=650, height=150"); } 添加页面加载事件 </SCRIPT> </HEAD> <BODY on. Load="openwindow( )"> <H 2>看看和我一起打开的广告窗口</H 2> </BODY> </HTML> 网站建设与网页设计
Window 对象 7 -6 1. 插入一个层Layer 1， z-index=1； 2. 层中插入一幅图片。 网站建设与网页设计
Window 对象 7 -6 3. 定时器函数set. Timeout （）的用法： set. Timeout（“调用的函数名”，间隔的毫秒数） 表示每隔多少毫秒，就循环调用某个函数来执行 清除某个定时器：clear. Timeout（）方法。 例如： var myclock＝set. Timeout（”move( )”, 500）; if (…) clear. Timeout（myclock）; ； 网站建设与网页设计
Window 对象 7 -7 <head> get. Element. By. Id(“ID名称”) 方法：根据ID名称获取HTML元素， <script language=Java. Script> 这里表示获取层对象Layer 1。定义层图片移动 function move( ) 的函数move( ) left和top表示层Layer 1的左边距和上边距，设定为随机的值。 { document. get. Element. By. Id("Layer 1"). style. left= Math. random()*500; document. get. Element. By. Id("Layer 1"). style. top= Math. random()*500; set. Timeout("move()", 1000); 每隔 1秒调用move( )函数 } 随机改变层的位置，从而 </script> </head> 实现随机漂浮的效果 <body onload="move( )""> <DIV id="Layer 1" style="position: absolute; left: 14 px; top: 44 px; width: 150 px; height: 102 px; z-index: 1"> <A href="http: //www. mycom. cn"><IMG src="piaofu. jpg" width="150" height="100" border="0"></A> </DIV> <H 2>随机漂浮的广告</H 2> </BODY> 88 网站建设与网页设计
Document 对象 3 -1 q属性 名称 说明 alink. Color 设置或检索文档中所有活动链接的颜色 bg. Color 设置或检索 Document 对象的背景色 body 指定文档正文的开始和结束 link. Color 设置或检索文档链接的颜色 location 包含关于当前 URL 的信息 title 包含文档的标题 url 设置或检索当前文档的 URL vlink. Color 设置或检索用户访问过的链接的颜色 网站建设与网页设计
Document 对象 3 -2 q方法 名称 说明 clear ( ) 清除当前文档 close ( ) 关闭输出流并强制显示发送的数据 write ("text") 将文本写入文档 网站建设与网页设计
Document 对象 3 -3 <HTML> <HEAD> <TITLE>无标题文档</TITLE> <SCRIPT language="Java. Script"> function change(color) 利用document对象的 { document. bg. Color=color ; bg. Color属性改变背景色 } </SCRIPT> </HEAD> <BODY> <H 2> 移过来我变色给你看看！</H 2> 添加鼠标悬停事件 <FONT size=4> <SPAN on. Mouse. Over="change('red')">变红色</SPAN>| <SPAN on. Mouse. Over="change('blue')">变蓝色</SPAN>| <SPAN on. Mouse. Over="change('yellow')">变黄色</SPAN> </FONT> </BODY> 91 网站建设与网页设计
History对象 4 -1 history 对象 方法 名称 说明 back() 加载 History 列表中的上一个 URL。 forward() 加载 History 列表中的下一个 URL。 Back ( ) 方法相当于后退按钮 go("url" or 加载 History 列表中的一个 URL，或要 forward number)( ) 方法相当于前进按钮 求浏览器移动指定的页面数。 go (1)代表前进 1页，等价于forward( )方法； go(-1) 代表后退1页，等价于back( )方法； 网站建设与网页设计
Location对象 4 -2 Location 对象 属性 名称 说明 host 设置或检索位置或 URL 的主机名和端口号 hostname 设置或检索位置或 URL 的主机名部分 href 设置或检索完整的 URL 字符串 q方法 名称 说明 assign("url") 加载 URL 指定的新的 HTML 文档。 reload() 重新加载当前页 replace("url") 通过加载 URL 指定的文档来替换当前文档 网站建设与网页设计
History对象和Location 对象 4 -3 网站建设与网页设计
History对象和Location对象 4 -3 下拉菜单 menu 1 网站建设与网页设计
History 和Location 对象 4 -4 <script language="Java. Script" > 根据用户的选择， function jump ( ) 修改跳转的网址 { location. href=document. myform. menu 1. value; } </script> </HEAD> <BODY> <FORM name="myform"> 添加选项改变事件. . . <SELECT name="menu 1" on. Change="jump( )" > <OPTION>---请选择季节景色--</OPTION> <OPTION value="spring. htm">春天美景</OPTION> <OPTION value="summer. htm">夏天一色</OPTION> … 96 网站建设与网页设计
总结 Java. Script 程序是事件驱动程序 on. Focus获得焦点事件，表示获得鼠标光标， on. Blur失去焦 点事件，刚好与之相反 浏览器对象是一个分层次的结构，window是顶层的根对象 打开窗口使用window对象的open( )方法 设置定时器，使用window对象的set. Timeout( )方法 location对象的back( )和forward( )方法等同于前进、后 退按钮 网站建设与网页设计
5. 4节处理表单和表单元素事件 网站建设与网页设计
回顾 常用的浏览器对象有哪些？ 希望在网页打开时，就伴随弹出广告窗口，应使用什么事 件？打开广告窗口使用window对象的哪个方法？ history对象的哪个方法相当于IE浏览器中的后退按钮？ 希望动态改变网页的背景色，应使用哪个对象的bg. Color属 性？ IE的地址栏对应哪个浏览器对象？它用来保存网页的地址 信息 网站建设与网页设计
目标 使用与以下各项关联的事件处理程序 ： 文本框 文本区域 命令按钮 复选框 单选按钮 组合框 编写用于验证表单的 Java. Script 代码 网站建设与网页设计
事件处理程序和表单元素简介 2 -1 q当事件发生时，将执行与之相关的 Java. Script 代码 <INPUT type=“button” value=“注册" on. Click="button_click()"> 当发生特定事件时，事件处理程序指定要执行哪些 Java. Script 代码 网站建设与网页设计
事件处理程序和表单元素简介 2 -2 <SCRIPT LANGUAGE = "Java. Script"> function button_click() { alert(“请向本网站注册); } </SCRIPT> <INPUT type=“button” value=“注册“ 当用户单击“注册”按钮时，将弹出一条消息。 on. Click="button_click()"> 网站建设与网页设计
文本框对象 q 文本框元素用于在表单中输入字、词或一系列数字 q 可以通过将 HTML 的 INPUT 标签中的 type 设置为 “text”，以创建文本框元素 < INPUT type="text" 网站建设与网页设计 name="t 1" >
文本框对象–事件处理程序 on. Blur 事件 on. Change 文 本 框 文本框失去焦点 文本框的值被修改 on. Focus focus( ) 方法 光标进入文本框中 获得焦点，即获得鼠标光标 select( ) 选中文本内容，突出显示输入区域 属性 readonly 网站建设与网页设计 只读，文本框中的内容不能修改
文本框对象 card myform price number tot 网站建设与网页设计
文本框对象 添加无边框样式 网站建设与网页设计
<SCRIPT language="Java. Script"on. Focus事件调用的函数clear. Text（）清空 > function clear. Text( ) 帐号文本框中的内容 { if (document. myform. card. value=="输入您的会员帐号") document. myform. card. value="" ; on. Blur事件调用的函数check（）检查输入的帐 } 号是否是“ 10”打头，并且是数字 function check( ) { var a=document. myform. card. value; if (a. substr(0, 2)!="10" || is. Na. N(a)) { alert("格式错误，请重新输入") ; document. myform. card. focus( ); document. myform. card. select( ); } on. Change事件调用的函数compute( )用来计 } 算总价 function compute( ) { var price= document. myform. price. value; var number= document. myform. number. value ; 107 document. myform. tot. value= price*number; 网站建设与网页设计 } 文本框对象-on. Change事件处理程序
文本框对象 <BODY> 帐号文本框添加on. Focus和 <FORM name="myform"> on. Blur焦点事件. . . . <TD>帐号： <INPUT name ="card" on. Focus="clear. Text( )“ on. Blur="check( )" 价格只读属性 type = text value="输入您的会员帐号“></TD>. . . . <TD>单价： <INPUT name ="price" type = text value="25. 00” readonly >￥</TD>. . . . <TD>数量： <INPUT name ="number" on. Change="compute( )“ type = text >个</TD> <TD>总价： 数量文本框添加on. Change事件 <INPUT name ="tot" type = text value="0. 00" >￥</TD>. . . . </BODY> 网站建设与网页设计
命令按钮对象 q命令按钮对象是网页中最常用的元素之一 <INPUT type="submit" name="button 1" value="提交"> <INPUT type="reset" name="button 2" value="重置"> <INPUT type="button" name="button 3" value="计算"> 网站建设与网页设计
按钮 - 事件处理程序 表单元素 事件处理程序 说明 on. Submit 表单提交事件，单击“提交”按钮时产生， 此事件属于<FORM>元素，不属于提交 按钮 on. Click 按钮单击事件 命令按钮 on. Submit事件处理代码： <FORM on. Submit=”return 调用函数名”>…</FORM> 如果函数返回true，则向远程服务器提交表单； 如果函数返回false，则取消提交。 网站建设与网页设计
命令按钮事件处理程序 myform user. Name pass 1 pass 2 type=reset type=submit 网站建设与网页设计
function check( ) { on. Submit事件调用的函数：输入数据检查 var user. Name= document. myform. user. Name. value; var pass 1= document. myform. pass 1. value; var pass 2=document. myform. pass 2. value; if (pass 1==pass 2) { if (pass 1. length!=0) { <BODY> document. write("<H 2>恭喜您，注册成功！欢迎 <FORM name="myform" on. Submit="return check( )" > "+user. Name+"光临！</H 2>"); return true; } 如果输入格式正确，返回 else true，提交表单信息； { 如果格式错误，返回false， alert("密码不能为空！n请输入密码"); 取消提交，提醒用户重填 return false; } } else { alert("确认码必须和输入的密码相同！"); return false; } } 112 命令按钮对象 网站建设与网页设计
复选框对象 q当用户需要在选项列表中选择多项时，可以使用复选 框对象 q要创建复选框对象，请使用 <INPUT> 标签 请选择您的爱好 <INPUT type=“checkbox” value=“电影”> 电影 <INPUT type=“checkbox” value=“上网”> 上网 网站建设与网页设计
复选框 - 事件处理程序 on. Blur 事件 on. Focus on. Click 复选框 属性 checked value 网站建设与网页设计 复选框失去焦点 复选框获得焦点 复选框被选定或取消选定 复选框是否被选中，选中 为true，未选中为false。 您可以使用此属性查看复 选框的状态或设置复选框 是否被选中 设置或获取复选框的值
复选框 - 事件处理程序 myform checkbox 1 checkbox 2 设置复选框的值 网站建设与网页设计 checkbox 3 checkbox 4
复选框 - 事件处理程序 单击”成交“按钮调用的函数： <HEAD> 检查每个复选框的选中情况， <SCRIPT language="Java. Script"> 累计用户选中的商品 function buy( ) { var s=""; if (document. myform. checkbox 1. checked==true) //如果被选中 <INPUT type="button" value=" 成 交>> " //累计选中的商品 s=s+document. myform. checkbox 1. value+“n”; on. Click="buy( )“ > if (document. myform. checkbox 2. checked==true) s=s+document. myform. checkbox 2. value+"n"; <PRE>是为了原样显示字 if (document. myform. checkbox 3. checked==true) 符串中的换行”n”格式 s=s+document. myform. checkbox 3. value+"n"; if (document. myform. checkbox 4. checked==true) s=s+document. myform. checkbox 4. value+"n"; // if(confirm("您定购了以下物品，确定吗？：n"+s)==true) document. write("您定购了以下物品: <PRE>"+s+"</PRE>"); } </SCRIPT> 网站建设与网页设计
复选框改进-事件处理程序 <SCRIPT language="Java. Script"> function buy( ) 2. 使用数组和for循环 { 大大简化代码 var s=""; for (var i=0; i< document. myform. mybox. length; i++) { //判断第i个复选框是否被选中 if (document. myform. mybox[i]. checked==true) s=s+document. myform. mybox[i]. value+"n"; } if(confirm("您准备购买以下物品，确定吗？：n"+s)==true) document. write("您购买了以下物品: <PRE>"+s+"</PRE>"); } 1. 修改每个复选框的名称都为mybox，使 </SCRIPT> 这 4个复选框构成一个数组mybox //…其他代码略 <INPUT name="mybox" type="checkbox" id="mybox" value="国服魔兽 金币"> //…其他代码略 117 网站建设与网页设计
单选按钮对象 q 当用户只需要从选项列表中选择一个选项时，可以使 用单选按钮对象 q 要创建单选按钮对象，请使用 <INPUT> 标签 <INPUT type=“radio” value=“M”>男 <INPUT type=“radio” value=“F”>女 网站建设与网页设计
单选按钮 - 事件和属性 on. Blur on. Focus 单选按钮获得焦点 on. Click 事件 单选按钮失去焦点 单选按钮被选定或取消选 定 单选按钮 属性 checked value 网站建设与网页设计 单选按钮是否被选中，选 中为true，未选中为false。 您可以使用此属性查看单 选按钮的状态或设置单选 按钮是否被选中 设置或获取单选按钮的值
单选按钮-事件处理程序 为了保证单选，两个单选按钮的名称 都为myradio，组成了myradio数组 网站建设与网页设计
下拉列表框 <SELECT name="myselect" > <OPTION>--请选择开户帐号的城市--</OPTION> <OPTION value="北京市">北京市</OPTION> <OPTION value="上海市">上海市</OPTION> <OPTION value="重庆市">重庆市</OPTION> <OPTION value="天津市">天津市</OPTION> <OPTION value="四川省">四川省</OPTION> <OPTION value="山东省">山东省</OPTION> <OPTION value="湖北省">湖北省</OPTION> </SELECT> 网站建设与网页设计
下拉列表框-事件和属性 on. Blur 事 on. Change 件 on. Focus 下 拉 列 表 框 value 属 性 options selected. Index 网站建设与网页设计 下拉列表框失去焦点 当选项发生改变时产生 下拉列表框获得焦点 下拉列表框中，被选选项的值 所有的选项组成一个数组，options 表示整个选项数组，第一个选项即 为options[0]，第二个即为options[1]， 其他以此类推 返回被选择的选项的索引号，如果 选中第一个返回 0，第二个返回 1， 其他类推
![下拉列表框-事件和属性 value属性：被选中选项的值 options[0] options[1] options 选项数组 selected. Index属性： 表示被选中的索引号： 3 网站建设与网页设计](https://present5.com/presentation/7ddd6322d2d52615074d23762ba93710/image-123.jpg "下拉列表框-事件和属性 value属性：被选中选项的值 options[0] options[1] options 选项数组 selected. Index属性： 表示被选中的索引号： 3 网站建设与网页设计")
下拉列表框-事件和属性 value属性：被选中选项的值 options[0] options[1] options 选项数组 selected. Index属性： 表示被选中的索引号： 3 网站建设与网页设计
下拉列表框 -事件处理程序 网站建设与网页设计
下拉列表框- 事件处理程序 user. Name myselect myform 网站建设与网页设计 mycity
<SCRIPT language="Java. Script" > function myfun 1( ) 下拉列表框on. Change事件调用的函数：判 { 断选择的省份是否是直辖市 var d=document. myform. myselected. Index; if (d==1 || d==2 || d==3 || d==4) // 北京、上海、重庆、天津 document. myform. city. value= document. myform. myselect. options[d]. text ; } function myfun 2( ) 单击”快速注册“图片时调用的函数 { myfun 2( )，显示注册信息 var user. Name=document. myform. user. Name. value; var province=document. myform. myselect. value ; var city=document. myform. city. value ; <SELECT name="myselect" on. Change="myfun 1( )"> document. write("<body bg. Color=#FFFAEB>"); document. write("<H 2>您的注册信息如下：</H 2>"); ……. document. write("<HR>"); on. Click="myfun 2( )"> <IMG src="reg. bmp" document. write("<P>姓名："+user. Name); document. write("<P>帐号开户省份："+province); document. write("<P>帐号开户城市："+city); } </SCRIPT> 126 网站建设与网页设计 下拉列表框- 事件处理程序
表单验证 2 -1 q. Java. Script 最常见的用法之一就是验证表单 q对于检查用户输入是否存在错误和是否疏漏了必选项， Java. Script 是一种十分便捷的方法 网站建设与网页设计
<SCRIPT LANGUAGE="Java. Script"> function validate( ) { var f=document. reg_form; if(f. uname. value=="") { 检查姓名 alert("请输入姓名"); f. uname. focus(); return false; } if (f. gender[0]. checked==false && f. gender[1]. checked==false) { alert("请指定性别"); 检查性别 f. gender[0]. focus(); return false; } if ((f. password. value. length < 6) || (f. password. value == "")) { alert("请输入至少 6 个字符的密码！"); 检查密码 f. password. focus(); return false; 128 网站建设与网页设计 } 表单验证 2 -2
表单验证 2 -2 q=f. email. value. index. Of("@"); 检查邮件地址 if (q==-1) { alert("请输入有效的电子邮件地址"); f. email. focus(); return false; } <FORM name="reg_form" on. Submit="return validate()" if (f. age. value<1 || f. age. value> 99 || is. Na. N(f. age. value)) action="submit. htm"> { 检查年龄 alert("请输入有效的年龄！"); f. age. focus(); return false; } } </SCRIPT> 129 网站建设与网页设计
总结 On. Blur、on. Change 和 On. Focus 是一些与表单对象相关的 事件处理程序 在浏览器窗口中，如果文本框获得焦点，则会调用 on. Focus 事件处理程序 当对象失去焦点或光标退出对象时，将执行 on. Blur 事件 处理程序 当修改文本框内容或改写下拉列表框的选项时，则会调用 on. Change 事件处理程序 Java. Script的主要功能之一是用于表单验证 网站建设与网页设计
Скачать презентацию 专题五 Java Script 专题五 Java Script 本章内容 5
7ddd6322d2d52615074d23762ba93710.ppt