HTML和JavaScript的应用

<!DOCTYPE html>

<html>

<head>

<meta charset="GBK">

<title>登陆</title>

</head>

<body>

<form action="treat.jsp"method="post">

姓名：<input type="text"name="userName"/><br>

密码：<input type="password"name="userPassw"/><br>

选择性别：<input type="radio" name="sex" value="boy" checked>男

       <input type="radio" name="sex" value="girl">女<br>

选择爱好：<input type="checkbox" name="hobby" value="kandianying">看电影

       <input type="checkbox" name="hobby" value="guangjie">逛街

       <input type="checkbox" name="hobby" value="chihuoguo">吃火锅

       <input type="checkbox" name="hobby" value="kanxiaoshuo">看小说

       <input type="checkbox" name="hobby" value="kanmanhua">看漫画<br>

自我简介：<br>

<textarea name="introduce" rows="8" cols="30"></textarea><br>

<input type="submit" value="确认">

<input type="reset" value="重设">

</form>

</body>

</html>

运行结果如图2.1

图2.1 注册界面

2.拓展一：使用table来对注册界面进行格式控制

使用表格来对注册界面进行格式控制，用table标签中width属性设置为500，表格内容正常显示；默认border属性为0，没有边框；表头caption，tr表示行，td表示列，6行2列的表格。

<!DOCTYPE html>

<html>

<head>

<meta charset="GBK">

<title>登陆</title>

</head>

<body>

<form action="treat.jsp"method="post">

<!--border默认值为0，没有边框-->

    <table width="500">

       <caption>请输入个人信息进行注册</caption>

       <tr>

           <td>姓名：</td>

           <td><input type="text"name="userName"/></td>

       </tr>

       <tr>

           <td>密码：</td>

           <td><input type="password"name="userPassw"/></td>

       </tr>

       <tr>

           <td>选择性别：</td>

           <td><input type="radio" name="sex" value="boy" checked>男

       <input type="radio" name="sex" value="girl">女</td>

       </tr>

       <tr>

           <td>选择爱好：</td>

           <td><input type="checkbox" name="hobby" value="kandianying">看电影

       <input type="checkbox" name="hobby" value="guangjie">逛街

       <input type="checkbox" name="hobby" value="chihuoguo">吃火锅

       <input type="checkbox" name="hobby" value="kanxiaoshuo">看小说

       <input type="checkbox" name="hobby" value="kanmanhua">看漫画</td>

       </tr>

       <tr>

           <td>自我简介：</td>

           <td><textarea name="introduce" rows="8" cols="30"></textarea><br>

       <input type="submit" value="确认">

       <input type="reset" value="重设"></td>

       </tr>

    </table>

</form>

</body>

</html>

运行结果如图2.2

图2.2 table控制格式

3.编写treat.jsp页面，接收表单中的各种信息并显示。

拓展二：接收表单各种信息并显示；

