javascript 教程

要在你的網頁中使用 JavaScript ，你首先必須要知道該將它放在哪兒。其實很簡單，只要在你的網頁（HTML文件）中插入 <SCRIPT> 和 </SCRIPT> 標記對，你就可以在這兩個標記隊之間插入你的 JavaScript 代碼了：

另外，你也可以將 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 代碼：

// 舊版本的 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> 標誌對之間，下邊的是簡化後的源代碼：

// 獲得頁面超鏈接的顏色.

var lc1 = document.linkColor;

</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#ff0000">
<font face="Arial,Helvetica" size=3>

// 獲得頁面超鏈接的顏色.

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 ，代碼如下：

onMouseOver 和 onMouseOut 事件都調用了函數 setImage() ，同時傳遞了參數 name 的值 (這個值在 <IMG> 標記中通過 “NAME= 圖片英文名字” 來定義給出) 以及參數source 的值，這個值是我們想要改變後顯示的圖片的文件名 (包括路徑/URL)，我們將在後邊講到對象的細節問題，在這裏請集中注意力對付事件句柄的相關問題。

注意到 onClick 事件，觸發後它只執行 return false 語句，用來告訴瀏覽器制止/忽略這個事件的默認動作，否則，瀏覽器將會執行超鏈接的默認動作，跟隨超鏈接所指向的地址/URL，下載一個新的頁面，而通過返回 false 值，我們可以告知瀏覽器不要這樣做。當然，如果你想要讓它轉到另一個新的頁面的話，你可以使用 return true 或者乾脆就不要定義 onClick 事件（即刪除上邊語句中的 onClick 事件）。

【另一個實用的東東】

另一個實用的事件句柄是 onLoad 事件，它用於 <BODY> 標記中。在這裏，爲了說明這一個事件句柄，我們將以前的一個在線示例修改一下，將會得到同樣的結果，請看下邊代碼：

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 區域上邊
<AREA>	onMouseOut	鼠標離開圖片 map 區域
<BODY>	onBlur	包含這個頁面的窗口 window 或幀 frame 失去焦點的時候
	onFocus	包含這個頁面的窗口 window 或幀 frame 獲得焦點的時候
	onLoad	這個頁面下載完成的時候
	onUnload	退出這個頁面的時候
<FORM>	onReset	按下 RESET (重置) 按鈕的時候
<FORM>	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教程 - 第二部分 JavaScript 對象

2003-09-03 16:32

來源：

[正文]

什麼是對象？

顧名思義，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

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 ) 進行更加深入的探討。

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

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

此例執行的結果：變量 errorMsg 的值爲 "Error: X001 "。

JavaScript教程 - 第三部分 window 和 frame 對象

2003-09-03 16:36

來源：

[正文]

創建新的 window (窗口) 對象

你有時需要打開一個新的瀏覽器窗口，用來顯示信息或廣告，但是在這裏我要提醒你一下，大部分人在瀏覽一個網站的時候，是不會注意彈處的新窗口裏邊寫些什麼，他們會很快地關掉窗口，只有少數的人會留意這些彈出的窗口。然而，這項技術還是很不錯的。

【彈出窗口的小測試】

在這個在線示例中，我們給出一個小測試問題的列表，對應於每一個問題都一個顯示答案的超鏈接，而這些超鏈接將會彈出一個小窗口來顯示答案，看一看代碼就清楚了。

實際上，每一個答案的超鏈接都調用了同一個函數 showAnswer() ，通過傳遞的參數 url (此參數是答案所在的頁面的地址 URL) 的不同，在彈出的小窗口中顯示不同的頁面；在這個函數中使用了 window.open() 方法來創建新的窗口：

function showAnswer(url) {
window.open(url, "answer", "height=100,width=100,directories=no," +
"location=no,menubar=no," +
"resizeable=no,status=no,toolbar=no");
return false;
} open()

open() 方法有三個參數：打開窗口中的頁面地址 URL (包括路徑和文件名)，給新窗口取的一個英文名字，打開的窗口的一些屬性設置 (如窗口的高度、寬度、是否顯示滾動條、是否顯示瀏覽器的菜單欄等等)。

新窗口的名字在某些時候可能會用到，在別的窗口中使用 TARGET="新窗口的名字" 使超鏈接所鏈接的頁面在新窗口中顯示，描述窗口特性的參數是一個包含關鍵字和關鍵字值的字符串，各個關鍵字之間使用英文逗號 (, ) 隔開，使用這個參數的時候一定要小心，各個關鍵字、關鍵字值、逗號之間千萬不要有空格。

注意：此例中的 “+ ” 好只是爲了代碼能夠換行書寫才加上的，其實它們只是連結字符串而已，沒有別的，不使用 “+ ” 好一樣是可以的。

窗口特性 (即是打開的瀏覽器的樣子 ) 的關鍵字、關鍵字值可以參考下表：

是否顯示工具欄：toolbar[=yes|no]|[=1|0]
是否顯示地址欄：location[=yes|no]|[=1|0]
是否顯示前進、後退、刷新按鈕：directories[=yes|no]|[=1|0]
是否顯示狀態欄：status[=yes|no]|[=1|0]
是否顯示菜單欄：menubar[=yes|no]|[=1|0]
是否顯示滾動條：scrollbars[=yes|no]|[=1|0]
用戶是否可以改變窗口的大小：resizable[=yes|no]|[=1|0]
是否在新窗口中保留瀏覽器的瀏覽歷史紀錄：copyhistory[=yes|no]|[=1|0]
窗口的寬度 (單位爲像素)：width=pixels
窗口的高度 (單位爲像素)：height=pixels

如果在字符串中給定了這些值的話，窗口就會按你定義的現實，否則將會使用默認的值，想要進一步瞭解這方面的信息請參考 Netscape's JavaScript Guide ！

【給窗口指定頁面】

當你使用上面的方法創建了一個新窗口之後，你還可以再次給這個窗口指定新的頁面，這就要用到 open() 方法的返回值了，請看下邊的代碼：

myWin = window.open(url, "", "height=100,width=100");
...
myWin.location = "newpage.html";

上邊的代碼將打開的新窗口的頁面重新指定爲 newpage.html ，這樣窗口中就會顯示頁面 newpage.html 了。同時，在打開的新窗口中，你也可以通過使用 window 對象的 opener 屬性將窗口對象指向打開此窗口的母窗口，這樣也就可以對母窗口的數據或函數進行操作了，例如下邊的代碼中就是將母窗口的頁面重新指定爲 newpage.html ：

window.opener.location = "newpage.html";

【關閉一個窗口】

再讓我們看一下前邊的在線示例中我們所打開的新窗口，你會窗口中沒有菜單欄，那我們該如何將此窗口關掉呢？不用擔心，我們可以使用 window 對象的 close() 方法來關閉打開的小窗口，那個 “關閉窗口！ ” 按鈕中就是使用了此方法：

當你按下按鈕後，就會觸發 onClick 事件，從而調用 window 對象的 close() 方法，此方法將當前的窗口關閉掉。

處理 frame [幀] 對象

正如我們在前邊的章節中提到的那樣，frame 幀其實是單獨的窗口，它對應於單獨的窗口對象，有自己的 location 、history 和 document 屬性。

在這個在線示例中你將會看到一系列的幀，代碼如下：

</html>

至於幀的結構、幀是如何分佈的等等問題這裏就不多講了，我們希望你能查看一下例子中的源代碼，你會發現幀 A 中有一個名爲 setFrameColor() 的函數，它的作用是用來改變幀 B 、幀 C 、幀 D 的背景色，參數 fname 爲目標幀的名字，參數 color 爲目的背景顏色：

function setFrameColor(fname, color) {

window.parent.frames[fname].document.bgColor = color;
return false;
}

正如前邊例中所演示的那樣，B 、C 、D 幀的背景顏色確確實實被 document.bgColor 改變了，這裏頭最重要的是對幀對象的指定，這也是 window.parent.frames[fname] 的作用了，如果參數 fname 的值爲 B ，則改變幀 B 的顏色。

我們通過當前幀 (幀 A ) 的 window.parent 屬性指定到頂部的幀 (frameset ，此幀包含了A 、B 、C 、D 四個幀) ，然後通過頂部幀的 frames 數組加上幀的名字 fname 指定目標幀 (幀 B 、C 、D )，最後通過目標幀的 document.bgColor 屬性改變該幀的背景色。

下圖很直觀地顯示了我們上邊所講的幀對象的指定關係：

圖 3.1

【引用別的幀/窗口的變量和函數】

你不只是可以引用別的幀/窗口的 document 、window 對象，而且還可以訪問使用別的幀/窗口的變量和函數。

現在我們將上邊的例子修改一下，請看在線示例。在新的例子中，我們給下邊的三個幀都加了一個按鈕，用來恢復各個幀的默認背景色，按下這些按鈕後，將會調用幀 A 中的函數 setFrameColor() 。下邊就是調用幀 A 中 setFrameColor() 函數的代碼：

window.parent.frames["A"].setFrameColor(window.name, "#ffffff");

正如你所看到的，我們使用了與前邊一樣的技巧。首先使用 window.parent 指向頂層的幀 (frameset )，然後使用 frames["A"] 指向幀 A ，然後在後邊加上幀 A 中的函數 setFrameColor() ，並且加上兩個參數，這樣就可以運行幀 A 中的函數了。

需要注意的是函數 setFrameColor() 中使用的類似 window.name 的語句，這個名字和 frames[] 數組中使用的是相同的名字，同時這個名字還是 <FRAME> 標記中通過 NAME="幀的英文名" 設置的名字。

下邊是與幀相關的第二個例子的關係圖：

圖 3.2

類似地，你也可以使用相同的方法使用別的窗口/幀裏邊的全局變量，只需要將上邊例中的函數名改成全局變量名即可。

window 對象的 location 和 history 屬性

window 對象的 location 屬性包含了當前頁面的地址 (URL) 信息，你可以直接改變此屬性值，將其設置成新的地址 (URL)：

window.location = "http://www.yahoo.com";
或者
location = "http://www.yahoo.com";

你還可以通過下邊的兩種方法中的任何一種來使瀏覽器從服務器上下載 (Load ) 頁面：

reload() - 促使瀏覽器重新下載當前的頁面，也就是“刷新”當前頁面了。
replace( URL ) - 促使瀏覽器根據 URL 參數中給出的地址 (URL) 下載頁面，同時在當前瀏覽器存儲的歷史記錄 (即所瀏覽過的頁面的列表) 中使用新的地址(即此方法中的 URL 參數) 覆蓋當前的頁面。

使用 replace() 方法意味着用戶將不能通過按 “返回” 按鈕回到前邊瀏覽過的那個頁面，但這並不是說用戶完全不能回到原來的所有頁面，他們只不過是無法回到被 replace() 方法替換的那一個頁面 (注意：只是被替換的那一個頁面)。

表面上看起來這種方法並不是很有用，而且好像還有點令人討厭，但是，在一些特殊的情況下這種方法卻是很有用的。看看這個在線示例就知道了，此例中使用 setTimeout() 方法每個三秒鐘就下載一個新的頁面，讓程序運行一段時間，然後點擊瀏覽器的 “後退” 按鈕，你會看到瀏覽器的歷史記錄，好多好多，你再試着通過鼠標點擊回到開始的頁面，怎麼樣，回去了嗎？好像比較麻煩，因爲有一大堆的頁面在那裏擋着。

想要解決這個問題可以使用 replace() 方法，看一下這個改進後的在線示例就知道了，新的例子中，你只需點擊一次 “後退” 按鈕即可以回到最初的頁面了。

【history 對象】

history 對象是一個很有用的對象，此對象記錄着瀏覽器所瀏覽過的每一個頁面，這些頁面組成了一個歷史記錄列表。history 對象具有兩種方法：

forward() - 將歷史記錄向前移動一個頁面；
back() - 將歷史記錄向後移動一個頁面；

而還有一個 go() 方法也可以控制歷史紀錄，而且功能更加強大，使用此方法需要一個參數，這個參數值可以是正負整數、零和字符串，例如 history.go(-2) 將是當前頁後退兩頁；如果給定的參數是字符串，那麼瀏覽器就會搜索列表，找到最接近當前頁面位置的並且地址 URL 中含有此字符串的頁面，然後轉到該頁面。

請看，下邊的兩條語句是等價的：

history.go(-1);
history.back();

下邊的代碼將頁面轉到距離本頁面位置最近的同時頁面地址 URL 中含有字符串 "netscape " (不區分字母的大小寫) 的頁面：

history.go("netscape");

在使用這三個方法的時候，如果沒有找到符合條件的歷史記錄的話，將不會發生任何變化，不會改變當前的頁面，也不會顯示錯誤。

小技巧：如果在你的網站中有很多頁面，那麼提供一個 “返回” 功能是很必要的，這樣可以方便用戶瀏覽你的網站，但是你並不知道用戶是從哪一個頁面來到當前頁面的，於是你就不能使用 <A HREF="頁面的地址">...</A> 的方式來做超鏈接了，但是可以使用下邊的代碼來做 “返回” 的超鏈接：

<a href="#" onClick="history.back(); return false;">返回</a>

改變窗口頁面的內容

你可以使用 window 對象的 scroll() 方法使窗口/幀的內容滾動，這種滾動可以是水平方向的也可以是垂直方向的，在這個在線示例中，幀裏邊的美國各個城市天氣變化的內容將會不停的滾動。

此例中，當頁面滾動到一定的值 (此例中爲 750 像素) 的時候，又將頁面重新設置成最初的樣子 (即座標值爲：(0,0) )，這樣看起來就是不停的滾動了。可惜的是，並不是所有的瀏覽器都提供實際的頁面高和寬的像素值，所以你要親自實踐一下看看這些值要多大才合適。

你還可以重新書寫一個頁面中的內容，這就要用到 document 對象的 write() (此方法輸出的時候不換行) 和 writeln() (此方法輸出完成後自動換行)方法了。這兩個方法需要一個字符串參數，這個參數就是要在頁面中輸出的字符串，可以在字符串中帶上HTML代碼，那樣輸出的結果就和其它網頁是一樣的了，看看這個在線示例，查看一下源代碼就知道了。這個例子中是上邊的幀通過 writeln() 方法向下邊的幀輸出內容。

在此例中，你可以試一試輸入一些 HTML 代碼，看看有什麼效果！比如說輸入下邊的代碼：

在下邊幀上，點擊鼠標右鍵，查看一下源代碼，你會發現源代碼就是你輸入的那些字符。

在函數 rewriteFrame() 中，有如下語句：

window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();

第一條語句是將表單 (form ) 的 text 中輸入的內容寫到下邊的幀中，第二行代碼是調用 document.close() 的方法告訴瀏覽器向頁面寫的操作已經結束。如果你想要是你的輸入覆蓋掉以前的，那就要使用 document 對象的 close() 方法。

【一個小小的改進】

你可能會注意到上邊的例子中，當你點擊瀏覽器的後退按鈕的時候，你會看到你的每一次 “提交” 動作都產生了一個新的頁面，他們都留在了歷史記錄中，所以像前邊說的一樣，你要按很多此 “後退” 才能會回到最初的頁面，如果你想除掉這種情況，可以使用 document 對象的 open() 方法，只要在 rewriteFrame() 中加一條語句即可：

window.parent.frames["text"].document.open("text/html", "replace");
window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();

