本节目标:
1.掌握javaScript中主要的事件使用
2.掌握javaScript与表单的操作
3.掌握正则表达式在javaScript中的使用
1.onLoad 与onUnload
<html lang="en">
<head>
<script type="text/javascript">
function login(){
alert("欢迎登录!");
}
function logout(){
alert("退出成功!");
}
</script>
</head>
<body onLoad = "login()" onUnload = "logout()">
</body>
</html>
所有的事件都是使用onXXX的形式定义的。以上包含两个简单的事件处理,在页面加载时触发onLoad操作,在页面退出时触发onUnload操作。
2.点击事件-onclick
<html lang="en">
<head>
<script type="text/javascript">
function show(){
alert("hello world!");
}
</script>
</head>
<body>
<h3><a href="#" onclick = "show()">点击一下</a></h3>
</body>
</html>
3.事件处理与表单操作
<head>
<script type="text/javascript">
function show(){
var value = document.myForm.context.value;
alert("输入的内容是:" + value);
}
</script>
</head>
<body>
<form method="post" action="#" name="myForm">
请输入内容:<input type="text" name="context">
<input type="button" value="显示" οnclick="show()">
</form>
</body>
如果表单中输入需要满足某些条件?
使用正则完成,在javaScript中正则:/正则/.test(内容)
Onsubmit事件在表单提交时触发。
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function validate(f){
var value = f.email.value;
if(!/^\w+@\w+.\w+$/.test(value)){
alert("输入的格式不正确!");
f.email.focus();// 获得焦点
f.email.select();// 已有的内容全选
return false;
}
return true;
}
</script>
</head>
<body>
<form method="post" action="test.html" name="myForm" οnsubmit="return validate(this)">
EMAIL:<input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>
以上是取得普通文本的内容,以下将取得单选钮和复选框的内容。
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function show(){
var name = document.myForm.name.value;
alert("姓名:" + name);
var sex;//表示性别
if(document.myForm.sex[0].checked){
sex = document.myForm.sex[0].value;
}else{
sex = document.myForm.sex[1].value;
}
alert("性别:" + sex);
var intrs = " " ; //表示兴趣
for(i = 0; i<document.myForm.intrs.length; i++){
if(document.myForm.intrs[i].checked){
intrs += document.myForm.intrs[i].value + "、";
}
}
alert("兴趣:" + intrs);
}
</script>
</head>
<body>
<form method="post" action="test.html" name="myForm"">
姓名:<input type="text" name="name"><br>
性别:<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女<br>
兴趣:<input type="checkbox" name="intrs" value="篮球" >篮球
<input type="checkbox" name="intrs" value="网球" >网球
<input type="checkbox" name="intrs" value="乒乓球" >乒乓球
<input type="button" value="显示" οnclick="show()">
</form>
</body>
</html>
4.onchange事件
<html lang="en">
<head>
<script type="text/javascript">
function show(f){
document.myForm.result.value=f;
}
</script>
</head>
<body>
<form method="post" action="" name="myForm">
部门:<select name="dept" οnchange="show(this.value)">//this表示当前select标签对象,this.value表示选中的值
<option value="销售部">销售部</option>
<option value="技术部">技术部</option>
<option value="财务部">财务部</option>
</select>
结果:<input type="text" name="result" value="">
</form>
</body>
</html>
每一个表单的控件就是一个对象(基于对象)。