JavaScript 對象

什麼是對象?

顧名思義,JavaScript 是居於 Java 程序設計語言而建立起來的腳本語言,兩者都是面向對象的 (object-oriented),我們並不想深入探討面向對象程序設計 (OOP),但是爲了你能夠更好地瞭解 JavaScript 語言,我們希望你能夠知道一些與對象有關的術語和基本概念。

JavaScript 所處理的每一個對象都是屬於一個類 (class) ,類裏邊定義了組成對象的數據、屬性、方法(即是類裏邊的一些函數)等,使用類可以增加程序代碼的複用性,這在一種程序語言中是很重要的,因爲這樣可以避免重複開發!

你可以將字符串、整數等數據類型看作是一個對象,當你定義一個變量的時候,你就創建了一個對象實例 (通常簡稱 “對象”),你可以創建很多對象實例,使它們都屬於同一個類,也即是相同的對象,比如說,“”是一個對象(類),而每一個人都是“人”這個對象(類)中的一個對象實例。創建一個對象實例時使用 new 運算符:

var text = new String("This is my text.");
var max = new Number(4.02);
var today = new Date(); // Date() 是 JavaScript 的內建對象類
new
運算符用來調出對象的數據結構(包括對象的屬性、方法),這是用來創建一個對象實例的方法,同時還對對象實例的屬性進行初始化。有一些對象 (例如 Date 對象) 擁有多種數據結構,那到底 JavaScript 會爲你創建哪一種數據結構呢?這就要看你在使用 new 創建對象實例的時候傳的是什麼參數了。就以 Date 對象爲例吧,如果在創建時不傳遞任何參數,則會創建一個當前系統日期時間的對象實例,就像上邊的例子中的一樣;但是如果你在創建對象實例時向 Date 類傳遞了 year(年)、month(月)、date(日) 和 time (時間) 的值的話,JavaScript 將會根據這些值爲你創建一個對象實例,而不再是當前系統時間的對象實例。

 

一個對象既可以是 core 核心對象 (下邊將會提到),又可以是另外一些 JavaScript 的預定義對象 (例如一個圖片 Image 對象),甚至可以是你創建的一個全新的對象。

【對象的屬性 (Propertie)】

在 JavaScript 中使用英文句號 (.) 來訪問對象的屬性值:

var text = new String("A long time ago...");
var len = text.length; // len 爲字符串對象 text 的字符串長度,length 爲字符串對象的字串長度屬性。
通常情況下,你可以直接改變某個對象的屬性,例如,爲了動態的改變頁面的背景顏色,你可以直接通過動態地改變 document 對象的 bgColor 屬性來實現,請看 在線示例

 

然而,有一些屬性你是不能直接修改的,例如字符串對象 Stringlength 屬性,但是如果你使用 String 對象的 concat() 方法合併兩個字符串的話,length 屬性也就會自動的改變了,但這種改變是系統自動實現的,而不是你直接通過賦值改變的。

【對象的方法 (Method)】

同樣的,對象的方法也是通過英文句號 (.) 來執行的,在方法後邊緊跟一對圓括號(),而在圓括號裏邊包含了使用該方法所需要的參數:

var errorMsg = new String("");
var msgHeader = new String("Error: ");
var errorCode = new String("X001");
errorMsg = msgHeader.concat(errorCode);
此例執行的結果:變量 errorMsg 的值爲 "Error: X001"。

 

JavaScript 中的對象

JavaScript 包含很多預定義對象,一些是可以用來表示不同的數據類型 (如數字和字符串對象),而另一些是在網頁中定義的與 HTML 標記密切相關的對象 (如超鏈接和圖片對象)。

【核心 (Core) 對象】

