《交互式前端开发实践》教案.docx
《《交互式前端开发实践》教案.docx》由会员分享，可在线阅读，更多相关《《交互式前端开发实践》教案.docx（44页珍藏版）》请在冰豆网上搜索。
《交互式前端开发实践》教案
教案
（2018年秋季学期）
课程名称（全称）：
交互式网站前端开发综合实践
课程代码：
课程计划总学时：
96
本学期学时：
96
所属学院：
互联网+学院
教研室：
网络教研室
任课教师：
制订日期：
年月日
四川科技职业学院教学事业部制
2018年7月20日
《交互式网站前端开发综合实践》
课程教案
第1次课，2学时
适用专业
软件技术（Java开发）、计算机网络技术（Web前端开发）
课题
绪论课程定位与作用
教学目的
了解本课程在本专业课程体系中的地位
了解本课程知识总体结构
重点与难点
重点：
本课程在专业课程体系中的作用
难点：
课程知识结构和建议如何学习
教学设计
概述
案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例
教学环境及资源要求
DreamweaverCS6以上，能上网
复习提问
你觉得效果比较炫的网站是什么，打开看看
授课要点
软件技术（java开发）、计算机网络技术（web前端开发）的课程体系介绍
本课程在课程体系中所处的地位
不同的工作岗位对本课程知识技能的需求
本课程点知识结构
建议如何学习本课程
课外作业
欣赏JS+JQ效果的网站，并从整体认知Js+JQ的作用和效果
教学设计与教学内容
时间分配
教学内容
学生活动
教师活动
实训设备
10’
教师自我介绍
课程考核说明
无
教师介绍
多媒体
20’
1、请学生回答：
你觉得你看到过的哪个网站比较炫，并告诉网址
2、分析网站用到的前台技术（源代码查看器）
3、引出JS和JQ技术
学生回答，并操作多媒体
讲解
多媒体，能上网
25’
1、工作岗位分析
【软件技术：
前端岗位、后端岗位】
【计算机网络技术（web前端开发）：
前端岗位】
2、课程体系分析（详见“人才培养方案”的思维导图）
【软件技术（java开发方向）】
【计算机网络技术（Web前端开发）方向】
讲解
多媒体
20’
1、js要学什么
【语法、window、document、css特效、表弟验证与事件等，并举例】
2、JQuery要学什么
【语法、选择器、事件、效果（……）】
讲解
多媒体，能上网
10’
如何学习JS+JQ
【（抄—>修改—>模仿—>创新）n】，并以个人的经历为例解释
提问
讲解
多媒体
5
知识回顾与作业布置
回答
教师总结与布置作业
多媒体
第2次课，2学时
适用专业
软件技术（Java开发）、计算机网络技术（Web前端开发）
课题
第一章HTML标记：
HTML、XHTML、HTML5标签的使用
教学目的
掌握HTML标记、属性
了解XHTML、HTML5新标签、绘画功能
掌握HTML5表单标签
重点与难点
重点：
常用标签、列表标签、表单标签、HTML新标签、链接
难点：
HTML画布
教学设计
概述
案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例
教学环境及资源要求
DreamweaverCS6以上，能上网
复习提问
1、如何记忆繁多的HTML标签？
2、HTML与XHTML区别是什么？
授课要点
HTML标记、属性举例，让学生有直接的感官认知
HTML5文档结构、音频、视频、画布
课外作业
模仿课程内容，CANVAS绘制圆
教学设计与教学内容
时间分配
教学内容
学生活动
教师活动
实训设备
5’
1、回忆上次课程内容
【专业课程体系、地位与作用】
【HTML学什么，HTML5要学什么】
学生回答
提问与总结
多媒体
30’
1、Web前端开发概述
●Web的发展
●Web特点及架构
●Web新技术的发展及应用
●Web 3介绍
●Web新技术的应用
2、HTML标签
●文字与段落
●图片与超链接
●列表标签
●表格标签
●表单标签
●注释标签
3、XHTML基础
讨论
讲解与演示
多媒体，能上网
30’
HTML5标签
●HTML5文档结构
●HTML5新增的结构标签及属性
●HTML5音视频
●HTML5表单
●HTML5画布
讨论
讲解与演示
多媒体，能上网
15’
学生提问或亲自上台操作
学生操作
演示
多媒体，能上网
5’
知识回顾与作业布置
回答
教师总结与布置作业
多媒体
第3次课，4学时
适用专业
软件技术（Java开发）、计算机网络技术（Web前端开发）
课题
第二章JavaScript编程基础：
JavaScript基本语法之JavaScript介绍与基本语法
教学目的
了解JavaScript的作用与使用范围
掌握JavaScript简单使用技巧
重点与难点
重点：
JavaScript的作用与使用范围
难点：
JavaScript简单使用技巧
教学设计
概述
案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例
教学环境及资源要求
DreamweaverCS6以上，能上网
复习提问
3、为什么我觉得学习的过程应该是【（抄—>修改—>模仿—>创新）n】？
4、学习好JS+JQuery课程，你觉得你能从事什么岗位的工作？
授课要点
JS小程序举例，让学生有直接的感官认知
JS代码的作用（使用）位置
课外作业
模仿课程内容，自己设计出能运行且有效果的JS小程序
教学设计与教学内容
时间分配
教学内容
学生活动
教师活动
实训设备
10’
2、回忆上次课程内容
【HTML5新标签？
强大画图功能】
【JS要学什么，JQ要学什么】
学生回答
提问与总结
多媒体
60’
1、JS简介
脚本语言；可用于HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript是一种轻量级的编程语言。
JavaScript是可插入HTML页面的编程代码。
JavaScript插入HTML页面后，可由所有的现代浏览器执行。
JavaScript很容易学习
2、快速认知JS的使用：
举例
JavaScript：
写入HTML输出
JavaScript：
对事件作出反应
JavaScript：
改变HTML内容
JavaScript：
改变HTML图像
JavaScript：
验证输入
3、JavaScript与Java？
Java（由Sun发明）是更复杂的编程语言。
ECMA-262是JavaScript标准的官方名称。
JavaScript由BrendanEich发明。
它于1995年出现在Netscape中（该浏览器已停止更新），并于1997年被ECMA（一个标准协会）采纳
讨论
讲解与演示
多媒体，能上网
80’
1、JS代码的编写位置
HTML中的脚本必须位于标签之间，脚本可被放置在HTML页面的
和部分中
3、jQuery选择器
●基本选择器【举例】
●层次选择器【举例】
●过滤选择器【举例】
●表单选择器【举例】
通用语法：
$（选择元素）{}
例子：
$（”#showDiv”）或$（”.showDiv”）
4、jQuery事件方法
●载入事件【举例】
●事件处理【举例】
●事件切换【举例】
●其他事件
讨论
讲解与演示
多媒体，能上网
70’
1、jQuery中元素属性的操作
●设置元素属性【举例】
●删除元素属性【举例】
2、jQuery中样式类的操作
●添加样式类【举例】
●移除样式类【举例】
●交替样式类【举例】
3、jQuery中样式属性的操作
●读取样式属性【举例】
●设置样式属性【举例】
●设置元素偏移【举例】
4、jQuery中元素内容的操作
●操作HTML代码【举例】
●操作文本【举例】
●操作表单元素的值【举例】
5、jQuery动画特效【举例】
●实现图层的隐藏、移动、滑动拉幕、淡入淡出等效果
6、DOM操作
●节点操作、解决冲突
7、jQuery与AJAX方法
●介绍jQuery中的AJAX方法、事件
8、jQuery插件
讨论
讲解与演示
多媒体，能上网
15’
学生提问或亲自上台操作
学生操作
演示
多媒体，能上网
5’
知识回顾与作业布置
回答
教师总结与布置作业
多媒体
第6次课，2学时
适用专业
软件技术（Java开发）、计算机网络技术（Web前端开发）
课题
第5章CSS样式运用
教学目的
掌握style样式属性动态改变边框颜色
掌握className类名属性动态改变按钮背景图片
掌握display显示属性实现层或图片的隐藏/显示和切换特效
重点与难点
重点：
style样式属性动态改变边框颜色
难点：
className类名属性动态改变按钮背景图片
教学设计
概述
案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例
教学环境及资源要求
DreamweaverCS6以上，能上网
复习提问
请实现复选框全选或全不选的效果，并讲解
授课要点
style样式属性动态改变边框颜色
className类名属性动态改变按钮背景图片
display显示属性实现层或图片的隐藏/显示和切换特效
课外作业
制作列表菜单;布局案例制作
教学设计与教学内容
时间分配
教学内容
学生活动
教师活动
实训设备
10’
回忆上次课程内容
【JQuery选择器类型】
【JQuery动画特效常见类型】
【JQuery与AJAX】
【JQuery操作CSS】
学生回答
提问与总结
多媒体
35’
1、动态改变字体大小【举例】15’
DOM来设置和修改节点的CSS样式
修改CSS样式的方法如下：
nodeObject.style.cssProperty=newStyle;
其中，nodeObject为节点对象，cssProperty为CSS属性，newStyle为CSS属性的值。
移入和移出事件的应用
onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出元素时触发函数。
2、改变按钮背景特效【举例】20’
思考：
能否通过通过改变样式backImage能否实现？
onMouseOver="this.style.backgroundImage=
'url（images/back2.jpg）';"
失败原因分析：
当鼠标移到按钮上方时，除了图片要换以外，还应保留border、margin、padding等样式。
解决方法如下：
1）首先创建mouseOver和mouseOut两种类样式
2）使用className类属性进行切换。
定义样式：
定义mouseOverStyle和mouseOutStyle两种样式，在对应样式中编写所需要的全部属性。
调用样式代码：
在事件发生时改变为相应的样式代码：
.mouseOverStyle{
background-image:
url（images/back2.jpg）;
color:
#CC0099;
border:
0px;
margin:
0px;
padding:
0px;
height:
23px;width:
82px;
font-size:
14px;}
.mouseOutStyle{
background-image:
url（images/back1.jpg）;
color:
#0000FF;border:
0px;margin:
0px;
padding:
0px;height:
23px;width:
82px;
font-size:
14px;
讨论
讲解与演示
多媒体，能上网
30’
1、层的隐藏和显示【举例】30’
style.display属性操作元素的显示状态
Object.style.display=value
z-index:
定义和用法
z-index属性设置元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
Ø元素可拥有负的z-index属性值。
ØZ-index仅能在定位元素上奏效（例如position:
absolute;）
该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。
如果为正数，则离用户更近，为负数则表示离用户更远
ØZ-index可能的值
讨论
讲解与演示
多媒体，能上网
10’
学生提问或亲自上台操作
学生操作
演示
多媒体，能上网
5’
知识回顾与作业布置
回答
教师总结与布置作业
多媒体
第7次课，2学时
适用专业
软件技术（Java开发）、计算机网络技术（Web前端开发）
课题
第6章表单验证技术
教学目的
熟悉使用表单验证
掌握文本框控件
掌握使用DOM模型的层次关系访问元素的方法
掌握使用表单事件和脚本函数实现表单验证技术
掌握DIV的innerHTML或innerText动态显示内容；
重点与难点
重点：
使用DOM模型的层次关系访问元素；使用表单事件和脚本函数实现表单验证；使用表单验证；文本框控件；正则表达验证；
难点：
使用表单事件和脚本函数实现表单验证
教学设计
概述
案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例
教学环境及资源要求
DreamweaverCS6以上，能上网
复习提问
CSS3能制作什么类型的动画？
授课要点
使用DOM模型的层次关系访问元素
使用表单事件和脚本函数实现表单验证
使用表单验证
文本框控件
课外作业
编写用于验证用户注册页面的正则表达式，实现注册页面验证功能？
教学设计与教学内容
时间分配
教学内容
学生活动
教师活动
实训设备
5’
回忆上次课程内容
【style样式属性动态改变边框颜色】
【className类名属性动态改变按钮背景图片】
【display显示属性实现层或图片的隐藏/显示和切换特效】
学生回答
提问与总结
多媒体
25’
1、什么是表单验证【举例】10’
当用户在输入相关数据时，对输入的数据进行相关的验证，检查数据格式是否符合要求，在数据格式正确过后再上传至服务器。
表单验证是javascript中的高级选项之一，JavaScript用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证
2、为什么要学表单验证【举例】15’
减轻服务器端的压力
每一个元素包含一个拆分后的子串。
例如对于下面的字符串：
如果以逗号为分隔符，可以将该字符串拆分为一个数组，数组中的每一个元素包含一个不同的水果
讨论
讲解与演示
多媒体，能上网
40’
1、表单验证内容【举例】20’
以注册表单为例：
1）是否为空
2）是否为数字
3）是否为电子邮件
4）是否在某个范围
5）长度是否足够
6）出生日期
7）省市级联菜单
replace（）方法
replace（）方法可以根据需要将字符串中的String对象或者文字替换掉，形成一个新的字符串
search（）方法
search（）方法可以根据模式字符串进行查找。
如果目标字符串中找到与模式匹配的第一个字串，则search（）方法则返回该子串被找到的位置，否则返回-1。
search（）方法只接收一个参数，即需要查找的模式字符串
2、文本框控件【举例】20’
文本框对象的常用属性、方法、事件
文本框控件在网页设计中的使用是相当频繁的，当需要获得更好的用户体验时，就需要使用JavaScript代码来对其进行操作，如获取或修改其属性值，控制其获取焦点等等，接下来我们就对文本框的相关属性和方法进行说明。
Øvalue属性
在网页中我们可以使用文本框的value属性来获取其值或者修改其值，例如我们可以获取表单中id为txtEmail的值
Øfocus（）方法
在用户进行操作时，某一些时候需要自动的将某一个文本框设置为焦点，进行数据的输入，此时就可以使用focus（）方法来让其获得焦点，以便用户对其进行数据的输入。
例当文本框获取焦点时将文本框的数据清空，并将边框设为红色。
讨论
讲解与演示
多媒体，能上网
10’
学生提问或亲自上台操作
学生操作
演示
多媒体，能上网
5’
知识回顾与作业布置
回答
教师总结与布置作业
多媒体
第8次课，2学时
适用专业
软件技术（Java开发）、计算机网络技术（Web前端开发）
课题
第7章客户端数据请求技术
教学目的
了解WEBSerice
掌握XML文件
掌握HTTP通信机制
掌握AJAX方法；
了解熟悉JSON技术
重点与难点
重点：
XML文件、AJAX方法
难点：
AJAX方法、JSON数据读取
教学设计
概述
案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例
教学环境及资源要求
Drea
升级会员 