JavaScript客户端脚本语言的应用_js脚本可实现表单提交数据的客户端-优快云博客

本文通过三个实例介绍了JavaScript在客户端脚本中的应用：制作简易计算器页面、实现树形菜单交互以及用户注册表单的客户端校验。讨论了BOM和DOM在JavaScript中的角色，BOM用于浏览器窗口交互，而DOM则提供了一种结构化表示HTML页面的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用HTML中的表单、表格以及JavaScript客户端脚本语言实现如下图所示的简易计算器页面

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简易计算器</title>
<script  type="text/javascript">
var res;var value1,value2,opt;

function count(opt)
{
	value1=parseInt(document.getElementById("num1").value);
  value2=parseInt(document.getElementById("num2").value);
	switch(opt)
	{
		case '+':res=value1+value2;break;
		case '-':res=value1-value2;break;
		case '×':res=value1*value2;break;
        default:
        res=value1/value2;
        break;
	}
	document.getElementById("num3").value=res;
}
</script>
</head>

<body>
   <form >
     <table width="356" height="272" style="text-align:center">
       <tr>
         <td width="54" height="60" ><img src="images/shop.gif" >
         </td>
         <td colspan="4"><h2  align="center" > 购物简易计算器</h2></td>
       </tr>
       <tr>
         <td height="32" ><font size="-1">第一个数</font></td>
         <td colspan="4"><input type="text" style="float:left;" size="30" id="num1"></td>
       </tr>
       <tr>
        <td ><font size="-1">第二个数</font></td>
        <td colspan="4"><input type="text" style="float:left;" size="30" id="num2"></td>
       </tr>
       <tr>
        <td><input type="button"style=" width:50px;" value="+" name="add" οnclick="count('+')"></td>
        <td width="70" ><input type="button" style=" width:50px;" value="-" name="sub" onclick="count('-')"></td>
      <td width="90"> <input type="button" style=" width:50px;" value="×" name="mul" onclick="count('×')"></td>
       <td width="50"><input type="button" style=" width:50px;" value="÷" name="div" onclick="count('÷')"></td>
       <td width="78">&nbsp;</td>
       </tr>
       <tr>
       <td ><font size="-1">计算结果</font></td>
       <td  colspan="4"><input type="text" style="float:left;" size="30"  height="20" id="num3"></td>
       </tr>
     </table>
   </form>

</body>
</html>

编程结果：
在这里插入图片描述

2. 使用项目列表制作一个如图7所示的完整的树形菜单页面treeMenu.html

使用带参数的JavaScript函数，通过参数来控制单击某个一级菜单时显示或隐藏该菜单下的二级列表。
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>制作树形菜单</title>
<style type="text/css">
body{font-size:13px;
     line-height:20px;
	 }
a{font-size: 13px;
  color: #000000;
  text-decoration: none;
  }
a:hover{font-size:13px;
        color: #ff0000;
	   }
img {
	vertical-align: middle;
	border:0;
}
.no_circle{list-style:none;
   display:none;
	}
</style>
<script type="text/javascript">
   function show(d1){
	   if(document.getElementById(d1).style.display=='block')
	   {
		   document.getElementById(d1).style.display='none'
	   }
	   else
	   {
		   document.getElementById(d1).style.display='block';
	    }
		
	   }
</script>

</head>

<body>
<b><img src="images/fold.gif">树形菜单：</b>  
<ul><a href="javascript:οnclick=show('art')" ><img src="images/fclose.gif">文学艺术</a></ul>
<ul id="art" class="no_circle" style="display:none;">
	<li><img src="images/doc.gif" >先锋写作</li>
    <li> <img src="images/doc.gif" >小说散文</li>
    <li><img src="images/doc.gif" >诗风词韵</li>
</ul>
<ul><a href="javascript:οnclick=show('photo')"><img src="images/fclose.gif">贴图专区</a></ul>
<ul id="photo" class="no_circle"  style="display:none;">
    <li><img src="images/doc.gif" >真我风采</li>
    <li><img src="images/doc.gif" >视频贴图</li>
    <li><img src="images/doc.gif" >行行摄摄</li>
    <li><img src="images/doc.gif" >Flash贴图</li>
