JavaScript（二）/JAVA网络编程 - 魔乐培训高端JAVA培训魔乐科技JAVA培训

3.3、操作事件（用在表单交互上）
对于JavaScript来说，大部分情况，所有的函数都是由事件触发的。
在JavaScript之中，所有的事件都是以onXxx命名的，例如，下面的程序完成如果用户打开此页面则提示欢迎信息，用户离开之后，则提示再见信息。
• 打开页面：onLoad，此事件存在于body元素里。
• 关闭页面：onUnload，此事件存在于body元素里。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  alert("您好，欢迎光临!") ;
}
function fun2(){
  alert("拜拜，别再来了!") ;
}
</script>
</HEAD>
<BODY onLoad="fun1()" onUnload="fun2()">
</BODY>
</HTML>
在JavaScript之中，还有事件就是单击事件：onClick，例如以下代码：
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  alert("我被击中了。.!") ;
}
</script>
</HEAD>
<BODY>
<h2><a href="#" onClick="fun1()">按我</a></h2>
<input type="button" onClick="fun1()" value="来吧">
</BODY>
</HTML>
事件的主要功能在表单交互上使用的是最频繁的，例如：现在定义一个表单，可以输入姓名，之后选择按钮，就可以进行信息的显示：
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  alert("姓名：" + document.myform.uname.value) ;
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
输入姓名：<INPUT TYPE="text" NAME="uname">
<input type="button" value="显示" onClick="fun1()">
</FORM>
</BODY>
</HTML>
既然是用户可以自己输入的信息，那么在之前的程序上就加上一个判断，如果输入的内容不为空，则显示，如果为空，则显示输入错误。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  if(document.myform.uname.value!=""){
   alert("姓名：" + document.myform.uname.value) ;
  }else{
   alert("请输入姓名！") ;
  }
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
输入姓名：<INPUT TYPE="text" NAME="uname">
<input type="button" value="显示" onClick="fun1()">
</FORM>
</BODY>
</HTML>
表单中可能包含单选钮，例如：性别。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  if(document.myform.uname.value!=""){
   alert("姓名：" + document.myform.uname.value) ;
  }else{
   alert("请输入姓名！") ;
  }
  if(document.myform.sex[0].checked){
   alert("性别：" + document.myform.sex[0].value) ;
  }else if(document.myform.sex[1].checked){
   alert("性别：" + document.myform.sex[1].value) ;
  }else{
   alert("性别：" + document.myform.sex[2].value) ;
  }
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
输入姓名： <INPUT TYPE="text" NAME="uname"><br>
选择性别： <INPUT TYPE="radio" NAME="sex" value="男" checked>男
    <INPUT TYPE="radio" NAME="sex" value="女">女
    <INPUT TYPE="radio" NAME="sex" value="中性">中性<br>
<input type="button" value="显示" onClick="fun1()">
</FORM>
</BODY>
</HTML>
注意：
如果在表单中出现了一组的相同名称的表单控件，则一定按照数组的方式进行处理。
在表单上再加上个人兴趣，一个人可能有多个兴趣：
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  if(document.myform.uname.value!=""){
   alert("姓名：" + document.myform.uname.value) ;
  }else{
   alert("请输入姓名！") ;
  }
  if(document.myform.sex[0].checked){
   alert("性别：" + document.myform.sex[0].value) ;
  }else if(document.myform.sex[1].checked){
   alert("性别：" + document.myform.sex[1].value) ;
  }else{
   alert("性别：" + document.myform.sex[2].value) ;
  }
  var s = "兴趣是：" ;
  for(var x=0;x<document.myform.inst.length;x++){
   if(document.myform.inst[x].checked){
    s += document.myform.inst[x].value + "、" ;
   }
  }
  alert(s) ;
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
输入姓名： <INPUT TYPE="text" NAME="uname"><br>
选择性别： <INPUT TYPE="radio" NAME="sex" value="男" checked>男
    <INPUT TYPE="radio" NAME="sex" value="女">女
    <INPUT TYPE="radio" NAME="sex" value="中性">中性<br>
