教学单元设计-Javascript程序设计.docx

课程单元设计
课程名称：Jav名cript程序设计
适用专业：20级软件技术
所属院系：信息工程学院
编制人：
制定时间： 202L 8二o二一年至二o二二年第一学期
作业布置
实现根据价格高低来判断是否 奢侈品的程序实现
讲解
集体参与
网络资源 多媒体 电脑
10分钟
学习成果
懂得利用各种条件语句来进行流程上的判断
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题：第2章JavaScript基础
授课班级：20软件1,2, 3课时：2上课地点：实训5
教学目标
能力目标
知识目标
1、能正确理解并使用循环逻辑控制 语句
1、循环语句
能力训练任务 及案例
一'能力训练任务
各种循环语句的运用
二、案例
案例1： break语句例如
案例2： continue语句例如
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
复习条件语句
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
实例：利用循环计算从1累加 到100o通过实例的讲解来解 释循环语句使用的规那么
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
30分钟
操练
实现：在网页中显示做 1,000, 000次加操作所耗费的 时间
演示 讲解
实际操作
教材 网络资源 多媒体 电脑
30分钟
总结
循环语句的循环起始、条件及 自加表达式的考前须知
讲解
集体参与
教材
10分钟
作业布置
计算从出生到现在的天数
讲解
集体参与
网络资源 多媒体 电脑
10分钟
学习成果
正确使用循环语句
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题：第2章JavaScript基础
授课班级：20软件1,2, 3
课时：2
上课地点：实训5
教学目标
能力目标
知识目标
1、能正确理解并使用函数，理解对 象和B0M基础
1、函数、对象和B0M基础
能力训练任务 及案例
一'能力训练任务
正确使用函数来实现功能
二、案例
案例1： JavaScript函数调用例如
案例2： argument例如
案例3： date对象例如
案例4： date对象例如
案例5： confirm对话框演小小例
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
复习循环语句
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
1 .实例：对两个数进行加减乘 除四那么运算。通过事例的讲解 加深学生对函数的理解
2 . Date对象的介绍及B0M中 常用的对象介绍
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
30分钟
操练
实现：使用有参函数的调用实 现对两数的四那么运算
演示 讲解
实际操作
教材 网络资源 多媒体
30分钟

电脑

总结
无参及有参函数使用的注意事 项
讲解
集体参与
教材
10分钟
作业布置
通过函数实现计算在网页中显 示做1,000, 000次加操作所耗 费的时间
讲解
集体参与
网络资源 多媒体 电脑
10分钟
学习成果
正确使用函数来实现功能
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题：第3章Javascript开发
授课班级：20软件1,2, 3课时：2上课地点：实训5
教学目标
能力目标
知识目标
1、能正确使用alert ()函数及浏览 器的开发人员工具来对程序进行调 试。
1、调试js程序的工具及手段
能力训练任务 及案例
一'能力训练任务
学会进行单步运行、单步跳过及怎样添加监视点
二' 案例
案例1:九九乘法表
参考资料
Javascript技术教程
二、(单元)教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
复习javascript基本语法
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
实例：打印九九乘法表。通过 对实例的调试讲解，让学生掌 握使用alert ()函数及浏览器 的开发人员工具调试程序
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
30分钟
操练
实现：调试打印菱形程序
演示 讲解
实际操作
教材 网络资源 多媒体 电脑
30分钟
总结
使用浏览器的开发人员工具单 步调试需要注意的事项
讲解
集体参与
教材
10分钟
作业布置
用JavaScript计算借贷支出
讲解
集体参与
网络资源 多媒体 电脑
10分钟
学习成果
学会进行单步运行、单步跳过及怎样添加监视点
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题：第4章 CSS基础
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
1、能正确使用二种方式来实现控制
页面方法
2、掌握三种CSS选择器的使用
1、CSS的概念
2、CSS控制页面的方法
3、CSS选择器
能力训练任务 及案例
一'能力训练任务
正确使用三种方式来实现控制页面方法
三种CSS选择器的使用
二' 案例
案例1:行内样式表简单实用例如
案例2：嵌入式样式表应用例如
案例3：导入式样式表应用例如
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
复习js调试程序方法
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
1.分别使用三种方法实现控制 页面种文字及图片的风格样式 2 .对网页中不同标签分别使用 标记选择器，类别选择器及ID 选择器来控制页面不同元素的 风格样式
课件演示 模拟演练
听讲
实际操作
教材
网络资源 多媒体 电脑
80分钟
操练
对一个页面中不同的元素实现 不同的风格样式
演示 讲解
实际操作
教材
网络资源
60分钟