</ul>
<ul><a href="javascript:οnclick=show('home')" ><img src="images/fclose.gif">房产论坛</a></ul>
<ul id="home" class="no_circle" style="display:none;">
    <li><img src="images/doc.gif" >我要买房</li>
    <li><img src="images/doc.gif" >楼市话题</li>
    <li><img src="images/doc.gif" >我要卖房</li>
    <li><img src="images/doc.gif" >租房心语</li>
    <li><img src="images/doc.gif" >二手市场</li>
</ul>
<ul><a href="javascript:οnclick=show('game')" ><img src="images/fclose.gif">娱乐八卦</a></ul>
<ul id="game" class="no_circle" style="display:none;">
    <li><img src="images/doc.gif" >红楼一梦</li>
    <li><img src="images/doc.gif" >笑话论坛</li>
    <li><img src="images/doc.gif" >休闲生活</li>
    <li><img src="images/doc.gif" >大话春秋</li>
</ul>
</body>
</html>

在这里插入图片描述

3. 用JavaScript脚本语言将register.html贵美商城用户注册页面的客户端

校验方法check补充完整，并在表单提交时调用该函数进行用户名、姓氏、密码和邮箱信息的客户端校验，并给出错误提示信息，如下图所示。
在这里插入图片描述
Foot.html:

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>贵美商城</title>
 <link rel="stylesheet"	type="text/css"	href="css/global.css"	/>
 <link rel="stylesheet"	type="text/css"	href="css/layout.css"	/>
</head>

<body>		
		<div id="footer">
			 <div class="copyright">友情链接：&nbsp;&nbsp;<a href="#">百度</a> | <a href="#">Google</a> | <a href="#">雅虎</a> | <a href="#">淘宝</a> | <a href="#">拍拍</a> | <a href="#">易趣</a> | <a href="#">当当</a> | <a href="#">京东商城</a> | <a href="#">迅雷</a> | <a href="#">新浪</a> | <a href="#">网易</a> | <a href="#">搜狐</a> | <a href="#">猫扑</a> | <a href="#">开心网</a> | <a href="#">新华网</a> | <a href="#">凤凰网</a><br />
			 	<hr size="1" />COPYRIGHT &copy;  2003-2010 <a href="index.htm" target="_parent">北京市贵美商城有限公司</a> ALL RIGHT RESERVED<br />
			  	  热线：400-66-13060 Email:service@prd.com<br />
			  		ICP：<a href="#">沪ICP备05021104号</a><br />
			  			<img src="images/img1.gif" alt="alt" /><img src="images/img2.gif" alt="alt" /><img src="images/img3.gif" alt="alt" /><img src="images/img4.gif" alt="alt" />
			 </div><!--copyright	end-->
		</div><!--footer	end-->	
 </body>
</html>

head.html：

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>贵美商城</title>
 <link rel="stylesheet"	type="text/css"	href="css/global.css"	/>
 <link rel="stylesheet"	type="text/css"	href="css/layout.css"	/>
 	<script type="text/JavaScript">
	var strHome = 'http://www.gmgw.com';
	function addFav(){
		switch(getNav()){
			case 1:
			  window.external.addFavorite(strHome,'贵美商城');
			  break;
			case 2:
			  window.sidebar.addPanel('贵美商城',strHome,'');
			  break;
			case 0:
			  alert("加入收藏失败");
			  break;
		}		
		function getNav(){
			if(navigator.userAgent.indexOf("MSIE")!=-1)    return 1;
			if(navigator.userAgent.indexOf("Firefox")!=-1) return 2;
			return 0;
			}
	}
	function setHome(oThis){
		oThis.style.behavior='url(#default#homepage)';
		oThis.setHomePage(strHome);
		return false;
		} 	
	</script>
