| javascript教程 - 第一部分 接觸 javascript 在網頁中加入 javascript 要在你的網頁中使用 javascript ，你首先必須要知道該將它放在哪兒。其實很簡單，只要在你的網頁（HTML文件）中插入 <SCRIPT> 和 </SCRIPT> 標記對，你就可以在這兩個標記隊之間插入你的 javascript 代碼了： <script> alert("Hello world!"); </script> 另外，你也可以將 javascript 代碼放在另一個單獨的文件裏，然後在網頁（HTML文件）中使用 “SRC= 此單獨文件的路徑/地址（URL）”來使用此單獨文件裏的 javascript 程序代碼。一般將這個單獨的文件保存爲擴展名爲 .JS 的文件： <script src="mycode.js"></script> 你可以在一個 HTML 文件中使用 <SCRIPT> </SCRIPT> 標記對任意多次。 雖然在通常情況下你都會將所有代碼放在 HTML 文件的某一處，但有些時候爲了保證你的javascript程序能夠正確運行，你不得不將它們分散地放在 HTML 文件的多個地方。 不管你是在 HTML 文件中直接插入代碼還是通過外部的單獨的文件來使用 javascript ，通常都是將 <SCRIPT> </SCRIPT> 標記對放在 <HEAD> 和 </HEAD> 標記對之間。這樣能夠保證在你的網頁被下載到客戶端後開始執行 javascript 的時候你的 javascript 代碼也已經被下載到客戶端了。 這同時也是放置你的 javascript 函數的好地方，如果你想要某些代碼在你的網頁顯示出來之後才執行的話，你最好將這些代碼放在函數裏，等網頁顯示以後再通過調用函數來執行它們，請看示例。 另外一些時候，你有可能需要將你的腳本代碼放在 <BODY> 和 </BODY> 標記對之間。這樣做沒什麼不對的，因爲如果你想要通過 javascript 代碼來生成網頁中的 HTML 語句，你就非常需要這樣做，請看示例。 javascript 腳本標記 <SCRIPT> 標記還可以通過“ LANGUAGE = javascript 的版本”語句來指定所要使用的 javascript 的版本， “=”號後邊的值可以是："javascript"、"javascript1.1" 或者 "javascript1.2"。大部分的瀏覽器都會自動識別它所支持的 javascript 的版本，而忽略它不支持的 javascript 。 你可以針對不同版本的瀏覽器使用不同的 javascript 腳本代碼，下邊的列表中列出了不同版本的 Netscape 瀏覽器所支持的不同版本的 javascript： javascript - Netscape 2.0 javascript1.1 - Netscape 3.0 javascript1.2 - Netscape 4.0 所以對於 Netscape 2.0 瀏覽器，它將會忽略標記 <SCRIPT LANGUAGE="javascript1.2"> 中定義的 javascript1.2 版本的腳本代碼，但是 Netscape 4.0 將會執行此版本的腳本代碼（同時也可以執行前邊兩個版本的腳本代碼）。 你還可以在同一個網頁（HTML 文件）中通過 <SCRIPT LANGUAGE="......"> 標記使用不同版本的 javascript 代碼： <script language="javascript"> function f1() { // 舊版本的 javascript 代碼。 ... } </script> <script language="javascript1.2"> function f1() { // javascript 1.2 版的代碼。 ... } </script> 在這個例子裏，Netscape 2.0 瀏覽器將會執行第一個 <SCRIPT>....</SCRIPT> 標誌對之間的函數 f1() 而忽略第二個 <SCRIPT>....</SCRIPT> 標誌對之間的函數 f1() 。而對於Netscape 4.0 瀏覽器來說，它將會對兩個 f1() 函數都進行處理，因爲它支持這兩個版本的 javascript，但是由於兩個函數名字相同，瀏覽器會自動使用第二個函數 f1() 來覆蓋掉第一個函數 f1()，因此執行的結果應該是第二個函數 f1() 的執行結果。 想要了解更多這方面的信息請參考：Netscape's javascript Reference. javascript 語法基礎 在你開始編寫代碼之前，你必須知道一些基本的 javascript 語法和結構。 javascript 語法與 C/C++、Java 的語法很相似，如果你想要了解非常詳盡的語法，可以參考 Netscape's javascript Reference 或者 Microsoft's JScript Reference ，在那裏你可以看到很多關於 javascript 語句、運算符、內建函數等等的內容列表，而我們這裏只是講一些在你開始學習 javascript 的時候需要掌握的一些基礎語法知識！ 【變量】 變量的聲明使用關鍵字 var ，變量名可以是任意長度的字母、數字和下劃線組成（“_”），同時變量名第一個字符不能是數字。注意：javascript 是對大小寫敏感的，也就是說去分大小寫，如變量 count 和變量 Count 是兩個不同的變量！ 在函數外邊聲明的變量是全局變量，在腳本代碼或函數中的任何地方都可以對全局變量進行訪問和使用。需要注意的是：在函數外邊聲明變量的時候，關鍵字 var 是可選的（即可用可不用，你可以直接給一個沒有被聲明的變量賦值）， 但是如果你在一個函數中想要使用一個局部變量（即變量的有效使用範圍只是在函數裏邊），而且這個變量與函數外邊的一個全局變量具有相同的變量名，那麼你就必須在函數裏邊通過 var 來重新聲明這個變量，這個變量亦即是一個局部變量。 下邊是一些例子： var text; var high_score; var count3 = 1; var ErrorMessage = "Connect to host failed." var daysLeft = 5.7; var 82much = true; // 這行代碼是有語法錯誤的。 【字符串】 javascript 中使用使用但英文的單引號（'）或雙引號（"）將字符串括起來。如果你想在字符串中使用引號的話，只要在引號前邊加上“/”號即可，請看下邊示例： var text1 = "Hello world."; var text2 = 'Hello again.'; var text3 = "Don't click here."; var text4 = "I said "No""; // 這行代碼是有語法錯誤的，因爲雙引號裏邊又有雙引號. var text5 = 'I said "No"'; // text5 爲: I said "No". var text6 = "I said /"No/""; // text6 爲: I said "No". 【運算操作符和表達式】 javascript 大部分的運算符和表達式都和 C/C++、Java 是一樣的，例如，下邊的語句都是合法： total += 4; i++; msg = "Error code " + code; // 字符串合併 【語句】 javascript 大部分的語法也是和 C/C++、 Java 一樣的，請看下邊列表： 註釋 - 使用'//' 來註釋一個單行, '/*' 和 '*/' 可以註釋多行； 循環 - for、do、while等等； 條件語句 - if....then....else；switch....case； 對象 - new、this、with 等等。 【函數】 使用 function 關鍵字來定義一個函數： function name(arg1, arg2, ...) { javascript statements... } 函數名必須符合變量名的命名規則，調用函數的時候，使用函數名以及函數需要的參數即可： var w = 5; var h = 3; setDimensions(w, h); 正如我們前邊所講的，函數最好是放在 <HEAD>.....</HEAD> 標記對之間，那樣可以保證當任何語句調用函數的時候函數已經被下載到客戶端了，這樣纔不會出錯，否則可能會產生找不到函數之類的錯誤！ 在函數中可以使用 return 語句返回一些值，例如： function add(x, y) { return x + y; } ... var total = add(7, 10); 執行你的代碼 當瀏覽器下載(Load)一個頁面時，任何嵌在網頁中的 javascript 代碼將會在瀏覽器解釋執行網頁的時候執行。實際上，javascript 代碼可能會在圖片(images)、背景聲音(background sound)或頁面的剩餘部分下在完成之前執行。 顯然，這樣可能會發生一些問題。在這個 在線示例 中，我們試圖通過 document.linkColor 對象獲得用於超文本鏈接(hypertext links)的顏色，第一次嘗試的代碼是在 <HEAD>....</HEAD> 標記對之間，第二次嘗試是在 <BODY>....</BODY> 標誌對之間，下邊的是簡化後的源代碼： <html> <head> <title></title> <script> // 獲得頁面超鏈接的顏色. var lc1 = document.linkColor; </script> </head> <body bgcolor="#ffffff" text="#000000" link="#ff0000"> <font face="Arial,Helvetica" size=3> <script> // 獲得頁面超鏈接的顏色. var lc2 = document.linkColor; // 顯示出顏色的 RGB 十六進制值. document.writeln('link color: ' + lc1 + '<br>'); document.writeln('link color: ' + lc2); </script> </body> </html> 此例運行的結果如下： link color: #0000ff link color: #ff0000 在第一次嘗試中，超鏈接的顏色是瀏覽器默認的藍色 #0000ff(或是其它顏色，這取決於你對瀏覽器的設置)，然而超鏈接的顏色在 <BODY> 標記中卻被修改/設置了(修改處：link="#ff0000")，改成了紅色(#ff0000)，在 <BODY> 被下載之前獲得的顏色值 lc1 不是 #ff0000 而是瀏覽器的默認值 #0000ff；我們的第二次嘗試是在 <BODY> 標記已經被下載完成的情況下獲得超鏈接顏色的，所以獲得的顏色是經過 <BODY> 修改/設置後的顏色 #ff0000 (即 lc2 的值)。 對於函數中的代碼，只有調用這個函數的時候纔會執行，但是你知道應該在什麼時候調用函數嗎？請看我們的下一個主題：事件。 事件 瀏覽器可以識別很多的事件，例如“頁面下載(Load)完成”這一事件，“用戶鼠標移動到超鏈接或按鈕上”這一事件等等。這也就給你提供了一些方便，你可以通過捕捉事件來執行相應的 javascript 代碼。 一種捕捉事件的方法是定義一個事件句柄，這是針對 HTML 標記對象而言的，不同的 HTML 標記對應不同的對象，不同的這些對象又對應不同的時間句柄 (可以參照下邊的表格)。但是並不是所有的瀏覽器都支持所有相同的事件，我們這裏所有例子中使用到的事件都是被 Netscape 和 IE 這兩種瀏覽器所共同支持的。 【定義一個事件句柄】 定義一個事件句柄其實很簡單，就是將 事件名稱 和 事件觸發是要執行的 javascript 代碼 一同加到 HTML 的標記中去即可，例如： <a href="page2.html" onClick="count++">下一頁</a> 在這個例子中，用戶每次點擊一下“下一頁”的超鏈接，就會觸發 onclick 事件，然後在執行跟在 onclick 事件後的 javascript 代碼：變量 count 增加 1 (count++)。 你可以在事件句柄後邊使用任何合法的 javascript 腳本代碼，如果你想使用多條 javascript 語句，那麼使用分號(;)將各條語句隔開, 對於調用函數也是一樣的。但是有一點要提醒你：在事件句柄後邊的字符串中加入 javascript 代碼的時候一定要注意如何正確使用引號。 【圖片的翻滾效果(Rollover)】 看一下這個 在線示例 ，這個例子演示了被人熟知的通過鼠標移動來改變圖片(Image)的效果，即圖片的翻滾(Rollover)，注意：此例無法在 Internet Explorer 3.0 以及更早的版本中正確運行。 <IMG> 標記沒有鼠標移動到其上邊的事件句柄 onMouseOver，但是超鏈接標記 <A> 由這個事件句柄，所以我們在 <IMG> 標記兩邊分別加了標記 <A HREF=...> 和 </A>。 讓我們看一下代碼先。我們事先編寫了一個函數 setImage() 用來改變圖片，此函數需要兩個參數，name 參數是要改變圖片的 <IMG> 標記對象的名字，參數 source 是名字爲 name 的 <IMG> 標記對象改變後（不是改變前的）的圖片文件名，改變圖片的關鍵在於改變圖片對象 <IMG> 的 src 屬性： function setImage(name, source) { document.images[name].src = source; return true; } 下邊是對每一個超鏈接使用了三個事件句柄，一個是鼠標移動到超鏈接上邊是的事件 onMouseOver，一個是鼠標從超鏈接上邊移走的時候觸發的事件 onMouseOut，最後一個事件是鼠標點擊超鏈接時觸發的 onClick，代碼如下： <a href="#" onMouseOver="setImage('image1', 'button_on.gif')" onMouseOut="setImage('image1', 'button_off.gif')" onClick="return false;"> <img name="image1" border=0 src="button_off.gif"> <b>Item 1</b> </a> onMouseOver 和 onMouseOut 事件都調用了函數 setImage() ，同時傳遞了參數 name 的值 (這個值在 <IMG> 標記中通過 “NAME= 圖片英文名字” 來定義給出) 以及參數source 的值，這個值是我們想要改變後顯示的圖片的文件名 (包括路徑/URL)，我們將在後邊講到對象的細節問題，在這裏請集中注意力對付事件句柄的相關問題。 注意到 onClick 事件，觸發後它只執行 return false 語句，用來告訴瀏覽器制止/忽略這個事件的默認動作，否則，瀏覽器將會執行超鏈接的默認動作，跟隨超鏈接所指向的地址/URL，下載一個新的頁面，而通過返回 false 值，我們可以告知瀏覽器不要這樣做。當然，如果你想要讓它轉到另一個新的頁面的話，你可以使用 return true 或者乾脆就不要定義 onClick 事件（即刪除上邊語句中的 onClick 事件）。 【另一個實用的東東】 另一個實用的事件句柄是 onLoad 事件，它用於 <BODY> 標記中。在這裏，爲了說明這一個事件句柄，我們將以前的一個 在線示例 修改一下，將會得到同樣的結果，請看下邊代碼： <html> <head> <title></title> </head> <body bgcolor="#ffffff" link="#ff0000" onLoad="alert(document.linkColor);"> <font face="Arial,Helvetica" size=3> An example of using the <b>onLoad</b> event. Use your browser's RELOAD button to run the example again. </font> </body> </html> 你可以試一下修改後的 在線示例 ，alert() 函數是 javascript 的一個內建函數（擊javascript自帶的函數），此函數的作用是顯示一個消息框，消息框裏的消息即是此函數的字符串參數，在這個例子裏，消息框顯示的是超鏈接顏色 document.linkColor 的 RGB 十六進制值，這個值是在 <BODY> 標記中定義的。 事件句柄列表 下邊是 HTML 標記和對應的事件句柄的列表，列表中還附帶說明了什麼時候會觸發相應的事件，如果想詳細瞭解事件句柄，可以參閱 Netscape HTML Reference 和 Microsoft IE Events Reference 。 HTML標記 事件 當....時候觸發此事件 <A> onClick 用戶點擊超鏈接 onMouseOver 鼠標移動到超鏈接上邊 onMouseOut 鼠標離開超鏈接 <AREA> onMouseOver 鼠標移動到圖片 map 區域上邊 onMouseOut 鼠標離開圖片 map 區域 <BODY> onBlur 包含這個頁面的窗口 window 或 幀 frame 失去焦點的時候 onFocus 包含這個頁面的窗口 window 或 幀 frame 獲得焦點的時候 onLoad 這個頁面下載完成的時候 onUnload 退出這個頁面的時候 <form> onReset 按下 RESET (重置) 按鈕的時候 onSubmit 按下 SUBMIT (提交) 按鈕的時候 <IMG> onAbort 下載圖片的過程被用戶手動停止的時候 onLoad 圖片下載完成的時候 onError 在客戶端接收圖片時有錯誤發生 <INPUT> with TYPE="BUTTON" 或 "CHECKBOX" 或 "RADIO" 或 "RESET" onClick 鼠標點擊時候 <INPUT> with TYPE="TEXT" 或 <TEXTAREA> onBlur 獲得焦點的時候 onChange 輸入框/文本框中的文本被改變的時候 onFocus 獲得焦點的時候 onSelect 輸入框/文本框中的文本被選中 (高亮顯示) 的時候 <INPUT> with TYPE="SELECT" onBlur 失去焦點的時候 onChange 用戶改變了下拉列表框中的選擇 onClick 用戶使用鼠標點擊的時候 onFocus 獲得焦點的時候 |
|
什麼是對象？
顧名思義，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 屬性來實現，請看 在線示例 。
然而，有一些屬性你是不能直接修改的，例如字符串對象 String 的 length 屬性，但是如果你使用 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 操作符創建相應的對象實例，其實你也可以隱含地聲明/創建 Boolean、Number 和 String 這幾個對象，就像下邊那樣：
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 的屬性 location、history 和 document 創建爲高層對象，所以對於上邊的語句，我們還可以簡便的寫成：
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 文件) 最後被修改的時間；
images - 圖片對象組成的數組，數組中的每一個元素對應於網頁中的每一個 <IMG> 標記，數組元素對應的順序是在 HTML 文件代碼中標記出現的先後順序；
forms - 表單 (form) 對象組成的數組，數組中的每一個元素對應於網頁中的每一個 <form> 標記，數組元素對應的順序是在 HTML 文件代碼中標記出現的先後順序；
links - 超文本鏈接對象組成的數組，數組中的每一個元素對應於網頁中的每一個 <A> 標記，數組元素對應的順序是在 HTML 文件代碼中標記出現的先後順序；
通常情況下，這些屬性對應的是 HTML 標記的屬性值，例如 bgColor 屬性對應的是 <BODY> 標記中 BGCOLOR="..." 代碼中的屬性值，你會發現，在其它標記 (像圖片和超文本鏈接) 中也是這樣對應的。
images、forms 和 links 屬性實際上都是數組，對於數組中的元素，通常會使用像下邊的語句那樣訪問之：
var abc = document.images[3];
這樣變量 abc 指向的是網頁中的第四個 (因爲在 javascript 中數租下標是從 0 開始的) <IMG> 標記對應的圖片對象，這樣用起來其實並不方便，因爲如果圖片太多，你就必須知道每一個圖片在網頁中排在第幾，要不然就無法知道數組的下標應該是幾。不過不用擔心， javascript 提供了一個方便的方法讓你指向圖片對象，那就是通過各個圖片元素的名字：
var abc = document.images["menu"];
要使用這種方法，你就必須在 <IMG> 標記中加入 NAME= "圖片的英文名" 的代碼，此例中，<IMG> 標記的代碼爲：<IMG NAME="menu" SRC="test.gif">，這樣你就再也不用擔心你要引用的圖片對象在網頁中的排位順序了，只要給它取個名字就可以了。 (在 Netscape 3.0 中，這種給圖片命名的方法並不好用，可能會的不到正確的結果，這也是 Netscape 3.0 的一個 bug。)
在使用這種方法給網頁中的圖片對象取名子的時候，千萬注意不要有重名的情況，否則就得不到正確結果了。此外，你還可以使用下邊的代碼一樣代替上邊的代碼：
var abc = document.menu; // 這條語句和 var abc = document.images["menu"]; 是等價的
【圖片對象 Image】
關於一個圖片的信息可以保存在一個叫 Image 的對象中，此對象包含了圖片路徑 (URL)、圖片當前的下載狀態、圖片的高度和寬度等信息，通常情況下你會將此對象指向在 document.images 數組中存在的圖片，也就是放在網頁中的圖片，但是有時候你可能要處理一些不在網頁中的圖片對象，這時候 Image 對象就派上用場了。
當你要實現圖片翻滾效果的時候，提前將你想要使用的圖片下載到客戶端是一個很好的想法，因爲這樣的話，當用戶觸發事件，要換圖片的時候，那個圖片已經在客戶端了，於是圖片就會馬上顯示出來，避免了時間的延遲，否則換圖的時候再讓瀏覽器從服務器上下載圖片的話，圖片翻滾就有時間延遲了。而使用 Image 對象就可以做到提前下載圖片的目的，如下邊的代碼一樣，使用 Image 對象的 src 屬性指定圖片的路徑 (URL)，這樣就將 images 目錄下的圖片 pic2.gif 下載到客戶端了：
var myImg = new Image();
myImg.src = "images/pic2.gif";
這段代碼將迫使瀏覽器開始從服務器下載指定的圖片，如果客戶端的緩存 (Cache) 中有這個圖片的話，瀏覽器會自動將其覆蓋，那樣，當用戶將鼠標移動到圖片上邊的時候，圖片將會立即變換，不會有時間的延遲。
看看改進後的圖片翻滾的 在線示例 吧，此程序使用了 Image 對象預先下載圖片的方法。注意：此例不能在 Internet Explorer 3.0 或更早的版本中使用，因爲它們不支持。
【超鏈接對象 link】
通常你可能不會想到使用 link對象，如果想知道超鏈接的地址 (URL)，你可以使用 href 屬性，如果想知道超鏈接目標窗口 (window) 或目標幀 (frame)，你可以使用 target 屬性。
link 對象還包含一個 imagemap 對象，它對應的是 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 語言參考。
這些對象都有共同的屬性 name 和 value，value 屬性是用戶輸入的數據或 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 的對象，和上一行代碼是一樣的
通常我們使用表單對象來檢查用戶的輸入是否正確或者用戶提交的數據是否正確，這種檢查是在表單數據被提交到服務器之前進行的，這樣做可以節省用戶填表的時間，保證用戶只提交一次表單。請看 在線示例 ，此例中演示瞭如何使用 form 和 form 裏邊的其它對象來檢查用戶輸入的。
此例中一些需要注意的地方：
我們在 <form> 標記中使用了 onSubmit 事件，此事件在用戶按下“提交”按鈕的時候，調用函數 checkform() 來檢查用戶輸入；
在函數 checkform() 中，無論表單中的哪一項沒有填寫，都會彈出一個帶有錯誤信息的消息框，並使用 focus() 方法將鼠標的焦點放在相應的輸入框 (input) 中；
如果表單中有項目沒有填寫，checkform() 函數會返回 false 值，而 onSubmit() 函數在獲得 false 值之後，不執行提交表單內容的動作。如果返回致使 true，onSubmit() 則會執行提交的動作。
我們將在第四部分對錶單 (form) 進行更加深入的探討。
