HTML5网页编程教案.docx
《HTML5网页编程教案.docx》由会员分享，可在线阅读，更多相关《HTML5网页编程教案.docx（132页珍藏版）》请在冰豆网上搜索。
HTML5网页编程教案
《HTML5网页编程》
教案
教案首页
本次课标题：
情景一 JavaScript基础应用
任务1JavaScript语言基础-语法
授课日期
第1周第1次
授课班级
上课地点
实验楼L区
课时分配
面对面翻转课堂教学2课时（120分钟）
教
学
目
标
能力目标
知识目标
1、会利用JS基本语法完成程序控制流程。
2、会编写JS函数；
3、会选择相应事件调用函数。
1、掌握JS基本语法
2、掌握函数定义方法
3、掌握自定义函数的调用
学习者特征分析
大部分学生学习态度较好，学习意愿强，但自主学习能力不强；
学生学习热情较高，能在论坛上提出问题；
教
学
任
务
教学任务：
JS语法基础应用
案例：
精品课程网站首页中建立用户名、密码登陆框。
重
点
难
点
重点：
函数编写
难点：
自定义函数编写及控制语句编写；
作业或
考核
编写输出五行星号程序。
参
考
资
料
《精通JavaScript+jQuery》人民邮电出版社
前沿科技.《精通CSS+DIV网页样式与布局》，人民邮电出版社。
温谦等.《HTML+CSS网页设计与布局从入门到精通》，人民邮电出版社。
温谦等.《CSS设计彻底研究》，人民邮电出版社。
翻转课堂教学设计
序号
步骤
教学内容
教师活动
（方法与手段）
学生活动
时间
分配
评价标准与方法
——课前：
现代职教课程平台在线学习环节
1
学生自主学习
任务1JS语法基础教学视频学习；
JavaScript简介学习；
JavaScript语法学习；
简单案例学习；
上传视频、课件等相关资料；
观看视频
20分钟
在线学习时长
2
在线测试
完成任务1在线测试题
教师发布题目，导出成绩并分析结果
在线测试
10分钟
在线测试成绩
3
完成任务作业
利用循环输出“5行”helloworld文字到网页中
批阅作业
完成作业
15分钟
作业等级判定
4
在线讨论
学生与学生、教师进行答疑讨论
回复话题
学生发帖，相互线上讨论
15分钟
发帖数量与质量评价
——课中：
面对面翻转课堂教与学环节
1
自主学习检查与讨论
公布学生线上学习情况；
抽查视频相关知识点
抽取学生
记录指导
认真演示
认真观看
10分钟
线上统计结果与抽查结果
2
课前学习总结与答疑
现场答疑；
重点提示一下JS语法编写规则
总结学生学习情况
一对一答疑
学生提问；认真听讲
10分钟
测试成绩与课前作业成绩
3
课堂任务下达
教师给出课堂完成的任务:
用JS完成杨辉三角输出
布置任务
巡回答疑
分析任务
10分钟
任务理解情况
4
分小组完成任务
1）编写程序算法；
2）循环语句设计；
3）输出内容到文档中
巡回指导
实战演练；
分组讨论
30分钟
任务完成情况
5
小组评价
小组互评；
评价内容：
能否设计循环语句；
能否正确输出文档
观摩；
互答；
确定得分依据；
记录结果；
20分钟
小组协作与沟通能力
6
小组优秀作品展示
展示运行结果；
展示设计思路；
并分析小组分工与团队配合情况。
观摩；
反思；
学生展示；认真听讲
记录；
15分钟
本次任务综合评价（完成率及创新点）
7
教师总结与引导
总结小组任务情况并给予小组点评；
总结表单操作流程与规范
讲授
认真听讲
记录；
反思
15分钟
8
布置下次课前要学习的任务
布置下次课前要学习的任务：
任务1制作
告知
记录
10分钟
线上作业与在线测试完成情况
——课后：
反思总结及拓展提升教与学环节
1
反思总结
JavaScript与其它编程语言相似点分析
总结任务难度及学生吸收率；
学生进行自发交流总结
20分钟
教师写教学日志；
学生写学习笔记
2
拓展
JS控制语句语法拓展学习
教师给予课外资源；适当引导学习，
学生进行自主探索学习
20分钟
答疑分享
教学内容
一、学习目标
掌握脚本的基本结构（Script标签）
简单记忆基本语法
变量的定义与赋值
数据类型与转换parseFloat等
运算符和控制语句同Java
二、什么是JavaScript
脚本的基本结构
varcount=0;
document.write（"淘宝网欢迎您！
"）;
for（i=0;i<5;i++）
document.write（"
淘宝网欢迎您！
"）;
BODY部分的内容
三、语法：
变量的声明和赋值
“var”－用于声明变量的关键字
“count”－变量名
运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值
根据所执行的运算，运算符可分为以下类别：
算术运算符
+、-、*、/、%、++、--、-（求反）
比较运算符
==、!
=、>、>=、<、<=
逻辑运算符
&&、||、！
if条件语句
switch多分支语句
for、while循环语多行注释以/*开始，以*/结束，符号/*……*/指示中间的语句是该程序中的注释。
例如：
/*
helloWorld.html
第一个JavaScript程序
*/
-注释内容->
单行注释以//开始，以行末结束
例如：
//表示JavaScript代码的开始
parseInt（String）
将字符串转换为整型数字
如:
parseInt（“86”）将字符串“86”转换为整型值86
parseFloat（String）
将字符串转换为浮点型数字
如:
parseInt（“34.45”）将字符串“34.45”转换为浮点值34.45
四、总结提问
循环结构的特点是什么？
while循环和do-while循环有什么区别？
教案首页
本次课标题：
情景一 JavaScript基础应用
任务1JavaScript语言基础-任务制作
授课日期
第1周第2次
授课班级
）班
上课地点
实验楼L区
课时分配
面对面翻转课堂教学2课时（120分钟）
教
学
目
标
能力目标
知识目标
1、会编写JS自定义函数；
2、会选择相应事件调用函数。
1、掌握函数语法格式。
2、掌握函数定义方法
3、掌握自定义函数的调用
学习者特征分析
大部分学生学习态度较好，学习意愿强，但自主学习能力不强；
学生学习热情较高，能在论坛上提出问题
教
学
任
务
教学任务：
JS语法基础应用
案例：
实现两个数的计算器的加减乘除。
重
点
难
点
重点：
函数编写
难点：
自定义函数编写及控制语句编写；
作业或
考核
编写输出五行星号程序。
参
考
资
料
《精通JavaScript+jQuery》人民邮电出版社
前沿科技.《精通CSS+DIV网页样式与布局》，人民邮电出版社。
温谦等.《HTML+CSS网页设计与布局从入门到精通》，人民邮电出版社。
温谦等.《CSS设计彻底研究》，人民邮电出版社。
翻转课堂教学设计
序号
步骤
教学内容
教师活动
（方法与手段）
学生活动
时间
分配
评价标准与方法
——课前：
现代职教课程平台在线学习环节
1
学生自主学习
任务1JS语法基础教学视频学习；
JavaScript语法学习；
简单案例学习；
上传视频、课件等相关资料；
观看视频
20分钟
在线学习时长
2
在线测试
完成任务1在线测试题
教师发布题目，导出成绩并分析结果
在线测试
10分钟
在线测试成绩
3
完成任务作业
如何希望点击某个按钮后才显示“HelloWorld”，
并能输入显示的次数
批阅作业
完成作业
15分钟
作业等级判定
4
在线讨论
学生与学生、教师进行答疑讨论
回复话题
学生发帖，相互线上讨论
15分钟
发帖数量与质量评价
——课中：
面对面翻转课堂教与学环节
1
自主学习检查与讨论
公布学生线上学习情况；
抽查视频相关知识点函数的含义
抽取学生
记录指导
认真演示
认真观看
10分钟
线上统计结果与抽查结果
2
课前学习总结与答疑
现场答疑；
创建函数
总结学生学习情况
一对一答疑
学生提问；认真听讲
10分钟
测试成绩与课前作业成绩
3
课堂任务下达
教师给出课堂完成的任务:
编写具有能对两个操作数进行加、减、乘、除运算的简易计算器。
布置任务
巡回答疑
分析任务
10分钟
任务理解情况
4
分小组完成任务
编写程序算法；
4个按钮调用的函数的代码很类似，怎么优化代码
巡回指导
实战演练；
分组讨论
30分钟
任务完成情况
5
小组评价
小组互评；
评价内容：
优化代码
能否正确输出文档
观摩；
互答；
确定得分依据；
记录结果；
20分钟
小组协作与沟通能力
6
小组优秀作品展示
展示运行结果；
展示设计思路；
并分析小组分工与团队配合情况。
观摩；
反思；
学生展示；认真听讲
记录；
15分钟
本次任务综合评价（完成率及创新点）
7
教师总结与引导
总结小组任务情况并给予小组点评；
总结表单操作流程与规范
讲授
认真听讲
记录；
反思
15分钟
8
布置下次课前要学习的任务
布置下次课前要学习的任务：
情景二任务2DOM模型-window对象
告知
记录
10分钟
线上作业与在线测试完成情况
——课后：
反思总结及拓展提升教与学环节
1
反思总结
JavaScript与其它编程语言相似点分析
总结任务难度及学生吸收率；
学生进行自发交流总结
20分钟
教师写教学日志；
学生写学习笔记
2
拓展
JS语法拓展学习
教师给予课外资源；适当引导学习，
学生进行自主探索学习
20分钟
答疑分享
教学内容
一、函数的含义：
类似于Java中的方法，是执行特定任务的语句块。
问题：
如何希望点击某个按钮后才显示“HelloWorld”，
并能输入显示的次数，怎么办？
二、分析问题：
1、在页面中放置一个文本框和一个按钮，让用户输入次数后点击按钮才显示
2、把循环显示的代码放置到函数中，当点击按钮时，才调用函数显示HelloWorld
经过分析，该如何解决上面问题？
三、核心代码分析:
functionshowHello（）
{
varcount=document.myForm.txtCount.value;
for（i=0;idocument.write（"
HelloWorld
"）;
}
四、总结提问
大家简述一下JavaScript脚本的基本结构？
JavaScri
升级会员 