HTML5网页编程教案.docx
- 文档编号:71766
- 上传时间:2022-10-02
- 格式:DOCX
- 页数:122
- 大小:2.77MB
HTML5网页编程教案.docx
《HTML5网页编程教案.docx》由会员分享,可在线阅读,更多相关《HTML5网页编程教案.docx(122页珍藏版)》请在冰豆网上搜索。
《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
学生自主学习
任务1 JS语法基础教学视频学习;
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
var count=0;
document.write("淘宝网欢迎您!
");
for(i=0;i<5;i++)
document.write("
淘宝网欢迎您!
");
BODY部分的内容
三、语法:
变量的声明和赋值
“var” - 用于声明变量的关键字
“count”-变量名
运算符对一个或多个变量或值(操作数)进行运算,并返回一个新值
根据所执行的运算,运算符可分为以下类别:
算术运算符
+、-、 *、/、%、++、--、-(求反)
比较运算符
==、!
=、>、>=、<、<=
逻辑运算符
&&、||、!
if条件语句
switch多分支语句
for、while循环语多行注释以/*开始,以*/结束,符号/*……*/指示中间的语句是该程序中的注释。
例如:
/*
helloWorld.html
第一个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
学生自主学习
任务1 JS语法基础教学视频学习;
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
经过分析,该如何解决上面问题?
三、核心代码分析:
fu
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 网页 编程 教案