JavaScript教案课程设计

课程教案

课题名称JavaScript程序设计

授课班级授课学时1-2

授课地点授课形式讲授

参考教材GavaScript网页交互特效范例与技巧》

教学资源

https://www.runoob.com/js/js-tutorial.html一一JavaScript教程

知识目标：

1、JS执行原理。

2、JS代码编写位置。

3、JS代码作为A标签的属性。

教学目标技能目标：

1、了解JS执行原理。

2、能在网页选中使用规范的JavaScript脚本。

素质目标：

理解JS执行原理，并能够掌握在不同的地方编写JS脚本代码。

教学

理解JS执行原理，在不同的地方编写JS脚本

重点

教学重点与难点教学

将JS编写在外部文件中并调用

难点

本次课程为JavaScript程序设计的第一■次课程，主要需要将JavaScript使用场

学情分析景和执行原理等给学生介绍清楚，并演示一些学完本门课程之后可以制作的网页

效果，让学生对本门课程产生兴趣。

课前：

阅读教材，为第一次JavaScript理论课程做准备

课中：

（1）展示学完本门课程可以完成的JS小游戏。

（2）JavaScript语言介绍及作用。

教学过程

（3）开发环境介绍。

（4）JS代码弹窗及JS代码编写在不同的位置。

（5）使用JS代码作为A标签的href属性

课后：

布置预习任务，预习下次课内容，了解JS中数据类型，变量和运算符。

教学反思本次课程内容主要以展示和理解为主，让学生对课程产生兴趣，效果良好。

课程JavaScript程序设计教学设计

课程名称JavaScript程序设计授课对象

本次课学时

授课章节第一章：JavaScript基础语法2学时

数

教学目的让学生理解JS执行原理，并能够掌握在不同的地方编写JS脚本代码。

本次课程为JavaScript程序设计的第一次课程,主要需要将JavaScript使用场景和执行

教学分析原理等给学生介绍清楚，并演示一些学完本门课程之后可以制作的网页效果，让学生对本

门课程产生兴趣。

重点理解JS执行原理，在不同的地方编写JS脚本

教学重点与

难点

难点将JS编写在外部文件中并调用

教学方法・课堂讲授。讲解例题•电子课件•案例分析。小组讨论

与手段•文字材料•提问。音像材料其他：______________________

教学过程设计

教学内容教学过程设计意图时间分配

展示JavaScript制作小游戏

重新开始游戏＜wsad或上下左右来移动$)

通过多个

■■■■■■■■■■■小游戏的

展示，并且

告知学生

本门课程

学完之后

课程导入10分钟

可以独立

完成展示

的小游戏，

激发学生

的学习兴

趣

js版本华容道游戏

!

■

JS版贪吃蛇游戏

1.介绍课程的授课计划、考核标准

(1)平时成绩占30%,包括出勤、作业、提问，课堂项目(作

业)、综合项目完成情况等。

(2)考试成绩占70%。

2.提问什么是脚本语言。

3.提问JavaScript和Java有关系吗。

4.根据学生对提问的回答，介绍JavaScript相关基本概念和

特点。

(1)、JavaScript是Netscape公司的产品，用于扩展公司

的浏览器产品NetscapeNavigator功能。而Java是Sun公司

推出的新一代面向对象的程序设计语言，特别适用于Internet介绍整门

应用程序开发。课程的授

(2)、JavaScript是脚本语言，它是一种基于对象和事件驱课即考核

嘛麻绍动的编程语言，它本身提供很多内部对象以供使用。Java是一计划并让

15分钟

种面向对象语言，及时开发简单的程序，也要设计和创建类。学生从大

(3)、Java源码先要进行编译，然后才能在Java虚拟机中解的方向了

释执行，而JavaScript不需要进行编译，编写后，直接由浏解JS语言

览器解释执行。的特点。

(4)、Java采用强类型，即变量的使用，在编译之前都必须

声明，而JavaScript中采用弱类型，即变量在使用前不需要

声明。

(5)JavaScript使用＜script＞＜/script＞标签来嵌入代码，

而Java则使用＜applet*/applet〉标签。

(6)、Java采用静态数据绑定，即Java的对象引用必须在编

译时进行确定；JavaScript则采用动态数据绑定，即

JavaScript的对象是在运行时进行确定，编写时，是无法确定

类型检查。

通过举例和效果演示的方式，让学生明白利用JS具体可以实让学生更

JavaScript的

现哪些类似效果：加直观的10分钟

,乍用

(1)炫酷的前端菜单效果了解JS的

(2)动态表单Cookies存储作用

(3)画布显示游戏界面完成客户端

(4)媒体查询自适应屏幕显示

(5)动态读取服务器信息实现局部更新

代码执行：记事本，Dreamweaver,WebStorm,Hbui1der

0H介绍JS课