open() 方法的第一個參數值 "text/html " 是用來告訴瀏覽器準備接受 HTML 數據，而第二個參數值 "replace " 告訴瀏覽器不要將新寫入的頁面加入到瀏覽器的歷史記錄列表中，和 location.replace(URL ) 是很相似的，功能是一樣的，請看改進後的在線示例。

JavaScript教程 - 第四部分關於form對象

2003-09-03 16:37

來源：

[正文]

使用 form [表單] 對象

在前邊的例子中，我們已經接觸到很多餘表單 form 對象的元素相關 JavaScript 代碼，比如按鈕、文本輸入框等等。form 的元素是爲了網頁的交互性而設計的，你可以通過 form 獲得用戶提交的信息，在這章中我們將討論 form 的元素。

【form 對象】

在我們使用單獨的表單 form 對象之前，首先要引用 form 對象。正如我們在第二部分所講的那樣，form 對象由網頁中的 <FORM></FORM> 標記對創建，相似的，form 裏邊的元素也是由 <INPUT> 等標記創建的，他們被存放在數組 elements 中。

在前邊我們已經講過了如何使用 elements 數組了。例如，在一個頁面中有兩個 form 對象：

<form name="customerinfo" action="/cgi-bin/customer.cgi" method="post">
Name: <input name="customername" type="text"><br>
Address: <input name="address" type="text"><br>
<input type="submit" value="Update"><input type="reset" value="Clear">
</form>

<form name="orderdata" action="/cgi-bin/order.cgi" method="post">
Item Number: <input name="itemnumber" type="text"><br>
Quantity: <input name="quantity" type="text"><br>
<input type="submit" value="Update"><input type="reset" value="Clear">
</form>

</body>
</html>

要使用名爲 'quantity ' 的元素，可以使用下邊三種方法中的任何一種：

var e = document.forms["orderdata"].elements[1];
var e = document.forms.orderdata.elements["quantity"];
var e = document.orderdata.quantity;

每一種元素類型 (type ) 多對應每一種不同的對象，這些對象有一些共同的屬性和方法，如：value 屬性和 focus() 方法，此外，它們還有自己獨特的屬性和方法，下邊我們將會按順序對每一種元素類型進行講解。

你可以通過元素的 type 屬性知道元素是什麼類型，在上邊的例子中，我們可以使用下邊的代碼來獲得名爲 'quantity' 的元素的類型：

document.orderdata.quantity.type

結果將會返回 'text '。

【處理一個表單 form 】

通常一個 <FORM> 標記中含有 ACTION="...." 的語句，這個語句是用來指定一個表單提交後的服務器端處理文件的文件名 (包括路徑，即整個URL )，在的一部分中，我們曾經使用過 onSubmit 事件來判斷用戶的輸入是否正確，如果正確就將這些信息提交到服務器進行處理，而服務器上用來處理這些信息的程序所在的文件就是通過 ACTION="..." 來指定的。

如果你想要通過 form 的元素來獲得用戶的輸入，而不在服務器上處理，那就不要在 <FORM> 標記中加入 ACTION="...." 和 METHOD="...." ，就像我們在在線示例中使用的“查看源代碼！”的按鈕，這個按鈕就是在客戶端而不是服務器端運行了一些代碼來查看源文件。

form 對象各元素類型

【button 按鈕對象】

按鈕有三種類型，一般的按鈕 (button )，“提交” (submit ) 按鈕和 “重置” (reset ) 按鈕，它們有共同的屬性和方法，也有各自不同的屬性和方法。這三種按鈕可以在 <INPUT> 標記中通過 TYPE="...." 來創建，例如：

它們三個的不同之處在於，submit 提交按鈕有個默認動作是點擊此類按鈕以後自動提交表單的內容；reset 重置按鈕的默認動作是點擊此類按鈕以後自動將表單的內容恢復到最初的狀態；而對於一般的 button 按鈕來說，則沒有默認動作，需要通過使用 onClick 事件句柄，在此事件觸發時調用函數才行。

你也可以通過使用 onClick 事件句柄來改變 submit 和 reset 按鈕的默認動作。這個在線示例中就使用了這三種不同的按鈕來完成計算功能。

技巧1 ：在此例中我們使用了 JavaScript 的內建函數 parseInt() ，此函數將文本框裏的字符串對象轉換成數值對象。否則字符 "2 " 和字符 "2 " 進行 "+ " 運算的結果是 "22 "，而不是 4 。

技巧2 ：reset 按鈕有默認動作，那就是將表單中所有的內容恢復到最初的狀態，如果想改變其默認動作，可以像這個在線示例那樣。

【text (文本框)、password (密碼輸入框)、hidden (隱藏域) 和 t extarea (多行文本框) 對象】

這幾個對象都很相似，輸入的都是字符串，它們僅僅是顯示的方式不一樣而已：

text - 一個單行的文本輸入框
password - 一個單行的密碼輸入框，輸入的字符將不會顯示出來，顯示出來的只是 '* ' 號
hidden - 一個單行的文本域，但是它不會在頁面上顯示任何東西，而且使用網頁的用戶不能直接修改它的值，但是你卻可以通過代碼修改它的值
textarea - 多行的文本輸入框，可以在框中使用 “回車” 換行

技巧：hidden 域是一個很有用的對象，它可以將一些不想在頁面上顯示的信息傳給服務器，但是，雖然這些信息不會顯示在頁面上，你還是不能將重要的信息，如密碼等信息放到此域中，因爲用戶在客戶端是可以通過查看源文件知道這些信息的。

text 和 textarea 元素提供了 onChange 事件，當這些輸入框的內容發生變化時就會觸發此事件。看看這個在線示例就知道了。你會注意到 onChange 事件只是發生在用戶離開輸入框 (使用了 TAB 鍵或鼠標焦點離開) 或者按了 “回車” 鍵的時候發生。

你只有確實地改變了文本框中的內容纔會觸發此事件。如果你將輸入的內容清楚，然後輸入完全相同的內容，將不會觸發 onChange 事件。

【checkbox (複選框) 和 radio (單選框) 按鈕對象】

checkbox 和 radio 按鈕可以爲用戶提供一序列選項，checkbox 用於可以多選的選項中，而 radio 用於只能單選的選項中。

checkbox 對象通過 VALUE="...." 來設置值，但表單提交之後，服務器接收到的只是選中的項的值，此對象有一個 checked 的屬性，此屬性用來判斷每一個複選框的狀態，即選中還是沒選中，例如：<INPUT TYPE="checkbox" checked> 表示此複選框被選中；而 <INPUT TYPE="checkbox"> 表示此複選框沒有被選中。

你可以通過 JavaScript 代碼修改、設置 checkbox 的 checked 屬性，就像這個在線示例中的那樣，將 checkbox 的 checked=false 則不選中該複選框，checked=true 則相反。

單選框 radio 按鈕與 checkbox 不同，它是在一序列選項中只能選一個，例如，我們對來訪用戶的年齡進行調查，看他們屬於哪一個年齡段，則可以使用下邊的代碼：

<input name="agegroup" type="radio" value="under 21">21歲以下<br>
<input name="agegroup" type="radio" value="21 to 35">21歲到35歲<br>
<input name="agegroup" type="radio" value="36 to 45">36歲到45歲<br>
<input name="agegroup" type="radio" value="46 to 65">46歲到65歲<br>
<input name="agegroup" type="radio" value="over 65">65歲以上

我們注意到這些選項對應的 radio 按鈕對象有一個相同的對象名 'agegroup '，這是說明這些按鈕都是在一個組裏的，在這個組裏，任何時候都只能有其中的一項 (不可能有兩個或兩個以上) 被選中，當表單被提交到服務器的時候，服務器接收到的值就是選中的那一項。同時，agegroup 對象的值也是選中的那一項的 value 屬性的值。

一個組中的每一個 radio 按鈕都代表一個 radio 對象，和 checkbox 類似，每一個都有 checked 和 value 屬性，此屬性對應於 HTML 標記中的 VALUE="...." 代碼，和 checkbox 所不同的是當組裏的一個 radio 按鈕被選中時，則其它 radio 按鈕將不會被選中。

現在問題來了：在一組 radio 按鈕中，如何去訪問其中的任何一個 radio 按鈕？使用 radio 按鈕組的名字 (如上邊的 agegroup ) 是不行的，它的值只是選中的按鈕的值，那你要訪問其它沒有被選中的值該怎麼辦呢？看看下邊的代碼就知道了：

var rb;

for (i = 0; i < document.forms["myform"].agegroup.length; i++) {
rb = document.forms["myform"].agegroup[1];
if (rb.checked) {
...
}
}

R原來使用組的名字 (如 agegroup ) 作爲數組，然後給數組加上下標即可 (如 agegroup[0] 是訪問 agegroup 組中的第一個 radio 按鈕)。另外要記住的是在這個數組中，只有一個元素的 checked 屬性值是 true ，因爲任何時候都只有一個 radio 按鈕被選中。請看在線示例。

【select 和 option 對象】

使用 select 選項列表 (即是通常的下拉列表框之類的) 也是一種給用戶提供選項的有用方法，看一下下邊的代碼：

<select name="state" size=1>
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="DC">District of Columbia
...
<option value="WY">Wyoming
</select>

一個 select 對象是由 <SELECT> 標記創建的。此對象的 options 屬性是一個對應於 option 對象羣的數組，每一個 <OPTION> 標記對應一個 option 對象，也就是對應一個 select 對象的選項。

注意：IE 3.0 不支持 select 和 option 對象。

select 對象的另外兩個常用的屬性是 length 和 selectedIndex 屬性。length 屬性是選項的個數，也就是 options 數組的元素個數；selectedIndex 屬性則給出了被用戶選中的那個選項在 options 數組中的下標。

下邊的代碼中，變量 i 是當前用戶選中的那個選項在 options 中的下標，而第二行語句通過變量 options[1] 使得變量 s 指向被選中的選項對應的那個 option 對象：

var i = document.forms["myForm"].state.selectedIndex;
var s = document.forms["myForm"].state.options[1];

不過上邊的代碼只是對於 select 對象爲單選的情況下有用，當你在 <SELECT> 標記中加入 MULTIPLE 屬性後，用戶就可以選擇多個選項了，在這種情況下，selectedIndex 屬性只是指向第一個被選中的項。

爲了處理多選的情況，你可以使用 option 對象的 selected 屬性通過循環檢測每一個 option 對象，就像這個在線示例演示的那樣，查看一下源代碼就知道它是如何實現的了。

【創建和刪除 option 對象】

注意：IE 4.0 對選擇列表 selection 和 option 的方法不同於 Netscape ，這一部分內容只能運用在 Netscape 3.0 或者更高版本。

你還可以通過代碼創建和刪除選項 option 對象。創建 option 對象使用 Option 數據結構，例如：

var opt = new Option(text, value, defaultSelected, selected)

參數 text 是顯示在頁面上的選項的文字，參數 value 對應於 <OPTION> 標記中的 VALUE="...." 屬性，即 option 對象的值；參數 defaultSelected 和 selected 是布爾值，用來設置此新建的 option 對象是否爲默認選項，以及是否被選中，這兩個參數都是可選的，即可以不提供這兩個參數的參數值。這個 option 對象可以被加入到一個 options 數組中。而刪除一個已經存在的 option 對象，只需將此對象在數組中的那個元素設置爲空 ('null ' 值) 即可，同時，這樣也使數組變小了。

這個在線示例演示瞭如何創建一個兩層的菜單系統，而且此菜單系統的第二層菜單是根據第一層菜單動態生成的。注意，這個例子不能在 IE 瀏覽器中使用。

此例中一些值得注意的地方：

第一，爲每一個二級菜單設置一個數組；
不管選擇了哪個大類，都會觸發 onChange 事件，然後調用 setOptions() 函數設置二級菜單；
函數 setOptions() 首先將原有的二級菜單全部選項刪除，然後再將新的二級菜單加入到選項列表中；
一旦二級菜單被設置完成，我們就調用 history.go(0) 來刷新當前頁面，促使新的選項能夠顯示出來。
JavaScript教程 - 第五部分高級話題

2003-09-03 16:44
來源：

[正文]

在這一章中，我們將大致的學習一下一些 JavaScript 中比較高級的話題，在此我們只是通過一些例子大致學習，而不進行深入探討。

創建你自己的對象

正如您所看到的，JavaScript 提供了很多網頁組件和數據的對象及對象類型。但是，您的目光不能僅僅限於這些，您可以根據自己的需要創建自己的對象、屬性和方法，這是很有用的，比如說您需要一個比較複雜的數據結構的時候，您就需要這樣做。

在創建一個新的對象之前，您首先要創建一個數據結構。這些工作都在一個函數裏邊處理，在該函數中定義您的對象的屬性（可以給這些屬性設置初始值），然後你就可以創建居於此對象的方法了。

【構造對象函數】

每一個對象都需要一個構造對象函數，我們通過使用 new 關鍵字調用此函數來創建一個新的對象實例。這類函數定義了對象的屬性，同時給這些屬性設置初始值。您還可以在此類函數中聲明對象的方法。

下邊就是使用構造對象函數的一個例子，在這個函數中定義了一個新的對象 Product，此對象定義了每一個產品的基本屬性：

function Product(name, num, price, shipping, quantity) {

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
}

注意關鍵字 this ，它指向被創建的對象。您可以像下邊那樣創建新的 Product 對象實例：

var item1 = new Product("blender", "9003-2", 24.95, 2.50, 2);
var item2 = new Product("juicer", "9117-1", 49.95, 5.00, 1);

你還可以像訪問其它對象的屬性那樣訪問 Product 對象的屬性：

var total = (item1.price + item1.shippingCost) * item1.quantity;

【定義方法】

上邊的例子中通過訪問 Product 對象 item1 的 price 、shippingCost 和 quantity 屬性計算 item1 的總價值，如果我們需要經常計算總價值，那麼像上邊那樣用起來就很不方便，不過不用擔心，我們可以爲計算總價值創建一個方法，很簡單，只要在構造對象函數中添加一行代碼：“this.totalCost = totalCost; ”，然後在構造對象函數的後邊定義一個名爲 totalCost 的函數：

function Product(name, num, price, shipping, quantity) {

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
this.totalCost = totalCost;
}

function totalCost() {

return ((this.price + this.shippingCost) * this.quantity);
}

注意在構造對象函數中定義該對象方法的格式：this.methodName = functionName ，這裏的方法名和函數名並不需要使用相同的名字，我們這裏是爲了看得清楚才使用相同的名字 totalCost 的。現在我們就可以使用此對象的方法了：

var total = item1.totalCost();

如果想了解如何構建和使用自定義對象，可以看一下這個在線示例，這個例子中定義了一個簡單的購物車，我們構建的對象名爲 ShoppingCart ，同時還給這個對象定義了增加和刪除產品項的方法。

Cookies

使用 cookie ，您可以將一些數據信息保存在客戶端用戶的機器中，而在以後用戶瀏覽您的網頁的時候再調出來使用。通常我們使用 cookie 保存一些數據、登陸帳號等。

創建一個 cookie 需要用到下邊的信息：
通常，您只需要設置前兩項 "cookie 的名字=cookie 的值" 和 "結束時間" 即可。在設置結束時間的時候，您可以使用 Date 對象，但要注意格式，單位是毫秒。下邊就是一個例子，在這個例子中，"結束時間" 被設置成從當前時間算起過任意多天 (此例設置的 "結束時間" 是 7 天后)：

var days = 7;
var expdate = new Date();
expdate.setTime (expdate.getTime() + (86400 * 1000 * days));

