互联网软件开发

2024-06-15 09:20| 来源: 网络整理| 查看: 265

实验名称：实验一 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版） .nowDiv { /* class选择器，对页面中所有class属性包含nowDiv的元素生效 */ font-size: 32px; /* 字号 */ } #nowSpan { /* id选择器，对页面中id属性为nowSpan的那个元素生效 */ color: #ff0000; /* 前景色 */ border-bottom: 2px dotted blue; /* 下边框（粗细、样式、颜色） */ } function setNow() { /* 修改span元素的内容 */ var now = new Date(); // 得到系统(浏览器所在机器)当前时间 var h = now.getHours(); // 时、分、秒 var m = now.getMinutes(); var s = now.getSeconds(); h = h 现在时间是： N/A

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

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

走动的时间（JSP版） .nowDiv { font-size: 32px; } #nowSpan { color: #ff0000; border-bottom: 2px dotted blue; } reload(); // 页面加载完毕后立即调用下面的reload函数 function reload() { setTimeout(function() { window.location.reload(); // 重新向服务器请求当前页面（相当于浏览器的F5刷新） }, 1000); } 现在时间是：

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 页面的创建方法、基本语法和执行过程；实验中遇到了部署成功但查询不到网页的情况，最后了解到工程项目名称最好不要加空格，容易造成路径不明确。

【本文地址】

公司简介

联系我们