多媒体 电脑

总结
三种选择器的不同适应环境
讲解
集体参与
教材
15分钟
作业布置
对个人网站实现不同的风格样 式设计
讲解
集体参与
网络资源 多媒体 电脑
15分钟
学习成果
正确使用三种方式来实现控制页面方法 懂得三种CSS选择器的使用
教学后记

UavaScript程序设计》教案设计
一、教案头
本单兀标题：第4章 CSS基础
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
1、能对文字设置各种效果
2、能对图片设置双边框及图文混排
效果
3、能对页面背景进行设置
1、CSS设置文字效果
2、CSS设置图片效果
3、CSS设置页面背景
能力训练任务 及案例
一、能力训练任务
掌握各种CSS文字效果的设置及页面背景的设置
二' 案例
案例1:段落样式首行缩进
案例2：字体间隔应用例如
案例3：首字放大应用例如
案例4：图文混排简单例如
案例5：背景颜色、图片设置例如
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
复习三种CSS选择器
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
1、对给定的一段文字设置首字 放大，字体字号等效果。
2、四张图片实现双边框效果。
课件演示 模拟演练
听讲
实际操作
教材
网络资源 多媒体 电脑
80分钟
操练
设置页面的背景为一张具有双 边框效果的图片
演示 讲解
实际操作
教材 网络资源 多媒体 电脑
60分钟
UavaScript程序设计》教案设计
一、教案头
本单元标题：第1章 JavaScript概述
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
1 .理解Javascript的起源
2 .能安装代码编辑器EditPlus或 者 DreamViewer 软件
3 .掌握编辑器的基本用法
4 .掌握编辑器EditPlus或者
DreamViewer软件的基本用法
1. Javascript 的起源
2. .浏览器之争
3. JavaScript的编辑环境
4. JavaScript的实现与小体验
能力训练任务 及案例
一'能力训练任务
编写第一个JavaScript网页
二' 案例
案例1:定时翻开窗口
案例2：日期选择器
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
Javascript 的起源
课件、视频
听讲
教材 网络资源 多媒体
10分钟
讲授
1 .浏览器之间的冲突
2 .标准的制定
3 .Javascript 的实现 ECMAscript、 DOM、 BOM）
4 .编辑器 EditPlus 或 DreamViewer 的安装
5 编辑器 EditPlus 或 DreamV i ewer的基本功 能
6编辑实现第一个js程序
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
60分钟
总结
文字效果的属性，图片及图文 混排的不同属性设置
讲解
集体参与
教材
15分钟
作业布置
对个人网站种的文字图片及段 落实现不同的风格样式设计
讲解
集体参与
网络资源 多媒体 电脑
15分钟
学习成果
学会页面背景的设置及各种文字样式的设计
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题：第5章CSS进阶
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
1、能使用DIV与SPAN标记布局页
面
2、盒模型布局页面
1、块级元素和行内级元素
2、DIV与SPAN标记布局页面
3、盒模型
能力训练任务 及案例
一、能力训练任务
学会DIV与SPAN标记布局页面及盒模型布局
二' 案例
案例1： DIV标记例如
案例2： ＜div＞与＜span＞元素样式比照
案例3：盒子模型结构例如
案例4：边框例如
案例5： padding使用例如
案例6： margin例如
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
复习CSS基础内容
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
1 .通过盒子模型结构例如讲解 块级和行内级元素的区别及适 应范围。
2 .讲解盒模型种 padding, margin, border 的 区 别。
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
80分钟
操练
图文层叠例如的实现
演示 讲解
实际操作
教材 网络资源 多媒体 电脑
65分钟
总结
DIV及SPAN标记布局页面及盒 模型概念在页面布局中的优势
讲解
集体参与
教材
15分钟
作业布置
设计一个页面，使访问者用鼠 标指向页面上的不同文字时， 鼠标的形状会有所不同。
讲解
集体参与
网络资源 多媒体 电脑
10分钟
学习成果
1、懂得div的运用
2、完成border、padding> margin属性例如操作
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题：第5章CSS进阶
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
1、能使用三种css浮动定位
2、能使用简单的position定位布 局页面
1、CSS浮动定位
2、CSS position 定位
能力训练任务 及案例
一、能力训练任务
CSS布局定位
二' 案例
案例1:浮动定位例如
案例2： position定位例如
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
复习盒模型
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
1 .通过一个图文混排的实例讲 解浮动定位float属性的三个 值。
2 .通过position定位例如讲 解position定位的使用
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
80分钟
操练
歌曲编辑列表实例的实现
演示 讲解
实际操作
教材 网络资源 多媒体 电脑
65分钟
总结
浮动定位在图文混排中的使用 及position定位在布局页面 中的使用
讲解
集体参与
教材
15分钟
作业布置
水平菜单例如
讲解
集体参与
网络资源 多媒体 电脑
10分钟
学习成果
完成Position定位即float定位例如操作
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题：第6章DOM模型
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
1、正确理解D0M树概念及D0M树中 各个节点关系
2、能动态查看和修改页面中节点元 素
1、D0M及D0M技术简介
2、页面中的D0M模型框架
能力训练任务 及案例
一'能力训练任务
1、访问指定节点的方法
2、查看/修改属性节点
二' 案例
案例1： D0M技术应用简单例如
案例2： D0M基本方法综合例如
案例2： D0M常用方法综合例如
案例2：网页中的D0M模型框架例如
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
复习浮动定位及position定 位知识
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
通过动态修改图片元素的实例 来加深D0M树的理解及掌握访 问指定节点的方法和查看/修 改属性节点的方法
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
80分钟
操练
实现点击按钮修改图片节点对 象及获取图片的安装路径等属 性值
演示 讲解
实际操作
教材 网络资源 多媒体 电脑
65分钟
总结
DOM树中节点间关系及动态修 改或获取节点属性值
讲解
集体参与
教材
15分钟
作业布置
编写一个Web页面：每0.2秒 在浏览器窗口的状态栏中滚动 显示一次当前浏览器的信息。 在输出内容前加一个输出次数 的计数。这样每次的显示效果 有所不同。
提示：浏览器信息可由window 对象的子对象navigator获 得，用indow. status设置状态 栏的内容。
讲解
集体参与
网络资源 多媒体 电脑
10分钟
学习成果
完本钱讲所有例如操作
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题：第6章DOM模型
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
1、正确理解D0M树不同节点及其属 性
2、使用HTML DOM设置页面风格样 式
1、DOM模型中的节点
2、非标准的innerHTML属性
3、D0M 与 CSS
能力训练任务 及案例
一'能力训练任务
1、DOM模型中三种节点及其属性
2、HTML DOM设置页面风格样式
二' 案例
案例1:元素节点例如
案例2：本义节点例如
案例3：属性节点例如
案例4： DOM与CSS改变样式例如
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
复习DOM树结构
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
1 ,通过实例讲解元素节点、文 本节点及属性节点的属性值
2.通过HTML DOM动态修改 HTML元素的CSS风格样式
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
80分钟
操练
练习：使用HTML DOM对象的属 性访问
演示 讲解
实际操作
教材 网络资源 多媒体 电脑
65分钟
总结
三种节点不同属性值
HTML DOM 与 CSS 关系
讲解
集体参与
教材
15分钟
作业布置
使用HTML DOM修改字体颜色， 类型及字体大小
讲解
集体参与
网络资源 多媒体 电脑
10分钟
学习成果
完本钱讲所有例如操作
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题： 第7章事件机制
授课班级：20软件1,2, 3课时：2上课地点：实训5
教学目标
能力目标
知识目标
1、理解事件的驱动和响应
2、能捕捉鼠标操作事件
1、事件机制简介
2、鼠标操作事件
能力训练任务 及案例
一、能力训练任务
JavaScript事件运用
二' 案例
案例1:鼠标事件
案例2：键盘事件
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
复习D0M节点的属性
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
1 .事件的产生
2 .事件的响应
3 . 7种鼠标事件
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
20分钟
操练
练习捕捉各种鼠标操作事件
演示 讲解
实际操作
教材 网络资源 多媒体 电脑
40分钟
总结
事件机制一定是包含事件的产 生和事件的响应
7种鼠标事件发生及响应机制
讲解
集体参与
教材
10分钟
作业布置
屏蔽鼠标右键
讲解
集体参与
网络资源 多媒体
10分钟