</head>
<body>
	<div id="container">
		<div id="header">
			<div id="logo"></div>
			<div class="upright_menu">
				<ul>
					<li class="pic pic1"></li>
					<li class="h_text"><a href="buy_commodity.htm" target="_parent">购物车</a></li>
					<li class="pic pic2"></li>
					<li class="h_text"><a href="help.htm" target="_parent">帮助中心</a></li>
					<li class="pic pic5"></li>
					<li class="h_text"><a href="JavaScript:void(0);" onclick="addFav();">加入收藏</a></li>		
					<li class="pic pic6"></li>
					<li class="h_text"><a href="JavaScript:void(0);" onclick="setHome(this);">设为首页</a></li>			
					<li class="bt login h_text"><a href="login.htm" target="_parent">登录</a></li>
					<li class="bt reg h_text"><a href="register.htm" target="_parent">注册</a></li>																																
				</ul>
			</div> <!--upright_menu	end-->
			<div class="upright_bottom">
				<ul>
					<li class="h_text	hello">你好，欢迎访问贵美商城！
						<script type="text/JavaScript">
							now=new Date;
							document.write(now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日"+now.getHours()+"点"+now.getMinutes()+"分");								
						</script>
						</li>
				</ul>
			</div> <!--upright_bottom	end-->
  		<div class="nav">
  			<ul>
  				<li><a href="index.htm" target="_parent">&nbsp;首&nbsp;&nbsp;&nbsp;页&nbsp;</a></li>
  				<li><a href="commoditys_show.htm" target="_parent">家用电器</a></li>
  				<li><a href="commoditys_show.htm" target="_parent">手机数码</a></li>
  				<li><a href="commoditys_show.htm" target="_parent">日用百货</a></li>
  				<li><a href="commoditys_show.htm" target="_parent">&nbsp;书&nbsp;&nbsp;&nbsp;籍&nbsp;</a></li>
  				<li><a href="help.htm" target="_parent">帮助中心</a></li>
  				<li><a href="help.htm" target="_parent">免费开店</a></li>
  				<li><a href="help.htm" target="_parent">全球咨询</a></li>  				
  			</ul>
  		</div>	<!--nav	end-->		
		</div> <!--header	end-->	
 </body>
</html>

Register.html:

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>贵美商城</title>
 <link rel="stylesheet"	type="text/css"	href="css/global.css"	/>
 <link rel="stylesheet"	type="text/css"	href="css/layout.css"	/>
 <script type="text/javascript">
 function checkForm(){ 
  var nametip = checkFirstName(); 
  var nametip = checkLastName(); 
  var passtip = checkPassword();  
  var conpasstip = ConfirmPassword(); 
  var phonetip = isEmail(); 
  return nametip && passtip && conpasstip && phonetip; 
  } 

/*名字的验证*/
function checkFirstName(){ 
  var username = document.getElementById('fname'); 
  var errname = document.getElementById('fname_span'); 
  var pattern = /\u4e00-\u9fa5/; 
  if(username.value.length == 0){ 
    alert("名字不能为空");
    errname.className="error"
    return false; 
    } 
  if(!pattern.test(username.value)){ 
    alert("名字不合规范");
    errname.className="error"
    return false; 
    } 
   else{ 
     errname.innerHTML="OK"
     errname.className="success"; 
     return true; 
     } 
  } 	
       
/*姓氏的验证*/
function checkLastName(){ 
  var username = document.getElementById('lname'); 
  var errname = document.getElementById('lname_span'); 
  var pattern = /\u4e00-\u9fa5/; 
  if(username.value.length == 0){ 
    alert("姓氏不能为空");
    errname.className="error"
    return false; 
    } 
  if(!pattern.test(username.value)){ 
    alert("姓氏不合规范");
    errname.className="error"
    return false; 
    } 
   else{ 
     errname.innerHTML="OK"
     errname.className="success"; 
     return true; 
     } 
  } 	

/*验证密码*/	
function checkPassword(){ 
  var userpasswd = document.getElementById('pass'); 
  var errPasswd = document.getElementById('pass_span'); 
  var pattern = /^\w{6,}$/; //密码要至少包6个字符 
  if(!pattern.test(userpasswd.value)){ 
    alert("密码不合规范");
	
    errPasswd.className="error"
    return false; 
    } 
   else{ 
     errPasswd.innerHTML="OK"
     errPasswd.className="success"; 
     return true; 
     } 
  } 
  //确认密码 
  function ConfirmPassword(){ 
  var userpasswd = document.getElementById('rpass'); 
  var userConPassword = document.getElementById('userConfirmPasword'); 
  var errConPasswd = document.getElementById('rpass_span'); 
  if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){ 
    alert("上下密码不一致");
    errConPasswd.className="error"
    return false; 
    } 
   else{ 
     errConPasswd.innerHTML="OK"
     errConPasswd.className="success"; 
     return true; 
     }    
  } 	

