电竞比分网-中国电竞赛事及体育赛事平台

分享

JavaScript教程--從入門到精通 5

 東成西就 2006-01-08
JavaScript對象系統(tǒng)的使用
 

  使用瀏覽器的內(nèi)部對象系統(tǒng), 可實(shí)現(xiàn)與HTML文檔進(jìn)行交互。它的作用是將相關(guān)元素組織包裝起來,提供給程序設(shè)計(jì)人員使用,從而減輕編程人的勞動,提高設(shè)計(jì)Web頁面的能力。

一、瀏覽器對象層次及其主要作用
  除了前面提到過的文檔document對象外,Navigator瀏覽器中還提供了窗口(Window)對象以及歷史(History)和位置(Location)對象。
  瀏覽器對象(Navigator)
    提供有關(guān)瀏覽器的信息
  窗口對象(Windows)
    Window對象處于對象層次的最頂端,它提供了處理Navigator窗口的方法和屬性。
  位置對象(Location)
    Location對象提供了與當(dāng)前打開的URL一起工作的方法和屬性,它是一個靜態(tài)的對象。
  歷史對象(History)
    History對象提供了與歷史清單有關(guān)的信息。
  文檔對象(Document)
    document對象包含了與文檔元素(elements)一起工作的對象,它將這些元素封裝起來供編程人員使用。
  編程人員利用這些對象,可以對WWW瀏覽器環(huán)境中的事件進(jìn)行控制并作出處理。在JavaScript中提供了非常豐富的內(nèi)部方法和屬性,從而減輕了編程人員的工作,提高編程效率。這正是基于對象與面向?qū)ο蟮母緟^(qū)別所在。在這些對象系統(tǒng)中,文檔對象屬于非常重要的,它位于最低層,但對于我們實(shí)現(xiàn)Web頁面信息交互起作關(guān)鍵作用。因而它是對象系統(tǒng)的核心部分。
 
二、文檔對象功能及其作用
  在Navigator瀏覽器中,document文檔對象是核心是,同時也是最重要的。見表6-1所示。

Links Anchor Form Method Prop
鏈接對象 錨對象 窗體對象 方法 對象

表6-1 document對象

  從表6-1中可以看出,document對象的主要作用就是把這些基本的元素(如links,anchor等)包裝起來,提供給編程人員使用。從另一個角度看,document對象中又是由屬性和方法組成。
 
1、document中三個主要的對象
在document中主要有:links,anchor,form等三個最重要的對象:
(1)anchor錨對象:
anchor對象指的是<A Name=...> </A>標(biāo)識在HTML源碼中存在時產(chǎn)生的對象。它包含著文檔中所有的anchors信息。
(2)鏈接links對象
  link對象指的是用<A Href=...> </A>標(biāo)記的連接一個超文本或超媒體的元素作為一個特定的URL。
(3)窗體(Form)對象
  窗體對象是文檔對象的一個元素,它含有多種格式的對象儲存信息,使用它可以在JavaScript腳本中編寫程序進(jìn)行文字輸入,并可以用來動態(tài)改變文檔的行為。通過document. Forms[]數(shù)組來使得在同一個頁面上可以有多個相同的窗體,使用forms[]數(shù)組要比使用窗體名字要方便得多。
例:下面就是一個使用窗體數(shù)組和窗體名字的例子。該程序使得兩個窗體中的字段內(nèi)容保持一致。
Test6_1.htm
<Html>
<head>
</head>
<body>
<form >
<input type=text onChange="document.my.elements[0].value=this.value;" >
</form>
<form NAME="my">
<input type=text onChange="document.forms[0].elements[0].value=this.value;">
</form>
</body>
</html>
  其中用了OnChnge事件(當(dāng)窗體內(nèi)容改變時激發(fā))。第一個使用窗體名字標(biāo)識my,第二個使用窗體數(shù)組Forms[]。其效果是一致。
 
2、文檔對象中的attribute屬性
  document對象中的attribute屬性,主要用于在引用Href標(biāo)識時,控制著有關(guān)顏色的格式和有關(guān)文檔標(biāo)題、文檔原文件的URL以及文檔最后更新的日期。這部分元素的主要含義如下:
(1)鏈接顏色:alinkcolor
這個元素主要用于,當(dāng)選取一個鏈接時,鏈接對象本身的顏色就按alinkcolo r指定改變。
(2)鏈接顏色:linkcolor
當(dāng)用戶使用<A Href=...> Text string </A>鏈接后,Textstring的顏色就會按Linkcolor所指定的顏色更新。
(3)瀏覽過后的顏色:VlinkColor
該屬性表示的是已被瀏覽存儲為已瀏覽過的鏈接顏色。
(4)背景顏色:bgcolor
該元素包含文檔背景的顏色。
(5)前景顏色:Fgcolor
該元素包含HTML文檔中文本的前景顏色。
 
3、文檔對象的基本元素
(1)窗體屬性:
  窗體屬性是與HTML文檔中<Form>...</Form>相對應(yīng)的一組對象在HTML文檔所創(chuàng)建的窗體數(shù),由length指定。通過document.forms.length反映該文檔中所創(chuàng)建的窗體數(shù)目。
(2)錨屬性:anchors
  該屬性中,包含了HTML文檔的所有<A> </A>標(biāo)記為Name=...的語句標(biāo)識。所有“錨”的數(shù)目保存在document.anchors.length中。
(3)鏈接屬性:links
  鏈接屬性是指在文檔中<A>...</A>的由Href=...指定的數(shù)目,其鏈接數(shù)目保存在document.links.length中。

三、范例
例1:下面我們通過一個例子來說明文檔對象的綜合應(yīng)用。輸出結(jié)果見圖6-2所示。
Test6_2.htm
<html>
<head>
</HEAD>
<BOdy>
<Form Name="mytable">
請輸入數(shù)據(jù):
<Input Type="text" Name="text1" Value="">
</Form>
<A name="Link1" href="test31.htm">鏈接到第一個文本</a><br>
<A name="Link2" href="test32.htm">鏈接到第二個文本</a><br>
<A name="Link2" href="test33.htm">鏈接到第三個文本</a><br>
<A href="#Link1">第一錨點(diǎn)</a>
<A href="#Link2">第二錨點(diǎn)</a>
<A Href="#Link3">第三錨點(diǎn)</a>
<BR>
<Script Language="JavaScript">
document.write("文檔有"+document.links.length+"個鏈接"+"<br>");
document.write("文檔有"+document.anchors.length+"個錨點(diǎn)"+"<br>");
document.write("文檔有"+document.forms.length+"個窗體");
</script>
</body>
</HTML>

 
圖6-2

 
例子2:下列程序隨機(jī)產(chǎn)生每日一語。
test6_3.html
<HTML>
<HEAD>
<script Language="JavaScript">
<!--
tips = new Array(6);
tips[0]="每日一語(1)";
tips[1]="每日一語(2)";
tips[2]="每日一語(3)";
tips[3]="每日一語(4)";
tips[4]="每日一語(5)";
tips[5]="每日一語(6)";
index = Math.floor(Math.random() * tips.length);
document.write("<FONT SIZE=8 COLOR=DARKBLUE>" + tips[index]+"</FONT>");
</Script>
</HEAD>
</BODY>
</HTML>

輸出結(jié)果見圖6-3所示。
 
圖6-3

    本講主要介紹了JavaScript對象系統(tǒng)的使用方法,其中重點(diǎn)介紹了文檔對象及使用。

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多