新建jsp文件，Treat.jsp用来接收denglu界面的信息并显示，接收姓名、密码、性别和自我简介都可以用request接收，如接收name用String name=request.getParaMeter(”name”）;由于爱好可以多选，这里接收是将每个爱好的value都显示出来用到了一个for循环。

<%@ page language="java" contentType="text/html; charset=GBK"

    pageEncoding="GBK"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="GBK">

<title>处理用户表单</title>

</head>

<body>

    <%

       String name=request.getParameter("userName");

       String passw=request.getParameter("userPassw");

    %>

    您好！<%=name %><br>

    您的密码是<%=passw %><br>

    <%

       String sex=request.getParameter("sex");

       out.println("性别为："+sex);

    %><br>

    爱好为：

    <%

       String[] hobbies = request.getParameterValues("hobby");

       for(int i=0;i<hobbies.length;i++){

           out.println(hobbies[i]);

       }

    %><br>

    <%

       String introduce=request.getParameter("introduce");

       out.println("个人简介："+introduce);

    %>

</body>

</html>

在注册界面输入相关信息如图2.3。

图2.3 输入注册信息

点击确认跳转到treat.jsp界面，如图2.4

图2.4 接收并显示信息

4.扩展三：分别利用JavaScript技术和JSP技术实现检查用户名和密码是否为空，并思考分析两种方式各自6的优缺点；

①用JavaScript技术编写

用JavaScript技术编写，代码放在denglu.html中添加formCheck函数，用script标签中type=“type/JavaScript”。使用<script></script>，标准是写在head和body之间（脖子位置），但其实只要写在HTML文件内部就可以，无论什么位置<html>外，<p></p>内部，都可以。

JavaScript 可以在 HTML 表单数据发往服务器前验证其正确性，验证表单数据是否为空，此时服务器已经产生相应，判断服务器上的表单信息是否为空。如果用户名或者密码为空给出提示，填写完整输出相关信息。

<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>登陆</title>
</head>
<script type="text/javascript">
	function formCheck(){
		name=document.loginForm.userName.value;
		password=document.loginForm.userPassw.value;
		if(name==""){
			alert("用户名不能为空！");
			document.loginForm.name.value;
			return;
		}
		else if(password==""){
			alert("密码不能为空！");
			document.loginForm.password.value;
			return;
		}
		document.loginForm.submit();
	}
</script>
<body>
<form action="treat.jsp"method="post" name="loginForm">
<!--border默认值为0，没有边框-->
	<table width="500">
		<caption>请输入个人信息进行注册</caption>
		<tr>
			<td>姓名：</td>
			<td><input type="text"name="userName"/></td>
		</tr>
		<tr>
			<td>密码：</td>
			<td><input type="password"name="userPassw"/></td>
		</tr>
		<tr>
			<td>选择性别：</td>
			<td><input type="radio" name="sex" value="boy" checked>男
		<input type="radio" name="sex" value="girl">女</td>
		</tr>
		<tr>
			<td>选择爱好：</td>
			<td><input type="checkbox" name="hobby" value="kandianying">看电影
		<input type="checkbox" name="hobby" value="guangjie">逛街
		<input type="checkbox" name="hobby" value="chihuoguo">吃火锅
		<input type="checkbox" name="hobby" value="kanxiaoshuo">看小说
		<input type="checkbox" name="hobby" value="kanmanhua">看漫画</td>
		</tr>
		<tr>
			<td>自我简介：</td>
			<td><textarea name="introduce" rows="8" cols="30"></textarea><br>
		<input type="submit" value="确认" onclick="formCheck()">
		<input type="reset" value="重设"></td>
		</tr>
	</table>
</form>
</body>
</html>

JavaScript技术编写登陆页面，当用户名或密码为空时，弹出提示框，如图2.5

图2.5 JavaScript技术编写错误提示

②用JSP技术编写

jsp技术在jsp文件中编写主要是用Java代码，是建立在servlet规范基础上的动态网页开发技术。

这里使用 JSP 的 request.getParameter 方法来获取表单中的用户名和密码，并使用 Java 来进行验证。如果用户名或密码为空，会通过 JavaScript 弹出一个警告框来提示用户。否则，可以在后续代码中进行其他处理。

equals方法是判断两个变量或者实例指向同一个内存空间的值是不是相同而==是判断两个变量或者实例是不是指向同一个内存空间举个通俗的例子来说，==是判断两个人是不是住在同一个地址，而equals是判断同一个地址里住的人是不是同一个人。

if（str1==null||str1.equals（""））{ //所以在判断字符串是否为空时，先判断是不是对象，如果是，再判断是不是空字符串 }4. 所以，判断一个字符串是否为空，首先就要确保他不是null,然后再判断他的长度。

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>处理用户表单</title>
</head>
<body>
	<%
	    request.setCharacterEncoding("GBK");
		String name=request.getParameter("userName");
		String passw=request.getParameter("userPassw");
		String sex=request.getParameter("sex");
		String[] hobbies = request.getParameterValues("hobby");
		String introduce=request.getParameter("introduce");
		if(name==null||name.equals("")||passw==null||passw.equals("")){
			out.println("请输入用户名和密码！");
		}
		else{
	%>
	<p>
	您好！<%=name%> <br/>
	您的密码是<%=passw %><br/>
	性别为：<%=sex %><br/>
	爱好为：<% 
			
			for(int i=0;i<hobbies.length;i++){
				out.println(hobbies[i]);
			}%><br>
	个人简介：<%=introduce %><br/>
	<%} %>
</body>
</html>

在登陆页面不输入姓名和密码，将其他信息填写完整，如图2.6

图2.6 信息空缺

点击确认进行登录，可以看到这时页面已经到了treat.jsp而不是denglu.html，是一个新的页面了，如图2.7

图2.7 jsp技术编写错误提示

③JavaScript技术和JSP技术各自的优缺点

用JavaScript技术和JSP技术实现检查用户名和密码是否为空，代码位置是不同的，前者代码放在denglu.html，后者则在jsp文件中。这也是因为html文件和jsp文件的区别：html页面是静态页面，也就是事先由用户写好放在服务器上，有web服务器向客户端发送。jsp页面是由jsp容器执行该页面的Java代码部分，然后实时生成的html页面，是服务器端的动态页面。

JavaScript技术：

优点：

在客户端执行，无需发起请求，不需要服务器的交互，相应速度快，即时进行验证。
提供了交互性和实时性，用户输入不合法时可以立即给予反馈，可以在用户输入时及时检查，及时给出错误提示。
JavaScript可以在客户端执行，无需向服务器发送请求，因此能够减轻服务器的负担。

缺点：

客户端验证容易被绕过，如果禁用了JavaScript或者使用其他方式提交表单，校验无效，存在安全隐患。依赖于 JavaScript 的支持，若浏览器禁用了 JavaScript，验证功能将无效。
密码等安全信息通过JavaScript暴露在客户端，可能会被恶意代码窃取。

JSP技术：

优点：

在服务器端执行验证，JSP是在服务器端执行的，可以进行更严格的校验，无法被绕过，避免由于绕过客户端校验带来的安全问题。
提供了较高的安全性，对用户输入进行校验，可防范恶意注入攻击，不受客户端环境限制，无论用户是否禁用JavaScript都能进行校验。
JSP可以生成动态内容，使Web页面能够根据用户请求和数据改变自身内容。

缺点：

需要发起请求到服务器端，每次提交表单都需要向服务器发送请求，增加了服务器的负担和响应时间。
用户输入不合法时，需要等待服务器端返回结果才能给予反馈，对用户来说延迟较高。

综上所述，JavaScript技术的校验方式在一些简单的校验场景下效果较好，并且能提供实时反馈，但需要注意安全性和可靠性问题；而JSP技术的校验方式相对可靠，但在性能和用户体验方面稍逊一筹。具体使用哪种方式需要根据具体需求和场景来决定。

5.扩展四：利用CSS技术对注册界面进行格式控制；

①先对页面背景进行替换，这里放置图片，图片可以放到denglu.html文件同一文件夹下，这时只用相对地址即可，如果图片在其他位置要准确写出图片的绝对位置，这里我用的是相对地址，直接写出image文件名，在<head></head>标签中写一个<style></style>标签，用body{}选择器插入一张图片设置大小占整个布局的全部。

body{
		background: url("picture.jpg") no-repeat;
		background-size: 100%;
		padding-top:25px;
		}

②对网页中间进行编辑，在外层div中需要构建一个中间层div，获得中间的一个表格框架.center-arrow和.center-arrow_1，设置一下其背景颜色为紫色，以及边框大小和颜色，设置好后，继续调整一下表格与在整个页面的位置

.center-arrow{
			width:900px;
			height:500px;
			border:8px solid #EEEEEE;
			background-color: thistle;
			margin:auto;
			margin-top: 40px;
		}
		.center-arrow_1{
			float: lsft;
			margin-top: 45px;
			margin-left: 130px;
		}

③ 后面就是继续定义内层div写如注册内容，其中内层涉及到了浮动，需要设置整个页面在浮动后大小不变需要设置：box-sizing: border-box

*{
			margin:0;
			padding:0;
			box-sizing: border-box;
		}

④对于表格进行段落大小调整，用到了 .p1 .p2 .p3种格式

        .p1{
			color:#000000;
			font-size:30px;
		}
		
		.p2{
			text-align: right;
			line-height: 50px;
			font-size: 20px;
		}
		.p3{
			padding-left: 20px;
		}

⑤对表单内容进行格式调整，表单中信息和两个按钮都进行了格式调整，根据对应的class或者id设置字体大小、颜色以及位置

#userName,#userPassw,#sex,#hobby,#introduce{
			width:300px;
			height:30px;
			border-radius: 5px;
			padding-left: 10px;
		}	
		#button1,#button0{
			width:auto;
			margin-top: 15px;
			background-color: floralwhite;
		}

