JavaScript程序设计教案

JavaScript程序设计教案

课程名称：JavaScript程序设计

适用专业：计算机应用

所属院系：信息工程学院

编制人：_________________________________

制定时间:

UavaScript程序设计》教案设计

一'教案头

本单元标题：第1章JavaScript概述

授课班级：16计应课时：4上课地点：教1

能力目标知识目标

1.理解Javascript的起源1.Javascript的起源

2.能安装代码编辑器EditPlus或2.浏览器之争

教学目标者DreamViewer软件3.JavaScript的编辑环境

3.掌握编辑器的基本用法4.JavaScript的实现与小体验

4.掌握编辑器EditPlus或者

DreamViewer软件的基本用法

一'能力训练任务

编写第一个JavaScript网页

能力训练任务

及案例二、案例

案例1：定时打开窗口

案例2：日期选择器

精通JavaScript+jQuery100%动态网页设计密码

参考资料

二'（单元）教学设计

教学方法教学资源时间

教学环节教学内容学生活动

及手段及工具分配

导入Javascript的起源课件、视频听讲教材10分钟

网络资源

多媒体

讲授1.浏览器之间的冲突课件演示听讲教材40分钟

2.标准的制定模拟演练实际操作网络资源

3.Javascript的实现多媒体

ECMAscript>DOM、BOM）电脑

4.编辑器EditPlus或

DreamViewer的安装

5编辑器EditPlus或

DreamViewer的基本功

能

6编辑实现第一个js程序

“HelloWorld”

操练1.器EditPlus或演示实际操作教材70分钟

DreamViewer的安装网络资源

2.使用EditPlus实现第一个多媒体

js程序“Helloworld”电脑

总结1、vascript概况讲解集体参与教材20分钟

2、实现js程序的流程

作业布置1、给网站首页加上自动问候讲解集体参与网络资源20分钟

的功能。网页将可以在不多媒体

同的时段向访问者显示不电脑

同的问候语，例如在上午

8:00—9:00就向用户显示

“早上好”，如果在下午则

显示“下午好”。

我们将定义的时

间段对应得问候语列

在下面：

0:00—06:00你

不会是熬通宵吧，别

太辛苦哦！

06:00—08:00

早上好

08:00—11:00上

午好

11:00—13:00午

饭吃过了吗

13:00—17:00下

午好

17:00—24:00晚

上好

2.完成个人网站中“欢迎光

临”标语的显示

1、完成第一个JavaScript网页编写

2、完成定时打开窗口操作

学习成果3、完成日期选择器操作

教学后记

JavaScript程序设计》教案设计

一'教案头

本单元标题：第2章JavaScript基础

授课班级：16计应课时：2上课地点：教1

能力目标知识目标

教学目标1、变量的声明及赋值1、语法

2、变量

一、能力训练任务

1、JavaScript语法学习

能力训练任务2、变量命名规则

及案例二、案例

案例1：变量定义实例

精通JavaScript+jQuery100%动态网页设计密码

参考资料

二'（单元）教学设计

教学方法教学资源时间

教学环节教学内容学生活动

及手段及工具分配

导入Javascript的实现课件演示听讲教材10分钟

网络资源

多媒体

讲授1.Javascript基本语法要求课件演示听讲教材20分钟

2.变量的声明及赋值模拟演练实际操作网络资源

多媒体

电脑

操练引入一个小例子实现对字符演小实际操作教材30分钟

串、数值等变量的赋值操作讲解网络资源

任务驱动多媒体

电脑

总结变量声明及赋值的方法讲解集体参与教材10分钟

作业布置找出javascript变量声明及讲解集体参与网络资源10分钟

赋值方法与Java语言中的区多媒体

别电脑

学会JavaScript基本语法

懂得变量的声明及赋值

学习成果

教学后记

JavaScript程序设计》教案设计

一'教案头

本单元标题：第2章JavaScript基础

授课班级：16计应课时：2上课地点：教1

能力目标知识目标

1、能正确理解各种数据类型并使用1、数据类型

教学目标相应的数据类型2、关键字和保留字

2、对关键字和保留字能正确理解并

使用

一、能力训练任务

正确使用各种数据类型

二、案例

能力训练任务

及案例案例1：连接字符串

案例2：字符串字母大小写传换

案例3：获取字符串长度示例

案例4：数值运算示例

案例5：布尔型转换字符串

精通JavaScript+jQuery100%动态网页设计密码

参考资料

二'（单元）教学设计

教学方法教学资源时间

教学环节教学内容学生活动

及手段及工具分配

导入复习变量的声明及赋值课件演示听讲教材10分钟

网络资源

多媒体

讲授1.6种主要数据类型介绍，并课件演示听讲教材20分钟