我們通過 document.cookie 屬性來對 cookie 的數據進行存取。cookie 的格式是 "cookie 的名字=cookie 的值; expires =cookie 的結束時間; path =路徑 "，而所有的 cookie 都是保存在 document.cookie 屬性中的，它們之間使用分號 "; " 分開，所以雖然您可以單獨地設置各個 cookie ，但卻要通過切分操作才能得到各個 cookie 的值，請參照下邊的示例。

【經常用到的 cookie 函數】

爲了讓您有個好的開始，下邊的三個函數分別提供了設置、刪除、獲取 cookie 的功能：

function setCookie (name, value, expires) {

document.cookie = name + "=" + escape(value) +
"; expires=" + expires.toGMTString() + "; path=/";
}

function getCookie(name) {

var search;

search = name + "="
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length ;
end = document.cookie.indexOf(";", offset) ;
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
else
return "";
}

function deleteCookie(name) {

var expdate = new Date();
expdate.setTime(expdate.getTime() - (86400 * 1000 * 1));
setCookie(name, "", expdate);
}

escape() 和 unescape() 是 JavaScript 的內建函數，它們用來將一些特殊字符轉換成十六進制代碼。通常情況下，cookie 中的名字、值都不能包含任何空格、逗號或分號。使用這兩個函數可以將這一類的字符轉換成合法的可供 cookie 使用的十六進制字符。

刪除所有您不再使用的 cookie 是一個很好的習慣，因爲客戶端會限制您可以存儲的 cookie 個數 (對於 Netscape 瀏覽器來說：每一個主機/域最多是 20 個 cookie ，總共可以存儲 300 個)。上邊的刪除 cookie 的函數將 cookie 的結束時間設置成前一天的時間，這樣就可以達到刪除的目的了。

看看這個在線示例就知道上邊函數的用法了。

注意：以下的部分使用 JavaScript 1.2 ，而且只運用於 Netscape 和 IE version 4.0 或者更高版本。

事件捕捉

我們在這個教程中已經學過了事件句柄 (event handler)，Internet Explorer 瀏覽器幾乎爲每一個 HTML 標記提供了事件句柄，而 Netscape 卻有所不同，雖然它也爲很多 HTML 標記提供了事件句柄，但是一些事件必須通過別的方法來捕捉。

【在 Netscape 中捕捉事件】

在 Netscape 4 或者更高版本的瀏覽器中，你可以捕捉當前瀏覽窗口中 window 、layer 或 document 級別的對象的事件。captureEvent() 方法可以完成此操作，此方法指定想要捕捉的事件，然後在通過編寫函數來處理此事件句柄。

下邊的例子中我們通知 window 對象捕捉鼠標點擊的事件：

window.captureEvents(Event.CLICK);
window.document.onClick = myClick;

function myClick(even) {
...
}

請注意，我們在到 captureEvents() 方法中傳送參數 Event.CLICK 。這個事件對象 Event 包含了與事件有關的信息。而 Event.CLICK 是一個指向通常事件類型的對象實例，其它一些事件類型如下：
如果想捕捉更多的事件，您必須使用邏輯或運算符“| ”來分割各個事件類型，如下邊的代碼所示：

window.captureEvents(Event.MOUSEDOWN | Event.KEYDOWN);
window.document.onMouseDown = myMouseDown;
window.document.onKeyDown = myKeyDown;

我們將 event 對象傳遞給事先安排好的事件句柄 (即此事件的處理函數)，這個對象包含了一些通常的時間數據，例如它的類型等等。

【Internet Explorer 中的事件】

在 Internet Explorer 中不需要傳遞 event 對象，因爲通常的時間對象都是 window 對象的一個屬性。不幸的是，IE 的這些屬性和 Netscape 的卻不盡相同。

【編寫具有兼容性的代碼】

幸運的是，這兩種瀏覽器之間還是有共同的代碼可以使用的，最重要的是能夠使用代碼將兩種瀏覽器區分開來。你可以嘗試使用一些對象來試探瀏覽器的類型，例如，你可以使用 document.layers 對象來試探，這個對象是 Netscape 支持的對象，而相對應的 document.all 對象則是隻有 IE 才支持的對象， Netscape 則不支持：

if (document.layers) {

// 在此處編寫 Netscape 支持的代碼
...
}

else if (document.all) {

// 在此處編寫 IE 支持的代碼
...
}

else {

// 在此處編寫 Netscape 和 IE 都支持的代碼
...
}

如果所試探的對象不存在 (即當前的瀏覽器不支持)，它的值爲空 (null ) ，這就促使 if 表達式的值爲“假” (false )。這種方法也可以用來防止這兩種瀏覽器不支持該對象的老版本試圖執行這些代碼。

看一下這個在線示例將會對您又很大的幫助。例子中的代碼可以在 Netscape 和 IE 兩種瀏覽器中實現相同的效果。

正則表達式

正則表達式是用於模式匹配的，它提供了強大的字符串替換、轉換以及搜索功能。

Netscape 和 IE 在正則表達式對象的使用上有細微的不同，但是下邊的代碼卻是通用的：

var myRE = /匹配模式/標記;

匹配模式的過程被看成是逐字匹配的，同時使用正則表達式還能匹配特殊字符或特殊格式的字符串 (左邊的符號是匹配模式中使用的特殊格式)：
由於 '* ' 是特殊字符，它的作用是匹配零個或零個以上的 '* ' 前邊的字符，所以如果想匹配字符 '* '，需要在此字符前加一個反斜槓 '/ ' 字符。因此 '/* ' 是匹配一個字符 '* '。你可以到 Netscape's JavaScript Reference 中去看一下有關正則表達式的細節。

標記可以是下邊的值：
test() 方法用來比較已知的字符串，如果匹配則返回“真”值 (true )。可以看一下這個在線示例，在這個例子中，使用了正則表達式來判斷用戶的輸入是否符合電子郵件 (Email ) 地址的格式：[email protected] 。

動態HTML [DHTML ]

動態 HTML (Dynamic HTML 或 DHTML ) 給 HTML 增加了幾個新的標記，同時也增加了幾個 JavaScript 的對象。動態 HTML 的一個主要特性是充分利用網頁中的層 (layer ) 和位置 (position )。

在這裏我們再次聲明，Netscape 和 IE 在應用上是有所不同的，Netscape 增加了支持“級聯樣式單” (Cascading Style Sheets 或 CCS ) 的 <LAYER> 標記用來定位網頁中的元素，而 IE 卻支持更多的樣式單，這些樣式單都是居於 World Wide Web 聯盟標準的 (可以參見第六部分的 DHTML 相關鏈接)。

【給頁面的內容定位】

雖然 Netscape 對 CSS 的支持比較有限，但是我們還是可以很容易地使用 <LAYER> 標記來創建被定位的內容。下邊的代碼在兩種瀏覽器中可以產生相同的效果：

Netscape IE

<layer bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
顯示的文本。
</layer>

IE

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

爲了讓代碼在兩種瀏覽器中都能實現相同的效果，我們可以使用前邊講過的方法首先探測一下瀏覽器的類型，然後再分別使用 document.writeln() 輸出適用於兩種瀏覽器的代碼參見在線示例。

【文檔對象模型DOM 】

現在我們已經可以給網頁中的內容定位了，但我們怎樣才能熟練巧妙地使用這種方法使它成爲 DHTML 技術的一部分呢？“文檔對象模型” (簡稱 DOM ) 是一個很流行的名字，它指的是在網頁中的 JavaScript 分級對象。DHTML 爲層與樣式單增加了一些新的對象，你可以像使用 JavaScript 中其它對象那樣使用這些對象。

當然，Netscape 和 IE 在 DOM 上的應用也有所不同，但是我們還是可以像上邊的例子那樣使用相應的代碼來實現相同的效果。

你可以將一個內容塊從一個地方移動 (重新定位) 到另一個地方，可以讓它從看得見變成看不見。爲了實現這些目的，你要針對不同的瀏覽器正確地處理好 JavaScript 對象。

讓我們重新寫一下上邊的代碼，並且在代碼中給內容塊加上名字，這樣我們才能在程序代碼中引用這些內容塊作爲對象來使用 (這其實就是 DOM 的一部分)：

Netscape IE

<layer name="block1" bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
Some text to display.
</layer>

IE

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

現在我們將內容塊放在 JavaScript 函數中當作對象來使用，同時返回此內容塊對象本身：

function getBlock(name) {

// For Netscape.

if (document.layers)
return(document.layers[name]);

// For IE.

else if (document.all) {
layer = eval('document.all.' + name + '.style');
return(layer);
}

// 以上都不是，則返回 null.

else
return(null);
}

正如你所看到的，Netscape 使用 document.layers 數組來存儲塊對象，而 IE 則是創建名爲 document.all.塊名字.style 的對象來表示塊。上邊的函數返回了塊對象，於是我們就可以使用這個返回值來訪問塊的屬性或執行塊的方法了。

現在讓我們來看一下在線示例是如何移動一個塊的。對於 Netscape 來說，我們只要設置塊對象的 left 和 top 屬性的值就可以達到移動塊的目的，在 IE 中則是使用 pixelLeft 和 pixelTop 屬性。在下邊的函數 moveBlockBy 中將會改變這些屬性的值：

function moveBlockBy(x, y) {

var block = getBlock("block1");

if (document.layers) {
block.left += x;
block.top += y;
}
else if (document.all) {
block.pixelLeft += x;
block.pixelTop += y;
}
}

參數 x 和 y 是塊在水平和垂直方向上的移動增量。

【處理瀏覽器的兼容性問題】

正如你所看到的，兩種瀏覽器在 DOM 上的運用也有很多不同之處，這樣就給你在網頁中實現動態 HTML 效果帶來了挑戰，所以在編寫代碼的時候應該儘量避免使用不兼容的屬性、方法等。

當然，你也可以只設計謀一種瀏覽器的代碼，例如只設計 IE 瀏覽器可執行的代碼，而不考慮 Netscape ，但是這樣你就將會失去 Netscape 的用戶羣。或者你也可以設計多套網頁或網站，讓它們分別支持各種瀏覽器，但是這樣將會給維護網頁或網站帶來很大的麻煩，增加複雜性。

var block = getBlock("block1");

if (document.layers) {
block.left += x;
block.top += y;
}
else if (document.all) {
block.pixelLeft += x;
block.pixelTop += y;
}
}

// For Netscape.

if (document.layers)
return(document.layers[name]);

// For IE.

else if (document.all) {
layer = eval('document.all.' + name + '.style');
return(layer);
}

// 以上都不是，則返回 null.

else
return(null);
}

正如你所看到的，Netscape 使用 document.layers 數組來存儲塊對象，而 IE 則是創建名爲 document.all.塊名字.style 的對象來表示塊。上邊的函數返回了塊對象，於是我們就可以使用這個返回值來訪問塊的屬性或執行塊的方法了。

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

<layer name="block1" bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
Some text to display.
</layer>

IE

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

<layer bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
顯示的文本。
</layer>

IE

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

// 在此處編寫 Netscape 支持的代碼
...
}

else if (document.all) {

// 在此處編寫 IE 支持的代碼
...
}

else {

// 在此處編寫 Netscape 和 IE 都支持的代碼
...
}

如果所試探的對象不存在 (即當前的瀏覽器不支持)，它的值爲空 (null ) ，這就促使 if 表達式的值爲“假” (false )。這種方法也可以用來防止這兩種瀏覽器不支持該對象的老版本試圖執行這些代碼。

我們將 event 對象傳遞給事先安排好的事件句柄 (即此事件的處理函數)，這個對象包含了一些通常的時間數據，例如它的類型等等。

function myClick(even) {
...
}

請注意，我們在到 captureEvents() 方法中傳送參數 Event.CLICK 。這個事件對象 Event 包含了與事件有關的信息。而 Event.CLICK 是一個指向通常事件類型的對象實例，其它一些事件類型如下：

document.cookie = name + "=" + escape(value) +
"; expires=" + expires.toGMTString() + "; path=/";
}

function getCookie(name) {

var search;

search = name + "="
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length ;
end = document.cookie.indexOf(";", offset) ;
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
else
return "";
}

function deleteCookie(name) {

var expdate = new Date();
expdate.setTime(expdate.getTime() - (86400 * 1000 * 1));
setCookie(name, "", expdate);
}

escape() 和 unescape() 是 JavaScript 的內建函數，它們用來將一些特殊字符轉換成十六進制代碼。通常情況下，cookie 中的名字、值都不能包含任何空格、逗號或分號。使用這兩個函數可以將這一類的字符轉換成合法的可供 cookie 使用的十六進制字符。

我們通過 document.cookie 屬性來對 cookie 的數據進行存取。cookie 的格式是 "cookie 的名字=cookie 的值; expires =cookie 的結束時間; path =路徑 "，而所有的 cookie 都是保存在 document.cookie 屬性中的，它們之間使用分號 "; " 分開，所以雖然您可以單獨地設置各個 cookie ，但卻要通過切分操作才能得到各個 cookie 的值，請參照下邊的示例。

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
this.totalCost = totalCost;
}

function totalCost() {

return ((this.price + this.shippingCost) * this.quantity);
}

注意在構造對象函數中定義該對象方法的格式：this.methodName = functionName ，這裏的方法名和函數名並不需要使用相同的名字，我們這裏是爲了看得清楚才使用相同的名字 totalCost 的。現在我們就可以使用此對象的方法了：

你還可以像訪問其它對象的屬性那樣訪問 Product 對象的屬性：

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
}

注意關鍵字 this ，它指向被創建的對象。您可以像下邊那樣創建新的 Product 對象實例：

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

一些實用的 Javascript 代碼

2003-09-03 02:27

來源：

[正文]

οncοntextmenu="window.event.returnvalue=false" 將徹底屏蔽鼠標右鍵
<table border οncοntextmenu=return(false)><td>no</table> 可用於Table

<body onselectstart="return false"> 取消選取、防止複製

οnpaste="return false" 不準粘貼

οncοpy="return false;" oncut="return false;" 防止複製

<input style="ime-mode:disabled"> 關閉輸入法

永遠都會帶着框架
<script language="javascript"></script>

防止被人frame
<SCRIPT LANGUAGE=javascript></SCRIPT>

取得控件的絕對位置

//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>

//VBScript
<script language="VBScript"></script>

光標是停在文本框文字的最後
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" οnfοcus="cc()">

最小化、最大化、關閉窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close"></OBJECT>

<input type=button value=最小化 οnclick=hh1.Click()>
<input type=button value=最大化 οnclick=hh2.Click()>
<input type=button value=關閉 οnclick=hh3.Click()>
本例適用於IE

οncοntextmenu="window.event.returnvalue=false" 將徹底屏蔽鼠標右鍵
<table border οncοntextmenu=return(false)><td>no</table> 可用於Table

<body onselectstart="return false"> 取消選取、防止複製

οnpaste="return false" 不準粘貼

οncοpy="return false;" oncut="return false;" 防止複製

<input style="ime-mode:disabled"> 關閉輸入法

永遠都會帶着框架
<script language="javascript"></script>

防止被人frame
<SCRIPT LANGUAGE=javascript></SCRIPT>

取得控件的絕對位置

<input type=button value=最小化 οnclick=hh1.Click()>
<input type=button value=最大化 οnclick=hh2.Click()>
<input type=button value=關閉 οnclick=hh3.Click()>
本例適用於IE

for (i = 0; i < document.forms["myform"].agegroup.length; i++) {
rb = document.forms["myform"].agegroup[1];
if (rb.checked) {
...
}
}