中间部分如图2.8

图2.8 中间框架

⑥完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>登陆</title>
<style>
	body{
		background: url("picture.jpg") no-repeat;
		background-size: 100%;
		padding-top:25px;
		}
		*{
			margin:0;
			padding:0;
			box-sizing: border-box;
		}
		.center-arrow{
			width:900px;
			height:500px;
			border:8px solid #EEEEEE;
			background-color: thistle;
			margin:auto;
			margin-top: 40px;
		}
		.center-arrow_1{
			float: lsft;
			margin-top: 45px;
			margin-left: 130px;
		}
		
		.p1{
			color:#000000;
			font-size:30px;
		}
		
		.p2{
			text-align: right;
			line-height: 50px;
			font-size: 20px;
		}
		.p3{
			padding-left: 20px;
		}
		#userName,#userPassw,#sex,#hobby,#introduce{
			width:300px;
			height:30px;
			border-radius: 5px;
			padding-left: 10px;
		}	
		#button1,#button0{
			width:auto;
			margin-top: 15px;
			background-color: floralwhite;
		}
</style>
</head>

<body>
	<div class="arrow_1">
		<div class="center-arrow">
			<div class="center-arrow_1">
			
	
 <form action="treat.jsp"method="post" name="loginForm" onsubmit="return check()">
	

	<table width="500">
	 	<caption class="p1">请输入个人信息进行登陆</caption>
		<tr>
			<td width="200" align="center" class="p2">姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名：</td>
			<td width="300" class="p2">
				<input type="text"name="userName"/></td>
		</tr>
		<tr>
			<td class="p2">密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码：</td>
			<td class="p3">
				<input type="password"name="userPassw"/></td>
		</tr>
		<tr>
			<td class="p2">选择性别：</td>
			<td class="p3">
				<input type="radio" name="sex" value="boy" checked>男&nbsp&nbsp&nbsp&nbsp
		<input type="radio" name="sex" value="girl">女</td>
		</tr>
		<tr>
			<td class="p2">选择爱好：</td>
			<td><input type="checkbox" name="hobby" value="xuexi">学习
		<input type="checkbox" name="hobby" value="guangjie">逛街
		<input type="checkbox" name="hobby" value="yundong">运动
		<input type="checkbox" name="hobby" value="kanxiaoshuo">看小说
		<input type="checkbox" name="hobby" value="kanmanhua">看漫画</td>
		</tr>
		<tr>
			<td class="p2">自我简介：</td>
			<td class="p3"><textarea name="introduce" rows="8" cols="30"></textarea></td>
		</tr>
		<tr>
			<td align="left" colspan="2"><input type="submit" value="确&nbsp&nbsp认" id="button0" onclick="formCheck()"></td>
			<td align="center" colspan="2"><input type="reset" value="重&nbsp&nbsp设" id="button1"></td>
		</tr>
		
	
	</table>
</form>
</div>
</div>
	</div>
</body>
</html>

编辑完效果图如图2.9

图2.9 CSS技术编辑效果图

六、实验心得

实验是一些基础html和jsp的应用，并不难，考查对不同表单元素，以及表单中元素的获取，两种不同的提交方式，JSP技术和JavaScript技术各自的优缺点。最后拓展部分用到了CSS技术，CSS技术涉及的知识较多，页面布局，字体格式，行列大小，背景图片，悬浮框架等，这里给出了相应的代码，后续会出相关CSS技术的详细介绍，这里只是简单描述一下。

本文仅供参考，如有不足，感谢提出宝贵意见！