javascript入門經典【推薦】—新手必備、零基礎學習
阿新 • • 發佈：2018-12-31
本書目錄
第一章： JavaScript語言基礎
第二章： JavaScript內建物件第三章： 視窗window物件
第四章： 文件document物件
第五章： 表單form物件
第六章： History與Navigator物件
第七章： JavaScript框架程式設計
第八章： JavaScript異常處理
第九章： 自定義JavaScript物件
第一章 JavaScript語言基礎
第二章 JavaScript內建物件什麼是JavaScript JavaScript是一種基於物件(Object)和事件驅動(Event Driven)並具有安全效能的指令碼語 言。 JavaScript的出現彌補了HTML語言的不足，它是Java與HTML折中的選擇，具有以下幾個基 本特點。 1、指令碼編寫 JavaScript是一種指令碼語言，它採用小程式段的方式實現程式設計。它作為一種解釋性語言，不需要 進行編譯，而是在程式執行過程中逐行地被解釋。 2、基於物件 JavaScript是一種基於物件的語言，這意味著它能運用自己已經建立的物件。因此，許多功能可 能來自於JavaScript執行環境（即瀏覽器本身）中物件的方法與JavaScript的物件相互作用。 3、簡單性 JavaScript的簡單性首先主要體現在它基於Java的基本語句和控制流，是一種簡單而緊湊的 語言，對於學習Java是一種非常好的過度；其次，它的變數型別是採用“弱型別”，並未使用嚴格 的資料型別。 4、安全性 JavaScript是一種安全性語言，它不允許訪問本地的硬碟，而且不能將資料存入到伺服器上； 不允許對網路文件進行修改和刪除，只能通過瀏覽器實現資訊瀏覽或動態互動，從而有效地防止資料 的丟失。 5、動態性 JavaScript是動態的，它可以直接對使用者或客戶輸入做出響應而無需經過Web服務程式。它對 使用者的響應是採用以事件驅動的方式進行的。所謂事件驅動，就是指在頁面中執行某種操作所產生的動 作，比如按下滑鼠、移動視窗或選擇選單等都可以視為事件，當事件發生後就會引起相應的事件響應。 6、跨平臺性 JavaScript僅依賴於瀏覽器本身，與作業系統無關，只要是能執行瀏覽器的計算機，並支援 JavaScript的瀏覽器就可以正確執行。從而實現“編寫一下，走遍天下” 的夢想。 Java和Javascript的區別 1、基於物件和麵向物件 Java是一種真正的面向物件的語言，即使是開發簡單的程式，必須設計物件。 JavaScript是種指令碼語言，它可以用來製作與網路無關的，與使用者互動作用的複雜軟體。它是 一種基於物件（Object Based）和事件驅動（Event Driver）的程式語言。因而它本身提供了非 常豐富的內部物件供設計人員使用。 2、解釋和編譯 兩種語言在其瀏覽器中所執行的方式不一樣。Java的原始碼在傳遞到客戶端執行之前，必須經過 編譯，因而客戶端上必須具有相應平臺上的模擬器或直譯器，它可以通過編譯器或直譯器實現獨立 於某個特定的平臺編譯程式碼的束縛。 JavaScript是一種解釋性程式語言，其原始碼在發往客戶端執行之前不需經過編譯，而是將文 本格式的字元程式碼傳送給客戶編由瀏覽器解釋執行。 3、強變數和弱變數 兩種語言所採取的變數是不一樣的。 Java採用強型別變數檢查，即所有變數在編譯之前必須作宣告。 JavaScript中變數宣告，採用其弱型別。即變數在使用前不需作宣告，而是直譯器在執行時檢 查其資料型別， 4、程式碼格式不一樣 Java是一種與HTML無關的格式，必須通過像HTML中引用外媒體那麼進行裝載，其程式碼以位元組 程式碼的形式儲存在獨立的文件中。 JavaScript的程式碼是一種文字字元格式，可以直接嵌入HTML文件中，並且可動態裝載。編寫 HTML文件就像編輯文字檔案一樣方便。 5、嵌入方式不一樣 在HTML文件中，兩種程式語言的標識不同，JavaScript使用<Script>...</Script>來標 識，而Java使用<applet>...</applet>來標識，或採用java指令碼語言。 6、靜態聯編和動態聯編 Java採用靜態聯編，即Java的物件引用必須在編譯時的進行，以使編譯器能夠實現強型別檢查。 JavaScript採用動態聯編，即JavaScript的物件引用在執行時進行檢查，如不經編譯則就 無法實現物件引用的檢查。 第一節 語言基礎 編寫JavaScript程式 1、JavaScript直接嵌入HTML檔案中 寫在head或body標記對之間，要加標記如下： <script language="javascript"> document.write("<font color=blue>Hello World!</font>"); </script> 2、JavaScript程式存放在單獨的.js檔案中，再在HTML檔案中連結 <head> <script language="javascript" SRC="xxx.js"></script> </head> <body> <form> <input type=button onclick=show()> </form> </body> 在.js檔案中直接書寫javascript程式碼即可。 function show(){ document.write("hello world!"); } 基本資料型別 在JavaScript中有四種基本的資料型別： 數值型（整數和實數） 字串型（用""號或''號括起來的字元或數值） 布林型（使用true或false表示） 空值（null） 變數 在程式執行過程中值可變的量，是系統記憶體中的一個命名的儲存單元。 變數的命名： 變數名以字母開頭，中間可以出現數字，下劃線。變數名不能有空格、+或其他符號 不能使用JavaScript的關鍵字作為變數。如：var、int、double、delete 變數名第一個單詞全部小寫，第二個單詞開始每個單詞的首字母大寫，其餘字母小寫。 宣告（定義）變數： var x, myString; var y=100, st="hello"; cost=23.6; JavaScript中的保留字（關鍵字）： abstract boolean break byte case catch char class const continue default do double else extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try var void while with 變數的作用域 在JavaScript中有全域性變數和區域性變數之分。全域性變數時定義在所有函式體之外，其作用範圍 是所有函式；而區域性變數時定義在函式體之內，只對該函式是可見的。 <script language="javascript"> var quanju=100; function get(){ var i=10; if(true){ var j=1; } } </script> 常量 在程式執行過程中其值不可改變的量。 1、整型常量 如：123 ，512 2、實型常量 實型常量是由整數部分加小數部分表示，如3.14，12.43等，也可以使用科學或標準方法表示， 如5E7，4e5等。 3、布林值 布林常量只有兩種取值true 或false。主要用來說明或代表一種狀態或標誌，用以控制操作流 程 4、字元型常量 字元型常量是指使用單引號（'）括起來的字元或雙引號（"）括起來的字串。例如，字元'a'， 字串 "hello"。 JavaScript也支援以反斜槓（\）開頭的不可顯示的特殊字元，通常稱為控制字元。例如換行符 （'\r'）、製表符（'\t'）等 5、空值 JavaScript中有一個空值null，表示什麼也沒有。如試圖引用沒有定義的變數，就會返回一個 null值。 運算子 運算子是完成某種操作的符號。 算術運算子：+, -, *, /, %, ++, -- 比較運算子：= =, >, >=, <, <=, != 邏輯運算子：&&, ||, ! 賦值運算子：=, +=, -=, *=, /=, 表示式 x=100; str="你好"; t=null; 表示式通常是由變數、常量和函式通過運算子構成的有意義的算式。 如：a, a*2/3, (x+y)*10+(z-3)*20, x==y 第二節 控制結構 1、if 語句 if (表示式){ 語句塊; } x=80; if (x>=60){ document.write( "恭喜你，及格了！"); } if (表示式){ 語句塊1 ; }else{ 語句塊2 ; } if (x>=0){ y=x; }else{ y=-x; } 2、switch語句 switch(表示式) { case 值1：語句1; break; case 值2：語句2; break; case 值3：語句3; break; default: 語句4; } <script language="javascript"> function getWeek(week){ switch(week){ case 0: st="星期日"; break; case 1: st="星期一"; break; case 2: st="星期二"; break; case 3: st="星期三"; break; case 4: st="星期四"; break; case 5: st="星期五"; break; case 6: st="星期六"; break; default: st="錯誤"; } return st; } </script> 3、for 語句 for (初值表示式; 條件表示式; 更新語句) { //迴圈體語句 } 4、While語句 while(條件表示式) { //迴圈體語句 } break語句：結束當前的迴圈或switch語句。 continue語句：用於for或while語句中，結束本次迴圈，繼續下一次迴圈。 第三節 函式 函式是一個設定名字的一系列JavaScript語句的有效組合。 函式可以帶引數，也可以不帶，可以有返回值，也可以沒有 1、函式的定義 function 函式名([引數列表]) { 語句塊; [return 表示式;] } <script language="javascript"> //例：返回兩個引數中較大的。 function max(a,b){ var x; if (a>b) x=a; else x=b; return x; } </script> 2、呼叫函式 函式被呼叫時函式內的程式碼才真正被執行。 呼叫函式的方法就是使用函式的名稱並賦給全部引數相應的值。 <script language="javascript"> max(20,30); </script> 或 <input type="button" onClick="max(23,45);"> 在JavaScript中呼叫函式時，可以向函式傳遞比在函式定義時引數數目要少的引數。在這種情 況下，只要不是試圖去讀那些沒有傳遞過來的引數就行。 用typeof運算子可以得到引數的型別。對於未傳遞的引數，用typeof運算子得到的結果是 “undefined”。示例如下： <script language="javascript"> function get(a,b){ document.write("引數a的資料型別是："+typeof(a)+"<br>"); document.write("引數b的資料型別是："+typeof(b)); } get(32.4); </script> 另外，JavaScript也可以向函式傳遞比在函式定義時引數數目要多的引數，為了讀取這樣的參 數，可以使用arguments陣列。傳遞給函式的第一個引數是arguments陣列的第一個元素，我們可 以用“函式名稱.arguments[0]”來進行引用。示例如下： <script language="javascript"> function getSum(){ var sum=0; var number=getSum.arguments.length;//使用函式的引數陣列 for(var i=0;i<number;i++){ sum+=getSum.arguments[i]; } return sum; } document.write("23+54+65="+getSum(23,54,65)); </script> 第四節 JavaScript系統函式 JavaScript中的系統函式又稱為內部方法，它們不屬於任何物件，可以直接使用。它們可以完成許 多很常用的功能。 1、 eval( 字串表示式) 返回字串表示式中的運算結果值。 例：test=eval("x=8+9+5/2"); document.write(test); //輸出顯示19.5 2、 escape(字串) 返回字串的一種簡單編碼，將非字母數字的符號轉換為%加其unicode碼的十六進位制表示。 例如: escape("Hello there") 返回 "Hello%20there" 3、unescape(字串) 將已編碼的字串還原為純字串。 4、parseFloat(字串) 返回浮點數 5、parseInt(字串,radix) 其中radix是數的進位制，預設是十進位制數 parseInt(字串) 第五節 事件驅動及事件處理 在JavaScript中編寫的函式，通常是在其他程式碼進行呼叫時才會執行。不過我們也可以將某個 函式與某個事件（Event，通常是滑鼠或熱鍵的動作）聯絡起來，使得當事件發生時執行該函式。這個 方法稱之為事件驅動（Event Driver）。而對事件進行處理的函式，稱之為事件處理程式（Event Handler事件控制代碼）。 1、事件 JavaScript事件驅動中的事件是通過滑鼠或熱鍵的動作（點選或按下）引發的。下表中列出了 常見的事件及其說明。 FF: Firefox, N: Netscape, IE: Internet Explorer 屬性說明FF N IE onabort 影象載入被中斷1 3 4 onblur 元素失去焦點1 2 3 onchange 使用者改變域的內容1 2 3 onclick 滑鼠點選某個物件1 2 3 ondblclick 滑鼠雙擊某個物件1 4 4 onerror 當載入文件或影象時發生某個錯誤1 3 4 onfocus 元素獲得焦點1 2 3 onkeydown 某個鍵盤的鍵被按下1 4 3 onkeypress 某個鍵盤的鍵被按下或按住1 4 3 onkeyup 某個鍵盤的鍵被鬆開1 4 3 onload 某個頁面或影象被完成載入1 2 3 onmousedown 某個滑鼠按鍵被按下1 4 4 onmousemove 滑鼠被移動1 6 3 onmouseout 滑鼠從某元素移開1 4 4 onmouseover 滑鼠被移到某元素之上1 2 3 onmouseup 某個滑鼠按鍵被鬆開1 4 4 onreset 重置按鈕被點選1 3 4 onresize 視窗或框架被調整尺寸1 4 4 onselect 文字被選定1 2 3 onsubmit 提交按鈕被點選1 2 3 onunload 使用者退出頁面1 2 3 2、事件與函式的關聯 要將一個函式與某個HTML元素的事件關聯起來，需要設定相應的HTML標記中的屬性值。例如， 對於一個button元素的click事件的處理函式為MyProc()，則可以用如下的形式將事件與函式關 聯起來： <script language="javascript"> function myPorc(){ alert(document.all("txt").value); } </script> <input type="text" name="txt" /> <input type="button" value="Try" onClick="myPorc( );"/> 另一個示例,實現翻轉圖的效果，原來在網頁上顯示一幅圖片，當用戶把滑鼠移到該影象上時，自 動將影象切換成新的一幅圖片；當用戶把滑鼠移開時，最初的影象又被恢復回來。 <script language="javascript"> //處理mouseover事件 function imgover(){ document.myForm.img1.src="color.jpg"; } //處理mouseout事件 function imgout(){ document.myForm.img1.src="gray.jpg"; } </script> <form name="myForm"> <img border=0 name="img1" src="gray.jpg" onmouseover="imgover();" onmouseout="imgout()"> </form> 課後練習題： 1、計算1加到100的和 2、使用while語句計算1加到100的和 3、列印100以內的偶數序列 ：02468。。。 4、迴圈1-100，單數次輸出“好好學習！”，偶數次輸出“天天向上！” 5、在死迴圈中用if和break實現連續列印20個*就結束迴圈。 6、程式設計查詢滿足下列條件的三個正整數：x+y+z=50並且x+2*y+5*z=100 7、編寫函式輸出下面的圖案 * ** *** **** 最多的星數目為函式引數n所決定。 8、將a,b,c三個整數按它們數值的大小，從小到大的順序列印顯示。 （練習if else語句） 9、編寫函式輸出下面的圖案 * ** *** **** *** ** * 行數為函式的引數n決定。 10、編寫函式尋找水仙花數。 （三位數各位數字的立方和恰巧是該數本身，100到999之間有四個這樣的數）。
第三章 視窗window物件物件概述 JavaScript是一種基於物件的指令碼語句，而不是面向物件的程式語言。 物件就是客觀世界存在的實體，具有屬性和方法兩方面特性。 訪問物件的屬性和方法的方式如下： 物件名.屬性 物件名.方法名() 第一節 陣列物件型別 Array 陣列可以存放很多相同型別的資料。有陣列名代表所有這些資料，而用 陣列名[下標]表示其中某個元素（下標從0開始）。 如：var myA=["張三","李四","王五"]; document.write(myA); //看到所有三個字串 myA[0]指向第一個元素 myA[2]指向第三個元素 １、建立陣列的三種方法： (1) 使用方括號，建立陣列的同時賦初值 var myA=["張三", "李四","王五"]; var b=[10,20,30,40]; (2) 使用new 操作符，建立陣列的同時賦初值 var myA=new Array("張三", "李四","王五"); 注意圓括號和方括號的區別，不能任意使用。 (3) 先建立長度為10的陣列，內容後面再賦值 var anArray = new Array(9); anArray[0]= "張三"; anArray[1]= "李四"; anArray[2]= "王五"; ２、陣列的屬性 length 陣列名.length 返回陣列中元素的個數 如：myA.length 為 3 例：使用for語句輸出myA陣列的各個元素。 for(i=0;i<myA.length;i++){ alert(myA[i]); } ３、陣列的方法 join(分割符) 該方法的功能是把陣列中所有資料用指定的分割符連線起來，以一個字串的形式表達出來。 例如： myA.join("/") 返回一個字串 "張三/李四/王五" reverse() 該方法的功能是將陣列中的元素整個反轉順序。 例如： myA.reverse( ) 陣列變為 ["王五","李四","張三"] sort() 該方法的功能是將陣列元素排序（漢字按拼音的字母順序）。 例如： myA.sort () 陣列變為 ["李四","王五","張三"] concat() 方法用於連線兩個或多個數組。 下面的例子將把 concat() 中的引數連線到陣列 a 中 <script type="text/javascript"> var a = [1,2,3]; document.write(a.concat(4,5)); //輸出結果是： //1,2,3,4,5 </script> 下面的例子建立了兩個陣列，然後使用 concat() 把它們連線起來 <script type="text/javascript"> var arr = ["George","John","Thomas"]; var arr2 = ["James","Adrew","Martin"]; document.write(arr.concat(arr2)); //輸出結果是： //George,John,Thomas,James,Adrew,Martin </script> 下面的例子建立了三個陣列，然後使用 concat() 把它們連線起來 <script type="text/javascript"> var arr = ["George","John","Thomas"]; var arr2 = ["James","Adrew","Martin"]; var arr3 = ["William","Franklin"]; document.write(arr.concat(arr2,arr3)); //輸出結果是： //George,John,Thomas,James,Adrew,Martin,William,Franklin </script> pop() 方法用於刪除並返回陣列的最後一個元素。 刪除陣列的最後一個元素，把陣列長度減 1，並且返回它刪除的元素的值。如果陣列已經為空， 則 pop() 不改變陣列，並返回 undefined 值。 <script type="text/javascript"> var arr = ["George","John","Thomas"]; document.write(arr); document.write("<br />"); document.write(arr.pop()); document.write("<br />"); document.write(arr); //輸出結果是： //George,John,Thomas //Thomas //George,John </script> push() 方法可向陣列的末尾新增一個或多個元素，並返回新的長度。 語法：arrayObject.push(newelement1,newelement2,....,newelementX) push() 方法可把它的引數順序新增到 arrayObject 的尾部。它直接修改 arrayObject，而 不是建立一個新的陣列。push() 方法和 pop() 方法使用陣列提供的先進後出棧的功能。 <script type="text/javascript"> var arr = ["George","John","Thomas"]; document.write(arr + "<br />"); document.write(arr.push("James") + "<br />"); document.write(arr); //輸出結果是： //George,John,Thomas //4 //George,John,Thomas,James </script> shift() 方法用於把陣列的第一個元素從其中刪除，並返回第一個元素的值。 如果陣列是空的，那麼 shift() 方法將不進行任何操作，返回 undefined 值。請注意，該方 法不建立新陣列，而是直接修改原有的 arrayObject。 <script type="text/javascript"> var arr = ["George","John","Thomas"]; document.write(arr + "<br />"); document.write(arr.shift() + "<br />"); document.write(arr); //輸出結果是： //George,John,Thomas //George //John,Thomas </script> unshift() 方法可向陣列的開頭新增一個或更多元素，並返回新的長度。 unshift() 方法將把它的引數插入 arrayObject 的頭部，並將已經存在的元素順次地移到 較高的下標處，以便留出空間。該方法的第一個引數將成為陣列的新元素 0，如果還有第二個引數， 它將成為新的元素 1，以此類推。 請注意，unshift() 方法不建立新的建立，而是直接修改原有的陣列。 <script type="text/javascript"> var arr = ["George","John","Thomas"]; document.write(arr + "<br />"); document.write(arr.unshift("William") + "<br />"); document.write(arr); //輸出結果是： //George,John,Thomas //4 //William,George,John,Thomas </script> slice(start,end) 從已有的陣列中返回選定的元素。 <script type="text/javascript"> var arr = ["George","John","Thomas"]; document.write(arr + "<br />"); document.write(arr.slice(1) + "<br />"); document.write(arr); //輸出結果是： //George,John,Thomas //John,Thomas //George,John,Thomas </script> <script type="text/javascript"> var arr =["George","John","Thomas","James","Adrew","Martin"]; document.write(arr + "<br />"); document.write(arr.slice(2,4) + "<br />"); document.write(arr); //輸出結果是： //George,John,Thomas,James,Adrew,Martin //Thomas,James //George,John,Thomas,James,Adrew,Martin </script> splice() 方法用於插入、刪除或替換陣列的元素。 語法：arrayObject.splice(index,howmany,element1,.....,elementX) splice() 方法可刪除從 index 處開始的零個或多個元素，並且用引數列表中宣告的一個或多 個值來替換那些被刪除的元素。 引數描述 index 必需。規定從何處新增/刪除元素。 該引數是開始插入和（或）刪除的陣列元素的下標，必須是數字。 howmany 必需。規定應該刪除多少元素。必須是數字，但可以是 "0"。 如果未規定此引數，則刪除從 index 開始到原陣列結尾的所有元素。 element1 可選。規定要新增到陣列的新元素。從 index 所指的下標處開始插入。 elementX 可選。可向陣列新增若干元素。 下面的例項中，建立一個新陣列，並向其新增一個元素： <script type="text/javascript"> var arr =["George","John","Thomas","James","Adrew","Martin"]; document.write(arr + "<br />"); arr.splice(2,0,"William"); document.write(arr + "<br />"); //輸出結果是： //George,John,Thomas,James,Adrew,Martin //George,John,William,Thomas,James,Adrew,Martin </script> 下面的例項中，將刪除位於 index 2 的元素，並新增一個新元素來替代被刪除的元素： <script type="text/javascript"> var arr =["George","John","Thomas","James","Adrew","Martin"]; document.write(arr + "<br />"); arr.splice(2,1,"William"); document.write(arr); //輸出結果是： //George,John,Thomas,James,Adrew,Martin //George,John,William,James,Adrew,Martin </script> 下面的例項中，將刪除從 index 2 ("Thomas") 開始的三個元素，並新增一個新元素 ("William") 來替代被刪除的元素： <script type="text/javascript"> var arr =["George","John","Thomas","James","Adrew","Martin"]; document.write(arr + "<br />"); arr.splice(2,3,"William"); document.write(arr); //輸出結果是： //George,John,Thomas,James,Adrew,Martin //George,John,William,Martin </script> 4、內部陣列 在網頁物件中，有很多本身就是陣列物件。例如：document物件的forms屬性就是一個數組對 象，其中每個元素對應網頁中的一個表單，示例如下： <form name="firstForm"></form> <form name="secondForm"></form> <form name="thirdForm"></form> <script language="javascript"> var fs=document.forms; for(i=0;i<fs.length;i++){ alert(fs[i].name); } </script> 表單中的一個選擇列表的options屬性也是一個數組物件，其中每個元素對應於列表中的一個 選擇專案 <form name="myForm"> <select multiple size="5" name="box" style="width:150" onClick="f(this);"> <option value="apple">蘋果</option> <option value="orange">橘子</option> <option value="banana">香蕉</option> </select> </form> <script language="javascript"> function f(o){ for(i=0;i<o.options.length;i++){ alert(o.options[i].value+","+o.options[i].text); } } </script> 第二節 字串物件型別 String myStr="我們來自五湖四海！"; 或 myStr= new String("我們來自五湖四海！"); １、字串的長度屬性 myStr.length 返回字串中字元的個數9，一個漢字算一個字元。 ２、字串的方法 分為兩大類，如下： (1) 格式設定方法： big(), bold(), fontcolor(顏色字串), fontsize(字型號), sub(), sup() (2) 通用字串操作。 str="Hello"; 方法描述示例及結果 anchor() 建立 HTML 錨。str.anchor("b"):<A NAME=”b”>Hello</A> big() 用大號字型顯示字串。str.big() : <BIG>Hello</BIG> blink() 顯示閃動字串。str.blink() : <BLINK>Hello</BLINK> bold() 使用粗體顯示字串。str.bold() : <B>Hello</B> charAt() 返回在指定位置的字元。"北京歡迎你".charAt(2)結果是"歡" "北京歡迎你".charAt(0)結果是"北" charCodeAt() 返回在指定的位置的字元的 Unicode 編碼。 "北京歡迎你".charCodeAt(2)結果是27426 concat() 連線字串。"北京".concat("歡迎你")結果是"北京歡迎你" fixed() 以打字機文字顯示字串。str.fixed() : <FIXED>Hello</FIXED> fontcolor() 使用指定的顏色來顯示字串。str. Fontcolor ("Red") : <FONT color="red">Hello</FONT> fontsize() 使用指定的尺寸來顯示字串。str. fontsize () : <FONT size="3">Hello</FONT> indexOf() 檢索字串。"北京歡迎你".indexOf("歡迎")結果是2 "北京歡迎你".indexOf("上海")結果是-1 "北京歡迎你，歡迎".indexOf("歡迎")結果是2 italics() 使用斜體顯示字串。str. italics () : <I>Hello</I> lastIndexOf() 從後向前搜尋字串。"北京歡迎你，歡迎".lastIndexOf("歡迎")結果是6 link() 將字串顯示為連結。str.link("http://www.javakc.com") : <a href="http://www.javakc.com"> Hello </a> match() 找到一個或多個正則表示式的匹配。 replace() 替換與正則表示式匹配的子串。 search() 檢索與正則表示式相匹配的值。 slice() 提取字串的片斷，並在新的字元 串中返回被提取的部分。 "北京歡迎你".slice(2,4) 結果是"歡迎" small() 使用小字號來顯示字串。str.small():<SMALL>Hello</SMALL> split() 把字串分割為字串陣列。"北京|歡迎你|歡迎".split("|")結果是 陣列{"北京","歡迎你","歡迎"} strike() 使用刪除線來顯示字串。str.strike():<strike>Hello </strike> sub() 把字串顯示為下標。 str.sub( ) : <sub> Hello </sub> substr() 從起始索引號提取字串中指定數 目的字元。 "北京歡迎你".substr(1,2) 結果是"京歡" substring() 提取字串中兩個指定的索引號之 間的字元。 "北京歡迎你".substring(2,4)結果是"歡迎" sup() 把字串顯示為上標。str.sup():<sub> Hello </sub>1 toLowerCase() 把字串轉換為小寫。 （不改變舊的字串） "Welcome to BeiJing".toLowerCase()結果 是 welcome to beijing toUpperCase() 把字串轉換為大寫。 （不改變舊的字串） "Welcome to BeiJing".toUpperCase()結果 是WELCOME TO BEIJING 第三節 數學類 Math 包含了常用的數學常量和函式。不需要建立該型別的物件，而可以直接使用Math.屬性名或 Math.方法名來使用這些常量和方法。 Math.E 返回2.718 Math.PI 返回3.14159 Math 物件方法 方法描述 abs(x) 返回數的絕對值。 acos(x) 返回數的反餘弦值。 asin(x) 返回數的反正弦值。 atan(x) 以介於 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。 atan2(y,x) 返回從 x 軸到點 (x,y) 的角度（介於 -PI/2 與 PI/2 弧度之間）。 ceil(x) 對數進行上舍入。 cos(x) 返回數的餘弦。 exp(x) 返回 e 的指數。 floor(x) 對數進行下舍入。 log(x) 返回數的自然對數（底為e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次冪。 random() 返回 0 ~ 1 之間的隨機數。 round(x) 把數四捨五入為最接近的整數。 sin(x) 返回數的正弦。 sqrt(x) 返回數的平方根。 tan(x) 返回角的正切。 toSource() 返回該物件的原始碼。 valueOf() 返回 Math 物件的原始值。 第四節 日期時間類 Date 該型別物件中存放年月日時分秒等資訊。 １、建立日期物件的幾種辦法： new Date() 不帶引數，則以系統時間為新建立日期物件的內容。 new Date(毫秒數) 以距1970年1月1日零時到期望時間的毫秒數為引數，建立日期物件 new Date(2005,6,3,21,0,22) 設定2005年7月3日，注意月從0開始的 new Date("July 3, 2005 21:00:22") 以指定的時間為新建立日期物件的內容 ２、日期物件的方法： getDate() 返回幾號 getDay() 返回星期幾 （0代表星期日，1到6代表星期一到星期六） getHours() 返回幾點 getMinutes() 返回分鐘數 getSeconds() 返回秒數 getTime() 返回距1970年1月1日零時到期望時間的毫秒數 getYear() 返回年份 setDate() 設定幾號 setDay() 設定星期幾 （0代表星期日，1到6代表星期一到星期六） setHours() 設定幾點 setMinutes() 設定分鐘數 setSeconds() 設定秒數 setTime() 以距1970年1月1日零時到期望時間的毫秒數為引數，設定時間 setYear() 設定年份 課後練習題： 1、倒序輸出一個字串的每個字元。 2、顯示姓“李”和姓“王”的同學名單。 3、顯示姓名中含“寧”的名單。 4、編寫隨機點名程式。 5、產生50個100以內的隨機數，找出其中最大值和最小值，並統計大於等於60的有多少個。 6、編寫倒計時程式（距明年春節的天數）。
第四章 文件document物件在JavaScript中可以使用window和self標誌符來引用當前的瀏覽器視窗。 每個開啟的視窗定義一個window物件，如果文件包含框架（frame 或 iframe 標籤），瀏覽 器會為 HTML 文件建立一個 window 物件，併為每個框架建立一個額外的 window 物件。 可以使用top識別符號引用最上層的視窗，或使用parent標誌符引用當前視窗的父視窗。 第一節 Window 物件屬性 屬性描述 closed 返回視窗是否已被關閉。 defaultStatus 設定或返回視窗狀態列中的預設文字。 document 對 Document 物件的只讀引用。請參閱 Document 物件。 history 對 History 物件的只讀引用。請引數 History 物件。 innerheight 返回視窗的文件顯示區的高度。 innerwidth 返回視窗的文件顯示區的寬度。 length 設定或返回視窗中的框架數量。 location 用於視窗或框架的 Location 物件。請參閱 Location 物件。 name 設定或返回視窗的名稱。 Navigator 對 Navigator 物件的只讀引用。請引數 Navigator 物件。 opener 返回對建立此視窗的視窗的引用。 outerheight 返回視窗的外部高度。 outerwidth 返回視窗的外部寬度。 pageXOffset 設定或返回當前頁面相對於視窗顯示區左上角的 X 位置。 pageYOffset 設定或返回當前頁面相對於視窗顯示區左上角的 Y 位置。 parent 返回父視窗。 Screen 對 Screen 物件的只讀引用。請引數 Screen 物件。 self 返回對當前視窗的引用。等價於 Window 屬性。 status 設定視窗狀態列的文字。 top 返回最頂層的先輩視窗。 window window 屬性等價於 self 屬性，它包含了對視窗自身的引用。 · screenLeft · screenTop · screenX · screenY 只讀整數。聲明瞭視窗的左上角在螢幕上的的 x 座標和 y 座標。IE、Safari 和 Opera 支援 screenLeft 和 screenTop，而 Firefox 和 Safari 支援 screenX 和 screenY。 第二節 Window 物件方法 方法描述 alert() 顯示帶有一段訊息和一個確認按鈕的警告框。 blur() 把鍵盤焦點從頂層視窗移開。 clearInterval() 取消由 setInterval() 設定的 timeout。 clearTimeout() 取消由 setTimeout() 方法設定的 timeout。 close() 關閉瀏覽器視窗。 confirm() 顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。 createPopup() 建立一個 pop-up 視窗。 focus() 把鍵盤焦點給予一個視窗。 moveBy() 可相對視窗的當前座標把它移動指定的畫素。 moveTo() 把視窗的左上角移動到一個指定的座標。 open() 開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。 print() 列印當前視窗的內容。 prompt() 顯示可提示使用者輸入的對話方塊。 resizeBy() 按照指定的畫素調整視窗的大小。 resizeTo() 把視窗的大小調整到指定的寬度和高度。 scrollBy() 按照指定的畫素值來滾動內容。 scrollTo() 把內容滾動到指定的座標。 setInterval() 按照指定的週期（以毫秒計）來呼叫函式或計算表示式。 setTimeout() 在指定的毫秒數後呼叫函式或計算表示式。 第三節 常用方法示例 （1）開啟和關閉視窗： open 開啟另外一個視窗來顯示新的頁面。 window.open(URL,視窗名稱,可選引數) close() 關閉用Open方法開啟的視窗 可選引數：“toolbar=yes, width=500,height=200” （2）對話方塊方法 alert (提示字串) 提示資訊，只有一個“確定”按鈕 confirm (提示字串) 選擇確定或取消，返回值：true, false <html> <head> <script type="text/javascript"> function disp_confirm(){ var r=confirm("請點選一個按鈕"); if (r==true){ document.write("您點選了確認！"); }else{ document.write("您點選了取消！"); } } </script> </head> <body> <input type="button" onclick="disp_confirm()" value="顯示一個確認框" /> </body> </html> prompt(提示字串，初始值) 讓使用者在對話方塊中輸入 <html> <head> <script type="text/javascript"> function disp_prompt(){ var name=prompt("請輸入您的名字","Bill Gates"); if (name!=null && name!=""){ document.write("你好，" + name + "！今天過得好嗎？"); } } </script> </head> <body> <input type="button" onclick="disp_prompt()" value="顯示一個提示框" /> </body> </html> （3）移動視窗方法： （視窗左上角為座標0，0點） moveBy 視窗橫向縱向移動多少象素 moveBy(10,10) <html> <head> <script type="text/javascript"> function moveWin(){ myWindow.moveBy(50,50); myWindow.focus(); } </script> </head> <body> <script type="text/javascript"> myWindow=window.open('','','width=200,height=100'); myWindow.document.write("This is 'myWindow'"); </script> <input type="button" value="Move 'myWindow'" onclick="moveWin()" /> </body> </html> moveTo 視窗移動到引數指定的位置 moveTo(100,100) <html> <head> <script type="text/javascript"> function moveWin(){ myWindow.moveTo(0,0); myWindow.focus(); } </script> </head> <body> <script type="text/javascript"> myWindow=window.open('','','width=200,height=100'); myWindow.document.write("This is 'myWindow'"); </script> <input type="button" value="Move 'myWindow'" onclick="moveWin()" /> </body> </html> （4）定時方法： 設定定時器，按指定時間間隔，反覆執行某函式： setInterval 和 clearInterval (見跑馬燈程式) <html> <body> <input type="text" id="clock" size="35" /> <script language=javascript> var int=self.setInterval("clock()",50); function clock(){ var t=new Date(); document.getElementById("clock").value=t; } </script> <button onclick="int=window.clearInterval(int)"> Stop interval </button> </body> </html> 設定定時器，按指定時間間隔，執行一遍某函式： setTimeout 和 clearTimeout <html> <head> <script type="text/javascript"> function timedMsg(){ var t=setTimeout("alert('5 seconds!')",5000); } </script> </head> <body> <form> <input type="button" value="顯示計時的訊息框！" onClick = "timedMsg()"> </form> <p>點選上面的按鈕。5 秒後會顯示一個訊息框。</p> </body> </html> （5）聚焦方法 ： 讓視窗處於啟用狀態。 window.focus() <html> <body> <script type="text/javascript"> myWindow=window.open('','','width=200,height=100'); myWindow.document.write("This is 'myWindow'"); myWindow.focus(); </script> </body> </html>
DOM (文件物件模型)
window 整個瀏覽器視窗的統稱，是最上層的唯一物件。這一級可以省略，是系統預設值。
document 是Window的一個子物件，包含當前文件(HTML檔案)中所有的物件。
form 即表單，包含許多子物件。
window、document和history物件是系統定義好的，其它物件是由我們程式設計師自己定義的。
我們要為每個物件起一個名稱。
第一節 document物件概述
document物件最強大的一個特性在於它的組織性。如果給頁面中的元素起個名字，則可以把該元
素當成document 物件的一個屬性來處理。例如，如果在form 元素“form1”中有一個名叫
“ txtbox” 的文字框， 則可以像下面這樣去引用該文字框中的文字：
document.form1.txtbox.value。
除了將HTML元素按名字組織起來外，document物件還有許多屬性、方法、事件，這些特點可以
幫助我們擴充套件程式的功能。
Document 物件集合
集合描述
all[] 提供對文件中所有 HTML 元素的訪問。
anchors[] 返回對文件中所有 Anchor 物件的引用。
applets 返回對文件中所有 Applet 物件的引用。
forms[] 返回對文件中所有 Form 物件引用。
images[] 返回對文件中所有 Image 物件引用。
links[] 返回對文件中所有 Area 和 Link 物件引用。
Document 物件屬性
屬性描述
body
提供對 <body> 元素的直接訪問。
對於定義了框架集的文件，該屬性引用最外層的 <frameset>。
cookie 設定或返回與當前文件有關的所有 cookie。
domain 返回當前文件的域名。
lastModified 返回文件被最後修改的日期和時間。
referrer 返回載入當前文件的文件的 URL。
title 返回當前文件的標題。
URL 返回當前文件的 URL。
Document 物件方法
方法描述
close() 關閉用 document.open() 方法開啟的輸出流，並顯示選定的資料。
getElementById() 返回對擁有指定 id 的第一個物件的引用。
getElementsByName() 返回帶有指定名稱的物件集合。
getElementsByTagName() 返回帶有指定標籤名的物件集合。
open() 開啟一個流，以收集來自任何 document.write() 或
document.writeln() 方法的輸出。
write() 向文件寫 HTML 表示式 或 JavaScript 程式碼。
writeln() 等同於 write() 方法，不同的是在每個表示式之後寫一個換行符。
第二節 document物件的事件（body標記中）
onkeydown 按下任意鍵
onkeypress 將按下任意鍵
onkeyup 釋放鍵
onclick 單擊滑鼠
ondblclick 雙擊滑鼠
onmousedown 按下滑鼠
onmouseup 釋放滑鼠
load 文件裝載完畢
unload 文件解除安裝完畢
可以使用attachEvent方法，為body新增事件。
document.attachEvent ('onclick',getA);第一節 表單物件的使用
1、什麼是表單物件
表單（<form>）是Web頁面中的基本元素。表單物件最主要的功能就是能夠直接訪問頁面中的表
單。利用表單物件，可以實現與使用者的互動；不需要伺服器的介入，就可以實現動態改變Web頁面的
行為。
對於Web頁面表單，通常使用document物件的forms陣列可以很方便地訪問不同的表單。例如，
某HTML檔案片段如下：
<form name="form1">
<input type="text">
<input type="text">
<input type="text">
</form>
<form name="form2">
<input type="text">
<input type="text">
</form>
document物件的forms陣列有兩個元素：forms[0]可以訪問第一個表單，其中共有三個基本
元素：而forms[1]對應表單form2，其中只有兩個元素。
除了用forms陣列方式訪問表單物件外，也可以直接用表單的名字進行訪問。例如，對於上例，
也可以用document.form1和document.form2分別訪問兩個表單。
2、表單物件的方法
表單物件的submit（）方法用於實現表單資訊的提交。例如，要提交頁面中的一個名為form1
的表單，可以使用下列語句：
document.form1.submit();
3、表單物件的屬性
屬性描述
Name 表單的名稱
action 提交表單後執行的程式
target
指定資料顯示在哪個視窗(_blank,_parent,_self,_top)
或哪個框架(框架名稱)中
encoding 預設為text/html
method “Get”或“Post”
elements
陣列
只讀，表單中所有物件的索引,0,1,…
由document.表單名.elements.length可知該表單共有多少個物件
這裡elements屬性是一個數組，其中的元素對應於頁面上表單內的各個控制元件。除了elements
外，表單的其他幾個屬性均對應於HTML語法中<form>標記的屬性。
4、表單物件使用示例
下面示例如果使用表單物件，效果及程式碼如下：
<script type="text/javascript">
function display(){
var str;
// 使用表單名稱訪問表單物件的屬性
str="name="+document.form1.name+"\r";
str=str+"action="+document.form1.action+"\r";
str=str+"method="+document.form1.method+"\r";
//訪問表單物件的elements陣列
str=str+"elements:"+"\r";
for(var i=0;i<document.form1.elements.length;i++){
str=str+ " "+document.form1.elements[i].type
+"\t"+document.form1.elements[i].name
+"\t"+document.form1.elements[i].value+"\r";
}
window.alert(str);
return false;
}
function submitform(){
//使用表單陣列+下標訪問表單物件
document.forms[0].submit();
}
</script>
<form name="form1" action="/web/user" method="post" onsubmit="return
display()">
<input type="text" name="text1" value="AAA"/>
<input type="text" name="text2" value="BBB"/>
<input type="checkbox" name="check1" value="aaa"/>
<input type="submit" name="submit" value="提交"/>
<input type="button" name="button" onclick="submitform();" value="js提交"/>
</form>
注意：單擊“提交”按鈕會觸發表單的onsubmit事件。如果onsubmit的事件處理過程返回
false，則不進行表單資料的提交。但如果直接使用表單物件的submit（）方法，則直接將資料提交
出去。
第二節 表單中的基本元素
表單中的基本控制元件由按鈕、單選按鈕、複選按鈕、提交按鈕、重置按鈕和文字框等組成。在
JavaScript中要訪問這些控制元件，可以使用以下兩種方法實現：
表單.元素名稱 例如：document.form1.check
表單.elements[下標] 例如：document.form1.elements[2]
下面分別介紹表單中的各個基本控制元件。
1、text物件
text物件對應於頁面中的text輸入框控制元件。
<input type="text" name="控制元件名稱" value="預設文字" />
屬性accessKey 設定或返回訪問文字域的快捷鍵。
使用 Alt + accessKey 為擁有指定快捷鍵的元素賦予焦點
alt 設定或返回當瀏覽器不支援文字域時供顯示的替代文字。
defaultValue 設定或返回文字域的預設值。
disabled 設定或返回文字域是否應被禁用。
id 設定或返回文字域的 id。
maxLength 設定或返回文字域中的最大字元數。
name 設定或返回文字域的名稱。
readOnly 設定或返回文字域是否應是隻讀的。
size 設定或返回文字域的尺寸。
tabIndex 設定或返回文字域的 tab 鍵控制次序。
type 返回文字域的表單元素型別。
value 設定或返回文字域的 value 屬性的值。
方法blur( ) 將當前焦點移到後臺
select( ) 加亮文字，選取文字域中的內容。
focus() 在文字域上設定焦點。
主要事件onfocus，onblur，onselect，onchange
text物件使用示例如下：
<form name="form1">
<input type="text" name="text1" value="Welcome"/>
</form>
<script type="text/javascript">
document.form1.text1.value="this is a javascirpt";
document.form1.text1.select();
alert(document.form1.text1.value);
document.text1.blur();
</script>
2、textarea物件
textarea物件對應於頁面中的textarea輸入控制元件。
<textarea name="控制元件名稱">預設文字</textarea>
屬性name textarea輸入框控制元件名稱
value textarea輸入框控制元件中當前的文字
defaultvalue textarea輸入框控制元件的預設文字
方法blur( ) 將當前焦點移到後臺
select( ) 加亮文字
主要事件onfocus，onblur，onselect，onchange
3、select物件
select物件對應於網頁中的下拉列表框。
<select name="下拉列表框的名稱" size="下拉列表框顯示的條數">
<option value="選擇值">選項描述</option>
<option value="選擇值" selected>選項描述</option>
…………
</select>
屬性disabled 設定或返回是否應禁用下拉列表
id 設定或返回下拉列表的 id。
length 返回下拉列表中的選項數目。
multiple 設定或返回是否選擇多個專案。
name 設定或返回下拉列表的名稱。
options
陣列
返回包含下拉列表中的所有選項(option物件)的一個數組。
其中option物件包括如下屬性：
text 該選項顯示的文字
value 該選項的value值
selected 指明該選項是否別選中
selectedIndex 當前選中項的下標
size 設定或返回下拉列表中的可見行數。
方法options.add() 向下拉列表新增一個選項。
blur() 從下拉列表移開焦點。
focus() 在下拉列表上設定焦點。
remove() 從下拉列表中刪除一個選項。
主要事件onfocus，onblur，onchange
4、button物件
button物件對應於網頁中的按鈕控制元件。
<input type="button" value="按鈕上顯示的值" name="控制元件名稱">
屬性accessKey 設定或返回訪問按鈕的快捷鍵。
alt 設定或返回當瀏覽器無法顯示按鈕時供顯示的替代文字。
disabled 設定或返回是否禁用按鈕。
id 設定或返回按鈕的 id。
name 設定或返回按鈕的名稱。
tabIndex 設定或返回按鈕的 tab 鍵控制次序。
value 設定或返回在按鈕上顯示的文字。
方法blur() 把焦點從元素上移開。
click() 在該按鈕上模擬一次滑鼠單擊。
focus() 為該按鈕賦予焦點。
主要事件onclick
5、checkbox物件
checkbox物件對應於網頁中的複選框。
<input type="checkbox" value="值" name="控制元件名稱" checked>選項說明
屬性accessKey 設定或返回訪問 checkbox 的快捷鍵。
alt 設定或返回不支援 checkbox 時顯示的替代文字。
checked 設定或返回 checkbox 是否應被選中。
defaultChecked 返回 checked 屬性的預設值。
disabled 設定或返回 checkbox 是否應被禁用。
id 設定或返回 checkbox 的 id。
name 設定或返回 checkbox 的名稱。
tabIndex 設定或返回 checkbox 的 tab 鍵控制次序。
value 設定或返回 checkbox 的 value 屬性的值
方法blur() 從 checkbox 上移開焦點
click() 模擬在 checkbox 中的一次滑鼠點選。
focus() 為 checkbox 賦予焦點。
主要事件onclick
6、radio物件
radio物件對應於網頁中的單選控制元件。當網頁中具有多個相同名稱的單選控制元件後，就形成了一個
radio物件陣列，其中每個單選控制元件即為一個radio物件。
<input type="radio" value="選項值" name="單選項名稱" checked>選項說明
<input type="radio" value="選項值" name="單選項名稱" >選項說明
…………
屬性accessKey 設定或返回訪問單選按鈕的快捷鍵。
alt 設定或返回在不支援單選按鈕時顯示的替代文字。
checked 設定或返回單選按鈕的狀態。
defaultChecked 返回單選按鈕的預設狀態。
disabled 設定或返回是否禁用單選按鈕。
id 設定或返回單選按鈕的 id。
name 設定或返回單選按鈕的名稱。
tabIndex 設定或返回單選按鈕的 tab 鍵控制次序。
value 設定或返回單選按鈕的 value 屬性的值。
方法blur() 從單選按鈕移開焦點。
click() 在單選按鈕上模擬一次滑鼠點選。
focus() 為單選按鈕賦予焦點。
主要事件onclick
7、hidden物件
hidden物件對應於網頁中的隱藏域。
<input type="hidden" value="值" name="名稱" >
屬性alt 設定或返回當不支援隱藏輸入域時顯示的替代文字。
id 設定或返回隱藏域的 id。
name 設定或返回隱藏域的名稱。
value 設定或返回隱藏域的 value 屬性的值。
8、submit物件
submit物件對應於網頁中的submit按鈕。
<input type="submit" value="顯示文字" name="名稱" >
屬性accessKey 設定或返回訪問提交按鈕的快捷鍵。
alt 設定或返回當瀏覽器不支援提交按鈕時供顯示的替代文字。
disabled 設定或返回提交按鈕是否應被禁用。
id 設定或返回提交按鈕的 id。
name 設定或返回提交按鈕的名稱。
tabIndex 設定或返回提交按鈕的 tab 鍵控制次序。
value 設定或返回在提交按鈕上顯示的文字。
方法blur() 從提交按鈕上移開焦點。
click() 在提交按鈕上模擬一次滑鼠點選。
focus() 為提交按鈕賦予焦點。
主要事件onclick
9、password物件
password物件對應於網頁中的密碼輸入框。
<input type="password" value="值" name="名稱" >
屬性accessKey 設定或返回訪問密碼欄位的快捷鍵。
alt 設定或返回當不支援密碼欄位時顯示的替代文字。
defaultValue 設定或返回密碼欄位的預設值。
disabled 設定或返回是否應被禁用密碼欄位。
id 設定或返回密碼欄位的 id。
maxLength 設定或返回密碼欄位中字元的最大數目。
name 設定或返回密碼欄位的名稱。
readOnly 設定或返回密碼欄位是否應當是只讀的。
size 設定或返回密碼欄位的長度。
tabIndex 設定或返回密碼欄位的 tab 鍵控制次序。
value 設定或返回密碼欄位的 value 屬性的值。
方法blur() 從密碼欄位移開焦點。
click() 為密碼欄位賦予焦點。
focus() 選取密碼欄位中的文字。
主要事件onfocus，onblur，onselect，onchangeHistory物件
History 物件包含使用者（在瀏覽器視窗中）訪問過的 URL。
History 物件是 window 物件的一部分，可通過 window.history 屬性對其進行訪問。
History 物件屬性
屬性描述
length 返回瀏覽器歷史列表中的 URL 數量。
History 物件方法
方法描述
back() 載入 history 列表中的前一個 URL。
forward() 載入 history 列表中的下一個 URL。
go(number|URL) 載入 history 列表中的某個具體頁面。
-1表示前一個頁面
Navigator 物件
Navigator 物件包含有關瀏覽器的資訊。可以使用這些屬性進行平臺專用的配置。
Navigator 物件的例項是唯一的，可以用 Window 物件的 navigator 屬性來引用它。
Navigator 物件集合
集合描述
plugins[]
返回對文件中所有嵌入式物件的引用。
該集合是一個 Plugin 物件的陣列，其中的元素代表瀏覽器已經安裝的外掛。Plug-in
物件提供的是有關外掛的資訊，其中包括它所支援的 MIME 型別的列表。
雖然 plugins[] 陣列是由 IE 4 定義的，但是在 IE 4 中它卻總是空的，因為 IE
4 不支援外掛和 Plugin 物件。
Navigator 物件屬性
屬性描述
appCodeName 返回瀏覽器的程式碼名。
appMinorVersion 返回瀏覽器的次級版本。
appName 返回瀏覽器的名稱。
appVersion 返回瀏覽器的平臺和版本資訊。
browserLanguage 返回當前瀏覽器的語言。
cookieEnabled 返回指明瀏覽器中是否啟用 cookie 的布林值。
cpuClass 返回瀏覽器系統的 CPU 等級。
onLine 返回指明系統是否處於離線模式的布林值。
platform 返回執行瀏覽器的作業系統平臺。
systemLanguage 返回 OS 使用的預設語言。
userAgent 返回由客戶機發送伺服器的 user-agent 頭部的值。
userLanguage 返回 OS 的自然語言設定。
Navigator 物件方法
方法描述IE F O
javaEnabled() 規定瀏覽器是否啟用 Java。4 1 9
taintEnabled() 規定瀏覽器是否啟用資料汙點 (data tainting)。4 1 9一個HTML頁面可以有一個或多個子框架，這些子框架以<iframe>或<frame>來標記，用來顯
示一個獨立的HTML頁面。本節介紹框架的自我控制及框架之間的相互訪問，例如從一個框架中引用另
一個框架中的JavaScript變數，呼叫其他框架內的函式，控制另一個框架中表單的行為等。
第一節 框架的引用
在一個HTML 頁面中，所有的框架以集合的形式作為window 物件的屬性提供，例如
window.frames表示該頁面內所有框架的集合，這和表單物件、連結物件等類似。不同的是，這些集
合是document的屬性，因此，要引用一個子框架，可以使用如下語法：
window.frames["frameName"]
window.frames.frameName
window.frames[index]
其中，window字樣也可以用self代替或省略，假設frameName為頁面中第一個框架，則以下寫法
是等價的：
window.frames["frameName"]
self.frames["frameName"]
self.frames[0]
frames[0]
frameName
每個框架都對應一個HTML頁面，所以這個框架也是一個獨立的瀏覽器視窗，它具有視窗的所有
性質，對框架的引用也就是對window物件的引用。有了這個window物件，就可以很方便地對其中的
頁面進行操作，例如使用window.document物件向頁面寫入資料、使用window.location屬性來
改變框架內的頁面等。下面分別介紹不同層次框架間的相互引用。
1、父框架到子框架的引用
從父框架引用子框架的方法為：
window.frames["frameName"]
這樣就引用了頁面內名為frameName的子框架，如果要引用子框架內的子框架，事實上，引用
的框架就是window物件，實現方法如下：
window.frames["frameName"].frames["frameName2"]
這樣就很容易引用到了二級子框架，依次類推，可以實現多層框架的引用。
2、子框架到父框架的引用
每個window物件都有一個parent屬性，表示它的父框架。如果該框架已經是頂層框架，則
window.parent還表示該框架本身，例如，先建立一個TestA.html檔案，其程式碼如下：
<html>
<head><title>父頁面</title></head>
<body>
<form name="formA" id="formA">
<input type="text" name="username" id="username"/>
</form>
<iframe src="TestB.html" width="100%"></iframe>
</body>
</html>
在上面程式碼中，定義了一個iframe 框架並把TestB.html 檔案放在其中，如果需要在
TestB.html中對TestA.html中的username文字框賦值，就應該在TestB.html中實現如下程式碼：
<script type="text/javascript">
var parentWin=window.parent;
parentWin.formA.username.value="javakc";
</script>
3、兄弟框架間的引用
如果兩個框架為同一個框架的子框架，它們稱為兄弟框架，可以通過父框架來實現互相引用，例
如一個頁面包括2個子框架
<frameset rows="30%,70%">
<frame src="left.html" name="frame1"/>
<frame src="main.html" name="frame2"/>
</frameset>
在frame1中可以使用如下語句來引用frame2。
self.parent.frames["frame2"]
4、不同層次框架間的相互引用
框架的層次是針對頂層框架而言的。當層次不同時，只要知道自己所在的層次以及另一個框架所在
的層次和名字，利用框架引用的window物件性質，就可以很容易地實現互相訪問，例如：
self.parent.frames["childName"].frames["targetFrameName"]
5、對頂層框架的引用
和parent屬性類似，window物件還有一個top屬性，它表示對頂層框架的引用，可以用來一
個框架自身是否為頂層框架，例如：
top.window.formA.username.value="javakc";
也可以採用下面程式碼驗證本框架是否為頂層框架
if(self==top){
//too do
}
對於框架的引用就是對“window”物件的引用，利用window物件的location屬性，可以改變
框架的導航，例如
window.frames[0].location="index.html";
這就是將頁面中的第一個框架的頁面重定向到index.html，利用這個性質，甚至可以使用一條
連結來更多的框架，例如：
<frameset rows="30%,70%">
<frame src="left.html" name="frame1"/>
<frame src="main.html" name="frame2"/>
</frameset>
<a href="frame1.location='index.html';frame2.loaction='top.html'">link</a>
第二節 引用其他框架內的變數和函式
在一個框架中可以引用其他框架內的JavaScript變數和函式，例如：
<script type="text/javascript">
function hello (){
alert("hello javakc");
}
window.hello();
</script>
如果執行這段程式碼，將會彈出hello javakc的顯示對話方塊，這正是執行hello（）函式的結
果。事實上，一個頁面內定義的所有全域性變數和全域性函式都是作為window物件的成員。例如：
var a="javakc";
alert(window.a);
執行程式碼後就會彈出對話方塊顯示為javakc。同樣，在不同框架之間共享變數和函式，就是通過
window物件來呼叫的。
頁面結構如下：
<frameset rows="30%,70%">
<frame src="left.html" name="link"/>
<frame src="main.html" name="show"/>
</frameset>
在left.htm頁面中有如下JavaScript程式碼片段：
<script type="text/javascript">
var arrCars=new Array();
function addToCars(id){
arrCars.push(id);
}
</script>
在main.html頁面中有如下程式碼：
<a href="void(0)" onclick="self.parent.link.addToCars('id')">加入購物車</a>在程式碼的執行過程中一般會發生兩種錯誤：一是程式內部的邏輯或者語法錯誤；二是執行環境或
者使用者輸入中不可預知的資料造成的錯誤。JavaScript可以捕獲異常並進行相應的處理，從而避免
了瀏覽器向用戶報錯。
1、利用try-catch-finally處理異常
使用者可以使用該結構處理可能發生異常的程式碼，如果發生異常，則由catch捕獲異常並進行相應
的處理，其語法如下：
try{
//要執行的程式碼
}catch(e){
//處理異常的程式碼
}finally{
//無論異常發生與否，都會執行的程式碼
}
這與java或者C#異常處理的語言室一致的。通過異常處理，可以避免程式停止執行，從而具有
了一定的自我修復能力。在Ajax開發中，利用異常處理的一個典型應用就是建立XMLHttpRequest
物件，不同瀏覽器建立它的方式也是不一樣的，為了使程式碼能夠跨瀏覽器執行，就可以利用異常。一種
方法不行，再可以用另一種方法，知道不發生異常為止，例如：
<script type="text/javascript">
var xmlhttp;
try{
//嘗試用IE的方式建立XMLHttpRequest物件
xmlhttp=new ActionXObject("Microsoft.XMLHTTP");
}catch(e){
try{
//嘗試用非IE的方式建立XMLHttpRequest物件
xmlhttp=new XMLHttpRequest();
}catch(e){
}
}
</script>
利用這種方式，就可以跨瀏覽器建立XMLHttpRequest物件。
2、利用throw處理異常
在JavaScript中有其內部的異常機制，在遇到非法操作的時候能自動丟擲異常，但在實際的開
發中，隨著程式的複雜，需要自己實現異常，可以通過throw語句來實現：“throw value”；
其中vlaue 就是要丟擲的異常變數，它可以是JavaScript 中的任何一種型別，但在
JavaScript 內部的異常中， 異常引數e 是一個名為error 的物件， 可以通過new
Error（message）來建立這個物件，異常的描述被作為error物件的一個屬性message，可以由
建構函式傳入，也可以之後賦值。通過這個異常描述，可以讓程式獲取異常的詳細資訊，從而自動處理，
例如，下面的程式用於計算兩個資料的積，如果引數不是數字，則丟擲異常：
<script type="text/javascript">
//函式預設要求引數是數字
function sum(a,b){
a=parseInt(a);
b=parseInt(b);
//如果a或b不能轉換為數字則丟擲一個異常物件
if(isNaN(a) || isNaN(b)){
throw new Error("引數不是數字");
}
return a*b;
}
try{
//錯誤的呼叫
var s=sum(1,"a");
}catch(e){
//顯示異常的詳細資訊
alert(e.message);
}
</script>
程式中使用字母作為引數傳遞給sum函式是錯誤的，所以函式內跑粗了一個異常物件，這個物件
被catch語句獲取，並使用alert語句顯示了其詳細資訊，第一節 JavaScript類的定義
一個類是對具有相似性質的一類事物的抽象，通過例項化一個類，可以獲得屬於該類的一個例項
（即物件）。
JavaScript中定義一個類的方法如下：
<script language="javascript">
function HelloClass{
alert("類的定義");
//在這裡可定義類成員的定義及建構函式
HelloClass(v){
alert("構造");
}
}
new HelloClass();
</script>
上面定義的HelloClass既是一個類成員的定義也是一個類。如果看作是函式，可以把它理解為
類的構造方法，負責初始化的工作。可以應用new操作符來建立一個物件，例如：
new Date();
var obj=new HelloClass();
上面第一句程式碼表示建立一個日期物件，而Date 就是表示日期的類，但是這個類是由
JavaScript內部提供的，而不是使用者定義的。第二句是用new操作符建立使用者定義的物件。
在javaScript中，每個物件都可以看作是多個屬性（方法）的集合，引用一個屬性（方法）的
格式如下：
物件名.屬性（方法）名
除此之外，還可以用方括號的形式來引用(注意方括號中的雙引號，不可省略):
物件名["屬性（方法）名"]
這裡所指的方法名和屬性名是一個字串，例如：
var arrs=new Array();
arrs["push"]("javakc"); //新增一個元素(呼叫物件的方法)
var len=arrs["length"]; //獲得陣列的長度(呼叫物件的屬性)
alert(len);
上面編寫的程式碼等價於如下程式碼：
var arrs=new Array();
arrs.push("javakc"); //新增一個元素(呼叫物件的方法)
var len=arrs.length; //獲得陣列的長度(呼叫物件的屬性)
alert(len);
上面這種引用屬性（方法）的方式，反應出一個JavaScript物件就是一組屬性（方法）的集合
這個性質。
利用方括號的形式來引用，這種用法適用於不確定具體要呼叫哪一個屬性（方法）的應用，例如
有一個使用者資料的物件，通過一個字串來表示要使用的屬性，就可以用這種方式來引用，其程式碼如
下：
<script language="javascript">
//定義一個User類,包括三個屬性name,age和sex,並指定了初始值。
function User(){
this.name="Tom";
this.age=18;
this.sex="男";
}
//建立User物件
var user=new User();
//根據下拉列表框顯示使用者的資訊
function show(slt){
if(slt.selectedIndex!=0){
alert(user[slt.value]);
}
}
</script>
<!--選擇使用者資訊 -->
<select onchange="show(this)">
<option value="name">姓名</option>
<option value="age">年齡</option>
<option value="sex">性別</option>
</select>
在上面的程式碼中，使用一個下拉列表框讓使用者選擇User類的屬性，每個選項的value就表示用
戶物件的屬性名稱。
第二節 prototype物件
prototype物件是實現面向物件的一個重要機制。每個函式也是一個物件，它們對應的類就是
function，每個函式物件都具有一個子物件prototype。Prototype 表示了該函式的原型，
prototype表示了一個類的屬性的集合。當通過new來生成一個類的物件時，prototype物件的屬
性就會成為例項化物件的屬性。
下面以一個例子來介紹prototype的應用，程式碼如下：
<script la