实验1： HTML、JSP页面指令及代码片段
实验1：HTML、JSP页面指令及代码片段
姚远
2013-9-21
实验目的：
1、掌握Eclipse、Tomcat的开发环境整合
2、掌握html中常用标记的含义和应用
3、掌握JSP基本概念。
4、熟悉JSP页面指令使用。
5、熟悉初步的JSP代码片段应用编程
6、掌握WEB项目中集合类如何应用于页面。
实验内容：
一.配置Eclipse、Tomcat开发环境，并新建Web项目。
要求：
将实验室计算机C盘的Tomcat、Eclipse等文件夹拷贝到D：\.在Eclipse中整合Tomcat，新建Web项目测试开发环境是否搭建成功。
通过新建Java Project向导即可完成一个JavaApplication类型的项目新建。如果要进行包含动态网页程序的Web应用开发，则要在Eclipse中使用Dynamic Web Project的新建向导，如图：
然后一步步按照提示完成。即可在建立完毕的Web项目中新建.html和.jsp等文件了。思考1：如何查看该项目源码在硬盘中的存储位置？
二.在WEB项目中添加HTML文件/JSP文件
HTML：超文本标记语言（同时也被翻译成超文本标签语言）。
1.HTML 文件是包含一些标记的文本文件。这些标记告诉WEB 浏览器如何显示页面。
2.标记一般成对出现，用于表示一定的含义，如
和
表示段落，和
之间的文本都在这个段落之内，表示段落开始，
表示段落结束和 标记中的文本将以粗体显示。
3.HTMl文件一般以.html为扩展名。WEB服务器不对HTML文件作解析，直接发送给客户端，由客户端浏览器负责解析。如IE、Firefox
练习1：
这是我的第一个页面。这是粗体文本。
1)找到硬盘中该文件所在的存储路径，直接通过浏览器中打开该文件，查看页面显示效果；
2)将该文件另存为test.jsp.如何“查看”页面效果？
三.JSP页面元素：页面指令与代码片段
(一)概述
1.HTML的功能是有限的，使用html可以创建静态内容，无论何时访问使用html技
术开发的网站站点，获得的网页内容都是一样的（同样的动画、图片、背景音乐、
文字等）。如果希望网页中的内容能动态发生变化，就需要使用动态网页编程技术，
JSP是这类技术中之一。JSP的全称：JavaServer Pages
2.JSP将HTML标记与Java语言结合，具备Java程序设计语言的全部优点。
3.JSP文件一般以.jsp为扩展名，由WEB服务器(如Tomcat)负责解析后转换成HTML
文本（构成最终页面）发送给客户端.
(二)页面指令
页面指令是独立于每个请求的，对整个页面有全局性影响的信息。
在JSP页面中的语法是: <%@ 页面指令...%>,斜体部分应该被具体的指令所代替。此处以Page指令为例：
Page指令的设置通过属性和属性值的说明而定。以import属性为例，
Page的import属性用来引入外部JAVA程序包。当JSP页面内部的代码片段需要应用外部程序包时，必须使用Page的import属性说明需要引用的包或者类名。
<%@page import="HandlePayroll.FulltimeTeacher"%>
<%@page import="java.util.*,java.util.Calendar;" %>
(三)代码片段
表达式代码片断（一般形式为：<%= 表达式%>）。表达式代码片段在被解析后，将会把相应表达式的值传递给最终页面
Java代码片断，（一般形式为：<% Java代码片段%>）。
练习2：
1.在已经建立的Web项目中，新建SimpleWebPage.jsp文件。具体步骤为：在Project Explorer面板中，选择其中一个已经存在的WEB项目，如WebPros，并于右键弹出菜单中选New->JSP.
参考代码为：
<%@page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
"https://www.360docs.net/doc/f35057737.html,/TR/html4/loose.dtd">
这是一个网页，可以显示数字，数字的个数和值由循环次数决定.
Font是用于网页文本相关设置的标记，字体的大小由size属性决定。如
<%
for( int i=3 ;i<=7;i++)
{%>
数字：<%=i%>
<%
}
%>
分析上述JSP代码：
应能分辨其中哪些是HTML代码、哪些是Java代码。应该注意的是，Java代码无论是一般语句、还是语句中的一部分，如“{”，都需要按照如上
<% Java代码片段%>
的形式进行编写。
理解上述JSP代码时，应知道使用Java语句去“控制”页面显式的内容：
1.“数字：”，因位于循环体中，所以在最终页面上显式了5个；
2.<%=i%>
是Java表达式片段，它的值对应的是循环变量，也是在不断变化的，同样位于循环体中，在最终页面上会被显示。
运行程序：
具体步骤为：在Package Explore面板中选择 SimpleWebPage.jsp，右击菜单选择Run As->Run On Server.运行成功后应能看到:
练习3：完成网页代码编写，网页执行效果为：
练习4：将前述简单高校工资管理程序新增JSP页面输出信息功能：输出一个教师的信息
此JSP页面需要引入前述实验已经完成的包:将源程序文件拷贝到当前项目的src文件夹，然后在Eclipse中点击菜单项“refresh”。再编写代码：通过页面指令page的import属性来完成相应导入的包。
参考代码：
<%@page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@page import="Ex2_Payroll.*"%>
"https://www.360docs.net/doc/f35057737.html,/TR/html4/loose.dtd">
<%
FulltimeTeacher teacher = new FulltimeTeacher("张三","副教授");
%>
<%=teacher.getName() %>
运行程序，看看页面运行效果
4.在上述基础上进行改进，输出5个教师的信息。
使得JSP页面运行效果如下：
5.将上题的输出数据进行重新组织：使用Table标记排列输出数据，参考效果为：
注意：此table中的表格线宽度和颜色是使用border属性和bordercolor属性的，如：
| 序号 | 姓名 | 职称 |
|---|---|---|
| 006 | 猫黄 | 捉鼠能手 |
页面效果：