📄 javascript6.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
a{ text-decoration: none }
p{ line-height:140% }
.text{ font-size: 9pt }
.text{ text-align:justify }
.text11{ font-size: 11pt }
.text11{ text-align:justify }
-->
</style>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>网页教程－JavaScript技术讲座:第六讲 使用内部对象系统</title>
</head>
<body>
<p align="center">
</p>
<p><span class="text">您现在的位置：<a href="javascript:if(confirm('http://www.4gee.com/Index.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.4gee.com/Index.htm'" tppabs="http://www.4gee.com/Index.htm">主页</a>－<a
href="javascript:if(confirm('http://www.4gee.com/colleges/Index.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.4gee.com/colleges/Index.htm'" tppabs="http://www.4gee.com/colleges/Index.htm">网络教室</a>－<a href="Index.htm" tppabs="http://www.4gee.com/colleges/homepages/Index.htm">主页工厂</a>－JavaScript技术讲座:第六讲
使用内部对象系统</span></p>
<p align="center"><small><a href="JavaScript5.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript5.htm">上一页</a>
<a href="JavaScript7.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript7.htm">下一页</a></small></p>
<table border="0" width="100%">
<tr>
<td width="100%"><p align="center"><span style="color: rgb(252,177,3)" class="text11">JavaScript技术讲座<br>
第六讲 使用内部对象系统</span></td>
</tr>
</table>
<table border="0" width="100%">
<tr>
<td width="100%"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 使用浏览器的内部对象系统,
可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。</font></span><p><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">一、浏览器对象层次及其主要作用</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 除了前面提到过的文档document对象外，Navigator浏览器中还提供了窗口（Window）对象以及历史（History）和位置（Location）对象。</font></span><dir>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 浏览器对象(Navigator)</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">提供有关浏览器的信息</font></span></p>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 窗口对象(Windows)</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。</font></span></p>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 位置对象(Location)</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。</font></span></p>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 历史对象(History)</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">History对象提供了与历史清单有关的信息。</font></span></p>
<p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 文档对象(Document) </font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。</font></span></p>
<p> </p>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 编程人员利用这些对象，可以对WWW浏览器环境中的事件进行控制并作出处理。在JavaScript中提供了非常丰富的内部方法和属性,从而减轻了编程人员的工作,提高编程效率。这正是基于对象与面向对象的根本区别所在。在这些对象系统中,文档对象属于非常重要的,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。</font></span></p>
<p> </p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">二、文档对象功能及其作用</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 在Navigator浏览器中，document文档对象是核心是，同时也是最重要的。见图6-1所示。</font></span></p>
<table border="1" borderColor="#000000" cellPadding="7" cellSpacing="1" width="523">
<TBODY>
<tr>
<td vAlign="top" width="20%"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN">Links</font> </span></td>
<td vAlign="top" width="18%"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN">Anchor</font> </span></td>
<td vAlign="top" width="18%"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN">Form</font> </span></td>
<td vAlign="top" width="20%"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN">Method</font> </span></td>
<td vAlign="top" width="23%"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN">Prop</font> </span></td>
</tr>
<tr>
<td vAlign="top" width="20%"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN">链接对象</font> </span></td>
<td vAlign="top" width="18%"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN">锚对象</font> </span></td>
<td vAlign="top" width="18%"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN">窗体对象</font> </span></td>
<td vAlign="top" width="20%"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN">方法</font> </span></td>
<td vAlign="top" width="23%"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN">对象</font> </span></td>
</tr>
</TBODY>
</table>
<dir>
<dir>
<dir>
<dir>
<dir>
<dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">图6－1 document对象
</font></span></p>
</dir>
</dir>
</dir>
</dir>
</dir>
</dir>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 从图6-1中可以看出，document对象的主要作用就是把这些基本的元素（如links,anchor等）包装起来，提供给编程人员使用。从另一个角度看，document对象中又是由属性和方法组成。</font></span></p>
<p> </p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">１、document中三个主要的对象</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">在document中主要有：links,anchor,form等三个最重要的对象：</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">（１）anchor锚对象：</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">anchor对象指的是<A
Name=...> </A>标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">（２）链接links对象</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> link对象指的是用<A
Href=...> </A>标记的连接一个超文本或超媒体的元素作为一个特定的URL。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">（３）窗体（Form）对象</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 窗体对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。通过document.
Forms[]数组来使得在同一个页面上可以有多个相同的窗体,使用forms[]数组要比使用窗体名字要方便得多。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">例:下面就是一个使用窗体数组和窗体名字的例子。该程序使得两个窗体中的字段内容保持一致。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Test6_1.htm</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Html></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><head></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></head></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><body></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><form ></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><input
type=text onChange="document.my.elements[0].value=this.value;" ></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></form></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><form
NAME="my"></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><input
type=text onChange="document.forms[0].elements[0].value=this.value;"></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></form></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></body></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></html></font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">其中用了OnChnge事件(当窗体内容改变时激发)。第一个使用窗体名字标识my,第二个使用窗体数组Forms[]。其效果是一致。</font></span></p>
<p> </p>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -