jQuery网页特效任务驱动式教程（微课版）教学教案

任务1-1DOM和jQuery（2次课）课程内容信息说明主题DOM和jQuery所属任务任务1教学目标知识目标理解DOM树形结构和DOM节点的类型及概念掌握jQuery的入口函数及ready事件掌握jQuery对象与DOM对象相互转换的方法能力目标能够熟练应用jQuery的入口函数和ready事件完成基本的jQuery操作，能够熟练进行jQuery对象与DOM对象的转换，并完成相关对象的操作。重点jQuery的入口函数及ready事件jQuery对象与DOM对象相互转换的方法难点jQuery对象与DOM对象的区别及相互转换的方法教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.DOM树形结构和DOM节点的类型及概念（30分钟）（1）文档对象模型DOM（2）各种类型的DOM节点，着重讲解元素节点、属性节点和文本节点，通过示例获取三种节点的信息并在控制台中输出，观察结果2.jQuery概述（20分钟）（1）简介jQuery的功能（2）下载并使用jQuery（3）jQuery的入口函数及用法3.jQuery中的ready事件（30分钟）（1）ready事件的几种写法（2）jQuery的ready与js的load对比分析4.jQuery对象与DOM对象的相互转换（40分钟）（1）两种对象的获取方法说明及进行相互转换的必要性说明（2）将jQuery对象转换为DOM对象的方法（3）将DOM对象转换为jQuery对象的方法5.课堂小练习（40分钟，学生完成+教师讲解）（1）学生完成小练习页面中有一组单选按钮，在选择某个选项后判断哪个radio按钮被选中，然后获取其value属性值并在控制台输出。要求：分别使用JavaScript和jQuery完成（2）教师讲解小练习6.小测试（15分钟）（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）（2）教师讲解小测试课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动完成作业获取一组列表项的文本并在控制台输出要求：分别使用JavaScript和jQuery完成检查学生作业，总结作业中的问题，并反馈给学生

任务1-2jQuery选择器及元素的查找方法（2次课）课程内容信息说明主题jQuery选择器及元素的查找方法所属任务任务1教学目标知识目标掌握基本选择器、层级选择器的作用和用法掌握伪类选择器的用法掌握各种查找方法的作用和用法能力目标能够熟练应用jQuery的选择器选择需要的jQuery对象；能够熟练应用查找方法根据指定的元素查找到另外的元素。重点基本选择器、层级选择器的作用和用法伪类选择器的用法各种查找方法的作用和用法难点伪类选择器中的:first-child和:first的用法教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.jQuery的基本选择器（20分钟）（1）ID选择器（2）类选择器（3）标记名选择器（4）组选择器2.jQuery的层级选择器（30分钟）（1）包含选择器（2）子对象选择器（3）相邻选择器（4）兄弟选择器3.jQuery中的伪类选择器和过滤器（40分钟）（1）伪类选择器:first，:first-child，:nth-child，:even，:odd，:not，:eq()（2）过滤器eq()4.jQuery中的查找操作（70分钟）（1）向下查找后代元素（2）向上查找祖先元素（3）查找兄弟元素（4）应用查找方法5.小测试（15分钟）（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）（2）教师讲解小测试课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动复习

