JavaWeb實(shí)驗(yàn)1 Web 客戶端編程

發(fā)表時(shí)間：2020-10-18

發(fā)布人：葵宇科技

瀏覽次數(shù)：48

實(shí)驗(yàn)1 Web 客戶端編程
一、實(shí)驗(yàn)?zāi)康募耙?br /> 使用HTML超文本標(biāo)記語(yǔ)言制作簡(jiǎn)單頁(yè)面，要求通過(guò)實(shí)驗(yàn)?zāi)軌蛘莆誋TML文件的基本結(jié)構(gòu)和文檔的創(chuàng)建、編輯及保存。
驗(yàn)證并掌握HTML超文本標(biāo)記語(yǔ)言的文本、圖像、超鏈接、表格、表單等標(biāo)記的使用。
通過(guò)實(shí)驗(yàn)掌握層疊樣式表CSS的創(chuàng)建及應(yīng)用，掌握在網(wǎng)頁(yè)中插入層疊樣式表CSS的常用方法，掌握層疊樣式表CSS的主要基本屬性的使用。
通過(guò)實(shí)驗(yàn)了解JavaScript的編程規(guī)范及基本語(yǔ)法，能夠分析JavaScript程序的功能，可以在網(wǎng)頁(yè)制作中使用JavaScript程序。

二、實(shí)驗(yàn)內(nèi)容及步驟
1）使用frameset標(biāo)簽，以及搭配使用DIV+CSS，設(shè)計(jì)并布局一個(gè)簡(jiǎn)單的頁(yè)面。
2）在其中的一個(gè)頁(yè)面里面，開(kāi)發(fā)一個(gè)用戶注冊(cè)界面，要求：使用JavaScript檢查格式是否正確。

三、實(shí)驗(yàn)過(guò)程及結(jié)果
1、提交本次實(shí)驗(yàn)的實(shí)驗(yàn)報(bào)告。
主頁(yè)html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主頁(yè)</title>
   <style type="text/css">
    #header{
     padding:5px;
     text-align:center;
     background:#000000;
     color:#F8F8FF;
     }
    #nav{
     line-height:35px;
     width:100px;
     background:#F0FFFF;
     height:300px;
     text-align:center;
     float:left;
     padding:5px;
     }
    #main{
      width:450px;
      float:left;
      padding:10px;
     }
    #footer{
    clear:both;
    padding:3px;
    text-align:center;
    background:#000000;
    color:#F8F8FF;
    }
  </style>
</head>
<body>
  <div id="header"><h1>Popular Science Network</h1></div>
  <div id="nav">
       <strong>主頁(yè)</strong>
    <br/>
        <a href="./科普時(shí)報(bào).html">科普時(shí)報(bào)</a>
    <br/>
        <a href="./科普咨訊.html">科普咨訊</a>
    <br/>
        <a href="./科幻世界.html">科幻世界</a> 
     <br/>
       <a href="./注冊(cè)頁(yè)面.html">用戶注冊(cè)</a> 
  </div>
  <div id="main"><h1>The Big Bang Theory</h1> 
    <p>“大爆炸宇宙論”（The Big Bang Theory）認(rèn)為：宇宙是由一個(gè)致密熾熱的奇點(diǎn)于137億年前一次大爆炸后膨脹形成的。1927年，
           比利時(shí)天文學(xué)家和宇宙學(xué)家勒梅特（Georges Lema?tre）首次提出了宇宙大爆炸假說(shuō)。1929年，美國(guó)天文學(xué)家哈勃根據(jù)假說(shuō)提出星系的紅
          移量與星系間的距離成正比的哈勃定律，并推導(dǎo)出星系都在互相遠(yuǎn)離的宇宙膨脹說(shuō)。</p>
  </div>
   <div id="footer">
   <p>關(guān)于|廣告服務(wù)|客服中心|網(wǎng)站管理</p>
   </div>
</body>
</html>

