《JavaEE项目实践》教案

《JavaEE项目实践》教案课程代码：030962总课时数：136适用专业：计算计应用技术系（部）名称：软件工程系教研室名称：软件技术修订时间：2011年9月~1~授课日期：第6周周二3—8、周三3—4、周四5—10、周五1—2授课类型：演示、讲解、练习、辅导课时：16教学内容：1、如何使用图片代替提交按钮2、制作回车切换输入的特效和即时提示错误的特效3、制作内容动态改变的层特效教学目标：1、会使用图片代替提交按钮2、会使用OnKeyDown事件检查用户输入的特效字符3、会使用DIV的innerHTML或innerText动态显示内容4、会使用多个DIV动态隐藏或显示内容教学重点：1、OnKeyDown键盘事件2、会使用DIV的innerHTML或innerText动态显示内容教学难点：会使用多个DIV动态隐藏或显示内容教学过程：内容讲授学生实践作业布置新课内容预告教学手段：多媒体教学软件+个别辅导作业：页面中加入动态效果~2~实训1：使用JavaScript验证表单一、实训目的1、掌握使用JavaScript验证表单的方法二、实训环境Dreamweaver三、实训教学方法“演示、讲解、练习、辅导”相结合：演示页面最终效果；讲解页面元素的功能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。四、实训注意事项1、JavaScript不容易调试，在写代码时需格外注意2、JavaScript区分大小写五、实训内容及步骤1、演示使用JavaScript制作的客户端验证的网页2、修改表单把注册帐号、帐号密码、确认密码对应的文本框名称分别改为：zczh、zhmm1、zhmm2。3、编写事件驱动代码~3~在提交按钮的代码中加入事件驱动代码：onclick=returncheck()4、编写check函数在head/head中插入客户端验证代码，主要保证1）“注册帐号”、“帐号密码”、“确认密码”非空；2）“帐号密码”和“确认密码”一致；3）“帐号密码”位数为6-20位代码如下：scriptlanguage=javascriptfunctioncheck(){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;~4~}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.length6||document.form1.zhmm1.value.length20){window.alert(密码长度范围必须在6和20之间);document.form1.zhmm1.value=;document.form1.zhmm2.value=;document.form1.zhmm1.focus();returnfalse;}returntrue;}/script六、实训结果提交与成绩评定1、提交用客户端验证的表单页面七、实训小结表单客户端验证可以减轻服务器负担，使得客户端反应更快。~5~授课日期：第6周周六1—6、周日1—8授课类型：演示、讲解、练习、辅导课时：14教学内容：把前两章的内容做综合讲解教学目标：通过讲解使同学们更加清晰牢固的掌握所学知识点，并能够灵活运用到现实中。教学重点：知识点在实际中的应用教学难点：知识点的综合运用教学过程：内容讲授学生实践作业布置新课内容预告教学手段：多媒体教学软件+个别辅导作业：对页面进行细化~6~实训2：JavaScript综合实例一、实训目的1、掌握使用JavaScript的时间函数制作简单的时钟2、掌握跑马灯效果的实现方法3、掌握使用JavaScript实现客户端换头像的方法二、实训环境Dreamweaver三、实训教学方法“演示、讲解、练习、辅导”相结合：演示页面最终效果；讲解页面元素的功能和实现方法；让学生自己实现页面效果；对学生的练习进行辅导。四、实训注意事项1、JavaScript不容易调试，在写代码时需格外注意2、JavaScript区分大小写五、实训内容及步骤1、制作简单的时钟(1)显示当前时间在body/body中加入如下代码:scriptvarnow=newDate()document.write(现在是+now.getYear()+年+(now.getMonth()+1)+月+now.getDate()+日+now.getHours()+时+now.getMinutes()+分+now.getSeconds()+秒)/script(2)让页面每秒刷新一次在head/head中加入如下代码:metahttp-equiv=refreshcontent=1/2、实现跑马灯效果在body/body中入如下代码:~7~scriptvarmessage=欢迎光临我的个人主页......;varloc=0;functionpmd(){len=message.length;window.status=message.substring(0,loc);loc++;if(loclen)loc=0;window.setTimeout(pmd();,300);}pmd();/script3、使用JavaScript实现头像变换1)找到8个头像图片文件(gif或jpg)，命名为:1.jpg—8.jpg.存放在face文件夹中。2)新建一个基本页，插入一个表单，在表单中插入一个列表框，命名为“txSelect”，增加8个选项，格式如下：optionvalue=“1”头像1/option；…3)在表单中插入图像“1.jpg”，并命名为“tx”。4)在列表框中添加onChange事件onchange=htx()5)在head/head中写htx()函数scriptfunctionhtx(){document.form1.tx.src=face/+document.form1.txSelect.value+.jpg;}~8~/script完整代码如下：htmlheadtitle使用JavaScript实现头像变换/titlescriptfunctionhtx(){document.form1.tx.src=face/+document.form1.txSelect.value+.jpg;}/script/headbodyformid=form1name=form1method=postaction=labeldivalign=center请选择你的头像：selectid=txSelectname=txSelectonchange=htx()optionvalue=1头像1/optionoptionvalue=2头像2/optionoptionvalue=3头像3/optionoptionvalue=4头像4/optionoptionvalue=5头像5/optionoptionvalue=6头像6/optionoptionvalue=7头像7/optionoptionvalue=8头像8/option/selectimgsrc=face/1.JPGwidth=48height=48name=txid=tx//div/label/form~9~/body/html六、实训结果提交与成绩评定1、提交有简单的时钟的网页2、提交跑马灯效果的网页3、提交有换头像功能的网页七、实训小结~10~授课日期：第7周周二3—8、周三3—4、周四5—10、周五1—2授课类型：演示、讲解、练习、辅导课时：16教学内容：1、JSP工作原理与运行环境2、JSP页面的基本结构3、变量和方法的声明4、表达式教学目标：1、掌握JSP的工作原理及在JDK与TOMCAT下的环境配置2、掌握JSP页面的基本结构教学重点：掌握JSP程序片和方法的用法教学难点：JSP的运行原理和JAVA程序片的用法教学过程：内容讲授学生实践作业布置新课内容预告教学手段：多媒体教学软件+个别辅导作业：页面引入内置对象~11~实训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后，在浏览器中输入后，点击超级链接，观察输出结果。代码如下：Customer.jsp代码：htmlbodybgcolor=wheat%Stringname=request.getParameter(“text1”);Stringid=request.getParameter(“text2”);%fontcolor=redbWelcomeToJSP%=name%youridis%=id%/b/font/body/htmlgetuser.html代码：htmlbodybgcolor=”wheat”formaction=””CustomerName:inputtype=textname=text1CustomerId:inputtype=text~12~name=text2inputtype=submitvalue=Enterinputtype=resetvalue=Clear/form/body/html2、作为练习，理解如下JSP代码。在浏览器中多次调用后，结果如何？Count.jsphtmlbodyh1Thisisascriptletexample/h1bfontcolor=red%!IntI=0;%%I++;%Helloworld!%=”ThisJSPhasbeenaccessed“+I+”times”%/font/b/body/htmlJSPPredefinedVariables(预定义变量)3、阅读代码并作相应的上机练习，理解在JSP中各种变量的定义、使用。1)%@pagecontentType=”text/html