/*验证邮箱*/
function isEmail(strEmail){ 		  						  
  var userpasswd = document.getElementById('email'); 
  var errPasswd = document.getElementById('email_span'); 
  var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;符 
  if(!reg.test(userpasswd.value)){ 
    alert("邮箱不合规范");
    errPasswd.className="error"
    return false; 
    } 
   else{ 
     errPasswd.innerHTML="OK"
     errPasswd.className="success"; 
     return true; 
     } 
}

</script>
</head>

<body>
	<div id="container">
		<iframe id="head" runat="server" src="head.htm" width="980px" height="136px" frameborder="0" scrolling="no"></iframe>

    <form id="form1" method="post" action="register_success.htm">
    <table id="main" class="reg_bg" cellpadding="0px">
      <tbody>
      <tr class="h58">
      	<td colspan="3">&nbsp;</td>
            <td rowspan="11">
    			    <h4><img src="images/read.gif" alt="alt" />阅读贵美网服务协议 </h4>
        			<textarea id="textarea" cols="30" rows="15">欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Gmgw.com网站的各种工具和服务。
  本服务协议双方为贵美与贵美网用户，本服务协议具有合同效力。 
  贵美的权利和义务
    1.贵美有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。 
    2.对用户在注册使用贵美网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，贵美应及时作出回复。 
    3.对于在贵美网网上交易平台上的不当行为或其它任何贵美认为应当终止服务的情况，贵美有权随时作出删除相关信息、终止服务提供等处理，而无须征得用户的同意。 
    4.因网上交易平台的特殊性，贵美没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。 	
  </textarea>
    		    </td>      	
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >名字：</td>
        <td class="input_content"> 
        	<input id="fname" type="text"  class="reg_text"  size="24" onblur="checkFirstName()" />
            <span id="fname_span"></span>
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >姓氏：</td>
        <td class="input_content">
        	<input id="lname" type="text" class="reg_text" size="24" onblur="checkLastName()" />
            <span id="lname_span"></span>
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title"  >登录名：</td>
        <td class="input_content">
        	<input name="sname" type="text"  class="reg_text"   size="24" />（可包含 a-z、0-9 和下划线）
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >密码：</td>
        <td class="input_content">
        	<input id="pass" type="password"  class="reg_text"  size="26" /><span id="pass_span">（至少包含 6 个字符）</span></td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" for="userConfirmPasword" >再次输入密码：</td>
        <td class="input_content">
        	<input id="rpass"  type="password" class="reg_text" size="26" />
            <span id="rpass_span"></span>
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >电子邮箱：</td>
        <td class="input_content">
        	<input id="email"  type="text" class="reg_text" size="24" />（必须包含 @  和.字符）
            <span id="email_span"></span></td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >性别：</td>
        <td class="input_content">
    		  <input id="gen" style="border:0px;" type="radio" value="男" checked="checked" />
    	    <img src="images/Male.gif" width="23" height="21" alt="alt" />男&nbsp; 
    	    <input name="gen" style="border:0px;" type="radio" value="女" class="input" />
    	    <img src="images/Female.gif" width="23" height="21" alt="alt" />女
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >头像：</td>
        <td class="input_content">
        <input type="file" />
        </td>
      </tr>    
      <tr class="register_table_line">
        <td class="input_title" >爱好：</td>
        <td class="input_content">
    	  <label>
    	  	<input type="checkbox" id="checkbox" value="checkbox" />
    	  </label>
    		  运动&nbsp;&nbsp;
    	  <label>
    	  <input type="checkbox" id="checkbox2" value="checkbox" />
    	  </label>
    		聊天&nbsp;&nbsp;
    	  <label>
    		<input type="checkbox" id="checkbox3" value="checkbox" />
    	  </label>
    		玩游戏
    	</td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title">出生日期：</td>
        <td class="input_content">
    		<input id="nYear" class="reg_text n4"  value="yyyy" maxlength="4" />&nbsp;年&nbsp;&nbsp;
    		   <select id="nMonth">
    			   <option value="" selected="selected">[选择月份]</option>
    		     <option value="0">一月</option>
    		     <option value="1">二月</option>
    		     <option value="2">三月</option>
    		     <option value="3">四月</option>
    		     <option value="4">五月</option>
    		     <option value="5">六月</option>
    		     <option value="6">七月</option>
    		     <option value="7">八月</option>
    		     <option value="8">九月</option>
    		     <option value="9">十月</option>
    		     <option value="10">十一月</option>
    		     <option value="11">十二月</option>
    		  </select>&nbsp;月&nbsp;&nbsp;
    		  <input id="nDay"  class="reg_text n4"  value="dd" size="2" maxlength="2" />日
    	</td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title h35" >&nbsp;
            </td>
        <td class="input_content h35">
    		<input type="image" id="Button" style="border:0px;" src="images/submit.gif" /> <img src="images/reset.gif" onclick="javascript:form1.reset();" style="cursor:pointer;" alt="重置" />
    	</td>
      </tr>
      <tr>
      <td colspan="2" class="h65">&nbsp;</td>	
      </tr>
      </tbody>
    </table>	
    </form>		
		<iframe id="foot" runat="server" src="foot.htm" width="980px" height="150px" frameborder="0" scrolling="no"></iframe>
	</div><!--container	end-->
