JavaScript 收藏經典

JavaScript 有什麼特點

JavaScript 使網頁增加互動性。JavaScript 使有規律地重複的HTML文段簡化,減少下載時間。JavaScript 能及時響應用戶的操作,對提交表單做即時的檢查,無需浪費時間交由 CGI 驗證。JavaScript 的特點是無窮無盡的,只要你有創意。

Java 與 JavaScript 有什麼不同

很多人看到 Java 和 JavaScript 都有“Java”四個字,就以爲它們是同一樣東西,連我自己當初也是這樣。其實它們是完完全全不同的兩種東西。Java,全稱應該是 Java Applet,是嵌在網頁中,而又有自己獨立的運行窗口的小程序。Java Applet 是預先編譯好的,一個 Applet 文件(.class)用 Notepad 打開閱讀,根本不能理解。Java Applet 的功能很強大,可以訪問 http、ftp等協議,甚至可以在電腦上種病毒(已有先例了)。相比之下,JavaScript 的能力就比較小了。JavaScript 是一種“腳本”(“Script”),它直接把代碼寫到 HTML 文檔中,瀏覽器讀取它們的時候才進行編譯、執行,所以能查看 HTML 源文件就能查看JavaScript 源代碼。JavaScript 沒有獨立的運行窗口,瀏覽器當前窗口就是它的運行窗口。它們的相同點,我想只有同是以 Java 作編程語言一點了。

開發 JavaScript 該用什麼軟件

一個 JavaScript 程序其實是一個文檔,一個文本文件。它是嵌入到 HTML 文檔中的。所以,任何可以編寫 HTML 文檔的軟件都可以用來開發 JavaScript。在此我推薦大家用 FrontPage 2000 附帶的 Microsoft 腳本編輯器(在 FrontPage 菜單 | 工具 | 宏 | Microsoft 腳本編輯器)。它是個像 Visual Basic / C++ 一樣的程序開發器,能對正在輸入的語句作出簡要提示。配合 FrontPage 2000,使工作量大大減少。

JavaScript 語言的基礎

在什麼地方插入 JavaScript

JavaScript 可以出現在 HTML 的任意地方。使用標記<script>…</script>,你可以在 HTML 文檔的任意地方插入 JavaScript,甚至在<HTML>之前插入也不成問題。不過如果要在聲明框架的網頁(框架網頁)中插入,就一定要在<frameset>之前插入,否則不會運行。

基本格式

<script>
<!--
...
(JavaScript代碼)
...
//-->
</script>

第二行和第四行的作用,是讓不懂<script>標記的瀏覽器忽略 JavaScript 代碼。一般可以省略,因爲現在想找不懂 Script 的瀏覽器,恐怕就連博物館裏也沒有了。第四行前邊的雙反斜槓“//”是 JavaScript 裏的註釋標號,以後將學到。

另外一種插入 JavaScript 的方法,是把 JavaScript 代碼寫到另一個文件當中(此文件通常應該用“.js”作擴展名),然後用格式爲“<script src="javascript.js"></script>”的標記把它嵌入到文檔中。注意,一定要用“</script&gt;”標記。

參考 <script>標記還有一個屬性:language(縮寫lang),說明腳本使用的語言。對於 JavaScript,請用“language="JavaScript"”。

參考 相對於<script>標記,還有一個<server>標記。<server>標記所包含的,是服務器端(Server Side)的腳本。本教程只討論客戶器端(Client Side)的 JavaScript,也就是用<script>標記包含的腳本。

如果想在瀏覽器的“地址”欄中執行 JavaScript 語句,用這樣的格式:

javascript:<JavaScript語句>

這樣的格式也可以用在連接中:

<a href="javascript:<JavaScript語句>">...</a>

JavaScript 基本語法

每一句 JavaScript 都有類似於以下的格式:

<語句>;

其中分號“;”是 JavaScript 語言作爲一個語句結束的標識符。雖然現在很多瀏覽器都允許用回車充當結束符號,培養用分號作結束的習慣仍然是很好的。

語句塊 語句塊是用大括號“{ }”括起來的一個或 n 個語句。在大括號裏邊是幾個語句,但是在大括號外邊,語句塊是被當作一個語句的。語句塊是可以嵌套的,也就是說,一個語句塊裏邊可以再包含一個或多個語句塊。

JavaScript 中的變量

什麼是變量 從字面上看,變量是可變的量;從編程角度講,變量是用於存儲某種/某些數值的存儲器。所儲存的值,可以是數字、字符或其他的一些東西。

變量的命名 變量的命名有以下要求:

只包含字母、數字和/或下劃線;
要以字母開頭;
不能太長(其實有什麼人喜歡使用又長又臭的名字呢?);
不能與 JavaScript 保留字(Key Words,Reserved Words,數量繁多,不能一一列出;凡是可以用來做 JavaScript 命令的字都是保留字)重複。

而且,變量是區分大小寫的,例如,variable 和 Variable 是兩個不同的變量。不僅如此,大部分命令和“對象”(請參閱“對象化編程”章)都是區分大小寫的。

提示 給變量命名,最好避免用單個字母“a”“b”“c”等,而改用能清楚表達該變量在程序中的作用的詞語。這樣,不僅別人能更容易的瞭解你的程序,而且你在以後要修改程序的時候,也很快會記得該變量的作用。變量名一般用小寫,如果是由多個單詞組成的,那麼第一個單詞用小寫,其他單詞的第一個字母用大寫。例如:myVariable 和 myAnotherVariable。這樣做僅僅是爲了美觀和易讀,因爲 JavaScript 一些命令(以後將用更具體的方法闡述“命令”一詞)都是用這種方法命名的:indexOf;charAt 等等。

變量需要聲明 沒有聲明的變量不能使用,否則會出錯:“未定義”。聲明變量可以用:

var <變量> [= <值>];

var 我們接觸的第一個關鍵字(即保留字)。這個關鍵字用作聲明變量。最簡單的聲明方法就是“var <變量>;”,這將爲<變量>準備內存,給它賦初始值“null”。如果加上“= <值>”,則給<變量>賦予自定的初始值<值>。

數據類型 變量可以用的數據類型有:

整型 只能儲存整數。可以是正整數、0、負整數,可以是十進制、八進制、十六進制。八進制數的表示方法是在數字前加“0”,如“0123”表示八進制數“123”。十六進制則是加“0x”:“0xEF”表示十六進制數“EF”。
浮點型
即“實型”,能儲存小數。有資料顯示,某些平臺對浮點型變量的支持不穩定。沒有需要就不要用浮點型。
字符串型
是用引號“" "”、“' '”包起來的零個至多個字符。用單引號還是雙引號由你決定。跟語文一樣,用哪個引號開始就用哪個結束,而且單雙引號可嵌套使用:'這裏是"JavaScript 教程"。' 不過跟語文不同的是,JavaScript 中引號的嵌套只能有一層。如果想再多嵌一些,你需要轉義字符:
轉義字符
由於一些字符在屏幕上不能顯示,或者 JavaScript 語法上已經有了特殊用途,在要用這些字符時,就要使用“轉義字符”。轉義字符用斜槓“\”開頭:\' 單引號、\" 雙引號、\n 換行符、\r 回車(以上只列出常用的轉義字符)。於是,使用轉義字符,就可以做到引號多重嵌套:'Micro 說:"這裏是\"JavaScript 教程\"。" '
布爾型
常用於判斷,只有兩個值可選:true(表“真”)和 false(表“假”)。true 和 false 是 JavaScript 的保留字。它們屬於“常數”。
對象
關於對象,在“ 對象化編程 ”一章將詳細講到。

由於 JavaScript 對數據類型的要求不嚴格,一般來說,聲明變量的時候不需要聲明類型。而且就算聲明瞭類型,在過程中還可以給變量賦予其他類型的值。聲明類型可以用賦予初始值的方法做到:

var aString = '';

這將把 aString 定義爲具有空值的字符串型變量。

var anInteger = 0;

這將把 anInteger 定義爲值爲 0 的整型。

變量的賦值 一個變量聲明後,可以在任何時候對其賦值。賦值的語法是:

<變量> = <表達式>;

其中“=”叫“賦值符”,它的作用是把右邊的值賦給左邊的變量。下一節將討論到表達式。

JavaScript常數 有下列幾個:

null 一個特殊的空值。當變量未定義,或者定義之後沒有對其進行任何賦值操作,它的值就是“null”。企圖返回一個不存在的對象時也會出現null值。
NaN
“Not a Number”。出現這個數值比較少見,以至於我們可以不理它。當運算無法返回正確的數值時,就會返回“NaN”值。NaN 值非常特殊,因爲它“不是數字”,所以任何數跟它都不相等,甚至 NaN 本身也不等於 NaN 。
true
布爾值“真”。用通俗的說法,“對”。
false
布爾值“假”。用通俗的說法,“錯”。

在 Math 對象 中還有一系列數學常數。這將在討論“ 對象化編程 ”時談到。

表達式與運算符

表達式 與數學中的定義相似,表達式是指具有一定的值的、用運算符把常數和變量連接起來的代數式。一個表達式可以只包含一個常數或一個變量。運算符可以是四則運算符、關係運算符、位運算符、邏輯運算符、複合運算符。下表將這些運算符從高優先級到低優先級排列:

括號 (x) [x] 中括號只用於指明 數組 下標
求反、

自加、