任务1-3jQuery操作DOM元素的几个基本方法（2次课）课程内容信息说明主题jQuery操作DOM元素的几个基本方法所属任务任务1教学目标知识目标掌握attr()和prop()方法掌握each()方法掌握获取元素索引的不同方法及区别掌握为元素添加和移除类的操作方法能力目标能够熟练使用jQuery的各种方法操作DOM元素。重点attr()、prop()和each()方法遍历中的index()方法和遍历函数参数中的index作用的不同之处难点遍历中的index()方法和遍历函数参数中的index作用的不同之处教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.复习巩固-选择和查找方法的应用-学生思考并讲解（45分钟）要选择body中的第3个段落，如何操作？要得到body中第3个段落的下一个元素，如何操作？$("span").parent()获取的元素有几个？$("span").parents()获取的元素有几个？代码$("p").parent()获取的元素有几个？代码$("p").parent('div')获取的元素有几个？要根据div2-2-1找到div2-2-2，有哪几种查找路径？要根据div2-2-1找到div2-1，有哪几种查找路径？要根据div2-2-1找到div1，有哪几种查找路径？2.attr()和prop()方法（45分钟）（1）两个方法在获取和设置元素属性值中的应用格式（2）两个方法在获取和设置布尔类型属性取值中的差异及选择3.jQuery中的each()方法（60分钟）（1）each()函数的作用、格式及用法（2）元素的index问题4.为元素添加和移除类（10分钟）（1）addClass()（2）removeClass()5.小测试（15分钟）（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）（2）教师讲解小测试课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：页面中有4个img元素，文件夹中有4幅图，分别是img1.jpg~img4.jpg，为4个img元素设置其src属性的取值分别是这4个文件检查作业，并将作业问题反馈给学生

任务1-4jQuery中的事件机制（2次课）课程内容信息说明主题jQuery中的事件机制所属任务任务1教学目标知识目标掌握使用on()方法、事件的快捷方法和one()方法为元素注册事件的做法掌握使用off()方法为元素注销事件的做法能力目标能够根据元素的具体情况和要求使用相应的方法为元素注册事件或者注销事件。重点注册事件和注销事件的方法on()、one()、off()和事件的快捷方法难点为动态生成的元素注册事件或者注销事件的做法教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.注册事件（55分钟）（1）使用on()方法为元素自身或者后代元素注册一个或多个事件（2）使用事件的快捷方法为元素自身注册事件（3）one()方法与on()方法的区别2.注销事件（35分钟）（1）使用off()方法为元素自身注销事件（2）使用off()方法为后代元素注销事件（3）使用off()方法的注意事项3.应用事件和查找及选择方法为div设置阴影（70分钟）（1）设置div阴影的功能实现思路说明（2）定义页面元素及相关样式（3）定义jQuery代码为指定div设置阴影效果4.小测试（15分钟）（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）（2）教师讲解小测试课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：按照要求修改为div设置阴影的小案例，并提交作业检查作业，并将作业问题反馈给学生

任务2-1制作漂浮的广告（2次课）课程内容信息说明主题制作漂浮广告所属任务任务2教学目标知识目标掌握实现漂浮广告时的方法和思路掌握对漂浮广告进行控制的做法掌握jQuery中的css()方法能力目标能够根据要求完成漂浮广告的设计，能够使用css()方法设置或者获取元素的样式属性取值。重点漂浮广告实现原理jQuery中的css()方法难点漂浮广告实现原理jQuery中使用css()方法设置元素样式属性取值时，样式属性的不同写法教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.基于fixed定位的元素的漂浮效果设计（65分钟）（1）广告移动方向说明（2）使用JavaScript代码定义move()函数实现元素的漂浮功能（3）使用setInterval()调用函数move()时的注意事项（4）关于全局变量gox和goy的问题（5）使用jQuery代码实现漂浮广告功能2.jQuery中的css()方法（45分钟）（1）使用css()方法返回元素的样式属性取值（2）css("width")与width()的对比（3）使用css()方法设置元素样式属性值3.为漂浮广告增加控制功能（50分钟）（1）关闭按钮的添加（2）设置广告停止移动（3）单击关闭按钮隐藏漂浮广告4.小测试（15分钟）（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）（2）教师讲解小测试课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：按照要求完善漂浮广告小案例，并提交作业检查作业，并将作业问题反馈给学生

