网页设计与制作(HTML+CSS+JavaScript)单元 JavaScript编程

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

2、ript的概念与作用；（2） 能运用JavaScript语言基础解决简单的实际问题；（3） 能应用浏览器内置对象；（4） 能实现页面中标签的访问与属性的设置；（5） 能使用DOM对象实现页面元素的动态处理；（6） 能进行各类表单的验证。教学内容（1） JavaScript语言基础；（2） DOM的结构与DOM节点的操作。重点：（1） JavaScript语言基础；（2） DOM树型结构；（3） DOM节点对象的属性方法事件；（4） 表单验证。难点：（1） JavaScript表达式与程序控制结构；（2） DOM树的构建；（3） DOM节点对象的事件处理；（4）表单验证的封装。课后作业JavaS

3、cript折叠卡的设计；JavaScript选项卡的设计。教学过程设计知识1 JavaScript语言基础（4学时）主要步骤教学内容教学方法教学手段师生活动问题 引入Javascript在DHTML中的作用教师讲授引导文法多媒体教师：提问学生：讨论知识讲解知识点1： Javascript程序编辑与运行。知识点2： 常量、变量、数组、运算符和表达式。知识点3： 程序控制结构。启发讲解讨论归纳多媒体课件演示思考交流互动记录笔记示范 操作操作1：创建页面内的Javascript程序。操作2：验证各种运算符与表达式。操作3：数组方法的使用。操作4：使用程序控制结构编写JS程序。问题引导操作演示分析归纳

4、多媒体系统演示观摩思考归纳总结实战 训练任务单5-1 使用数组产生无序列表ul-li动手实践做中学多媒体真实系统环境实践操作巡视检查评估讨论1.评估讨论实训任务完成的速度；2.评估讨论实训任务完成的正确率；3.展示讨论学生的解决方案；4.考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结1.变量与数组的关系。2.变量与数组的定义、作用域与使用。3.switch语句的结构。4.直到型循环与当型循环的异同。5.break与continue的异同。教师讲解多媒体课件演示整理笔记引导创新课后作业拓展实训5-1：1.定义含多个超链接数据全局数组；2.使用JS循环语句由数组建立多个超链接

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

6、问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战 训练任务单5-2 将一维数组和二维数组数据以无序列表的超链接形式输出。动手实践做中学多媒体真实系统环境实践操作巡视检查评估讨论1. 评估讨论实训任务的实施过程；2. 给出参考的解决方案；3. 展示讨论学生的解决方案；4. 考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结1. 函数的作用。2. 有参函数作用。3. function关键字的作用。4. 类的成员类型与定义方法。5. 构造函数的调用方法。教师讲解多媒体课件演示整理笔记引导创新课后作业拓展实训5-2：1.将月份转换为季节名称。2.按照时间产生“早上好”、“你

7、好”、“晚上好”等问候。3.定义二维点类Point2D,实现点的数据存储和信息显示。教师讲授多媒体布置作业提出要求教学过程设计知识3 浏览器内置对象与页面标签（2学时）主要步骤教学内容教学方法教学手段师生活动问题 引入网页与浏览器的关系教师讲授引导文法 多媒体思考知识讲解知识点1：浏览器信息（navigator）对象。知识点2：窗口（window）对象。知识点3：屏幕（screen）对象。知识点4：历史记录（history）对象。知识点5：文档（document）对象。知识点6：cookie对象。启发讲解讨论归纳多媒体课件演示思考交流互动记录笔记示范 操作操作1：示范navigator对象的属

8、性。操作2：演示显示一个无菜单、无工具条、无滚动条的窗口。操作3：演示screen对象的属性的使用。操作4：演示页面前进与后退。操作5：演示表单及其元素数目的统计。操作6：演示 cookie对象的读写。问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战 训练任务单5-3 设计登录界面并输出表单元素的值（提交）动手实践做中学多媒体真实系统环境实践操作巡视检查评估讨论1.评估讨论实训任务的实施过程；2.给出参考的解决方案；3.展示讨论学生的解决方案；4.考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结1.浏览器内置对象类型。2.浏览器内置对象在页面编程作用。3.wind

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

10、方法访问表单及其控件。知识点4：通过属性为页面标签对象和表单对象指派事件。启发讲解讨论归纳多媒体课件演示思考交流互动记录笔记示范 操作操作1：示范使用document的getElementById方法实现加法器。操作2：示范使用document的；getElementsByName方法实现加法器操作3：示范使用表单及其控件实现加法器。操作4：演示表单元素的最重要的属性访问。操作5：演示事件与事件参数的使用问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战 训练任务单5-4 建立图形按钮并实现一维菜单。动手实践做中学多媒体真实系统环境实践操作巡视检查评估讨论1.评估讨论实训任务的实施过程