主頁(yè)圖
用戶注冊(cè)頁(yè)面html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注冊(cè)新用戶</title>
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="register.css">
    <script type="text/javascript" language = "javascript">
		var allforms = document.forms;
		function check(){
			//單擊一次提交  調(diào)用函數(shù)之前先清掉上一次的檢查信息。
			userNameSpan.innerText = "";
			pswSpan.innerText = "";
			surePswSpan.innerText = "";
			emailSpan.innerText = "";
			telSpan.innerText = "";
			//驗(yàn)證用戶名
		    var len = allforms[0].userName.value.length;
		    if(len<4 || len>6){
		    	userNameSpan.innerText = "請(qǐng)輸入4-6位字符";
		    	return false;
		    }
		    //驗(yàn)證密碼
		    len = allforms[0].psw.value.length;
		    if(len<5){
		    	pswSpan.innerText = "請(qǐng)輸入5位以上密碼";
		    	return  false;
		    }else{
		    	if(allforms[0].psw.value != allforms[0].sureName.value){
		    		surePswSpan.innerText = "兩次密碼輸入的不一致";
		    		return  false;
		    	}
		    }
			//驗(yàn)證電子郵箱
			var con = allforms[0].emailName.value;
			var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|org|net)$/gi;
			if(!myReg.test(con)){
				emailSpan.innerText = "郵箱格式錯(cuò)誤";
				return false;
			}
			//驗(yàn)證電話號(hào)碼
			var tel = allforms[0].tel.value;
		    var myReg = /(\d){7,11}/gi;
		    if(!myReg.test(tel)){
		    	telSpan.innerText = "請(qǐng)輸入正確的手機(jī)號(hào)碼";
		    	return false;
		    }
		}
	</script>
   <style type="text/css">
    #header{
     padding:5px;
     text-align:center;
     background:#000000;
     color:#F8F8FF;
     }
    #nav{
     line-height:35px;
     width:100px;
     background:#F0FFFF;
     height:300px;
     text-align:center;
     float:left;
     padding:5px;
     }
    #main{
      width:450px;
      float:left;
      padding:10px;
     }
    #footer{
    clear:both;
    padding:3px;
    text-align:center;
    background:#000000;
    color:#F8F8FF;
    }
  </style>
</head>
<body>
  <div id="header"><h1>Popular Science Network</h1></div>
  <div id="nav">
        <a href="./主頁(yè).html">主頁(yè)</a>
    <br/>
        <a href="./科普時(shí)報(bào).html">科普時(shí)報(bào)</a>
    <br/>
        <a href="./科普咨訊.html">科普咨訊</a>
    <br/>
       <a href="./科幻世界.html">科幻世界</a> 
       <br/>
  <strong>注冊(cè)頁(yè)面</strong>
  </div>
  <div id="main"> <h1>用戶注冊(cè)</h1>
    <form action="#" method = "post">
    	<table border = "0">
    	<tr><td class = "td1">
    	用戶　名
    	</td><td class = "td2"><input class = "input1" type = "text" name ="userName" value = ""/>
    	<span id = "userNameSpan" class = "span1"></span></td></tr>
    	<tr><td>
    	密　　碼</td><td><input class = "input1" name = "psw" type = "password" value = ""/>
    	<span id = "pswSpan" class = "span1"></span></td></tr>
    	<tr><td>
    	確認(rèn)密碼</td><td><input class = "input1" name = "sureName" type = "password" value = ""/>
    	<span id = "surePswSpan" class = "span1"></span></td></tr>
    	<tr><td>
    	電子郵件</td><td><input class = "input1" name = "emailName" type = "text" value = ""/>
    	<span id = "emailSpan" class = "span1"></span></td></tr>
    	<tr><td>
    	手機(jī)號(hào)碼</td><td><input class = "input1" name = "tel" type = "text" value = ""/>
    	<span id = "telSpan" class = "span1"></span></td></tr>
    	<tr><td><input type = "submit" >= "return check()" value = "注冊(cè)"/>
    	</td><td><input type = "button" value = "重置"/></td></tr>
    	</table>
    </form>  </div>
   <div id="footer">
   <p>關(guān)于|廣告服務(wù)|客服中心|網(wǎng)站管理</p>
   </div>
</body>
</html>