■Je»!r»»r.«程相关技

HBuilder

术的开发

JS开效果执行：环境和运

10分钟

运行环境的选行环境，让

择学生可以

在自己电

脑上安装。

***h■

在课程中，使用HbuiIder和Chrome做为推荐

分别曲谶示，将JS彳弼写在不同的地方，进f评出对话框：

⑴直接与在贝囿script机签里面：

<scripttype=z，text/javascript，z>

alertJavaScript僦界！〃)；

</script>炳JS辘

⑵与密喇JS好冲T睇，让

<scripttype=〃text/javascript"src=，，js/Demo02.js〃>可叫艮着

10分钟

蛔谓</script>老)曾试

⑶将JS脚村乍为A■勺属性值超fe墙)畔

<!一将脚本代冯作为a标签的属囹A〉习的参!撼

<ahref=，zjavascript:document,writeC囱道你W欢我)「‘>喜欢我

点击我吧〈/心

<ahref=zjavascript:alertC嬲曲道你懿我)>>禹娥就点击我1巴

</a>

现场砺JS弹出对话脚响网页输出文本

⑴alertJavaScript黔！”)；

.•••••••

，•・••••

让学生掌握

JS弹窗(面

JS弹窗和输10分钟

触

1▲出恸式。

M

._•«*k**>S«•<•

⑵document,write（“这国邸第JavaScript程司”）；

••••»••

i»«naacM*MMUb*.«■»

'—.♦・・，・.。•・，••・••••■•X*aa••

IW«V--

tmiiw

谢顿必姆媚L蝴丽糊诟，触"l!ello,JS”对诩If

习的知识自主

自己的第一个完嫡单磨单]5分钟

⑴fmiL文件1编^button搅H。

jsmWW,蟒

在button搦揶Jonclick事件4麻得JS彳用曳颜弹出对话

其自洋出

让学生了

复习总结如下知识点：解自身学

课程内容总

1、JS分别可以编写在什么地方？习情况进5分钟

结

2、使用JS弹窗使用什么命令。行针对性

复习

布置预习

思考题或预任务，让学

布置预习任务，预习下次课内容，了解JS中数据类型，变量

习题或作业生提前预5分钟

和运算符。

题习下一章

内容。

参考资料https:〃www.runoob.com/js/js-tutorial.html

一JavaScript教程

本次课程内容主要以展示和理解为主，让学生对课程产生兴

课后小结

趣，效果良好。

课程教案

课题名称JavaScript程序设计

授课班级授课学时3-4

授课地点授课形式讲授

参考教材GavaScript网页交互特效范例与技巧》

教学资源

https://www.runoob.com/js/js-tutorial.html一一JavaScript教程

知识目标：

数据类型，变量，运算符。

技能目标：

能在网页选中使用规范的JavaScript脚本

教学目标能够使用JavaScript中的常见数据类型

能够使用JavaScript中的运算符

能够使用JavaScript进行各种数据类型进行混合运算

素质目标：

能灵活运用JavaScript中的数据类型，变量，运算符解决实际问题

教学

数据类型和运算符

重点

教学重点与难点教学

运算符和变量的实际应用

难点

本次课程为JavaScript的第二次课，在本课程中主要讲解JS中的基础语法，由

学情分析

于学生之前有过Java和C#的基础，对JS的语法接受状况良好。

课前：

阅读本章教材和课件，准备提问问题，准备案例，准备作业等

课中：

(1)JS编码规范。

(2)JS数据类型。

教学过程

(3)JS变量命名规则。

(4)数据类型之间的转换。

(5)运算符和表达式

课后：

布置预习任务，预习下次课内容，了解JS中选择分支结构。

本次课程介绍JS的基本语法，与Java和C#有很多类似的地方，教学过程中不需

教学反思要全部一一介绍，重点介绍和Java与C#不一样的地方，教学过程良好，学生接受

情况良好。

课程JavaScript程序设计教学设计

课程名称JavaScript程序设计授课对象

本次课学时

授课章节第一章:JavaScript基础语法2学时

数

教学目的能灵活运用JavaScript中的数据类型，变量，运算符解决实际问题

本次课程为JavaScript的第二次课，在本课程中主要讲解JS中的基础语法，由于学生之

教学分析

前有过Java和C#的基础，对JS的语法接受状况良好。

重点数据类型和运算符

教学重点与

难点

难点运算符和变量的实际应用

教学方法・课堂讲授。讲解例题•电子课件•案例分析。小组讨论

与手段•文字材料•提问。音像材料其他：______________________

教学过程设计

教学内容教学过程设计意图时间分配

（1）提问牲在Java加赌Cm都时候削腿绷位

帮助学生回乙并且引出JS够碎范。

给、田编

（2）JavaScript编联啸底

瞰髓睇

大d碱感（和Java,Ot相同）

