實驗1 Web 客戶端編程
一、實驗目的及要求
使用HTML超文本標記語言制作簡單頁面，要求通過實驗能夠掌握HTML檔案的基本結構和檔案的創建、編輯及保存，
驗證并掌握HTML超文本標記語言的文本、影像、超鏈接、表格、表單等標記的使用，
通過實驗掌握層疊樣式表CSS的創建及應用，掌握在網頁中插入層疊樣式表CSS的常用方法，掌握層疊樣式表CSS的主要基本屬性的使用，
通過實驗了解JavaScript的編程規范及基本語法，能夠分析JavaScript程式的功能，可以在網頁制作中使用JavaScript程式，
二、實驗內容及步驟
1）使用frameset標簽，以及搭配使用DIV+CSS，設計并布局一個簡單的頁面，
2）在其中的一個頁面里面，開發一個用戶注冊界面，要求：使用JavaScript檢查格式是否正確，
三、實驗程序及結果
1、提交本次實驗的實驗報告，
主頁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="./科普時報.html">科普時報</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>“大爆炸宇宙論”（The Big Bang Theory）認為：宇宙是由一個致密熾熱的奇點于137億年前一次大爆炸后膨脹形成的，1927年，
比利時天文學家和宇宙學家勒梅特（Georges Lema?tre）首次提出了宇宙大爆炸假說，1929年，美國天文學家哈勃根據假說提出星系的紅
移量與星系間的距離成正比的哈勃定律，并推匯出星系都在互相遠離的宇宙膨脹說，</p>
</div>
<div id="footer">
<p>關于|廣告服務|客服中心|網站管理</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(){
//單擊一次提交 呼叫函式之前先清掉上一次的檢查資訊，
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位以上密碼";
return false;
}else{
if(allforms[0].psw.value != allforms[0].sureName.value){
surePswSpan.innerText = "兩次密碼輸入的不一致";
return false;
}
}
//驗證電子郵箱
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 = "請輸入正確的手機號碼";
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="./科普時報.html">科普時報</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>
電子郵件</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" onclick = "return check()" value = "注冊"/>
</td><td><input type = "button" value = "重置"/></td></tr>
</table>
</form> </div>
<div id="footer">
<p>關于|廣告服務|客服中心|網站管理</p>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/182869.html
標籤：python
上一篇：5G的認識