HTML5网页编程教案.pdf

《HTML5网页编程教案.pdf》由会员分享，可在线阅读，更多相关《HTML5网页编程教案.pdf（119页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、.HTML5 网页编程 教 案 教案首页 本次课标题：情景一 JavaScript 基础应用 任务 1 JavaScript 语言基础-语法 授课日期 第 1 周第 1 次 授课班级 上课地点 实验楼 L 区 课时分配 面对面翻转课堂教学2 课时（120 分钟）教 学 目 标 能力目标 知识目标 1、会利用 JS 基本语法完成程序控制流程。2、会编写 JS 函数；3、会选择相应事件调用函数。1、掌握 JS 基本语法 2、掌握函数定义方法 3、掌握自定义函数的调用 学习者特征分析 大部分学生学习态度较好，学习意愿强，但自主学习能力不强；学生学习热情较高，能在论坛上提出问题；教 学 任 务 教学任

2、务：JS 语法基础应用 案例：精品课程网站首页中建立用户名、密码登陆框。重 点 难 点 重点：函数编写 难点：自定义函数编写及控制语句编写；.作业或 考核 编写输出五行星号程序。参 考 资 料 精通 JavaScript+jQuery人民邮电出版社 前沿科技.精通 CSS+DIV 网页样式与布局，人民邮电出版社。温谦等.HTML+CSS 网页设计与布局从入门到精通，人民邮电出版社。温谦等.CSS 设计彻底研究，人民邮电出版社。.翻转课堂教学设计 序号 步 骤 教学内容 教师活动（方法与手段）学生活动 时间 分配 评价标准与方法 课前：现代职教课程平台在线学习环节 1 学生自主学习 任务 1 J

3、S 语法基础教学视频学习；JavaScript 简介学习；JavaScript 语法学习；简单案例学习；上传视频、课件等相关资料；观看视频 20 分钟 在线学习时长 2 在线测试 完成任务 1 在线测试题 教师发布题目，导出成绩并分析结果 在线测试 10 分钟 在线测试成绩 3 完成任务作业 利用循环输出“5 行”helloworld 文字到网页中 批阅作业 完成作业 15 分钟 作业等级判定 4 在线讨论 学生与学生、教师进行答疑讨论 回复话题 学生发帖，相互线上讨论 15 分钟 发帖数量与质量评价 课中：面对面翻转课堂教与学环节 1 自主学习检查与讨论 公布学生线上学习情况；抽查视频相关知

4、识点 抽取学生 记录指导 认真演示 认真观看 10 分钟 线上统计结果与抽查结果 2 课前学习总结与答疑 现场答疑；重点提示一下 JS 语法编写规则 总结学生学习情况 一对一答疑 学生提问；认真听讲 10 分钟 测试成绩与课前作业成绩 3 课堂任务下达 教师给出课堂完成的任务:用 JS 完成杨辉三角输出 布置任务 巡回答疑 分析任务 10 分钟 任务理解情况 4 分小组完成任务 1）编写程序算法；2）循环语句设计；3）输出内容到文档中 巡回指导 实战演练；分组讨论 30 分钟 任务完成情况 5 小组评价 小组互评；评价内容：能否设计循环语句；能否正确输出文档 观摩；互答；确定得分依据；记录结果

5、；20 分钟 小组协作与沟通能力 6 小组优秀作品展示 展示运行结果；展示设计思路；并分析小组分工与团队配合情况。观摩；反思；学生展示；认真听讲 记录；15 分钟 本次任务综合评价（完成率及创新点）.7 教师总结与引导 总结小组任务情况并给予小组点评；总结表单操作流程与规范 讲授 认真听讲 记录；反思 15 分钟 8 布置下次课前要学习的任务 布置下次课前要学习的任务：任务 1 制作 告知 记录 10 分钟 线上作业与在线测试完成情况 课后：反思总结及拓展提升教与学环节 1 反思总结 JavaScript 与其它编程语言相似点分析 总结任务难度及学生吸收率；学生进行自发交流总结 20 分钟 教

6、师写教学日志；学生写学习笔记 2 拓展 JS 控制语句语法拓展学习 教师给予课外资源；适当引导学习，学生进行自主探索学习 20 分钟 答疑分享.教学内容 一、学习目标 掌握脚本的基本结构(Script标签)简单记忆基本语法 变量的定义与赋值 数据类型与转换parseFloat等 运算符和控制语句同Java 二、什么是JavaScript 脚本的基本结构 var count=0;document.write(淘宝网欢迎您！);for(i=0;i5;i+)document.write(淘宝网欢迎您！);BODY部分的内容 .三、语法：变量的声明和赋值 “var”用于声明变量的关键字 “count”