JavaScript编

分硝乍解尾（和Java,0相同），直接用回车作为语句雨也是可以10分钟

码过程唳照

的。

规崎编

{}成帆觊的伸联（和Java,C#相同）

码。

曲脍腕略可fflWf也蜥曲版（和Java,照目同）

使睇糅单保解（//）和多出锵（/*"1-*/）（和Java,C#相同）

（1）提问学生在Java中蒯檄懒出？订学生掌握

JavaScript数

（2）通由寸Java翻稗叫㈣乙引出JS班獭，并例相飒格和15分钟

区别。趟相

基本数据类型■引用数据类型

(1)谢较鼬命名规则，修出TIM名，让学生回答，是否可以作为

以下戈।断头

变量命名规则JS牺何定

可以使用英蚌母舫和下m

和定义变量的并且15分钟

国次J相

方法

不能期］JavaScript

wiijo

和渊胴，和Java不同，Java中还0］以使

(1)提1'醉生在CB和Java中的基树蝠理，那鲍聒髓奂可渥自动的，

那弊哲懒曷艘强削的，刃侬就轴奂是诵狮互趣的。

⑵小维的回答，总结出JS慢螭继辙碘呗师特点。让学生掌握

数据类型

1、5利基柳据镂相互转化共10种瞅JS中数据类

之间的自动转15分钟

型之间的獭

树嘟雌

3、撷J：布尔糅

4、弓解峻静用于翔涮时擞囿彳娜parselntO,parseFloatO

来讯

让学生掌握

⑴将运㈱进1段类如下：JS中的运算

运算符和表达

80^符，符，明哲符,恃点，10分钟

式

⑵针对每种运算符歹喈船其中包含8陛运算符，并揄举例嘛能瞬绚骈

(1)给出JS中的运算符雌级让学生了解蹿生了幡

算

优先级示例

并且ib^了

1DO++-Itygeof

符的优先2*/%+-解编写f媚除

10分钟

级别3<<=>>===!====*==了蝴功能i

4&&||?:=*=/=%=+=-=夕卜，要考

⑵提示学生:尽影编勃责的混管醺表达北尽量使用括号或辎？藤।福锄可

