Ajax与三层架构实训教案
教 案
课程:Ajax与三层架构
单位:信息工程学院
教师: XXX
课程简介
《Ajax与三层架构》是一门实用性强,知识面广的课程,该课程的先修课程为《Java程序设计》、《Jsp WEB开发》。主要包含网页设计概论,J2EE站点创建,网页基本元素的插入,网页布局技术,网页高级操作和网页设计综合训练。通过本课程学习,使学生能熟练运用J2EE中的文字、链接、列表、表格、表单、图像、多媒体、框架元素标志及属性设计出多窗口网页、动态网页;掌握使用MyEclipse10进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能;能独立设计中小型WEB站点。最终通过掌握网页设计的各种技能,培养学生综合运用所学知识的能力和动手能力,真正能使用所学的知识进行网站建设。该课程以案例和项目驱动,采用集中式授课和练习。
章节内容:
- 了解JQuery入门 4学时
- 掌握JQuery高级API的使用 4学时
- 掌握层次选择、迭代选择器的使用 4学时
- 掌握JQuery的事件原理及其使用方法 4学时
- 异步调用及其应用 8学时
- 掌握Ajax组件动画效果 8学时
- 在线商城综合案例一 8学时
- 在线商城综合案例二8学时
参考教材:
[1]王凯. MyEclipse 10网站设计教程.人民邮电出版社,2013.6
[2]牛国勇. MyEclipse 10白金手册.清华大学出版社,2014.8
[3]邓超贤. 网页设计与制作.大连理工大学出版社,2011.8
授课班级:2016级软件1班、2班
总学时48学时,其中理论24学时,实践24学时
课程教学日历
课程名称Ajax与三层架构 院(系) 信息工程学院
专业计算机科学与技术 年级16级
课程 学期 总学时 |
周 学 时 |
学 分 |
考核 方式 |
采用 教材 情况 |
教材名称 |
疯狂Ajax讲义 |
||||||||
主编(著) |
李刚 |
|||||||||||||
出版社 名称 |
中国工信出版社 |
|||||||||||||
48 |
6 |
6 |
考查 |
出版时间 |
2017.1 |
|||||||||
周 次 |
日 期 |
每周时 数分配 |
教学内容 |
备 注 |
||||||||||
讲 授 |
实验 (实践) |
合计时数 |
||||||||||||
1 |
9.10-9.14 |
2 |
2 |
4 |
第一章:JQuery入门
|
|||||||||
2 |
9.17-9.21 |
2 |
2 |
4 |
第二章:JQuery高级API 2.1 熟悉Jquery的基本$符号含义 2.2熟悉HBuilder工具使用 2.3掌握$(function(){}); |
|||||||||
3 |
9.25-9.28 |
2 |
2 |
4 |
第三章: 层次选择器和迭代选择器 3.1基本选择器 3.2熟悉层次选择器 3.3掌握迭代选择器 |
|||||||||
4 |
10.1-10.5 |
国庆 |
||||||||||||
5 |
10.8-10.12 |
4 |
4 |
8 |
第四章:事件原理及其运用 4.1jQuery事件 4.2事件绑定 |
|||||||||
6 |
10.15-10.19 |
4 |
4 |
8 |
第五章:Ajax及动画效果 5.1Ajax原理 5.2Ajax应用 5.3Ajax动画 |
|||||||||
7 |
10.22-10.26 |
4 |
4 |
8 |
第六章:异步调用及插件使用 6.1异步调用案例 6.2插件使用 |
|||||||||
8 |
10.29-11.2 |
4 |
4 |
8 |
第七章:在线商城综合案例一 7.1 在线商城案例剖徐 7.2 页面框架讲解 |
|||||||||
9 |
11.6-11.10 |
4 |
4 |
8 |
第八章:在线商城综合案例二 8.1 jQuery函数在项目中的应用 82. jQuery事件、动画等应用 |
说明:1.教学内容按每次授课内容填写。
2.考核方式分考试与考查两种。
3.任课教师在每学期开课以前根据教学大纲编写课程教学日历,一式三份,经教研室主任(负责人)审阅同意后,一份自存,一份交所在院(系部),一份交学生
教研室主任(负责人)签名:
任课教师签名:
郑州工业应用技术学院教案
课时内容 |
第1章 了解JQuery入门 |
计划学时 |
4 |
教学目标 |
(1)熟悉Jquery框架开发环境的构建过程、开发环境的使用方法。 (2)熟悉Jquery框架基本运行流程和基本配置。 (3)掌握Action的开发和Result配置。 (4)理解拦截器的工作原理和意义,掌握拦截器的配置、自定义拦截的使用、了解系统默认拦截器。 (5)掌握Jquery 标签库的基本用法。 (6)了解Jquery 的类型转换和对OGNL的支持。 (7)掌握Jquery 的验证框架技术。 (8)了解Jquery 的国际化。 (9)掌握Jquery 的文件上传和下载。 |
||
教学重点 |
þ HTML基础。 þ MyEclipse 2012的工作界面组成。 þ 创建站点和管理站点的操作。 |
||
教学难点 |
HTML常用标签及其使用 如何正确规划网站内容。 |
||
教学设计 |
|
||
教学内容 |
|||
课程导入:通过与学生问题式交流,引入该门课程。 介绍该课程的授课基本情况。 欣赏“贵美商城”、“e客在线”等网站作品,引入本章网页设计概述的学习主要知识。 讨论问题:1、为什么要首先建立站点? 2、一个网站最基本的功能有哪些?
二、J2EE基础(重点、难点) http://www.w3school.com.cn/html/ N"
<标记>受标记影响的内容<标记> 【案例】标记属性说明。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//E> <configuration> <!-- 加载属性文件 --> <properties resource="config/db.properties"> <!--properties中还可以配置一些属性名和属性值 --> <!-- <property name="jdbc.driver" value=""/> --> </properties> <settings> <!--开启延迟加载--> <setting name="lazyLoadingEnabled" value="true"/> <!--按需延迟加载--> <setting name="aggressiveLazyLoading" value="false"/> <!-- 开启二级缓存 --> <setting name="cacheEnabled" value="true"/> </settings> <typeAliases> <package name="com.neuedu.pojo"/> </typeAliases> <mappers> <package name="com.neuedu.mapper"/> </mappers> </configuration> 七、实训——创建“快乐旅游”站点
本实训的目标是为“人事系统”网站创建站点,包括站点中的各种文件和文件夹。要求首先规划站点结构,然后创建站点以及其中的文件对象。
“贵美商城”站点除了应该具备商城的普遍特点之外,还应该突出“高效”一词,这需要通过有效地设计和整合色彩、布局以及简单轻松的文字等方面,才能达到效果。
拓展知识 课堂案例1——创建站点 课堂案例2——管理站点 上机实训——创建“贵美商城”站点 |
|||
小结 |
上完课以后在写 |
||
思考及作业 |
想一想: 站点的作用是什么?站点有何意义?举例日常浏览网页时遇到的站点,并分析其分为几大板块? 练一练: (1)查看HBuilder中“表单”插入栏包含的内容。 (2)在浮动面板组中将“资源”、“行为”和“组件”3个面板排列到同一个面板中(首先需要利用“窗口”菜单显示出这些面板)。 (3)创建名为“wodewangzhan”的站点,将位置设置在D盘的“OK”文件夹中,然后通过编辑站点的方法将其重命名为“mynet”,最后删除站点并取消操作。 (4)规划并构思一个美食站点,创建一个导航草图,其中必须包含“菜谱”和“食材”两大板块,要求整个站点结构能满足一般的浏览和查询美食资源的要求。 (5)在上一题的基础上,启动MyEclipse 2012,创建该美食站点并在其中添加相应的文件夹和文件。 |
||
教学后记 |
|||
课时内容 |
第2章 JQuery高级API |
计划学时 |
4 |
教学目标 |
(1)熟悉Jquery的基本$符号含义。 (2)熟悉HBuilder工具使用 (3)掌握$(function(){}); (4)理解拦截器的工作原理和意义,掌握拦截器的配置、自定义拦截的使用、了解系统默认拦截器。 |
||
教学重点 |
þ $(function(){}); |
||
教学难点 |
常规API使用 |
||
教学设计 |
1、JQuery 事件处理方法是 jQuery 中的核心函数。 |
||
教学内容 |
|||
课程导入:通过与学生问题式交流,引入该门课程。
二、J2EE基础(重点、难点) http://www.w3school.com.cn/html/ N" 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: 课堂案例1——计算器 上机实训——创建“个人计算器 ” |
|||
小结 |
上完课以后在写 |
||
思考及作业 |
想一想: 直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。练一练: (1)查看HBuilder中“表单”插入栏包含的内容。 (2)在浮动面板组中将“资源”、“行为”和“组件”3个面板排列到同一个面板中(首先需要利用“窗口”菜单显示出这些面板)。 (3)创建名为“wodewangzhan”的站点,将位置设置在D盘的“OK”文件夹中,然后通过编辑站点的方法将其重命名为“mynet”,最后删除站点并取消操作。 (4)规划并构思一个美食站点,创建一个导航草图,其中必须包含“菜谱”和“食材”两大板块,要求整个站点结构能满足一般的浏览和查询美食资源的要求。 (5)在上一题的基础上,启动MyEclipse 2012,创建该美食站点并在其中添加相应的文件夹和文件。 |
||
教学后记 |
|||
课时内容 |
第3章 层次选择器和迭代选择器 |
计划学时 |
4 |
教学目标 |
(1)基本选择器 (2)熟悉层次选择器 (3)掌握迭代选择器 |
||
教学重点 |
þ 迭代选择器。 层次选择器 |
||
教学难点 |
迭代选择器如何使用 |
||
教学设计 |
|||
教学内容 |
|||
课程导入:通过与学生问题式交流,引入该门课程。 介绍该课程的授课基本情况。 欣赏“贵美商城”、“e客在线”等网站作品,引入本章网页设计概述的学习主要知识。 讨论问题:1、简化方案是什么? 参考代码:
<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); });</script><style type="text/css"> div.ex{background-color:#e5eecc;padding:7px;border:solid 1px #c3c3c3;}</style></head> <body> <h3>中国办事处</h3><div class="ex"><button class="hide" type="button">隐藏</button><p>联系人:张先生<br /> 北三环中路 100 号<br /> 北京</p></div> <h3>美国办事处</h3><div class="ex"><button class="hide" type="button">隐藏</button><p>联系人:David<br /> 第五大街 200 号<br /> 纽约</p></div>/body></html> 8、jQuery animate() <!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); });</script> </head> <body> <button>开始动画</button><p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </body></html>
|
|||
小结 |
|||
思考及作业 |
想一想: 练一练: |
||
教学后记 |
|||
课时内容 |
第4章 事件原理及其使用 |
计划学时 |
4 |
教学目标 |
4.1jQuery事件 4.2事件绑定 |
||
教学重点 |
þ |
||
教学难点 |
|||
教学设计 |
|||
教学内容 |
|||
课程导入:通过与学生问题式交流,引入该门课程。 介绍该课程的授课基本情况。 |
|||
小结 |
上完课以后在写 |
||
思考及作业 |
想一想: 练一练: |
||
教学后记 |
|||
课时内容 |
第五章:Ajax及动画效果 |
计划学时 |
8 |
教学目标 |
5.1Ajax原理 5.2Ajax应用 5.3Ajax动画 |
||
教学重点 |
|||
教学难点 |
|||
教学设计 |
|||
教学内容 |
|||
课程导入:通过与学生问题式交流,引入该门课程。 介绍该课程的授课基本情况。 欣赏“贵美商城”、“e客在线”等网站作品,引入本章网页设计概述的学习主要知识。 讨论问题: |
|||
小结 |
上完课以后在写 |
||
思考及作业 |
想一想: 练一练: |
||
教学后记 |
|||
课时内容 |
第六章:异步调用及插件使用 |
计划学时 |
8 |
教学目标 |
6.1异步调用案例 6.2插件使用 |
||
教学重点 |
þ |
||
教学难点 |
|||
教学设计 |
|||
教学内容 |
|||
课程导入:通过与学生问题式交流,引入该门课程。 介绍该课程的授课基本情况。 讨论问题:1 |
|||
小结 |
上完课以后在写 |
||
思考及作业 |
想一想: 练一练: |
||
教学后记 |
|||
课时内容 |
第6章 在线商城综合实训一 |
计划学时 |
8 |
教学目标 |
7.1 在线商城案例剖徐 7.2 页面框架讲解 |
||
教学重点 |
þ |
||
教学难点 |
|||
教学设计 |
|||
教学内容 |
|||
课程导入:通过与学生问题式交流,引入该门课程。 介绍该课程的授课基本情况。 讨论问题:1 |
|||
小结 |
上完课以后在写 |
||
思考及作业 |
想一想: 练一练: |
||
教学后记 |
|||
课时内容 |
第八章:在线商城综合案例二 |
计划学时 |
8 |
教学目标 |
8.1 jQuery函数在项目中的应用 82. jQuery事件、动画等应用 |
||
教学重点 |
þ |
||
教学难点 |
|||
教学设计 |
|||
教学内容 |
|||
课程导入:通过与学生问题式交流,引入该门课程。 介绍该课程的授课基本情况。 讨论问题:1 |
|||
小结 |
上完课以后在写 |
||
思考及作业 |
想一想: 练一练: |
||
教学后记 |
Ajax与三层架构实训教案相关推荐
- 计算机操作应用实训,计算机操作实训教案计算机操作实训教案.doc
计算机操作实训教案计算机操作实训教案 <计算机应用基础> 实训教案 本周课标题:计算机操作授课班级13521.2上课 时间第5周上课 地点四号楼机房教 学 目 的通过本实训周的教学,让学生 ...
- 计算机应用技术基础教案,计算机应用技术基础实训教案.doc
计算机应用技术基础实训教案 <计算机应用基础>实验指导 实验名称 实验1 Windows基本操作 目的和要求 1.掌握窗口的基本操作,例如:移动.大小等.2.掌握查找文件.文件夹的方法. ...
- matlab交流电路仿真,直流交流变换电路MATLAB仿真实训教案
实训一.交流-直流变换电路的MATLAB仿真研究 一.MATLAB 介绍 MATLAB 是一种科学计算软件.由于它使用方便.输入便捷.运算高效.适应科技人员的思维方式,并且有绘图功能,有用户自行扩展的 ...
- 唯众模块化物联网技术综合实训装置的设计与实现
**摘 要:**分析了2021年物联网产业人才需求.培养及其存在的问题,提出了培养物联网技术技能型人才实训装置设计的四条基本原则.介绍唯众实训装置系统架构,网关.感知层模块化设备硬件设计,软件设计以及 ...
- 计算机基础实训计划,《计算机基础》课实训计划.doc
<计算机基础>课实训计划,计算机基础授课计划,大学计算机基础实训,计算机基础实训教程,计算机基础实训心得,计算机基础实训总结,计算机基础实训,计算机基础实训大纲,计算机基础实训教案,实训课 ...
- 计算机进位计数制实训课教案,《计算机应用基础》职高2010修订版 教案.doc
文档介绍: <计算机应用基础>职高2010修订版教案<计算机应用基础>职高2010修订版教案计算机基础知识中文WindowsXP文字处理软件word2003中文Excel200 ...
- 计算机实训课教案模板,CorelDRAW实训课教案(7周)
以下为<CorelDRAW实训课教案(7周)>的无排版文字预览,完整格式请下载 下载前请仔细阅读文字预览以及下方图片预览.图片预览是什么样的,下载的文档就是什么样的. 2020-2021学 ...
- Bootstrap4+MySQL前后端综合实训-Day08-PM【ajax获取表单标签内容、根据“栏目信息”添加“新闻信息”、新闻管理系统-项目展示】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目 录 ajax获取表单标签内容 ajax根据数据库加载select下来列 ...
- Bootstrap4+MySQL前后端综合实训-Day07-AM【ajax局部刷新——(单个/批量)删除用户按钮的实现、更新用户信息按钮的实现】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目 录 (单个/批量)删除用户按钮的实现.更新用户信息按钮的实现--展示 ...
最新文章
- 面试常考,项目易错,长文详解C/C++中的字节对齐
- 大数据时代的创新者们
- opencv 白平衡
- Django+Linux+Uwsgi+Nginx项目部署文档
- aix系统32位和64位切换
- 查询数据库 收集 (如某个字段不是中文)
- 流媒体技术基础-流媒体服务与框架【38款 流媒体服务器开源软件】
- python写入excel数据教程_python实现数据写入excel表格
- java打印某年日历_java打印指定年月份的日历
- 前端性能优化gzip压缩
- linux cpan 参数配置,Linux下使用CPAN进行Perl模块的安装
- VLSI Basic2——OCV
- doc文件文本结构提取
- Spring MVC PUT 表单参数获取
- 急!程序员夫妻结婚了,婚戒上刻什么字好?
- 树莓派python编程小车_00-树莓派做的遥控小车 python
- 操作系统(五):FCFS/SJF/非抢占优先级/RR
- Python应用开发
- 第三届蓝桥杯 c/c++真题
- 学java的第九天,面向对象 23.2.15
热门文章
- 在java中使用SPI创建可扩展的应用程序
- Java知识整理——异常处理
- java friendly 子包,黑馬程序員 java 修飾符類型(public,protected,private,friendly)
- 常用的两种spring、mybatis 配置方式
- 使用itextpdf操作pdf
- Effective Java之利用有限制通配符提升API的灵活性(二十八)
- jQuery的引入和使用
- 华为swot分析2020_2020华为音频产品汇总分析,完善产品质量,丰富产品线
- netty java开发文档_《Netty官方文档》设置开发环境
- mysql 5.6.23 源码包安装报错_CentOS6.5_64bit下编译安装MySQL-5.6.23