资源描述
JavaScript程序设计实例教程教案第12单元.docx
《JavaScript程序设计实例教程教案第12单元.docx》由会员分享，可在线阅读，更多相关《JavaScript程序设计实例教程教案第12单元.docx（12页珍藏版）》请在冰点文库上搜索。
JavaScript程序设计实例教程教案第12单元
《JavaScript初探》
《JavaScript程序设计》课第1单元
课程单元教学设计
（2019～2020学年第1学期）
单元名称：
JavaScript初探
所属系部：
计算机与通信工程学院
制定人：
合作人：
制定时间：
2020.8
***学院教务处制
JavaScript程序设计课程单元教学设计
单元标题：
JavaScript初探
单元教学学时
2
在整体设计中的位置
第1次
授课班级
16移动开发班
上课
时间
1周9月5日第1节至1周9月5日第2节
上课
地点
计算机实验室
教学
目标
能力目标
知识目标
素质目标
1.能够使用多种方案引入JavaScript脚本代码到HTML文档中。
2.能够使用常用的输出语句。
3.能够获取元素并改变元素内容。
了解JavaScript简史和引擎的工作原理。
掌握JavaScript的组成、主要特点和相关应用。
树立学习信心；培养讨论思考的习惯
能力训练任务
任务：
JavaScript初探
教学组织：
1.带领学生了解课程任务
2.讲解JavaScript简史及相关术语
3.引入JavaScript脚本代码到HTML文档中，使用常用的输出语句
本次课使用的外语单词
JavaScriptWeb
functionDate
getFullYeargetMonthgetDate
documentgetElementByIdinnerHTML
案例和
教学
材料
案例：
JavaScript初探-文字的切换
教学材料：
1.教材名称：
《JavaScript程序设计实例教程》第2版主编：
程乐、郑丽萍、刘万辉，出版社：
机械工业出版社，出版日期：
2020年3月
2.教学多媒体课件，项目源文件
3.多媒体资料：
http:
//www.icourse163.org/course/HCIT-1206706828
4.仪器与设备：
计算机等
单元教学进度设计（纲要）
步骤
教学内容及能力/知识目标
教师活动
学生活动
时间（分钟）
1
情境导入
介绍本节课的教学目标．
导入本次课教学情境
学生了解工作情境
2
2
引入
任务：
JavaScript初探-文字的切换
交代任务
学生接受任务
3
3
知识点
讲解
JavaScript初探
讲解JavaScript简史及相关术语
了解JavaScript简史及相关术语
10
讲解JavaScript引擎的工作原理
了解JavaScript引擎的工作原理
10
讲解引入JavaScript脚本代码到HTML文档中方法
掌握引入JavaScript脚本代码到HTML文档中方法
10
教师巡视，发现问题
多种引入方案练习
15
4实践
JavaScript初探-文字的切换
教师演示
掌握常用的输出语句方法
10
教师巡视，发现问题
常用的输出语句练习
20
5
评比
检查学生完成情况
抽查学生完成情况，讲解出现的问题
演示自己的界面，修改出现的问题
5
6
总结
JavaScript初探
重点强调学生练习中出现的问题
学生思考反馈
5
作业
Javascript的主要特点？
课后
体会
一、情境导入
介绍本节课的教学目标
二、引入
任务：
JavaScript初探-文字的切换
三、知识点讲解
术语“ECMAScript”和“JavaScript”指的是同一个东西。
但如果把JavaScript看成是“Mozilla或其他组织的ECMAScript实现”，那么ECMAScript就是实现JavaScript所依据的标准。
术语“ECMAScript”也用来描述语言版本（比如ECMAScript5）。
JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。
比方说，当编写了 vara=1+1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。
JavaScript引擎就是直接解析并将代码运行结果输出的JavaScript的解释器
JavaScript由三部分组成：
●核心（ECMAScript）描述了该语言的语法和基本对象
●文档对象模型（DOM，Documnet）描述了处理网页内容的方法和接口
●浏览器对象模型（BOM）描述了与浏览器进行交互的方法和接口
JavaScript的主要特点
JavaScript相关应用
选择JavaScript脚本编辑器
引入JavaScript脚本代码到HTML文档中方法
Javascript常用的输出语句：
•使用 window.alert（） 弹出警告框。
•使用 document.write（） 方法将内容写到HTML文档中。
•使用 innerHTML 写入到HTML元素。
•使用 console.log（） 写入到浏览器的控制台。
四、任务实施
document.getElementById（"demo"），使用id属性来查找id为demoHTML元素，然后给它的innerHTML属性重新的赋值为新的字符串，就有了我们看到的切换文字的效果。
DOCTYPEhtml>
SamplePage!</p><p>'微软雅黑';font-size:
36px;color:
#00f;"onclick="clickMe（）">准备好了就点击这里!
五、评比
检查学生完成情况
六、总结
文字切换
《猜数游戏页面》
《JavaScript程序设计》课第2单元
课程单元教学设计
（2019～2020学年第1学期）
所属系部：
计算机与通信工程学院
制定人：
合作人：
制定时间：
2020.8
***学院教务处制
JavaScript程序设计课程单元教学设计
单元标题：
猜数游戏页面
单元教学学时
2
在整体设计中的位置
第2次
授课班级
16移动开发班
上课
时间
1周9月6日第1节至1周9月6日第2节
上课
地点
计算机实验室
教学
目标
能力目标
知识目标
素质目标
1.能够声明变量，转换数据类型，实现猜数游戏页面；内置对象Math
2.能够运用流程控制语句和异常处理语句。
掌握语法变量、数据类型的转换、Math、掌握函数的定义和调用。
培养学生利用网络学习新知识的能力；培养学生编写代码规范
能力训练任务
任务：
猜数游戏页面
教学组织：
4.带领学生了解课程任务
5.讲解JavaScript语法变量、数据类型数据类型的转换；内置对象Math的应用
6.设计游戏界面及功能的实现
本次课使用的外语单词
div+css
Javascriptifelse
Forfor/in whiledo/while
heightwidth
MathMath.floorMath.random
Prompt
parseInt
案例和
教学
材料
案例：
猜数游戏页面
教学材料：
1.教材名称：
《JavaScript程序设计实例教程》第2版.主编：
程乐、郑丽萍、刘万辉.出版社：
机械工业出版社，出版日期：
2020.3月
2.教学多媒体课件，项目源文件
3.多媒体资料：
http:
//www.icourse163.org/course/HCIT-1206706828
4.仪器与设备：
计算机等
单元教学进度设计（纲要）
步骤
教学内容及能力/知识目标
教师活动
学生活动
时间（分钟）
1情境导入
介绍本节课的教学目标．
导入本次课教学情境
学生了解工作情境
2
2引入
任务：
猜数字
交代任务
学生接受任务
3
3知识点讲解
内置对象Math
讲解常用的输入输出语句；
掌握Prompt实现动态数字的输入；
10
讲解Math.random（）及Math.random（）应用；
掌握Math.floor（）及Math.random（）实现随机数字
10
讲解语法变量、数据类型；数据类型的转换；
掌握parseInt数据类型的强制转换；
10
教师巡视，发现问题
使用javascript实现随机数字，和动态输入及随机数字
15
4子页面设计
设计子页面界面
教师演示
掌握ifelse语句的嵌套使用；Dowhile实现循环多次猜测
10
教师巡视，发现问题
制作子页面界面，实现；猜数游戏功能页面
20
5评比
检查学生完成情况
抽查学生完成情况，讲解出现的问题
演示自己的界面，修改出现的问题
5
6总结
猜数字页面；
重点强调学生练习中出现的问题
学生思考反馈
5
作业
Javascript常用的循环语句？
课后
体会
一、情境导入
介绍本节课的教学目标
二、引入
任务：
猜数字游戏页面
三、知识点讲解
JavaScript可以通过不同的方式来输出数据：
使用 window.alert（） 弹出警告框。
使用 document.write（） 方法将内容写到HTML文档中。
使用 innerHTML 写入到HTML元素。
使用 console.log（） 写入到浏览器的控制台。
prompt实现输入
JavaScript循环
如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
不同类型的循环
JavaScript支持不同类型的循环：
for -循环代码块一定的次数
for/in -循环遍历对象的属性
while -当指定的条件为true时循环指定的代码块
do/while -同样当指定的条件为true时循环指定的代码块
类型转换
parseInt（String）
将字符串转换为整型数字
如:
parseInt（“86”）将字符串“86”转换为整型值86
parseFloat（String）
将字符串转换为浮点型数字
如:
parseInt（“34.45”）将字符串“34.45”转换为浮点值34.4
JavaScript Math（算数） 对象
Math（算数）对象的作用是：
执行常见的算数任务。
round（）
如何使用round（）。
random（）
如何使用random（）来返回0到1之间的随机数。
下面的例子使用了Math对象的floor（）方法和random（）来返回一个介于0和11之间的随机数：
document.write（Math.floor（Math.random（）*11））;
四、任务实现
功能实现
varnum=Math.floor（Math.random（）*100+1）; //产生1～100之间的随机整数
do{
varguess=parseInt（prompt（"下面进行猜数游戏\n请输入1-100之间的整数：
",""））;
if（guess==num）{
alert（"^_^,恭喜你，猜对了，幸运数字是：
"+num）;
break;}
else
{if（guess>num）{
alert（"^_^,你猜的数字大了"）;
go_on=confirm（"是否继续游戏？
"）;
}
else{
alert（"^_^,你猜的数字小了"）;
go_on=confirm（"是否继续游戏？
"）;
}
}
}while（go_on）;
alert（"谢谢参与游戏！
"）;
五、评比
检查学生完成情况
六、总结
循环的应用，猜数字页面的实现
升级会员 