网页设计与制作HTMLCSSJavaScript单元JavaScript编程

《网页设计与制作HTMLCSSJavaScript单元JavaScript编程》由会员分享，可在线阅读，更多相关《网页设计与制作HTMLCSSJavaScript单元JavaScript编程（9页珍藏版）》请在装配图网上搜索。

1、《网页设计与制作》课程教学单元设计 单元5： JavaScript编程 授课教师：网页设计与制作组 授课班级: 学时：20 教学条件 预装网页制作工具Dreamweaver或VS.net的计算机 教学素材 教材、课件、实训项目单、授课录像、案例库、教学网站等 教学目标设计 知识目标： （1） 掌握JavaScript的概念与作用； （2） 掌握JavaScript语言基础； （3） 掌握浏览器内置对象的应用； （4） 掌握页面中标签的访问与属性的设置； （5） 掌握页面元素的事件类型与处理； （6） 掌握DOM对象树的创建与修改； （7） 掌握DOM对象事件

2、处理与引发； （8） 掌握常见表单的验证。 能力目标： （1） 理解JavaScript的概念与作用； （2） 能运用JavaScript语言基础解决简单的实际问题； （3） 能应用浏览器内置对象； （4） 能实现页面中标签的访问与属性的设置； （5） 能使用DOM对象实现页面元素的动态处理； （6） 能进行各类表单的验证。 教学内容 （1） JavaScript语言基础； （2） DOM的结构与DOM节点的操作。 重点： （1） JavaScript语言基础； （2） DOM树型结构； （3） DOM节点对象的属性方法事件； （4） 表单验证。 难点： （

3、1） JavaScript表达式与程序控制结构； （2） DOM树的构建； （3） DOM节点对象的事件处理； （4）表单验证的封装。 课后作业 JavaScript折叠卡的设计； JavaScript选项卡的设计。 教学过程设计 知识1 JavaScript语言基础（4学时） 主要步骤 教学内容 教学方法 教学手段 师生活动 问题 引入 Javascript在DHTML中的作用 教师讲授 引导文法 多媒体 教师：提问 学生：讨论 知识讲解 知识点1： Javascript程序编辑与运行。 知识点2： 常量、变量、数组、运算符和表达式。 知识

4、点3： 程序控制结构。 启发讲解 讨论归纳 多媒体 课件演示 思考 交流互动 记录笔记 示范 操作 操作1：创建页面内的Javascript程序。 操作2：验证各种运算符与表达式。 操作3：数组方法的使用。 操作4：使用程序控制结构编写JS程序。 问题引导 操作演示 分析归纳 多媒体 系统演示 观摩思考 归纳总结 实战 训练 任务单5-1 使用数组产生无序列表ul-li 动手实践 做中学 多媒体 真实系统环境 实践操作 巡视检查 评估 讨论 1.评估讨论实训任务完成的速度； 2.评估讨论实训任务完成的正确率； 3.展示讨论学生的

5、解决方案； 4.考核学生结果。 教师启发 讨论归纳 分数激励 实训项目单 思考 结果演示 课堂 总结 1.变量与数组的关系。 2.变量与数组的定义、作用域与使用。 3.switch语句的结构。 4.直到型循环与当型循环的异同。 5.break与continue的异同。 教师讲解 多媒体 课件演示 整理笔记 引导创新 课后作业 拓展实训5-1： 1.定义含多个超链接数据全局数组； 2.使用JS循环语句由数组建立多个超链接，实现导航。 教师讲授 多媒体 布置作业 提出要求 教学过程设计 知识2 JavaScript函数与自定义类 （

6、2学时） 主要步骤 教学内容 教学方法 教学手段 师生活动 问题 引入 如何将实现代码段的通用 教师讲授 引导文法 多媒体 思考 知识讲解 知识点1： 函数的定义。 知识点2： 函数mctwmctwmc的调用。 知识点3： 函数中的参数传递。 知识点4： 用户类的成员定义与引用。 启发讲解 讨论归纳 多媒体 课件演示 思考 交流互动 记录笔记 示范 操作 操作1：示范由逻辑值转换为字符串的函数定义与调用。 操作2：演示数组为参数输出无序列表格式的字符串。 操作3：演示可设置数据与格式的自定义类Table。 操作4：演示各种形式

