资源描述

《JavaEE项目实践》教案.docx

《《JavaEE项目实践》教案.docx》由会员分享，可在线阅读，更多相关《《JavaEE项目实践》教案.docx（27页珍藏版）》请在冰豆网上搜索。

《JavaEE项目实践》教案.docx

《JavaEE项目实践》教案

《JavaEE项目实践》

教案

课程代码：

030962

总课时数：

136

适用专业：

计算计应用技术

系（部）名称：

软件工程系

教研室名称：

软件技术

修订时间：

2011年9月

授课日期：

第6周周二3—8、周三3—4、周四5—10、周五1—2

授课类型：

演示、讲解、练习、辅导课时：

教学内容：

1、如何使用图片代替提交按钮

2、制作回车切换输入的特效和即时提示错误的特效

3、制作内容动态改变的层特效

教学目标：

1、会使用图片代替提交按钮

2、会使用OnKeyDown事件检查用户输入的特效字符

3、会使用DIV的innerHTML或innerText动态显示内容

4、会使用多个DIV动态隐藏或显示内容

教学重点：

1、OnKeyDown键盘事件

2、会使用DIV的innerHTML或innerText动态显示内容

教学难点：

会使用多个DIV动态隐藏或显示内容

教学过程：

内容讲授学生实践作业布置新课内容预告

教学手段：

多媒体教学软件+个别辅导

作业：

页面中加入动态效果

实训1：

使用JavaScript验证表单

一、实训目的

1、掌握使用JavaScript验证表单的方法

二、实训环境

Dreamweaver

三、实训教学方法

“演示、讲解、练习、辅导”相结合：

演示页面最终效果；讲解页面元素的功能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。

四、实训注意事项

1、JavaScript不容易调试，在写代码时需格外注意

2、JavaScript区分大小写

五、实训内容及步骤

1、演示使用JavaScript制作的客户端验证的网页

2、修改表单

把注册帐号、帐号密码、确认密码对应的文本框名称分别改为：

zczh、zhmm1、zhmm2。

3、编写事件驱动代码

在提交按钮的代码中加入事件驱动代码：

onclick="returncheck（）"

4、编写check函数

在中插入客户端验证代码，主要保证

1）“注册帐号”、“帐号密码”、“确认密码”非空；

2）“帐号密码”和“确认密码”一致；

3）“帐号密码”位数为6-20位

代码如下：

functioncheck（）

{

if（document.form1.zczh.value==""）

{

window.alert（"请输入注册帐号"）;

document.form1.zczh.value="";

document.form1.zczh.focus（）;

returnfalse;

}

if（document.form1.zhmm1.value==""）

{

window.alert（"请输入帐号密码"）;

document.form1.zhmm1.value="";

document.form1.zhmm1.focus（）;

returnfalse;

}

if（document.form1.zhmm2.value==""）

{

window.alert（"请输入确认密码"）;

document.form1.zhmm2.value="";

document.form1.zhmm2.focus（）;

returnfalse;

}

if（document.form1.zhmm1.value!

=document.form1.zhmm2.value）

{

window.alert（"两次密码不一致，请重新输入"）;

document.form1.zhmm1.value="";

document.form1.zhmm2.value="";

document.form1.zhmm1.focus（）;

returnfalse;

}

if（document.form1.zhmm1.value.length<6||document.form1.zhmm1.value.length>20）

{

window.alert（"密码长度范围必须在6和20之间"）;

document.form1.zhmm1.value="";

document.form1.zhmm2.value="";

document.form1.zhmm1.focus（）;

returnfalse;

}

returntrue;

}

六、实训结果提交与成绩评定

1、提交用客户端验证的表单页面

七、实训小结

表单客户端验证可以减轻服务器负担，使得客户端反应更快。

授课日期：

第6周周六1—6、周日1—8

授课类型：

演示、讲解、练习、辅导课时：

教学内容：

把前两章的内容做综合讲解

教学目标：

通过讲解使同学们更加清晰牢固的掌握所学知识点，并能够灵活运用到现实中。

教学重点：

知识点在实际中的应用

教学难点：

知识点的综合运用

教学过程：

内容讲授学生实践作业布置新课内容预告

教学手段：

多媒体教学软件+个别辅导

作业：

对页面进行细化