uHello Worldv

操练
1 .器EditPlus或
DreamViewer 的安装
2 .使用EditPlus实现第一个 js 程序 “Hello worldv
演示
实际操作
教材 网络资源 多媒体 电脑
70分钟
总结
1、vascript 概况
2、实现js程序的流程
讲解
集体参与
教材
20分钟
作业布置
1、给网站首页加上自动问候 的功能。网页将可以在不 同的时段向访问者显示不 同的问候语，例如在上午 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.完成个人网站中“欢迎光 临”标语的显示
讲解
集体参与
网络资源 多媒体 电脑
20分钟
1、完成第一个JavaScript网页编写2、完成定时翻开窗口操作
3、完成日期选择器操作学习成果

学习成果

电脑

学习成果
学会鼠标及键盘事件的运用
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题： 第7章事件机制
授课班级：20软件1,2, 3课时：2上课地点：实训5
教学目标
能力目标
知识目标
理解并正确响应键盘操作事件
1、键盘操作事件
2、其他事件
能力训练任务 及案例
一、能力训练任务
JavaScript事件运用
二' 案例
案例1：设置各级菜单的CSS样式风格
案例2：为菜单添加伸缩效果
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
复习事件机制及鼠标操作事件
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
1 .三种基本的键盘操作事件
2 .页面加载，表单提交等其他 事件
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
20分钟
操练
可伸缩的两级菜单建立HTML 框架
演示 讲解
实际操作
教材 网络资源 多媒体 电脑
40分钟
总结
事件机制一定是包含事件的产 生和事件的响应
3种键盘操作事件发生及一些 其他事件的理解和捕捉
讲解
集体参与
教材
10分钟
作业布置
可伸缩两级菜单的风格样式设 置及菜单添加伸缩效果
讲解
集体参与
网络资源 多媒体 电脑
10分钟
学习成果
完成菜单伸缩效果的设置
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题： 第8章表格与表单
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
css控制表格样式和D0M动态控制 表格
1、学会css控制表格样式
2、D0M动态控制表格
能力训练任务 及案例
一'能力训练任务
表格样式的控制
二、案例
案例1： CSS及D0M控制表格
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
Css样式的使用回顾
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
1 .表格的相关标记
2 .表格颜色的设置
3 .表格的边框
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
60分钟
操练
动态的添加表格及修改里面的 内容，删除表格等
演示 讲解
实际操作
教材 网络资源 多媒体 电脑
90分钟
总结
CSS控制表格样式，
D0M动态控制表格，实现表格 的增删改操作。
讲解
集体参与
教材
10分钟
作业布置
CSS及D0M控制表格
讲解
集体参与
网络资源 多媒体
10分钟

