JavaScript初級(jí)教程(第三課)
更新時(shí)間:2007年04月05日 00:00:00 作者:
既然你已經(jīng)知道如何按你自己的意愿打開窗口,那么現(xiàn)在開始學(xué)習(xí)怎樣在窗口中操作一些事。在此之前你要學(xué)習(xí)一下JavaScript的文檔對(duì)象模型(DOM),首先,讓我們學(xué)一點(diǎn)“基于對(duì)象的編程”。
概述基于對(duì)象的編程
基于對(duì)象的編程 - 特別是JavaScript版本的 - 是比較容易理解的。其主旨是信息依據(jù)對(duì)象組織。JavaScript其優(yōu)越處之一在于其帶有一內(nèi)建式對(duì)象庫(kù)。例如,一個(gè)窗口即一個(gè)對(duì)象。無論何時(shí)我提到一個(gè)缺省的JavaScript庫(kù)對(duì)象,我將使用大寫(Window)。特定的情況(特定的窗口)將用小寫。
對(duì)象都有用以描述它們的屬性。窗口對(duì)象的其中一些屬性是它的名字,(即狀態(tài)條上的字),窗口文件的URL,及窗口文件本身。(其中包括單字,圖形及窗口中的超文本鏈接。)
在JavaScript 中缺省的窗口對(duì)象為 window.這里你可了解你將如何獲取缺省窗口的屬性。
var the_status = window.status;
這是說:找到稱為window 的status屬性,將之調(diào)用到變量the_status中。窗口的status特性包含了狀態(tài)條上出現(xiàn)的詞句。你也可事先設(shè)置它,像這樣:
window.status = "I'm monkeying around!";
這是一個(gè)使用狀態(tài)條的例子。
<a href="#" onMouseOver="window.status='Monkeys!';">Who do we love?</a>
這是說:“當(dāng)鼠標(biāo)移動(dòng)到這個(gè)鏈接上時(shí),改變狀態(tài)條?!?
對(duì)象的方法:
除了屬性之外,對(duì)象還具有“方法”。“方法”是對(duì)象所知的如何運(yùn)作的進(jìn)程。例如,窗口知道如何打開另一些窗口:
window.open("URL,""name,""features")。它告訴Javascript用窗口的open方式來打開一個(gè)新窗口。
因而,就象上例中,一個(gè)對(duì)象的“方法”也被稱為其獲取一個(gè)特性的方式:對(duì)象名,周期,而后是方式。主要的不同在于方法總在其后跟隨一對(duì)含有方式參數(shù)的圓括弧。甚至當(dāng)方法不調(diào)用參數(shù)時(shí),圓括弧也必須有的。還記得這個(gè)嗎?
var italic_hippy = hippy_monkey.italics();
對(duì)啦!字符串實(shí)際上就是對(duì)象, italics()即是字符對(duì)象的參數(shù)。
你已經(jīng)看了一些窗口方法的例子但還沒有了解它。對(duì)話框調(diào)用alert及prompt實(shí)際上也是窗口對(duì)象的方式。如果你調(diào)用:
window.alert("Viva la primate!");
你將看到對(duì)話框并讀到“Viva la primate!”我們直接能試試這個(gè)閃爍的窗口.
看起來好象有點(diǎn)傻,更好的效果可以參看調(diào)用其它窗口。
盡管將一個(gè)窗口模糊或聚焦并沒有多大意義,但有時(shí)候你確實(shí)需要將另一個(gè)窗口移到前臺(tái)。為了使用javascript實(shí)現(xiàn)窗口之間的交流,你需要對(duì)該窗口的一個(gè)引用。
獲取和使用一個(gè)窗口引用
首先,我打開一個(gè)窗口,為其賦予一個(gè)引用:
var new_window = window.open("hello.html","html_name","width=200,height=200");
該語句打開一個(gè)小窗口并將其賦值給變量new_window作為對(duì)該窗口的引用。變量可以包含數(shù)字和字符串,也可以包含對(duì)對(duì)象的引用,在本例中,對(duì)象是一個(gè)窗口?,F(xiàn)在變量new_window就可以象當(dāng)前窗口那樣使用。你可以象對(duì)窗口調(diào)用方法那樣對(duì)new_window調(diào)用方法。
下面的語句是一個(gè)對(duì)new_window調(diào)用方法的例子:
new_window.blur();
它實(shí)現(xiàn)的作用和上篇中的window.blur()一樣。
現(xiàn)在我們看看將新窗口移到前臺(tái)或移到后臺(tái)的兩個(gè)鏈接:
<a href="#" onMouseOver="new_window.focus();">Bring it forward</a>
<a href="#" onMouseOver="new_window.blur();">Put it backward</a>
現(xiàn)在我們已經(jīng)了解了:JavaScript包括缺省對(duì)象,例如窗口,對(duì)象具有用于描述對(duì)象的屬性,方法用于描述對(duì)象采取行動(dòng)的方法。
對(duì)象的屬性頁(yè)可以是對(duì)象。舉例來說:窗口有一個(gè)屬性叫做document,它用于引用到窗口中實(shí)際的HTML文件。該document屬性本身就是一個(gè)對(duì)象。在談到圖象掉換(image swap)的時(shí)候,我們見到過這樣的例子。你可以用下列語句作圖象掉換:
<a href="#" onMouseOver="window.document.the_image.src='button_d.gif';">change</a>
上述語句的意思是說:找到window的document屬性,找到the_image的src屬性并將其設(shè)置為圖象button_d.gif。這樣寫是因?yàn)榇翱冢╳indows)是對(duì)象,窗口內(nèi)的文件(documents)是對(duì)象,而文件(document)內(nèi)的圖象(images)頁(yè)是對(duì)象。
看起來似乎很復(fù)雜,但它的結(jié)構(gòu)很清楚。JavaScript的文檔對(duì)象模型(Document Object Model)描述了對(duì)象之間的等級(jí)關(guān)系。
在該教程中,我們只看到該等級(jí)關(guān)系的一部分。使你的網(wǎng)頁(yè)具有精彩動(dòng)感的大多數(shù)技巧都涉及到文件對(duì)象。文件對(duì)象內(nèi)容非常豐富,實(shí)際上應(yīng)該專門開一門教程將這個(gè)問題。在本課程中,我們
將集中談?wù)劥翱诘钠渌鼘傩浴?
其它窗口屬性主要和分割窗口有關(guān)。
在JavaScript中,對(duì)分割窗口的處理方法和其它窗口是一樣的。你只需利用javascript在一個(gè)出口里面修改另一個(gè)窗口外觀,你可以改變各個(gè)分割窗口的樣子。但你要記住,在一個(gè)窗口內(nèi)
的各個(gè)分割窗口實(shí)際上被當(dāng)作另外的幾個(gè)窗口來對(duì)待,因?yàn)榉指畲翱诳梢栽侔〉姆指畲翱凇R簿褪钦f,你有一個(gè)最高層的窗口,其中包含這第一級(jí)分割窗口,這個(gè)分割窗口實(shí)際上又是新的小窗口,小的窗口中又可以包含更小的分割窗口。但一般并不需將其搞得這么復(fù)雜。
下面是一個(gè)用javascript制作的分割窗口的例子。
首先,是分割窗口的窗框:
<frameset rows="25%,*">
<frame src="frames_example_controls.html" name="control_frame">
<frame src="blank.html" name="target_frame">
</frameset>
這和普通的分割窗口窗框是一樣的。你要記住給窗框內(nèi)的各個(gè)分割窗口命名。第一個(gè)分割窗口的名字是control_frame, 其中包含這加入了javascript的HTML網(wǎng)頁(yè)。第二個(gè)分割窗口的src="#",其中什么都不包含。
接下來,我們看看control_frame窗口內(nèi)的內(nèi)容。以下只是其中關(guān)鍵的一行:
<a href="#" onClick="top.target_frame.document.writeln('Monkey do!<br>');">Monkey see</a>
執(zhí)行該語句時(shí),JavaScript從窗口等級(jí)的最高層開始,該層中包含著分割窗口的窗框,從中發(fā)現(xiàn)名叫target_frame的分割窗口,由于該分割窗口是也一個(gè)窗口,所它具有窗口的文件(document)屬性。JavaScript找到其document屬性,并調(diào)用writeln()方法。其執(zhí)行結(jié)果是在文件中寫出"Monkey do!" 。writeln()是文件(document)對(duì)象的方法,所以我們必須寫document.writeln(),而不只是 writeln()。
在上個(gè)例子中,我們用到了內(nèi)置變量top,該變量永遠(yuǎn)指分割窗口最高層次的瀏覽器窗口。如果你計(jì)劃從分割窗口的最高層次開始執(zhí)行命令,你就可以用top變量。
另一個(gè)內(nèi)置變量是parent, 指的是包含當(dāng)前分割窗口的母窗口。如果在一個(gè)窗口內(nèi)有分割窗口,而在其中的一個(gè)分割窗口中又包含著分割窗口,則第2層的分割窗口可以用parent變量引用包含它的母分割窗口。
相關(guān)文章
原生的強(qiáng)大DOM選擇器querySelector介紹
這篇文章主要介紹了原生的強(qiáng)大DOM選擇器querySelector一些相關(guān)知識(shí),需要的朋友可以參考下2016-12-12js數(shù)組直接賦值的問題(js數(shù)組的淺拷貝與深拷貝方法)
JS數(shù)組在直接賦值時(shí)屬于數(shù)組的淺拷貝,新數(shù)組保存的是原數(shù)據(jù)的內(nèi)存地址,修改新數(shù)組或原數(shù)組其中一個(gè)數(shù)組,另一個(gè)數(shù)組也會(huì)相應(yīng)的變化,數(shù)組的直接賦值屬于數(shù)組的淺拷貝,JS存儲(chǔ)對(duì)象都是存內(nèi)存地址2022-10-10