实训2：

JavaScript综合实例

一、实训目的

1、掌握使用JavaScript的时间函数制作简单的时钟

2、掌握跑马灯效果的实现方法

3、掌握使用JavaScript实现客户端换头像的方法

二、实训环境

Dreamweaver

三、实训教学方法

“演示、讲解、练习、辅导”相结合：

演示页面最终效果；讲解页面元素的功能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。

四、实训注意事项

1、JavaScript不容易调试，在写代码时需格外注意

2、JavaScript区分大小写

五、实训内容及步骤

1、制作简单的时钟

（1）显示当前时间

在中加入如下代码:

（2）让页面每秒刷新一次

在中加入如下代码:

2、实现跑马灯效果

在中入如下代码:

3、使用JavaScript实现头像变换

1）找到8个头像图片文件（gif或jpg），命名为:

1.jpg—8.jpg.存放在face文件夹中。

2）新建一个基本页，插入一个表单，在表单中插入一个列表框，命名为“txSelect”，增加8个选项，格式如下：

头像1；

…

3）在表单中插入图像“1.jpg”，并命名为“tx”。

4）在列表框中添加onChange事件

onchange="htx（）"

5）在中写htx（）函数

完整代码如下：

使用JavaScript实现头像变换

请选择你的头像：

头像1

头像2

头像3

头像4

头像5

头像6

头像7

头像8

六、实训结果提交与成绩评定

1、提交有简单的时钟的网页

2、提交跑马灯效果的网页

3、提交有换头像功能的网页

七、实训小结

授课日期：

第7周周二3—8、周三3—4、周四5—10、周五1—2

授课类型：

演示、讲解、练习、辅导课时：

教学内容：

1、JSP工作原理与运行环境

2、JSP页面的基本结构

3、变量和方法的声明

4、表达式

教学目标：

1、掌握JSP的工作原理及在JDK与TOMCAT下的环境配置

2、掌握JSP页面的基本结构

教学重点：

掌握JSP程序片和方法的用法

教学难点：

JSP的运行原理和JAVA程序片的用法

教学过程：

内容讲授学生实践作业布置新课内容预告

教学手段：

多媒体教学软件+个别辅导

作业：

页面引入内置对象

实训3：

JSP程序的编写

一、实训目的

1、会编写简单的JSP程序

2、会用JSP脚本及表达式的基本用法

3、会使用URL向JSP传递参数

二、实训环境

连接着Internet的计算机、Dreamweaver8.0、MyEclipse7.0

三、实训教学方法

“演示、讲解、练习、辅导”相结合：

演示JSP的作用；讲解使用JSP的过程，对学生的练习进行辅导。

四、实训注意事项

五、实训内容及步骤

1、编写一普通HTML页面（getuser.html），此页面将调用JSP页面（Customer.jsp），将这些文件置于TOMCAT的webapps\myprog文件夹中。

启动TOMCAT后，在浏览器中输入http:

//localhost:

8080/myprog/getuser.html后，点击超级链接，观察输出结果。

代码如下：

Customer.jsp代码：

Stringname=request.getParameter（“text1”）;

Stringid=request.getParameter（“text2”）;

WelcomeToJSP<%=name%>youridis<%=id%>

getuser.html代码：

//localhost:

8080/myprog/Customer.jsp”>

CustomerName:

CustomerId:

2、作为练习，理解如下JSP代码。

在浏览器中多次调用后，结果如何？

Count.jsp

Thisisascriptletexample

<%!
IntI=0;%><%I++;%>Helloworld!

<%=”ThisJSPhasbeenaccessed“+I+”times”%>JSPPredefinedVariables（预定义变量）

3、阅读代码并作相应的上机练习，理解在JSP中各种变量的定义、使用。

1）<%@pagecontentType=”text/html;charset=GBK”%>Country:

<%=request.getLocale（）.getDisplayCountry（）%>
Language:

<%=request.getLocale（）.getDisplayLanguage（）%>2）HTTPmethod:

<%=request.getMethod（）%>
IPAddress:

<%=request.getRemoteAddr（）%>

DNSName（orIPAddressagain）:

<%=request.getRemoteHost（）%>

4、阅读下面代码并作相应的上机练习，理解在JSP中动作的产生及处理。