自減
-x 返回 x 的相反數
!x 返回與 x (布爾值)相反的布爾值
x++ x 值加 1,但仍返回原來的 x 值
x-- x 值減 1,但仍返回原來的 x 值
++x x 值加 1,返回後來的 x 值
--x x 值減 1,返回後來的 x 值
乘、除 x*y 返回 x 乘以 y 的值
x/y 返回 x 除以 y 的值
x%y 返回 x 與 y 的模(x 除以y 的餘數)
加、減 x+y 返回 x 加 y 的值
x-y 返回 x 減 y 的值
關係運算 x<y x<=y
x>=y x>y
當符合條件時返回 true 值,否則返回 false 值
等於、
不等於
x==y 當 x 等於 y 時返回 true 值,否則返回 false 值
x!=y 當 x 不等於 y 時返回 true 值,否則返回 false 值
位與 x&y 當兩個數位同時爲 1 時,返回的數據的當前數位爲 1,其他情況都爲 0
位異或 x^y 兩個數位中有且只有一個爲 0 時,返回 0,否則返回 1
位或 x|y 兩個數位中只要有一個爲 1,則返回 1;當兩個數位都爲零時才返回零
位運算符通常會被當作邏輯運算符來使用。它的實際運算情況是:把兩個操作數(即 x 和 y)化成二進制數,對每個數位執行以上所列工作,然後返回得到的新二進制數。由於“真”值在電腦內部(通常)是全部數位都是 1 的二進制數,而“假”值則是全部是 0 的二進制數,所以位運算符也可以充當邏輯運算符。
邏輯與 x&&y 當 x 和 y 同時爲 true 時返回 true,否則返回 false
邏輯或 x||y 當 x 和 y 任意一個爲 true 時返回 true,當兩者同時爲 false 時返回 false
邏輯與/或有時候被稱爲“快速與/或”。這是因爲當第一操作數(x)已經可以決定結果,它們將不去理會 y 的值。例如,false && y,因爲x == false,不管 y 的值是什麼,結果始終是 false,於是本表達式立即返回 false,而不論 y 是多少,甚至 y 可以導致出錯,程序也可以照樣運行下去。
條件 c?x:y 當條件 c 爲 true 時返回 x 的值(執行 x 語句),否則返回 y 的值(執行 y 語句)
賦值、
複合運算
x=y 把 y 的值賦給 x,返回所賦的值
x+=y x-=y x*=y
x/=y x%=y
x 與 y 相加/減/乘/除/求餘,所得結果賦給 x,並返回 x 賦值後的值

注意 所有與四則運算有關的運算符都不能作用在字符串型變量上。字符串可以使用 +、+= 作爲連接兩個字符串之用。

提示 請密切注意運算的優先級。編程時如果不記得運算符的優先級,可以使用括號( )。例如:(a == 0)||(b == 0)。

一些用來賦值的表達式,由於有返回的值,可以加以利用。例如,用以下語句:a = b = c = 10,可以一次對三個變量賦值。

語句

下面將開始討論 JavaScript 基本編程命令,或者叫“語句”。

註釋

像其他所有語言一樣,JavaScript 的註釋在運行時也是被忽略的。註釋只給程序員提供消息。

JavaScript 註釋有兩種:單行註釋和多行註釋。單行註釋用雙反斜槓“//”表示。當一行代碼有“//”,那麼,“//”後面的部分將被忽略。而多行註釋是用“/*”和“*/”括起來的一行到多行文字。程序執行到“/*”處,將忽略以後的所有文字,直到出現“*/”爲止。

提示 如果你的程序需要草稿,或者需要讓別人閱讀,註釋能幫上大忙。養成寫註釋的習慣,能節省你和其他程序員的寶貴時間,使他們不用花費多餘的時間琢磨你的程序。在程序調試的時候,有時需要把一段代碼換成另一段,或者暫時不要一段代碼。這時最忌用 Delete 鍵,如果想要回那段代碼怎麼辦?最好還是用註釋,把暫時不要的代碼“隱”去,到確定方法以後再刪除也不遲。

if 語句

if ( <條件> ) <語句1> [ else <語句2> ];

本語句有點象條件表達式“?:”:當<條件>爲真時執行<語句1>,否則,如果 else 部分存在的話,就執行<語句2>。與“?:”不同的是,if 只是一條語句,不會返回數值。<條件>是布爾值,必須用小括號括起來;<語句1>和<語句2>都只能是一個語句,欲使用多條語句,請用語句塊。

注意 請看下例:

if (a == 1)
if (b == 0) alert(a+b);
else
alert(a-b);

本代碼企圖用縮進的方法說明 else 是對應 if (a == 1) 的,但是實際上,由於 else 與 if (b == 0) 最相近,本代碼不能按作者的想法運行。正確的代碼是

if (a == 1) {
if (b == 0) alert(a+b);
} else {
alert(a-b);
}

提示 一行代碼太長,或者涉及到比較複雜的嵌套,可以考慮用多行文本,如上例,if (a == 1) 後面沒有立即寫上語句,而是換一行再繼續寫。瀏覽器不會混淆的,當它們讀完一行,發現是一句未完成語句,它們會繼續往下讀。使用縮進也是很好的習慣,當一些語句與上面的一兩句語句有從屬關係時,使用縮進能使程序更易讀,方便程序員進行編寫或修改工作。

循環體

for (<變量>=<初始值>; <循環條件>; <變量累加方法>) <語句>;

本語句的作用是重複執行<語句>,直到<循環條件>爲 false 爲止。它是這樣運作的:首先給<變量>賦<初始值>,然後*判斷<循環條件>(應該是一個關於<變量>的條件表達式)是否成立,如果成立就執行<語句>,然後按<變量累加方法>對<變量>作累加,回到“*”處重複,如果不成立就退出循環。這叫做“for循環”。下面看看例子。

for (i = 1; i < 10; i++) document.write(i);

本語句先給 i 賦初始值 1,然後執行 document.write(i)語句(作用是在文檔中寫 i 的值,請參越“對象化編程”一章);重複時 i++,也就是把 i 加 1;循環直到 i<10 不滿足,也就是 i>=10 時結束。結果是在文檔中輸出了“123456789”。

和 if 語句一樣,<語句>只能是一行語句,如果想用多條語句,你需要用語句塊。

與其他語言不同,JavaScript 的 for 循環沒有規定循環變量每次循環一定要加一或減一,<變量累加方法>可以是任意的賦值表達式,如 i+=3、i*=2、i-=j 等都成立。

提示 適當的使用 for 循環,能使 HTML 文檔中大量的有規律重複的部分簡化,也就是用 for 循環重複寫一些 HTML 代碼,達到提高網頁下載速度的目的。不過請在 Netscape 中重複進行嚴格測試,保證通過了纔好把網頁傳上去。作者曾試過多次因爲用 for 循環向文檔重複寫 HTML 代碼而導致 Netscape“猝死”。IE 中絕對沒有這種事情發生,如果你的網也是隻給 IE 看的,用多多的 for 也沒問題。

除了 for 循環,JavaScript 還提供 while 循環

while (<循環條件>) <語句>;

比 for 循環簡單,while 循環的作用是當滿足<循環條件>時執行<語句>。while 循環的累加性質沒有 for 循環強。<語句>也只能是一條語句,但是一般情況下都使用語句塊,因爲除了要重複執行某些語句之外,還需要一些能變動<循環條件>所涉及的變量的值的語句,否則一但踏入此循環,就會因爲條件總是滿足而一直困在循環裏面,不能出來。這種情況,我們習慣稱之爲“死循環”。死循環會弄停當時正在運行的代碼、正在下載的文檔,和佔用很大的內存,很可能造成死機,應該盡最大的努力避免。

break 和 continue

有時候在循環體內,需要立即跳出循環或跳過循環體內其餘代碼而進行下一次循環。break 和 continue 幫了我們大忙。

break;

本語句放在循環體內,作用是立即跳出循環。

continue;

本語句放在循環體內,作用是中止本次循環,並執行下一次循環。如果循環的條件已經不符合,就跳出循環。

for (i = 1; i < 10; i++) {
if (i == 3 || i == 5 || i == 8) continue;
document.write(i);
}

輸出:124679。

switch 語句

如果要把某些數據分類,例如,要把學生的成績按優、良、中、差分類,我們可能會用 if 語句:

if (score >= 0 && score < 60) {
result = 'fail';
} else if (score < 80) {
result = 'pass';
} else if (score < 90) {
result = 'good';
} else if (score <= 100) {
result = 'excellent';
} else {
result = 'error';
}

看起來沒有問題,但使用太多的 if 語句的話,程序看起來有點亂。switch 語句就是解決這種問題的最好方法。

switch (e) {
case r1: (注意:冒號)
...
[break;]
case r2:
...
[break;]
...
[default:
...]
}

這一大段的作用是:計算 e 的值(e 爲表達式),然後跟下邊“case”後的 r1、r2……比較,當找到一個相等於 e 的值時,就執行該“case”後的語句,直到遇到 break 語句或 switch 段落結束(“}”)。如果沒有一個值與 e 匹配,那麼就執行“default:”後邊的語句,如果沒有 default 塊,switch 語句結束。

上邊的 if 段用 switch 改寫就是:

switch (parseInt(score / 10)) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
result = 'fail';
break;
case 6:
case 7:
result = 'pass';
break;
case 8:
result = 'good';
break;
case 9:
result = 'excellent';
break;
default:
if (score == 100)
result = 'excellent';
else
result = 'error';
}

其中 parseInt() 方法是以後會介紹的,作用是取整。最後 default 段用的 if 語句,是爲了不把 100 分當錯誤論(parseInt(100 / 10) == 10)。

 

對象化編程

JavaScript 是使用“對象化編程”的,或者叫“面向對象編程”的。所謂“對象化編程”,意思是把 JavaScript 能涉及的範圍劃分成大大小小的對象,對象下面還繼續劃分對象直至非常詳細爲止,所有的編程都以對象爲出發點,基於對象。小到一個變量,大到網頁文檔、窗口甚至屏幕,都是對象。這一章將“面向對象”講述 JavaScript 的運行情況。