7、的Delete语句使用。 问题引导 操作演示 分析归纳 多媒体 系统演示 观摩思考 归纳总结 实战 训练 任务单5-2 将一维数组和二维数组数据以无序列表的超链接形式输出。 动手实践 做中学 多媒体 真实系统环境 实践操作 巡视检查 评估 讨论 1. 评估讨论实训任务的实施过程； 2. 给出参考的解决方案； 3. 展示讨论学生的解决方案； 4. 考核学生结果。 教师启发 讨论归纳 分数激励 实训项目单 思考 结果演示 课堂 总结 1. 函数的作用。 2. 有参函数作用。 3. function关键字的作用。 4. 类的成员类型与

8、定义方法。 5. 构造函数的调用方法。 教师讲解 多媒体 课件演示 整理笔记 引导创新 课后作业 拓展实训5-2： 1.将月份转换为季节名称。 2.按照时间产生“早上好”、“你好”、“晚上好”等问候。 3.定义二维点类Point2D,实现点的数据存储和信息显示。 教师讲授 多媒体 布置作业 提出要求 教学过程设计 知识3 浏览器内置对象与页面标签（2学时） 主要步骤 教学内容 教学方法 教学手段 师生活动 问题 引入 网页与浏览器的关系 教师讲授 引导文法 多媒体 思考 知识讲解 知识点1：浏览器信息（navigato

9、r）对象。 知识点2：窗口（window）对象。 知识点3：屏幕（screen）对象。 知识点4：历史记录（history）对象。 知识点5：文档（document）对象。 知识点6：cookie对象。 启发讲解 讨论归纳 多媒体 课件演示 思考 交流互动 记录笔记 示范 操作 操作1：示范navigator对象的属性。 操作2：演示显示一个无菜单、无工具条、无滚动条的窗口。 操作3：演示screen对象的属性的使用。 操作4：演示页面前进与后退。 操作5：演示表单及其元素数目的统计。 操作6：演示 cookie对象的读写。 问题引导 操作演示 分析

10、归纳 多媒体 系统演示 观摩思考 归纳总结 实战 训练 任务单5-3 设计登录界面并输出表单元素的值（提交） 动手实践 做中学 多媒体 真实系统环境 实践操作 巡视检查 评估 讨论 1.评估讨论实训任务的实施过程； 2.给出参考的解决方案； 3.展示讨论学生的解决方案； 4.考核学生结果。 教师启发 讨论归纳 分数激励 实训项目单 思考 结果演示 课堂 总结 1.浏览器内置对象类型。 2.浏览器内置对象在页面编程作用。 3.window中系统对话框的作用。 4.cookie的存储位置与读写方法。 5.document与cookie的

11、关系。 教师讲解 多媒体 课件演示 整理笔记 引导创新 课后作业 拓展实训5-3： 1．使用新的window打开一个页面 2．打开输入对话框输入姓名，将姓名存入cookie并读取cookie。 3. 将图片固定在浏览器两侧垂直中部。 教师讲授 多媒体 布置作业 提出要求 教学过程设计 知识4 页面标签事件处理（2学时） 主要步骤 教学内容 教学方法 教学手段 师生活动 问题 引入 加法器的实现 教师讲授 引导文法 多媒体 思考 知识讲解 知识点1： 利用Document方法访问页面标签。 知识点2： 通过页面标签对象读

12、写其属性。 知识点3：利用Document方法访问表单及其控件。 知识点4：通过属性为页面标签对象和表单对象指派事件。 启发讲解 讨论归纳 多媒体 课件演示 思考 交流互动 记录笔记 示范 操作 操作1：示范使用document的 getElementById方法实现加法器。 操作2：示范使用document的； getElementsByName方法实现加法器 操作3：示范使用表单及其控件实现加法器。 操作4：演示表单元素的最重要的属性访问。 操作5：演示事件与事件参数的使用 问题引导 操作演示 分析归纳 多媒体 系统演示 观摩思考 归纳总结

13、 实战 训练 任务单5-4 建立图形按钮并实现一维菜单。 动手实践 做中学 多媒体 真实系统环境 实践操作 巡视检查 评估 讨论 1.评估讨论实训任务的实施过程； 2.给出参考的解决方案； 3.展示讨论学生的解决方案； 4.考核学生结果。 教师启发 讨论归纳 分数激励 实训项目单 思考 结果演示 课堂 总结 1.三种访问页面元素的方法使用场合的异同。 2.表单元素id与name属性的异同。 3.表单元素与HTML标签作用的异同。 4.表单元素的提交到服务端的重要属性。 5.设置并处理HTML标签对象的事件。 教师讲解 多媒体 课件演示

