?? 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 + -