7、变量名 运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值 根据所执行的运算，运算符可分为以下类别：算术运算符 +、-、*、/、%、+、-、-(求反)比较运算符 =、!=、=、=逻辑运算符&、|、！if条件语句 switch多分支语句 for、while循环语多行注释以/*开始，以*/结束，符号/*/指示中间的语句是该程序中的注释。例如：/*helloWorld.html 第一个JavaScript程序 */单行注释以/开始，以行末结束 例如：/表示JavaScript代码的开始 parseInt(String)将字符串转换为整型数字 如:parseInt(“86”)将字符串“86”

8、转换为整型值86 parseFloat(String)将字符串转换为浮点型数字 如:parseInt(“34.45”)将字符串“34.45”转换为浮点值34.45 四、总结提问 循环结构的特点是什么？while循环和do-while循环有什么区别？.教案首页 本次课标题：情景一 JavaScript 基础应用 任务 1 JavaScript 语言基础-任务制作 授课日期 第 1 周第 2 次 授课班级）班 上课地点 实验楼 L 区 课时分配 面对面翻转课堂教学2 课时（120 分钟）教 学 目 标 能力目标 知识目标 1、会编写 JS 自定义函数；2、会选择相应事件调用函数。1、掌握函数语法格

9、式。2、掌握函数定义方法 3、掌握自定义函数的调用 学习者特征分析 大部分学生学习态度较好，学习意愿强，但自主学习能力不强；学生学习热情较高，能在论坛上提出问题 教 学 任 务 教学任务：JS 语法基础应用 案例：实现两个数的计算器的加减乘除。重 点 难 点 重点：函数编写 难点：自定义函数编写及控制语句编写；作业或 考核 编写输出五行星号程序。参 考 资 料 精通 JavaScript+jQuery人民邮电出版社 前沿科技.精通 CSS+DIV 网页样式与布局，人民邮电出版社。温谦等.HTML+CSS 网页设计与布局从入门到精通，人民邮电出版社。温谦等.CSS 设计彻底研究，人民邮电出版社。

10、.翻转课堂教学设计 序号 步 骤 教学内容 教师活动（方法与手段）学生活动 时间 分配 评价标准与方法 课前：现代职教课程平台在线学习环节 1 学生自主学习 任务 1 JS 语法基础教学视频学习；JavaScript 语法学习；简单案例学习；上传视频、课件等相关资料；观看视频 20 分钟 在线学习时长 2 在线测试 完成任务 1 在线测试题 教师发布题目，导出成绩并分析结果 在线测试 10 分钟 在线测试成绩 3 完成任务作业 如何希望点击某个按钮后才显示“HelloWorld”，并能输入显示的次数 批阅作业 完成作业 15 分钟 作业等级判定 4 在线讨论 学生与学生、教师进行答疑讨论 回复

11、话题 学生发帖，相互线上讨论 15 分钟 发帖数量与质量评价 课中：面对面翻转课堂教与学环节 1 自主学习检查与讨论 公布学生线上学习情况；抽查视频相关知识点函数的含义 抽取学生 记录指导 认真演示 认真观看 10 分钟 线上统计结果与抽查结果 2 课前学习总结与答疑 现场答疑；创建函数 总结学生学习情况 一对一答疑 学生提问；认真听讲 10 分钟 测试成绩与课前作业成绩 3 课堂任务下达 教师给出课堂完成的任务:编写具有能对两个操作数进行加、减、乘、除运算的简易计算器。布置任务 巡回答疑 分析任务 10 分钟 任务理解情况 4 分小组完成任务 编写程序算法；4 个按钮调用的函数的代码很类似，

12、怎么优化代码 巡回指导 实战演练；分组讨论 30 分钟 任务完成情况 5 小组评价 小组互评；评价内容：优化代码 能否正确输出文档 观摩；互答；确定得分依据；记录结果；20 分钟 小组协作与沟通能力.6 小组优秀作品展示 展示运行结果；展示设计思路；并分析小组分工与团队配合情况。观摩；反思；学生展示；认真听讲 记录；15 分钟 本次任务综合评价（完成率及创新点）7 教师总结与引导 总结小组任务情况并给予小组点评；总结表单操作流程与规范 讲授 认真听讲 记录；反思 15 分钟 8 布置下次课前要学习的任务 布置下次课前要学习的任务：情景二任务 2 DOM模型-window 对象 告知 记录 10

13、 分钟 线上作业与在线测试完成情况 课后：反思总结及拓展提升教与学环节 1 反思总结 JavaScript 与其它编程语言相似点分析 总结任务难度及学生吸收率；学生进行自发交流总结 20 分钟 教师写教学日志；学生写学习笔记 2 拓展 JS 语法拓展学习 教师给予课外资源；适当引导学习，学生进行自主探索学习 20 分钟 答疑分享.教学内容 一、函数的含义：类似于Java中的方法，是执行特定任务的语句块。问题：如何希望点击某个按钮后才显示“HelloWorld”，并能输入显示的次数，怎么办？二、分析问题：1、在页面中放置一个文本框和一个按钮，让用户输入次数后点击按钮才显示 2、把循环显示的代码放

14、置到函数中，当点击按钮时，才调用函数显示HelloWorld 经过分析，该如何解决上面问题？三、核心代码分析:function showHello()var count=document.myForm.txtCount.value;for(i=0;icount;i+)document.write(HelloWorld);四、总结提问 大家简述一下JavaScript脚本的基本结构？JavaScript与Java基本语法有哪些相同之处？在JavaScript中，如何定义一个函数？在JavaScript中，如何调用一个函数？在JavaScript中，常见错误有哪些？循环结构的特点是什么？while

15、循环和do-while循环有什么区别？.教案首页 本次课标题：情景一 JavaScript 基础应用 任务 2 DOM 编程window 对象属性与方法 授课日期 第 2 周第 1 次 授课班级）班 上课地点 实验楼 L 区 课时分配 面对面翻转课堂教学2 课时（120 分钟）教 学 目 标 能力目标 知识目标 1、会使用 dom 模型查找元素 2、会使用 open（）方法制作各种广告特效 3、会使用 setTimeout（）方法和 date 对象制作日期和时间显示 1、熟悉 html 文档模型 2、熟悉 window 对象的各种属性 学习者特征分析 学生学习基础一般，缺乏动手实践能力 大部分

16、学生学习态度较好，学习意愿强，但自主学习能力不强 教 学 任 务 教学任务：window 对象编程 案例：精品课程网站首页中实现弹出对话框。重 点 难 点 重点：window 对象函数应用 难点：window 对象函数应用编写 作业或 考核 编写打开精品课程首页同时自动弹出欢迎广告窗口。参 考 资 料 精通 JavaScript+jQuery人民邮电出版社 前沿科技.精通 CSS+DIV 网页样式与布局，人民邮电出版社。温谦等.HTML+CSS 网页设计与布局从入门到精通，人民邮电出版社。温谦等.CSS 设计彻底研究，人民邮电出版社。.翻转课堂教学设计 序号 步 骤 教学内容 教师活动（方法与

17、手段）学生活动 时间 分配 评价标准与方法 课前：现代职教课程平台在线学习环节 1 学生自主学习 任务 2 DOM 模型window 对象 教学视频学习；DOM 模型学习；Window 属性学习；Window 方法学习；简单案例学习；上传视频、课件等相关资料；观看视频 20 分钟 在线学习时长 2 在线测试 完成任务 2 在线测试题 教师导出成绩并分析结果 在线测试 10 分钟 在线测试成绩 3 完成任务作业 输出输入非法数字弹出窗口警告 批阅作业 完成作业 15 分钟 作业等级判定 4 在线讨论 学生与学生、教师进行答疑讨论 回复话题 学生发帖，相互线上讨论 15 分钟 发帖数量与质量评价

18、课中：面对面翻转课堂教与学环节 1 自主学习检查与讨论 公布学生线上学习情况；抽查视频相关知识点 抽取学生 记录指导 认真演示 认真观看 5 分钟 线上统计结果与抽查结果 2 课前学习总结与答疑 现场答疑；重点提示一下 window 对象函数 总结学生学习情况 一对一答疑 学生提问；认真听讲 5 分钟 测试成绩与课前作业成绩 3 课堂任务下达 教师给出课堂完成的任务:完成广告窗口特效 布置任务 巡回答疑 分析任务 5 分钟 任务理解情况 4 分小组完成任务（1）设计主页面；（2）设计广告窗口（3）编写 js 函数；（4）添加事件处理事件 巡回指导 实战演练；分组讨论 20分钟 任务完成情况 5

19、 小组评价（1）页面效果是否实现；（2）Js 函数主体功能是否实现 观摩；互答；确定得分依据；记录结果；10 分钟 小组协作与沟通能力 6 小组优秀学生演示本次任务中的制作流程及优点所在，阐明自己不足之处。观摩；反思；学生展示；认真听讲 记录；5 分钟 本次任务综合评价（完成率及创新.作品展示 点）7 教师总结与引导 总结小组任务情况并给予小组点评；总结表单操作流程与规范 讲授 认真听讲 记录；反思 5 分钟 8 布置下次课前要学习的任务 布置下次课前要学习的任务：情景二 任务 3 DOM编程document 对象 告知 记录 5 分钟 线上作业与在线测试完成情况 课后：反思总结及拓展提升教与

20、学环节 1 反思总结 总结案例的贯彻作用。反思记录课堂案例引入是否符合学生认知规律 学生进行自发交流总结 20 分钟 教师写教学日志；学生写学习笔记 2 拓展 JS 的 dom 模型拓展学习 教师给予课外资源；适当引导学习，学生进行自主探索学习 20 分钟 答疑分享.教学内容 一 在线平台测试与作业点评 公布学生在线平台测试与作业成绩，并点评。二 布置课堂任务单 任务介绍：一、相关知识点 1、javascript基本语法 1、变量的命名规则 2、变量的使用.3、数据类型 2、现场编程 使用变量存储以下MP3信息，并打印输出 品牌（brand）：爱国者F928 重量（weight）：12.4 电

21、池类型（type）：内置锂电池.价格（price）：499 3、总结提问 什么是计算机程序？什么是变量？JavaScript常用的数据类型有哪些？简述JavaScript脚本的基本结构？在JavaScript中，常见错误有哪些？.教案首页 本次课标题：情景一 JavaScript 基础应用 任务 2 DOM 编程window 对象-任务制作 授课日期 第 2 周第 2 次 授课班级）班 上课地点 实验楼 L 区 课时分配 面对面翻转课堂教学2 课时（120 分钟）教 学 目 标 能力目标 知识目标 1、会使用 dom 模型查找元素 2、会使用 open（）方法制作各种广告特效 3、会使用 se

22、tTimeout（）方法和 date 对象制作日期和时间显示 1、熟悉 html 文档模型 2、熟悉 window 对象的各种属性 学习者特征分析 学生学习基础一般，缺乏动手实践能力 大部分学生学习态度较好，学习意愿强，但自主学习能力不强 教 学 任 务 教学任务：window 对象编程 案例：精品课程网站首页中实现弹出对话框。重 点 难 点 重点：window 对象函数应用 难点：window 对象函数应用编写 作业或 考核 编写打开精品课程首页同时自动弹出欢迎广告窗口。参 考 资 料 精通 JavaScript+jQuery人民邮电出版社 前沿科技.精通 CSS+DIV 网页样式与布局，人

23、民邮电出版社。温谦等.HTML+CSS 网页设计与布局从入门到精通，人民邮电出版社。温谦等.CSS 设计彻底研究，人民邮电出版社。.翻转课堂教学设计 序号 步 骤 教学内容 教师活动（方法与手段）学生活动 时间 分配 评价标准与方法 课前：现代职教课程平台在线学习环节 1 学生自主学习 任务 2 DOM 模型window 对象 教学视频学习；DOM 模型学习；Window 属性学习；Window 方法学习；简单案例学习；上传视频、课件等相关资料；观看视频 20 分钟 在线学习时长 2 在线测试 完成任务 2 在线测试题 教师导出成绩并分析结果 在线测试 10 分钟 在线测试成绩 3 完成任务作

24、业 输出输入非法数字弹出窗口警告 批阅作业 完成作业 15 分钟 作业等级判定 4 在线讨论 学生与学生、教师进行答疑讨论 回复话题 学生发帖，相互线上讨论 15 分钟 发帖数量与质量评价 课中：面对面翻转课堂教与学环节 1 自主学习检查与讨论 公布学生线上学习情况；抽查视频相关知识点 抽取学生 记录指导 认真演示 认真观看 5 分钟 线上统计结果与抽查结果 2 课前学习总结与答疑 现场答疑；重点提示一下 Date 对象 总结学生学习情况 一对一答疑 学生提问；认真听讲 5 分钟 测试成绩与课前作业成绩 3 课堂任务下达 教师给出课堂完成的任务:完成广告窗口特效 布置任务 巡回答疑 分析任务

25、5 分钟 任务理解情况 4 分小组完成任务 Date 对象做时钟显示；使用setTimeout()方法每隔 1 秒调用显示时间的方法 巡回指导 实战演练；分组讨论 20分钟 任务完成情况 5 小组评价 页面效果是否实现；Js 函数主体功能是否实现 观摩；互答；确定得分依据；记录结果；10 分钟 小组协作与沟通能力 6 小组优秀学生演示本次任务中的制作流程及优点所在，阐明自己不足之处。观摩；反思；学生展示；认真听讲 记录；5 分钟 本次任务综合评价（完成率及创新.作品展示 点）7 教师总结与引导 总结小组任务情况并给予小组点评；总结表单操作流程与规范 讲授 认真听讲 记录；反思 5 分钟 8 布

26、置下次课前要学习的任务 布置下次课前要学习的任务：情景二 任务 3 DOM编程document 对象 告知 记录 5 分钟 线上作业与在线测试完成情况 课后：反思总结及拓展提升教与学环节 1 反思总结 总结案例的贯彻作用。反思记录课堂案例引入是否符合学生认知规律 学生进行自发交流总结 20 分钟 教师写教学日志；学生写学习笔记 2 拓展 JS 的 dom 模型拓展学习 教师给予课外资源；适当引导学习，学生进行自主探索学习 20 分钟 答疑分享.教学内容 一 在线平台测试与作业点评 公布学生在线平台测试与作业成绩，并点评。二 布置课堂任务单 任务介绍：二、相关知识点 1、HTML文档的树状结构

27、2、DOM对象模型.3、浏览器对象的分层结构 4、Window对象常用的属性 5、时钟对象.Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数 var today=new Date();date对象方法 .教案首页 本次课标题：情景一 JavaScript 基础应用 任务 3 DOM 编程document 对象属性与方法 授课日期 第 3 周第 1 次 授课班级）班 上课地点 实验楼 K 区 课时分配 面对面翻转课堂教学2 课时（120 分钟）教 学 目 标 能力目标 知识目标 1、会使用 dom 模型查找元素 2、会使用 document 对象制作浮动

28、的各种广告特效 3、会完成表单的全选、全不选特效 1、掌握 document 对象的重要方法 2、掌握 style 样式 JS 调用 学习者特征分析 学生在上次课的基础上，已经基本掌握了 DOM 模型。学生学习基础一般，缺乏动手实践能力 大部分学生学习态度较好，学习意愿强，但自主学习能力不强 教 学 任 务 教学任务：实现滚动的广告窗口特效 案例：精品课程网站首页中实现浮动的欢迎进入等条幅。重 点 难 点 重点：Document 对象函数应用 难点：Document 对象函数应用编写 作业或 考核 编写打开精品课程首页同时自动弹出浮动的欢迎广告窗口。参 考 资 料 精通 JavaScript+

29、jQuery人民邮电出版社 前沿科技.精通 CSS+DIV 网页样式与布局，人民邮电出版社。温谦等.HTML+CSS 网页设计与布局从入门到精通，人民邮电出版社。温谦等.CSS 设计彻底研究，人民邮电出版社。.翻转课堂教学设计 序号 步 骤 教学内容 教师活动（方法与手段）学生活动 时间 分配 评价标准与方法 课前：现代职教课程平台在线学习环节 1 学生自主学习 任务 3 DOM 模型document 对象 教学视频学习；浮动的广告图片特效 层显示隐藏特效学习；上传视频、课件等相关资料；观看视频 20 分钟 在线学习时长 2 在线测试 完成任务 2 在线测试题 教师导出成绩并分析结果 在线测试

30、 10 分钟 在线测试成绩 3 完成任务作业 输出输入非法数字弹出窗口警告 批阅作业 完成作业 15 分钟 作业等级判定 4 在线讨论 学生与学生、教师进行答疑讨论 回复话题 学生发帖，相互线上讨论 15 分钟 发帖数量与质量评价 课中：面对面翻转课堂教与学环节 1 自主学习检查与讨论 公布学生线上学习情况；抽查视频相关知识点 抽取学生 记录指导 认真演示 认真观看 5 分钟 线上统计结果与抽查结果 2 课前学习总结与答疑 现场答疑；重点提示一下 document对象函数 总结学生学习情况 一对一答疑 学生提问；认真听讲 5 分钟 测试成绩与课前作业成绩 3 课堂任务下达 教师给出课堂完成的任

31、务:完成带关闭按钮的浮动窗口特效 布置任务 巡回答疑 分析任务 5 分钟 任务理解情况 4 分小组完成任务 1)在页面中插入层，然后在层中插入图片 2)编写脚本 3)捕获鼠标滚动事件，改变层对象的位置坐标 巡回指导 实战演练；分组讨论 20分钟 任务完成情况 5 小组评价 1）页面特效是否实现 2）脚本编写是否实现主要功能 观摩；互答；确定得分依据；记录结果；10 分钟 小组协作与沟通能力 6 小组优秀作品展示 学生演示本次任务中的制作流程及优点所在，阐明自己不足之处。观摩；反思；学生展示；认真听讲 记录；5 分钟 本次任务综合评价（完成率及创新点）.7 教师总结与引导 会使用 documen

32、t 对象的getElementById()方法访问 DIV 层对象 会使用 document 对象的getElementsByName方法访问表单元素 讲授 认真听讲 记录；反思 5 分钟 8 布置下次课前要学习的任务 布置下次课前要学习的任务：情景三 JavaScript 表单应用任务1 基本的表单验证技术 告知 记录 5 分钟 线上作业与在线测试完成情况 课后：反思总结及拓展提升教与学环节 1 反思总结 特效制作能否拓展 反思学生能否在翻转课堂特效进行一定的拓展 学生进行自发交流总结 20 分钟 教师写教学日志；学生写学习笔记 2 拓展 JS 的 CSS 样式属性拓展学习；教师给予课外资源

33、；适当引导学习，学生进行自主探索学习 20 分钟 答疑分享.教学内容 一 在线平台测试与作业点评 公布学生在线平台测试与作业成绩，并点评。二 布置课堂任务单 会使用 document 对象的 getElementById()方法访问 DIV 层对象 会使用 document 对象的 getElementsByName()方法访问表单元素 会使用 DIV 对象的样式属性控制层的隐藏和显示 任务介绍：三、相关知识点 getElementByID()根据 HTML 元素指定的 ID，获得唯一的一个HTML 元素。如：访问 DIV 层对象、图片 Img对象 getElementsByName()根据

34、HTML 元素指定的 name，获得相同名称的一组元素。如：访问表单元素(全选功能)如何在页面上方显示广告图片？如何控制图片的移动？.实现思路：在页面中插入层，然后在层中插入图片 编写脚本 1、使用 getElementByID()方法获取层对象 2、捕获鼠标滚动事件，改变层对象的位置坐标 常见的页面坐标的介绍 top:指定元素的上边界位置。pixelTop:设置或返回元素的上边界。left:指定元素的左边界位置。scrolltop:页面滚动的高度 var advInitTop=0;function inix()advInitTop=document.getElementById(advLay

35、er).style.pixelTop;function move()document.getElementById(advLayer).style.pixelTop=advInitTop+document.body.scrollTop;window.onscroll=move;/当页面滚动时调用 move()函数 让关闭图标所在的层像浮动窗口一样，也跟随滚动条同步滚动。制作右边栏浮动的带关闭按钮的广告图片 .教案首页 本次课标题：情景一 JavaScript 基础应用 任务 3 DOM 编程document 对象-任务制作 授课日期 第 3 周第 2 次 授课班级）班 上课地点 实验楼 K 区

36、 课时分配 面对面翻转课堂教学2 课时（120 分钟）教 学 目 标 能力目标 知识目标 1、会使用 dom 模型查找元素 2、会使用 document 对象制作浮动的各种广告特效 3、会完成表单的全选、全不选特效 1、掌握 document 对象的重要方法 2、掌握 style 样式 JS 调用 学习者特征分析 学生在上次课的基础上，已经基本掌握了 DOM 模型。学生学习基础一般，缺乏动手实践能力 大部分学生学习态度较好，学习意愿强，但自主学习能力不强 教 学 任 务 教学任务：实现滚动的广告窗口特效 案例：精品课程网站首页中实现浮动的欢迎进入等条幅。重 点 难 点 重点：Document

37、对象函数应用 难点：Document 对象函数应用编写 作业或 考核 编写打开精品课程首页同时自动弹出浮动的欢迎广告窗口。参 考 资 料 精通 JavaScript+jQuery人民邮电出版社 前沿科技.精通 CSS+DIV 网页样式与布局，人民邮电出版社。温谦等.HTML+CSS 网页设计与布局从入门到精通，人民邮电出版社。温谦等.CSS 设计彻底研究，人民邮电出版社。.翻转课堂教学设计 序号 步 骤 教学内容 教师活动（方法与手段）学生活动 时间 分配 评价标准与方法 课前：现代职教课程平台在线学习环节 1 学生自主学习 任务 3 DOM 模型document 对象 教学视频学习；浮动的广

38、告图片特效 层显示隐藏特效学习；上传视频、课件等相关资料；观看视频 20 分钟 在线学习时长 2 在线测试 完成任务 2 在线测试题 教师导出成绩并分析结果 在线测试 10 分钟 在线测试成绩 3 完成任务作业 输出输入非法数字弹出窗口警告 批阅作业 完成作业 15 分钟 作业等级判定 4 在线讨论 学生与学生、教师进行答疑讨论 回复话题 学生发帖，相互线上讨论 15 分钟 发帖数量与质量评价 课中：面对面翻转课堂教与学环节 1 自主学习检查与讨论 公布学生线上学习情况；抽查视频相关知识点 抽取学生 记录指导 认真演示 认真观看 5 分钟 线上统计结果与抽查结果 2 课前学习总结与答疑 现场答

39、疑；重点提示一下 document对象函数 总结学生学习情况 一对一答疑 学生提问；认真听讲 5 分钟 测试成绩与课前作业成绩 3 课堂任务下达 教师给出课堂完成的任务:完成带关闭按钮的浮动窗口特效 布置任务 巡回答疑 分析任务 5 分钟 任务理解情况 4 分小组完成任务 1)在页面中插入层，然后在层中插入图片 2)编写脚本 3)捕获鼠标滚动事件，改变层对象的位置坐标 巡回指导 实战演练；分组讨论 20分钟 任务完成情况 5 小组评价 3）页面特效是否实现 4）脚本编写是否实现主要功能 观摩；互答；确定得分依据；记录结果；10 分钟 小组协作与沟通能力 6 小组优秀作品展示 学生演示本次任务中

40、的制作流程及优点所在，阐明自己不足之处。观摩；反思；学生展示；认真听讲 记录；5 分钟 本次任务综合评价（完成率及创新点）.7 教师总结与引导 会使用 document 对象的getElementById()方法访问 DIV 层对象 会使用 document 对象的getElementsByName方法访问表单元素 讲授 认真听讲 记录；反思 5 分钟 8 布置下次课前要学习的任务 布置下次课前要学习的任务：情景三 JavaScript 表单应用任务1 基本的表单验证技术 告知 记录 5 分钟 线上作业与在线测试完成情况 课后：反思总结及拓展提升教与学环节 1 反思总结 特效制作能否拓展 反思

41、学生能否在翻转课堂特效进行一定的拓展 学生进行自发交流总结 20 分钟 教师写教学日志；学生写学习笔记 2 拓展 JS 的 CSS 样式属性拓展学习；教师给予课外资源；适当引导学习，学生进行自主探索学习 20 分钟 答疑分享 .教学内容 一 在线平台测试与作业点评 公布学生在线平台测试与作业成绩，并点评。二 布置课堂任务单 三、实现 1、复选框是否选中的属性是哪个？2、写代码逐个复选框设置为 true，有没有更好的办法？实现思路：创建一组同名的复选框 编写脚本 1、使用 getElementsByName()方法获得一组同名的复选框对象。2、通过循环来改变复选框是否被选中属性 checked

42、的值。function checkAll(boolValue)var allCheckBoxs=document.getElementsByName(isBuy);for(var i=0;iallCheckBoxs.length;i+)if(allCheckBoxsi.type=checkbox)allCheckBoxsi.checked=boolValue;.全选 全不选 编写如左图所示，通过全选/全不选前面加个复选框来实现全选/全不选切换的效果。.教案首页 本次课标题：情景一 JavaScript 基础应用 任务 4 CSS 样式特效-内容分析 授课日期 第 4 周 授课班级）班 上课地点

43、 实验楼 K 区 课时分配 面对面翻转课堂教学2 课时（120 分钟）教 学 目 标 能力目标 知识目标 会使用 style 样式属性动态改变边框颜色 会使用 className 类名属性动态改变按钮背景图片 会使用 display 显示属性实现层或图片的隐藏/显示和切换特效 1、熟悉常用的样式属性 2、熟悉 className 类名属性 3、掌握 display 显示属性 学习者特征分析 学生学习基础一般，缺乏动手实践能力 大部分学生学习态度较好，学习意愿强，但自主学习能力不强 教 学 任 务 教学任务：制作 51job 的弹出层效果 案例：精品课程网站首页中实现的弹出层效果。重 点 难 点

44、 重点：常用的样式属性应用 难点：常用的样式属性应用与编写 作业或 考核 制作”点卡“图片切换的特效。参 考 资 料 精通 JavaScript+jQuery人民邮电出版社 前沿科技.精通 CSS+DIV 网页样式与布局，人民邮电出版社。温谦等.HTML+CSS 网页设计与布局从入门到精通，人民邮电出版社。温谦等.CSS 设计彻底研究，人民邮电出版社。.翻转课堂教学设计 序号 步 骤 教学内容 教师活动（方法与手段）学生活动 时间 分配 评价标准与方法 课前：现代职教课程平台在线学习环节 1 学 生 自主学习 任务 4 CSS 样式特效 教学视频学习；课件学习；上传视频、课件等相关资料；观看视

45、频 20 分钟 在线学习时长 2 在线测试 完成任务 4 在线测试题 教师导出成绩并分析结果 在线测试 10 分钟 在线测试成绩 3 完成任务作业 制作”点卡“图片切换的特效。批阅作业 完成作业 15 分钟 作业等级判定 4 在线讨论 学生与学生、教师进行答疑讨论 回复话题 学生发帖，相互线上讨论 15 分钟 发帖数量与质量评价 课中：面对面翻转课堂教与学环节 1 自主学习检查与讨论 公布学生线上学习情况；抽查视频相关知识点 抽取学生 记录指导 认真演示 认真观看 5 分钟 线上统计结果与抽查结果 2 课前学习总结与答疑 现场答疑；重点提示一下样式属性使用 总结学生学习情况 一对一答疑 学生提

46、问；认真听讲 5 分钟 测试成绩与课前作业成绩 3 课堂任务下达 教师给出课堂完成的任务:点卡切换 布置任务 巡回答疑 分析任务 5 分钟 任务理解情况 4 分小组完成任务（1）使用 DIV 中插入图片来实现；（2）访问图片 Img 对象的方法（3）调用 display 属性设置 巡回指导 实战演练；分组讨论 20分钟 任务完成情况 5 小组评价 1）页面点卡切换实现效果 2）页面代码是否简洁，思路是否清晰 观摩；互答；确定得分依据；记录结果；10 分钟 小组协作与沟通能力 6 小组优秀作品展示 学生演示本次任务中的制作流程及优点所在，阐明自己不足之处。观摩；反思；学生展示；认真听讲 记录；5

47、 分钟 本次任务综合评价（完成率及创新点）.7 教师总结与引导 总结小组任务情况并给予小组点评；会使用 className 类名属性动态改变按钮背景图片 会使用 display 显示属性实现层或图片的隐藏/显示和切换特效 讲授 认真听讲 记录；反思 5 分钟 8 布置下次课前要学习的任务 布置下次课前要学习的任务：情景三 告知 记录 5 分钟 线上作业与在线测试完成情况 课后：反思总结及拓展提升教与学环节 1 反思总结 翻转课堂任务 反思记录翻转课堂各个环节是否存在问题；任务难度及学生吸收率；学生进行自发交流总结 20 分钟 教师写教学日志；学生写学习笔记 2 拓展 JS 的 dom 模型拓展

48、学习 教师给予课外资源；适当引导学习，学生进行自主探索学习 20 分钟 答疑分享.教学内容 一 在线平台测试与作业点评 公布学生在线平台测试与作业成绩，并点评。二 布置课堂任务单 任务介绍：三、相关知识点：实现思路 1、创建改变样式的JavaScript代码 this.style.fontSize=24px this.style.fontSize=14px 2、利用鼠标相关事件调用JavaScript代码 onMouseOver=this.style.fontSize=24px“onMouseOut=this.style.fontSize=14px 实现思路 名称 说 明 不带下划线的超连接

49、A color:blue;text-decoration:none;A:hover color:red;.细边框样式 .boxBorder border-width:1px;border-style:solid;图片按钮样式.picButton background-image:url(images/back2.jpg);border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;.教案首页 本次课标题：情景一 JavaScript 基础应用 任务 4 CSS 样式特效-任务制作 授课日期 第 4 周 授课班级

50、）班 上课地点 实验楼 K 区 课时分配 面对面翻转课堂教学2 课时（120 分钟）教 学 目 标 能力目标 知识目标 会使用 style 样式属性动态改变边框颜色 会使用 className 类名属性动态改变按钮背景图片 会使用 display 显示属性实现层或图片的隐藏/显示和切换特效 1、熟悉常用的样式属性 2、熟悉 className 类名属性 3、掌握 display 显示属性 学习者特征分析 学生学习基础一般，缺乏动手实践能力 大部分学生学习态度较好，学习意愿强，但自主学习能力不强 教 学 任 务 教学任务：制作 51job 的弹出层效果 案例：精品课程网站首页中实现的弹出层效果。