选择兴趣： <INPUT TYPE="checkbox" NAME="inst" value="唱歌">唱歌
    <INPUT TYPE="checkbox" NAME="inst" value="跳舞">跳舞
    <INPUT TYPE="checkbox" NAME="inst" value="游泳">游泳<br>
<input type="button" value="显示" onClick="fun1()">
</FORM>
</BODY>
</HTML>
那么除了以上的事件之外，JavaScript中也提供了一些其他的事件：
• onChange：被改变的时候调用，在输入的文本框和下拉列表框上有此事件
例如：以下代码
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  alert("事件被调用") ;
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
输入姓名： <INPUT TYPE="text" NAME="uname" onChange="fun1()"><br>
输入密码： <INPUT TYPE="text" NAME="upass"><br>
选择城市： <SELECT name="city" onChange="fun1()">
     <OPTION VALUE="BJ">北京</OPTION>
     <OPTION VALUE="NJ">南京</OPTION>
    </SELECT>
</FORM>
</BODY>
</HTML>
• 失去焦点：onBlur
• 得到焦点：onFocus
例如：以下代码
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  alert("失去焦点！") ;
}
function fun2(){
  alert("得到焦点！") ;
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
输入姓名： <INPUT TYPE="text" NAME="uname" onBlur="fun1()" onFocus="fun2()"><br>
输入密码： <INPUT TYPE="text" NAME="upass"><br>
</FORM>
</BODY>
</HTML>
鼠标事件：鼠标经过、按下、松开
• onMouseOver：鼠标进入的时候调用
• onMouseOut：鼠标离开的时候调用
• onMouseUp：鼠标松开
• onMouseDown：鼠标按下
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  alert("mouse over") ;
}
function fun2(){
  alert("mouse out") ;
}
function fun3(){
  alert("mouse up") ;
}
function fun4(){
  alert("mouse down") ;
}
</script>
</HEAD>
<BODY>
<h1><a href="#" onMouseOver="fun1()">MOUSEOVER</a></h1>
<h1><a href="#" onMouseOut="fun2()">MOUSEOUT</a></h1>
<h1><a href="#" onMouseUp="fun3()">MOUSEUP</a></h1>
<h1><a href="#" onMouseDown="fun4()">MOUSEDOWN</a></h1>
</BODY>
</HTML>
在整个事件的操作中，程序员最应该关心的事件就是onSubmit事件，因为其直接与表单的验证有关联。例如：在用户输入表单的时候，如果输入的内容不正确，则不应该让表单进行提交，应该给予拦截。
例如：以下代码
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function validate(){
  if(document.myform.uname.value==""){
   alert("姓名不能为空！") ;
   return false ;
  }
  return true ;
}
</script>
</HEAD>
<BODY>
<FORM name="myform" action="success.htm" onSubmit="return validate()">
输入姓名：<INPUT TYPE="text" NAME="uname">
<input type="submit" value="提交">
</FORM>
</BODY>
</HTML>
以上程序已经完成了表单的验证，但是一般情况下，输入用户名都是有长度要求的，例如：6~15位。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function validate(){
  if(!(/\w{6,15}/.test(document.myform.uname.value))){
   alert("请输入合法的姓名") ;
   return false ;
  }
  return true ;
}
</script>
</HEAD>
<BODY>
<FORM name="myform" action="success.htm" onSubmit="return validate()">
输入姓名：<INPUT TYPE="text" NAME="uname">
<font color="red">长度为6~15位！</font><br>
<input type="submit" value="提交">
</FORM>
</BODY>
</HTML>
但是，以上代码中可以发现，在validate()函数里，到处都要写document.myform，所以此时，可以使用一个别名进行替换。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function validate(f){
  if(!(/\w{6,15}/.test(f.uname.value))){
   alert("请输入合法的姓名") ;
   return false ;
  }
  return true ;
}
</script>
</HEAD>
<BODY>
<FORM name="myform" action="success.htm" onSubmit="return validate(this)">
输入姓名：<INPUT TYPE="text" NAME="uname">
<font color="red">长度为6~15位！</font><br>
<input type="submit" value="提交">
</FORM>
</BODY>
</HTML>
注意：
对于取得表单输入信息的方法，也可以使用如下的语法格式：
• document.getElementById("表单元素ID") ;如果按照此语法编写，则在表单上要使用一个id属性的声明。AJAX中常用此语法。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function validate(f){
  alert(document.getElementById("name").value) ;
  if(!(/\w{6,15}/.test(f.uname.value))){
   alert("请输入合法的姓名") ;
   return false ;
  }
  return true ;
}
</script>
</HEAD>
<BODY>
<FORM name="myform" action="success.htm" onSubmit="return validate(this)">
输入姓名：<INPUT TYPE="text" NAME="uname" id="name">
<font color="red">长度为6~15位！</font><br>
<input type="submit" value="提交">
</FORM>
</BODY>
</HTML>
• onSelect事件：选择事件
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  alert("事件触发！！！") ;
}
</script>
</HEAD>
<BODY>
<FORM name="myform" action="success.htm">
输入姓名：<INPUT TYPE="text" NAME="uname" id="name" value="HELLO" onSelect="fun1()">
</FORM>
</BODY>
</HTML>
3.4、常用的函数
对于一些站点，尤其是邮箱，在用户打开页面的时候会自动把输入用户名的地方设置成焦点，等待用户输入，那么这个函数：focus()。
如果希望所有的内容被全部选中，则应该使用函数：select()
例如：以下程序在运行的时候就自动把一个文本框设置成焦点
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function init(){
  // 设置成焦点
  document.myform.uname.focus() ;
  // 将内容全部选中
  document.myform.uname.select() ;
}
function selall(t){
  // 选中全部内容
  t.select() ;
}
</script>
</HEAD>
<BODY onLoad="init()">
<FORM name="myform" action="success.htm">
<INPUT TYPE="text" NAME="uname" id="name" value="用户名" onFocus="selall(this)">
<INPUT TYPE="password" NAME="upass" id="pass" value="密码" onFocus="selall(this)">
<INPUT TYPE="submit" value="登陆">
</FORM>
</BODY>
</HTML>
3.5、window对象
窗口对象，表示与窗口有关的一切操作。
经常在站点发现有弹出窗口的情况。就是使用了window对象。
window中常用函数：
• open：表示打开一个页面
• close：表示关闭一个页面
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(url){
  window.open(url) ;
}
function fun2(){
  window.close() ;
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
<INPUT TYPE="button" value="打开窗口" onClick="fun1('JSDemo01.htm')">
<INPUT TYPE="button" value="关闭窗口" onClick="fun2()">
</FORM>
</BODY>
</HTML>
• location：表示页面重新定位到Xxx页面上去。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  window.location = document.myform.upage.value ;
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
<SELECT name="upage" onChange="fun1()">
  <option value="JSDemo01.htm">JSDemo01.htm</option>
  <option value="JSDemo03.htm">JSDemo03.htm</option>
  <option value="JSDemo05.htm">JSDemo05.htm</option>
</SELECT>
</FORM>
</BODY>
</HTML>
• confirm：确认框
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  if(window.confirm("确定要关闭此窗口吗？")){
   window.close() ;
  }
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
<input type="button" value="关闭窗口？" onClick="fun1()">
</FORM>
</BODY>
</HTML>
• prompt：窗口输入框
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun1(){
  var v = window.prompt("请输入内容","输入的内容") ;
  document.myform.bt1.value = v ;
}
</script>
</HEAD>
<BODY onLoad="fun1()">
<FORM name="myform">
<input type="button" value="" onClick="fun1()" name="bt1" onClick="fun1()">
</FORM>
</BODY>
</HTML>
3.6、form对象
就是form表单，但是在表单上有一个很重要的函数：submit()。例如，之前的代码：
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function fun(){
  // 提交表单
  document.myform.submit() ;
}
</script>
</HEAD>
<BODY>
<FORM name="myform" action="success.htm">
输入姓名：<INPUT TYPE="text" NAME="uname" onBlur="fun()">
</FORM>
</BODY>
</HTML>
3.7、实例
一般在网上都会存在全选框的代码。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function selectall(){
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
<INPUT TYPE="checkbox" NAME="email" value="email1">邮件一<br>
<INPUT TYPE="checkbox" NAME="email" value="email2">邮件二<br>
<INPUT TYPE="checkbox" NAME="email" value="email3">邮件三<br>
<INPUT TYPE="checkbox" NAME="email" value="email4">邮件四<br>
<INPUT TYPE="checkbox" NAME="email" value="email5">邮件五<br>
<INPUT TYPE="checkbox" NAME="email" value="email6">邮件六<br>
<INPUT TYPE="checkbox" NAME="email" value="email7">邮件七<br>
<INPUT TYPE="checkbox" NAME="email" value="email8">邮件八<br><br>
<INPUT TYPE="checkbox" NAME="all"> 全选
</FORM>
</BODY>
</HTML>
实现一：
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function selectall(){
  if(document.myform.all.checked){
   for(var x=0;x<document.myform.email.length;x++){
    document.myform.email[x].checked = true ;
   }
  }else{
   for(var x=0;x<document.myform.email.length;x++){
    document.myform.email[x].checked = false ;
   }
  }
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
<INPUT TYPE="checkbox" NAME="email" value="email1">邮件一<br>
<INPUT TYPE="checkbox" NAME="email" value="email2">邮件二<br>
<INPUT TYPE="checkbox" NAME="email" value="email3">邮件三<br>
<INPUT TYPE="checkbox" NAME="email" value="email4">邮件四<br>
<INPUT TYPE="checkbox" NAME="email" value="email5">邮件五<br>
<INPUT TYPE="checkbox" NAME="email" value="email6">邮件六<br>
<INPUT TYPE="checkbox" NAME="email" value="email7">邮件七<br>
<INPUT TYPE="checkbox" NAME="email" value="email8">邮件八<br><br>
<INPUT TYPE="checkbox" NAME="all" onclick="selectall()"> 全选
</FORM>
</BODY>
</HTML>
程序分别判断全选控件的操作。
实际上最好的做法是，所有的待选择的内容，都与全选的状态是一致的。
实现二：
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function selectall(){
  for(var x=0;x<document.myform.email.length;x++){
   document.myform.email[x].checked = document.myform.all.checked ;
  }
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
<INPUT TYPE="checkbox" NAME="email" value="email1">邮件一<br>
<INPUT TYPE="checkbox" NAME="email" value="email2">邮件二<br>
<INPUT TYPE="checkbox" NAME="email" value="email3">邮件三<br>
<INPUT TYPE="checkbox" NAME="email" value="email4">邮件四<br>
<INPUT TYPE="checkbox" NAME="email" value="email5">邮件五<br>
<INPUT TYPE="checkbox" NAME="email" value="email6">邮件六<br>
<INPUT TYPE="checkbox" NAME="email" value="email7">邮件七<br>
<INPUT TYPE="checkbox" NAME="email" value="email8">邮件八<br><br>
<INPUT TYPE="checkbox" NAME="all" onclick="selectall()"> 全选
</FORM>
</BODY>
</HTML>
如果以上的全选框的内容只有一个了，那该如何？
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javaScript">
function selectall(){
  var i = 0 ;
  for(var x=0;x<document.myform.email.length;x++){
   i++ ;
   document.myform.email[x].checked = document.myform.all.checked ;
  }
  if(i==0){
   document.myform.email.checked = document.myform.all.checked ;
  }
}
</script>
</HEAD>
<BODY>
<FORM name="myform">
<INPUT TYPE="checkbox" NAME="email" value="email8">邮件一<br><br>
<INPUT TYPE="checkbox" NAME="all" onclick="selectall()"> 全选
</FORM>
</BODY>
</HTML>
4、总结
1、掌握基本语法及函数，大部分情况下，函数都是由事件触发的
2、重点：可以使用JavaScript进行表单验证
5、预习任务
1、 WEB发展
2、 Tomcat配置