多行(■郡抹增瞬辨的可读行。读性

课程内容总复习总结如下知识点：让学生了

10分钟

结(1)JS数据类型。解自身学

(2)JS变量命名规则。习情况进

(3)数据类型之间的转换。行针对性

(4)运算符和表达式复习

布置预习

思考题或预任务，让学

习题或作业布置预习任务，预习下次课内容，了解JS中选择分支结构。生提前预5分钟

题习下一章

内容。

参考资料https:〃www.runoob.com/js/js-tutorial.html

一JavaScript教程

本次课程介绍JS的基本语法,与Java和C#有很多类似的地方，

课后小结教学过程中不需要全部一一介绍，重点介绍和Java与C#不一

样的地方，教学过程良好，学生接受情况良好。

课程教案

课题名称JavaScript程序设计

授课班级授课学时5-6

授课地点授课形式上机

参考教材GavaScript网页交互特效范例与技巧》

教学资源

https://www.runoob.com/js/js-tutorial.html一一JavaScript教程

知识目标：

数据类型，变量，运算符。

技能目标：

能在网页选中使用规范的JavaScript脚本

教学目标能够使用JavaScript中的常见数据类型

能够使用JavaScript中的运算符

能够使用JavaScript进行各种数据类型进行混合运算

素质目标：

能灵活运用JavaScript中的数据类型，变量，运算符解决实际问题

教学

数据类型和运算符

重点

教学重点与难点教学

运算符和变量的实际应用

难点

本次课程为JavaScript第一次上机课程，让学生通过自主实践实现自己的第一个

学情分析JS程序，并且通过上机练习让学生掌握JS的特点，熟悉JS数据类型，表达式等

操作。

课前：

阅读本章教材和课件，准备提问问题，上机任务，准备作业等

课中：

（1）布置任务在不同地方编写JS打印欢迎信息。

教学过程

（2）布置任务实现JS代码写在A标签中实现点击A标签弹窗

（3）选择合适数据类型存储个人信息到变量中，并进行打印

课后：

布置预习任务，预习下次课内容，了解JS中选择分支结构。

本次上机课任务量适中，适当督促学生，提醒学生，控制进度，学生基本可以自

教学反思

主完成本次上机课任务。

课程JavaScript程序设计教学设计

课程名称JavaScript程序设计授课对象

本次课学时

授课章节第一章:JavaScript基础语法(上机)2学时

数

教学目的能灵活运用JavaScript中的数据类型，变量，运算符解决实际问题

本次课程为JavaScript第一次上机课程,让学生通过自主实践实现自己的第一个JS程序，

教学分析

并且通过上机练习让学生掌握JS的特点，熟悉JS数据类型，表达式等操作。

重点数据类型和运算符

教学重点与

难点

难点运算符和变量的实际应用

教学方法・课堂讲授。讲解例题•电子课件•案例分析。小组讨论

与手段•文字材料•提问。音像材料其他：______________________

教学过程设计

教学内容教学过程设计意图时间分配

复习理论课：

复习理论课(I)JS代码编写位置复习加深

10分钟

知识点(2)JS中弹窗操作。印象

(3)数据类型，变量，运算符

布置任务实现如下需求：让学生熟

布置任务在

编写JS代码实现打印：“欢迎进入JavaScript编程的世界！练掌握JS

不同地方编

分别将代码写在不同的地方进行实现在不同地25分钟

写JS打印

(1)直接写在HTML页面的Script标签中方编写的

欢迎信息

(2)将JS代码写在外部JS文件中步骤

布置任务：

布置任务实(1)将JS代码写在A标签中实现点击A标签，在网页输出“欢让学生熟

现JS代码迎来到JS编程的世界”练掌握JS

25分钟

写在A标签(2)将JS代码写在A标签中实现点击A标签，在网页上弹出代码作为A

中对话框，在对话框显示“欢迎来到JS编程的世界”标签属性

选择合适数

布8(3^：

据类型存储

⑴仓犍你自己的个人资料把各项资料放A和并使用表格打^

个人信息到需15分钟

出来

变量中，并iSM：

(2)个人资料包括学号、姓名、出身年月、身份证号秋田业考试成绩

进行打印

复习总结如下知识点：让学生了

(1)JS数据类型。解自身学

课程内容总

(2)JS变量命名规则。习情况进10分钟

结

(3)数据类型之间的转换。行针对性

(4)运算符和表达式复习

布置预习

思考题或预任务，让学

习题或作业布置预习任务，预习下次课内容，了解JS中选择分支结构。生提前预5分钟

题习下一章

内容。

参考资料https:〃www.runoob.com/js/js-tutorial.html

—JavaScript教程

本次上机课任务量适中，适当督促学生，提醒学生，控制进度，

课后小结

学生基本可以自主完成本次上机课任务。

课程教案

课题名称JavaScript程序设计

授课班级授课学时7-8

授课地点授课形式讲授

参考教材GavaScript网页交互特效范例与技巧》

教学资源

https://www.runoob.com/js/js-tutorial.html一一JavaScript教程

知识目标：

JavaScript中选择分支结构

技能目标：

If单分支结构

If双分支结构

教学目标

If多分支结构

选择分支的嵌套

Switch选择分支结构

素质目标：

能灵活运用if,switch等语法解决程序中的选择分支判断问题。

If单分支结构

教学

If双分支结构

重点

If多分支结构

教学重点与难点

教学选择分支的嵌套

难点Switch选择分支结构

本次课程为JS中的选择分支结构的讲授课程，学生有了Java和C#基础，本次课

学情分析程可以采取多提问，帮助学生回忆的方式，让学生和老师进行互动学习本课程，

同时也可以检查学生之前课程的掌握情况

课前：

阅读本章教材和课件，准备提问问题，准备案例，准备作业等

课中：

介绍If单分支结构

介绍If双分支结构

教学过程

介绍If多分支结构

介绍选择分支的嵌套

介绍Switch选择分支结构

课后：

布置预习任务，预习下次课内容，了解JS中循环结构。

本次课程内容，大多数知识点和语法，采取让学生回忆的方式来学习，学习效果

教学反思良好，在今后的课程中，如遇到类似课程也可以采取类似方法，发挥学生自己思

考问题的积极性。

课程JavaScript程序设计教学设计

课程名称JavaScript程序设计授课对象

本次课学时

授课章节第一章：JavaScript基础语法(讲授)2学时

数

教学目的能灵活运用if,switch等语法解决程序中的选择分支判断问题。

本次课程为JS中的选择分支结构的讲授课程，学生有了Java和C#基础，本次课程可以

教学分析采取多提问，帮助学生回忆的方式，让学生和老师进行互动学习本课程，同时也可以检查

学生之前课程的掌握情况

If单分支结构

重点If双分支结构

教学重点与

If多分支结构

难点

选择分支的嵌套

难点

Switch选择分支结构

教学方法・课堂讲授。讲解例题•电子课件•案例分析。小组讨论

与手段•文字材料•提问。音像材料其他：______________________

教学过程设计

教学内容教学过程设计意图时间分配

复习：

复习上次课(1)JS中整数相除之后是小数还是整数复习加深

10分钟

程内容(2)JS中定义变量使用什么关键字印象

(3)JS中如何将字符串转换成数字

(1)让学生回忆，并提问在Java中的if语句的基本语法，给学生演

引出JavaScript中if语句的基本语法和java一致。if(条件)