通过小例子加深学生对数据类模拟演练实际操作网络资源

型的理解任务驱动多媒体

2.关键字和保留字的注意事电脑

项

操练引入一个小例子分别使用6种演小实际操作教材30分钟

重要的数据类型讲解网络资源

多媒体

电脑

总结6种数据类型数据使用的注意讲解集体参与教材10分钟

，邪项

作业布置设置个人网站中对不同数据的讲解集体参与网络资源10分钟

使用实现不同显示项目多媒体

电脑

1、能够正确使用各种数据类型

2、正确完成所有案例

学习成果

教学后记

JavaScript程序设计》教案设计

一'教案头

本单元标题：第2章JavaScript基础

授课班级：16计应课时：2上课地点：教1

能力目标知识目标

教学目标1、能正确理解并使用条件逻辑控制1、条件语句

语句

一、能力训练任务

学会各种条件语句来进行流程上的判断

能力训练任务

及案例二、案例

案例1：if语句示例

案例2：switch语句示例

精通JavaScript+jQuery100%动态网页设计密码

参考资料

二'（单元）教学设计

教学方法教学资源时间

教学环节教学内容学生活动

及手段及工具分配

导入复习变量的数据类型课件演示听讲教材10分钟

网络资源

多媒体

讲授根据时间显示不同问候语的例课件演示听讲教材20分钟

子讲解：模拟演练实际操作网络资源

1.ifelse条件逻辑控制语句多媒体

2.switchcase逻辑控制语句电脑

操练用一个根据不同条件执行不同演小实际操作教材30分钟

操作的实例让同学加深对这2讲解网络资源

种条件语句的理解多媒体

电脑

总结Ifelse语句和switchcase讲解集体参与教材10分钟

的相同和不同点

作业布置实现根据价格高低来判断是否讲解集体参与网络资源10分钟

奢侈品的程序实现多媒体

电脑

懂得利用各种条件语句来进行流程上的判断

学习成果

教学后记

UavaScript程序设计》教案设计

一'教案头

本单元标题：第2章JavaScript基础

授课班级：16计应课时：2上课地点：教1

能力目标知识目标

教学目标1、能正确理解并使用循环逻辑控制1、循环语句

语句

一'能力训练任务

各种循环语句的运用

能力训练任务

及案例二、案例

案例1：break语句示例

案例2：continue语句示例

精通JavaScript+jQuery100%动态网页设计密码

参考资料

二'（单元）教学设计

教学方法教学资源时间

教学环节教学内容学生活动

及手段及工具分配

导入复习条件语句课件演示听讲教材10分钟

网络资源

多媒体

讲授实例：利用循环计算从1累加课件演示听讲教材20分钟

到100„通过实例的讲解来解模拟演练实际操作网络资源

释循环语句使用的规则多媒体

电脑

操练实现：在网页中显不做演小实际操作教材30分钟

1,000,000次加操作所耗费的讲解网络资源

时间多媒体

电脑

总结循环语句的循环起始、条件及讲解集体参与教材10分钟

自加表达式的注意事项

作业布置计算从出生到现在的天数讲解集体参与网络资源10分钟

多媒体

电脑

正确使用循环语句

学习成果

教学后记

UavaScript程序设计》教案设计

一'教案头

本单元标题：第2章JavaScript基础

授课班级：16计应课时：2上课地点：教1

能力目标知识目标

教学目标1、能正确理解并使用函数，理解对1、函数、对象和BOM基础

象和BOM基础

一、能力训练任务

正确使用函数来实现功能

二、案例

能力训练任务

及案例案例1：JavaScript函数调用示例

案例2：argument示例

案例3：date对象示例

案例4：date对象示例

案例5：confirm对话框演示示例

精通JavaScript+jQuery100%动态网页设计密码

参考资料

二'（单元）教学设计

教学方法教学资源时间

教学环节教学内容学生活动

及手段及工具分配

导入复习循环语句课件演示听讲教材10分钟

网络资源

多媒体

讲授1.实例：对两个数进行加减乘课件演示听讲教材20分钟

除四则运算。通过事例的讲解模拟演练实际操作网络资源

加深学生对函数的理解多媒体

2.Date对象的介绍及BOM中电脑

常用的对象介绍

操练实现：使用有参函数的调用实演小实际操作教材30分钟

现对两数的四则运算讲解网络资源

多媒体

电脑

总结无参及有参函数使用的注意事讲解集体参与教材10分钟

项

作业布置通过函数实现计算在网页中显讲解集体参与网络资源10分钟

示做1,000,000次加操作所耗多媒体

费的时间电脑

正确使用函数来实现功能

学习成果

教学后记

UavaScript程序设计》教案设计

一'教案头