电脑

学习成果
完成表格样式的控制，学会DOM动态控制表格
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题： 第8章表格与表单
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
控制表单以及表单元素的使用
1、控制表单
2、表单元素的灵活运用
3.文本框的设置
能力训练任务 及案例
一'能力训练任务
控制表单以及表单元素的使用
二、案例
案例1:自动提示的文本框
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
表单的制作
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
1 .表单的相关标记及表单元
素
2 .表单元素的访问
3 .文本框的设置
4 .按钮等设置
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
20分钟
操练
控制表单及文本框、单项选择按钮、 复选按钮和下拉菜单的设置
演示 讲解
实际操作
教材 网络资源 多媒体 电脑
30分钟
总结
控制表单及其表单元素的熟练 使用
讲解
集体参与
教材
10分钟
作业布置
自动提示的文本框
讲解
集体参与
网络资源 多媒体 电脑
10分钟
学习成果
学会表单的制作及控制表单
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题：第9章JavaScript设计与优化....
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
调试与优化javascript
1 .常见错误和异常
2 .错误处理
3 .使用调试器
4 . JavaScript 优化
能力训练任务 及案例
一、能力训练任务
Javascript的调试与优化
二' 案例
案例1:等号与赋值混淆
案例2：括号不匹配
案例3：访问不存在的变量
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
除数为。的情况，典型的计算 问题
课件演示
听讲
教材 网络资源 多媒体
10分钟
讲授
1 .常见错误和异常
2 .错误处理
3 .使用调试器
4 . JavaScript 优化
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
60分钟
操练
错误与异常的查找和处理 错误、异常的调试与优化
演示 讲解
实际操作
教材 网络资源 多媒体 电脑
90分钟
总结
JavaScript的调试与优化，通 过熟悉的trycatch等方
法。
讲解
集体参与
教材
10分钟
作业布置
自动提示的文本框
讲解
集体参与
网络资源 多媒体 电脑
10分钟
学习成果
学会JavaScript的优化。
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题：第10章Ajax基础
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
1 . 了解和掌握Ajax的主要特点。
2 .熟悉Ajax的程序开发环境，掌 握Ajax语言的上机步骤。
3 .熟练掌握源程序的建立、编辑、 编译、保存和运行的基本方法。
4 .会编写简单的Ajax应用程序。
1 .认识CSS,熟悉CSS的语法结 构。
2 .掌握CSS语言中3种基本引用 方式、样式表定义及使用。
3 .掌握不同引用方式下，样式表的 引用规那么。
4 .熟练掌握内联式、嵌入式和链接 式。
能力训练任务 及案例
一'能力训练任务
1 .熟悉Visual studio的启动和退出以及Visual studio的编辑、编译、 连接和运行命令。
2 . 了解Visual studio开发环境的配置。
二' 案例
案例1：认识Visual studio的菜单栏、工具栏，工具箱，解决资源方案管 理器，代码编辑窗口。
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
Visual studio开发环境与配置
课件、视频
听讲
教材 网络资源 多媒体
10分钟
讲授
1 .熟悉各种样式表定义形式。
2 .各种属性的使用功能。
3 .各类引用样式表规那么。
课件演示 模拟演练
听讲
实际操作
教材
网络资源 多媒体 电脑
60分钟
教学后记

