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