在 JavaScript 中可供使用的最基本的數據類型被稱爲核心 (core) 對象,這些對象是:

  • Array - 數組對象;
  • Boolean - 布爾對象;
  • Date - 時間對象;
  • Number - 數值對象,可以是整數和浮點數;
  • String - 字符串對象,可以是單引號 (‘) 或雙引號 (") 括起來的任何字符串。

對於上邊給出的對象,你都可以使用 new 操作符創建相應的對象實例,其實你也可以隱含地聲明/創建 BooleanNumberString 這幾個對象,就像下邊那樣:

var found = false;
var max = 47.9;
var name = "Fred"; // 等價於:var name = new String("Fred");

【文檔中的對象模塊】

當頁面已經被下載到客戶端時,瀏覽器就會創建幾個用來存儲頁面信息和頁面內容的對象。這些對象構成了一個樹狀結構 (對象的引用也是根據這種樹一層一層引用的,引用時使用 “.” 號),在這棵“樹”中,最高層的對象是 window 對象,window 對象具有以下的屬性:

  • location - 頁面的地址 (URL) 信息;
  • history - 包括了當前打開的這個瀏覽器訪問過的地址 (URL) 列表;
  • frames - 如果頁面使用了幀 (frame) 的話,這個對象包含了幀的版面佈局的信息以及每一個幀所對應的窗口 (window) 對象;
  • document - 包含了頁面的內容信息;
  • screen - 描述屏幕的尺寸和顏色 (僅限於 Netscape 4.0)。

在這同時,瀏覽器還會創建另一個高層的對象叫 navigator,這個對象包含了瀏覽器的類型、版本、安裝的插件等等信息。

就像前邊說的一樣,使用英文的句號 (.) 來引用上邊的對象以及對象的屬性,例如,要獲得當前頁面的地址 (URL) 信息,我們可以這樣用:

var url = window.location.href;

此外,還有一個很方便的東東產生了,那就是瀏覽器在創建 window navigator 對象的同時,也會將 window 的屬性 locationhistorydocument 創建爲高層對象,所以對於上邊的語句,我們還可以簡便的寫成:

var url = location.href;

下邊就簡單的介紹一下 JavaScript 中爲瀏覽器提供的對象。

window 對象】

window 對象提供了一些很有用的方法,使用這些方法你可以在瀏覽器中彈處對話框 (pop-up):

  • alert() 顯示一個消息框,只有一個 ‘OK‘ (‘確定‘) 按鈕;
  • confirm() 顯示一個對話框,帶有 ‘OK‘ (‘確定‘) 和 ‘Cancel‘ (‘取消‘) 按鈕;
  • prompt() 顯示一個可以讓用戶輸入信息的對話框。

看一下這個 在線示例 就一切都明白了。

我們在調試 JavaScript 腳本代碼的時候經常會使用 alert() 方法,你可以將這個函數放在你的代碼中,讓它顯示出所要調試的變量或對象的值,這對於在調試代碼時跟蹤錯誤是很重要的。

window 提供的另一些方法是打開、關閉窗口或者改變窗口的顯示方式,我們將在第三部分講到這幾個方法的使用。

另外,window 對象中還有一個經常被用到的方法:setTimeout() 方法。此方法可以讓 JavaScript 每隔一段間隔時間執行一段代碼,代碼的執行遵循事件句柄中的規則,也就是說,在這個函數中,每隔一段時間就會執行幾條 JavaScript 代碼 (每條代碼使用“;”隔開) 或者執行調用的函數:

setTimeout("count++; alert(‘Hello world!‘);", 500);

上邊的代碼將會每隔半秒鐘 (500毫秒) 執行一次 “count++; alert(‘Hello world‘)” 代碼,此代碼包含了兩條 JavaScript 語句。也即是說,setTimeout() 方法有兩個參數,第一個參數是想要執行的代碼或函數 (在此例中是代碼:count++; alert(‘Hello world‘)),第二個函數是間隔時間,單位是毫秒 (在此例中是500毫秒)。

setTimeout() 方法的返回值是一個唯一的數值,這個數值有什麼用呢?如果你想要終止 setTimeout() 方法的執行,那就必須使用 clearTimeout() 方法來終止,而使用這個方法的時候,系統必須知道你到底要終止的是哪一個 setTimeout() 方法 (因爲你可能同時調用了好幾個 setTimeout() 方法),這樣 clearTimeout() 方法就需要一個參數,這個參數就是 setTimeout() 方法的返回值 (數值),用這個數值來唯一確定結束哪一個 setTimeout() 方法:

var id = setTimeout("myFunction(arg1, arg2);", 3000);

...其它的 JavaScript 語句...

if (error)
clearTimeout(id); // 出現錯誤時終止 setTimeout() 方法的執行
 

需要注意的是,setTimeout() 方法並不會讓瀏覽器暫停執行跟在此方法後的程序代碼,瀏覽器會一直順着每行代碼往下執行,只不過是其它代碼只執行一次,而 setTimeout() 方法則是隔一段時間執行一次。在 Netscape 4.0 中,你還可以通過使用 setInterval() 方法重複執行一段代碼或函數,相對應的使用 clearInterval() 方法終止前一個方法的執行,這兩個方法與 setTimeout()clearTimeout() 方法是一樣的,這裏就不再多說了。

看一下這個 在線示例 吧,這個例子通過使用 setTimeout() 方法重複的調用一個函數,通過這個函數來獲得當前的時間,並將時間顯示在頁面上,看起來就像是一個正在走的時鐘。

frame 對象】

frame 即是幀,每一個幀對應一個窗口,每一個幀都是由一個 window 對象來指定的,當有一個頁面使用了幀設置 (frameset) 的時候,主窗口 (又稱爲母窗口或母幀) 的 window 對象就包含了一個名爲 frames 的數組,這個數組的每一個元素對應一個子幀 (或叫子窗口) ,而每一個子幀都對應一個 window 對象。

那些子窗口/子幀也可以通過使用幀設置 (frameset) 擁有子窗口 (對於最頂層的窗口來說就是孫子窗口了),這樣的話它們也就同時擁有了對應於它們的子窗口的數組 frames 。 在某一窗口/幀的頁面上使用 window.parent 或者只是 parent 即可指向此窗口的父窗口對象。同理,可以使用 window.parent.parent 指向此窗口的父窗口的父窗口,而使用 window.top 則可以直接指向所有幀中最高層的父窗口。

這樣你就可以在這個幀裏使用另一個幀裏的數據或調用另一個幀裏的函數了,詳細講述請參考第三部分。

document 對象】

document 對象可能將會是你使用的最多的對象之一。此對象包含了與頁面內容相關的幾個屬性,請看:

  • bgColor - 頁面的背景色;
  • fgColor - 頁面的前景色,即文本的顏色;
  • linkColor - 超文本鏈接的顏色;
  • lastModified - 此頁面 (HTML 文件) 最後被修改的時間;
  • p_w_picpaths - 圖片對象組成的數組,數組中的每一個元素對應於網頁中的每一個 <IMG> 標記,數組元素對應的順序是在 HTML 文件代碼中標記出現的先後順序;
  • forms - 表單 (form) 對象組成的數組,數組中的每一個元素對應於網頁中的每一個 <FORM> 標記,數組元素對應的順序是在 HTML 文件代碼中標記出現的先後順序;
  • links - 超文本鏈接對象組成的數組,數組中的每一個元素對應於網頁中的每一個 <A> 標記,數組元素對應的順序是在 HTML 文件代碼中標記出現的先後順序;

通常情況下,這些屬性對應的是 HTML 標記的屬性值,例如 bgColor 屬性對應的是 <BODY> 標記中 BGCOLOR="..." 代碼中的屬性值,你會發現,在其它標記 (像圖片和超文本鏈接) 中也是這樣對應的。

p_w_picpathsformslinks 屬性實際上都是數組,對於數組中的元素,通常會使用像下邊的語句那樣訪問之:

var abc = document.p_w_picpaths[3];

這樣變量 abc 指向的是網頁中的第四個 (因爲在 JavaScript 中數租下標是從 0 開始的) <IMG> 標記對應的圖片對象,這樣用起來其實並不方便,因爲如果圖片太多,你就必須知道每一個圖片在網頁中排在第幾,要不然就無法知道數組的下標應該是幾。不過不用擔心, JavaScript 提供了一個方便的方法讓你指向圖片對象,那就是通過各個圖片元素的名字:

var abc = document.p_w_picpaths["menu"];

要使用這種方法,你就必須在 <IMG> 標記中加入 NAME= "圖片的英文名" 的代碼,此例中,<IMG> 標記的代碼爲:<IMG NAME="menu" SRC="test.gif">,這樣你就再也不用擔心你要引用的圖片對象在網頁中的排位順序了,只要給它取個名字就可以了。 (在 Netscape 3.0 中,這種給圖片命名的方法並不好用,可能會的不到正確的結果,這也是 Netscape 3.0 的一個 bug。)

在使用這種方法給網頁中的圖片對象取名子的時候,千萬注意不要有重名的情況,否則就得不到正確結果了。此外,你還可以使用下邊的代碼一樣代替上邊的代碼:

var abc = document.menu; // 這條語句和 var abc = document.p_w_picpaths["menu"]; 是等價的

【圖片對象 Image

關於一個圖片的信息可以保存在一個叫 Image 的對象中,此對象包含了圖片路徑 (URL)、圖片當前的下載狀態、圖片的高度和寬度等信息,通常情況下你會將此對象指向在 document.p_w_picpaths 數組中存在的圖片,也就是放在網頁中的圖片,但是有時候你可能要處理一些不在網頁中的圖片對象,這時候 Image 對象就派上用場了。

當你要實現圖片翻滾效果的時候,提前將你想要使用的圖片下載到客戶端是一個很好的想法,因爲這樣的話,當用戶觸發事件,要換圖片的時候,那個圖片已經在客戶端了,於是圖片就會馬上顯示出來,避免了時間的延遲,否則換圖的時候再讓瀏覽器從服務器上下載圖片的話,圖片翻滾就有時間延遲了。而使用 Image 對象就可以做到提前下載圖片的目的,如下邊的代碼一樣,使用 Image 對象的 src 屬性指定圖片的路徑 (URL),這樣就將 p_w_picpaths 目錄下的圖片 pic2.gif 下載到客戶端了:

var myImg = new Image();
myImg.src = "p_w_picpaths/pic2.gif";
這段代碼將迫使瀏覽器開始從服務器下載指定的圖片,如果客戶端的緩存 (Cache) 中有這個圖片的話,瀏覽器會自動將其覆蓋,那樣,當用戶將鼠標移動到圖片上邊的時候,圖片將會立即變換,不會有時間的延遲。

 

看看改進後的圖片翻滾的 在線示例 吧,此程序使用了 Image 對象預先下載圖片的方法。注意:此例不能在 Internet Explorer 3.0 或更早的版本中使用,因爲它們不支持。

【超鏈接對象 link

通常你可能不會想到使用 link對象,如果想知道超鏈接的地址 (URL),你可以使用 href 屬性,如果想知道超鏈接目標窗口 (window) 或目標幀 (frame),你可以使用 target 屬性。

link 對象還包含一個 p_w_picpathmap 對象,它對應的是 HTML 文件中的 <MAP> 標記。

【表單對象 form

form 對象自身用的並不是很多,但是 form 對象包含了很多別的元素對象,這些對象組成了表單 form。這些對象包括:文本框對象 (text)、密碼框對象 (password)、單選框對象 (radio button)、複選框對象 (check box)、多行文本域 (text area)、隱藏域 (hidden field)、選擇列表/下拉列表 (selection list option)、提交按鈕 (submit button)、重置按鈕 (reset button),它們對應的 HTML 標記可以參照相關的 HTML 語言參考。

這些對象都有共同的屬性 namevaluevalue 屬性是用戶輸入的數據或 HTML 文件給定的值,在 HTML 標記中,這兩個屬性分別對應的代碼是 NAME="..."VALUE="...."

在使用 form 裏的那些元素對象之前,首先你必須要引用 form 對象才行,因爲 form 對象是那些對象的父對象,而 form 對象前邊也要引用它的上一層父對象 document,這種層層引用是很重要的:

document.forms[0] // 指向頁面中的第一個 form 對象
document.forms["order"] // 指向名爲 order 的 form 對象,即<FORM>標記中包含有代碼 NAME="order" 的表單
document.order // 這和上一行的代碼是等價的
類似的,你可以通過表單 form 對象的 elements 數組訪問每一個 input 對象,同時也可以使用表單中各個元素對象的名字來訪問這些對象。input 對象的名字也是通過 <INPUT> 標記中的 NAME="..." HTML 代碼來命名的:

 

document.forms[0].elements[3]
// 第一個表單 form 中的第三個 input 元素
document.forms["order"].elements["address"]
// 指向名爲 order 的表單中名爲 address 的對象
document.order.address
// 指向名爲 order 的表單中名爲 address 的對象,和上一行代碼是一樣的

通常我們使用表單對象來檢查用戶的輸入是否正確或者用戶提交的數據是否正確,這種檢查是在表單數據被提交到服務器之前進行的,這樣做可以節省用戶填表的時間,保證用戶只提交一次表單。請看 在線示例 ,此例中演示瞭如何使用 formform 裏邊的其它對象來檢查用戶輸入的。

此例中一些需要注意的地方:

  • 我們在 <form> 標記中使用了 onSubmit 事件,此事件在用戶按下“提交”按鈕的時候,調用函數 checkForm() 來檢查用戶輸入;
  • 在函數 checkForm() 中,無論表單中的哪一項沒有填寫,都會彈出一個帶有錯誤信息的消息框,並使用 focus() 方法將鼠標的焦點放在相應的輸入框 (input) 中;
  • 如果表單中有項目沒有填寫,checkForm() 函數會返回 false 值,而 onSubmit() 函數在獲得 false 值之後,不執行提交表單內容的動作。如果返回致使 trueonSubmit() 則會執行提交的動作。

我們將在第四部分對錶單 (form) 進行更加深入的探討。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章