對象的基本知識

對象 是可以從 JavaScript“勢力範圍”中劃分出來的一小塊,可以是一段文字、一幅圖片、一個表單(Form)等等。每個對象有它自己的屬性 方法 事件 。對象的 屬性 是反映該對象某些特定的性質的,例如:字符串的長度、圖像的長寬、文字框(Textbox)裏的文字等等;對象的 方法 能對該對象做一些事情,例如,表單的“提交”(Submit),窗口的“滾動”(Scrolling)等等;而對象的事件 就能響應發生在對象上的事情,例如提交表單產生表單的“提交事件”,點擊連接產生的“點擊事件”。不是所有的對象都有以上三個性質,有些沒有事件,有些只有屬性。引用對象的任一“性質”用“<對象名>.<性質名>”這種方法。

基本對象

現在我們要複習以上學過的內容了——把一些數據類型用對象的角度重新學習一下。

Number “數字”對象。這個對象用得很少,作者就一次也沒有見過。不過屬於“Number”的對象,也就是“變量”就多了。

屬性

MAX_VALUE 用法:Number.MAX_VALUE;返回“最大值”。
MIN_VALUE
用法:Number.MIN_VALUE;返回“最小值”。
NaN
用法:Number.NaN 或 NaN;返回“NaN”。“NaN ”(不是數值)在很早就介紹過了。
NEGATIVE_INFINITY
用法:Number.NEGATIVE_INFINITY;返回:負無窮大,比“最小值”還小的值。
POSITIVE_INFINITY
用法:Number.POSITIVE_INFINITY;返回:正無窮大,比“最大值”還大的值。

方法

toString() 用法:<數值變量>.toString();返回:字符串形式的數值。如:若 a == 123;則 a.toString() == '123'。

String 字符串對象。聲明一個字符串對象最簡單、快捷、有效、常用的方法就是直接賦值。

屬性

length 用法:<字符串對象>.len gth;返回該字符串的長度。

方法

charAt() 用法:<字符串對象>.charAt(<位置>);返回該字符串位於第<位置>位的單個字符。注意:字符串中的一個字符是第 0 位的,第二個纔是第 1 位的,最後一個字符是第 length - 1 位的。
charCodeAt()
用法:<字符串對象>.charCodeAt(<位置>);返回該字符串位於第<位置>位的單個字符的 ASCII 碼。
fromCharCode()
用法:String.fromCharCode(a, b, c...);返回一個字符串,該字符串每個字符的 ASCII 碼由 a, b, c... 等來確定。
indexOf()
用法:<字符串對象>.indexOf(<另一個字符串對象>[, <起始位置>]);該方法從<字符串對象>中查找<另一個字符串對象>(如果給出<起始位置>就忽略之前的位置),如果找到了,就返回它的位置,沒有找到就返回“-1”。所有的“位置”都是從零開始的。
lastIndexOf()
用法:<字符串對象>.lastIndexOf(<另一個字符串對象>[, <起始位置>]);跟 indexOf() 相似,不過是從後邊開始找。
split()
用法:<字符串對象>.split(<分隔符字符>);返回一個數組,該數組是從<字符串對象>中分離開來的,<分隔符字符>決定了分離的地方,它本身不會包含在所返回的數組中。例如:'1&2&345&678'.split('&')返回數組:1,2,345,678。關於數組,我們等一下就討論。
substring()
用法:<字符串對象>.substring(<始>[, <終>]);返回原字符串的子字符串,該字符串是原字符串從<始>位置到<終>位置的前一位置的一段。<終> - <始> = 返回字符串的長度(length)。如果沒有指定<終>或指定得超過字符串長度,則子字符串從<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串,則返回空字符串。
substr()
用法:<字符串對象>.substr(<始>[, <長>]);返回原字符串的子字符串,該字符串是原字符串從<始>位置開始,長度爲<長>的一段。如果沒有指定<長>或指定得超過字符串長度,則子字符串從<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串,則返回空字符串。
toLowerCase()
用法:<字符串對象>.toLowerCase();返回把原字符串所有大寫字母都變成小寫的字符串。
toUpperCase()
用法:<字符串對象>.toUpperCase();返回把原字符串所有小寫字母都變成大寫的字符串。

Array 數組對象。數組對象是一個對象的集合,裏邊的對象可以是不同類型的。數組的每一個成員對象都有一個“下標”,用來表示它在數組中的位置(既然是“位置”,就也是從零開始的啦)。

數組的定義方法:

var <數組名> = new Array();

這樣就定義了一個空數組。以後要添加數組元素,就用:

<數組名>[<下標>] = ...;

注意這裏的方括號不是“可以省略”的意思,數組的下標表示方法就是用方括號括起來。

如果想在定義數組的時候直接初始化數據,請用:

var <數組名> = new Array(<元素1>, <元素2>, <元素3>...);

例如,var myArray = new Array(1, 4.5, 'Hi'); 定義了一個數組 myArray,裏邊的元素是:myArray[0] == 1; myArray[1] == 4.5; myArray[2] == 'Hi'。

但是,如果元素列表中只有一個元素,而這個元素又是一個正整數的話,這將定義一個包含<正整數>個空元素的數組。

注意:JavaScript只有一維數組!千萬不要用“Array(3,4)”這種愚蠢的方法來定義 4 x 5 的二維數組,或者用“myArray[2,3]”這種方法來返回“二維數組”中的元素。任意“myArray[...,3]”這種形式的調用其實只返回了“myArray[3]”。要使用多維數組,請用這種虛擬法:

var myArray = new Array(new Array(), new Array(), new Array(), ...);

其實這是一個一維數組,裏邊的每一個元素又是一個數組。調用這個“二維數組”的元素時:myArray[2][3] = ...;

屬性

length 用法:<數組對象>.length;返回:數組的長度,即數組裏有多少個元素。它等於數組裏最後一個元素的下標加一。所以,想添加一個元素,只需要:myArray[myArray.length] = ...。

方法

join()
用法:<數組對象>.join(<分隔符>);返回一個字符串,該字符串把數組中的各個元素串起來,用<分隔符>置於元素與元素之間。這個方法不影響數組原本的內容。
reverse()
用法:<數組對象>.reverse();使數組中的元素順序反過來。如果對數組[1, 2, 3]使用這個方法,它將使數組變成:[3, 2, 1]。
slice()
用法:<數組對象>.slice(<始>[, <終>]);返回一個數組,該數組是原數組的子集,始於<始>,終於<終>。如果不給出<終>,則子集一直取到原數組的結尾。
sort()
用法:<數組對象>.sort([<方法函數>]);使數組中的元素按照一定的順序排列。如果不指定<方法函數>,則按字母順序排列。在這種情況下,80 是比 9 排得前的。如果指定<方法函數>,則按<方法函數>所指定的排序方法排序。<方法函數>比較難講述,這裏只將一些有用的<方法函數>介紹給大家。

按升序排列數字:

function sortMethod(a, b) {
return a - b;
}

myArray.sort(sortMethod);

按降序排列數字:把上面的“a - b”該成“b - a”。

有關函數,請看下面。

Math “數學”對象,提供對數據的數學計算。下面所提到的屬性和方法,不再詳細說明“用法”,大家在使用的時候記住用“Math.<名>”這種格式。

屬性

E
返回常數 e (2.718281828...)。
LN2
返回 2 的自然對數 (ln 2)。
LN10
返回 10 的自然對數 (ln 10)。
LOG2E
返回以 2 爲低的 e 的對數 (log 2 e)。
LOG10E
返回以 10 爲低的 e 的對數 (log 10 e)。
PI
返回π(3.1415926535...)。
SQRT1_2
返回 1/2 的平方根。
SQRT2
返回 2 的平方根。

方法

abs(x)
返回 x 的絕對值。
acos(x)
返回 x 的反餘弦值(餘弦值等於 x 的角度),用弧度表示。
asin(x)
返回 x 的反正弦值。
atan(x)
返回 x 的反正切值。
atan2(x, y)
返回複平面內點(x, y)對應的複數的幅角,用弧度表示,其值在 -π 到 π 之間。
ceil(x)
返回大於等於 x 的最小整數。
cos(x)
返回 x 的餘弦。
exp(x)
返回 e 的 x 次冪 (e x )。
floor(x)
返回小於等於 x 的最大整數。

log(x)
返回 x 的自然對數 (ln x)。
max(a, b)
返回 a, b 中較大的數。
min(a, b)
返回 a, b 中較小的數。

pow(n, m)
返回 n 的 m 次冪 (n m )。
random()
返回大於 0 小於 1 的一個隨機數。
round(x)
返回 x 四捨五入後的值。
sin(x)
返回 x 的正弦。
sqrt(x)
返回 x 的平方根。
tan(x)
返回 x 的正切。

日期對象。這個對象可以儲存任意一個日期,從 0001 年到 9999 年,並且可以精確到毫秒數(1/1000 秒)。在內部,日期對象是一個整數,它是從 1970 年 1 月 1 日零時正開始計算到日期對象所指的日期的毫秒數。如果所指日期比 1970 年早,則它是一個負數。所有日期時間,如果不指定時區,都採用“UTC”(世界時)時區,它與“GMT”(格林威治時間)在數值上是一樣的。

定義一個日期對象:

var d = new Date;

這個方法使 d 成爲日期對象,並且已有初始值:當前時間。如果要自定初始值,可以用:

var d = new Date(99, 10, 1); //99 年 10 月 1 日
var d = new Date('Oct 1, 1999'); //99 年 10 月 1 日

等等方法。最好的方法就是用下面介紹的“方法”來嚴格的定義時間。

方法