</body>
</html>

使用 form [表單] 對象

【form 對象】

在前邊我們已經講過了如何使用 elements 數組了。例如，在一個頁面中有兩個 form 對象：

</body>
</html>

要使用名爲 'quantity ' 的元素，可以使用下邊三種方法中的任何一種：

var e = document.forms["orderdata"].elements[1];
var e = document.forms.orderdata.elements["quantity"];
var e = document.orderdata.quantity;

你可以通過元素的 type 屬性知道元素是什麼類型，在上邊的例子中，我們可以使用下邊的代碼來獲得名爲 'quantity' 的元素的類型：

document.orderdata.quantity.type

結果將會返回 'text '。

【處理一個表單 form 】

form 對象各元素類型

【button 按鈕對象】

你也可以通過使用 onClick 事件句柄來改變 submit 和 reset 按鈕的默認動作。這個在線示例中就使用了這三種不同的按鈕來完成計算功能。

技巧2 ：reset 按鈕有默認動作，那就是將表單中所有的內容恢復到最初的狀態，如果想改變其默認動作，可以像這個在線示例那樣。

【text (文本框)、password (密碼輸入框)、hidden (隱藏域) 和 t extarea (多行文本框) 對象】

這幾個對象都很相似，輸入的都是字符串，它們僅僅是顯示的方式不一樣而已：

text - 一個單行的文本輸入框
password - 一個單行的密碼輸入框，輸入的字符將不會顯示出來，顯示出來的只是 '* ' 號
hidden - 一個單行的文本域，但是它不會在頁面上顯示任何東西，而且使用網頁的用戶不能直接修改它的值，但是你卻可以通過代碼修改它的值
textarea - 多行的文本輸入框，可以在框中使用 “回車” 換行

你只有確實地改變了文本框中的內容纔會觸發此事件。如果你將輸入的內容清楚，然後輸入完全相同的內容，將不會觸發 onChange 事件。

【checkbox (複選框) 和 radio (單選框) 按鈕對象】

checkbox 和 radio 按鈕可以爲用戶提供一序列選項，checkbox 用於可以多選的選項中，而 radio 用於只能單選的選項中。

var rb;

for (i = 0; i < document.forms["myform"].agegroup.length; i++) {
rb = document.forms["myform"].agegroup[1];
if (rb.checked) {
...
}
}

【select 和 option 對象】

使用 select 選項列表 (即是通常的下拉列表框之類的) 也是一種給用戶提供選項的有用方法，看一下下邊的代碼：

注意：IE 3.0 不支持 select 和 option 對象。

var i = document.forms["myForm"].state.selectedIndex;
var s = document.forms["myForm"].state.options[1];

【創建和刪除 option 對象】

注意：IE 4.0 對選擇列表 selection 和 option 的方法不同於 Netscape ，這一部分內容只能運用在 Netscape 3.0 或者更高版本。

你還可以通過代碼創建和刪除選項 option 對象。創建 option 對象使用 Option 數據結構，例如：

var opt = new Option(text, value, defaultSelected, selected)

此例中一些值得注意的地方：

第一，爲每一個二級菜單設置一個數組；
不管選擇了哪個大類，都會觸發 onChange 事件，然後調用 setOptions() 函數設置二級菜單；
函數 setOptions() 首先將原有的二級菜單全部選項刪除，然後再將新的二級菜單加入到選項列表中；
一旦二級菜單被設置完成，我們就調用 history.go(0) 來刷新當前頁面，促使新的選項能夠顯示出來。
JavaScript教程 - 第五部分高級話題

2003-09-03 16:44
來源：

[正文]

在這一章中，我們將大致的學習一下一些 JavaScript 中比較高級的話題，在此我們只是通過一些例子大致學習，而不進行深入探討。

創建你自己的對象

正如您所看到的，JavaScript 提供了很多網頁組件和數據的對象及對象類型。但是，您的目光不能僅僅限於這些，您可以根據自己的需要創建自己的對象、屬性和方法，這是很有用的，比如說您需要一個比較複雜的數據結構的時候，您就需要這樣做。

在創建一個新的對象之前，您首先要創建一個數據結構。這些工作都在一個函數裏邊處理，在該函數中定義您的對象的屬性（可以給這些屬性設置初始值），然後你就可以創建居於此對象的方法了。

【構造對象函數】

每一個對象都需要一個構造對象函數，我們通過使用 new 關鍵字調用此函數來創建一個新的對象實例。這類函數定義了對象的屬性，同時給這些屬性設置初始值。您還可以在此類函數中聲明對象的方法。

下邊就是使用構造對象函數的一個例子，在這個函數中定義了一個新的對象 Product，此對象定義了每一個產品的基本屬性：

function Product(name, num, price, shipping, quantity) {

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
}

注意關鍵字 this ，它指向被創建的對象。您可以像下邊那樣創建新的 Product 對象實例：

var item1 = new Product("blender", "9003-2", 24.95, 2.50, 2);
var item2 = new Product("juicer", "9117-1", 49.95, 5.00, 1);

你還可以像訪問其它對象的屬性那樣訪問 Product 對象的屬性：

var total = (item1.price + item1.shippingCost) * item1.quantity;

【定義方法】

上邊的例子中通過訪問 Product 對象 item1 的 price 、shippingCost 和 quantity 屬性計算 item1 的總價值，如果我們需要經常計算總價值，那麼像上邊那樣用起來就很不方便，不過不用擔心，我們可以爲計算總價值創建一個方法，很簡單，只要在構造對象函數中添加一行代碼：“this.totalCost = totalCost; ”，然後在構造對象函數的後邊定義一個名爲 totalCost 的函數：

function Product(name, num, price, shipping, quantity) {

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
this.totalCost = totalCost;
}

function totalCost() {

return ((this.price + this.shippingCost) * this.quantity);
}

注意在構造對象函數中定義該對象方法的格式：this.methodName = functionName ，這裏的方法名和函數名並不需要使用相同的名字，我們這裏是爲了看得清楚才使用相同的名字 totalCost 的。現在我們就可以使用此對象的方法了：

var total = item1.totalCost();

如果想了解如何構建和使用自定義對象，可以看一下這個在線示例，這個例子中定義了一個簡單的購物車，我們構建的對象名爲 ShoppingCart ，同時還給這個對象定義了增加和刪除產品項的方法。

Cookies

使用 cookie ，您可以將一些數據信息保存在客戶端用戶的機器中，而在以後用戶瀏覽您的網頁的時候再調出來使用。通常我們使用 cookie 保存一些數據、登陸帳號等。

創建一個 cookie 需要用到下邊的信息：
通常，您只需要設置前兩項 "cookie 的名字=cookie 的值" 和 "結束時間" 即可。在設置結束時間的時候，您可以使用 Date 對象，但要注意格式，單位是毫秒。下邊就是一個例子，在這個例子中，"結束時間" 被設置成從當前時間算起過任意多天 (此例設置的 "結束時間" 是 7 天后)：

var days = 7;
var expdate = new Date();
expdate.setTime (expdate.getTime() + (86400 * 1000 * days));

我們通過 document.cookie 屬性來對 cookie 的數據進行存取。cookie 的格式是 "cookie 的名字=cookie 的值; expires =cookie 的結束時間; path =路徑 "，而所有的 cookie 都是保存在 document.cookie 屬性中的，它們之間使用分號 "; " 分開，所以雖然您可以單獨地設置各個 cookie ，但卻要通過切分操作才能得到各個 cookie 的值，請參照下邊的示例。

【經常用到的 cookie 函數】

爲了讓您有個好的開始，下邊的三個函數分別提供了設置、刪除、獲取 cookie 的功能：

function setCookie (name, value, expires) {

document.cookie = name + "=" + escape(value) +
"; expires=" + expires.toGMTString() + "; path=/";
}

function getCookie(name) {

var search;

search = name + "="
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length ;
end = document.cookie.indexOf(";", offset) ;
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
else
return "";
}

function deleteCookie(name) {

var expdate = new Date();
expdate.setTime(expdate.getTime() - (86400 * 1000 * 1));
setCookie(name, "", expdate);
}

escape() 和 unescape() 是 JavaScript 的內建函數，它們用來將一些特殊字符轉換成十六進制代碼。通常情況下，cookie 中的名字、值都不能包含任何空格、逗號或分號。使用這兩個函數可以將這一類的字符轉換成合法的可供 cookie 使用的十六進制字符。

刪除所有您不再使用的 cookie 是一個很好的習慣，因爲客戶端會限制您可以存儲的 cookie 個數 (對於 Netscape 瀏覽器來說：每一個主機/域最多是 20 個 cookie ，總共可以存儲 300 個)。上邊的刪除 cookie 的函數將 cookie 的結束時間設置成前一天的時間，這樣就可以達到刪除的目的了。

看看這個在線示例就知道上邊函數的用法了。

注意：以下的部分使用 JavaScript 1.2 ，而且只運用於 Netscape 和 IE version 4.0 或者更高版本。

事件捕捉

我們在這個教程中已經學過了事件句柄 (event handler)，Internet Explorer 瀏覽器幾乎爲每一個 HTML 標記提供了事件句柄，而 Netscape 卻有所不同，雖然它也爲很多 HTML 標記提供了事件句柄，但是一些事件必須通過別的方法來捕捉。

【在 Netscape 中捕捉事件】

在 Netscape 4 或者更高版本的瀏覽器中，你可以捕捉當前瀏覽窗口中 window 、layer 或 document 級別的對象的事件。captureEvent() 方法可以完成此操作，此方法指定想要捕捉的事件，然後在通過編寫函數來處理此事件句柄。

下邊的例子中我們通知 window 對象捕捉鼠標點擊的事件：

window.captureEvents(Event.CLICK);
window.document.onClick = myClick;

function myClick(even) {
...
}

請注意，我們在到 captureEvents() 方法中傳送參數 Event.CLICK 。這個事件對象 Event 包含了與事件有關的信息。而 Event.CLICK 是一個指向通常事件類型的對象實例，其它一些事件類型如下：
如果想捕捉更多的事件，您必須使用邏輯或運算符“| ”來分割各個事件類型，如下邊的代碼所示：

window.captureEvents(Event.MOUSEDOWN | Event.KEYDOWN);
window.document.onMouseDown = myMouseDown;
window.document.onKeyDown = myKeyDown;

我們將 event 對象傳遞給事先安排好的事件句柄 (即此事件的處理函數)，這個對象包含了一些通常的時間數據，例如它的類型等等。

【Internet Explorer 中的事件】

在 Internet Explorer 中不需要傳遞 event 對象，因爲通常的時間對象都是 window 對象的一個屬性。不幸的是，IE 的這些屬性和 Netscape 的卻不盡相同。

【編寫具有兼容性的代碼】

幸運的是，這兩種瀏覽器之間還是有共同的代碼可以使用的，最重要的是能夠使用代碼將兩種瀏覽器區分開來。你可以嘗試使用一些對象來試探瀏覽器的類型，例如，你可以使用 document.layers 對象來試探，這個對象是 Netscape 支持的對象，而相對應的 document.all 對象則是隻有 IE 才支持的對象， Netscape 則不支持：

if (document.layers) {

// 在此處編寫 Netscape 支持的代碼
...
}

else if (document.all) {

// 在此處編寫 IE 支持的代碼
...
}

else {

// 在此處編寫 Netscape 和 IE 都支持的代碼
...
}

如果所試探的對象不存在 (即當前的瀏覽器不支持)，它的值爲空 (null ) ，這就促使 if 表達式的值爲“假” (false )。這種方法也可以用來防止這兩種瀏覽器不支持該對象的老版本試圖執行這些代碼。

看一下這個在線示例將會對您又很大的幫助。例子中的代碼可以在 Netscape 和 IE 兩種瀏覽器中實現相同的效果。

正則表達式

正則表達式是用於模式匹配的，它提供了強大的字符串替換、轉換以及搜索功能。

Netscape 和 IE 在正則表達式對象的使用上有細微的不同，但是下邊的代碼卻是通用的：

var myRE = /匹配模式/標記;

匹配模式的過程被看成是逐字匹配的，同時使用正則表達式還能匹配特殊字符或特殊格式的字符串 (左邊的符號是匹配模式中使用的特殊格式)：
由於 '* ' 是特殊字符，它的作用是匹配零個或零個以上的 '* ' 前邊的字符，所以如果想匹配字符 '* '，需要在此字符前加一個反斜槓 '/ ' 字符。因此 '/* ' 是匹配一個字符 '* '。你可以到 Netscape's JavaScript Reference 中去看一下有關正則表達式的細節。

標記可以是下邊的值：
test() 方法用來比較已知的字符串，如果匹配則返回“真”值 (true )。可以看一下這個在線示例，在這個例子中，使用了正則表達式來判斷用戶的輸入是否符合電子郵件 (Email ) 地址的格式：[email protected] 。

動態HTML [DHTML ]

動態 HTML (Dynamic HTML 或 DHTML ) 給 HTML 增加了幾個新的標記，同時也增加了幾個 JavaScript 的對象。動態 HTML 的一個主要特性是充分利用網頁中的層 (layer ) 和位置 (position )。

在這裏我們再次聲明，Netscape 和 IE 在應用上是有所不同的，Netscape 增加了支持“級聯樣式單” (Cascading Style Sheets 或 CCS ) 的 <LAYER> 標記用來定位網頁中的元素，而 IE 卻支持更多的樣式單，這些樣式單都是居於 World Wide Web 聯盟標準的 (可以參見第六部分的 DHTML 相關鏈接)。

【給頁面的內容定位】

雖然 Netscape 對 CSS 的支持比較有限，但是我們還是可以很容易地使用 <LAYER> 標記來創建被定位的內容。下邊的代碼在兩種瀏覽器中可以產生相同的效果：

Netscape IE

<layer bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
顯示的文本。
</layer>

IE

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

爲了讓代碼在兩種瀏覽器中都能實現相同的效果，我們可以使用前邊講過的方法首先探測一下瀏覽器的類型，然後再分別使用 document.writeln() 輸出適用於兩種瀏覽器的代碼參見在線示例。

【文檔對象模型DOM 】

現在我們已經可以給網頁中的內容定位了，但我們怎樣才能熟練巧妙地使用這種方法使它成爲 DHTML 技術的一部分呢？“文檔對象模型” (簡稱 DOM ) 是一個很流行的名字，它指的是在網頁中的 JavaScript 分級對象。DHTML 爲層與樣式單增加了一些新的對象，你可以像使用 JavaScript 中其它對象那樣使用這些對象。

當然，Netscape 和 IE 在 DOM 上的應用也有所不同，但是我們還是可以像上邊的例子那樣使用相應的代碼來實現相同的效果。

你可以將一個內容塊從一個地方移動 (重新定位) 到另一個地方，可以讓它從看得見變成看不見。爲了實現這些目的，你要針對不同的瀏覽器正確地處理好 JavaScript 對象。

讓我們重新寫一下上邊的代碼，並且在代碼中給內容塊加上名字，這樣我們才能在程序代碼中引用這些內容塊作爲對象來使用 (這其實就是 DOM 的一部分)：

Netscape IE

<layer name="block1" bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
Some text to display.
</layer>

IE

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

現在我們將內容塊放在 JavaScript 函數中當作對象來使用，同時返回此內容塊對象本身：

function getBlock(name) {

// For Netscape.

if (document.layers)
return(document.layers[name]);

// For IE.

else if (document.all) {
layer = eval('document.all.' + name + '.style');
return(layer);
}

// 以上都不是，則返回 null.

else
return(null);
}