任务3表单数据验证（2次课）课程内容信息说明主题表单数据验证所属任务任务3教学目标知识目标掌握表单数据验证中各种函数的定义和调用形式、正则表达式的应用方法等掌握使用正则表达式及事件动态识别密码强度的做法能力目标能够使用正则表达式或者普通的函数定义完成表单数据验证的各项功能、能够在输入密码的过程中动态识别密码强度重点定义函数，在表单数据提交时进行表单数据验证使用正则表达式动态识别密码强度定义函数，对表单数据进行即时验证难点使用正则表达式动态识别密码强度定义函数，对表单数据进行即时验证教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.使用HTML5表单元素属性对部分数据进行验证（15分钟）（1）对用户名进行验证（2）对密码进行验证（3）对手机号进行验证（4）对密码问题答案进行验证2.为form标记定义submit事件函数，完成部分元素的表单数据验证（45分钟）（1）验证性别和兴趣爱好是否选择（2）验证密码保护问题是否选择（3）验证确认密码和密码是否一致3.设置密码强度（50分钟）（1）JS中的正则表达式（2）正则表达式的test()方法（3）使用正则式检测密码串，根据检测结果显示密码强弱信息4.使用JavaScript正则表达式完成数据的即时验证（50分钟）（1）输入完用户名之后的验证（2）输入完密码之后的验证（3）输入完手机号之后的验证5.小测试（15分钟）（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）（2）教师讲解小测试课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：使用jQuery实现邮箱自动导航，并提交作业检查作业，并将作业问题反馈给学生

任务4实现级联菜单（3次课）课程内容信息说明主题实现级联菜单所属任务任务4教学目标知识目标掌握使用下拉列表实现年月日级联菜单的方法和步骤掌握使用选项卡方式实现省市区级联菜单的方法和步骤能力目标能够使用闭包实现不同类型级联菜单的功能重点使用下拉列表实现年月日级联菜单JSON数据的访问使用选项卡实现省市区级联菜单难点JSON数据的异步处理问题省市区级联中元素定位坐标的设计要求教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.使用下拉列表实现年月日级联菜单（65分钟）（1）JS和jQuery操作select和option（2）年月日级联菜单实现步骤（3）观察、发现并解决问题：如果用户已经选择过年月日信息，重新点开月份下拉列表框，选择的是第一个选项（--请选择月份--），此时点开日期列表框，看到下面有31个日期列表项，为什么会出现这种现象？要如何解决？（4）观察、发现并解决问题：选择一次年月日之后，不刷新页面，重新更换月份和日期，发现什么问题？再更换一次月份和日期？再更换一次年月日？2.改变DOM树形结构的常用方法（25分钟）（1）创建元素（2）更换元素的内部结构（3）在元素内部插入子元素（4）在元素外部插入兄弟元素3.关于JSON（40分钟）（1）JSON数据的各种定义和访问形式（2）独立存储的JSON数据及访问方式（3）访问数据文件city.json4.实现省市区级联功能（120分钟）（1）设计页面元素并定义元素样式（2）应用闭包实现级联功能对每个选项卡注册click事件为.prov中的span（省份名称）注册click事件为.city中的span元素（地市名称）注册click事件为.area中的span元素（区县名称）注册click事件（3）程序中的缺陷及解决方案5.小测试（15分钟）（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）（2）教师讲解小测试课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：完善省市区级联菜单功能，并提交作业检查作业，并将作业问题反馈给学生

