互联网软件开发——实验一 JSP 实验环境搭建与静态网页

最新推荐文章于 2023-02-20 09:31:03 发布

流明呀

最新推荐文章于 2023-02-20 09:31:03 发布

阅读量2k

点赞数 2

分类专栏： JSP实验文章标签： html web jsp

本文链接：https://blog.csdn.net/qq_45561313/article/details/109356805

版权

JSP实验专栏收录该内容

6 篇文章 7 订阅

订阅专栏

实验名称：实验一 JSP 实验环境搭建与静态网页

一、实验目的

1、熟悉 MyEclipse 开发环境，掌握创建、部署和运行 Java Web 项目的步骤。
2、了解 HTML、CSS 和 JavaScript 的基本语法。
3、掌握 JSP 页面的创建方法、基本语法和执行过程。

二、实验内容

1、使用 MyEclipse 创建 Web 工程【Web Project】。
2、编写静态页面【now.html】和动态页面【now.jsp】，分别以 JavaScript 和 Java 两种方式获
得当前时间，并呈现于页面中。
3、部署工程到 MyEclipse 內建的 Tomcat 并启动 Tomcat。
4、用浏览器访问上述页面

三、实验步骤及其实现

1、启动 MyEclipse Professional 2014。

2、新建 Web 工程：File → New → Web Project。

3、新建 HTML 文件：在【WebRoot】上单击右键 → New → File

4、编辑【now.html】并保存

<html>
<head>
<title>走动的时间（HTML版）</title>
 
<!-- 页面的CSS样式放在style标签中 -->
<style type="text/css">
.nowDiv { /* class选择器，对页面中所有class属性包含nowDiv的元素生效 */
font-size: 32px; /* 字号 */
}

#nowSpan { /* id选择器，对页面中id属性为nowSpan的那个元素生效 */
color: #ff0000; /* 前景色 */
border-bottom: 2px dotted blue; /* 下边框（粗细、样式、颜色） */
}
</style>
 
<!-- 页面的JavaScript代码放在script标签中 -->
<script type="text/javascript">
function setNow() { /* 修改span元素的内容 */
var now = new Date(); // 得到系统(浏览器所在机器)当前时间
var h = now.getHours(); // 时、分、秒
var m = now.getMinutes();
var s = now.getSeconds();
 
h = h < 10 ? ("0" + h) : h; // 时、分、秒若不够两位，则加前导零
m = m < 10 ? ("0" + m) : m;
s = s < 10 ? ("0" + s) : s;

// 根据id得到页面元素对象
var nowSpan = document.getElementById("nowSpan");
nowSpan.innerHTML = h + ":" + m + ":" + s; // 修改元素的内容
 } 
function start() {
setInterval(setNow, 1000); // 每过1秒调用一次上面的函数
}
</script>
</head>
 
<body onload="start()">
<!-- 页面从服务器下载完毕后执行上面的start函数 -->
<div class="nowDiv">
 现在时间是： <span id="nowSpan">N/A</span>
</div>
</body>
 </html>

5、新建 JSP 文件：在【WebRoot】上单击右键 → New → File。

6、编辑【now.jsp】并保存。

 <!-- JSP页面的首行，pageEncoding属性指定了页面的编码 -->
 <%@ page language="java" pageEncoding="UTF-8"%>
 
 <!-- 导入本页面需要的Java类 -->
 <%@ page import="java.util.Date"%>
 <%@ page import="java.text.SimpleDateFormat"%>
 
 <html>
 <head>
 <title>走动的时间（JSP版）</title>
 
 <style type="text/css">
 .nowDiv {
 font-size: 32px;
 }
 
 #nowSpan {
 color: #ff0000;
 border-bottom: 2px dotted blue;
 }
 </style>
 
 <script type="text/javascript">
 reload(); // 页面加载完毕后立即调用下面的reload函数
 
 function reload() {
 setTimeout(function() {
 window.location.reload(); // 重新向服务器请求当前页面（相当于浏览器的F5刷新）
 }, 1000);
 }
 </script>


 </head>
 
 <body>
 <div class="nowDiv">
 现在时间是： <span id="nowSpan">
 <%
 SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
 out.print(sdf.format(new Date())); // 取得系统（服务器所在机器）当前时间
 %>
 </span>
 </div>
 </body>
 </html>

6、部署项目，并启动 Tomcat。

7、打开浏览器，分别访问【http://localhost:8080/WebProject/now.html】、
【http://localhost:8080/WebProject/now.jsp】，测试功能是否正确。
内部浏览器测试now.jsp

外部浏览器测试now.html

四、实验小结：

通过本节网页时间的设计实验，我学会了myeclipse，jdk，Tomcat配置安装；以及HTML、CSS 和 JavaScript 的基本语法；掌握了JSP 页面的创建方法、基本语法和执行过程；实验中遇到了部署成功但查询不到网页的情况，最后了解到工程项目名称最好不要加空格，容易造成路径不明确。

流明呀

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
互联网软件开发——实验一 JSP 实验环境搭建与静态网页

实验名称：实验一 JSP 实验环境搭建与静态网页一、实验目的1、熟悉 MyEclipse 开发环境，掌握创建、部署和运行 Java Web 项目的步骤。2、了解 HTML、CSS 和 JavaScript 的基本语法。3、掌握 JSP 页面的创建方法、基本语法和执行过程。二、实验内容1、使用 MyEclipse 创建 Web 工程【Web Project】。2、编写静态页面【now.html】和动态页面【now.jsp】，分别以 JavaScript 和 Java 两种方式获得当前时间，并
复制链接

扫一扫