14、 整理笔记 引导创新 课后作业 拓展实训5-4： 1．完成登录或注册界面，显示表单提交的结果。 2．禁止文本框输入单引号。 3. 使用事件实现DIV移入、移出的文本前景色的变化。 教师讲授 多媒体 布置作业 提出要求 教学过程设计 任务1 下拉菜单的设计（2学时） 主要步骤 教学内容 教学方法 教学手段 师生活动 问题 引入 如何实现常见的导航 教师讲授 引导文法 多媒体 思考 知识讲解 知识点1：树形结构数据及其HTML表示。 知识点2：HTML节点的样式设计。 知识点3：第一级菜单移入和移出事件处理。 启发讲解 讨论

15、归纳 多媒体 课件演示 思考 交流互动 记录笔记 示范 操作 操作1：演示树形结构数据的HTML实现。 操作2：演示HTML节点的样式设计。 操作3：演示第一级菜单移入和移出事件处理的代码编写。 问题引导 操作演示 分析归纳 多媒体 系统演示 观摩思考 归纳总结 实战 训练 任务单5-5 下拉菜单的实现 动手实践 做中学 多媒体 真实系统环境 实践操作 巡视检查 评估 讨论 1.评估讨论实训任务的实施过程； 2.给出参考的解决方案； 3.展示讨论学生的解决方案； 4.考核学生结果。 教师启发 讨论归纳 分数激励 实训项目单

16、思考 结果演示 课堂 总结 1. ul与li的嵌套构成多级菜单。 2. 任务完成的三个步骤（HTML+CSS+JS）。 3.将样式设置放在头部（head节点内）。 教师讲解 多媒体 课件演示 整理笔记 引导创新 课后作业 拓展实训5-5： 1．设置最近被单击过的超链接外观属性； 2．将菜单数据变成数组，对数组遍历，将遍历的数据连接成字符串，在用document.write添加到body中； 3. 建立多级菜单。 教师讲授 多媒体 布置作业 提出要求 教学过程设计 知识5 DOM节点对象（2学时） 主要步骤 教学内容 教学方法 教学手段

17、师生活动 问题 引入 如何操控树形结构的HTML元素 教师讲授 引导文法 多媒体 思考 知识讲解 知识点1： DOM对象结构。 知识点2： DOM对象节点类型。 知识点3： DOM对象节点及其属性的访问。 知识点4：DOM对象节点的创建与修改。 知识点5：DOM节点删除、替换与复制操作。 知识点6： DOM节点对象的事件处理。 启发讲解 讨论归纳 多媒体 课件演示 思考 交流互动 记录笔记 示范 操作 操作1：示范DOM节点树的构成。 操作2：演示页面节点的访问操作 操作3：演示属性节点的创建与属性值的读写操作。 操作4：演示前插节

18、点与后插节点的操作。 操作5：演示节点删除、替换与复制操作。 操作6：DOM节点对象的鼠标事件。 问题引导 操作演示 分析归纳 多媒体 系统演示 观摩思考 归纳总结 实战 训练 任务单5-6 使用DOM节点构造table节点树。 动手实践 做中学 多媒体 真实系统环境 实践操作 巡视检查 评估 讨论 1.评估讨论实训任务的实施过程； 2.给出参考的解决方案； 3.展示讨论学生的解决方案； 4.考核学生结果。 教师启发 讨论归纳 分数激励 实训项目单 思考 结果演示 课堂 总结 1.节点类型的表示。 2.属性节点与元素节点的异同。

19、 3.节点的前插与后插。 4.样式的添加与移出。 教师讲解 多媒体 课件演示 整理笔记 引导创新 课后作业 拓展实训5-6： 1．页面节点的遍历； 2．编写改进后节点前插与后插的函数； 3. 移入或移出时样式的添加与移除。 教师讲授 多媒体 布置作业 提出要求 教学过程设计 任务2 表格美化的设计（2学时） 主要步骤 教学内容 教学方法 教学手段 师生活动 问题 引入 表格美化及其意义 教师讲授 引导文法 多媒体 思考 知识讲解 知识点1： 利用Insert和Select into语句向表增加一条或多条数据。 知

20、识点2： 利用Insert Select将一个用户表的数据导出到另一个表中。 知识点3： 利用Update语句对表中数据进行各种条件的修改。 知识点4： 利用Delete语句对表中数据进行各种条件的删除。 启发讲解 讨论归纳 多媒体 课件演示 思考 交流互动 记录笔记 示范 操作 操作1：示范表格中HTML设计提供页面元素。 操作2：示范使用CSS设计美化页面元素。 操作3：示范使用JavaScript设计处理页面元素的事件。 问题引导 操作演示 分析归纳 多媒体 系统演示 观摩思考 归纳总结 实战 训练 任务单5-7 表格美化的实现 动手实践

