JavaScript程序设计基础教程（慕课版）（第2版） 教案 单元7、8 document对象、表单.docx

PAGE3

PAGE

单元7document对象

课程名称

JavaScript程序设计

项目名称

document对象

任务名称

document对象

课时

2

项目性质

□演示性□验证性□设计性√综合性

授课班级

授课日期

授课地点

教学目标

能力目标：

具备运用document对象属性和方法的能力，能够掌握异步加载资源的方法

知识目标：

1.掌握document对象属性和方法

2.掌握document对象集合

3.掌握document对象与Window对象的区别

素质目标：

1.培养学生信息搜集能力

2.培养学生团结合作、互帮互助的能力

教学内容

1.document对象的概念

2.document对象属性和方法

（1）使用close()、open()、write()和writein()方法动态创建在浏览器窗口中显示的文档

（2）学生动手操作

3.document对象集合

4.document对象与Window对象的区别

5.教师讲解涉及的知识点

6.实训与小结

教学重点

document对象属性和方法

教学难点

document对象与Window对象的区别

教学准备

1.装有Chrome浏览器或者Firefox浏览器，并且安装有WAMP的电脑

2.教学课件PPT

3.教材：《JavaScript程序设计基础教程（微课版）》刘刚人民邮电出版社

作业设计

用JavaScript编写一个动态生成文档示例。

教学过程

教学

环节

教学内容与过程

（教学内容、教学方法、组织形式、教学手段）

课前组织

做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。

课程

说明

【课前说明】

分别从document对象属性和方法、document对象集合、document对象与Window对象的区别等方面来实现解决问题的能力。

【目的】

使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。掌握document对象属性和方法的应用。

课程

内容

描述

一、document对象属性

document对象定义了如下属性：document.title——设置文档标题；document.bgColor——设置页面背景色；document.fgColor——设置前景色（文本颜色）；document.linkColor——未单击过的链接颜色；document.alinkColor——激活链接（焦点在此链接上）的颜色；document.vlinkColor——已单击过的链接颜色；document.URL——设置URL属性从而在同一窗口打开另一网页；document.location——等价于属性URL；document.referrer——文档的URL；document.lastModified——一个字符串，包含文档的修改日期；document.cookie——设置和读出cookie；document.charset——设置字符集，简体中文为gb2312。

二、document对象方法

document对象定义了4个关键方法。close()：关闭或结束open()方法打开的文档；open()：产生一个新文档，擦掉已有的文档内容；write()：把文本附加到当前打开的文档；writein()：把文本输出到当前打开的文档，并附加一个换行符。

案例：

使用write()方法显示当前日期和文档的最后修改日期。

HTML

HEAD

TITLEdocuments对象方法/TITLE

/HEAD

body

script

varcurrent=newDate();

document.write(当前日期：+current.toString()+/br);

document.write(文档最后修改日期：+document.lastModified);

/script

/body

/HTML

三、document对象集合

document对象指向特定元素集合的属性有如下几个。

?document.anchors[]：Anchor对象的一个数组，代表文档中的锚。

?document.applets[]：Applet对象的一个数组，代表文档中的Java小程序。

?document.forms[]：Form对象的一个数组，代表文档中所有的form元素。

?document.images[]：Image对象的一个数组，代表文档中所有的img元素。

?document.links[]：Link对象的一个数组，