任务5-1文本动画和显隐动画（2次课）课程内容信息说明主题实现动画效果所属任务任务5教学目标知识目标掌握使用css()制作动画的方法掌握显隐动画函数的用法能力目标能够熟练使用css()方法实现文本动画，使用显隐动画模拟文件夹的树形列表结构重点制作动画的各种函数的作用和用法：css()、显隐动画难点使用显隐动画模拟文件夹的树形列表结构教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.使用css()方法实现文本动画效果（35分钟）要求：页面中有三个段落，内容任意，段落内容使用默认样式效果，当鼠标指向段落时，将段落背景改为黄色，文本改为红色，鼠标离开段落时，将背景改为白色，文本改为蓝色；鼠标单击段落时，段落字号放大为原来的1.2倍（1）添加页面元素，设计css()动画（2）jQuery中hover()方法的应用2.使用显隐动画模拟文件夹的树形列表结构（55分钟）（1）设计元素结构（2）使用脚本代码实现功能3.显示隐藏动画函数（55分钟）（1）show()、hide()、toggle()（2）示例讲解：有动画效果的显示与隐藏动画4.应用动画的回调函数（30分钟）观察给定代码的运行效果，思考问题，给出相应的解决方案课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：使用循环结构在页面中添加5个div，div的样式要求为宽度100像素，高度100像素，背景绿色，边距2像素，行内块布局，内容为序号1、2、3、4、5，内容在水平和垂直方向都居中；动画效果要求为：单击第2到第5个div时，完成自身的隐藏，单击第1个div时完成后面4个div的显示。检查作业，并将作业问题反馈给学生

任务5-2淡入淡出和上卷下拉动画（2次课）课程内容信息说明主题淡入淡出和上卷下拉动画所属任务任务5教学目标知识目标掌握淡入淡出动画函数的用法掌握上卷下拉动画函数的用法能力目标能够熟练使用淡入淡出动画和上卷下拉动画函数实现动画效果重点淡入淡出动画函数上卷下拉动画函数难点使用上卷下拉动画实现阶梯式的动画效果淡入淡出函数中fadeTo()中透明度的问题教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.淡入淡出动画函数（35分钟）（1）4个函数的格式和用法：fadeIn()、fadeOut()、fadeToggle()、fadeTo()（2）使用4个函数实现简单的淡入淡出动画，重点演示fadeTo()透明度对fadeIn()和fadeOut()透明度的影响。2.上卷下拉动画函数（55分钟）（1）3个函数的格式和用法：slideDown()、slideUp()、slideToggle()（2）使用上卷下拉函数实现百叶窗效果（3）使用上卷下拉函数实现折叠框动画3.阶梯式的上卷下拉动画（85分钟）（1）阶梯式上卷下拉动画的效果演示及任务描述（2）jQuery中的队列控制方法（3）使用队列控制方法实现阶梯式的上卷下拉动画课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：完善阶梯式的上卷下拉动画效果，改写程序。检查作业，并将作业问题反馈给学生

任务5-3animate()动画和动画控制（1次课）课程内容信息说明主题animate()动画和动画控制所属任务任务5教学目标知识目标掌握animate()动画方法的用法理解动画控制方法的作用和用法能力目标能够熟练使用animate()函数实现复杂的动画效果重点animate()动画函数动画控制方法难点使用animate()函数实现复杂的动画效果教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.animate()动画函数（45分钟）（1）animate()函数的格式和用法（2）使用animate()函数实现返回页面顶部的滚动动画。2.动画控制方法（25分钟）（1）停止动画函数stop()的格式和用法（2）延时动画函数delay()的用法3.动画相关小测试（15分钟）完成任务5的所有内容相关小测试课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：复习动画相关的所有函数。

任务6-1索引切换轮播（1次课）课程内容信息说明主题索引切换轮播所属任务任务6教学目标知识目标掌握实现索引切换轮播的方法和思路能力目标能够熟练完成索引切换轮播特效重点索引切换轮播的实现方法难点索引切换轮播的实现方法、定时器叠加问题及原因分析教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.实现最简单的索引切换轮播（35分钟）（1）任务描述（2）定义函数实现索引切换轮播，调用函数。2.扩展索引切换轮播功能（50分钟）（1）停止和重启轮播功能解决定时器叠加问题带来的影响（2）后退和前进功能（3）跟随变化的数字索引（4）单击数字索引进行图片切换课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：完善索引切换轮播特效。