以下有很多“g/set[UTC]XXX”這樣的方法,它表示既有“getXXX”方法,又有“setXXX”方法。“get”是獲得某個數值,而“set”是設定某個數值。如果帶有“UTC”字母,則表示獲得/設定的數值是基於 UTC 時間的,沒有則表示基於本地時間或瀏覽期默認時間的。

如無說明,方法的使用格式爲:“<對象>.<方法>”,下同。

g/set[UTC]FullYear() 返回/設置年份,用四位數表示。如果使用“x.set[UTC]FullYear(99)”,則年份被設定爲 0099 年。

g/set[UTC]Year() 返回/設置年份,用兩位數表示。設定的時候瀏覽器自動加上“19”開頭,故使用“x.set[UTC]Year(00)”把年份設定爲 1900 年。

g/set[UTC]Month() 返回/設置月份。

g/set[UTC]Date() 返回/設置日期。

g/set[UTC]Day() 返回/設置星期,0 表示星期天

g/set[UTC]Hours() 返回/設置小時數,24小時制。

g/set[UTC]Minutes() 返回/設置分鐘數。

g/set[UTC]Seconds() 返回/設置秒鐘數。

g/set[UTC]Milliseconds() 返回/設置毫秒數。

g/setTime() 返回/設置時間,該時間就是日期對象的內部處理方法:從 1970 年 1 月 1 日零時正開始計算到日期對象所指的日期的毫秒數。如果要使某日期對象所指的時間推遲 1 小時,就用:“x.setTime(x.getTime() + 60 * 60 * 1000);”(一小時 60 分,一分 60 秒,一秒 1000 毫秒)。

getTimezoneOffset() 返回日期對象採用的時區與格林威治時間所差的分鐘數。在格林威治東方的市區,該值爲負,例如:中國時區(GMT+0800)返回“-480”。

toString() 返回一個字符串,描述日期對象所指的日期。這個字符串的格式類似於:“Fri Jul 21 15:43:46 UTC+0800 2000”。

toLocaleString() 返回一個字符串,描述日期對象所指的日期,用本地時間表示格式。如:“2000-07-21 15:43:46”。

toGMTString() 返回一個字符串,描述日期對象所指的日期,用 GMT 格式。

toUTCString() 返回一個字符串,描述日期對象所指的日期,用 UTC 格式。

parse() 用法:Date.parse(<日期對象>);返回該日期對象的內部表達方式。

全局對象

全局對象從不現形,它可以說是虛擬出來的,目的在於把全局函數“對象化”。在 Microsoft JScript 語言參考中,它叫做“Global 對象”,但是引用它的方法和屬性從來不用“Global.xxx”(況且這樣做會出錯),而直接用“xxx”。

屬性

NaN 一早就說過了。

方法

eval() 把括號內的字符串當作標準語句或表達式來運行。

isFinite() 如果括號內的數字是“有限”的(介於 Number.MIN_VALUE 和 Number.MAX_VALUE 之間)就返回 true;否則返回 false。

isNaN() 如果括號內的值是“NaN”則返回 true 否則返回 false。

parseInt() 返回把括號內的內容轉換成整數之後的值。如果括號內是字符串,則字符串開頭的數字部分被轉換成整數,如果以字母開頭,則返回“NaN”。

parseFloat() 返回把括號內的字符串轉換成浮點數之後的值,字符串開頭的數字部分被轉換成浮點數,如果以字母開頭,則返回“NaN”。

toString() 用法:<對象>.toString();把對象轉換成字符串。如果在括號中指定一個數值,則轉換過程中所有數值轉換成特定進制。

escape() 返回括號中的字符串經過編碼後的新字符串。一般用於cookie中,該編碼應用於 URL,也就是把空格寫成“%20”這種格式。“+”不被編碼,如果要“+”也被編碼,請用:escape('...', 1)。

unescape() 是 escape() 的反過程。解編括號中字符串成爲一般字符串。

函數

函數的定義

所謂“函數”,是有返回值的對象或對象的方法。

函數的種類

常見的函數有:構造函數,如 Array(),能構造一個數組;全局函數,即全局對象裏的方法;自定義函數;等等。

自定義函數

定義函數用以下語句:

function 函數名([參數集]) {
...
[return[ <值>];]
...
}

其中,用在 function 之後和函數結尾的大括號是不能省去的,就算整個函數只有一句。

函數名與變量名有一樣的起名規定,也就是隻包含字母數字下劃線、字母排頭、不能與保留字重複等。

參數集可有可無,但括號就一定要有。

參數 是函數外部向函數內部傳遞信息的橋樑,例如,想叫一個函數返回 3 的立方,你就要讓函數知道“3”這個數值,這時候就要有一個變量來接收數值,這種變量叫做參數。

參數集是一個或多個用逗號分隔開來的參數的集合,如:a, b, c。

函數的內部有一至多行語句,這些語句並不會立即執行,而只當有其它程序調用它時才執行。這些語句中可能包含“return”語句。在執行一個函數的時候,碰到 return 語句,函數立刻停止執行,並返回到調用它的程序中。如果“return”後帶有<值>,則退出函數的同時返回該值。

在函數的內部,參數可以直接當作變量來使用,並可以用 var 語句來新建一些變量,但是這些變量都不能被函數外部的過程調用。要使函數內部的信息能被外部調用,要麼使用“return”返回值,要麼使用全局變量

全局變量 在 Script 的“根部”(非函數內部)的“var”語句所定義的變量就是全局變量,它能在整個過程的任意地方被調用、更改。

function addAll(a, b, c) {
return a + b + c;
}

var total = addAll(3, 4, 5);

這個例子建立了一個叫“addAll”的函數,它有 3 個參數:a, b, c,作用是返回三個數相加的結果。在函數外部,利用“var total = addAll(3, 4, 5);”接收函數的返回值。

更多的時候,函數是沒有返回值的,這種函數在一些比較強調嚴格的語言中是叫做“過程”的,例如 Basic 類語言的“Sub”、Pascal 語言的“procedure”。

屬性

arguments 一個數組,反映外部程序調用函數時指定的參數。用法:直接在函數內部調用“arguments”。

文檔對象

現在我們將開始討論更“實際”的話題——文檔對象(DOM)。文檔對象是指在網頁文檔裏劃分出來的對象。在 JavaScript 能夠涉及的範圍內有如下幾個“大”對象:window, document, location, navigator, screen, history 等。下面是一個文檔對象樹,你可以看到對象下包含對象的“壯觀”情景。要引用某個對象,就要把父級的對象都列出來。例如,要引用某表單“applicationForm”的某文字框“customerName”,就要用“document.applicationForm.customerName”。

下表中有些對象是全小寫的,有些是以大寫字母開頭的。以大寫字母開頭的對象表示,引用該對象不使用下表列出的名字,而直接用對象的“名字”(Id 或 Name,下面有講解),或用它所屬的對象數組指定。

這裏我們不準備講解對象的“事件”,雖然我們也會列出對象所能響應的事件。我們將會在下一章“ 事件處理 ”中講解事件。

  • navigator
  • screen
  • window
    • history
    • location
    • frames[]; Frame
    • document
      • anchors[]; links[]; Link
      • applets[]
      • embeds[]
      • forms[]; Form
        • Button
        • Checkbox
        • elements[]; Element
        • Hidden
        • Password
        • Radio
        • Reset
        • Select
          • options[]; Option
        • Submit
        • Text
        • Textarea
      • images[]; Image
瀏覽器對象
屏幕對象
窗口對象
歷史對象
地址對象
框架對象
文檔對象
連接對象
Java小程序對象
插件對象
表單對象
按鈕對象
複選框對象
表單元素對象
隱藏對象
密碼輸入區對象
單選域對象
重置按鈕對象
選擇區(下拉菜單、列表)對象
選擇項對象
提交按鈕對象
文本框對象
多行文本輸入區對象
圖片對象

navigator 瀏覽器對象 反映了當前使用的瀏覽器的資料。

屬性

appCodeName 返回瀏覽器的“碼名”(?),流行的 IE 和 NN 都返回 'Mozilla'。

appName 返回瀏覽器名。IE 返回 'Microsoft Internet Explorer',NN 返回 'Netscape'。

appVersion 返回瀏覽器版本,包括了大版本號、小版本號、語言、操作平臺等信息。

platform 返回瀏覽器的操作平臺,對於 Windows 9x 上的瀏覽器,返回 'Win32'(大小寫可能有差異)。

userAgent 返回以上全部信息。例如,IE5.01 返回 'Mozilla/4.0 (compatible; MSIE 5.01; Windows 98)'。

javaEnabled() 返回一個布爾值,代表當前瀏覽器允許不允許 Java。

screen 屏幕對象 反映了當前用戶的屏幕設置。

屬性

width 返回屏幕的寬度(像素數)。

height 返回屏幕的高度。

availWidth 返回屏幕的可用寬度(除去了一些不自動隱藏的類似任務欄的東西所佔用的寬度)。

availHeight 返回屏幕的可用高度。

colorDepth 返回當前顏色設置所用的位數 - 1:黑白;8:256色;16:增強色;24/32:真彩色

window 窗口對象 最大的對象,它描述的是一個瀏覽器窗口。一般要引用它的屬性和方法時,不需要用“window.xxx”這種形式,而直接使用“xxx”。一個框架頁面也是一個窗口。

屬性

name 窗口的名稱,由打開它的連接(<a target="...">)或框架頁(<frame name="...">)或某一個窗口調用的 open() 方法(見下)決定。一般我們不會用這個屬性。

status 窗口下方的“狀態欄”所顯示的內容。通過對 status 賦值,可以改變狀態欄的顯示。

opener 用法:window.opener;返回打開本窗口的窗口對象。注意:返回的是一個窗口對象。如果窗口不是由其他窗口打開的,在 Netscape 中這個屬性返回 null;在 IE 中返回“未定義”(undefined)。undefined 在一定程度上等於 null。注意:undefined 不是 JavaScript 常數,如果你企圖使用“undefined”,那就真的返回“未定義”了。

