第一部分web开发前奏第02章html、javascript简介事件处理

JAVAWEB开发实战经典第2章：HTML、JavaScript简介

——事件处理李兴华北京魔乐科技软件学院本章目标掌握JavaScript中的主要事件使用；掌握JavaScript与表单的操作；掌握正则表达式在JavaScript中的使用。一个简单的事件处理程序<html> <!--HTML开始标记--><head> <!--头标记--> <title>，MLDN高端Java培训</title><!--文档标题信息--> <scriptlanguage="JavaScript"> <!--使用JavaScript语言--> functionhello(){ //定义函数 alert("欢迎您的光临！"); //打印欢迎信息 } functionbyebye(){ //定义函数 alert("您要走了？下次别来了！"); } </script></head> <!--完结标记--><bodyonLoad="hello()"onUnLoad="byebye()"> <!--网页主体--></body> <!--完结标记--></html> <!--完结标记-->单击事件<html> <!--HTML开始标记--><head> <!--头标记--> <title>，MLDN高端Java培训</title><!--文档标题信息--> <scriptlanguage="JavaScript"> <!--使用JavaScript语言--> functionfun(){ //定义函数 alert("HelloWorld!!!"); //打印欢迎信息 } </script></head> <!--完结标记--><body> <!--网页主体--><h3><ahref="#"onClick="fun()">按我吧！</a></h3> <!--增加单击事件--></body> <!--完结标记--></html> <!--完结标记-->JavaScript与文本框的互操作<html> <!--HTML开始标记--><head> <!--头标记--> <title>，MLDN高端Java培训</title><!--文档标题信息--> <scriptlanguage="JavaScript"> <!--使用JavaScript语言--> functionshow(){ //定义函数 varvalue=.value;//取得输入的内容 alert("输入的内容是："+value); //打印欢迎信息 } </script></head> <!--完结标记--><body> <!--网页主体--><formaction=""method="post"name="myform"> <!--表单开始标记-->请输入内容：<inputtype="text"name="name"> <!--定义文本框--><inputtype="button"value="显示"onclick="show()"><!--显示内容--></form> <!--表单结束标记--></body> <!--完结标记--></html> <!--完结标记-->JavaScript使用正则表达式在JavaScript之中也可以使用正则表达式对输入的数据进行正则验证，格式如下所示：/正则表达式/.test(验证的内容)进行email输入的提交验证<html> <!--HTML开始标记--><head> <!--头标记--> <title>，MLDN高端Java培训</title><!--文档标题信息--> <scriptlanguage="JavaScript"> <!--使用JavaScript语言--> functionvalidate(f){ //定义函数，此时f就表示myform varvalue=f.email.value; //取得输入的内容 if(!/^\w+@\w+.\w+$/.test(value)){ //对输入内容验证 alert("EMAIL输入格式不正确！"); //弹出警告框 f.email.focus(); //让焦点定位到email框 f.email.select(); //选择全部内容 returnfalse; //返回false，表单不提交 } returntrue; //返回true，表单提交 } </script></head> <!--完结标记--><body> <!--网页主体--><!--表单开始标记，调用validate()函数进行验证，其中的this表示的是当前元素，即：此表单--><formaction=""method="post"name="myform"onSubmit="returnvalidate(this)"> EMAIL：<inputtype="text"name="email"> <!--定义文本框--> <inputtype="submit"value="提交"> <!--显示内容--></form> <!--表单结束标记--></body> <!--完结标记--></html> <!--完结标记-->操作单选钮和复选框——A<html> <!--HTML开始标记--><head> <!--头标记--> <title>，MLDN高端Java培训</title><!--文档标题信息--> <scriptlanguage="JavaScript"> <!--使用JavaScript语言--> functionshow(){ //定义函数 varname=.value;//取得name的输入内容 alert("姓名："+name); varsex; //保存性别 if(document.myform.sex[0].checked){ //如果第一个元素被选中 sex=document.myform.sex[0].value; }else{ sex=document.myform.sex[1].value; } alert("性别："+sex); varinst=""; //保存兴趣 for(i=0;i<document.myform.inst.length;i++){ if(document.myform.inst[i].checked){//判断是否被选中 inst+=document.myform.inst[i].value+"、"; } } alert("兴趣："+inst); } </script></head> <!--完结标记--><body> <!--完结标记-->操作单选钮和复选框——B<formaction=""method="post"name="myform">

<!--表单开始标记-->

姓名：

<inputtype="text"name="name"><br>

性别：

<inputtype="radio"name="sex"value="男"checked>男

<inputtype="radio"name="sex"value="女">女<br>

兴趣：

<inputtype="checkbox"name="inst"value="唱歌">唱歌

<inputtype="checkbox"name="inst"value="游泳">游泳

<inputtype="checkbox"name="inst"value="跳舞">跳舞

<inputtype="checkbox"name="inst"value="编程"checked>编程

<inputtype="checkbox"name="inst"value="上网">上网<br>

<inputtype="button"value="显示"onClick="show()"></form>

<!--表单结束标记--></body>

<!--完结标记--></html>

<!--完结标记-->城市选择<html> <!--HTML开始标记--><head> <!--头标记--> <title>，MLDN高端Java培训</title><!--文档标题信息--> <scriptlanguage="JavaScript"> <!--使用JavaScript语言--> functionshow(val){ //定义函数 document.myform.result.value=val;//修改文本框的显示 } </script></head> <!--完结标记--><body> <!--网页主体--><formaction=""method="post"name="myform"> <!--表单开始标记--> 部门： <selectname="dept"onChange="show(this.value)"> <optionvalue="技术部">技术部</option> <optionvalue="销售部">销售部</option> <optionvalue="财务部">财