本单元标题：第3章Javascript开发

授课班级：16计应课时：2上课地点：教1

能力目标知识目标

教学目标1、能正确使用alert()函数及浏览1、调试js程序的工具及手段

器的开发人员工具来对程序进行调

试。

一、能力训练任务

能力训练任务学会进行单步运行、单步跳过及怎样添加监视点

及案例

二、案例

案例1：九九乘法表

精通JavaScript+jQuery100%动态网页设计密码

参考资料

二'(单元)教学设计

教学方法教学资源时间

教学环节教学内容学生活动

及手段及工具分配

导入复习javascript基本语法课件演示听讲教材10分钟

网络资源

多媒体

讲授实例：打印九九乘法表。通过课件演示听讲教材20分钟

对实例的调试讲解，让学生掌模拟演练实际操作网络资源

握使用alert()函数及浏览器多媒体

的开发人员工具调试程序电脑

操练实现：调试打印菱形程序演小实际操作教材30分钟

讲解网络资源

多媒体

电脑

总结使用浏览器的开发人员工具单讲解集体参与教材10分钟

步调试需要注意的事项

作业布置用JavaScript计算借贷支出讲解集体参与网络资源10分钟

多媒体

电脑

学会进行单步运行、单步跳过及怎样添加监视点

学习成果

教学后记

UavaScript程序设计》教案设计

一'教案头

本单元标题：第4章CSS基础

授课班级：16计应课时：4上课地点：教1

能力目标知识目标

教学目标1、能正确使用三种方式来实现控制1、CSS的概念

页面方法2、CSS控制页面的方法

2、掌握三种CSS选择器的使用3、CSS选择器

一、能力训练任务

正确使用三种方式来实现控制页面方法

能力训练任务三种CSS选择器的使用

及案例二、案例

案例1:行内样式表简单实用示例

案例2：嵌入式样式表应用示例

案例3：导入式样式表应用示例

精通JavaScript+jQuery100%动态网页设计密码

参考资料

二'（单元）教学设计

教学方法教学资源时间

教学环节教学内容学生活动

及手段及工具分配

导入复习js调试程序方法课件演示听讲教材10分钟

网络资源

多媒体

讲授1.分别使用三种方法实现控制课件演示听讲教材80分钟

页面种文字及图片的风格样式模拟演练实际操作网络资源

2.对网页中不同标签分别使用多媒体

标记选择器，类别选择器及ID电脑

选择器来控制页面不同元素的

风格样式

操练对一个页面中不同的元素实现演小实际操作教材40分钟

不同的风格样式讲解网络资源

多媒体

电脑

总结三种选择器的不同适应环境讲解集体参与教材15分钟

作业布置对个人网站实现不同的风格样讲解集体参与网络资源15分钟

式设计多媒体

电脑

正确使用三种方式来实现控制页面方法

懂得三种CSS选择器的使用

学习成果

教学后记

UavaScript程序设计》教案设计

一'教案头

本单元标题：第4章CSS基础

授课班级：16计应课时：4上课地点：教1

能力目标知识目标

1、能对文字设置各种效果1、CSS设置文字效果

教学目标2、能对图片设置双边框及图文混排2、CSS设置图片效果

效果3、CSS设置页面背景

3、能对页面背景进行设置

一、能力训练任务

掌握各种CSS文字效果的设置及页面背景的设置

二、案例

能力训练任务

及案例案例1：段落样式首行缩进

案例2：字体间隔应用示例

案例3：首字放大应用示例

案例4：图文混排简单示例

案例5：背景颜色、图片设置示例

精通JavaScript+jQuery100%动态网页设计密码

参考资料

二'（单元）教学设计

教学方法教学资源时间

教学环节教学内容学生活动

及手段及工具分配

导入复习三种CSS选择器课件演示听讲教材10分钟

网络资源

多媒体

讲授1、对给定的一段文字设置首字课件演示听讲教材80分钟

放大，字体字号等效果。模拟演练实际操作网络资源

2、四张图片实现双边框效果。多媒体

电脑

操练设置页面的背景为一张具有双演小实际操作教材40分钟

边框效果的图片讲解网络资源

多媒体

电脑

总结文字效果的属性，图片及图文讲解集体参与教材15分钟

混排的不同属性设置

作业布置对个人网站种的文字图片及段讲解集体参与网络资源15分钟

落实现不同的风格样式设计多媒体

电脑

学会页面背景的设置及各种文字样式的设计

学习成果

教学后记

UavaScript程序设计》教案设计

一'教案头

本单元标题：第5章CSS进阶

授课班级：16计应课时：4上课地点：教1

能力目标知识目标

教学目标1、能使用DIV与SPAN标记布局页1、块级元素和行内级元素

