JavaWeb實驗1 Web 客戶端編程
發表時(shí)間：2020-10-18
發布人(rén)：融晨科技
浏覽次數：48
實驗1 Web 客戶端編程
一、實驗目的(de)及要(yào / yāo)求
使用HTML超文本标記語言制作簡單頁面，要(yào / yāo)求通過實驗能夠掌握HTML文件的(de)基本結構和(hé / huò)文檔的(de)創建、編輯及保存。
驗證并掌握HTML超文本标記語言的(de)文本、圖像、超鏈接、表格、表單等标記的(de)使用。
通過實驗掌握層疊樣式表CSS的(de)創建及應用，掌握在(zài)網頁中插入層疊樣式表CSS的(de)常用方法，掌握層疊樣式表CSS的(de)主要(yào / yāo)基本屬性的(de)使用。
通過實驗了(le／liǎo)解JavaScript的(de)編程規範及基本語法，能夠分析JavaScript程序的(de)功能，可以(yǐ)在(zài)網頁制作中使用JavaScript程序。
二、實驗内容及步驟
1）使用frameset标簽，以(yǐ)及搭配使用DIV+CSS，設計并布局一個(gè)簡單的(de)頁面。
2）在(zài)其中的(de)一個(gè)頁面裏面，開發一個(gè)用戶注冊界面，要(yào / yāo)求：使用JavaScript檢查格式是(shì)否正确。
三、實驗過程及結果
1、提交本次實驗的(de)實驗報告。
主頁html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主頁</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>主頁</strong>
<br/>
<a href="./科普時(shí)報.html">科普時(shí)報</a>
<br/>
<a href="./科普咨訊.html">科普咨訊</a>
<br/>
<a href="./科幻世界.html">科幻世界</a>
<br/>
<a href="./注冊頁面.html">用戶注冊</a>
</div>
<div id="main"><h1>The Big Bang Theory</h1>
<p>“大(dà)爆炸宇宙論”（The Big Bang Theory）認爲(wéi / wèi)：宇宙是(shì)由一個(gè)緻密熾熱的(de)奇點于(yú)137億年前一次大(dà)爆炸後膨脹形成的(de)。1927年，
比利時(shí)天文學家和(hé / huò)宇宙學家勒梅特（Georges Lema?tre）首次提出(chū)了(le／liǎo)宇宙大(dà)爆炸假說(shuō)。1929年，美國(guó)天文學家哈勃根據假說(shuō)提出(chū)星系的(de)紅
移量與星系間的(de)距離成正比的(de)哈勃定律，并推導出(chū)星系都在(zài)互相遠離的(de)宇宙膨脹說(shuō)。</p>
</div>
<div id="footer">
<p>關于(yú)|廣告服務|客服中心|網站管理</p>
</div>
</body>
</html>
用戶注冊頁面html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注冊新用戶</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(){
//單擊一次提交 調用函數之(zhī)前先清掉上(shàng)一次的(de)檢查信息。
userNameSpan.innerText = "";
pswSpan.innerText = "";
surePswSpan.innerText = "";
emailSpan.innerText = "";
telSpan.innerText = "";
//驗證用戶名
var len = allforms[0].userName.value.length;
if(len<4 || len>6){
userNameSpan.innerText = "請輸入4-6位字符";
return false;
}
//驗證密碼
len = allforms[0].psw.value.length;
if(len<5){
pswSpan.innerText = "請輸入5位以(yǐ)上(shàng)密碼";
return false;
}else{
if(allforms[0].psw.value != allforms[0].sureName.value){
surePswSpan.innerText = "兩次密碼輸入的(de)不(bù)一緻";
return false;
}
}
//驗證電子(zǐ)郵箱
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 = "郵箱格式錯誤";
return false;
}
//驗證電話号碼
var tel = allforms[0].tel.value;
var myReg = /(\d){7,11}/gi;
if(!myReg.test(tel)){
telSpan.innerText = "請輸入正确的(de)手機号碼";
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="./主頁.html">主頁</a>
<br/>
<a href="./科普時(shí)報.html">科普時(shí)報</a>
<br/>
<a href="./科普咨訊.html">科普咨訊</a>
<br/>
<a href="./科幻世界.html">科幻世界</a>
<br/>
<strong>注冊頁面</strong>
</div>
<div id="main"> <h1>用戶注冊</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>
确認密碼</td><td><input class = "input1" name = "sureName" type = "password" value = ""/>
<span id = "surePswSpan" class = "span1"></span></td></tr>
<tr><td>
電子(zǐ)郵件</td><td><input class = "input1" name = "emailName" type = "text" value = ""/>
<span id = "emailSpan" class = "span1"></span></td></tr>
<tr><td>
手機号碼</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 = "注冊"/>
</td><td><input type = "button" value = "重置"/></td></tr>
</table>
</form> </div>
<div id="footer">
<p>關于(yú)|廣告服務|客服中心|網站管理</p>
</div>
</body>
</html>