21、做中学 多媒体 真实系统环境 实践操作 巡视检查 评估 讨论 1.评估讨论实训任务的实施过程； 2.给出参考的解决方案； 3.展示讨论学生的解决方案； 4.考核学生结果。 教师启发 讨论归纳 分数激励 实训项目单 思考 结果演示 课堂 总结 1. thead与tbody在table中地位。 2. 样式类的合并与删除。 3. 遍历table及其tr，设置tr的各种样式。 4. 全局通用的函数的封装。 教师讲解 多媒体 课件演示 整理笔记 引导创新 课后作业 拓展实训5-7： 1．使用HTML标签设计表格数据。 2．使用json数组提供

22、表格数据。 3.使用json数组动态产生表格所需的各个节点。 教师讲授 多媒体 布置作业 提出要求 教学过程设计 知识6 DOM对象的属性节点（2学时） 主要步骤 教学内容 教学方法 教学手段 师生活动 问题 引入 表单元素验证的意义 教师讲授 引导文法 多媒体 思考 知识讲解 知识点1：DOM对象中属性节点的特点。 知识点2：DOM对象中属性节点的操作。 知识点3：DOM对象事件的引发及其意义。 启发讲解 讨论归纳 多媒体 课件演示 思考 交流互动 记录笔记 示范 操作 操作1：示范属性节点与子元素节点。 操作2

23、：演示属性节点的创建与添加操作。 操作3：演示DOM对象事件的引发。 问题引导 操作演示 分析归纳 多媒体 系统演示 观摩思考 归纳总结 实战 训练 任务单5-8 为DOM对象添加data属性，属性值为JSON格式的文本，解析该文本并显示其中的值。 动手实践 做中学 多媒体 真实系统环境 实践操作 巡视检查 评估 讨论 1. 评估讨论实训任务的实施过程； 2. 给出参考的解决方案； 3. 展示讨论学生的解决方案； 4. 考核学生结果。 教师启发 讨论归纳 分数激励 实训项目单 思考 结果演示 课堂 总结 1. 属性节点与子元素节点的

24、异同。 2. 属性节点的创建与元素节点的创建的异同。 3. DOM对象事件的引发与处理的异同。 教师讲解 多媒体 课件演示 整理笔记 引导创新 课后作业 拓展实训5-8： 1．用JS创建超链接并设置其href属性实现对“百度”的访问。 2．为超链接添加一个新属性data。 3. 为新属性data设置json格式的数据。 教师讲授 多媒体 布置作业 提出要求 教学过程设计 任务3 表单验证的设计（2学时） 主要步骤 教学内容 教学方法 教学手段 师生活动 问题 引入 如何实现客户端表单验证 教师讲授 引导文法 多媒体 思考

25、 知识讲解 知识点1：表单验证的意义。 知识点2：表单验证的类型及其实现。 知识点3：表单验证的函数定义、优化。 知识点4：表单验证类型的指定与调用。 启发讲解 讨论归纳 多媒体 课件演示 思考 交流互动 记录笔记 示范 操作 操作1：示范长度验证函数的定义与优化。 操作2：示范长度验证类型的指定与调用。 操作3：示范必填验证的定义与调用。 操作4：示范邮箱格式验证的定义与调用。 操作5：示范验证表单的建立。 操作6：示范表单验证脚本的编写。 问题引导 操作演示 分析归纳 多媒体 系统演示 观摩思考 归纳总结 实战 训练 任务单5-9

26、注册表单的验证 动手实践 做中学 多媒体 真实系统环境 实践操作 巡视检查 评估 讨论 1.评估讨论实训任务的实施过程； 2.给出参考的解决方案； 3.展示讨论学生的解决方案； 4.考核学生结果。 教师启发 讨论归纳 分数激励 实训项目单 思考 结果演示 课堂 总结 1. 表单验证函数的格式。 2. 提高表单验证函数的可重用性。 3. 由HTML元素的新建属性指定表单验证类型。 4. 通过表单验证脚本的调用实现表单验证。 教师讲解 多媒体 课件演示 整理笔记 引导创新 课后作业 拓展实训5-9： 1．实现日期格式的验证。 2．实现数字格式的验证。 3. 实现数值范围的验证。 教师讲授 多媒体 布置作业 提出要求