正如你所看到的，Netscape 使用 document.layers 數組來存儲塊對象，而 IE 則是創建名爲 document.all.塊名字.style 的對象來表示塊。上邊的函數返回了塊對象，於是我們就可以使用這個返回值來訪問塊的屬性或執行塊的方法了。

現在讓我們來看一下在線示例是如何移動一個塊的。對於 Netscape 來說，我們只要設置塊對象的 left 和 top 屬性的值就可以達到移動塊的目的，在 IE 中則是使用 pixelLeft 和 pixelTop 屬性。在下邊的函數 moveBlockBy 中將會改變這些屬性的值：

function moveBlockBy(x, y) {

var block = getBlock("block1");

if (document.layers) {
block.left += x;
block.top += y;
}
else if (document.all) {
block.pixelLeft += x;
block.pixelTop += y;
}
}

參數 x 和 y 是塊在水平和垂直方向上的移動增量。

【處理瀏覽器的兼容性問題】

正如你所看到的，兩種瀏覽器在 DOM 上的運用也有很多不同之處，這樣就給你在網頁中實現動態 HTML 效果帶來了挑戰，所以在編寫代碼的時候應該儘量避免使用不兼容的屬性、方法等。

當然，你也可以只設計謀一種瀏覽器的代碼，例如只設計 IE 瀏覽器可執行的代碼，而不考慮 Netscape ，但是這樣你就將會失去 Netscape 的用戶羣。或者你也可以設計多套網頁或網站，讓它們分別支持各種瀏覽器，但是這樣將會給維護網頁或網站帶來很大的麻煩，增加複雜性。

var block = getBlock("block1");

if (document.layers) {
block.left += x;
block.top += y;
}
else if (document.all) {
block.pixelLeft += x;
block.pixelTop += y;
}
}

// For Netscape.

if (document.layers)
return(document.layers[name]);

// For IE.

else if (document.all) {
layer = eval('document.all.' + name + '.style');
return(layer);
}

// 以上都不是，則返回 null.

else
return(null);
}

正如你所看到的，Netscape 使用 document.layers 數組來存儲塊對象，而 IE 則是創建名爲 document.all.塊名字.style 的對象來表示塊。上邊的函數返回了塊對象，於是我們就可以使用這個返回值來訪問塊的屬性或執行塊的方法了。

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

<layer name="block1" bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
Some text to display.
</layer>

IE

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

<layer bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
顯示的文本。
</layer>

IE

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

// 在此處編寫 Netscape 支持的代碼
...
}

else if (document.all) {

// 在此處編寫 IE 支持的代碼
...
}

else {

// 在此處編寫 Netscape 和 IE 都支持的代碼
...
}

如果所試探的對象不存在 (即當前的瀏覽器不支持)，它的值爲空 (null ) ，這就促使 if 表達式的值爲“假” (false )。這種方法也可以用來防止這兩種瀏覽器不支持該對象的老版本試圖執行這些代碼。

我們將 event 對象傳遞給事先安排好的事件句柄 (即此事件的處理函數)，這個對象包含了一些通常的時間數據，例如它的類型等等。

function myClick(even) {
...
}

請注意，我們在到 captureEvents() 方法中傳送參數 Event.CLICK 。這個事件對象 Event 包含了與事件有關的信息。而 Event.CLICK 是一個指向通常事件類型的對象實例，其它一些事件類型如下：

document.cookie = name + "=" + escape(value) +
"; expires=" + expires.toGMTString() + "; path=/";
}

function getCookie(name) {

var search;

search = name + "="
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length ;
end = document.cookie.indexOf(";", offset) ;
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
else
return "";
}

function deleteCookie(name) {

var expdate = new Date();
expdate.setTime(expdate.getTime() - (86400 * 1000 * 1));
setCookie(name, "", expdate);
}

escape() 和 unescape() 是 JavaScript 的內建函數，它們用來將一些特殊字符轉換成十六進制代碼。通常情況下，cookie 中的名字、值都不能包含任何空格、逗號或分號。使用這兩個函數可以將這一類的字符轉換成合法的可供 cookie 使用的十六進制字符。

我們通過 document.cookie 屬性來對 cookie 的數據進行存取。cookie 的格式是 "cookie 的名字=cookie 的值; expires =cookie 的結束時間; path =路徑 "，而所有的 cookie 都是保存在 document.cookie 屬性中的，它們之間使用分號 "; " 分開，所以雖然您可以單獨地設置各個 cookie ，但卻要通過切分操作才能得到各個 cookie 的值，請參照下邊的示例。

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
this.totalCost = totalCost;
}

function totalCost() {

return ((this.price + this.shippingCost) * this.quantity);
}

注意在構造對象函數中定義該對象方法的格式：this.methodName = functionName ，這裏的方法名和函數名並不需要使用相同的名字，我們這裏是爲了看得清楚才使用相同的名字 totalCost 的。現在我們就可以使用此對象的方法了：

你還可以像訪問其它對象的屬性那樣訪問 Product 對象的屬性：

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
}

注意關鍵字 this ，它指向被創建的對象。您可以像下邊那樣創建新的 Product 對象實例：

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

一些實用的 Javascript 代碼

2003-09-03 02:27

來源：

[正文]

οncοntextmenu="window.event.returnvalue=false" 將徹底屏蔽鼠標右鍵
<table border οncοntextmenu=return(false)><td>no</table> 可用於Table
<body onselectstart="return false"> 取消選取、防止複製
οnpaste="return false" 不準粘貼
οncοpy="return false;" oncut="return false;" 防止複製
<link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標
<link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標
<input style="ime-mode:disabled"> 關閉輸入法
永遠都會帶着框架
<script language="javascript"></script>
防止被人frame
<SCRIPT LANGUAGE=javascript></SCRIPT>
<noscript><iframe src=*.html></iframe></noscript> 網頁將不能被另存爲
<input type=button value=查看網頁源代碼
οnclick="window.location = 'view-source:'+ 'http://www.htmlcn.com/'">
取得控件的絕對位置
//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>

//VBScript
<script language="VBScript"></script>
光標是停在文本框文字的最後
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" οnfοcus="cc()">
最小化、最大化、關閉窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close"></OBJECT>
<input type=button value=最小化 οnclick=hh1.Click()>
<input type=button value=最大化 οnclick=hh2.Click()>
<input type=button value=關閉 οnclick=hh3.Click()>
本例適用於IE

οncοntextmenu="window.event.returnvalue=false" 將徹底屏蔽鼠標右鍵
<table border οncοntextmenu=return(false)><td>no</table> 可用於Table
<body onselectstart="return false"> 取消選取、防止複製
οnpaste="return false" 不準粘貼
οncοpy="return false;" oncut="return false;" 防止複製
<link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標
<link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標
<input style="ime-mode:disabled"> 關閉輸入法
永遠都會帶着框架
<script language="javascript"></script>
防止被人frame
<SCRIPT LANGUAGE=javascript></SCRIPT>
<noscript><iframe src=*.html></iframe></noscript> 網頁將不能被另存爲
<input type=button value=查看網頁源代碼
οnclick="window.location = 'view-source:'+ 'http://www.htmlcn.com/'">
取得控件的絕對位置
//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>

//VBScript
<script language="VBScript"></script>
光標是停在文本框文字的最後
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" οnfοcus="cc()">
最小化、最大化、關閉窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close"></OBJECT>
<input type=button value=最小化 οnclick=hh1.Click()>
<input type=button value=最大化 οnclick=hh2.Click()>
<input type=button value=關閉 οnclick=hh3.Click()>
本例適用於IE

for (i = 0; i < document.forms["myform"].agegroup.length; i++) {
rb = document.forms["myform"].agegroup[1];
if (rb.checked) {
...
}
}

</body>
</html>

在下邊幀上，點擊鼠標右鍵，查看一下源代碼，你會發現源代碼就是你輸入的那些字符。

下邊的代碼將頁面轉到距離本頁面位置最近的同時頁面地址 URL 中含有字符串 "netscape " (不區分字母的大小寫) 的頁面：

window.parent.frames[fname].document.bgColor = color;
return false;
}

</html>

當你按下按鈕後，就會觸發 onClick 事件，從而調用 window 對象的 close() 方法，此方法將當前的窗口關閉掉。

創建新的 window (窗口) 對象

【彈出窗口的小測試】

function showAnswer(url) {
window.open(url, "answer", "height=100,width=100,directories=no," +
"location=no,menubar=no," +
"resizeable=no,status=no,toolbar=no");
return false;
} open()

注意：此例中的 “+ ” 好只是爲了代碼能夠換行書寫才加上的，其實它們只是連結字符串而已，沒有別的，不使用 “+ ” 好一樣是可以的。

窗口特性 (即是打開的瀏覽器的樣子 ) 的關鍵字、關鍵字值可以參考下表：

是否顯示工具欄：toolbar[=yes|no]|[=1|0]
是否顯示地址欄：location[=yes|no]|[=1|0]
是否顯示前進、後退、刷新按鈕：directories[=yes|no]|[=1|0]
是否顯示狀態欄：status[=yes|no]|[=1|0]
是否顯示菜單欄：menubar[=yes|no]|[=1|0]
是否顯示滾動條：scrollbars[=yes|no]|[=1|0]
用戶是否可以改變窗口的大小：resizable[=yes|no]|[=1|0]
是否在新窗口中保留瀏覽器的瀏覽歷史紀錄：copyhistory[=yes|no]|[=1|0]
窗口的寬度 (單位爲像素)：width=pixels
窗口的高度 (單位爲像素)：height=pixels

如果在字符串中給定了這些值的話，窗口就會按你定義的現實，否則將會使用默認的值，想要進一步瞭解這方面的信息請參考 Netscape's JavaScript Guide ！

【給窗口指定頁面】

當你使用上面的方法創建了一個新窗口之後，你還可以再次給這個窗口指定新的頁面，這就要用到 open() 方法的返回值了，請看下邊的代碼：

myWin = window.open(url, "", "height=100,width=100");
...
myWin.location = "newpage.html";

window.opener.location = "newpage.html";

【關閉一個窗口】

當你按下按鈕後，就會觸發 onClick 事件，從而調用 window 對象的 close() 方法，此方法將當前的窗口關閉掉。

處理 frame [幀] 對象

正如我們在前邊的章節中提到的那樣，frame 幀其實是單獨的窗口，它對應於單獨的窗口對象，有自己的 location 、history 和 document 屬性。

在這個在線示例中你將會看到一系列的幀，代碼如下：

</html>

function setFrameColor(fname, color) {

window.parent.frames[fname].document.bgColor = color;
return false;
}

下圖很直觀地顯示了我們上邊所講的幀對象的指定關係：

圖 3.1

【引用別的幀/窗口的變量和函數】

你不只是可以引用別的幀/窗口的 document 、window 對象，而且還可以訪問使用別的幀/窗口的變量和函數。

window.parent.frames["A"].setFrameColor(window.name, "#ffffff");

下邊是與幀相關的第二個例子的關係圖：

圖 3.2

類似地，你也可以使用相同的方法使用別的窗口/幀裏邊的全局變量，只需要將上邊例中的函數名改成全局變量名即可。

window 對象的 location 和 history 屬性

window 對象的 location 屬性包含了當前頁面的地址 (URL) 信息，你可以直接改變此屬性值，將其設置成新的地址 (URL)：

window.location = "http://www.yahoo.com";
或者
location = "http://www.yahoo.com";

你還可以通過下邊的兩種方法中的任何一種來使瀏覽器從服務器上下載 (Load ) 頁面：

reload() - 促使瀏覽器重新下載當前的頁面，也就是“刷新”當前頁面了。
replace( URL ) - 促使瀏覽器根據 URL 參數中給出的地址 (URL) 下載頁面，同時在當前瀏覽器存儲的歷史記錄 (即所瀏覽過的頁面的列表) 中使用新的地址(即此方法中的 URL 參數) 覆蓋當前的頁面。

【history 對象】

history 對象是一個很有用的對象，此對象記錄着瀏覽器所瀏覽過的每一個頁面，這些頁面組成了一個歷史記錄列表。history 對象具有兩種方法：

forward() - 將歷史記錄向前移動一個頁面；
back() - 將歷史記錄向後移動一個頁面；

請看，下邊的兩條語句是等價的：

history.go(-1);
history.back();

下邊的代碼將頁面轉到距離本頁面位置最近的同時頁面地址 URL 中含有字符串 "netscape " (不區分字母的大小寫) 的頁面：

history.go("netscape");

在使用這三個方法的時候，如果沒有找到符合條件的歷史記錄的話，將不會發生任何變化，不會改變當前的頁面，也不會顯示錯誤。

<a href="#" onClick="history.back(); return false;">返回</a>

改變窗口頁面的內容

在此例中，你可以試一試輸入一些 HTML 代碼，看看有什麼效果！比如說輸入下邊的代碼：

在下邊幀上，點擊鼠標右鍵，查看一下源代碼，你會發現源代碼就是你輸入的那些字符。

在函數 rewriteFrame() 中，有如下語句：

window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();

【一個小小的改進】

window.parent.frames["text"].document.open("text/html", "replace");
window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();

JavaScript教程 - 第四部分關於form對象

2003-09-03 16:37

來源：

[正文]

使用 form [表單] 對象

【form 對象】

在前邊我們已經講過了如何使用 elements 數組了。例如，在一個頁面中有兩個 form 對象：

</body>
</html>

要使用名爲 'quantity ' 的元素，可以使用下邊三種方法中的任何一種：

var e = document.forms["orderdata"].elements[1];
var e = document.forms.orderdata.elements["quantity"];
var e = document.orderdata.quantity;

你可以通過元素的 type 屬性知道元素是什麼類型，在上邊的例子中，我們可以使用下邊的代碼來獲得名爲 'quantity' 的元素的類型：

document.orderdata.quantity.type

結果將會返回 'text '。

【處理一個表單 form 】

form 對象各元素類型

【button 按鈕對象】

你也可以通過使用 onClick 事件句柄來改變 submit 和 reset 按鈕的默認動作。這個在線示例中就使用了這三種不同的按鈕來完成計算功能。

技巧2 ：reset 按鈕有默認動作，那就是將表單中所有的內容恢復到最初的狀態，如果想改變其默認動作，可以像這個在線示例那樣。

【text (文本框)、password (密碼輸入框)、hidden (隱藏域) 和 t extarea (多行文本框) 對象】

這幾個對象都很相似，輸入的都是字符串，它們僅僅是顯示的方式不一樣而已：

text - 一個單行的文本輸入框
password - 一個單行的密碼輸入框，輸入的字符將不會顯示出來，顯示出來的只是 '* ' 號
hidden - 一個單行的文本域，但是它不會在頁面上顯示任何東西，而且使用網頁的用戶不能直接修改它的值，但是你卻可以通過代碼修改它的值
textarea - 多行的文本輸入框，可以在框中使用 “回車” 換行

你只有確實地改變了文本框中的內容纔會觸發此事件。如果你將輸入的內容清楚，然後輸入完全相同的內容，將不會觸發 onChange 事件。

【checkbox (複選框) 和 radio (單選框) 按鈕對象】

checkbox 和 radio 按鈕可以爲用戶提供一序列選項，checkbox 用於可以多選的選項中，而 radio 用於只能單選的選項中。

var rb;

for (i = 0; i < document.forms["myform"].agegroup.length; i++) {
rb = document.forms["myform"].agegroup[1];
if (rb.checked) {
...
}
}

