Javascript经典案例分析

1.String2.3.4.目录第二讲表单验证及事件String对象常用的String对象使用var语句varnewstr=这是我的字符串创建String对象varnewstr=newString(这是我的字符串“)调用方法和属性字符串对象.属性名字符串对象.方法名()String对象名称说明属性length获取字符串字符的个数方法indexOf(“子字符串”，起始位置)查找子字符串的位置charAt(index)获取位于指定索引位置的字符substring(index1,index2)截取两个索引位置之间的字符串toLowerCase()将字符串转换成小写toUpperCase()将字符串转换成大写String对象常用的属性和方法语法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置；如果没找到，返回－1例如：varxvary=“abcdefg”;x=y.indexOf(“c”,0);//返回结果为2，起始位置是0数值判断函数数值判断函数功能：判断变量的值是否为数值，“NaN”代表“NotaNumber”，若返回值为true，则表示自变量不是数值。语法：isNaN(测试值)数学(Math)对象数学(Math)对象方法：abs()返回某数的绝对值acos()返回某数的反余弦值(以弧度为单位)asin()返回某数的反正弦值(以弧度为单位)atan()返回某数的反正切值(以弧度为单位)ceil()返回大于或等于指定数的最小整数floor()与ceil相反max()返回两数间的较大值min()返回两数间的较小值pow()返回m的n次方(其中,m为底,n为指数)random()返回0和1之间的一个伪随机数round()返回某数四舍五入之后的整数日期时间(Date)对象格式：对象名=newDate([日期参数])举例：today=newDate()//以当日时间为对象初值。日期时间(Date)对象方法:getYear()返回年份值getMonth()返回月份值getDate()并返回日期getDay()返回星期几getHours()返回小时数getMinutes()返回分钟数getSeconds()返回秒数getTime()返回完整的时间setDate()改变Date对象的日期setHours()改变小时数setMinutes()改变分钟数setMonth()改变月份setSeconds()改变秒数setTime()改变完整的时间setYear()改变年份setTimeout按照间隔时间(毫秒)来调用函数日期时间(Date)对象月份数为（0---11）日期数为（1---31）星期数为（0----6）小时数为（0---23）分钟数为（0---59）秒数为（0---59）毫秒数为（0---999）Date对象做时钟显示SCRIPTlanguage=javaScriptfunctiondisptime(){varnow=newDate();varhour=now.getHours();if(hour=0&&hour=12)document.write(H2上午好!/H2)if(hour12&&hour=18)document.write(H2下午好!/H2);if(hour18&&hour24)document.write(H2晚上好!/H2);document.write(H2今天日期:+now.getYear()+年+(now.getMonth()+1)+月+now.getDate()+日/H2);document.write(H2现在时间:+now.getHours()+点+now.getMinutes()+分/H2);}/SCRIPTBODYonload=disptime()获得当前日期和时间获得小时，即当前是几点月份数字0－11，注意＋1判断上午、下午还是晚上Date对象做时钟显示上一页PPT示例中时钟不能动态改变，怎么办？由于时间在不停地走，所以应该每隔1秒调用显示时间的方法。如何解决？使用setTimeout()方法每隔1秒调用显示时间的方法setTimeout的用法：setTimeout（“调用的函数”,”定时的时间”）例：varmyTime＝setTimeout(“disptime()”,1000);每隔1000毫秒执行函数disptime()一次Date对象做时钟显示SCRIPTlanguage=JavaScriptfunctiondisptime(){vartime=newDate();//获得当前时间varhour=time.getHours();//获得小时、分钟、秒varminute=time.getMinutes();varsecond=time.getSeconds();document.myform.myclock.value=hour+:+minute+:+second+;varmyTime=setTimeout(disptime(),1000);}/SCRIPTBODYonLoad=disptime()FORMNAME=myformH2当前时间：INPUTname=myclocktype=textvalue=size=10/H2/FORM/BODY设置文本框的内容为当前时间设置定时器每隔1秒(1000毫秒),调用函数disptime()执行小结2编写如左图所示，具有在网页中指定位置显示动态时钟效果的页面。自动动态变化的时钟为什么需要表单验证服务器IE脚本在客户端执行，减轻服务器端的压力客户端用户输入客户端用户输入……客户端用户输入……表单验证的内容-1不能为空且不能有数字不能为空且不能有数字不能为空，且只能包括字母、数字和下划线字符密码不能为空并且最少为6位，还要求两次输入的密码要一致表单验证的内容-2不能为空且包含字符@和.只能二选一年月日不能为空，且不能超出其要求的范围表单验证的思路如何编写脚本验证表单？1、获取表单元素的值（String类型），然后进行判断2、触发表单（FORM）的提交事件（onSubmit）表单验证的思路检查电子邮件email是否包含“@”和”.”SCRIPTLANGUAGE=JavaScriptfunctioncheckEmail(){varstrEmail=document.myform.txtEmail.value;if(strEmail.length==0){alert(电子邮件不能为空!);returnfalse;}if(strEmail.indexOf(@,0)==-1){alert(电子邮件格式不正确\n必须包含@符号！);returnfalse;}if(strEmail.indexOf(.,0)==-1){alert(电子邮件格式不正确\n必须包含.符号！);returnfalse;}returntrue;}/SCRIPT……FORMname=“myform”method=“post”action=“reg_success.htm”onSubmit=“returncheckEmail()”……INPUTname=registerButtontype=submitid=registerButtonvalue=注册……返回结果-1表示没找到“@”字符获取表单元素的值表单的提交事件表单验证的思路表单验证的思路SCRIPTlanguage=JavaScriptfunctioncheckUserName(){//验证用户名varfname=document.myform.txtUser.value;if(fname.length!=0){for(i=0;ifname.length;i++){varftext=fname.substring(i,i+1);if(ftext9||ftext0){alert(名字中包含数字\n+请删除名字中的数字和特殊字符);returnfalse}}}else{alert(请输入“名字”文本框);document.myform.txtUser.focus();returnfalse}returntrue;}……验证用户名不能包含数字获取表单元素的值表单验证的思路SCRIPTlanguage=JavaScript……functionpassCheck(){//验证密码varuserpass=document.myform.txtPassword.value;if(userpass==){alert(未输入密码\n+请输入密码);document.myform.txtPassword.focus();returnfalse;}if(userpass.length6){alert(密码必须多于或等于6个字符。\n);returnfalse;}returntrue;}……/SCRIPT……验证密码不少于6位获取表单元素的值表单验证的思路SCRIPTlanguage=JavaScript……functionvalidateform(){if(checkUserName()&&passCheck())returntrue;elsereturnfalse;}/SCRIPT……FORMname=myformonSubmit=returnvalidateform()“method=postaction=reg_success.htm……INPUTname=registerButtontype=submitid=registerButtonvalue=登录……同时调用验证用户名和验证密码方法表单的提交事件触发表单提交事件小结1编写如下图所示，实现登录表单的验证功能文本框控件如何实现如下图所示，完善电子邮件的例子。用户单击时,邮箱的提示信息自动清除提示电子邮件格式不对输入的信息自动被选中并高亮显示文本框控件文本框对象的常用属性、方法、事件使用文本框对象的相关方法，实现选中效果名称说明属性value设置或获取文本框的值方法focus()获得焦点select()选中文本内容，突出显示输入区域事件onFocus光标进入某个文本框脚本运行onBlur文本框失去焦点脚本运行onKeyPress当一个键按下并释放时去触发一个事件文本框控件SCRIPTLANGUAGE=JavaScript….functionclearText(){if(document.myform.txtEmail.value==“请输入真实的电子邮箱，我们将发送激活密码){document.myform.txtEmail.value=;document.myform.txtEmail.style.color=red;}}/SCRIPT……TDcolspan=2INPUTname=txtEmailtype=textclass=textBorderid=txtEmailvalue=请输入真实的电子邮箱，我们将发送激活密码size=40onFocus=clearText()style=color:#666666;*必填/TD……清空文本框的内容修改文本框的颜色文本框获得焦点就调用方法clearText()小结2编写如下图所示，实现注册表单的验证功能每个文本框非空密码和再次输入的密码必须相同年份必须是20打头日期必须在1到31之间常见错误-1SCRIPTlanguage=javascriptfunctionvalidateform(){if(sNameCheck()&&passCheck()&&bdaycheck())returntrue;elsereturnfalse;……}/SCRIPT……inputtype=buttonname=Buttonvalue=登录inputtype=butto