操练
熟练使用 Visual studio2008
演示
实际操作
教材 网络资源 多媒体 电脑
90分钟
总结
Javascript 概况
讲解
集体参与
教材
10分钟
作业布置

1 .设计一个内联式 样式表引用方式 的 例 题 SetStyle.html
2 .设计一个嵌入式 样式表的使用例 题
SetStyleJn.html

讲解
集体参与
网络资源 多媒体 电脑
10分钟

客户靛对象和李件
仇事件）
v

〈顺 Page Langua<e=*vvb- AutoEventVirexip=<vfalse** CodeBehind= ^Default aspx,vb* Inheri ts=</WebAppli cati onl. _Default*
—1 A

<1 DOCTYPE html PUBLIC "-〃W3C〃DTD XHTIIL 1 0 Tr5；itionJ〃EN” —, w3, ordTR/xhtmll/DTD/xhtell-trMMitic

3 O\tml〃w・w w3 ork/ 1999/xhtmlft〉

1
<ti tl«)无标题页</ti tle>
</head>
]<body>
3<for» id=*for®l * runat=**server*>
]<div>

</div>
</form>
“body)
</htnl>
1

V
<

>

S设计,口掂分也_源|

教学后记
UavaScript程序设计》教案设计
一、教案头
本单元标题：第11章jQuery基础
授课班级：20软件1,2, 3课时：6上课地点：实训5
教学目标
能力目标
知识目标
1 . jQuery 概述
2 . jQuery 的
3 .jQuery 与 CSS3
4 .使用选择器
5 .管理选择结果
6 .采用jQuery链
选择器
功能函数前缀
解决window, onload函数的冲突
创立D0M元素
自定义添加“$” 解决的冲突
能力训练任务 及案例
一'能力训练任务
XML Request 的使用
二、案例
案例1:设计一个用户注册实例例
参考资料
Javascript技术教程
二、（单元）教学设计
教学 环节
教学内容
教学方法 及手段
学生活动
教学资源及 工具
时间 分配
导入
CSS基础
课件、视频
听讲
教材 网络资源 多媒体
10分钟
讲授
jQuery概述 jQuery 的"$" jQuery 与 CSS3 使用选择器 管理选择结果 采用jQuery链
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
110分钟
操练
属性选择器
$ ( aa[href=10-9. html]). ad dClass( "myClass" );
包含选择器$( "li：has(a)" ) 位 置 选 择器
演示
实际操作
教材 网络资源 多媒体 电脑
130分钟