self 指窗口本身,它返回的對象跟 window 對象是一模一樣的。最常用的是“self.close()”,放在<a>標記中:“<a href="javascript:self.close()">關閉窗口</a>”。

parent 返回窗口所屬的框架頁對象。

top 返回佔據整個瀏覽器窗口的最頂端的框架頁對象。

history 歷史對象, 見下 。

location 地址對象, 見下 。

document 文檔對象, 見下 。

方法

open() 打開一個窗口。用法:open(<URL字符串>, <窗口名稱字符串>, <參數字符串>);
   <URL字符串>:描述所打開的窗口打開哪一個網頁。如果留空(''),則不打開任意網頁。
   <窗口名稱字符串>:描述被打開的窗口的名稱(window.name),可以使用'_top'、'_blank'等內建名稱。這裏的名稱跟“<a href="..." target="...">”裏的“target”屬性是一樣的。
   <參數字符串>:描述被打開的窗口的樣貌。如果只需要打開一個普通窗口,該字符串留空(''),如果要指定樣貌,就在字符串裏寫上一到多個參數,參數之間用逗號隔開。

例:打開一個 400 x 100 的乾淨的窗口:
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')

參數


top=# 窗口頂部離開屏幕頂部的像素數
left=# 窗口左端離開屏幕左端的像素數
width=# 窗口的寬度
height=# 窗口的高度
menubar=... 窗口有沒有菜單,取值yes或no
toolbar=... 窗口有沒有工具條,取值yes或no
location=... 窗口有沒有地址欄,取值yes或no
directories=... 窗口有沒有連接區,取值yes或no
scrollbars=... 窗口有沒有滾動條,取值yes或no
status=... 窗口有沒有狀態欄,取值yes或no
resizable=... 窗口給不給調整大小,取值yes或no

open() 方法有返回值,返回的就是它打開的窗口對象。所以,

var newWindow = open('','_blank');

這樣把一個新窗口賦值到“newWindow”變量中,以後通過“newWindow”變量就可以控制窗口了。

close() 關閉一個已打開的窗口。

用法:window.close() 或 self.close():關閉本窗口;

<窗口對象>.close():關閉指定的窗口。
   如果該窗口有狀態欄,調用該方法後瀏覽器會警告:“網頁正在試圖關閉窗口,是否關閉?”然後等待用戶選擇是否;如果沒有狀態欄,調用該方法將直接關閉窗口。

blur() 使焦點從窗口移走,窗口變爲“非活動窗口”。

focus() 是窗口獲得焦點,變爲“活動窗口”。不過在 Windows 98,該方法只能使窗口的標題欄和任務欄上的相應按鈕閃爍,提示用戶該窗口正在試圖獲得焦點。

scrollTo() 用法:[<窗口對象>.]scrollTo(x, y);使窗口滾動,使文檔從左上角數起的(x, y)點滾動到窗口的左上角。

scrollBy() 用法:[<窗口對象>.]scrollBy(deltaX, deltaY);使窗口向右滾動 deltaX 像素,向下滾動 deltaY 像素。如果取負值,則向相反的方向滾動。

resizeTo() 用法:[<窗口對象>.]resizeTo(width, height);使窗口調整大小到寬 width 像素,高 height 像素。

resizeBy() 用法:[<窗口對象>.]resizeBy(deltaWidth, deltaHeight);使窗口調整大小,寬增大 deltaWidth 像素,高增大 deltaHeight 像素。如果取負值,則減少。

alert() 用法:alert(<字符串>);彈出一個只包含“確定”按鈕的對話框,顯示<字符串>的內容,整個文檔的讀取、Script 的運行都會暫停,直到用戶按下“確定”。

confirm() 用法:confirm(<字符串>);彈出一個包含“確定”和“取消”按鈕的對話框,顯示<字符串>的內容,要求用戶做出選擇,整個文檔的讀取、Script 的運行都會暫停。如果用戶按下“確定”,則返回 true 值,如果按下“取消”,則返回 false 值。

prompt() 用法:prompt(<字符串>[, <初始值>]);彈出一個包含“確認”“取消”和一個文本框的對話框,顯示<字符串>的內容,要求用戶在文本框輸入一些數據,整個文檔的讀取、Script 的運行都會暫停。如果用戶按下“確認”,則返回文本框裏已有的內容,如果用戶按下“取消”,則返回 null 值。如果指定<初始值>,則文本框裏會有默認值。

事件

onload ; >onunload ; onresize ; onblur ; onfocus ; onerror

history 歷史對象 歷史對象指瀏覽器的瀏覽歷史。鑑於安全性的需要,該對象收到很多限制,現在只剩下下列屬性和方法。

屬性

length 歷史的項數。JavaScript 所能管到的歷史被限制在用瀏覽器的“前進”“後退”鍵可以去到的範圍。本屬性返回的是“前進”和“後退”兩個按鍵之下包含的地址數的和。

方法

back() 後退,跟按下“後退”鍵是等效的。
forward()
前進,跟按下“前進”鍵是等效的。
go()
用法:history.go(x);在歷史的範圍內去到指定的一個地址。如果 x < 0,則後退 x 個地址,如果 x > 0,則前進 x 個地址,如果 x == 0,則刷新現在打開的網頁。history.go(0) 跟 location.reload() 是等效的。

location 地址對象 它描述的是某一個窗口對象所打開的地址。要表示當前窗口的地址,只需要使用“location”就行了;若要表示某一個窗口的地址,就使用“<窗口對象>.location”。

注意 屬於不同協議或不同主機的兩個地址之間不能互相引用對方的 location 對象,這是出於安全性的需要。例如,當前窗口打開的是“www.a.com”下面的某一頁,另外一個窗口(對象名爲:bWindow)打開的是“www.b.com”的網頁。如果在當前窗口使用“bWindow.location”,就會出錯:“沒有權限”。這個錯誤是不能用錯誤處理程序(Event Handler,參閱 onerror 事件)來接收處理的。

屬性

protocol 返回地址的協議,取值爲 'http:','https:','file:' 等等。

hostname 返回地址的主機名,例如,一個“http://www.microsoft.com/china/”的地址,location.hostname == 'www.microsoft.com'。

port 返回地址的端口號,一般 http 的端口號是 '80'。

host 返回主機名和端口號,如:'www.a.com:8080'。

pathname 返回路徑名,如“http://www.a.com/b/c.html”,location.pathname == 'b/c.html'。

hash 返回“#”以及以後的內容,如“http://www.a.com/b/c.html#chapter4”,location.hash == '#chapter4';如果地址裏沒有“#”,則返回空字符串。

search 返回“?”以及以後的內容,如“http://www.a.com/b/c.asp?selection=3&jumpto=4”,location.search == '?selection=3&jumpto=4';如果地址裏沒有“?”,則返回空字符串。

href 返回以上全部內容,也就是說,返回整個地址。在瀏覽器的地址欄上怎麼顯示它就怎麼返回。如果想一個窗口對象打開某地址,可以使用“location.href = '...'”,也可以直接用“location = '...'”來達到此目的。

方法

reload() 相當於按瀏覽器上的“刷新”(IE)或“Reload”(Netscape)鍵。
replace()
打開一個 URL,並取代歷史對象中當前位置的地址。用這個方法打開一個 URL 後,按下瀏覽器的“後退”鍵將不能返回到剛纔的頁面。

frames[]; Frame 框架對象 請參閱“ 使用框架和 Cookies ”一章。

document 文檔對象 描述當前窗口或指定窗口對象的文檔。它包含了文檔從<head>到</body>的內容。

用法:document (當前窗口)

或 <窗口對象>.document (指定窗口)

屬性

cookie 關於 cookie 請參看“ 使用框架和 Cookies ”一章。
lastModified
當前文檔的最後修改日期,是一個 Date 對象。
referrer
如果當前文檔是通過點擊連接打開的,則 referrer 返回原來的 URL。
title
指<head>標記裏用<title>...</title>定義的文字。在 Netscape 裏本屬性不接受賦值。
fgColor
指<body>標記的 text 屬性所表示的文本顏色。
bgColor
指<body>標記的 bgcolor 屬性所表示的背景顏色。
linkColor
指<body>標記的 link 屬性所表示的連接顏色。
alinkColor
指<body>標記的 alink 屬性所表示的活動連接顏色。
vlinkColor
指<body>標記的 vlink 屬性所表示的已訪問連接顏色。

方法

open() 打開文檔以便 JavaScript 能向文檔的當前位置(指插入 JavaScript 的位置)寫入數據。通常不需要用這個方法,在需要的時候 JavaScript 自動調用。
write(); writeln()
向文檔寫入數據,所寫入的會當成標準文檔 HTML 來處理。writeln() 與 write() 的不同點在於,writeln() 在寫入數據以後會加一個換行。這個換行只是在 HTML 中換行,具體情況能不能夠是顯示出來的文字換行,要看插入 JavaScript 的位置而定。如在<pre>標記中插入,這個換行也會體現在文檔中。
clear()
清空當前文檔。
close()
關閉文檔,停止寫入數據。如果用了 write[ln]() 或 clear() 方法,就一定要用 close() 方法來保證所做的更改能夠顯示出來。如果文檔還沒有完全讀取,也就是說,JavaScript 是插在文檔中的,那就不必使用該方法。

現在我們已經擁有足夠的知識來做以下這個很多網站都有的彈出式更新通知了。