面2、DIV与SPAN标记布局页面

2、盒模型布局页面3、盒模型

一、能力训练任务

学会DIV与SPAN标记布局页面及盒模型布局

二、案例

能力训练任务案例1：DIV标记示例

及案例案例2：＜div＞与＜span＞元素样式对比

案例3：盒子模型结构示例

案例4：边框示例

案例5：padding使用示例

案例6：margin示例

精通JavaScript+jQuery100%动态网页设计密码

参考资料

二'（单元）教学设计

教学方法教学资源时间

教学环节教学内容学生活动

及手段及工具分配

导入复习CSS基础内容课件演示听讲教材10分钟

网络资源

多媒体

讲授1.通过盒子模型结构示例讲解课件演示听讲教材80分钟

块级和行内级元素的区别及适模拟演练实际操作网络资源

应范围。多媒体

2.讲解盒模型种电脑

padding,margin,border的区

别。

操练图文层叠示例的实现演小实际操作教材45分钟

讲解网络资源

多媒体

电脑

总结DIV及SPAN标记布局页面及盒讲解集体参与教材15分钟

模型概念在页面布局中的优势

作业布置设计一个页面，使访问者用鼠讲解集体参与网络资源10分钟

标指向页面上的不同文字时，多媒体

鼠标的形状会有所不同。电脑

1、懂得div的运用

2、完成border、padding、margin属性示例操作

学习成果

教学后记

UavaScript程序设计》教案设计

一'教案头

本单元标题：第5章CSS进阶

授课班级：16计应课时：4上课地点：教1

能力目标知识目标

教学目标1、能使用三种CSS浮动定位1、CSS浮动定位

2、能使用简单的position定位布2^CSSposition定位

局页面

一、能力训练任务

CSS布局定位

能力训练任务

及案例二、案例

案例1:浮动定位示例

案例2：position定位示例

精通JavaScript+jQuery100%动态网页设计密码

参考资料

二'（单元）教学设计

教学方法教学资源时间

教学环节教学内容学生活动

及手段及工具分配

导入复习盒模型课件演示听讲教材10分钟

网络资源

多媒体

讲授1.通过一个图文混排的实例讲课件演示听讲教材80分钟

解浮动定位float属性的三个模拟演练实际操作网络资源

值。多媒体

2.通过position定位示例讲电脑

解position定位的使用

操练歌曲编辑列表实例的实现演示实际操作教材45分钟

讲解网络资源

多媒体

电脑

总结浮动定位在图文混排中的使用讲解集体参与教材15分钟

及position定位在布局页面

中的使用

作业布置水平菜单示例讲解集体参与网络资源10分钟

多媒体

电脑

完成Position定位即float定位示例操作

学习成果

教学后记

UavaScript程序设计》教案设计

一'教案头

本单元标题：第6章DOM模型

授课班级：16计应课时：4上课地点：教1

能力目标知识目标

1、正确理解DOM树概念及DOM树中1、D0M及D0M技术简介

教学目标各个节点关系2、页面中的D0M模型框架

2^能动态查看和修改页面中节点元

素

一、能力训练任务

1、访问指定节点的方法

2、查看/修改属性节点

能力训练任务

及案例二、案例

案例1：DOM技术应用简单示例

案例2：DOM基本方法综合示例

案例2：DOM常用方法综合示例

案例2：网页中的DOM模型框架示例

精通JavaScript+JQuery100%动态网页设计密码

参考资料

二'（单元）教学设计

教学方法教学资源时间

教学环节教学内容学生活动

及手段及工具分配

导入复习浮动定位及position定课件演示听讲教材10分钟

位知识网络资源

多媒体

讲授通过动态修改图片元素的实例课件演示听讲教材80分钟

来加深D0M树的理解及掌握访模拟演练实际操作网络资源

问指定节点的方法和查看/修多媒体

改属性节点的方法电脑

操练实现点击按钮修改图片节点对演小实际操作教材45分钟

象及获取图片的安装路径等属讲解网络资源

性值多媒体

电脑

总结DOM树中节点间关系及动态修讲解集体参与教材15分钟

改或获取节点属性值

作业布置编写一个Web页面：每0.2秒讲解集体参与网络资源10分钟

在浏览器窗口的状态栏中滚动多媒体

显示一次当前浏览器的信息。电脑

在输出内容前加一个输出次数

的计数。这样每次的显示效果

有所不同。

提示：浏览器信息可由window

对象的子对象navigator获

得，用indow.status设置状态

栏的内容。

完成本讲所有示例操作

学习成果

教学后记

UavaScript程序设计》教案设计

一'教案头

本单元标题：第6章DOM模型

授课班级：16计应课时：4上课地点：教1

能力目标知识目标

1