11、；2.给出参考的解决方案；3.展示讨论学生的解决方案；4.考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结1.三种访问页面元素的方法使用场合的异同。2.表单元素id与name属性的异同。3.表单元素与HTML标签作用的异同。4.表单元素的提交到服务端的重要属性。5.设置并处理HTML标签对象的事件。教师讲解多媒体课件演示整理笔记引导创新课后作业拓展实训5-4：1完成登录或注册界面，显示表单提交的结果。2禁止文本框输入单引号。3. 使用事件实现DIV移入、移出的文本前景色的变化。教师讲授多媒体布置作业提出要求教学过程设计任务1 下拉菜单的设计（2学时）主要步骤教学内容教学方法

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

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

14、师讲授引导文法 多媒体思考知识讲解知识点1： DOM对象结构。知识点2： DOM对象节点类型。知识点3： DOM对象节点及其属性的访问。知识点4：DOM对象节点的创建与修改。知识点5：DOM节点删除、替换与复制操作。知识点6： DOM节点对象的事件处理。启发讲解讨论归纳多媒体课件演示思考交流互动记录笔记示范 操作操作1：示范DOM节点树的构成。操作2：演示页面节点的访问操作操作3：演示属性节点的创建与属性值的读写操作。操作4：演示前插节点与后插节点的操作。操作5：演示节点删除、替换与复制操作。操作6：DOM节点对象的鼠标事件。问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战 训练任务

15、单5-6 使用DOM节点构造table节点树。动手实践做中学多媒体真实系统环境实践操作巡视检查评估讨论1.评估讨论实训任务的实施过程；2.给出参考的解决方案；3.展示讨论学生的解决方案；4.考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结1.节点类型的表示。2.属性节点与元素节点的异同。3.节点的前插与后插。4.样式的添加与移出。教师讲解多媒体课件演示整理笔记引导创新课后作业拓展实训5-6：1页面节点的遍历；2编写改进后节点前插与后插的函数；3. 移入或移出时样式的添加与移除。教师讲授多媒体布置作业提出要求教学过程设计任务2 表格美化的设计（2学时）主要步骤教学内容教学方法

16、教学手段师生活动问题 引入表格美化及其意义教师讲授引导文法 多媒体思考知识讲解知识点1： 利用Insert和Select into语句向表增加一条或多条数据。知识点2： 利用Insert Select将一个用户表的数据导出到另一个表中。知识点3： 利用Update语句对表中数据进行各种条件的修改。知识点4： 利用Delete语句对表中数据进行各种条件的删除。启发讲解讨论归纳多媒体课件演示思考交流互动记录笔记示范 操作操作1：示范表格中HTML设计提供页面元素。操作2：示范使用CSS设计美化页面元素。操作3：示范使用JavaScript设计处理页面元素的事件。问题引导操作演示分析归纳多媒体系统演

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

18、授多媒体布置作业提出要求教学过程设计知识6 DOM对象的属性节点（2学时）主要步骤教学内容教学方法教学手段师生活动问题 引入表单元素验证的意义教师讲授引导文法 多媒体思考知识讲解知识点1：DOM对象中属性节点的特点。知识点2：DOM对象中属性节点的操作。知识点3：DOM对象事件的引发及其意义。启发讲解讨论归纳多媒体课件演示思考交流互动记录笔记示范 操作操作1：示范属性节点与子元素节点。操作2：演示属性节点的创建与添加操作。操作3：演示DOM对象事件的引发。问题引导操作演示分析归纳多媒体系统演示观摩思考归纳总结实战 训练任务单5-8 为DOM对象添加data属性，属性值为JSON格式的文本，解析该文本并显示其中的值。动手实践做中学多媒体真实系统环境实践操作巡视检查评估讨论1. 评估讨论实训任务的实施过程；2. 给出参考的解决方案；3. 展示讨论学生的解决方案；4. 考核学生结果。教师启发讨论归纳分数激励实训项目单思考结果演示课堂总结1. 属性节点与子元素节点的异同。2. 属性节点的创建与元素节点的创建的异同。3. DOM对象事件的引发与处理的异同。教师讲解多媒体课件演示整理笔记引导创新课后作业拓展实训5-8：1用JS创建超链接并设置其href属性实现对“百度”的访问。2为超链接添加一个新属性