《javascript经典案例.ppt》由会员分享，可在线阅读，更多相关《javascript经典案例.ppt（64页珍藏版）》请在三一办公上搜索。
1、1.String,2.,3.,4.,目 录,第二讲 表单验证及事件,String对象,常用的String对象使用 var 语句 var newstr=这是我的字符串创建 String 对象 var newstr=new String(这是我的字符串“)调用方法和属性 字符串对象.属性名 字符串对象.方法名(),String对象,String对象常用的属性和方法,语法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置；如果没找到，返回 1例如：var xvar y=“abcdefg”;x=y.indexOf(“c”,0);/返回结果为2，起始位置是0,数值判断函数,数值
2、判断函数功能：判断变量的值是否为数值，“NaN”代表“Not a Number”，若返回值为true，则表示自变量不是数值。语法：isNaN(测试值),数学(Math)对象,数学(Math)对象方法：abs()返回某数的绝对值 acos()返回某数的反余弦值(以弧度为单位)asin()返回某数的反正弦值(以弧度为单位)atan()返回某数的反正切值(以弧度为单位)ceil()返回大于或等于指定数的最小整数 floor()与ceil相反 max()返回两数间的较大值 min()返回两数间的较小值 pow()返回m的n次方(其中,m为底,n为指数)random()返回0和1之间的一个伪随机数 ro
3、und()返回某数四舍五入之后的整数,日期时间(Date)对象,格式：对象名=new Date(日期参数)举例：today=new Date()/以当日时间为对象初值。,日期时间(Date)对象方法:,getYear()返回年份值 getMonth()返回月份值 getDate()并返回日期 getDay()返回星期几 getHours()返回小时数 getMinutes()返回分钟数 getSeconds()返回秒数 getTime()返回完整的时间 setDate()改变Date对象的日期 setHours()改变小时数 setMinutes()改变分钟数 setMonth()改变月份 s
4、etSeconds()改变秒数 setTime()改变完整的时间 setYear()改变年份 setTimeout 按照间隔时间(毫秒)来调用函数,日期时间(Date)对象,月份数为（0-11）日期数为（1-31）星期数为（0-6）小时数为（0-23）分钟数为（0-59）秒数为（0-59）毫秒数为（0-999）,Date对象做时钟显示,function disptime()var now=new Date();var hour=now.getHours();if(hour=0,获得当前日期和时间,获得小时，即当前是几点,月份数字011，注意1,Date对象做时钟显示,上一页PPT示例中时钟不能
5、动态改变，怎么办？,由于时间在不停地走，所以应该每隔1秒调用显示时间的方法。如何解决？,使用setTimeout()方法每隔1秒调用显示时间的方法,setTimeout的用法：setTimeout（“调用的函数”,”定时的时间”）例：var myTimesetTimeout(“disptime()”,1000);,每隔1000毫秒执行函数disptime()一次,Date对象做时钟显示,function disptime()var time=new Date();/获得当前时间 var hour=time.getHours();/获得小时、分钟、秒 var minute=time.getMin
6、utes();var second=time.getSeconds();=hour+:+minute+:+second+;var myTime=setTimeout(disptime(),1000);当前时间：,设置文本框的内容为当前时间,设置定时器每隔1秒(1000毫秒),调用函数disptime()执行,小结2,编写如左图所示，具有在网页中指定位置显示动态时钟效果的页面。,自动动态变化的时钟,为什么需要表单验证,服务器,IE,脚本在客户端执行，减轻服务器端的压力,发送请求,返回响应,发送请求,返回响应,发送请求,返回响应,表单验证的内容-1,不能为空且不能有数字,不能为空且不能有数字,不能
7、为空，且只能包括字母、数字和下划线字符,表单验证的内容-2,不能为空且包含字符和.,只能二选一,年月日不能为空，且不能超出其要求的范围,表单验证的思路,如何编写脚本验证表单？,1、获取表单元素的值（String类型），然后进行判断,2、触发表单（FORM）的提交事件（onSubmit）,表单验证的思路,检查电子邮件email是否包含“”和”.”,function checkEmail()var strEmail=;if(strEmail.length=0)alert(电子邮件不能为空!);return false;if(strEmail.indexOf(,0)=-1)alert(电子邮件格式不
8、正确n必须包含符号！);return false;if(strEmail.indexOf(.,0)=-1)alert(电子邮件格式不正确n必须包含.符号！);return false;return true;,返回结果-1表示没找到“”字符,获取表单元素的值,表单的提交事件,表单验证的思路,表单验证的思路,function checkUserName()/验证用户名 var fname=;if(fname.length!=0)for(i=0;i 0)alert(名字中包含数字 n+请删除名字中的数字和特殊字符);return false else alert(请输入“名字”文本框);();re
9、turn false return true;,验证用户名不能包含数字,获取表单元素的值,表单验证的思路,function passCheck()/验证密码var userpass=;if(userpass=)alert(未输入密码 n+请输入密码);();return false;if(userpass.length,验证密码不少于6位,获取表单元素的值,表单验证的思路,function validateform()if(checkUserName(),同时调用验证用户名和验证密码方法,表单的提交事件,触发表单提交事件,小结 1,编写如下图所示，实现登录表单的验证功能,文本框控件,如何实现如
10、下图所示，完善电子邮件的例子。,用户单击时,邮箱的提示信息自动清除,提示电子邮件格式不对,输入的信息自动被选中并高亮显示,文本框控件,文本框对象的常用属性、方法、事件,使用文本框对象的相关方法，实现选中效果,文本框控件,.function clearText()if(=“请输入真实的电子邮箱，我们将 发送激活密码)=;=red;*必填,清空文本框的内容,修改文本框的颜色,文本框获得焦点就调用方法clearText(),小结 2,编写如下图所示，实现注册表单的验证功能,年份必须是20打头,日期必须在1到31之间,常见错误-1,function validateform()if(sNameChec
11、k(),提交按钮type=submit,清空按钮type=reset,常见错误-2,function validateform()if(sNameCheck(),onsubmit不是登录按钮的事件,常见的事件,如何使用图片代替提交按钮,为了美观，现把提交按钮变成图片，但仍然保持表单的验证功能？如何实现？,使用图片的单击事件。onClick=checkForm(),如何使用图片代替提交按钮,根据上述分析和提供的素材页面来实现表单验证。,素材页面,function checkForm()if(=0)alert(用户名不能为空！);();,检验是否为空,单击事件，调用表单验证函数,如何使用图片代替提
12、交按钮,能进行表单验证，但即使是正确填写了表单，也不能提交页面（点击“注册”没反映）。,如何使用图片代替提交按钮,因为图片不具备“提交”按钮的提交功能，所以需要人工调用提交方法 submit()。,function checkForm()if(=0)alert(用户名不能为空！);();else();,查看源代码,如果表单输入合法，则提交表单,制作回车切换输入的效果,输入完毕后回车，默认会提交表单。页面效果如何制作回车Tab切换效果？页面效果,keyCode代码,制作回车切换输入的效果,1、使用键盘输入事件onKeyDown事件 2、检查输入是否是回车键ASCII码13，若是则将 输入改为Ta
13、b键ASCII码9,function changeFocus()if(event.keyCode=13)event.keyCode=9;,键盘按下，调用实现Tab效果的函数,修改回车键为Tab键,Event事件对象包含输入键信息,制作回车切换输入的效果,上述注册页面中，需要给每个文本框添加键盘按下事件，有没有更简单的办法？,keyCode：得到在键盘上按下的键srcElement：.type 得到标签类型.tagname 得到标签名称,event对象,制作回车切换输入的效果,通过给document对象添加键盘事件。,function changeFocus()if(event.keyCode=
14、13/调用表单的onKeyDown事件,如果按键是回车键，并且控件类型不是提交、重置按钮等按钮，则变为Tab切换,document对象的onKeyDown事件，它将接收页面中所有的键盘事件,数组与级联列表框,预习检查,什么是省市级联特效？在JavaScript中，如何定义一维数组Array？在JavaScript中，是否支持二维数组？,本章任务,演示示例1：页面效果,演示示例2：页面效果,制作通用的省市级联效果,制作学期、课程级联效果,会使用下拉列表框控件实现省市级联功能会使用数组优化省市级联功能,本章目标,下拉列表框,得到选择项的索引（从0开始）表单名.列表名.selectedIndex;清
15、空列表项 表单名.列表名.options.length=0;创建选项 Option1=new Option(选项名,选项值);增加选项 表单名.列表名.options.add(Option1);,实现简单的省市级联功能,如何实现省市级联的效果？,页面效果,1、利用省份下拉框的选项改变事件onChange2、根据用户选择的省份，动态添加城市下拉框的值,onChange选项/内容改变事件,动态添加城市选项Option,实现简单的省市级联功能,演示实现步骤：1、添加省份、城市下拉框（演示素材）,省份下拉框名称selProvince,表单名称myform,省份下拉框选项option,城市下拉框名称se
16、lCity,实现简单的省市级联功能,演示实现步骤：2、查看生成的HTML代码,.-请选择开户帐号的省份-四川省 山东省 湖北省.-请选择开户帐号的城市-.,多个选项构成选项数组options,选项Option,城市下拉框暂时没有具体的城市选项,实现简单的省市级联功能,演示实现步骤：3、添加动态改变城市选项的changeCity()函数,function changeCity()var province=;var newOption1,newOption2;switch(province)case 四川省:newOption1=new Option(成都市,chengdu);newOption2
17、=new Option(泸州市,luzhou);break;case 湖北省:document.myform.selCity.options.length=0;document.myform.selCity.options.add(newOption1);document.myform.selCity.options.add(newOption2);,2、根据用户选择的省份，动态创建城市下拉框选项,1、获取用户选择的省份,3、清除原有的选项,4、将选项添加到选项数组options,查看源代码,实现简单的省市级联功能,演示实现步骤：4、选择下拉框的onChange事件，调用事件函数,-请选择开户
18、帐号的省份-四川省 山东省 湖北省,当用户选择不同的省份时，将调用函数，改变城市下拉框的选项,查看源代码,实现简单的省市级联功能,小结下拉框控件SELECT：常用属性lengthvalueoptionsselectedIndex常用事件onChangeonBluronFocus,选项数组1、每个选项Option可以动态创建new Option(”显示内容”，“值”)2、动态添加选项selCity.options.add(newOption1）3、清除选项selCity.options.length=0,读取或设置被选项的索引号，第一个为0，其他类推,选项改变事件,小结1,实现学期、课程的级联,
19、学期第一学期第二学期第二学年,各学期对应课程第一学期：HTML、C#基础第二学期：Sqlserver、Ado.Net第二学年：A、XML,数组对象,格式：对象名=new Array(元素个数)或 对象名=new Array(值1,值2,)例如：fruit=new Array(2)声明了有2个元素的数组 fruit=new Array(“苹果”,”橘子”)声明了有2 个数组元素的数组，并赋值。属性：index：数组元素的索引值 length：数组长度(数组元素个数)。方法：join()：将数组内的所有值组合成一个字符串，并用特定符号分开。toString()：以字符串来表示数组和数组值。reve
20、rse()：将数组内元素的索引次序翻转过来,使用数组优化省市级联功能,每个省实际上有很多城市、并且城市数量不等，有没有更简单、通用的办法？,var newOption1,newOption2;switch(province)case 四川省:newOption1=new Option(成都市,chengdu);newOption2=new Option(泸州市,luzhou);break;case 湖北省:newOption1=new Option(武汉市,wuhan);newOption2=new Option(襄樊市,xiangfan);break;case 山东省:newOption1=
21、new Option(青岛市,qingdao);newOption2=new Option(烟台市,yantai);,如果有很多城市，就需要定义很多变量，编写很多重复的代码,解决办法：使用数组！,使用数组优化省市级联功能,JavaScript中的数组用法：,var emp=new Array(3);emp0=Ryan Dias;emp1=Graham Browne;emp2=David Greene;emp.sort();document.write(排序结果是：);for(var i in emp)document.write(empi+);,1、创建数组对象new Array(大小),2、
22、为数组赋值。数组中可存放任意数据,3、调用数组的方法sort()进行排序,4、循环输出，等同：for(var i=0;iemp.length;i+),使用数组优化省市级联功能,JavaScript中的数组用法：,var cityList=new Array();cityList0=成都,绵阳,德阳,自贡,泸州;cityList1=济南,青岛,威海,日照;cityList2=武汉,宜昌,恩施,潜江;document.write(四川省包括的城市是：);for(var j in cityList0)document.write(cityList0j+);,1、创建数组，可以不指定大小,2、为数组赋
23、值。每个单元格可以是数组。JavaScript不支持二维数组,3、循环输出.0-表示四川省的索引号，同理可以换为山东省索引号1,使用数组优化省市级联功能,用数组优化解决省市级联问题：,一维数组:cityList,数组索引号,1,下拉框索引号selectedIndex,1、用数组存放每个省份包含的城市,2、根据用户选择的省份索引号，找到对应的数组索引号,3、根据对应的数组内容，添加城市选项到城市下拉框中,使用数组优化省市级联功能,用数组优化解决省市级联问题：,function changeCity()var cityList=new Array();cityList0=成都,绵阳,德阳,自贡,泸
24、州;cityList1=济南,青岛,日照;cityList2=武汉,宜昌,潜江;var pIndex=document.myform.selProvince.selectedIndex-1;var newOption1;document.myform.selCity.options.length=0;for(var j in cityListpIndex)newOption1=new Option(cityListpIndexj,cityListpIndexj);document.myform.selCity.options.add(newOption1);,1、创建数组，存放各省份对应城市,
25、2、根据用户选择的省份索引号，获取对应数组索引号,4、根据数组内容创建选项，并添加到城市下拉框,3、清空原下拉框内容,小结2,用数组优化学期、选修课程的级联。,各学期对应课程第一学期：HTML、Java、SqlServer基础、C#第二学期：JavaScript、SqlServer高级、ASP.Net第二学年：刘德华、李宇春、曾轶可,使用文字下标的数组再次优化,使用索引号必须要求省份的排列顺序和数组编号相同。,cityList0=成都,.泸州;cityList1=济南,日照;cityList2=武汉,潜江;cityList3=合肥,亳州;cityList4=东莞,珠海;cityList5=桂林
26、,贺州;cityList6=贵阳,遵义;,四川省 山东省 湖北省 安徽省 广东省 广西省 贵州省,当30多个省份罗列在一起时容易搞错对应关系，有没有更直观的办法?,使用文字下标的数组再次优化,1、JavaScript中的数组下标可以采用标识符代替。例如：cityList山东省=济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照;2、可以根据用户选择的value值，与数组下标标识 进行比较，从而找出该省包括的城市。,用文字下标的数组优化省市级联菜单：,使用文字下标的数组再次优化,function changeCity()var cityList=new Array();cityLi
27、st四川省=成都,绵阳,泸州;cityList山东省=济南,青岛,日照;cityList湖北省=武汉,宜昌,潜江;var pIndex=document.myform.selProvince.value;var newOption1;document.myform.selCity.options.length=0;for(var j in cityListpIndex)newOption1=new Option(cityListpIndexj,cityListpIndexj);document.myform.selCity.options.add(newOption1);,数组下标采用文字标识
28、符代替,根据省份下拉框的值，获取对应数组的索引标识,数组的读取和数字索引方式相同,常见错误,var Bookinfo=new Array(2)(4);Bookinfo00=“6-5333-0575-3”;Bookinfo01=“Ajax高级编程”Bookinfo02=“铁手”Bookinfo03=“人民邮电出版社”Bookinfo10=“6-5333-0575-8”;Bookinfo21=“精通正则表达式”Bookinfo32=“余晟”Bookinfo43=“电子工业出版社”,JavaScript中没有二维或二维以上数组,小结3,数组下标采用文字标识的方式，实现学期、课程的级联。,各学期对应课程第一学期：HTML、Java、SqlServer基础、C#第二学期：JavaScript、SqlServer高级、ASP.Net第二学年：刘德华、李宇春、曾轶可,