任务6-2使用animate()实现无缝滚动轮播（2次课）课程内容信息说明主题使用animate()实现无缝滚动轮播所属任务任务6教学目标知识目标掌握实现无缝滚动轮播的方法和思路能力目标能够熟练完成无缝滚动轮播特效重点无缝滚动轮播的实现方法难点无缝滚动轮播中无缝衔接问题的解决方案和思路判断动画是否正在进行中的条件的应用教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.实现最简单的无缝滚动轮播（90分钟）（1）任务描述（2）添加页面元素，定义元素的样式。（3）无缝滚动轮播的实现原理说明（4）定义函数实现无缝滚动轮播（5）无缝滚动轮播中的定时器时间设置2.扩展无缝滚动轮播功能（85分钟）（1）停止和重启轮播功能：解决定时器叠加问题带来的影响（2）后退和前进功能（3）添加跟随变化的数字索引（4）前进后退功能中的动画是否正在进行中的判断条件的作用和应用课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：完善无缝滚动轮播特效。

任务6-3使用CSS3动画实现无缝滚动轮播（1次课）课程内容信息说明主题使用CSS3动画实现无缝滚动轮播所属任务任务6教学目标知识目标掌握使用CSS3动画实现无缝滚动轮播的方法和思路能力目标能够熟练完成无缝滚动轮播特效重点使用CSS3动画实现无缝滚动轮播的方法难点滚动条元素的样式定义教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.使用CSS3动画实现无缝滚动轮播（85分钟）（1）任务描述（2）添加页面元素，定义元素的样式。（3）定义函数实现无缝滚动轮播课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：完善无缝滚动轮播特效。

任务6-4旋转滚动轮播（1次课）课程内容信息说明主题旋转滚动轮播所属任务任务6教学目标知识目标掌握实现旋转滚动滚动轮播的方法和思路能力目标能够熟练完成旋转滚动轮播特效重点实现旋转滚动轮播的方法难点旋转滚动轮播中每个图片更换位置时的坐标设置要求教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.旋转滚动滚动轮播（75分钟）（1）任务描述及旋转方向说明（2）添加页面元素，定义元素的样式。（3）定义函数实现旋转滚动轮播（4）停止和重启旋转轮播2.尝试并思考问题（10分钟）（1）若是将css()方法中设置z-index取值的代码放入animate()动画内部，效果会如何？为什么？（2）若是将修改z-index取值的代码放入animate()动画的回调函数内部，效果会如何？为什么？课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：完善旋转滚动轮播特效。

任务7-1购物网站中的放大镜（2次课）课程内容信息说明主题购物网站中的放大镜所属任务任务7教学目标知识目标掌握放大镜的实现原理掌握放大镜功能的实现思路和方法能力目标能够熟练完成购物网站中的放大镜特效重点实现放大镜功能的方法难点放大镜特效中各种元素的布局及定位要求移动块的坐标计算方法教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.放大镜的页面布局及样式定义（90分钟）（1）任务描述及效果演示（2）添加页面元素。（3）定义页面元素的样式，强调各种元素的定位要求2.放大镜的实现（85分钟）（1）放大镜的实现原理说明（2）使用脚本实现放大镜功能（3）更换需要放大的图片课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：完善放大镜特效。

任务7-2瀑布流图像布局（1次课）课程内容信息说明主题瀑布流图像布局所属任务任务7教学目标知识目标掌握瀑布流图像布局的实现原理掌握瀑布流图像布局功能的实现思路和方法能力目标能够熟练完成瀑布流图像布局特效重点实现瀑布流图像布局的方法难点瀑布流图像布局中每个li元素的坐标位置计算方法教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.瀑布流图像布局（85分钟）（1）任务描述及效果演示（2）添加页面元素并定义元素样式。（3）瀑布流的实现原理-第一行坐标的设置（4）瀑布流的实现原理-第二行坐标的设置（5）脚本功能实现课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：完善瀑布流布局特效。

