HTML5网页编程教案.docx

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

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

3、件等相关资料； 观看视频20分钟在线学习时长2在线测试完成任务1在线测试题教师发布题目，导出成绩并分析结果 在线测试10分钟在线测试成绩3完成任务作业利用循环输出“5行”helloworld文字到网页中批阅作业完成作业15分钟作业等级判定4在线讨论学生与学生、教师进行答疑讨论回复话题 学生发帖，相互线上讨论15分钟发帖数量与质量评价课中：面对面翻转课堂教与学环节1自主学习检查与讨论公布学生线上学习情况；抽查视频相关知识点抽取学生记录指导 认真演示认真观看10分钟线上统计结果与抽查结果 2课前学习总结与答疑现场答疑；重点提示一下JS语法编写规则总结学生学习情况一对一答疑 学生提问；认真听讲10分

4、钟测试成绩与课前作业成绩3课堂任务下达教师给出课堂完成的任务:用JS完成杨辉三角输出布置任务巡回答疑分析任务10分钟任务理解情况4分小组完成任务1）编写程序算法；2）循环语句设计；3）输出内容到文档中巡回指导 实战演练；分组讨论30分钟任务完成情况5小组评价小组互评；评价内容：能否设计循环语句；能否正确输出文档观摩；互答；确定得分依据； 记录结果；20分钟小组协作与沟通能力6小组优秀作品展示展示运行结果；展示设计思路；并分析小组分工与团队配合情况。观摩；反思； 学生展示；认真听讲记录；15分钟本次任务综合评价（完成率及创新点）7教师总结与引导总结小组任务情况并给予小组点评；总结表单操作流程与规

5、范讲授认真听讲记录；反思15分钟8布置下次课前要学习的任务布置下次课前要学习的任务：任务1制作告知记录10分钟线上作业与在线测试完成情况课后：反思总结及拓展提升教与学环节1反思总结JavaScript与其它编程语言相似点分析总结任务难度及学生吸收率；学生进行自发交流总结20分钟教师写教学日志；学生写学习笔记2拓展JS控制语句语法拓展学习教师给予课外资源；适当引导学习，学生进行自主探索学习20分钟答疑分享教学内容一、学习目标掌握脚本的基本结构(Script标签)简单记忆基本语法变量的定义与赋值数据类型与转换parseFloat等运算符和控制语句同Java二、什么是JavaScript脚本的基本结

6、构 var count=0; document.write(淘宝网欢迎您！); for(i=0;i5;i+) document.write(淘宝网欢迎您！); BODY部分的内容三、语法： 变量的声明和赋值 “var” 用于声明变量的关键字 “count” 变量名运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别：算术运算符 +、-、 * 、 / 、%、+、-、-(求反)比较运算符 =、!=、=、=逻辑运算符 &、|、！if条件语句switch多分支语句for、while循环语多行注释以 /* 开始，以 */ 结束，符号 /* */ 指示中间的语

7、句是该程序中的注释。例如：/* helloWorld.html 第一个JavaScript程序 */单行注释以 / 开始，以行末结束例如： /表示JavaScript代码的开始parseInt (String) 将字符串转换为整型数字 如: parseInt (“86”)将字符串“86”转换为整型值86parseFloat(String) 将字符串转换为浮点型数字 如: parseInt (“34.45”)将字符串“34.45”转换为浮点值34.45四、总结提问循环结构的特点是什么？while循环和do-while循环有什么区别？教案首页本次课标题：情景一JavaScript基础应用 任务1

8、JavaScript语言基础-任务制作授课日期第1周第2次授课班级）班上课地点实验楼L区课时分配 面对面翻转课堂教学2课时（120分钟） 教学目标能力目标知识目标1、会编写JS自定义函数；2、会选择相应事件调用函数。1、掌握函数语法格式。2、掌握函数定义方法3、掌握自定义函数的调用学习者特征分析大部分学生学习态度较好，学习意愿强，但自主学习能力不强；学生学习热情较高，能在论坛上提出问题教学任务教学任务： JS语法基础应用 案例：实现两个数的计算器的加减乘除。重点难点重点：函数编写难点：自定义函数编写及控制语句编写；作业或考核编写输出五行星号程序。参考资料精通JavaScript+jQuery人

9、民邮电出版社前沿科技.精通CSS+DIV网页样式与布局 ，人民邮电出版社。温谦等. HTML+CSS网页设计与布局从入门到精通，人民邮电出版社。温谦等. CSS设计彻底研究，人民邮电出版社。翻转课堂教学设计 序号步 骤教学内容教师活动（方法与手段）学生活动时间分配评价标准与方法课前：现代职教课程平台在线学习环节1 学生自主学习 任务1 JS语法基础教学视频学习；JavaScript 语法学习；简单案例学习；上传视频、课件等相关资料； 观看视频20分钟在线学习时长2在线测试完成任务1在线测试题教师发布题目，导出成绩并分析结果 在线测试10分钟在线测试成绩3完成任务作业如何希望点击某个按钮后才显示

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

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

12、分钟线上作业与在线测试完成情况课后：反思总结及拓展提升教与学环节1反思总结JavaScript与其它编程语言相似点分析总结任务难度及学生吸收率；学生进行自发交流总结20分钟教师写教学日志；学生写学习笔记2拓展JS语法拓展学习教师给予课外资源；适当引导学习，学生进行自主探索学习20分钟答疑分享教学内容一、函数的含义：类似于Java中的方法，是执行特定任务的语句块。问题： 如何希望点击某个按钮后才显示“HelloWorld”， 并能输入显示的次数，怎么办？二、分析问题： 1、在页面中放置一个文本框和一个按钮，让用户输入次数后点击按钮才显示2、把循环显示的代码放置到函数中，当点击按钮时，才调用函数显示HelloWorld经过分析，该如何解决上面问题？ 三、核心代码分析: function showHello( ) var count=document.myForm.txtCount.value ; for(i=0; icount; i+) document.write(HelloWorld); 四、总结提问大家简述一下JavaScript脚本的基本结构？JavaScri