JavaScript学习(1)初识JavaScript
2010-07-15 22:34
357 查看
1.了解JavaScript
1.1JavaScript常用功能
*在浏览器的状态栏或警告栏里,作为网页的一部分,向访问者显示信息.
*验证表单内容
*当访问者将鼠标移动到图像上面时, 替换图像.
*创建与访问者交互的广告栏,而不仅仅是显示一幅图像.
*检测可用浏览器或其属性,并且只在支持它们的浏览器上运行高级功能.
*检测已安装的插件,并在需要某一插件程序时通知访问者.
*在不需要访问者重新加载网页的情况下,修改整个或部分网页.
*显示从远程服务器检索到的数据,或者与远程服务器交互数据.
1.2简单功能演示
空表单验证
<!--空表单验证-->
<html>
<head>
<title>空表单验证</title>
<meta name="Generator" content="EditPlus">
<script language=javascript>
<!--
function checkSubmit()
{
if((document.form1.name.value)=='')
{
window.alert('姓名必须填写');
document.form1.name.select();
document.form1.name.focus();
return false;
}
else
return true;
}
-->
</script>
<form name ="form1" onsubmit="javascript:return checkSubmit()">
<input type="text" name="name">
</form>
</head>
<body>
</body>
</html>
密码验证
<script language ="javascript">
function CheckForm()
{
if(document.form1.PWD.value != document.form2.PWD.value)
{
alert("两次输入不一样");
return false;
}
else
return true;
}
</script>
<form name="form1">
<input type="text" name="PWD">
</form>
<form name="form2" onsubmit="javascript:return CheckForm()">
<input type="text" name="PWD">
</form>
日期格式验证
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 日期验证格式 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<form name ="datecheck" method="POST" onsubmit="return dateCheck(this.date.value);">
<table border="0" cellpadding="8" cellspacing="0" width="50%">
<tr>
<td align="right" nowrap>日期(DD/MM/YYYY):</td>
<td><input type=text name="date" size="25"></td>
</tr>
<tr>
<td class="center" colspan="2">
<input type=submit value="提交">
<input type=reset value="重写">
</td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
function dateCheck(str)
{
var re = new RegExp("^([0-9]{1,2})[./]{1}([0-9]{1,2})[./]{1}([0-9]{4})$");
var ar;
var res = true;
if(ar=re.exec(str)!=null)
{
var i;
i=parseFloat(ar[1]);
if(i<=0||i<31)document.ADDUser.PWD.focus();
{
res=false;
}
i=parseFloat(ar[2]);
if(i<=0||i>12)
{
res=false;
}
}
else{
res=false;
}
if(!res){
alert('请输入 DD/MM/YYYY 日期格式');
}
else{
alert("success");
}
return res;
}
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
最大长度验证
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>最大验证长度</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function test()
{
if(document.a.b.value.length>50)
{
alert("文本长度不能超过50!");
document.a.b.focus();
return false;
}
}
</script>
<form name=a onsubmit="return test()">
<textarea name="b" cols="40" wrap="VIRTRAL" rows="6">
</textarea>
<input type="submit" name="Submit" value="check">
</form>
</HEAD>
<BODY>
</BODY>
</HTML>
使用表单验证
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 表单验证 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function validate()
{
f=document.reg_form;
if(f.uname.value=="")
{
alert("请输入姓名");
f.uname.focus();
return false;
}
if(f.gender[0].checked==false&&f.gender[1].checked==false)
{
alert("请指定性别");
f.gender[0].focus();
return false;
}
if((f.password.value.length<6)||(f.password.value==""))
{
alert("请输入至少6个字符的密码!");
f.password.focus();
return false;
}
q=f.email.value.indexOf("@")
if(q==-1)
{
alert("请输入有效的电子邮件地址!");
f.email.focus();
return false;
}
if(f.age.value<1||f.age.value>99||isNaN(f.age.value))
{
alert("请输入有效的年龄");
f.age.focus();
return false;
}
}
</script>
</HEAD>
<BODY onload = "document.reg_form.uname.focus()" bgColor="0105678">
<form name="reg_form" onSubmit="return validate()" action = "submit.htm">
<center>
<h1><u><font color="yellow">欢迎来到我的网上家园</font></u><h1>
姓名:
<br>
<input type="text" name="uname">
<p>
性别:
<br>
<input type="radio" name = "gender" value = "男">男
<input type="radio" name = "gender" value = "女">女
<br><br>
密码:
<br>
<input type="text" name="password" ID="password">
<p>
电子邮件地址:
<br>
<input type="text" name="email" ID="email">
<p>
年龄:
<br>
<input type = "text" name="age">
<p>
<input type = "submit" value="注册">
</center>
</form>
</BODY>
</HTML>
参考书籍 清华大学出版社 <<JavaScript技术开发详解>>
IDE EditPlus
1.1JavaScript常用功能
*在浏览器的状态栏或警告栏里,作为网页的一部分,向访问者显示信息.
*验证表单内容
*当访问者将鼠标移动到图像上面时, 替换图像.
*创建与访问者交互的广告栏,而不仅仅是显示一幅图像.
*检测可用浏览器或其属性,并且只在支持它们的浏览器上运行高级功能.
*检测已安装的插件,并在需要某一插件程序时通知访问者.
*在不需要访问者重新加载网页的情况下,修改整个或部分网页.
*显示从远程服务器检索到的数据,或者与远程服务器交互数据.
1.2简单功能演示
空表单验证
<!--空表单验证-->
<html>
<head>
<title>空表单验证</title>
<meta name="Generator" content="EditPlus">
<script language=javascript>
<!--
function checkSubmit()
{
if((document.form1.name.value)=='')
{
window.alert('姓名必须填写');
document.form1.name.select();
document.form1.name.focus();
return false;
}
else
return true;
}
-->
</script>
<form name ="form1" onsubmit="javascript:return checkSubmit()">
<input type="text" name="name">
</form>
</head>
<body>
</body>
</html>
密码验证
<script language ="javascript">
function CheckForm()
{
if(document.form1.PWD.value != document.form2.PWD.value)
{
alert("两次输入不一样");
return false;
}
else
return true;
}
</script>
<form name="form1">
<input type="text" name="PWD">
</form>
<form name="form2" onsubmit="javascript:return CheckForm()">
<input type="text" name="PWD">
</form>
日期格式验证
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 日期验证格式 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<form name ="datecheck" method="POST" onsubmit="return dateCheck(this.date.value);">
<table border="0" cellpadding="8" cellspacing="0" width="50%">
<tr>
<td align="right" nowrap>日期(DD/MM/YYYY):</td>
<td><input type=text name="date" size="25"></td>
</tr>
<tr>
<td class="center" colspan="2">
<input type=submit value="提交">
<input type=reset value="重写">
</td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
function dateCheck(str)
{
var re = new RegExp("^([0-9]{1,2})[./]{1}([0-9]{1,2})[./]{1}([0-9]{4})$");
var ar;
var res = true;
if(ar=re.exec(str)!=null)
{
var i;
i=parseFloat(ar[1]);
if(i<=0||i<31)document.ADDUser.PWD.focus();
{
res=false;
}
i=parseFloat(ar[2]);
if(i<=0||i>12)
{
res=false;
}
}
else{
res=false;
}
if(!res){
alert('请输入 DD/MM/YYYY 日期格式');
}
else{
alert("success");
}
return res;
}
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
最大长度验证
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>最大验证长度</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function test()
{
if(document.a.b.value.length>50)
{
alert("文本长度不能超过50!");
document.a.b.focus();
return false;
}
}
</script>
<form name=a onsubmit="return test()">
<textarea name="b" cols="40" wrap="VIRTRAL" rows="6">
</textarea>
<input type="submit" name="Submit" value="check">
</form>
</HEAD>
<BODY>
</BODY>
</HTML>
使用表单验证
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 表单验证 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function validate()
{
f=document.reg_form;
if(f.uname.value=="")
{
alert("请输入姓名");
f.uname.focus();
return false;
}
if(f.gender[0].checked==false&&f.gender[1].checked==false)
{
alert("请指定性别");
f.gender[0].focus();
return false;
}
if((f.password.value.length<6)||(f.password.value==""))
{
alert("请输入至少6个字符的密码!");
f.password.focus();
return false;
}
q=f.email.value.indexOf("@")
if(q==-1)
{
alert("请输入有效的电子邮件地址!");
f.email.focus();
return false;
}
if(f.age.value<1||f.age.value>99||isNaN(f.age.value))
{
alert("请输入有效的年龄");
f.age.focus();
return false;
}
}
</script>
</HEAD>
<BODY onload = "document.reg_form.uname.focus()" bgColor="0105678">
<form name="reg_form" onSubmit="return validate()" action = "submit.htm">
<center>
<h1><u><font color="yellow">欢迎来到我的网上家园</font></u><h1>
姓名:
<br>
<input type="text" name="uname">
<p>
性别:
<br>
<input type="radio" name = "gender" value = "男">男
<input type="radio" name = "gender" value = "女">女
<br><br>
密码:
<br>
<input type="text" name="password" ID="password">
<p>
电子邮件地址:
<br>
<input type="text" name="email" ID="email">
<p>
年龄:
<br>
<input type = "text" name="age">
<p>
<input type = "submit" value="注册">
</center>
</form>
</BODY>
</HTML>
参考书籍 清华大学出版社 <<JavaScript技术开发详解>>
IDE EditPlus
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 深入浅出JavaScript （一）初识
- javascript学习(七)：javascript中事件
- JavaScript学习总结——Javascript原型链的原理
- JavaScript DOM初识
- 【JavaScript】——初识
- 初识JavaScript最容易模糊的三大问题
- 初识JavaScript，Ajax，jQuery，并比较三者关系
- 初识JavaScript-1
- JavaScript学习（三）：JavaScript对象类型
- JavaScript学习系列之初识原型继承和原型链
- 深入浅出JavaScript （一）初识
- javascript之对象初识
- 初识JavaScript(基础篇二)
- 初识JavaScript（基础篇）
- javascript初识
- 初识javascript 文档碎片
- web前端基础——初识JavaScript
- javascript学习(3)--javascript中的对象
- Javascript学习日记-阻止javascript事件冒泡，获取控件ID值
- 03 Javascript初识