JavaScript
1、课程名称:JavaScript
2、知识点
2.1、上次课程的主要知识点
HTML静态网页中必须掌握的:
1) 表单的使用
a) <form>:用来提交表单中的数据。
i. action:设置提交路径
ii. method:提交的方式,get和post
b) 表单中的各种元素
i. <input>:各种表单输入元素,根据type类型来区分,默认是text
- text:文本框,输入单行文字
- password:密码框
- radio:单选
- checkbox:多选
- hidden:隐藏域
ii. <textarea>:多行文本
iii. <select>:下拉列表
- <option>:一个选项
- <optgroup>:分组选项
c) 元素常用的属性
i. name:表单元素的名称,允许重复
ii. id:所有表单元素的唯一标识,不允许重复,在javascript中使用,css中也可以用到id。
iii. radio和checkbox专用的属性,默认选中:checked
iv. textarea中设置行数和列数:rows,cols
v. option设置默认选中:selected
2) 表格的使用
a) <table>
b) <tr>
c) <td>
i. 属性注意单元格的合并
- colspan
- rowspan
d) 其他
i. <th>
ii. <thead>
iii. <tbody>
iv. <tfoot>
3) div和span
a) div:层,主要用来实现一些特效或漂亮的页面。
b) span:块,主要用在错误信息的提示上。
样式表要求掌握:
1) 导入样式文件:<link>
2) 会使用css中设置好的样式
a) class
3) 行内直接编写样式
a) style
4) 样式中,需要了解display属性的作用
a) 通过该属性可以控制元素显示还是隐藏,默认为显示
i. none:隐藏
ii. block:显示
2.2、本次预计讲解的知识点
3、具体内容
3.1、动态网页技术概述
最早的静态网页技术主要由:HTML + image组成,用户只能查看网页中的内容,而无法改变或与网页进行交互。
之后,为了能与用户进行简单的交互,让用户访问时可以支持一些特效,加入了javascript。
为了能与数据库交互,之后出现了各种动态网页技术。
最先出现的是Applet。但这种方式最大的问题是访问速度和安全性。
为了解决这些问题,出现了以下各种动态网页技术:
1) asp
2) php
3) jsp
4) aspx
通过动态网页技术,可以让服务器支持连接数据库,以及进行程序判断和处理。
对于这种服务器,需要单独进行安装和配置,服务器一般使用Tomcat,JBoss,GlassFish,WebLogic,WebSphere等。
3.2、JavaScript基本语法
JavaScript的前身是LiveScript,与Java语言没有任何关系。由NetScape(网景)公司最早开发完成的页面脚本语言,可以嵌入到HTML网页中执行一些程序代码。
现在,为了统一规范,W3C将JavaScript规定为HTML官方脚本语言,并规范了其开发语法,使现在所有浏览器都必须支持javascript语法。
如果想在HTML中加入一段JavaScript代码,必须使用<script>标签来完成。
<script type="text/javascript" language="javascript"> alert("Hell World"); </script> |
这里可以通过type或language来设置使用的语法格式为javascript alert()表示js提供的一个方法,用来弹出提示窗,可以显示一段文字。 |
alert在开发中一般用来调试代码,不会给用户提示。
3.2.1、JavaScript中的数据类型
JavaScript是一门基于对象的语言,但并不面向对象,因为没有面向对象的特征。
但现在有人专门为JavaScript开发了一些扩展支持库,这些库都加入了面向对象的特点。
JavaScript显示只支持一种数据类型,通过关键字var表示。
其具体类型需要根据所设置的值来决定,主要有以下几种类型:
1) 数字型
a) 整型
b) 浮点型
2) 字符型(字符串)
3) boolean型
4) 数组,在js中,建立数组使用new Array()来建立,其长度不固定,可以改变,根据设置的最后一个值的下标来决定。
5) 对象,类似java中的对象,每一个页面元素都可以在js中表示成为一个对象。
a) 对象中会包含其属性和方法
6) undefined:就是null,当没有设置值时,就是该类型。
数字类型与字符串直接可以进行转换,主要通过以下方式:
1) 数字 à 字符串:
var a = 10 + ""; alert(a + a); |
只需要加入一个空白字符串即可。 |
2) 字符串 à 数字
a) 整型
var a = "10"; var num = parseInt(a); alert(num + num); |
b) 浮点型
var a = "10.5"; var num = parseFloat(a); alert(num + num); |
如果字符串不合法,会出现以下两种情况:
1) 如果字符串以数字开头,则会自动截取出数字部分
2) 如果字符串非数字开头,则会提示NaN(Not a Number)
3.2.2、JavaScript中的循环和判断
在JavaScript里也支持循环和判断语句。
判断同样使用if…else或switch令中方式来完成。
这里的if…else判断时,判断条件中可以不放入boolean类型的数据。
如果加入的数据是null(undefined)或””或0,则按照false来处理。
如果加入的是其他数据,则按true来处理。
var a = "adsf"; if (a) { alert("真"); } else { alert("假"); } |
循环也与java语言没有区别,也支持while循环和for循环。
注意for循环使用时,需要定义的数据类型。
for (var i = 1; i <= 10 ;i++ ) { alert(i); } |
3.2.3、JavaScript中方法的声明和使用
在使用方法前,先要声明一个方法。
声明方法的语法为:function 方法名
方法中可以传入参数,因此声明方法时,可以设置传入的参数,但不需要设置参数类型(因为设置也只能是var,因此就不设置了)
function add(a,b) { var sum = a + b; return sum; } |
声明好方法后,可以通过方法名,以及传入参数来调用。
function add(a,b) { var sum = a + b; return sum; } alert(add(3,5)); |
如果声明了多个重名的方法,则只会调用最后一个。
如果非要实现重载的功能,可以动态读取参数个数,来判断要怎样处理。
function add() { // 通过此属性,可以取得方法传入的所有参数,结果为数组 var args = add.arguments ; var sum = 0; if (args.length == 2) { // 2个参数 sum = args[0] + args[1]; } else if (args.length == 3) { // 3个参数 sum = args[0] + args[1] + args[2]; } else { // 其他情况 sum = "参数错误"; } return sum; } alert(add(1,2,6,10)); |
方法声明的主要目的是重用,js中如果想让方法重用,必须将其声明到一个单独的js文件中,想使用时再导入。
<script language="javascript" src="test.js"> </script> <script language="javascript" > alert(add(3,5)); </script> |
注意,如果一个<script>标签通过src导入了某个js文件,则无法再在里面编写javascript代码,必须单独定义一个<script>编写其他的代码。 |
3.3、JavaScript的事件驱动模型
JavaScript如果想与页面的HTML进行交互,必须通过事件来完成,因此js属于事件驱动模式的开发。
事件指的是用户对页面上某些元素进行的一些操作,例如:点按钮,在文本框中输入内容,鼠标悬停到某个元素上,鼠标拖放。
开发中会将事件与某个或某些js方法绑定,当用户进行操作时,自动执行对应的js方法,从而与用户进行交互。
3.3.1、页面事件onload、onunload
onload:当页面加载完成时自动执行的事件。
<script language="javascript" > function welcome() { alert("欢迎光临"); } </script> </HEAD>
<BODY onload="welcome();"> </BODY> |
onunload:当关闭或离开页面时,自动执行的事件
<script language="javascript" > function welcome() { alert("欢迎光临"); }
function exit() { alert("下次再来"); } </script> </HEAD>
<BODY onload="welcome();" onunload="exit();"> </BODY> |
3.3.2、点击事件onclick
该事件一般是加入到按钮或一些可以点击的页面元素上。
例如:配合按钮和div,完成一个层的显示和隐藏。
<script language="javascript" > function showDiv() { // 根据id,取得页面上的某个元素 var mydiv = document.getElementById("mydiv"); // 修改取得到的div的style里的display值 mydiv.style.display = ""; }
function closeDiv() { var mydiv = document.getElementById("mydiv"); // 改为隐藏 mydiv.style.display = "none"; } </script> </HEAD>
<BODY> <input type="button" value="显示" onclick="showDiv();"> <div id="mydiv" style="background:red;width:100px;height:100px;position:absolute;left:400px;top:50px;display:none;"> <center> <input type="button" value="关闭" onclick="closeDiv();"> </center> </div> </BODY> |
注意document.getElementById的使用。 |
在使用javascript开发时,为了能更好的与页面元素交互,document对象提供了以下几个方法,来取得页面上的元素。
1) document.getElementById():根据id取得元素,只能取得一个元素。如果有多个id相同的元素,则只处理第一个元素。
2) document.getElementsByName():根据name取得元素,一般用在单选或多选框中。
a) 例如:完成全选功能。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > function checkedAll() { // 取得全选框的选中状态 var allboxChecked = document.getElementById("allbox").checked; // 返回的是所有多选框的数组 var allMail = document.getElementsByName("mail"); // 循环设置每一个多选框的选中状态 for (var i = 0;i < allMail.length;i++) { allMail[i].checked = allboxChecked; } } </script> </HEAD>
<BODY> <center> <input type="checkbox" id="allbox" value="0" onclick="checkedAll();"> 全选 <br> <input type="checkbox" value="1" name="mail"> 邮件1 <br> <input type="checkbox" value="2" name="mail" > 邮件2 <br> <input type="checkbox" value="3" name="mail" > 邮件3 <br> <input type="checkbox" value="4" name="mail" > 邮件4 <br> <input type="checkbox" value="5" name="mail" > 邮件5 <br> <input type="checkbox" value="6" name="mail" > 邮件6 <br> <input type="checkbox" value="7" name="mail" > 邮件7 <br> </center> </BODY> </HTML> |
以上操作中,取得全选的选中状态还需要调用getElementById,比较复杂。 开发中还有以下的写法。 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > // 接收到的就是全选框的选中状态 function checkedAll(allboxChecked) { // 返回的是所有多选框的数组 var allMail = document.getElementsByName("mail"); // 循环设置每一个多选框的选中状态 for (var i = 0;i < allMail.length;i++) { allMail[i].checked = allboxChecked; } } </script> </HEAD>
<BODY> <center> <input type="checkbox" id="allbox" value="0" onclick="checkedAll(this.checked);"> 全选 <br> <input type="checkbox" value="1" name="mail"> 邮件1 <br> <input type="checkbox" value="2" name="mail" > 邮件2 <br> <input type="checkbox" value="3" name="mail" > 邮件3 <br> <input type="checkbox" value="4" name="mail" > 邮件4 <br> <input type="checkbox" value="5" name="mail" > 邮件5 <br> <input type="checkbox" value="6" name="mail" > 邮件6 <br> <input type="checkbox" value="7" name="mail" > 邮件7 <br> </center> </BODY> </HTML> |
这里的this表示当前对象,也就是全选框的<input>元素,.checked表示取得该元素的选中状态,并在调用方法时,传入到方法中。 |
3) document.getElementsByTagName():根据标签名称取得元素,返回的也是多个元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > // 接收到的就是全选框的选中状态 function checkedAll(allboxChecked) { // 返回的是所有多选框的数组 var allMail = document.getElementsByTagName("input"); // 循环设置每一个多选框的选中状态 for (var i = 0;i < allMail.length;i++) { allMail[i].checked = allboxChecked; } } </script> </HEAD>
<BODY> <center> <input type="checkbox" id="allbox" value="0" onclick="checkedAll(this.checked);"> 全选 <br> <input type="checkbox" value="1" name="mail"> 邮件1 <br> <input type="checkbox" value="2" name="mail" > 邮件2 <br> <input type="checkbox" value="3" name="mail" > 邮件3 <br> <input type="checkbox" value="4" name="mail" > 邮件4 <br> <input type="checkbox" value="5" name="mail" > 邮件5 <br> <input type="checkbox" value="6" name="mail" > 邮件6 <br> <input type="checkbox" value="7" name="mail" > 邮件7 <br>
<input type="radio" name="sex" value="男" > 男 <input type="radio" name="sex" value="女" > 女 </center> </BODY> </HTML> |
注意,使用时容易出现问题,因此开发中尽量不要用或少用。 |
3.3.3、验证时最常用的事件onkeyup,onblur(重点事件)
onblur是当页面元素失去焦点时调用方法。
onkeyup则是当输入的按键抬起时调用事件。
这两个事件都可以在表单输入时,完成输入的验证。
新版本的项目基本都是onkeyup。
例如:
完成长度不少于6位的输入验证。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > function checkUserid() { // 取得这个userid var userid = document.getElementById("userid"); // 判断其文字长度 if (userid.value.length < 6) { // 输入不合法 // 取得span,并加入提示内容 document.getElementById("useridMessage").innerHTML = "<font color='red'>长度不能少于6位!</font>";
} else { // 输入合法 document.getElementById("useridMessage").innerHTML = "<font color='green'>输入合法!</font>"; } } </script> </HEAD>
<BODY> <center> 用户名:<input type="text" id="userid" name="userid" onkeyup="checkUserid();"> <span id="useridMessage">请输入6位以上的文字</span> <br> </center> </BODY> </HTML> |
也可以改为显示图片的形式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > function checkUserid() { // 取得这个userid var userid = document.getElementById("userid"); // 判断其文字长度 if (userid.value.length < 6) { // 输入不合法 // 取得span,并加入提示内容 document.getElementById("useridMessage").innerHTML = "<img src='false.png'>";
} else { // 输入合法 document.getElementById("useridMessage").innerHTML = "<img src='true.png'>"; } } </script> </HEAD>
<BODY> <center> 用户名:<input type="text" id="userid" name="userid" onkeyup="checkUserid();"> <span id="useridMessage">请输入6位以上的文字</span> <br> </center> </BODY> </HTML> |
注意,提前准备好图片。 |
通过这种事件,配合正则表达式,可以完成各种数据格式的验证。
例如:
验证邮件地址是否合法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > function checkUserid() { // 取得这个userid var userid = document.getElementById("userid"); // 判断其文字长度 if (userid.value.length < 6) { // 输入不合法 // 取得span,并加入提示内容 document.getElementById("useridMessage").innerHTML = "<img src='false.png'>";
} else { // 输入合法 document.getElementById("useridMessage").innerHTML = "<img src='true.png'>"; } }
function checkEmail() { // 取得邮件地址的值 var email = document.getElementById("email").value; // 声明要验证的表达式规则 var regex = /^\w+@\w+(\.\w+)+$/; // 调用验证 if (regex.test(email)) { document.getElementById("emailMessage").innerHTML = "<img src='true.png'>"; } else { document.getElementById("emailMessage").innerHTML = "<img src='false.png'>"; }
} </script> </HEAD>
<BODY> <center> 用户名:<input type="text" id="userid" name="userid" onkeyup="checkUserid();"> <span id="useridMessage">请输入6位以上的文字</span> <br> 邮件地址:<input type="text" id="email" name="email" onkeyup="checkEmail();"> <span id="emailMessage"></span> <br> </center> </BODY> </HTML> |
通过类似的验证规则,可以完成其他的各种验证功能,例如:身份证号,电话号码,金额等。 |
还可以通过onkeyup,完成文本域输入时的字数统计功能。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > function checkUserid() { // 取得这个userid var userid = document.getElementById("userid"); // 判断其文字长度 if (userid.value.length < 6) { // 输入不合法 // 取得span,并加入提示内容 document.getElementById("useridMessage").innerHTML = "<img src='false.png'>";
} else { // 输入合法 document.getElementById("useridMessage").innerHTML = "<img src='true.png'>"; } }
function checkEmail() { // 取得邮件地址的值 var email = document.getElementById("email").value; // 声明要验证的表达式规则 var regex = /^\w+@\w+(\.\w+)+$/; // 调用验证 if (regex.test(email)) { document.getElementById("emailMessage").innerHTML = "<img src='true.png'>"; } else { document.getElementById("emailMessage").innerHTML = "<img src='false.png'>"; }
}
function countWords() { // 取得文本域 var content= document.getElementById("content") // 取得文本域中文字的数量 var count = content.value.length; // 将剩余可输入的文字数量计算出来。 var lastCount = 255 - count; // 判断是否为大于等于0的数字 if (lastCount >= 0) { // 显示到span中 document.getElementById("contentMessage").innerHTML = "剩余 " + lastCount + " 字可以输入"; } else { document.getElementById("contentMessage").innerHTML = "超过了 <font color='red'>" + (-lastCount) + "</font> 字"; }
} </script> </HEAD>
<BODY> <center> 用户名:<input type="text" id="userid" name="userid" onkeyup="checkUserid();"> <span id="useridMessage">请输入6位以上的文字</span> <br> 邮件地址:<input type="text" id="email" name="email" onkeyup="checkEmail();"> <span id="emailMessage"></span> <br> 自我介绍:<textarea cols="30" rows="5" id="content" name="content" onkeyup="countWords();"></textarea> <span id="contentMessage">剩余 255 字可以输入</span> <br> </center> </BODY> </HTML> |
3.3.4、验证拦截事件onsubmit(重点事件)
之前的表单验证只能将错误提示给用户,但无法限制用户的提交操作,即便输入错误,用户点提交按钮时,也一样可以提交通过表单,进入其他页面。
这时需要加入<form>的onsubmit事件,通过该事件在提交表单时,拦截提交操作,判断是否允许通过。
该事件中必须返回一个boolean类型的值,默认为true,如果为false,则表示不允许提交通过。
一般开发中,都编写一个单独的表单提交时的验证方法,通过该方法,返回验证结果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > function checkUserid() { // 取得这个userid var userid = document.getElementById("userid"); // 判断其文字长度 if (userid.value.length < 6) { // 输入不合法 // 取得span,并加入提示内容 document.getElementById("useridMessage").innerHTML = "<img src='false.png'>"; return false; } else { // 输入合法 document.getElementById("useridMessage").innerHTML = "<img src='true.png'>"; return true; } }
function checkEmail() { // 取得邮件地址的值 var email = document.getElementById("email").value; // 声明要验证的表达式规则 var regex = /^\w+@\w+(\.\w+)+$/; // 调用验证 if (regex.test(email)) { document.getElementById("emailMessage").innerHTML = "<img src='true.png'>"; return true; } else { document.getElementById("emailMessage").innerHTML = "<img src='false.png'>"; return false; }
}
function countWords() { // 取得文本域 var content= document.getElementById("content") // 取得文本域中文字的数量 var count = content.value.length; // 将剩余可输入的文字数量计算出来。 var lastCount = 255 - count; // 判断是否为大于等于0的数字 if (lastCount >= 0) { // 显示到span中 document.getElementById("contentMessage").innerHTML = "剩余 " + lastCount + " 字可以输入"; return true; } else { document.getElementById("contentMessage").innerHTML = "超过了 <font color='red'>" + (-lastCount) + "</font> 字"; return false; }
}
function check() { var flag1 = checkUserid(); var flag2 = checkEmail(); var flag3 = countWords(); return flag1 && flag2 && flag3; } </script> </HEAD>
<BODY> <center> <form action="suc.html" method="post" onsubmit="return check();"> 用户名:<input type="text" id="userid" name="userid" onkeyup="checkUserid();"> <span id="useridMessage">请输入6位以上的文字</span> <br> 邮件地址:<input type="text" id="email" name="email" onkeyup="checkEmail();"> <span id="emailMessage"></span> <br> 自我介绍:<textarea cols="30" rows="5" id="content" name="content" onkeyup="countWords();"></textarea> <span id="contentMessage">剩余 255 字可以输入</span> <br> <input type="submit" value="提交"> </form> </center> </BODY> </HTML> |
3.3.5、鼠标悬停事件onmouseover,onmouseout
一般用来完成按钮图片切换以及行变色功能。
例如:行变色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" >
</script> </HEAD>
<BODY> <center> <TABLE border="1" width="80%"> <TR onmouseover="this.style.background = 'red';" onmouseout="this.style.background = 'white';"> <TD>1</TD> <TD>1</TD> </TR> <TR onmouseover="this.style.background = 'red';" onmouseout="this.style.background = 'white';"> <TD>2</TD> <TD>2</TD> </TR> <TR onmouseover="this.style.background = 'red';" onmouseout="this.style.background = 'white';"> <TD>3</TD> <TD>3</TD> </TR> <TR onmouseover="this.style.background = 'red';" onmouseout="this.style.background = 'white';"> <TD>4</TD> <TD>4</TD> </TR> </TABLE> </center> </BODY> </HTML> |
按钮改变图片
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > function changeToFalse() { // 取得要改变的<img> var img = document.getElementById("buttonImg"); // 改变其src属性 img.src = "false.png"; } function changeToTrue() { // 取得要改变的<img> var img = document.getElementById("buttonImg"); // 改变其src属性 img.src = "true.png"; } </script> </HEAD>
<BODY> <center> <TABLE border="1" width="80%"> <TR onmouseover="this.style.background = 'red';" onmouseout="this.style.background = 'white';"> <TD>1</TD> <TD>1</TD> </TR> <TR onmouseover="this.style.background = 'red';" onmouseout="this.style.background = 'white';"> <TD>2</TD> <TD>2</TD> </TR> <TR onmouseover="this.style.background = 'red';" onmouseout="this.style.background = 'white';"> <TD>3</TD> <TD>3</TD> </TR> <TR onmouseover="this.style.background = 'red';" onmouseout="this.style.background = 'white';"> <TD>4</TD> <TD>4</TD> </TR> </TABLE>
<BR> <br> <button onmouseover="changeToFalse();" onmouseout="changeToTrue();"><img id="buttonImg" src="true.png"></button>
</center> </BODY> </HTML> |
3.3.6、鼠标拖放事件onmousedown,onmousemove,onmouseup
在官方的称呼中,拖放操作称为DD。
通过程序,可以对可浮动的div实现拖放操作。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > // 加入一个是否拖动的标志位 var flag = false;
function startDrag() { flag = true; document.getElementById("message").innerHTML = "开始拖动"; } function startDrop() { flag = false; document.getElementById("message").innerHTML = "结束拖动,放下DIV"; }
function moving(e) { // 必须判断当前是否处在拖动状态 if (flag) { // 移动div,需要取得鼠标当前的坐标位置 var x = e.clientX ; var y = e.clientY ; document.getElementById("message").innerHTML = "x:" + x + ", y:" + y; // 根据鼠标坐标,改变div的left和top值 // 取得div var mydiv = document.getElementById("mydiv"); // 修改横坐标 mydiv.style.left = x - 50 + "px"; // 修改纵坐标 mydiv.style.top = y - 25 + "px"; } } </script> </HEAD>
<BODY onmousemove="moving(event);"> <center> <div id = "mydiv" style="position:absolute;width:100;height:200;left:50;top:50;background:red;"> <table width="100%" height="100%"> <tr height="50" style="background:blue;"> <td onmousedown="startDrag();" onmouseup="startDrop();"> </td> </tr> <tr> <td> </td> </tr> </table> </div> <br> <span id="message">未进行操作</span> </center> </BODY> </HTML> |
3.3.7、下拉列表的处理事件onchange
onchange事件是值改变时自动调用的事件,一般都用在下拉列表的选项改变上,当完成AJAX联动菜单时会用到。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" >
</script> </HEAD>
<BODY onmousemove="moving(event);"> <center> 请选择所在地:<select onchange="alert(this.value);"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">深圳</option> <option value="3">广州</option> <option value="4">大连</option> </select> </center> </BODY> </HTML> |
3.4、JavaScript中的内置对象
在javascript中,包含一些不需要声明就可以直接使用的对象,例如:document。
常用的对象有:
1) window:浏览器窗口对象,该对象的所有方法,在调用时可以不需要对象名.方法名,而直接通过方法名调用,例如:alert()
2) document:用来取得页面元素的
3) event:事件专用对象,只有当发生事件时,才会取得并使用。
4) location:地址栏对象,可以取得当前地址栏的值或改变地址栏的值(相当于切换到了其他的页面,因此可以通过改变此值实现自动进入其他页面的功能。)
5) history:历史记录对象,用来操作返回,前进和刷新按钮的。
3.4.1、window对象
window对象可以实现打开新窗口,关闭当前窗口的功能,方法为:open,close(开发中基本不用。)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > function openNewPage() { window.open("suc.html","新窗口","location:no"); window.close(); } </script> </HEAD>
<BODY onload="openNewPage();"> <center> 请选择所在地:<select onchange="alert(this.value);"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">深圳</option> <option value="3">广州</option> <option value="4">大连</option> </select> </center> </BODY> </HTML> |
除了以上方法外,window对象还可以实现弹出对话框或确认框的功能。
对话框使用alert(),确认框使用confirm()。
开发中,在删除操作时,一般都使用确认框进行确认。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > function check() { // 可以接收选择结果 var result = window.confirm('确定要删除该数据吗?'); // 将结果返回,并根据结果是true还是false决定是否跳转到其他页面。 return result; } </script> </HEAD>
<BODY> <center> <a href="suc.html" onclick="return check();">删除</a> </center> </BODY> </HTML> |
也可以简化为以下形式 |
<center> <a href="suc.html" onclick="return window.confirm('确定要删除该数据吗?');">删除</a> </center> |
window对象还有一个可以完成定时任务的方法,主要用来实现一些特效,以及计时功能的。
例如:
倒计时
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > var time = 5; function startCountdown() { // 可以根据时间进行自减操作 time--; var str = time; // 补0操作 if (str < 10) { str = "0" + str; } document.getElementById("time").innerHTML = "00:" + str;
// 可以加入判断 if (time > 0) { // 开始定时调用 window.setTimeout("startCountdown();",1000); } else { // 提示已经到点 alert("到点收菜了"); } } function startCountdownAd() { // 取得div,并取得里面的top值 var div = document.getElementById("addiv"); var top = div.style.top; top = parseInt(top.substring(0,top.length - 2)); // 让top值增加 top += 5; div.style.top = top + "px"; if (top < 0) { window.setTimeout("startCountdownAd();",20); } }
function closeDivAd() { // 取得div,并取得里面的top值 var div = document.getElementById("addiv"); var top = div.style.top; top = parseInt(top.substring(0,top.length - 2)); // 让top值减少 top -= 5; div.style.top = top + "px"; if (top > -150) { window.setTimeout("closeDivAd();",20); } } </script> </HEAD>
<BODY onload="startCountdownAd();"> <div id="addiv" style="position:absolute;left:0px;top:-150px;width:200px;height:150px;background:red;"> 我是广告! <br> <a href="suc.html" target="_blank"><input type="button" value="关闭" onclick="closeDivAd();"></a> </div> <center> <span id="time">00:05</span> </center> </BODY> </HTML> |
3.4.2、location对象
可以实现改变地址栏,从而切换到别的页面的功能。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" > function changePage() { location = "suc.html"; } </script> </HEAD>
<BODY onload="startCountdownAd();"> <input type="button" value="进入下一页" onclick="changePage();"> </BODY> </HTML> |
3.4.5、history对象
history对象可以通过go方法来完成后退,前进,刷新的功能。
<BODY> 第二页的页面!<br> <input type="button" value="返回上一页" onclick="history.go(-1);"> </BODY> |
参数中如果传入负数表示返回某页,正数表示前进某页,0表示刷新当前页。 |
4、总结
1、掌握JavaScript声明方法的代码,以及将方法放到js中并导入的代码。
2、了解JavaScript中的常用数据类型以及类型间的转换。
3、掌握重点事件:onkeyup,onsubmit的使用,并可以通过正则表达式,完成各种表单验证。
4、了解几个基本的内置对象和常用的方法(confirm(),go())
5、预习任务
1、Tomcat服务器
2、JSP基本语法
6、作业
No. |
表达式 |
描述 |
1 |
|
完成表单验证功能 要求: 用户名必须为6 – 16位 姓名必须输入,且不能超过10位 密码必须6 – 16位 两次密码必须一致。 邮件地址必须合法 电话必须为:手机号(11位数字)或座机号(3-4位数字 – 7-8位数字) 所有多选框中至少要选中一个,如果哪个都没有选中,则不允许提交 |