任务7-3添加文件类型图标（1次课）课程内容信息说明主题添加文件类型图标所属任务任务7教学目标知识目标掌握添加文件类型图标功能的实现思路和方法能力目标能够熟练完成添加文件类型图标功能重点实现判断上传文件的类型的方法难点FileReader对象的应用教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.添加文件类型图标（75分钟）（1）任务描述及效果演示（2）添加页面元素并定义元素样式。（3）脚本功能实现使用数组保存文件类型和图标文件名称定义每个文件域元素的change事件函数（4）观察思考并解决问题2.JavaScript读取外部文件（10分钟）（1）FileReader对象的事件（2）FileReader对象的属性课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：页面初始时只有一个上传文件的文件域元素和一个空白的图像元素，空白的图像元素并没有任何显示效果，选择任意位置的任意图片上传，读取之后将其显示在页面中。批改作业并向学生反馈作业问题

任务8-1应用模态框添加和修改表格数据（1.5次课）课程内容信息说明主题应用模态框添加和修改表格数据所属任务任务8教学目标知识目标理解模态框的概念和用法掌握应用模态框添加和修改表格数据的思路和方法能力目标能够熟练应用模态框添加和修改表格数据重点应用模态框添加和修改表格数据难点表格操作中行序号的应用修改行功能中表格行号全局变量的定义及应用教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.应用模态框添加和修改表格数据（120分钟）（1）任务描述及效果演示（15分钟）（2）添加页面元素并定义元素样式（35分钟）。（3）脚本功能实现（70分钟）删除某个行之后修改行号、删除行功能、修改行功能（进入修改界面、完成修改）、关闭模态框、添加行功能（4）观察思考并解决问题2.模态框的概念及应用（10分钟）（1）FileReader对象的事件（2）FileReader对象的属性课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：完善模态框应用。批改作业并向学生反馈作业问题

任务8-2应用模态框实现签到和评分功能（2次课）课程内容信息说明主题应用模态框实现签到和评分功能所属任务任务8教学目标知识目标掌握应用应用模态框实现签到和评分功能的思路和方法能力目标能够熟练应用模态框实现签到和评分功能重点应用模态框实现签到和评分功能难点控制签到状态变化的方案教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.应用模态框实现签到和评分功能-元素设计与样式定义（90分钟）（1）任务描述及效果演示（25分钟）（2）添加页面元素并定义元素样式（65分钟）。页面元素-签到模态框、单一评分、批量评分模态框页面元素-已签到和未签到选项卡及内容区元素样式定义2.应用模态框实现签到和评分功能-脚本功能（85分钟）（1）定义学生信息的数据对象（2）向选项卡内容区的表格添加学生信息（3）完成选项卡的切换功能（4）表格行序号的调整（5）完成签到状态的修改（6）进行单一评分和批量评分（7）模态框的关闭（8）复选框全选控制课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：完善应用模态框实现签到和评分功能。批改作业并向学生反馈作业问题

任务8-3读取Excel数据表并进行排序操作（3次课）课程内容信息说明主题读取Excel数据表并进行排序操作所属任务任务8教学目标知识目标掌握读取Excel数据表并进行排序操作的思路和方法能力目标能够熟练应用FileReader对象读取excel数据表，并对数据表中的数据进行排序操作重点使用FileReader对象读取excel数据表将数据表数据添加到页面的表格中对页面表格中的数据按照用户点击操作完成排序难点对页面表格中的数据按照用户点击操作完成升序或者降序排序教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.读取Excel数据表并进行排序操作-元素定义（45分钟）（1）任务描述及效果演示（20分钟）（2）添加页面元素并定义元素样式（使用字体图标添加升序或降序的小三角符号）（25分钟）。2.读取excel文件并添加到表格中（90分钟）（1）读取excel文件，得到JSON数据形式（2）为表格添加标题行，为列标题引用类名sort，增加自定义属性data-isasc（3）为表格添加内容行，对于非数字列，将列名记录到数组中，为后面进行排序做准备3.单击标题列进行排序（90分钟）进行排序时，需要使用自定义属性data-isasc控制升序和降序。如果取值为0，则表示要进行升序排序