<script language="JavaScript">
<!--
var whatsNew = open('','_blank','top=50,left=50,width=200,height=300,' +
'menubar=no,toolbar=no,directories=no,location=no,' +
'status=no,resizable=no,scrollbars=yes');
whatsNew.document.write('<center><b>更新通知</b></center>');
whatsNew.document.write('<p>最後更新日期:00.08.01');
whatsNew.document.write('<p>00.08.01:增加了“我的最愛”欄目。');
whatsNew.document.write('<p align="right">' +
'<a href="javascript:self.close()">關閉窗口</a>');
whatsNew.document.close();
-->
</script>

當然也可以先寫好一個 HTML 文件,在 open() 方法中直接 load 這個文件。

anchors[]; links[]; Link 連接對象

用法:document.anchors [ [x] ] ; document.links [ [x] ] ; <anchorId>; <linkId>
   document.anchors 是一個數組,包含了文檔中所有錨標記(包含 name 屬性的<a>標記),按照在文檔中的次序,從 0 開始給每個錨標記定義了一個下標。
   document.links 也是一個數組,包含了文檔中所有連接標記(包含 href 屬性的<a>標記和<map>標記段裏的<area>標記),按照在文檔中的次序,從 0 開始給每個連接標記定義了一個下標。
   如果一個<a>標記既有 name 屬性,又有 href 屬性,則它既是一個 Anchor 對象,又是一個 Link 對象。
   在 IE 中,如果在<a>標記中添加“id="..."”屬性,則這個<a>對象被賦予一個標識(ID),調用這個對象的時候只需要使用“<id>”就行了。很多文檔部件都可以用這個方法來賦予 ID,但要注意不能有兩個 ID 相同。

anchors 和 links 作爲數組,有數組的屬性和方法。單個 Anchor 對象沒有屬性;單個 Link 對象的屬性見下。

屬性

protocol; hostname; port; host; pathname; hash; search; href與 location 對象相同。
target
返回/指定連接的目標窗口(字符串),與<a>標記裏的 target 屬性是一樣的。

事件

onclick ; onmouseover ; onmouseout ; onmousedown ; onmouseup

applets[] Java小程序對象 它是一個數組,包含了文檔中所有的 Applet 對象(Java 小程序)。作爲一個數組,有數組的屬性和方法。關於單個 Applet 對象的屬性和方法,我引用一句話:“Applet 對象繼承了 Java 小程序的所有公共屬性和方法。”(英文原句:The Applet object inherits all public properties of the Java applet./The Applet object inherits all public methodss of the Java applet.) 因爲本人很厭惡 Java 小程序,所以對它的什麼“公共”“私有”的問題不感興趣,也就沒有探討了。

embeds[] 插件對象 它是一個數組,包含了文檔中所有的插件(<embed>標記)。因爲每個插件的不同,每個 Embed 對象也有不同的屬性和方法。

forms[]; Form 表單對象 document.forms[] 是一個數組,包含了文檔中所有的表單(<form>)。要引用單個表單,可以用 document.forms[x],但是一般來說,人們都會這樣做:在<form>標記中加上“name="..."”屬性,那麼直接用“document.<表單名>”就可以引用了。

Form 對象的屬性

name 返回表單的名稱,也就是<form name="...">屬性。

action 返回/設定表單的提交地址,也就是<form action="...">屬性。

method 返回/設定表單的提交方法,也就是<form method="...">屬性。

target 返回/設定表單提交後返回的窗口,也就是<form target="...">屬性。

encoding 返回/設定表單提交內容的編碼方式,也就是<form enctype="...">屬性。

length 返回該表單所含元素的數目。

方法

reset() 重置表單。這與按下“重置”按鈕是一樣的。

submit() 提交表單。這與按下“提交”按鈕是一樣的。

事件

onreset ;

以下從“Button”到“Textarea”都是表單的元素對象。

Button 按鈕對象 由“<input type="button">”指定。引用一個 Button 對象,可以使用“<文檔對象>.<表單對象>.<按鈕名稱>”。<按鈕名稱>指在<input>標記中的“name="..."”屬性的值。引用任意表單元素都可以用這種方法。

屬性

name 返回/設定用<input name="...">指定的元素名稱。

value 返回/設定用<input value="...">指定的元素的值。

form 返回包含本元素的表單對象。

方法

blur() 從對象中移走焦點。

focus() 讓對象獲得焦點。

click() 模擬鼠標點擊該對象。

事件

onclick ; onmousedown ; onmouseup

Checkbox 複選框對象 由“<input type="checkbox">”指定。

屬性

name 返回/設定用<input name="...">指定的元素名稱。

value 返回/設定用<input value="...">指定的元素的值。

form 返回包含本元素的表單對象。

checked 返回/設定該複選框對象是否被選中。這是一個布爾值。

defaultChecked 返回/設定該複選框對象默認是否被選中。這是一個布爾值。

方法

blur() 從對象中移走焦點。

focus() 讓對象獲得焦點。

click() 模擬鼠標點擊該對象。

事件

onclick

elements[]; Element 表單元素對象 <表單對象>.elements 是一個數組,包含了該表單所有的對象。一般我們不用該數組,而直接引用各個具體的對象。

Hidden 隱藏對象 由“<input type="hidden">”指定。

屬性

name 返回/設定用<input name="...">指定的元素名稱。

value 返回/設定用<input value="...">指定的元素的值。

form 返回包含本元素的表單對象。

Password 密碼輸入區對象 由“<input type="password">”指定。

屬性

name 返回/設定用<input name="...">指定的元素名稱。

value 返回/設定密碼輸入區當前的值。

defaultValue 返回用<input value="...">指定的默認值。

form 返回包含本元素的表單對象。

方法

blur() 從對象中移走焦點。

focus() 讓對象獲得焦點。

select() 選中密碼輸入區裏全部文本。

事件

onchange

Radio 單選域對象 由“<input type="radio">”指定。一組 Radio 對象有共同的名稱(name 屬性),這樣的話,document.formName.radioName 就成了一個數組。要訪問單個 Radio 對象就要用:document.formName.radioName[x]。

單個 Radio 對象的屬性

name 返回/設定用<input name="...">指定的元素名稱。

value 返回/設定用<input value="...">指定的元素的值。

form 返回包含本元素的表單對象。

checked 返回/設定該單選域對象是否被選中。這是一個布爾值。

defaultChecked 返回/設定該對象默認是否被選中。這是一個布爾值。

方法

blur() 從對象中移走焦點。

focus() 讓對象獲得焦點。

click() 模擬鼠標點擊該對象。

事件

onclick

Reset 重置按鈕對象 由“<input type="reset">”指定。因爲 Reset 也是按鈕,所以也有 Button 對象 的屬性和方法。至於“onclick”事件,一般用 Form 對象的 onreset 代替。

Select 選擇區(下拉菜單、列表)對象 由“<select>”指定。

屬性

name 返回/設定用<input name="...">指定的元素名稱。
length
返回 Select 對象下選項的數目。
selectedIndex
返回被選中的選項的下標。這個下標就是在 options[] 數組中該選項的位置。如果 Select 對象允許多項選擇,則返回第一個被選中的選項的下標。
form
返回包含本元素的表單對象。

方法

blur() 從對象中移走焦點。
focus()
讓對象獲得焦點。

事件

onchange

options[]; Option 選擇項對象 options[] 是一個數組,包含了在同一個 Select 對象下的 Option 對象。Option 對象由“<select>”下的“<options>”指定。

options[] 數組的屬性

length; selectedIndex 與所屬 Select 對象的同名屬性相同。

單個 Option 對象的屬性

text 返回/指定 Option 對象所顯示的文本
value
返回/指定 Option 對象的值,與<options value="...">一致。
index
返回該 Option 對象的下標。對此並沒有什麼好說,因爲要指定特定的一個 Option 對象,都要先知道該對象的下標。這個屬性好像沒有什麼用。
selected
返回/指定該對象是否被選中。通過指定 true 或者 false,可以動態的改變選中項。
defaultSelected
返回該對象默認是否被選中。true / false。

Submit 提交按鈕對象 由“<input type="submit">指定。因爲 Submit 也是按鈕,所以也有 Button 對象 的屬性和方法。至於“onclick”事件,一般用 Form 對象的 onsubmit 代替。

Text 文本框對象 由“<input type="text">”指定。Password 對象也是 Text 對象的一種,所以 Password 對象 所有的屬性、方法和事件,Text 對象都有。

Textarea 多行文本輸入區對象 由“<textarea>”指定。Textarea 對象所有的屬性、方法和事件和 Text 對象 相同,也就是跟 Password 對象 一樣。

images[]; Image 圖片對象 document.images[] 是一個數組,包含了文檔中所有的圖片(<img>)。要引用單個圖片,可以用 document.images[x]。如果某圖片包含“name”屬性,也就是用“<img name="...">”這種格式定義了一幅圖片,就可以使用“document.images['...']”這種方法來引用圖片。在 IE 中,如果某圖片包含 ID 屬性,也就是用“<img id="...">”這種格式定義了一幅圖片,就可以直接使用“<imageID>”來引用圖片。

單個 Image 對象的屬性

name; src; lowsrc; width; height; vspace; hspace; border這些屬性跟<img>標記裏的同名屬性是一樣的。在 Netscape 裏,除了 src 屬性,其它屬性(幾乎全部)都不能改的,即使改了,在文檔中也不能顯示出效果來。這些屬性最有用的就是 src 了,通過對 src 屬性賦值,可以實時的更改圖片。

事件

onclick

不顯示在文檔中的 Image 對象

不顯示在文檔中的 Image 對象是用 var 語句定義的:

var myImage = new Image(); 或
var myImage = new Image(<圖片地址字符串>);