【select 和 option 對象】

使用 select 選項列表 (即是通常的下拉列表框之類的) 也是一種給用戶提供選項的有用方法，看一下下邊的代碼：

注意：IE 3.0 不支持 select 和 option 對象。

var i = document.forms["myForm"].state.selectedIndex;
var s = document.forms["myForm"].state.options[1];

【創建和刪除 option 對象】

注意：IE 4.0 對選擇列表 selection 和 option 的方法不同於 Netscape ，這一部分內容只能運用在 Netscape 3.0 或者更高版本。

你還可以通過代碼創建和刪除選項 option 對象。創建 option 對象使用 Option 數據結構，例如：

var opt = new Option(text, value, defaultSelected, selected)

此例中一些值得注意的地方：

第一，爲每一個二級菜單設置一個數組；
不管選擇了哪個大類，都會觸發 onChange 事件，然後調用 setOptions() 函數設置二級菜單；
函數 setOptions() 首先將原有的二級菜單全部選項刪除，然後再將新的二級菜單加入到選項列表中；
一旦二級菜單被設置完成，我們就調用 history.go(0) 來刷新當前頁面，促使新的選項能夠顯示出來。
JavaScript教程 - 第五部分高級話題

2003-09-03 16:44
來源：

[正文]

在這一章中，我們將大致的學習一下一些 JavaScript 中比較高級的話題，在此我們只是通過一些例子大致學習，而不進行深入探討。

創建你自己的對象

正如您所看到的，JavaScript 提供了很多網頁組件和數據的對象及對象類型。但是，您的目光不能僅僅限於這些，您可以根據自己的需要創建自己的對象、屬性和方法，這是很有用的，比如說您需要一個比較複雜的數據結構的時候，您就需要這樣做。

在創建一個新的對象之前，您首先要創建一個數據結構。這些工作都在一個函數裏邊處理，在該函數中定義您的對象的屬性（可以給這些屬性設置初始值），然後你就可以創建居於此對象的方法了。

【構造對象函數】

每一個對象都需要一個構造對象函數，我們通過使用 new 關鍵字調用此函數來創建一個新的對象實例。這類函數定義了對象的屬性，同時給這些屬性設置初始值。您還可以在此類函數中聲明對象的方法。

下邊就是使用構造對象函數的一個例子，在這個函數中定義了一個新的對象 Product，此對象定義了每一個產品的基本屬性：

function Product(name, num, price, shipping, quantity) {

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
}

注意關鍵字 this ，它指向被創建的對象。您可以像下邊那樣創建新的 Product 對象實例：

var item1 = new Product("blender", "9003-2", 24.95, 2.50, 2);
var item2 = new Product("juicer", "9117-1", 49.95, 5.00, 1);

你還可以像訪問其它對象的屬性那樣訪問 Product 對象的屬性：

var total = (item1.price + item1.shippingCost) * item1.quantity;

【定義方法】

上邊的例子中通過訪問 Product 對象 item1 的 price 、shippingCost 和 quantity 屬性計算 item1 的總價值，如果我們需要經常計算總價值，那麼像上邊那樣用起來就很不方便，不過不用擔心，我們可以爲計算總價值創建一個方法，很簡單，只要在構造對象函數中添加一行代碼：“this.totalCost = totalCost; ”，然後在構造對象函數的後邊定義一個名爲 totalCost 的函數：

function Product(name, num, price, shipping, quantity) {

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
this.totalCost = totalCost;
}

function totalCost() {

return ((this.price + this.shippingCost) * this.quantity);
}

注意在構造對象函數中定義該對象方法的格式：this.methodName = functionName ，這裏的方法名和函數名並不需要使用相同的名字，我們這裏是爲了看得清楚才使用相同的名字 totalCost 的。現在我們就可以使用此對象的方法了：

var total = item1.totalCost();

如果想了解如何構建和使用自定義對象，可以看一下這個在線示例，這個例子中定義了一個簡單的購物車，我們構建的對象名爲 ShoppingCart ，同時還給這個對象定義了增加和刪除產品項的方法。

Cookies

使用 cookie ，您可以將一些數據信息保存在客戶端用戶的機器中，而在以後用戶瀏覽您的網頁的時候再調出來使用。通常我們使用 cookie 保存一些數據、登陸帳號等。

創建一個 cookie 需要用到下邊的信息：
通常，您只需要設置前兩項 "cookie 的名字=cookie 的值" 和 "結束時間" 即可。在設置結束時間的時候，您可以使用 Date 對象，但要注意格式，單位是毫秒。下邊就是一個例子，在這個例子中，"結束時間" 被設置成從當前時間算起過任意多天 (此例設置的 "結束時間" 是 7 天后)：

var days = 7;
var expdate = new Date();
expdate.setTime (expdate.getTime() + (86400 * 1000 * days));

我們通過 document.cookie 屬性來對 cookie 的數據進行存取。cookie 的格式是 "cookie 的名字=cookie 的值; expires =cookie 的結束時間; path =路徑 "，而所有的 cookie 都是保存在 document.cookie 屬性中的，它們之間使用分號 "; " 分開，所以雖然您可以單獨地設置各個 cookie ，但卻要通過切分操作才能得到各個 cookie 的值，請參照下邊的示例。

【經常用到的 cookie 函數】

爲了讓您有個好的開始，下邊的三個函數分別提供了設置、刪除、獲取 cookie 的功能：

function setCookie (name, value, expires) {

document.cookie = name + "=" + escape(value) +
"; expires=" + expires.toGMTString() + "; path=/";
}

function getCookie(name) {

var search;

search = name + "="
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length ;
end = document.cookie.indexOf(";", offset) ;
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
else
return "";
}

function deleteCookie(name) {

var expdate = new Date();
expdate.setTime(expdate.getTime() - (86400 * 1000 * 1));
setCookie(name, "", expdate);
}

escape() 和 unescape() 是 JavaScript 的內建函數，它們用來將一些特殊字符轉換成十六進制代碼。通常情況下，cookie 中的名字、值都不能包含任何空格、逗號或分號。使用這兩個函數可以將這一類的字符轉換成合法的可供 cookie 使用的十六進制字符。

刪除所有您不再使用的 cookie 是一個很好的習慣，因爲客戶端會限制您可以存儲的 cookie 個數 (對於 Netscape 瀏覽器來說：每一個主機/域最多是 20 個 cookie ，總共可以存儲 300 個)。上邊的刪除 cookie 的函數將 cookie 的結束時間設置成前一天的時間，這樣就可以達到刪除的目的了。

看看這個在線示例就知道上邊函數的用法了。

注意：以下的部分使用 JavaScript 1.2 ，而且只運用於 Netscape 和 IE version 4.0 或者更高版本。

事件捕捉

我們在這個教程中已經學過了事件句柄 (event handler)，Internet Explorer 瀏覽器幾乎爲每一個 HTML 標記提供了事件句柄，而 Netscape 卻有所不同，雖然它也爲很多 HTML 標記提供了事件句柄，但是一些事件必須通過別的方法來捕捉。

【在 Netscape 中捕捉事件】

在 Netscape 4 或者更高版本的瀏覽器中，你可以捕捉當前瀏覽窗口中 window 、layer 或 document 級別的對象的事件。captureEvent() 方法可以完成此操作，此方法指定想要捕捉的事件，然後在通過編寫函數來處理此事件句柄。

下邊的例子中我們通知 window 對象捕捉鼠標點擊的事件：

window.captureEvents(Event.CLICK);
window.document.onClick = myClick;

function myClick(even) {
...
}

請注意，我們在到 captureEvents() 方法中傳送參數 Event.CLICK 。這個事件對象 Event 包含了與事件有關的信息。而 Event.CLICK 是一個指向通常事件類型的對象實例，其它一些事件類型如下：
如果想捕捉更多的事件，您必須使用邏輯或運算符“| ”來分割各個事件類型，如下邊的代碼所示：

window.captureEvents(Event.MOUSEDOWN | Event.KEYDOWN);
window.document.onMouseDown = myMouseDown;
window.document.onKeyDown = myKeyDown;

我們將 event 對象傳遞給事先安排好的事件句柄 (即此事件的處理函數)，這個對象包含了一些通常的時間數據，例如它的類型等等。

【Internet Explorer 中的事件】

在 Internet Explorer 中不需要傳遞 event 對象，因爲通常的時間對象都是 window 對象的一個屬性。不幸的是，IE 的這些屬性和 Netscape 的卻不盡相同。

【編寫具有兼容性的代碼】

幸運的是，這兩種瀏覽器之間還是有共同的代碼可以使用的，最重要的是能夠使用代碼將兩種瀏覽器區分開來。你可以嘗試使用一些對象來試探瀏覽器的類型，例如，你可以使用 document.layers 對象來試探，這個對象是 Netscape 支持的對象，而相對應的 document.all 對象則是隻有 IE 才支持的對象， Netscape 則不支持：

if (document.layers) {

// 在此處編寫 Netscape 支持的代碼
...
}

else if (document.all) {

// 在此處編寫 IE 支持的代碼
...
}

else {

// 在此處編寫 Netscape 和 IE 都支持的代碼
...
}

如果所試探的對象不存在 (即當前的瀏覽器不支持)，它的值爲空 (null ) ，這就促使 if 表達式的值爲“假” (false )。這種方法也可以用來防止這兩種瀏覽器不支持該對象的老版本試圖執行這些代碼。

看一下這個在線示例將會對您又很大的幫助。例子中的代碼可以在 Netscape 和 IE 兩種瀏覽器中實現相同的效果。

正則表達式

正則表達式是用於模式匹配的，它提供了強大的字符串替換、轉換以及搜索功能。

Netscape 和 IE 在正則表達式對象的使用上有細微的不同，但是下邊的代碼卻是通用的：

var myRE = /匹配模式/標記;

匹配模式的過程被看成是逐字匹配的，同時使用正則表達式還能匹配特殊字符或特殊格式的字符串 (左邊的符號是匹配模式中使用的特殊格式)：
由於 '* ' 是特殊字符，它的作用是匹配零個或零個以上的 '* ' 前邊的字符，所以如果想匹配字符 '* '，需要在此字符前加一個反斜槓 '/ ' 字符。因此 '/* ' 是匹配一個字符 '* '。你可以到 Netscape's JavaScript Reference 中去看一下有關正則表達式的細節。

標記可以是下邊的值：
test() 方法用來比較已知的字符串，如果匹配則返回“真”值 (true )。可以看一下這個在線示例，在這個例子中，使用了正則表達式來判斷用戶的輸入是否符合電子郵件 (Email ) 地址的格式：[email protected] 。

動態HTML [DHTML ]

動態 HTML (Dynamic HTML 或 DHTML ) 給 HTML 增加了幾個新的標記，同時也增加了幾個 JavaScript 的對象。動態 HTML 的一個主要特性是充分利用網頁中的層 (layer ) 和位置 (position )。

在這裏我們再次聲明，Netscape 和 IE 在應用上是有所不同的，Netscape 增加了支持“級聯樣式單” (Cascading Style Sheets 或 CCS ) 的 <LAYER> 標記用來定位網頁中的元素，而 IE 卻支持更多的樣式單，這些樣式單都是居於 World Wide Web 聯盟標準的 (可以參見第六部分的 DHTML 相關鏈接)。

【給頁面的內容定位】

雖然 Netscape 對 CSS 的支持比較有限，但是我們還是可以很容易地使用 <LAYER> 標記來創建被定位的內容。下邊的代碼在兩種瀏覽器中可以產生相同的效果：

Netscape IE

<layer bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
顯示的文本。
</layer>

IE

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

爲了讓代碼在兩種瀏覽器中都能實現相同的效果，我們可以使用前邊講過的方法首先探測一下瀏覽器的類型，然後再分別使用 document.writeln() 輸出適用於兩種瀏覽器的代碼參見在線示例。

【文檔對象模型DOM 】

現在我們已經可以給網頁中的內容定位了，但我們怎樣才能熟練巧妙地使用這種方法使它成爲 DHTML 技術的一部分呢？“文檔對象模型” (簡稱 DOM ) 是一個很流行的名字，它指的是在網頁中的 JavaScript 分級對象。DHTML 爲層與樣式單增加了一些新的對象，你可以像使用 JavaScript 中其它對象那樣使用這些對象。

當然，Netscape 和 IE 在 DOM 上的應用也有所不同，但是我們還是可以像上邊的例子那樣使用相應的代碼來實現相同的效果。

你可以將一個內容塊從一個地方移動 (重新定位) 到另一個地方，可以讓它從看得見變成看不見。爲了實現這些目的，你要針對不同的瀏覽器正確地處理好 JavaScript 對象。

讓我們重新寫一下上邊的代碼，並且在代碼中給內容塊加上名字，這樣我們才能在程序代碼中引用這些內容塊作爲對象來使用 (這其實就是 DOM 的一部分)：

Netscape IE

<layer name="block1" bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
Some text to display.
</layer>

IE

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

現在我們將內容塊放在 JavaScript 函數中當作對象來使用，同時返回此內容塊對象本身：

function getBlock(name) {

// For Netscape.

if (document.layers)
return(document.layers[name]);

// For IE.

else if (document.all) {
layer = eval('document.all.' + name + '.style');
return(layer);
}

// 以上都不是，則返回 null.

else
return(null);
}

正如你所看到的，Netscape 使用 document.layers 數組來存儲塊對象，而 IE 則是創建名爲 document.all.塊名字.style 的對象來表示塊。上邊的函數返回了塊對象，於是我們就可以使用這個返回值來訪問塊的屬性或執行塊的方法了。

現在讓我們來看一下在線示例是如何移動一個塊的。對於 Netscape 來說，我們只要設置塊對象的 left 和 top 屬性的值就可以達到移動塊的目的，在 IE 中則是使用 pixelLeft 和 pixelTop 屬性。在下邊的函數 moveBlockBy 中將會改變這些屬性的值：

function moveBlockBy(x, y) {

var block = getBlock("block1");

if (document.layers) {
block.left += x;
block.top += y;
}
else if (document.all) {
block.pixelLeft += x;
block.pixelTop += y;
}
}

參數 x 和 y 是塊在水平和垂直方向上的移動增量。

【處理瀏覽器的兼容性問題】

正如你所看到的，兩種瀏覽器在 DOM 上的運用也有很多不同之處，這樣就給你在網頁中實現動態 HTML 效果帶來了挑戰，所以在編寫代碼的時候應該儘量避免使用不兼容的屬性、方法等。

當然，你也可以只設計謀一種瀏覽器的代碼，例如只設計 IE 瀏覽器可執行的代碼，而不考慮 Netscape ，但是這樣你就將會失去 Netscape 的用戶羣。或者你也可以設計多套網頁或網站，讓它們分別支持各種瀏覽器，但是這樣將會給維護網頁或網站帶來很大的麻煩，增加複雜性。

var block = getBlock("block1");

if (document.layers) {
block.left += x;
block.top += y;
}
else if (document.all) {
block.pixelLeft += x;
block.pixelTop += y;
}
}

// For Netscape.

if (document.layers)
return(document.layers[name]);

// For IE.

else if (document.all) {
layer = eval('document.all.' + name + '.style');
return(layer);
}

// 以上都不是，則返回 null.

else
return(null);
}

正如你所看到的，Netscape 使用 document.layers 數組來存儲塊對象，而 IE 則是創建名爲 document.all.塊名字.style 的對象來表示塊。上邊的函數返回了塊對象，於是我們就可以使用這個返回值來訪問塊的屬性或執行塊的方法了。

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