$( "p:first-child”)
过 滤 选 择 器 $ ( "input[name=cbx]:c hecked" )
实现反 向过滤 $ ( "input:not (:radio) ")

总结
主流的JavaScript框架
• YUI
• Dojo
• mooTools
• Prototype
• jQuery
• More..
讲解
集体参与
教材
10分钟
作业
布置
1. jQuery 下载

讲解
集体参与
网络资源 多媒体 电脑
10分钟

• 当前版本
• 官方网站下 载：
:〃jquery. com/
2. jQuery 安装

在页面头部head 中，添加js
<script
type="text/javascri
pt
src="・ /script/jquer y. js/zX/script>
3 MyEclipse中可以实现 jQuery的智能提示
学习 成果
完成jQuery的下载
教学 后记

UavaScript程序设计》教案设计
一、教案头
本单元标题： 第12章jQuery控制页面
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
通过标记属性，元素的样式，页面 的元素，jQuery处理事件完成 jQuery控制
标记属性
元素样式
页面的元素
JQuery处理事件
能力训练任务 及案例
一'能力训练任务
比window, onload更快一些的载入
二' 案例
案例1:制作双色表格
案例2：巧妙的伪装链接
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
JQuery基础
课件、视频
听讲
教材 网络资源 多媒体
10分钟
讲授
1 .标记属性
2 .元素样式
3 .页面的元素
4 . JQuery处理事件
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
20分钟
操练
使用编辑器EditPlus制作双 色表格
演示
实际操作
教材 网络资源 多媒体 电脑
130分钟
总结
标记属性 元素样式 页面的元素
讲解
集体参与
教材
10分钟

JQuery处理事件

作业布置
平安邮件列表
讲解
集体参与
网络资源 多媒体 电脑
10分钟
学习成果

$(document}.ready(function(){
$.post("mailtolnfo.php,f( pass: "secret”
),function(txt){
$(•div.email,>.html(txt>;
$ (* div. email * ] . slideDown;
'；
))；
教学后记

UavaScript程序设计》教案设计
一、教案头
本单元标题： 第13章 用jQuery制作动画与特效
授课班级：20软件1,2, 3课时：4上课地点：实训5
教学目标
能力目标
知识目标
1 .显示与隐藏元素
2 .元素显隐的渐入渐出效果
3 .幻灯片效果
显示与隐藏元素
元素显隐的渐入渐出效果
幻灯片效果
能力训练任务 及案例
一、能力训练任务
制作伸缩的导航条
二、案例
案例1： QQ切换用户风格
案例2：无刷新评论最终版本
参考资料
Javascript技术教程
二、（单元）教学设计
教学环节
教学内容
教学方法 及手段
学生活动
教学资源 及工具
时间 分配
导入
jQuery基础
课件、视频
听讲
教材 网络资源 多媒体
10分钟
讲授
1 .显示与隐藏元素
2 .元素显隐的渐入渐出效果
3 .幻灯片效果
课件演示 模拟演练
听讲
实际操作
教材 网络资源 多媒体 电脑
20分钟
操练
检测浏览器
盒子模型
处理JavaScript对象 获取外部代码
演示
实际操作
教材 网络资源 多媒体 电脑
130分钟
总结
jQuery动画与特效
讲解
集体参与
教材
10分钟