</body>
</html>

register_success:

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>贵美商城</title>
 <link rel="stylesheet"	type="text/css"	href="css/global.css"	/>
 <link rel="stylesheet"	type="text/css"	href="css/layout.css"	/>
</head>

<body>
	<div id="container">
		<div id="header">
			<iframe id="head" runat="server" src="head.htm" width="980px" height="136px" frameborder="0" scrolling="no"></iframe>
				<div class="upright_bottom">
					<ul>
						<li	class="h_text	hello">你好，欢迎访问贵美商城！</li>
					</ul>
					</div> <!--upright_bottom	end-->
		</div> <!--header	end-->		
		<div id="main">
    <!--首页的中间部分-->
	<p>&nbsp; </p>
	<p class="a_c login_success1 login_success2"><img src="./images/logo.jpg" alt="alt" /></p>
	<p class="a_c login_success1 login_success2">祝贺 !!! </p>
	<p class="a_c login_success1 ">您已经通过我们的注册</p>
	<p class="a_c login_success1 login_success3">欢迎来到 拍卖天堂</p>
	<p>&nbsp; </p>

		 </div>	<!--main end-->

		<iframe id="foot" runat="server" src="foot.htm" width="980px" height="150px" frameborder="0" scrolling="no"></iframe>
	</div><!--container	end-->
</body>
</html>

编程结果：
在这里插入图片描述

总结

1. JavaScript中BOM是指什么？
BOM即浏览器对象模型。BOM提供了独立于内容而与浏览器窗口进行交互的对象。由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

2. JavaScript中DOM是指什么？
基于文档对象模型编程，解析HTML的时候。js引擎将HTML页面中每个标签都封装成一对象，通过操作这些对象在页面中显示效果。以一个树状结构进行存储。每一个标签对象代表一个节点，用Node表示。属性：nodeName，称为节点名称。