<layer name="block1" bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
Some text to display.
</layer>

IE

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

<layer bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
顯示的文本。
</layer>

IE

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

// 在此處編寫 Netscape 支持的代碼
...
}

else if (document.all) {

// 在此處編寫 IE 支持的代碼
...
}

else {

// 在此處編寫 Netscape 和 IE 都支持的代碼
...
}

如果所試探的對象不存在 (即當前的瀏覽器不支持)，它的值爲空 (null ) ，這就促使 if 表達式的值爲“假” (false )。這種方法也可以用來防止這兩種瀏覽器不支持該對象的老版本試圖執行這些代碼。

我們將 event 對象傳遞給事先安排好的事件句柄 (即此事件的處理函數)，這個對象包含了一些通常的時間數據，例如它的類型等等。

function myClick(even) {
...
}

請注意，我們在到 captureEvents() 方法中傳送參數 Event.CLICK 。這個事件對象 Event 包含了與事件有關的信息。而 Event.CLICK 是一個指向通常事件類型的對象實例，其它一些事件類型如下：

document.cookie = name + "=" + escape(value) +
"; expires=" + expires.toGMTString() + "; path=/";
}

function getCookie(name) {

var search;

search = name + "="
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length ;
end = document.cookie.indexOf(";", offset) ;
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
else
return "";
}

function deleteCookie(name) {

var expdate = new Date();
expdate.setTime(expdate.getTime() - (86400 * 1000 * 1));
setCookie(name, "", expdate);
}

escape() 和 unescape() 是 JavaScript 的內建函數，它們用來將一些特殊字符轉換成十六進制代碼。通常情況下，cookie 中的名字、值都不能包含任何空格、逗號或分號。使用這兩個函數可以將這一類的字符轉換成合法的可供 cookie 使用的十六進制字符。

我們通過 document.cookie 屬性來對 cookie 的數據進行存取。cookie 的格式是 "cookie 的名字=cookie 的值; expires =cookie 的結束時間; path =路徑 "，而所有的 cookie 都是保存在 document.cookie 屬性中的，它們之間使用分號 "; " 分開，所以雖然您可以單獨地設置各個 cookie ，但卻要通過切分操作才能得到各個 cookie 的值，請參照下邊的示例。

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
this.totalCost = totalCost;
}

function totalCost() {

return ((this.price + this.shippingCost) * this.quantity);
}

注意在構造對象函數中定義該對象方法的格式：this.methodName = functionName ，這裏的方法名和函數名並不需要使用相同的名字，我們這裏是爲了看得清楚才使用相同的名字 totalCost 的。現在我們就可以使用此對象的方法了：

你還可以像訪問其它對象的屬性那樣訪問 Product 對象的屬性：

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
}

注意關鍵字 this ，它指向被創建的對象。您可以像下邊那樣創建新的 Product 對象實例：

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

一些實用的 Javascript 代碼

2003-09-03 02:27

來源：

[正文]

οncοntextmenu="window.event.returnvalue=false" 將徹底屏蔽鼠標右鍵
<table border οncοntextmenu=return(false)><td>no</table> 可用於Table
<body onselectstart="return false"> 取消選取、防止複製
οnpaste="return false" 不準粘貼
οncοpy="return false;" oncut="return false;" 防止複製
<link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標
<link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標
<input style="ime-mode:disabled"> 關閉輸入法
永遠都會帶着框架
<script language="javascript"></script>
防止被人frame
<SCRIPT LANGUAGE=javascript></SCRIPT>
<noscript><iframe src=*.html></iframe></noscript> 網頁將不能被另存爲
<input type=button value=查看網頁源代碼
οnclick="window.location = 'view-source:'+ 'http://www.htmlcn.com/'">
取得控件的絕對位置
//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>

//VBScript
<script language="VBScript"></script>
光標是停在文本框文字的最後
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" οnfοcus="cc()">
最小化、最大化、關閉窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close"></OBJECT>
<input type=button value=最小化 οnclick=hh1.Click()>
<input type=button value=最大化 οnclick=hh2.Click()>
<input type=button value=關閉 οnclick=hh3.Click()>
本例適用於IE

οncοntextmenu="window.event.returnvalue=false" 將徹底屏蔽鼠標右鍵
<table border οncοntextmenu=return(false)><td>no</table> 可用於Table
<body onselectstart="return false"> 取消選取、防止複製
οnpaste="return false" 不準粘貼
οncοpy="return false;" oncut="return false;" 防止複製
<link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標
<link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標
<input style="ime-mode:disabled"> 關閉輸入法
永遠都會帶着框架
<script language="javascript"></script>
防止被人frame
<SCRIPT LANGUAGE=javascript></SCRIPT>
<noscript><iframe src=*.html></iframe></noscript> 網頁將不能被另存爲
<input type=button value=查看網頁源代碼
οnclick="window.location = 'view-source:'+ 'http://www.htmlcn.com/'">
取得控件的絕對位置
//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>

//VBScript
<script language="VBScript"></script>
光標是停在文本框文字的最後
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" οnfοcus="cc()">
最小化、最大化、關閉窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close"></OBJECT>
<input type=button value=最小化 οnclick=hh1.Click()>
<input type=button value=最大化 οnclick=hh2.Click()>
<input type=button value=關閉 οnclick=hh3.Click()>
本例適用於IE

for (i = 0; i < document.forms["myform"].agegroup.length; i++) {
rb = document.forms["myform"].agegroup[1];
if (rb.checked) {
...
}
}

</body>
</html>

使用 form [表單] 對象

【form 對象】

在前邊我們已經講過了如何使用 elements 數組了。例如，在一個頁面中有兩個 form 對象：

</body>
</html>

要使用名爲 'quantity ' 的元素，可以使用下邊三種方法中的任何一種：

var e = document.forms["orderdata"].elements[1];
var e = document.forms.orderdata.elements["quantity"];
var e = document.orderdata.quantity;

你可以通過元素的 type 屬性知道元素是什麼類型，在上邊的例子中，我們可以使用下邊的代碼來獲得名爲 'quantity' 的元素的類型：

document.orderdata.quantity.type

結果將會返回 'text '。

【處理一個表單 form 】

form 對象各元素類型

【button 按鈕對象】

你也可以通過使用 onClick 事件句柄來改變 submit 和 reset 按鈕的默認動作。這個在線示例中就使用了這三種不同的按鈕來完成計算功能。

技巧2 ：reset 按鈕有默認動作，那就是將表單中所有的內容恢復到最初的狀態，如果想改變其默認動作，可以像這個在線示例那樣。

【text (文本框)、password (密碼輸入框)、hidden (隱藏域) 和 t extarea (多行文本框) 對象】

這幾個對象都很相似，輸入的都是字符串，它們僅僅是顯示的方式不一樣而已：

text - 一個單行的文本輸入框
password - 一個單行的密碼輸入框，輸入的字符將不會顯示出來，顯示出來的只是 '* ' 號
hidden - 一個單行的文本域，但是它不會在頁面上顯示任何東西，而且使用網頁的用戶不能直接修改它的值，但是你卻可以通過代碼修改它的值
textarea - 多行的文本輸入框，可以在框中使用 “回車” 換行

你只有確實地改變了文本框中的內容纔會觸發此事件。如果你將輸入的內容清楚，然後輸入完全相同的內容，將不會觸發 onChange 事件。

【checkbox (複選框) 和 radio (單選框) 按鈕對象】

checkbox 和 radio 按鈕可以爲用戶提供一序列選項，checkbox 用於可以多選的選項中，而 radio 用於只能單選的選項中。

var rb;

for (i = 0; i < document.forms["myform"].agegroup.length; i++) {
rb = document.forms["myform"].agegroup[1];
if (rb.checked) {
...
}
}

【select 和 option 對象】

使用 select 選項列表 (即是通常的下拉列表框之類的) 也是一種給用戶提供選項的有用方法，看一下下邊的代碼：

注意：IE 3.0 不支持 select 和 option 對象。

var i = document.forms["myForm"].state.selectedIndex;
var s = document.forms["myForm"].state.options[1];

【創建和刪除 option 對象】

注意：IE 4.0 對選擇列表 selection 和 option 的方法不同於 Netscape ，這一部分內容只能運用在 Netscape 3.0 或者更高版本。

你還可以通過代碼創建和刪除選項 option 對象。創建 option 對象使用 Option 數據結構，例如：

var opt = new Option(text, value, defaultSelected, selected)

此例中一些值得注意的地方：

第一，爲每一個二級菜單設置一個數組；
不管選擇了哪個大類，都會觸發 onChange 事件，然後調用 setOptions() 函數設置二級菜單；
函數 setOptions() 首先將原有的二級菜單全部選項刪除，然後再將新的二級菜單加入到選項列表中；
一旦二級菜單被設置完成，我們就調用 history.go(0) 來刷新當前頁面，促使新的選項能夠顯示出來。
JavaScript教程 - 第五部分高級話題

2003-09-03 16:44
來源：

[正文]

在這一章中，我們將大致的學習一下一些 JavaScript 中比較高級的話題，在此我們只是通過一些例子大致學習，而不進行深入探討。

創建你自己的對象

正如您所看到的，JavaScript 提供了很多網頁組件和數據的對象及對象類型。但是，您的目光不能僅僅限於這些，您可以根據自己的需要創建自己的對象、屬性和方法，這是很有用的，比如說您需要一個比較複雜的數據結構的時候，您就需要這樣做。

在創建一個新的對象之前，您首先要創建一個數據結構。這些工作都在一個函數裏邊處理，在該函數中定義您的對象的屬性（可以給這些屬性設置初始值），然後你就可以創建居於此對象的方法了。

【構造對象函數】

每一個對象都需要一個構造對象函數，我們通過使用 new 關鍵字調用此函數來創建一個新的對象實例。這類函數定義了對象的屬性，同時給這些屬性設置初始值。您還可以在此類函數中聲明對象的方法。

下邊就是使用構造對象函數的一個例子，在這個函數中定義了一個新的對象 Product，此對象定義了每一個產品的基本屬性：

function Product(name, num, price, shipping, quantity) {

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
}

注意關鍵字 this ，它指向被創建的對象。您可以像下邊那樣創建新的 Product 對象實例：

var item1 = new Product("blender", "9003-2", 24.95, 2.50, 2);
var item2 = new Product("juicer", "9117-1", 49.95, 5.00, 1);

你還可以像訪問其它對象的屬性那樣訪問 Product 對象的屬性：

var total = (item1.price + item1.shippingCost) * item1.quantity;

【定義方法】

上邊的例子中通過訪問 Product 對象 item1 的 price 、shippingCost 和 quantity 屬性計算 item1 的總價值，如果我們需要經常計算總價值，那麼像上邊那樣用起來就很不方便，不過不用擔心，我們可以爲計算總價值創建一個方法，很簡單，只要在構造對象函數中添加一行代碼：“this.totalCost = totalCost; ”，然後在構造對象函數的後邊定義一個名爲 totalCost 的函數：

function Product(name, num, price, shipping, quantity) {

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
this.totalCost = totalCost;
}

function totalCost() {

return ((this.price + this.shippingCost) * this.quantity);
}

注意在構造對象函數中定義該對象方法的格式：this.methodName = functionName ，這裏的方法名和函數名並不需要使用相同的名字，我們這裏是爲了看得清楚才使用相同的名字 totalCost 的。現在我們就可以使用此對象的方法了：

var total = item1.totalCost();

如果想了解如何構建和使用自定義對象，可以看一下這個在線示例，這個例子中定義了一個簡單的購物車，我們構建的對象名爲 ShoppingCart ，同時還給這個對象定義了增加和刪除產品項的方法。

Cookies

使用 cookie ，您可以將一些數據信息保存在客戶端用戶的機器中，而在以後用戶瀏覽您的網頁的時候再調出來使用。通常我們使用 cookie 保存一些數據、登陸帳號等。

創建一個 cookie 需要用到下邊的信息：
通常，您只需要設置前兩項 "cookie 的名字=cookie 的值" 和 "結束時間" 即可。在設置結束時間的時候，您可以使用 Date 對象，但要注意格式，單位是毫秒。下邊就是一個例子，在這個例子中，"結束時間" 被設置成從當前時間算起過任意多天 (此例設置的 "結束時間" 是 7 天后)：

var days = 7;
var expdate = new Date();
expdate.setTime (expdate.getTime() + (86400 * 1000 * days));

我們通過 document.cookie 屬性來對 cookie 的數據進行存取。cookie 的格式是 "cookie 的名字=cookie 的值; expires =cookie 的結束時間; path =路徑 "，而所有的 cookie 都是保存在 document.cookie 屬性中的，它們之間使用分號 "; " 分開，所以雖然您可以單獨地設置各個 cookie ，但卻要通過切分操作才能得到各個 cookie 的值，請參照下邊的示例。

【經常用到的 cookie 函數】

爲了讓您有個好的開始，下邊的三個函數分別提供了設置、刪除、獲取 cookie 的功能：

function setCookie (name, value, expires) {

document.cookie = name + "=" + escape(value) +
"; expires=" + expires.toGMTString() + "; path=/";
}

function getCookie(name) {

var search;

search = name + "="
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length ;
end = document.cookie.indexOf(";", offset) ;
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
else
return "";
}

function deleteCookie(name) {

var expdate = new Date();
expdate.setTime(expdate.getTime() - (86400 * 1000 * 1));
setCookie(name, "", expdate);
}

escape() 和 unescape() 是 JavaScript 的內建函數，它們用來將一些特殊字符轉換成十六進制代碼。通常情況下，cookie 中的名字、值都不能包含任何空格、逗號或分號。使用這兩個函數可以將這一類的字符轉換成合法的可供 cookie 使用的十六進制字符。

刪除所有您不再使用的 cookie 是一個很好的習慣，因爲客戶端會限制您可以存儲的 cookie 個數 (對於 Netscape 瀏覽器來說：每一個主機/域最多是 20 個 cookie ，總共可以存儲 300 個)。上邊的刪除 cookie 的函數將 cookie 的結束時間設置成前一天的時間，這樣就可以達到刪除的目的了。

看看這個在線示例就知道上邊函數的用法了。

注意：以下的部分使用 JavaScript 1.2 ，而且只運用於 Netscape 和 IE version 4.0 或者更高版本。

事件捕捉

我們在這個教程中已經學過了事件句柄 (event handler)，Internet Explorer 瀏覽器幾乎爲每一個 HTML 標記提供了事件句柄，而 Netscape 卻有所不同，雖然它也爲很多 HTML 標記提供了事件句柄，但是一些事件必須通過別的方法來捕捉。

【在 Netscape 中捕捉事件】

在 Netscape 4 或者更高版本的瀏覽器中，你可以捕捉當前瀏覽窗口中 window 、layer 或 document 級別的對象的事件。captureEvent() 方法可以完成此操作，此方法指定想要捕捉的事件，然後在通過編寫函數來處理此事件句柄。

下邊的例子中我們通知 window 對象捕捉鼠標點擊的事件：

window.captureEvents(Event.CLICK);
window.document.onClick = myClick;

function myClick(even) {
...
}

請注意，我們在到 captureEvents() 方法中傳送參數 Event.CLICK 。這個事件對象 Event 包含了與事件有關的信息。而 Event.CLICK 是一個指向通常事件類型的對象實例，其它一些事件類型如下：
如果想捕捉更多的事件，您必須使用邏輯或運算符“| ”來分割各個事件類型，如下邊的代碼所示：