然後就可以像一般 Image 對象一樣對待 myImage 變量了。不過既然它不顯示在文檔中,以下屬性:lowsrc, width, height, vspace, hspace, border 就沒有什麼用途了。一般這種對象只有一個用:預讀圖片(preload)。因爲當對對象的 src 屬性賦值的時候,整個文檔的讀取、JavaScript 的運行都暫停,讓瀏覽器專心的讀取圖片。預讀圖片以後,瀏覽器的緩存裏就有了圖片的 Copy,到真正要把圖片放到文檔中的時候,圖片就可以立刻顯示了。現在的網頁中經常會有一些圖像連接,當鼠標指向它的時候,圖像換成另外一幅圖像,它們都是先預讀圖像的。

預讀圖像的 JavaScript 例子

var imagePreload = new Image();

imagePreload.src = '001.gif';
imagePreload.src = '002.gif';
imagePreload.src = '003.gif';

以上例子適合預讀少量圖片。

function imagePreload() {
var imgPreload = new Image();
for (i = 0; i < arguments.length; i++) {
imgPreload.src = arguments[i];
}
}

imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif');

以上例子適合預讀大量圖片。

 

事件處理

事件處理概述

事件處理是對象化編程的一個很重要的環節,沒有了事件處理,程序就會變得很死,缺乏靈活性。事件處理的過程可以這樣表示:發生事件 - 啓動事件處理程序 - 事件處理程序作出反應。其中,要使事件處理程序能夠啓動,必須先告訴對象,如果發生了什麼事情,要啓動什麼處理程序,否則這個流程就不能進行下去。事件的處理程序可以是任意 JavaScript 語句,但是我們一般用特定的自定義函數(function)來處理事情。

指定事件處理程序

指定事件處理程序有三種方法:

方法一 直接在 HTML 標記中指定。這種方法是用得最普遍的。方法是:

<標記 ... ... 事件="事件處理程序" [事件="事件處理程序" ...]>

讓我們來看看例子:

<body ... onload="alert('網頁讀取完成,請慢慢欣賞!')" onunload="alert('再見!')">

這樣的定義<body>標記,能使文檔讀取完畢的時候彈出一個對話框,寫着“網頁讀取完成,請慢慢欣賞”;在用戶退出文檔(或者關閉窗口,或者到另一個頁面去)的時候彈出“再見”。

方法二 編寫特定對象特定事件的 JavaScript。這種方法用得比較少,但是在某些場合還是很好用的。方法是:

<script language="JavaScript" for="對象" event="事件">
...
(事件處理程序代碼)
...
</script>

例:

<script language="JavaScript" for="window" event="onload">
alert('網頁讀取完成,請慢慢欣賞!');
</script>

方法三 在 JavaScript 中說明。方法:

<事件主角 - 對象>.<事件> = <事件處理程序>;

用這種方法要注意的是,“事件處理程序”是真正的代碼,而不是字符串形式的代碼。如果事件處理程序是一個自定義函數,如無使用參數的需要,就不要加“()”。例:

...

function ignoreError() {

return true;
}

...


window.onerror = ignoreError; // 沒有使用“()”

這個例子將 ignoreError() 函數定義爲 window 對象的 onerror 事件的處理程序。它的效果是忽略該 window 對象下任何錯誤(由引用不允許訪問的 location 對象產生的“沒有權限”錯誤是不能忽略的)。

事件詳解

onblur 事件 發生在窗口失去焦點的時候。

應用於: window 對象

onchange 事件 發生在文本輸入區的內容被更改,然後焦點從文本輸入區移走之後。捕捉此事件主要用於實時檢測輸入的有效性,或者立刻改變文檔內容。

應用於: Password 對象 ; Select 對象 ; Text 對象 ; Textarea 對象

onclick 事件 發生在對象被單擊的時候。單擊是指鼠標停留在對象上,按下鼠標鍵,沒有移動鼠標而放開鼠標鍵這一個完整的過程。

一個普通按鈕對象(Button)通常會有 onclick 事件處理程序,因爲這種對象根本不能從用戶那裏得到任何信息,沒有 onclick 事件處理程序就等於廢柴。按鈕上添加 onclick 事件處理程序,可以模擬“另一個提交按鈕”,方法是:在事件處理程序中更改表單的 action, target, encoding, method 等一個或幾個屬性,然後調用表單的 submit() 方法。

在 Link 對象的 onclick 事件處理程序中返回 false 值(return false),能阻止瀏覽器打開此連接。即,如果有一個這樣的連接:<a href="http://www.a.com" onclick="return false">Go!</a>,那麼無論用戶怎樣點擊,都不會去到 www.a.com 網站,除非用戶禁止瀏覽器運行 JavaScript。

應用於: Button 對象 ; Checkbox 對象 ; Image 對象 ; Link 對象 ; Radio 對象 ; Reset 對象 ; Submit 對象

onerror 事件 發生在錯誤發生的時候。它的事件處理程序通常就叫做“錯誤處理程序”(Error Handler),用來處理錯誤。上邊已經介紹過,要忽略一切錯誤,就使用:

function ignoreError() {
return true;
}

window.onerror = ignoreError;

應用於: window 對象

onfocus 事件 發生在窗口得到焦點的時候。

應用於: window 對象

onload 事件 發生在文檔全部下載完畢的時候。全部下載完畢意味着不但 HTML 文件,而且包含的圖片,插件,控件,小程序等全部內容都下載完畢。本事件是 window 的事件,但是在 HTML 中指定事件處理程序的時候,我們是把它寫在<body>標記中的。

應用於: window 對象

onmousedown 事件 發生在用戶把鼠標放在對象上按下鼠標鍵的時候。參考 onmouseup 事件。

應用於: Button 對象 ; Link 對象

onmouseout 事件 發生在鼠標離開對象的時候。參考 onmouseover 事件。

應用於: Link 對象

onmouseover 事件 發生在鼠標進入對象範圍的時候。這個事件和 onmouseout 事件,再加上圖片的預讀,就可以做到當鼠標移到圖像連接上,圖像更改的效果了。有時我們看到,在指向一個連接時,狀態欄上不顯示地址,而顯示其它的資料,看起來這些資料是可以隨時更改的。它們是這樣做出來的:

<a href="..."
onmouseover="window.status='Click Me Please!'; return true;"
onmouseout="window.status=''; return true;">

應用於: Link 對象

onmouseup 事件 發生在用戶把鼠標放在對象上鼠標鍵被按下的情況下,放開鼠標鍵的時候。如果按下鼠標鍵的時候,鼠標並不在放開鼠標的對象上,則本事件不會發生。

應用於: Button 對象 ; Link 對象

onreset 事件 發生在表單的“重置”按鈕被單擊(按下並放開)的時候。通過在事件處理程序中返回 false 值(return false)可以阻止表單重置。

應用於: Form 對象

onresize 事件 發生在窗口被調整大小的時候。

應用於: window 對象

onsubmit 事件 發生在表單的“提交”按鈕被單擊(按下並放開)的時候。可以使用該事件來驗證表單的有效性。通過在事件處理程序中返回 false 值(return false)可以阻止表單提交。

應用於: Form 對象

onunload 事件 發生在用戶退出文檔(或者關閉窗口,或者到另一個頁面去)的時候。與 onload 一樣,要寫在 HTML 中就寫到<body>標記裏。

有的 Web Masters 用這個方法來彈出“調查表單”,以“強迫”來者填寫;有的就彈出廣告窗口,唆使來者點擊連接。我覺得這種“onunload="open..."”的方法很不好,有時甚至會因爲彈出太多窗口而導致資源缺乏。有什麼對來者說就應該在網頁上說完,不對嗎?

應用於: window 對象

關於對象化編程的語句

現在我們有實力學習以下關於對象化編程,但其實屬於上一章的內容了。

with 語句 爲一個或一組語句指定默認對象。

用法:with (<對象>) <語句>;

with 語句通常用來縮短特定情形下必須寫的代碼量。在下面的例子中,請注意 Math 的重複使用:

x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);

當使用 with 語句時,代碼變得更短且更易讀:

with (Math) {
x = cos(3 * PI) + sin(LN10);
y = tan(14 * E);
}

this 對象 回“當前”對象。在不同的地方,this 代表不同的對象。如果在 JavaScript 的“主程序”中(不在任何 function 中,不在任何事件處理程序中)使用 this,它就代表 window 對象;如果在 with 語句塊中使用 this,它就代表 with 所指定的對象;如果在事件處理程序中使用 this,它就代表發生事件的對象。

一個常用的 this 用法:

<script>
...
function check(formObj) {
...
}
...
</script>

<body ...>
...
<form ...>
...
<input type="text" ... onchange="check( this .form)">
...
</form>
...
</body>

這個用法常用於立刻檢測表單輸入的有效性。

自定義構造函數 我們已經知道,Array(),Image()等構造函數能讓我們構造一個變量。其實我們自己也可以寫自己的構造函數。自定義構造函數也是用 function。在 function 裏邊用 this 來定義屬性。

function <構造函數名> [(<參數>)] {
...
this.<屬性名> = <初始值>;
...
}

然後,用 new 構造函數關鍵字來構造變量:

var <變量名> = new <構造函數名>[(<參數>)];

構造變量以後,<變量名>成爲一個對象,它有它自己的屬性——用 this 在 function 裏設定的屬性。

以下是一個從網上找到的蒐集瀏覽器詳細資料的自定義構造函數的例子:

function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion); //主版本號
this.minor = parseFloat(navigator.appVersion);//全版本號
this.ns = ((agent.indexOf('mozilla')!=-1) &&
((agent.indexOf('spoofer')==-1) && //是否 Netscape
(agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 3)); //是否 Netscape 2
this.ns3 = (this.ns && (this.major == 3)); //是否 Netscape 3
this.ns4b = (this.ns && (this.minor < 4.04)); //是否 Netscape 4 低版本
this.ns4 = (this.ns && (this.major >= 4)); //是否 Netscape 4 高版本
this.ie = (agent.indexOf("msie") != -1); //是否 IE
this.ie3 = (this.ie && (this.major == 2)); //是否 IE 3
this.ie4 = (this.ie && (this.major >= 4)); //是否 IE 4
this.op3 = (agent.indexOf("opera") != -1); //是否 Opera 3
this.win = (agent.indexOf("win")!=-1); //是否 Windows 版本
this.mac = (agent.indexOf("mac")!=-1); //是否 Macintosh 版本
this.unix = (agent.indexOf("x11")!=-1); //是否 Unix 版本
}