First.jspfirst.jsp

Thisisthemaindocument

Includingsecond.jspfileusingjsp:

include

includepage=”second.jsp”flush=”true”/>

second.jspsecond.jsp

Thisistheseconddocument

<%!

Intvisits=0;%><%visits++;%><%=“VISITORS:

“+visits%>

六、实训结果提交与成绩评定

1、学生要理解JSP工作机制及特点。

七、实训小结

授课日期：

第7周周六1—6、周日1—8

授课类型：

演示、讲解、练习、辅导课时：

教学内容：

1、内置对象的作用和实现效果

2、如何使用各个内置对象

教学目标：

掌握request、response、session、outpageContext对象的属性、方法及应用

教学重点：

JSP内置对象的含义、属性、方法及使用

教学难点：

各对象的综合运用

教学过程：

内容讲授学生实践作业布置新课内容预告

教学手段：

多媒体教学软件+个别辅导

作业：

页面引入内置对象

实训4：

JSP内置对象

一、实训目的

1、会应用JSP内置对象进行程序设计。

2、掌握JSP内置对象的常用方法

3、理解JSP中9个内置对象request、reponse、out、session、application、config、pagecontext、page、exception的使用方法。

二、实训环境

连接着Internet的计算机、Dreamweaver8.0、MyEclipse7.0

三、实训教学方法

“演示、讲解、练习、辅导”相结合：

演示内置对象的优点；讲解各个内置对象的区别和使用方法，对学生的练习进行辅导。

四、实训注意事项

五、实训内容及步骤

1、request对象

客户端的请求信息被封装在request对象中，通过它才能了解到客户的需求，然后做出响应。

它是HttpServletRequest类的实例。

参考源代码：

<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>

请求方式：

<%=request.getMethod（）%>

请求的资源：

<%=request.getRequestURI（）%>

请求用的协议：

<%=request.getProtocol（）%>

请求的文件名：

<%=request.getServletPath（）%>
请求的服务器的IP：

<%=request.getServerName（）%>
请求服务器的端口：

<%=request.getServerPort（）%>

客户端IP地址：

<%=request.getRemoteAddr（）%>

客户端主机名：

<%=request.getRemoteHost（）%>

表单提交来的值：

<%=request.getParameter（"qwe"）%>

<%Stringstr="";

if（request.getParameter（"qwe"）!

=null）{

Enumerationenumt=request.getParameterNames（）;

while（enumt.hasMoreElements（））{

str=enumt.nextElement（）.toString（）;

out.println（str+":

"+request.getParameter（str）+"
"）;}}%>

2、response对象

response对象包含了响应客户请求的有关信息，但在JSP中很少直接用到它。

它是HttpServletResponse类的实例。

本例演示如何进行客户端重定向。

参考源代码：

index.jsp代码如下：

（mypage.jsp代码略，请同学们自己编写）<%@pagelanguage="java"import="java.util.*"pageEncoding="gbk"%><%Stringaddress=request.getParameter（"where"）;if（address!

=null）{if（address.equals（"sohu"））response.sendRedirect（""）;elseif（address.equals（"avceit"））response.sendRedirect（""）;elseif（address.equals（"mypage"））response.sendRedirect（"mypage.jsp"）;}%>Pleaseselect:

gotosohu

gotoavceit

gotomypage

3、session对象

session对象指的是客户端与服务器的一次会话，从客户连到服务器的一个WebApplication开始，直到客户端与服务器断开连接为止。

它是HttpSession类的实例。

<%@pagelanguage="java"import="java.util.*"

pageEncoding="gbk"%>

session的创建时

间:

<%=session.getCreationTime（）%> <%=new

Date（session.getCreationTime（））%>

session的Id号:

<%=session.getId（）%>

客户端最近一次请求时

间:

<%=session.getLastAccessedTime（）%> <%=new

java.sql.Time（session.getLastAccessedTime（））%>

两次请求间隔多长时间此SESSION被取消

（ms）:

<%=session.getMaxInactiveInterval（）%>

是否是新创建的一个SESSION:

<%=session.isNew（）?

"是":

"否

"%>

<%

session.setAttribute（"name","火星人"）;

session.setAttribute（"nmber","1234567"）;

%><%Stringstr;

Enumerationenum1=session.getAttributeN