window.captureEvents(Event.MOUSEDOWN | Event.KEYDOWN);
window.document.onMouseDown = myMouseDown;
window.document.onKeyDown = myKeyDown;

我們將 event 對象傳遞給事先安排好的事件句柄 (即此事件的處理函數)，這個對象包含了一些通常的時間數據，例如它的類型等等。

【Internet Explorer 中的事件】

在 Internet Explorer 中不需要傳遞 event 對象，因爲通常的時間對象都是 window 對象的一個屬性。不幸的是，IE 的這些屬性和 Netscape 的卻不盡相同。

【編寫具有兼容性的代碼】

幸運的是，這兩種瀏覽器之間還是有共同的代碼可以使用的，最重要的是能夠使用代碼將兩種瀏覽器區分開來。你可以嘗試使用一些對象來試探瀏覽器的類型，例如，你可以使用 document.layers 對象來試探，這個對象是 Netscape 支持的對象，而相對應的 document.all 對象則是隻有 IE 才支持的對象， Netscape 則不支持：

if (document.layers) {

// 在此處編寫 Netscape 支持的代碼
...
}

else if (document.all) {

// 在此處編寫 IE 支持的代碼
...
}

else {

// 在此處編寫 Netscape 和 IE 都支持的代碼
...
}

如果所試探的對象不存在 (即當前的瀏覽器不支持)，它的值爲空 (null ) ，這就促使 if 表達式的值爲“假” (false )。這種方法也可以用來防止這兩種瀏覽器不支持該對象的老版本試圖執行這些代碼。

看一下這個在線示例將會對您又很大的幫助。例子中的代碼可以在 Netscape 和 IE 兩種瀏覽器中實現相同的效果。

正則表達式

正則表達式是用於模式匹配的，它提供了強大的字符串替換、轉換以及搜索功能。

Netscape 和 IE 在正則表達式對象的使用上有細微的不同，但是下邊的代碼卻是通用的：

var myRE = /匹配模式/標記;

匹配模式的過程被看成是逐字匹配的，同時使用正則表達式還能匹配特殊字符或特殊格式的字符串 (左邊的符號是匹配模式中使用的特殊格式)：
由於 '* ' 是特殊字符，它的作用是匹配零個或零個以上的 '* ' 前邊的字符，所以如果想匹配字符 '* '，需要在此字符前加一個反斜槓 '/ ' 字符。因此 '/* ' 是匹配一個字符 '* '。你可以到 Netscape's JavaScript Reference 中去看一下有關正則表達式的細節。

標記可以是下邊的值：
test() 方法用來比較已知的字符串，如果匹配則返回“真”值 (true )。可以看一下這個在線示例，在這個例子中，使用了正則表達式來判斷用戶的輸入是否符合電子郵件 (Email ) 地址的格式：[email protected] 。

動態HTML [DHTML ]

動態 HTML (Dynamic HTML 或 DHTML ) 給 HTML 增加了幾個新的標記，同時也增加了幾個 JavaScript 的對象。動態 HTML 的一個主要特性是充分利用網頁中的層 (layer ) 和位置 (position )。

在這裏我們再次聲明，Netscape 和 IE 在應用上是有所不同的，Netscape 增加了支持“級聯樣式單” (Cascading Style Sheets 或 CCS ) 的 <LAYER> 標記用來定位網頁中的元素，而 IE 卻支持更多的樣式單，這些樣式單都是居於 World Wide Web 聯盟標準的 (可以參見第六部分的 DHTML 相關鏈接)。

【給頁面的內容定位】

雖然 Netscape 對 CSS 的支持比較有限，但是我們還是可以很容易地使用 <LAYER> 標記來創建被定位的內容。下邊的代碼在兩種瀏覽器中可以產生相同的效果：

Netscape IE

<layer bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
顯示的文本。
</layer>

IE

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

爲了讓代碼在兩種瀏覽器中都能實現相同的效果，我們可以使用前邊講過的方法首先探測一下瀏覽器的類型，然後再分別使用 document.writeln() 輸出適用於兩種瀏覽器的代碼參見在線示例。

【文檔對象模型DOM 】

現在我們已經可以給網頁中的內容定位了，但我們怎樣才能熟練巧妙地使用這種方法使它成爲 DHTML 技術的一部分呢？“文檔對象模型” (簡稱 DOM ) 是一個很流行的名字，它指的是在網頁中的 JavaScript 分級對象。DHTML 爲層與樣式單增加了一些新的對象，你可以像使用 JavaScript 中其它對象那樣使用這些對象。

當然，Netscape 和 IE 在 DOM 上的應用也有所不同，但是我們還是可以像上邊的例子那樣使用相應的代碼來實現相同的效果。

你可以將一個內容塊從一個地方移動 (重新定位) 到另一個地方，可以讓它從看得見變成看不見。爲了實現這些目的，你要針對不同的瀏覽器正確地處理好 JavaScript 對象。

讓我們重新寫一下上邊的代碼，並且在代碼中給內容塊加上名字，這樣我們才能在程序代碼中引用這些內容塊作爲對象來使用 (這其實就是 DOM 的一部分)：

Netscape IE

<layer name="block1" bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
Some text to display.
</layer>

IE

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

現在我們將內容塊放在 JavaScript 函數中當作對象來使用，同時返回此內容塊對象本身：

function getBlock(name) {

// For Netscape.

if (document.layers)
return(document.layers[name]);

// For IE.

else if (document.all) {
layer = eval('document.all.' + name + '.style');
return(layer);
}

// 以上都不是，則返回 null.

else
return(null);
}

正如你所看到的，Netscape 使用 document.layers 數組來存儲塊對象，而 IE 則是創建名爲 document.all.塊名字.style 的對象來表示塊。上邊的函數返回了塊對象，於是我們就可以使用這個返回值來訪問塊的屬性或執行塊的方法了。

現在讓我們來看一下在線示例是如何移動一個塊的。對於 Netscape 來說，我們只要設置塊對象的 left 和 top 屬性的值就可以達到移動塊的目的，在 IE 中則是使用 pixelLeft 和 pixelTop 屬性。在下邊的函數 moveBlockBy 中將會改變這些屬性的值：

function moveBlockBy(x, y) {

var block = getBlock("block1");

if (document.layers) {
block.left += x;
block.top += y;
}
else if (document.all) {
block.pixelLeft += x;
block.pixelTop += y;
}
}

參數 x 和 y 是塊在水平和垂直方向上的移動增量。

【處理瀏覽器的兼容性問題】

正如你所看到的，兩種瀏覽器在 DOM 上的運用也有很多不同之處，這樣就給你在網頁中實現動態 HTML 效果帶來了挑戰，所以在編寫代碼的時候應該儘量避免使用不兼容的屬性、方法等。

當然，你也可以只設計謀一種瀏覽器的代碼，例如只設計 IE 瀏覽器可執行的代碼，而不考慮 Netscape ，但是這樣你就將會失去 Netscape 的用戶羣。或者你也可以設計多套網頁或網站，讓它們分別支持各種瀏覽器，但是這樣將會給維護網頁或網站帶來很大的麻煩，增加複雜性。

var block = getBlock("block1");

if (document.layers) {
block.left += x;
block.top += y;
}
else if (document.all) {
block.pixelLeft += x;
block.pixelTop += y;
}
}

// For Netscape.

if (document.layers)
return(document.layers[name]);

// For IE.

else if (document.all) {
layer = eval('document.all.' + name + '.style');
return(layer);
}

// 以上都不是，則返回 null.

else
return(null);
}

正如你所看到的，Netscape 使用 document.layers 數組來存儲塊對象，而 IE 則是創建名爲 document.all.塊名字.style 的對象來表示塊。上邊的函數返回了塊對象，於是我們就可以使用這個返回值來訪問塊的屬性或執行塊的方法了。

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

<layer name="block1" bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
Some text to display.
</layer>

IE

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

<layer bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
顯示的文本。
</layer>

IE

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

// 在此處編寫 Netscape 支持的代碼
...
}

else if (document.all) {

// 在此處編寫 IE 支持的代碼
...
}

else {

// 在此處編寫 Netscape 和 IE 都支持的代碼
...
}

如果所試探的對象不存在 (即當前的瀏覽器不支持)，它的值爲空 (null ) ，這就促使 if 表達式的值爲“假” (false )。這種方法也可以用來防止這兩種瀏覽器不支持該對象的老版本試圖執行這些代碼。

我們將 event 對象傳遞給事先安排好的事件句柄 (即此事件的處理函數)，這個對象包含了一些通常的時間數據，例如它的類型等等。

function myClick(even) {
...
}

請注意，我們在到 captureEvents() 方法中傳送參數 Event.CLICK 。這個事件對象 Event 包含了與事件有關的信息。而 Event.CLICK 是一個指向通常事件類型的對象實例，其它一些事件類型如下：

document.cookie = name + "=" + escape(value) +
"; expires=" + expires.toGMTString() + "; path=/";
}

function getCookie(name) {

var search;

search = name + "="
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length ;
end = document.cookie.indexOf(";", offset) ;
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
else
return "";
}

function deleteCookie(name) {

var expdate = new Date();
expdate.setTime(expdate.getTime() - (86400 * 1000 * 1));
setCookie(name, "", expdate);
}

escape() 和 unescape() 是 JavaScript 的內建函數，它們用來將一些特殊字符轉換成十六進制代碼。通常情況下，cookie 中的名字、值都不能包含任何空格、逗號或分號。使用這兩個函數可以將這一類的字符轉換成合法的可供 cookie 使用的十六進制字符。

我們通過 document.cookie 屬性來對 cookie 的數據進行存取。cookie 的格式是 "cookie 的名字=cookie 的值; expires =cookie 的結束時間; path =路徑 "，而所有的 cookie 都是保存在 document.cookie 屬性中的，它們之間使用分號 "; " 分開，所以雖然您可以單獨地設置各個 cookie ，但卻要通過切分操作才能得到各個 cookie 的值，請參照下邊的示例。

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
this.totalCost = totalCost;
}

function totalCost() {

return ((this.price + this.shippingCost) * this.quantity);
}

注意在構造對象函數中定義該對象方法的格式：this.methodName = functionName ，這裏的方法名和函數名並不需要使用相同的名字，我們這裏是爲了看得清楚才使用相同的名字 totalCost 的。現在我們就可以使用此對象的方法了：

你還可以像訪問其它對象的屬性那樣訪問 Product 對象的屬性：

this.name = name;
this.catalogNumber = num;
this.price = price;
this.shippingCost = shipping;
this.quantity = quantity;
}

注意關鍵字 this ，它指向被創建的對象。您可以像下邊那樣創建新的 Product 對象實例：

<div id="block1" style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
Some text to display.
</div>

<div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">
顯示的文本。
</div>

正如你所看到的，我們可以對被定位的內容塊 (在上邊例子中的內容塊是“顯示的文本”，也即是在 <layer>....</layer> 或 <div>....</div> 標記對之間的內容) 定義幾個特性，例如背景顏色、字體顏色等等。top 和 left 的值用來告訴瀏覽器這一塊內容在網頁中的位置，top 是距離瀏覽器窗口頂部的長度，left 則是距離瀏覽器窗口左邊框架的長度，它們的單位都是象素 (pixel )。

一些實用的 Javascript 代碼

2003-09-03 02:27

來源：

[正文]

οncοntextmenu="window.event.returnvalue=false" 將徹底屏蔽鼠標右鍵
<table border οncοntextmenu=return(false)><td>no</table> 可用於Table
<body onselectstart="return false"> 取消選取、防止複製
οnpaste="return false" 不準粘貼
οncοpy="return false;" oncut="return false;" 防止複製
<link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標
<link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標
<input style="ime-mode:disabled"> 關閉輸入法
永遠都會帶着框架
<script language="javascript"></script>
防止被人frame
<SCRIPT LANGUAGE=javascript></SCRIPT>
<noscript><iframe src=*.html></iframe></noscript> 網頁將不能被另存爲
<input type=button value=查看網頁源代碼
οnclick="window.location = 'view-source:'+ 'http://www.htmlcn.com/'">
取得控件的絕對位置
//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>

//VBScript
<script language="VBScript"></script>
光標是停在文本框文字的最後
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" οnfοcus="cc()">
最小化、最大化、關閉窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close"></OBJECT>
<input type=button value=最小化 οnclick=hh1.Click()>
<input type=button value=最大化 οnclick=hh2.Click()>
<input type=button value=關閉 οnclick=hh3.Click()>
本例適用於IE

οncοntextmenu="window.event.returnvalue=false" 將徹底屏蔽鼠標右鍵
<table border οncοntextmenu=return(false)><td>no</table> 可用於Table
<body onselectstart="return false"> 取消選取、防止複製
οnpaste="return false" 不準粘貼
οncοpy="return false;" oncut="return false;" 防止複製
<link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標
<link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標
<input style="ime-mode:disabled"> 關閉輸入法
永遠都會帶着框架
<script language="javascript"></script>
防止被人frame
<SCRIPT LANGUAGE=javascript></SCRIPT>
<noscript><iframe src=*.html></iframe></noscript> 網頁將不能被另存爲
<input type=button value=查看網頁源代碼
οnclick="window.location = 'view-source:'+ 'http://www.htmlcn.com/'">
取得控件的絕對位置
//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>

//VBScript
<script language="VBScript"></script>
光標是停在文本框文字的最後
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" οnfοcus="cc()">
最小化、最大化、關閉窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close"></OBJECT>
<input type=button value=最小化 οnclick=hh1.Click()>
<input type=button value=最大化 οnclick=hh2.Click()>
<input type=button value=關閉 οnclick=hh3.Click()>
本例適用於IE

for (i = 0; i < document.forms["myform"].agegroup.length; i++) {
rb = document.forms["myform"].agegroup[1];
if (rb.checked) {
...
}
}

</body>
</html>

在下邊幀上，點擊鼠標右鍵，查看一下源代碼，你會發現源代碼就是你輸入的那些字符。

下邊的代碼將頁面轉到距離本頁面位置最近的同時頁面地址 URL 中含有字符串 "netscape " (不區分字母的大小寫) 的頁面：

window.parent.frames[fname].document.bgColor = color;
return false;
}

</html>

當你按下按鈕後，就會觸發 onClick 事件，從而調用 window 對象的 close() 方法，此方法將當前的窗口關閉掉。

An example of using the <b>onLoad</b> event. Use your browser's
RELOAD button to run the example again.

</font>
</body>
</html>

document.images[name].src = source;
return true;
}

// 獲得頁面超鏈接的顏色.

var lc1 = document.linkColor;

</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#ff0000">
<font face="Arial,Helvetica" size=3>

// 獲得頁面超鏈接的顏色.

var lc2 = document.linkColor;

// 顯示出顏色的 RGB 十六進制值.

document.writeln('link color: ' + lc1 + '<br>');
document.writeln('link color: ' + lc2);

</script>
</body>
</html>

函數名必須符合變量名的命名規則，調用函數的時候，使用函數名以及函數需要的參數即可：

// 舊版本的 JavaScript 代碼。
...
}
</script>
<script language="JavaScript1.2">
function f1() {

// JavaScript 1.2 版的代碼。
...
}
</script>

legendox

發佈了60 篇原創文章 · 獲贊 3 · 訪問量 6萬+

私信關注

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

Tomcat配置技巧大全（轉）

request對象傳遞數組

SQL數據注入漏洞-繞過登陸驗證

session的工作機制

javascript 教程

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結