var is = new Is();

這個構造函數非常完整的蒐集了瀏覽器的信息。我們看到它爲對象定義了很多個屬性:major, minor, ns, ie, win, mac 等等。它們的意思見上面的註釋。把 is 變量定義爲 Is() 對象後,用 if (is.ns) 這種格式就可以很方便的知道瀏覽器的信息了。我們也可以從這個構造函數中看到,它也可以使用一般的 JavaScript 語句(上例中爲 var 語句)。

讓我們再來看一個使用參數的構造函數:

function myFriend(theName, gender, theAge, birthOn, theJob) {
this.name = theName;
this.isMale = (gender.toLowerCase == 'male');
this.age = theAge;
this.birthday = new Date(birthOn);
this.job = theJob
}

var Stephen = new myFriend('Stephen', 'Male', 18, 'Dec 22, 1982', 'Student');

從這個構造函數我們不但看到了參數的用法,還看到了不同的屬性用不同的數據型是可以的(上例五個屬性分別爲:字符串,布爾值,數字,日期,字符串),還看到了構造函數裏也可以用構造函數來“構造”屬性。如果用了足夠的“保護措施”來避免無限循環,更可以用構造函數自身來構造自己的屬性

使用框架和Cookies

使用框架

在講述 window 對象的時候,我們提到過,一個框架內的網頁也是 window 對象,也就是說,Frame 對象也是 window 對象。用最容易理解的話說,每一個 HTML 文件佔用一個 window 對象,包括定義框架的網頁(“框架網頁”)。在 IE 裏用“<iframe>”標記在文檔中插入的框架也是 window 對象,但是用“包含網頁”的方法(在 HTML 中顯示爲“<!--webbot bot="include" ...-->”)讀取的 HTML 就不佔用獨自的 window 對象。每一個框架都是包含它的頁的 window 對象的一個子對象(不知道應該叫“屬性”不該),要引用它,可以用以下幾種方法之一:

window.frames[x]
window.frames['frameName']
window.frameName

其中,x 指的是該 window 對象中指定的第幾個框架,與其它數組一樣,x 也是從零開始的。frameName 指的是該框架的名字,跟<frame>裏的“name”屬性一樣。

如果使用 window.frameName 指定的 window 對象又是一個框架網頁,那麼引用它的框架的方法:window.frameName.subFrameName。以此類推。

要注意的時,無論在何處,引用“window”對象所返回的,都是“當前”window 對象。如果要訪問其它 window 對象,就要用到 parent 和 top 屬性。parent 指的是“父級”window 對象,也就是包含當前 window 對象的框架網頁;top 指的是窗口最頂端的 window 對象。

使用框架還要密切留意你的 JavaScript 中定義的全局變量和自定義函數。它們都有它們的所屬——所在的 window 對象。要引用其它框架中的全局變量或自定義函數,都要用“窗口對象.框架對象[.框架對象…].全局變量或自定義函數”這種很煩的方法。

以上這個問題在建立連接時經常會被忽略:如果在<head>中定義了一個默認目標窗口(<base target="...">),在<a href="javascript:...">中,要知道輸入的 JavaScript 語句是在默認目標窗口中運行的,必要時加一些“parent”“top”屬性。

使用 Cookies

我們已經知道,在 document 對象中有一個 cookie 屬性。但是 Cookie 又是什麼?“某些 Web 站點在您的硬盤上用很小的文本文件存儲了一些信息,這些文件就稱爲 Cookie。”—— MSIE 幫助。一般來說,Cookies 是 CGI 或類似,比 HTML 高級的文件、程序等創建的,但是 JavaScript 也提供了對 Cookies 的很全面的訪問權利。

在繼續之前,我們先要學一學 Cookie 的基本知識

每個 Cookie 都是這樣的:<cookie名>=<值>

<cookie名>的限制與 JavaScript 的命名限制大同小異,少了“不能用 JavaScript 關鍵字”,多了“只能用可以用在 URL 編碼中的字符”。後者比較難懂,但是隻要你只用字母和數字命名,就完全沒有問題了。<值>的要求也是“只能用可以用在 URL 編碼中的字符”。

每個 Cookie 都有失效日期,一旦電腦的時鐘過了失效日期,這個 Cookie 就會被刪掉。我們不能直接刪掉一個 Cookie,但是可以用設定失效日期早於現在時刻的方法來間接刪掉它

每個網頁,或者說每個站點,都有它自己的 Cookies,這些 Cookies 只能由這個站點下的網頁來訪問,來自其他站點或同一站點下未經授權的區域的網頁,是不能訪問的。每一“組”Cookies 有規定的總大小(大約 2KB 每“組”),一超過最大總大小,則最早失效的 Cookie 先被刪除,來讓新的 Cookie“安家”。

現在我們來學習 使用 document.cookie 屬性

如果直接使用 document.cookie 屬性,或者說,用某種方法,例如給變量賦值,來獲得 document.cookie 的值,我們就可以知道在現在的文檔中有多少個 Cookies,每個 Cookies 的名字,和它的值。例如,在某文檔中添加“document.write(document.cookie)”,結果顯示:

name=kevin; [email protected]; lastvisited=index.html

這意味着,文檔包含 3 個 Cookies:name, email 和 lastvisited,它們的值分別是 kevin, [email protected] 和 index.html。可以看到,兩個 Cookies 之間是用分號和空格隔開的,於是我們可以用 cookieString.split('; ') 方法得到每個 Cookie 分開的一個數組(先用 var cookieString = document.cookie)。

設定一個 Cookie 的方法是對 document.cookie 賦值。與其它情況下的賦值不同,向 document.cookie 賦值不會刪除掉原有的 Cookies,而只會增添 Cookies 或更改原有 Cookie。賦值的格式:

document.cookie = ' cookieName =' + escape ('cookieValue ')
+ ' ; expires=' + expirationDateObj . toGMTString() ;

是不是看到頭暈了呢?以上不是粗體字的地方是要照抄不誤的,粗體字是要按實際情況做出改動的。cookieName 表示 Cookie 的名稱,cookieValue 表示 Cookie 的值,expirationDateObj 表示儲存着失效日期的日期對象名,如果不需要指定失效日期,則不需要第二行。不指定失效日期,則瀏覽器默認是在關閉瀏覽器(也就是關閉所有窗口)之後過期。

看到了上面的一些下劃線了麼?這些是應該注意的地方。

首先 escape() 方法:爲什麼一定要用?因爲 Cookie 的值的要求是“只能用可以用在 URL 編碼中的字符”。我們知道“escape()”方法是把字符串按 URL 編碼方法來編碼的,那我們只需要用一個“escape()”方法來處理輸出到 Cookie 的值,用“unescape()”來處理從 Cookie 接收過來的值就萬無一失了。而且這兩個方法的最常用途就是處理 Cookies。其實設定一個 Cookie 只是“document.cookie = 'cookieName=cookieValue'”這麼簡單,但是爲了避免在 cookieValue 中出現 URL 裏不準出現的字符,還是用一個 escape() 好。

然後“expires”前面的分號:注意到就行了。是分號而不是其他。

最後 toGMTString() 方法:設定 Cookie 的時效日期都是用 GMT 格式的時間的,其它格式的時間是沒有作用的。

現在我們來實戰一下。設定一個“name=rose”的 Cookie,在 3 個月後過期。

var expires = new Date();
expires.setTime(expires.getTime() + 3 * 30 * 24 * 60 * 60 * 1000);
/* 三個月 x 一個月當作 30 天 x 一天 24 小時
x 一小時 60 分 x 一分 60 秒 x 一秒 1000 毫秒 */
document.cookie = 'name=rose;expires=' + expires.toGMTString();

爲什麼沒有用 escape() 方法?這是因爲我們知道 rose 是一個合法的 URL 編碼字符串,也就是說,'rose' == escape('rose')。一般來說,如果設定 Cookie 時不用 escape(),那獲取 Cookie 時也不用 unescape()。

再來一次:編寫一個函數,作用是查找指定 Cookie 的值。

function getCookie(cookieName) {
var cookieString = document.cookie;
var start = cookieString.indexOf(cookieName + '=');
// 加上等號的原因是避免在某些 Cookie 的值裏有
// 與 cookieName 一樣的字符串。
if (start == -1) // 找不到
return null;
start += cookieName.length + 1;
var end = cookieString.indexOf(';', start);
if (end == -1) return unescape(cookieString.substring(start));
return unescape(cookieString.substring(start, end));
}

這個函數用到了字符串對象的一些方法,如果你不記得了(你是不是這般沒記性啊),請快去查查。這個函數所有的 if 語句都沒有帶上 else,這是因爲如果條件成立,程序運行的都是 return 語句,在函數裏碰上 return,就會終止運行,所以不加 else 也沒問題。該函數在找到 Cookie 時,就會返回 Cookie 的值,否則返回“null”。

現在我們要刪除剛纔設定的 name=rose Cookie。

var expires = new Date();
expires.setTime(expires.getTime() - 1);
document.cookie = 'name=rose;expires=' + expires.toGMTString();

可以看到,只需要把失效日期改成比現在日期早一點(這裏是早 1 毫秒),再用同樣的方法設定 Cookie,就可以刪掉 Cookie 了。


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