JavaScript 快速指南

什麼是 JavaScript？

JavaScript 是一種動態的計算機程式語言。它輕量級且最常用於網頁的一部分，其實現允許客戶端指令碼與使用者互動並建立動態頁面。它是一種具有面向物件功能的解釋型程式語言。

JavaScript 最初被稱為LiveScript，但 Netscape 將其名稱更改為 JavaScript，可能是因為 Java 產生的興奮。JavaScript 於 1995 年在 Netscape 2.0 中首次以LiveScript 的名稱出現。該語言的通用核心已嵌入 Netscape、Internet Explorer 和其他 Web 瀏覽器中。

ECMA-262 規範定義了核心 JavaScript 語言的標準版本。

JavaScript 是一種輕量級、解釋型的程式語言。
旨在建立網路中心應用程式。
與 Java 相輔相成並整合。
與 HTML 相輔相成並整合。
開放且跨平臺

客戶端 JavaScript

客戶端 JavaScript 是該語言最常見的形式。指令碼應包含在 HTML 文件中或由 HTML 文件引用，以便瀏覽器解釋程式碼。

這意味著網頁不必是靜態 HTML，而是可以包含與使用者互動、控制瀏覽器以及動態建立 HTML 內容的程式。

JavaScript 客戶端機制相較於傳統的 CGI 伺服器端指令碼提供了許多優勢。例如，您可以使用 JavaScript 檢查使用者是否在表單欄位中輸入了有效的電子郵件地址。

當用戶提交表單時，將執行 JavaScript 程式碼，並且只有在所有條目均有效時，才會將其提交到 Web 伺服器。

JavaScript 可用於捕獲使用者發起的事件，例如按鈕點選、連結導航以及使用者顯式或隱式發起的其他操作。

JavaScript 的優點

使用 JavaScript 的優點如下：

減少伺服器互動 - 您可以先驗證使用者輸入，然後再將頁面傳送到伺服器。這節省了伺服器流量，這意味著伺服器負載更小。
立即向訪問者提供反饋 - 他們不必等待頁面重新載入才能檢視他們是否忘記輸入內容。
增強的互動性 - 您可以建立在使用者將滑鼠懸停在其上或透過鍵盤啟用時做出反應的介面。
更豐富的介面 - 您可以使用 JavaScript 包含諸如拖放元件和滑塊之類的專案，為您的網站訪問者提供豐富的介面。

JavaScript 的侷限性

我們不能將 JavaScript 視為一門完整的程式語言。它缺少以下重要功能：

客戶端 JavaScript 不允許讀取或寫入檔案。出於安全原因，此功能被保留。
JavaScript 不能用於網路應用程式，因為沒有可用的此類支援。
JavaScript 沒有任何多執行緒或多處理器功能。

再次強調，JavaScript 是一種輕量級、解釋型的程式語言，允許您在原本靜態的 HTML 頁面中構建互動性。

JavaScript 開發工具

JavaScript 的主要優勢之一是它不需要昂貴的開發工具。您可以從簡單的文字編輯器（如記事本）開始。由於它是在 Web 瀏覽器的上下文中解釋的語言，因此您甚至不需要購買編譯器。

為了簡化我們的工作，各種供應商推出了非常不錯的 JavaScript 編輯工具。其中一些列在下面：

Microsoft FrontPage - Microsoft 開發了一種流行的 HTML 編輯器，稱為 FrontPage。FrontPage 還為 Web 開發人員提供了一些 JavaScript 工具，以幫助建立互動式網站。
Macromedia Dreamweaver MX - Macromedia Dreamweaver MX 是專業 Web 開發人員中非常流行的 HTML 和 JavaScript 編輯器。它提供了幾個方便的預構建 JavaScript 元件，與資料庫很好地整合，並符合 XHTML 和 XML 等新標準。
Macromedia HomeSite 5 − HomeSite 5 是一款廣受歡迎的來自 Macromedia 的 HTML 和 JavaScript 編輯器，可用於有效管理個人網站。

JavaScript 的現狀如何？

ECMAScript 第 5 版標準將是四年多來發布的第一個更新。JavaScript 2.0 符合 ECMAScript 標準的第 5 版，兩者之間的差異非常小。

JavaScript 2.0 的規範可以在以下網站找到：https://www-archive.mozilla.org/js/language/js20-2002-04/

如今，Netscape 的 JavaScript 和 Microsoft 的 JScript 符合 ECMAScript 標準，儘管這兩種語言仍然支援不屬於該標準的功能。

JavaScript - 語法

JavaScript 可以使用放置在網頁中<script>... </script> HTML 標籤內的 JavaScript 語句來實現。

您可以在網頁中的任何位置放置包含 JavaScript 的<script> 標籤，但通常建議您將其保留在<head> 標籤內。

<script ...>
   JavaScript code
</script>

script 標籤有兩個重要的屬性 -

Language − 此屬性指定您正在使用的指令碼語言。通常，其值為 javascript。儘管最新版本的 HTML（及其繼任者 XHTML）已逐步淘汰此屬性的使用。
Type − 此屬性現在建議用於指示正在使用的指令碼語言，其值應設定為“text/javascript”。

因此，您的 JavaScript 程式碼段將如下所示 -

<script language = "javascript" type = "text/javascript">
   JavaScript code
</script>

您的第一個 JavaScript 程式碼

讓我們以一個列印“Hello World”的示例為例。我們添加了一個可選的 HTML 註釋，用於包圍我們的 JavaScript 程式碼。這樣做是為了將我們的程式碼儲存到不支援 JavaScript 的瀏覽器中。註釋以“//-->”結尾。這裡“//”表示 JavaScript 中的註釋，因此我們新增它以防止瀏覽器將 HTML 註釋的結尾讀取為 JavaScript 程式碼的一部分。接下來，我們呼叫一個函式document.write，它將字串寫入我們的 HTML 文件。

此函式可用於寫入文字、HTML 或兩者兼而有之。請檢視以下程式碼。

即時演示

<html>
   <body>   
      <script language = "javascript" type = "text/javascript">
         <!--
            document.write("Hello World!")
         //-->
      </script>      
   </body>
</html>

此程式碼將產生以下結果 -

Hello World!

空白字元和換行符

JavaScript 忽略 JavaScript 程式中出現的空格、製表符和換行符。您可以在程式中自由使用空格、製表符和換行符，並且可以自由地以整潔一致的方式格式化和縮排程式，使程式碼易於閱讀和理解。

分號是可選的

JavaScript 中的簡單語句通常後跟一個分號字元，就像在 C、C++ 和 Java 中一樣。但是，如果您的每個語句都放在單獨一行，JavaScript 允許您省略此分號。例如，以下程式碼可以在不使用分號的情況下編寫。

<script language = "javascript" type = "text/javascript">
   <!--
      var1 = 10
      var2 = 20
   //-->
</script>

但是當以單行格式化如下時，您必須使用分號 -

<script language = "javascript" type = "text/javascript">
   <!--
      var1 = 10; var2 = 20;
   //-->
</script>

注意 − 使用分號是一種良好的程式設計習慣。

大小寫敏感

JavaScript 是一種大小寫敏感的語言。這意味著語言關鍵字、變數、函式名以及任何其他識別符號必須始終以一致的大寫字母鍵入。

因此，識別符號Time 和TIME 在 JavaScript 中將傳達不同的含義。

注意 − 在 JavaScript 中編寫變數和函式名稱時應注意。

JavaScript 中的註釋

JavaScript 支援 C 樣式和 C++ 樣式的註釋，因此 -

// 和行尾之間的任何文字都被視為註釋，JavaScript 會忽略它。
/* 和 */ 字元之間的任何文字都被視為註釋。這可能跨越多行。
JavaScript 還識別 HTML 註釋開始序列<!--。JavaScript 將其視為單行註釋，就像 // 註釋一樣。
HTML 註釋結束序列 --> 未被 JavaScript 識別，因此應寫為 //-->。

示例

以下示例演示如何在 JavaScript 中使用註釋。

<script language = "javascript" type = "text/javascript">
   <!--
      // This is a comment. It is similar to comments in C++
   
      /*
      * This is a multi-line comment in JavaScript
      * It is very similar to comments in C Programming
      */
   //-->
</script>

在瀏覽器中啟用 JavaScript

所有現代瀏覽器都內建支援 JavaScript。通常，您可能需要手動啟用或停用此支援。本章介紹如何在瀏覽器（Internet Explorer、Firefox、Chrome 和 Opera）中啟用和停用 JavaScript 支援的過程。

Internet Explorer 中的 JavaScript

以下是在 Internet Explorer 中開啟或關閉 JavaScript 的簡單步驟 -

從選單中依次選擇工具 → Internet 選項。
從對話方塊中選擇安全選項卡。
單擊自定義級別按鈕。
向下滾動直到找到指令碼編寫選項。
在活動指令碼下選擇啟用單選按鈕。
最後單擊確定並退出

要在 Internet Explorer 中停用 JavaScript 支援，您需要在活動指令碼下選擇停用單選按鈕。

Firefox 中的 JavaScript

以下是在 Firefox 中開啟或關閉 JavaScript 的步驟 -

開啟一個新標籤頁 → 在位址列中輸入about:config。
然後您將找到警告對話方塊。選擇我保證會小心！
然後您將在瀏覽器中找到配置選項列表。
在搜尋欄中，輸入javascript.enabled。
您將在那裡找到透過右鍵單擊該選項的值 →選擇切換來啟用或停用 javascript 的選項。

如果 javascript.enabled 為 true；則在單擊切換時將其轉換為 false。如果 javascript 已停用；則在單擊切換時將其啟用。

Chrome 中的 JavaScript

以下是在 Chrome 中開啟或關閉 JavaScript 的步驟 -

單擊瀏覽器右上角的 Chrome 選單。
選擇設定。
單擊頁面末尾的顯示高階設定。
在隱私權部分，單擊內容設定按鈕。
在“Javascript”部分，選擇“不允許任何網站執行 JavaScript”或“允許所有網站執行 JavaScript（推薦）”。

Opera 中的 JavaScript

以下是在 Opera 中開啟或關閉 JavaScript 的步驟 -

從選單中依次選擇工具 → 首選項。
從對話方塊中選擇高階選項。
從列出的專案中選擇內容。
選中啟用 JavaScript複選框。
最後單擊確定並退出。

要在 Opera 中停用 JavaScript 支援，您不應選中啟用 JavaScript 複選框。

針對非 JavaScript 瀏覽器的警告

如果您必須使用 JavaScript 執行某些重要操作，則可以使用<noscript>標籤向用戶顯示警告訊息。

您可以按如下方式在指令碼塊之後立即新增noscript塊 -

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!--
            document.write("Hello World!")
         //-->
      </script>
      
      <noscript>
         Sorry...JavaScript is needed to go ahead.
      </noscript>      
   </body>
</html>

現在，如果使用者的瀏覽器不支援 JavaScript 或未啟用 JavaScript，則螢幕上將顯示來自</noscript>的訊息。

JavaScript - 在 HTML 檔案中的位置

可以在 HTML 文件中的任何位置包含 JavaScript 程式碼。但是，在 HTML 檔案中包含 JavaScript 的最優方法如下 -

在<head>...</head>部分中的指令碼。
在<body>...</body>部分中的指令碼。
在<body>...</body>和<head>...</head>部分中的指令碼。
在外部檔案中編寫指令碼，然後包含在<head>...</head>部分中。

在下一節中，我們將瞭解如何以不同的方式將 JavaScript 放置在 HTML 檔案中。

在<head>...</head>部分中的 JavaScript

如果希望在某些事件（例如使用者單擊某個位置）發生時執行指令碼，則會按如下方式將該指令碼放在 head 中 -

即時演示

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>     
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>  
</html>

此程式碼將產生以下結果 -

在<body>...</body>部分中的 JavaScript

如果需要指令碼在頁面載入時執行，以便指令碼在頁面中生成內容，則指令碼位於文件的<body>部分。在這種情況下，您不會使用 JavaScript 定義任何函式。請檢視以下程式碼。

即時演示

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <p>This is web page body </p>
   </body>
</html>

此程式碼將產生以下結果 -

在<body>和<head>部分中的 JavaScript

您可以將 JavaScript 程式碼全部放在<head>和<body>部分中，如下所示 -

即時演示

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>
</html>

此程式碼將產生以下結果 -

外部檔案中的 JavaScript

隨著您開始更廣泛地使用 JavaScript，您可能會發現某些情況下您在一個站點的多個頁面上重複使用相同的 JavaScript 程式碼。

您無需在多個 HTML 檔案中維護相同的程式碼。script標籤提供了一種機制，允許您將 JavaScript 儲存在外部檔案中，然後將其包含到您的 HTML 檔案中。

以下是一個示例，說明如何使用script標籤及其src屬性在 HTML 程式碼中包含外部 JavaScript 檔案。

<html>
   <head>
      <script type = "text/javascript" src = "filename.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>

要使用來自外部檔案源的 JavaScript，您需要將所有 JavaScript 原始碼寫入一個副檔名為“.js”的簡單文字檔案中，然後按上述方式包含該檔案。

例如，您可以將以下內容儲存在filename.js檔案中，然後在包含 filename.js 檔案後，可以在 HTML 檔案中使用sayHello函式。

function sayHello() {
   alert("Hello World")
}

JavaScript - 變數

JavaScript 資料型別

程式語言最基本的特點之一是它支援的資料型別集。這些是在程式語言中可以表示和操作的值的型別。

JavaScript 允許您使用三種基本資料型別 -

數字，例如 123、120.50 等。
文字字串，例如“This text string”等。
布林值，例如 true 或 false。

JavaScript 還定義了兩種簡單資料型別，null和undefined，它們各自只定義一個值。除了這些基本資料型別之外，JavaScript 還支援一種稱為物件的複合資料型別。我們將在單獨的章節中詳細介紹物件。

注意 − JavaScript 並不區分整數值和浮點值。JavaScript 中的所有數字都表示為浮點值。JavaScript 使用 IEEE 754 標準定義的 64 位浮點格式表示數字。

JavaScript 變數

與許多其他程式語言一樣，JavaScript 也有變數。變數可以認為是命名的容器。您可以將資料放入這些容器中，然後只需命名容器即可引用資料。

在 JavaScript 程式中使用變數之前，必須先宣告它。變數使用var關鍵字宣告，如下所示。

<script type = "text/javascript">
   <!--
      var money;
      var name;
   //-->
</script>

您還可以使用相同的var關鍵字宣告多個變數，如下所示 -

<script type = "text/javascript">
   <!--
      var money, name;
   //-->
</script>

將值儲存在變數中稱為變數初始化。您可以在建立變數時或稍後在需要該變數時進行變數初始化。

例如，您可以建立一個名為money的變數，並稍後為其分配值 2000.50。對於另一個變數，您可以在初始化時分配一個值，如下所示。

<script type = "text/javascript">
   <!--
      var name = "Ali";
      var money;
      money = 2000.50;
   //-->
</script>

注意 − 僅在宣告或初始化時使用var關鍵字，在文件中任何變數名稱的生命週期內僅使用一次。您不應重新宣告相同的變數兩次。

JavaScript 是一種無型別語言。這意味著 JavaScript 變數可以儲存任何資料型別的值。與許多其他語言不同，您不必在變數宣告期間告訴 JavaScript 變數將儲存哪種型別的值。變數的值型別可以在程式執行期間更改，JavaScript 會自動處理它。

JavaScript 變數作用域

變數的作用域是定義它的程式區域。JavaScript 變數只有兩個作用域。

全域性變數 − 全域性變數具有全域性作用域，這意味著它可以在 JavaScript 程式碼的任何位置定義。
區域性變數 − 區域性變數僅在其定義的函式內可見。函式引數始終是該函式的區域性變數。

在函式體內部，區域性變數優先於同名全域性變數。如果你聲明瞭一個與全域性變數同名的區域性變數或函式引數，那麼你實際上就隱藏了全域性變數。請檢視以下示例。

即時演示

<html>
   <body onload = checkscope();>   
      <script type = "text/javascript">
         <!--
            var myVar = "global";      // Declare a global variable
            function checkscope( ) {
               var myVar = "local";    // Declare a local variable
               document.write(myVar);
            }
         //-->
      </script>     
   </body>
</html>

這將產生以下結果 -

local

JavaScript 變數命名

在 JavaScript 中命名變數時，請記住以下規則。

你不應該使用任何 JavaScript 保留關鍵字作為變數名。這些關鍵字將在下一節中提到。例如，break 或 boolean 變數名無效。
JavaScript 變數名不能以數字 (0-9) 開頭。它們必須以字母或下劃線字元開頭。例如，123test 是一個無效的變數名，但 _123test 是一個有效的變數名。
JavaScript 變數名區分大小寫。例如，Name 和 name 是兩個不同的變數。

JavaScript 保留字

下表列出了 JavaScript 中的所有保留字。它們不能用作 JavaScript 變數、函式、方法、迴圈標籤或任何物件名稱。

abstract	else	instanceof	switch
boolean	enum	int	synchronized
break	export	interface	this
byte	extends	long	throw
case	false	native	throws
catch	final	new	transient
char	finally	null	true
class	float	package	try
const	for	private	typeof
continue	function	protected	var
debugger	goto	public	void
default	if	return	volatile
delete	implements	short	while
do	import	static	with
double	in	super

JavaScript - 運算子

什麼是運算子？

讓我們來看一個簡單的表示式 4 + 5 等於 9。這裡 4 和 5 被稱為 運算元，而 ‘+’ 被稱為 運算子。JavaScript 支援以下型別的運算子。

算術運算子
比較運算子
邏輯（或關係）運算子
賦值運算子
條件（或三元）運算子

讓我們逐一瞭解所有運算子。

算術運算子

JavaScript 支援以下算術運算子 -

假設變數 A 持有 10，變數 B 持有 20，則 -

序號	運算子 & 描述
1	+ (加法) 將兩個運算元相加例如：A + B 將得到 30
2	- (減法) 從第一個運算元中減去第二個運算元例如：A - B 將得到 -10
3	* (乘法) 將兩個運算元相乘例如：A * B 將得到 200
4	/ (除法) 將分子除以分母例如：B / A 將得到 2
5	% (模) 輸出整數除法的餘數例如：B % A 將得到 0
6	++ (自增) 將整數值增加 1 例如：A++ 將得到 11
7	-- (自減) 將整數值減少 1 例如：A-- 將得到 9

注意 - 加法運算子 (+) 適用於數字和字串。例如 "a" + 10 將得到 "a10"。

示例

以下程式碼顯示瞭如何在 JavaScript 中使用算術運算子。

即時演示

<html>
   <body>
   
      <script type = "text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var c = "Test";
            var linebreak = "<br />";
         
            document.write("a + b = ");
            result = a + b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a - b = ");
            result = a - b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a / b = ");
            result = a / b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a % b = ");
            result = a % b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a + b + c = ");
            result = a + b + c;
            document.write(result);
            document.write(linebreak);
         
            a = ++a;
            document.write("++a = ");
            result = ++a;
            document.write(result);
            document.write(linebreak);
         
            b = --b;
            document.write("--b = ");
            result = --b;
            document.write(result);
            document.write(linebreak);
         //-->
      </script>
      
      Set the variables to different values and then try...
   </body>
</html>

輸出

a + b = 43
a - b = 23
a / b = 3.3
a % b = 3
a + b + c = 43Test
++a = 35
--b = 8
Set the variables to different values and then try...

比較運算子

JavaScript 支援以下比較運算子 -

假設變數 A 持有 10，變數 B 持有 20，則 -

序號	運算子 & 描述
1	= = (等於) 檢查兩個運算元的值是否相等，如果相等，則條件變為真。例如：(A == B) 為假。
2	!= (不等於) 檢查兩個運算元的值是否相等，如果值不相等，則條件變為真。例如：(A != B) 為真。
3	> (大於) 檢查左側運算元的值是否大於右側運算元的值，如果大於，則條件變為真。例如：(A > B) 為假。
4	< (小於) 檢查左側運算元的值是否小於右側運算元的值，如果小於，則條件變為真。例如：(A < B) 為真。
5	>= (大於或等於) 檢查左側運算元的值是否大於或等於右側運算元的值，如果大於或等於，則條件變為真。例如：(A >= B) 為假。
6	<= (小於或等於) 檢查左側運算元的值是否小於或等於右側運算元的值，如果小於或等於，則條件變為真。例如：(A <= B) 為真。

示例

以下程式碼顯示瞭如何在 JavaScript 中使用比較運算子。

即時演示

<html>
   <body>  
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br />";
      
            document.write("(a == b) => ");
            result = (a == b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a < b) => ");
            result = (a < b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a > b) => ");
            result = (a > b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a != b) => ");
            result = (a != b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a >= b) => ");
            result = (a >= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a <= b) => ");
            result = (a <= b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      Set the variables to different values and different operators and then try...
   </body>
</html>

輸出

(a == b) => false 
(a < b) => true 
(a > b) => false 
(a != b) => true 
(a >= b) => false 
a <= b) => true
Set the variables to different values and different operators and then try...

邏輯運算子

JavaScript 支援以下邏輯運算子 -

假設變數 A 持有 10，變數 B 持有 20，則 -

序號	運算子 & 描述
1	&& (邏輯 AND) 如果兩個運算元均非零，則條件變為真。例如：(A && B) 為真。
2	\|\| (邏輯 OR) 如果兩個運算元中任何一個非零，則條件變為真。例如：(A \|\| B) 為真。
3	! (邏輯 NOT) 反轉其運算元的邏輯狀態。如果條件為真，則邏輯 NOT 運算子將使其變為假。例如：! (A && B) 為假。

序號

運算子 & 描述

&& (邏輯 AND)

如果兩個運算元均非零，則條件變為真。

例如：(A && B) 為真。

|| (邏輯 OR)

如果兩個運算元中任何一個非零，則條件變為真。

例如：(A || B) 為真。

! (邏輯 NOT)

反轉其運算元的邏輯狀態。如果條件為真，則邏輯 NOT 運算子將使其變為假。

例如：! (A && B) 為假。

示例

嘗試以下程式碼以瞭解如何在 JavaScript 中實現邏輯運算子。

即時演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = true;
            var b = false;
            var linebreak = "<br />";
      
            document.write("(a && b) => ");
            result = (a && b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a || b) => ");
            result = (a || b);
            document.write(result);
            document.write(linebreak);
         
            document.write("!(a && b) => ");
            result = (!(a && b));
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

輸出

(a && b) => false 
(a || b) => true 
!(a && b) => true
Set the variables to different values and different operators and then try...

位運算子

JavaScript 支援以下位運算子 -

假設變數 A 持有 2，變數 B 持有 3，則 -

序號	運算子 & 描述
1	& (按位 AND) 它對每個整數引數的每一位執行布林 AND 運算。例如：(A & B) 為 2。
2	\| (按位 OR) 它對每個整數引數的每一位執行布林 OR 運算。例如：(A \| B) 為 3。
3	^ (按位 XOR) 它對每個整數引數的每一位執行布林異或運算。異或運算意味著運算元一或運算元二為真，但不能同時為真。例如：(A ^ B) 為 1。
4	~ (按位 NOT) 它是一個一元運算子，透過反轉運算元中的所有位來操作。例如：(~B) 為 -4。
5	<< (左移) 它將第一個運算元中的所有位向左移動第二個運算元指定的位數。新位用零填充。將值左移一位相當於將其乘以 2，左移兩位相當於將其乘以 4，依此類推。例如：(A << 1) 為 4。
6	>> (右移) 二進位制右移運算子。左側運算元的值向右移動右側運算元指定的位數。例如：(A >> 1) 為 1。
7	>>> (帶零的右移) 此運算子與 >> 運算子類似，只是左側移入的位始終為零。例如：(A >>> 1) 為 1。

示例

嘗試以下程式碼以在 JavaScript 中實現位運算子。

即時演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 2; // Bit presentation 10
            var b = 3; // Bit presentation 11
            var linebreak = "<br />";
         
            document.write("(a & b) => ");
            result = (a & b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a | b) => ");
            result = (a | b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a ^ b) => ");
            result = (a ^ b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(~b) => ");
            result = (~b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a << b) => ");
            result = (a << b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a >> b) => ");
            result = (a >> b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

(a & b) => 2 
(a | b) => 3 
(a ^ b) => 1 
(~b) => -4 
(a << b) => 16 
(a >> b) => 0
Set the variables to different values and different operators and then try...

賦值運算子

JavaScript 支援以下賦值運算子 -

序號	運算子 & 描述
1	= (簡單賦值) 將右側運算元的值賦給左側運算元例如：C = A + B 將 A + B 的值賦給 C
2	+= (加法賦值) 它將右側運算元加到左側運算元，並將結果賦給左側運算元。例如：C += A 等價於 C = C + A
3	−= (減法賦值) 它從左側運算元中減去右側運算元，並將結果賦給左側運算元。例如：C -= A 等價於 C = C - A
4	= (乘法賦值) 它將右側運算元乘以左側運算元，並將結果賦給左側運算元。例如：C = A 等價於 C = C * A
5	/= (除法賦值) 它將左側運算元除以右側運算元，並將結果賦給左側運算元。例如：C /= A 等價於 C = C / A
6	%= (模賦值) 它使用兩個運算元取模，並將結果賦給左側運算元。例如：C %= A 等價於 C = C % A

注意 - 位運算子也適用相同的邏輯，因此它們將變為 <<=、>>=、>>=、&=、|= 和 ^=。

示例

嘗試以下程式碼以在 JavaScript 中實現賦值運算子。

即時演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var linebreak = "<br />";
         
            document.write("Value of a => (a = b) => ");
            result = (a = b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a += b) => ");
            result = (a += b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a -= b) => ");
            result = (a -= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a *= b) => ");
            result = (a *= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a /= b) => ");
            result = (a /= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a %= b) => ");
            result = (a %= b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

輸出

Value of a => (a = b) => 10
Value of a => (a += b) => 20 
Value of a => (a -= b) => 10 
Value of a => (a *= b) => 100 
Value of a => (a /= b) => 10
Value of a => (a %= b) => 0
Set the variables to different values and different operators and then try...

其他運算子

我們將在本文中討論兩個在 JavaScript 中非常有用的運算子：條件運算子 (? :) 和 typeof 運算子。

條件運算子 (? :)

條件運算子首先評估表示式的真假值，然後根據評估結果執行兩個給定語句中的一個。

序號	運算子和描述
1	? : (條件) 如果條件為真？則值為 X：否則為值 Y

示例

嘗試以下程式碼以瞭解條件運算子在 JavaScript 中的工作原理。

即時演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br />";
         
            document.write ("((a > b) ? 100 : 200) => ");
            result = (a > b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);
         
            document.write ("((a < b) ? 100 : 200) => ");
            result = (a < b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

輸出

((a > b) ? 100 : 200) => 200 
((a < b) ? 100 : 200) => 100
Set the variables to different values and different operators and then try...

typeof 運算子

typeof 運算子是一個一元運算子，放在其單個運算元之前，該運算元可以是任何型別。其值為一個字串，指示運算元的資料型別。

如果其運算元是數字、字串或布林值，則 typeof 運算子計算結果為 "number"、"string" 或 "boolean"，並根據計算結果返回 true 或 false。

以下是 typeof 運算子的返回值列表。

型別	typeof 返回的字串
數字	"number"
字串	"string"
布林值	"boolean"
物件	"object"
函式	"function"
未定義	"undefined"
空	"object"

示例

以下程式碼顯示瞭如何實現 typeof 運算子。

即時演示

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = "String";
            var linebreak = "<br />";
         
            result = (typeof b == "string" ? "B is String" : "B is Numeric");
            document.write("Result => ");
            document.write(result);
            document.write(linebreak);
         
            result = (typeof a == "string" ? "A is String" : "A is Numeric");
            document.write("Result => ");
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

輸出

Result => B is String 
Result => A is Numeric
Set the variables to different values and different operators and then try...

JavaScript - if...else 語句

在編寫程式時，可能需要在給定的路徑集中選擇一條路徑。在這種情況下，你需要使用條件語句，讓你的程式做出正確的決策並執行正確的操作。

JavaScript 支援條件語句，用於根據不同的條件執行不同的操作。在這裡，我們將解釋 if..else 語句。

if-else 流程圖

以下流程圖顯示了 if-else 語句的工作原理。

JavaScript 支援以下形式的 if..else 語句 -

if 語句
if...else 語句
if...else if... 語句。

if 語句

if 語句是基本的控制語句，它允許 JavaScript 進行決策並有條件地執行語句。

語法

基本 if 語句的語法如下所示：

if (expression) {
   Statement(s) to be executed if expression is true
}

這裡會評估一個 JavaScript 表示式。如果結果值為真，則執行給定的語句。如果表示式為假，則不會執行任何語句。大多數情況下，在做決策時會使用比較運算子。

示例

嘗試以下示例以瞭解 if 語句的工作原理。

即時演示

<html>
   <body>     
      <script type = "text/javascript">
         <!--
            var age = 20;
         
            if( age > 18 ) {
               document.write("<b>Qualifies for driving</b>");
            }
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

Qualifies for driving
Set the variable to different value and then try...

if...else 語句

'if...else' 語句是下一種控制語句的形式，它允許 JavaScript 以更受控的方式執行語句。

語法

if (expression) {
   Statement(s) to be executed if expression is true
} else {
   Statement(s) to be executed if expression is false
}

這裡會評估 JavaScript 表示式。如果結果值為真，則執行 'if' 程式碼塊中的給定語句。如果表示式為假，則執行 else 程式碼塊中的給定語句。

示例

嘗試以下程式碼以學習如何在 JavaScript 中實現 if-else 語句。

即時演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var age = 15;
         
            if( age > 18 ) {
               document.write("<b>Qualifies for driving</b>");
            } else {
               document.write("<b>Does not qualify for driving</b>");
            }
         //-->
      </script>     
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

Does not qualify for driving
Set the variable to different value and then try...

if...else if... 語句

if...else if... 語句是 if…else 的高階形式，它允許 JavaScript 從多個條件中做出正確的決策。

語法

if-else-if 語句的語法如下所示：

if (expression 1) {
   Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
   Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
   Statement(s) to be executed if expression 3 is true
} else {
   Statement(s) to be executed if no expression is true
}

這段程式碼沒有什麼特別之處。它只是一系列 if 語句，其中每個 if 都是前一個語句的 else 子句的一部分。根據真值條件執行語句，如果所有條件都不為真，則執行 else 程式碼塊。

示例

嘗試以下程式碼以學習如何在 JavaScript 中實現 if-else-if 語句。

即時演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var book = "maths";
            if( book == "history" ) {
               document.write("<b>History Book</b>");
            } else if( book == "maths" ) {
               document.write("<b>Maths Book</b>");
            } else if( book == "economics" ) {
               document.write("<b>Economics Book</b>");
            } else {
               document.write("<b>Unknown Book</b>");
            }
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
<html>

輸出

Maths Book
Set the variable to different value and then try...

JavaScript - Switch Case

您可以使用多個 if...else…if 語句（如上一章所示）來執行多路分支。但是，這並不總是最佳解決方案，尤其是在所有分支都依賴於單個變數的值時。

從 JavaScript 1.2 開始，您可以使用 switch 語句來精確處理這種情況，並且它的效率比重複使用 if...else if 語句更高。

流程圖

下面的流程圖解釋了 switch-case 語句的工作原理。

語法

switch 語句的目的是提供一個要評估的表示式以及基於表示式值的幾個不同的語句。直譯器會檢查每個 case 與表示式的值是否匹配，直到找到匹配項。如果沒有任何匹配項，則將使用 default 條件。

switch (expression) {
   case condition 1: statement(s)
   break;
   
   case condition 2: statement(s)
   break;
   ...
   
   case condition n: statement(s)
   break;
   
   default: statement(s)
}

break 語句指示特定 case 的結束。如果省略了它們，直譯器將繼續執行每個後續 case 中的每個語句。

我們將在 迴圈控制 章節中解釋 break 語句。

示例

嘗試以下示例以實現 switch-case 語句。

即時演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var grade = 'A';
            document.write("Entering switch block<br />");
            switch (grade) {
               case 'A': document.write("Good job<br />");
               break;
            
               case 'B': document.write("Pretty good<br />");
               break;
            
               case 'C': document.write("Passed<br />");
               break;
            
               case 'D': document.write("Not so good<br />");
               break;
            
               case 'F': document.write("Failed<br />");
               break;
            
               default:  document.write("Unknown grade<br />")
            }
            document.write("Exiting switch block");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

Entering switch block
Good job
Exiting switch block
Set the variable to different value and then try...

break 語句在 switch-case 語句中起著重要作用。嘗試以下程式碼，該程式碼使用不帶任何 break 語句的 switch-case 語句。

即時演示

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var grade = 'A';
            document.write("Entering switch block<br />");
            switch (grade) {
               case 'A': document.write("Good job<br />");
               case 'B': document.write("Pretty good<br />");
               case 'C': document.write("Passed<br />");
               case 'D': document.write("Not so good<br />");
               case 'F': document.write("Failed<br />");
               default: document.write("Unknown grade<br />")
            }
            document.write("Exiting switch block");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

Entering switch block
Good job
Pretty good
Passed
Not so good
Failed
Unknown grade
Exiting switch block
Set the variable to different value and then try...

JavaScript - while 迴圈

在編寫程式時，您可能會遇到需要反覆執行某個操作的情況。在這種情況下，您需要編寫迴圈語句來減少程式碼行數。

JavaScript 支援所有必要的迴圈來減輕程式設計壓力。

while 迴圈

JavaScript 中最基本的迴圈是 while 迴圈，本章將對此進行討論。while 迴圈的目的是隻要 表示式 為真，就重複執行語句或程式碼塊。一旦表示式變為假，迴圈就會終止。

流程圖

while 迴圈 的流程圖如下所示：

語法

JavaScript 中 while 迴圈 的語法如下所示：

while (expression) {
   Statement(s) to be executed if expression is true
}

示例

嘗試以下示例以實現 while 迴圈。

即時演示

<html>
   <body>
      
      <script type = "text/javascript">
         <!--
            var count = 0;
            document.write("Starting Loop ");
         
            while (count < 10) {
               document.write("Current Count : " + count + "<br />");
               count++;
            }
         
            document.write("Loop stopped!");
         //-->
      </script>
      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...

do...while 迴圈

do...while 迴圈類似於 while 迴圈，只是條件檢查發生在迴圈的末尾。這意味著即使條件為假，迴圈也始終至少執行一次。

流程圖

do-while 迴圈的流程圖如下所示：

語法

JavaScript 中 do-while 迴圈的語法如下所示：

do {
   Statement(s) to be executed;
} while (expression);

注意 - 不要漏掉 do...while 迴圈末尾的分號。

示例

嘗試以下示例以學習如何在 JavaScript 中實現 do-while 迴圈。

即時演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var count = 0;
            
            document.write("Starting Loop" + "<br />");
            do {
               document.write("Current Count : " + count + "<br />");
               count++;
            }
            
            while (count < 5);
            document.write ("Loop stopped!");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

Starting Loop
Current Count : 0 
Current Count : 1 
Current Count : 2 
Current Count : 3 
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...

JavaScript - For 迴圈

“for”迴圈是最簡潔的迴圈形式。它包含以下三個重要部分：

迴圈初始化，我們在此將計數器初始化為起始值。初始化語句在迴圈開始前執行。
測試語句，它將測試給定條件是真還是假。如果條件為真，則執行迴圈內部給定的程式碼，否則控制權將退出迴圈。
迭代語句，您可以在其中增加或減少計數器。

您可以將所有三個部分放在一行中，用分號分隔。

流程圖

JavaScript 中 for 迴圈的流程圖如下所示：

語法

for 迴圈在 JavaScript 中的語法如下所示：

for (initialization; test condition; iteration statement) {
   Statement(s) to be executed if test condition is true
}

示例

嘗試以下示例以瞭解 for 迴圈在 JavaScript 中的工作原理。

即時演示

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var count;
            document.write("Starting Loop" + "<br />");
         
            for(count = 0; count < 10; count++) {
               document.write("Current Count : " + count );
               document.write("<br />");
            }         
            document.write("Loop stopped!");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped! 
Set the variable to different value and then try...

JavaScript for...in 迴圈

for...in 迴圈用於遍歷物件的屬性。由於我們尚未討論物件，因此您可能對該迴圈不太熟悉。但是，一旦您瞭解物件在 JavaScript 中的行為方式，就會發現此迴圈非常有用。

語法

‘for..in’ 迴圈的語法如下：

for (variablename in object) {
   statement or block to execute
}

在每次迭代中，object 的一個屬性會被賦值給 variablename，並且此迴圈會一直持續到物件的屬性都被遍歷完。

示例

嘗試以下示例以實現 ‘for-in’ 迴圈。它列印 Web 瀏覽器的 Navigator 物件。

即時演示

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var aProperty;
            document.write("Navigator Object Properties<br /> ");        
            for (aProperty in navigator) {
               document.write(aProperty);
               document.write("<br />");
            }
            document.write ("Exiting from the loop!");
         //-->
      </script>      
      <p>Set the variable to different object and then try...</p>
   </body>
</html>

輸出

Navigator Object Properties 
serviceWorker 
webkitPersistentStorage 
webkitTemporaryStorage 
geolocation 
doNotTrack 
onLine 
languages 
language 
userAgent 
product 
platform 
appVersion 
appName 
appCodeName 
hardwareConcurrency 
maxTouchPoints 
vendorSub 
vendor 
productSub 
cookieEnabled 
mimeTypes 
plugins 
javaEnabled 
getStorageUpdates 
getGamepads 
webkitGetUserMedia 
vibrate 
getBattery 
sendBeacon 
registerProtocolHandler 
unregisterProtocolHandler 
Exiting from the loop!
Set the variable to different object and then try...

JavaScript - 迴圈控制

JavaScript 提供了完全的控制權來處理迴圈和 switch 語句。在某些情況下，您可能需要在到達迴圈底部之前退出迴圈。也可能存在您想跳過程式碼塊的一部分並開始迴圈的下一輪迭代的情況。

為了處理所有這些情況，JavaScript 提供了 break 和 continue 語句。這些語句分別用於立即退出任何迴圈或開始任何迴圈的下一輪迭代。

break 語句

break 語句（已在 switch 語句中簡要介紹）用於提前退出迴圈，跳出封閉的花括號。

流程圖

break 語句的流程圖如下所示：

示例

以下示例說明了如何在 while 迴圈中使用 break 語句。請注意，一旦 x 達到 5 併到達緊接在閉合花括號下方的 document.write (..) 語句時，迴圈是如何提前退出的：

即時演示

<html>
   <body>     
      <script type = "text/javascript">
         <!--
         var x = 1;
         document.write("Entering the loop<br /> ");
         
         while (x < 20) {
            if (x == 5) {
               break;   // breaks out of loop completely
            }
            x = x + 1;
            document.write( x + "<br />");
         }         
         document.write("Exiting the loop!<br /> ");
         //-->
      </script>
      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...

我們已經看到了 break 語句在 switch 語句中的用法。

continue 語句

continue 語句告訴直譯器立即開始迴圈的下一輪迭代並跳過其餘的程式碼塊。當遇到 continue 語句時，程式流程會立即移動到迴圈檢查表示式，如果條件仍然為真，則它會開始下一輪迭代，否則控制權將退出迴圈。

示例

此示例說明了如何在 while 迴圈中使用 continue 語句。請注意，continue 語句是如何用於跳過變數 x 中儲存的索引達到 5 時列印操作的：

即時演示

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var x = 1;
            document.write("Entering the loop<br /> ");
         
            while (x < 10) {
               x = x + 1;
               
               if (x == 5) {
                  continue;   // skip rest of the loop body
               }
               document.write( x + "<br />");
            }         
            document.write("Exiting the loop!<br /> ");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...

使用標籤控制流程

從 JavaScript 1.2 開始，可以使用標籤與 break 和 continue 一起更精確地控制流程。標籤只是一個後跟冒號 (:) 的識別符號，應用於語句或程式碼塊。我們將看到兩個不同的示例，以瞭解如何在 break 和 continue 中使用標籤。

注意 - 在 ‘continue’ 或 ‘break’ 語句及其標籤名稱之間不允許換行。此外，在標籤名稱和關聯迴圈之間也不應有任何其他語句。

嘗試以下兩個示例以更好地理解標籤。

示例 1

以下示例顯示瞭如何使用 break 語句實現標籤。

即時演示

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            document.write("Entering the loop!<br /> ");
            outerloop:        // This is the label name         
            for (var i = 0; i < 5; i++) {
               document.write("Outerloop: " + i + "<br />");
               innerloop:
               for (var j = 0; j < 5; j++) {
                  if (j > 3 ) break ;           // Quit the innermost loop
                  if (i == 2) break innerloop;  // Do the same thing
                  if (i == 4) break outerloop;  // Quit the outer loop
                  document.write("Innerloop: " + j + " <br />");
               }
            }        
            document.write("Exiting the loop!<br /> ");
         //-->
      </script>      
   </body>
</html>

輸出

Entering the loop!
Outerloop: 0
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 1
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 2
Outerloop: 3
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 4
Exiting the loop!

示例 2

即時演示

<html>
   <body>
   
      <script type = "text/javascript">
         <!--
         document.write("Entering the loop!<br /> ");
         outerloop:     // This is the label name
         
         for (var i = 0; i < 3; i++) {
            document.write("Outerloop: " + i + "<br />");
            for (var j = 0; j < 5; j++) {
               if (j == 3) {
                  continue outerloop;
               }
               document.write("Innerloop: " + j + "<br />");
            }
         }
         
         document.write("Exiting the loop!<br /> ");
         //-->
      </script>
      
   </body>
</html>

輸出

Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!

JavaScript - 函式

函式是一組可重用程式碼，可以在程式的任何地方呼叫它。這消除了重複編寫相同程式碼的需要。它有助於程式設計師編寫模組化程式碼。函式允許程式設計師將一個大型程式劃分為多個小型且易於管理的函式。

與任何其他高階程式語言一樣，JavaScript 也支援編寫使用函式的模組化程式碼所需的所有功能。您一定在前面的章節中看到過 alert() 和 write() 等函式。我們一直在反覆使用這些函式，但它們只在核心 JavaScript 中編寫過一次。

JavaScript 也允許我們編寫自己的函式。本節解釋如何在 JavaScript 中編寫自己的函式。

函式定義

在使用函式之前，我們需要定義它。在 JavaScript 中定義函式最常見的方法是使用 function 關鍵字，後跟唯一的函式名稱、引數列表（可能是空的）以及用花括號括起來的語句塊。

語法

基本語法如下所示。

<script type = "text/javascript">
   <!--
      function functionname(parameter-list) {
         statements
      }
   //-->
</script>

示例

嘗試以下示例。它定義了一個名為 sayHello 的函式，該函式不帶任何引數：

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("Hello there");
      }
   //-->
</script>

呼叫函式

要在指令碼中的其他地方呼叫函式，您只需編寫該函式的名稱，如下面的程式碼所示。

即時演示

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello() {
            document.write ("Hello there!");
         }
      </script>
      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello">
      </form>      
      <p>Use different text in write method and then try...</p>
   </body>
</html>

輸出

函式引數

到目前為止，我們已經看到了不帶引數的函式。但是，在呼叫函式時，可以使用不同的引數。這些傳遞的引數可以在函式內部捕獲，並且可以在這些引數上進行任何操作。函式可以使用逗號分隔多個引數。

示例

嘗試以下示例。我們在這裡修改了我們的 sayHello 函式。現在它帶有兩個引數。

即時演示

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello(name, age) {
            document.write (name + " is " + age + " years old.");
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
      </form>      
      <p>Use different parameters inside the function and then try...</p>
   </body>
</html>

輸出

return 語句

JavaScript 函式可以有一個可選的 return 語句。如果您想從函式中返回值，則需要此語句。此語句應是函式中的最後一個語句。

例如，您可以將兩個數字傳遞給函式，然後您可以期望該函式在您的呼叫程式中返回它們的乘積。

示例

嘗試以下示例。它定義了一個函式，該函式接受兩個引數並將它們連線起來，然後在呼叫程式中返回結果。

即時演示

<html>
   <head>  
      <script type = "text/javascript">
         function concatenate(first, last) {
            var full;
            full = first + last;
            return full;
         }
         function secondFunction() {
            var result;
            result = concatenate('Zara', 'Ali');
            document.write (result );
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "secondFunction()" value = "Call Function">
      </form>      
      <p>Use different parameters inside the function and then try...</p>  
  </body>
</html>

輸出

關於 JavaScript 函式還有很多內容需要學習，但是我們在這個教程中已經涵蓋了最重要的概念。

JavaScript - 事件

什麼是事件？

JavaScript 與 HTML 的互動是透過使用者或瀏覽器操作頁面時發生的事件來處理的。

當頁面載入時，它被稱為一個事件。當用戶點選一個按鈕時，這個點選也是一個事件。其他示例包括按下任何鍵、關閉視窗、調整視窗大小等事件。

開發人員可以使用這些事件來執行 JavaScript 編碼的響應，這些響應會導致按鈕關閉視窗、向用戶顯示訊息、驗證資料以及幾乎任何其他可以想象的響應型別。

事件是文件物件模型 (DOM) 第 3 級的一部分，每個 HTML 元素都包含一組可以觸發 JavaScript 程式碼的事件。

請仔細閱讀本簡短教程以更好地理解 HTML 事件參考。在這裡，我們將看到一些示例來理解事件和 JavaScript 之間的關係 -

onclick 事件型別

這是最常用的事件型別，當用戶點選滑鼠左鍵時發生。您可以針對此事件型別放置您的驗證、警告等。

示例

嘗試以下示例。

即時演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button and see result</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello" />
      </form>      
   </body>
</html>

輸出

onsubmit 事件型別

onsubmit 是當您嘗試提交表單時發生的事件。您可以針對此事件型別放置表單驗證。

示例

以下示例顯示瞭如何使用 onsubmit。在這裡，我們在將表單資料提交到 Web 伺服器之前呼叫 validate() 函式。如果 validate() 函式返回 true，則表單將被提交，否則將不會提交資料。

嘗試以下示例。

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function validation() {
               all validation goes here
               .........
               return either true or false
            }
         //-->
      </script>      
   </head>
   
   <body>   
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()">
         .......
         <input type = "submit" value = "Submit" />
      </form>      
   </body>
</html>

onmouseover 和 onmouseout

這兩種事件型別將幫助您使用影像甚至文字建立不錯的效果。onmouseover 事件在您將滑鼠移到任何元素上時觸發，而 onmouseout 事件在您將滑鼠從該元素移開時觸發。嘗試以下示例。

即時演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function over() {
               document.write ("Mouse Over");
            }            
            function out() {
               document.write ("Mouse Out");
            }            
         //-->
      </script>      
   </head>
   
   <body>
      <p>Bring your mouse inside the division to see the result:</p>      
      <div onmouseover = "over()" onmouseout = "out()">
         <h2> This is inside the division </h2>
      </div>         
   </body>
</html>

輸出

HTML 5 標準事件

標準 HTML 5 事件列在此處以供參考。此處指令碼表示針對該事件執行的 Javascript 函式。

屬性	值	描述
Offline	script	文件離線時觸發
Onabort	script	在中止事件時觸發
onafterprint	script	文件列印後觸發
onbeforeonload	script	文件載入前觸發
onbeforeprint	script	文件列印前觸發
onblur	script	視窗失去焦點時觸發
oncanplay	script	媒體可以開始播放時觸發，但可能需要停止緩衝
oncanplaythrough	script	媒體可以播放到結束時觸發，無需停止緩衝
onchange	script	元素髮生變化時觸發
onclick	script	滑鼠點選時觸發
oncontextmenu	script	觸發上下文選單時觸發
ondblclick	script	滑鼠雙擊時觸發
ondrag	script	拖動元素時觸發
ondragend	script	拖動操作結束時觸發
ondragenter	script	將元素拖動到有效放置目標時觸發
ondragleave	script	將元素拖過有效放置目標時觸發
ondragover	script	拖動操作開始時觸發
ondragstart	script	拖動操作開始時觸發
ondrop	script	拖動元素被放下時觸發
ondurationchange	script	媒體長度發生變化時觸發
onemptied	script	媒體資源元素突然變為空時觸發。
onended	script	媒體到達結尾時觸發
onerror	script	發生錯誤時觸發
onfocus	script	視窗獲得焦點時觸發
onformchange	script	表單發生變化時觸發
onforminput	script	表單獲得使用者輸入時觸發
onhaschange	script	文件發生更改時觸發
oninput	script	元素獲得使用者輸入時觸發
oninvalid	script	元素無效時觸發
onkeydown	script	按下鍵時觸發
onkeypress	script	按下並釋放鍵時觸發
onkeyup	script	釋放鍵時觸發
onload	script	文件載入時觸發
onloadeddata	script	媒體資料載入時觸發
onloadedmetadata	script	媒體元素的時長和其他媒體資料載入時觸發
onloadstart	script	瀏覽器開始載入媒體資料時觸發
onmessage	script	觸發訊息時觸發
onmousedown	script	按下滑鼠按鈕時觸發
onmousemove	script	滑鼠指標移動時觸發
onmouseout	script	滑鼠指標移出元素時觸發
onmouseover	script	滑鼠指標移到元素上時觸發
onmouseup	script	釋放滑鼠按鈕時觸發
onmousewheel	script	旋轉滑鼠滾輪時觸發
onoffline	script	文件離線時觸發
onoine	script	文件上線時觸發
ononline	script	文件上線時觸發
onpagehide	script	視窗隱藏時觸發
onpageshow	script	視窗變為可見時觸發
onpause	script	媒體資料暫停時觸發
onplay	script	媒體資料即將開始播放時觸發
onplaying	script	媒體資料開始播放時觸發
onpopstate	script	視窗歷史記錄更改時觸發
onprogress	script	瀏覽器正在獲取媒體資料時觸發
onratechange	script	媒體資料的播放速度發生變化時觸發
onreadystatechange	script	就緒狀態發生變化時觸發
onredo	script	文件執行重做操作時觸發
onresize	script	視窗大小調整時觸發
onscroll	script	滾動元素的捲軸時觸發
onseeked	script	媒體元素的 seeking 屬性不再為 true 且查詢已結束時觸發
onseeking	script	媒體元素的 seeking 屬性為 true 且查詢已開始時觸發
onselect	script	選擇元素時觸發
onstalled	script	獲取媒體資料時發生錯誤時觸發
onstorage	script	文件載入時觸發
onsubmit	script	提交表單時觸發
onsuspend	script	瀏覽器一直在獲取媒體資料，但在獲取整個媒體檔案之前停止時觸發
ontimeupdate	script	媒體更改其播放位置時觸發
onundo	script	文件執行撤消操作時觸發
onunload	script	使用者離開文件時觸發
onvolumechange	script	媒體更改音量時觸發，將音量設定為“靜音”時也會觸發
onwaiting	script	媒體停止播放但預計會恢復時觸發

JavaScript 和 Cookie

什麼是 Cookie？

Web 瀏覽器和伺服器使用 HTTP 協議進行通訊，而 HTTP 是一種無狀態協議。但是對於商業網站，需要在不同的頁面之間維護會話資訊。例如，一個使用者註冊在完成多個頁面後結束。但是如何在所有網頁之間維護使用者的會話資訊。

在許多情況下，使用 Cookie 是記住和跟蹤偏好、購買、佣金和其他資訊的最有效方法，這些資訊對於改善訪客體驗或網站統計資料是必需的。

它是如何工作的？

您的伺服器以 Cookie 的形式向訪客的瀏覽器傳送一些資料。瀏覽器可能會接受 Cookie。如果確實如此，則會將其作為純文字記錄儲存在訪客的硬碟驅動器上。現在，當訪客到達您網站上的另一個頁面時，瀏覽器會將相同的 Cookie 傳送到伺服器以進行檢索。檢索後，您的伺服器就會知道/記住之前儲存的內容。

Cookie 是 5 個可變長度欄位的純文字資料記錄 -

Expires - Cookie 將過期的日期。如果此欄位為空，則 Cookie 將在訪客退出瀏覽器時過期。
Domain - 您網站的域名。
Path - 設定 Cookie 的目錄或網頁的路徑。如果您想從任何目錄或頁面檢索 Cookie，則此欄位可以為空。
Secure - 如果此欄位包含單詞“secure”，則 Cookie 只能使用安全伺服器檢索。如果此欄位為空，則不存在此類限制。
Name=Value - Cookie 以鍵值對的形式設定和檢索

Cookie 最初是為 CGI 程式設計設計的。Cookie 中包含的資料在 Web 瀏覽器和 Web 伺服器之間自動傳輸，因此伺服器上的 CGI 指令碼可以讀取和寫入儲存在客戶端上的 Cookie 值。

JavaScript 還可以使用 Document 物件的 cookie 屬性來操作 Cookie。JavaScript 可以讀取、建立、修改和刪除適用於當前網頁的 Cookie。

儲存 Cookie

建立 Cookie 的最簡單方法是為 document.cookie 物件分配一個字串值，如下所示。

document.cookie = "key1 = value1;key2 = value2;expires = date";

此處 expires 屬性是可選的。如果您使用有效日期或時間提供此屬性，則 Cookie 將在給定日期或時間過期，此後將無法訪問 Cookie 的值。

注意 - Cookie 值可能不包含分號、逗號或空格。因此，您可能希望在將值儲存在 Cookie 中之前使用 JavaScript escape() 函式對其進行編碼。如果這樣做，當您讀取 Cookie 值時，也必須使用相應的 unescape() 函式。

示例

嘗試以下操作。它在輸入 Cookie 中設定客戶名稱。

即時演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               if( document.myform.customer.value == "" ) {
                  alert("Enter some value!");
                  return;
               }
               cookievalue = escape(document.myform.customer.value) + ";";
               document.cookie = "name=" + cookievalue;
               document.write ("Setting Cookies : " + "name=" + cookievalue );
            }
         //-->
      </script>      
   </head>
   
   <body>      
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
      </form>   
   </body>
</html>

輸出

現在您的機器有一個名為 name 的 Cookie。您可以使用多個用逗號分隔的鍵=值對設定多個 Cookie。

讀取 Cookie

讀取 Cookie 與寫入 Cookie 一樣簡單，因為 document.cookie 物件的值就是 Cookie。因此，您可以隨時使用此字串來訪問 Cookie。document.cookie 字串將保留用分號分隔的名稱=值對列表，其中 name 是 Cookie 的名稱，value 是其字串值。

您可以使用字串的 split() 函式將字串分解為鍵和值，如下所示 -

示例

嘗試以下示例以獲取所有 Cookie。

即時演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function ReadCookie() {
               var allcookies = document.cookie;
               document.write ("All Cookies : " + allcookies );
               
               // Get all the cookies pairs in an array
               cookiearray = allcookies.split(';');
               
               // Now take key value pair out of this array
               for(var i=0; i<cookiearray.length; i++) {
                  name = cookiearray[i].split('=')[0];
                  value = cookiearray[i].split('=')[1];
                  document.write ("Key is : " + name + " and Value is : " + value);
               }
            }
         //-->
      </script>      
   </head>
   
   <body>     
      <form name = "myform" action = "">
         <p> click the following button and see the result:</p>
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
      </form>      
   </body>
</html>

注意 - 此處 length 是 Array 類的函式，它返回陣列的長度。我們將在單獨的章節中討論陣列。在那之前，請嘗試消化它。

注意 - 您的機器上可能已經設定了一些其他 Cookie。以上程式碼將顯示設定在您的機器上的所有 Cookie。

設定 Cookie 過期日期

您可以透過設定過期日期並在 Cookie 中儲存過期日期來延長 Cookie 的生命週期，使其超出當前瀏覽器會話。這可以透過將 ‘expires’ 屬性設定為日期和時間來完成。

示例

嘗試以下示例。它說明了如何將 Cookie 的過期日期延長 1 個月。

即時演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               var now = new Date();
               now.setMonth( now.getMonth() + 1 );
               cookievalue = escape(document.myform.customer.value) + ";"
               
               document.cookie = "name=" + cookievalue;
               document.cookie = "expires=" + now.toUTCString() + ";"
               document.write ("Setting Cookies : " + "name=" + cookievalue );
            }
         //-->
      </script>      
   </head>
   
   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

輸出

刪除 Cookie

有時您需要刪除 Cookie，以便後續嘗試讀取 Cookie 返回空值。為此，您只需將過期日期設定為過去的時間即可。

示例

嘗試以下示例。它說明了如何透過將 Cookie 的過期日期設定為當前日期前一個月來刪除 Cookie。

即時演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               var now = new Date();
               now.setMonth( now.getMonth() - 1 );
               cookievalue = escape(document.myform.customer.value) + ";"
               
               document.cookie = "name=" + cookievalue;
               document.cookie = "expires=" + now.toUTCString() + ";"
               document.write("Setting Cookies : " + "name=" + cookievalue );
            }
          //-->
      </script>      
   </head>
   
   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

輸出

JavaScript - 頁面重定向

什麼是頁面重定向？

您可能遇到過這樣的情況：您單擊一個 URL 以到達頁面 X，但實際上您被重定向到另一個頁面 Y。這是由於 頁面重定向 造成的。此概念與 JavaScript 頁面重新整理不同。

您可能希望將使用者從原始頁面重定向到其他頁面，原因有很多。我們列出了一些原因 -

您不喜歡您域名的名稱，並且要遷移到一個新的域名。在這種情況下，您可能希望將所有訪問者重定向到新網站。在這裡，您可以保留舊域名，但放置一個包含頁面重定向的單一頁面，以便所有舊域名訪問者都可以訪問您的新域名。
您已根據瀏覽器版本或名稱或可能根據不同的國家/地區構建了各種頁面，然後，您可以使用客戶端頁面重定向而不是使用伺服器端頁面重定向來將您的使用者帶到相應的頁面。
搜尋引擎可能已經索引了您的頁面。但在遷移到另一個域時，您不希望失去透過搜尋引擎訪問的訪問者。因此，您可以使用客戶端頁面重定向。但請記住，這不能用於欺騙搜尋引擎，否則可能會導致您的網站被封禁。

頁面重定向如何工作？

頁面重定向的實現如下所示。

示例 1

使用客戶端的 JavaScript 進行頁面重定向非常簡單。要將您的網站訪問者重定向到新頁面，您只需在頭部區域新增一行程式碼，如下所示。

即時演示

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://tutorialspoint.tw";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>Click the following button, you will be redirected to home page.</p>
      
      <form>
         <input type = "button" value = "Redirect Me" onclick = "Redirect();" />
      </form>
      
   </body>
</html>

輸出

示例 2

您可以在將網站訪問者重定向到新頁面之前向他們顯示一條適當的訊息。這需要一點時間延遲來載入新頁面。以下示例演示瞭如何實現這一點。這裡setTimeout()是一個內建的 JavaScript 函式，可用於在給定的時間間隔後執行另一個函式。

即時演示

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://tutorialspoint.tw";
            }            
            document.write("You will be redirected to main page in 10 sec.");
            setTimeout('Redirect()', 10000);
         //-->
      </script>
   </head>
   
   <body>
   </body>
</html>

輸出

You will be redirected to tutorialspoint.com main page in 10 seconds!

示例 3

以下示例演示瞭如何根據使用者的瀏覽器將網站訪問者重定向到不同的頁面。

<html>
   <head>     
      <script type = "text/javascript">
         <!--
            var browsername = navigator.appName;
            if( browsername == "Netscape" ) {
               window.location = "http://www.location.com/ns.htm";
            } else if ( browsername =="Microsoft Internet Explorer") {
               window.location = "http://www.location.com/ie.htm";
            } else {
               window.location = "http://www.location.com/other.htm";
            }
         //-->
      </script>      
   </head>
   
   <body>
   </body>
</html>

JavaScript - 對話方塊

JavaScript 支援三種重要的對話方塊型別。這些對話方塊可用於發出警告、獲取確認或獲取使用者的輸入。這裡我們將逐一討論每個對話方塊。

警告對話方塊

警告對話方塊主要用於向用戶發出警告訊息。例如，如果某個輸入欄位需要輸入一些文字，但使用者沒有提供任何輸入，那麼作為驗證的一部分，您可以使用警告框來發出警告訊息。

儘管如此，警告框仍然可以用於更友好的訊息。警告框只有一個“確定”按鈕供選擇並繼續。

示例

即時演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function Warn() {
               alert ("This is a warning message!");
               document.write ("This is a warning message!");
            }
         //-->
      </script>     
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "Warn();" />
      </form>     
   </body>
</html>

輸出

確認對話方塊

確認對話方塊主要用於獲取使用者對任何選項的同意。它會顯示一個帶有兩個按鈕的對話方塊：確定和取消。

如果使用者單擊“確定”按鈕，則視窗方法confirm()將返回 true。如果使用者單擊“取消”按鈕，則confirm()返回 false。您可以按如下方式使用確認對話方塊。

示例

即時演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function getConfirmation() {
               var retVal = confirm("Do you want to continue ?");
               if( retVal == true ) {
                  document.write ("User wants to continue!");
                  return true;
               } else {
                  document.write ("User does not want to continue!");
                  return false;
               }
            }
         //-->
      </script>     
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "getConfirmation();" />
      </form>      
   </body>
</html>

輸出

提示對話方塊

當您想要彈出一個文字框以獲取使用者輸入時，提示對話方塊非常有用。因此，它使您能夠與使用者互動。使用者需要填寫該欄位，然後單擊“確定”。

此對話方塊是使用名為prompt()的方法顯示的，該方法接受兩個引數：（i）您想要在文字框中顯示的標籤，以及（ii）要在文字框中顯示的預設字串。

此對話方塊有兩個按鈕：確定和取消。如果使用者單擊“確定”按鈕，則視窗方法prompt()將返回文字框中輸入的值。如果使用者單擊“取消”按鈕，則視窗方法prompt()返回null。

示例

以下示例演示瞭如何使用提示對話方塊 -

即時演示

<html>
   <head>     
      <script type = "text/javascript">
         <!--
            function getValue() {
               var retVal = prompt("Enter your name : ", "your name here");
               document.write("You have entered : " + retVal);
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "getValue();" />
      </form>      
   </body>
</html>

輸出

JavaScript - Void 關鍵字

void是 JavaScript 中一個重要的關鍵字，可以用作一元運算子，出現在其單個運算元之前，該運算元可以是任何型別。此運算子指定要評估的表示式，但不返回值。

語法

void的語法可以是以下兩種之一 -

<head>
   <script type = "text/javascript">
      <!--
         void func()
         javascript:void func()
         or:
         void(func())
         javascript:void(func())
      //-->
   </script>
</head>

示例 1

此運算子最常見的用法是在客戶端的javascript: URL 中，它允許您評估表示式的副作用，而瀏覽器不會顯示已評估表示式的值。

這裡表示式alert ('Warning!!!')被評估，但它不會載入回當前文件 -

即時演示

<html>
   <head>      
      <script type = "text/javascript">
         <!--
         //-->
      </script>   
   </head>
   
   <body>   
      <p>Click the following, This won't react at all...</p>
      <a href = "javascript:void(alert('Warning!!!'))">Click me!</a>     
   </body>
</html>

輸出

示例 2

看看下面的例子。以下連結什麼也不做，因為表示式“0”在 JavaScript 中沒有效果。這裡表示式“0”被評估，但它不會載入回當前文件。

即時演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
         //-->
      </script>      
   </head>
   
   <body>   
      <p>Click the following, This won't react at all...</p>
      <a href = "javascript:void(0)">Click me!</a>      
   </body>
</html>

輸出

示例 3

void的另一個用途是故意生成undefined值，如下所示。

即時演示

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function getValue() {
               var a,b,c;
               
               a = void ( b = 5, c = 7 );
               document.write('a = ' + a + ' b = ' + b +' c = ' + c );
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following to see the result:</p>
      <form>
         <input type = "button" value = "Click Me" onclick = "getValue();" />
      </form>     
   </body>
</html>

輸出

JavaScript - 頁面列印

很多時候，您希望在網頁上放置一個按鈕，以便透過實際印表機列印該網頁的內容。JavaScript 透過window物件的print函式幫助您實現此功能。

JavaScript 列印函式window.print()在執行時列印當前網頁。您可以使用onclick事件直接呼叫此函式，如下例所示。

示例

嘗試以下示例。

即時演示

<html>
   <head>      
      <script type = "text/javascript">
         <!--
         //-->
      </script>
   </head>
   
   <body>      
      <form>
         <input type = "button" value = "Print" onclick = "window.print()" />
      </form>   
   </body>
<html>

輸出

雖然它滿足了獲取列印輸出的目的，但這不是推薦的方法。列印友好的頁面實際上只是一個包含文字的頁面，沒有影像、圖形或廣告。

您可以透過以下方式使頁面列印友好 -

複製頁面並省略不需要的文字和圖形，然後從原始頁面連結到該列印友好頁面。檢視示例。
如果您不想保留頁面的額外副本，則可以使用適當的註釋（如..... ）標記可列印文字，然後可以使用 PERL 或任何其他後臺指令碼清除可列印文字並顯示以進行最終列印。我們在 Tutorialspoint 使用此方法為我們的網站訪問者提供列印功能。

如何列印頁面？

如果在網頁上找不到上述功能，則可以使用瀏覽器的標準工具欄列印網頁。按照以下連結操作。

File →  Print → Click OK  button.

JavaScript - 物件概述

JavaScript 是一種面向物件程式設計 (OOP) 語言。如果程式語言為開發人員提供了四種基本功能，則可以稱為面向物件的 -

封裝 - 將相關資訊（無論是資料還是方法）儲存在一個物件中的能力。
聚合 - 將一個物件儲存在另一個物件中的能力。
繼承 - 一個類依賴於另一個類（或多個類）的某些屬性和方法的能力。
多型 - 編寫一個可以在各種不同方式下工作的功能或方法的能力。

物件由屬性組成。如果屬性包含函式，則認為它是物件的方法，否則屬性被認為是屬性。

物件屬性

物件屬性可以是三種基本資料型別中的任何一種，或者可以是任何抽象資料型別，例如另一個物件。物件屬性通常是物件方法內部使用的變數，但也可以是整個頁面中使用的全域性可見變數。

向物件新增屬性的語法如下 -

objectName.objectProperty = propertyValue;

例如 - 以下程式碼使用document物件的"title"屬性獲取文件標題。

var str = document.title;

物件方法

方法是允許物件執行某些操作或允許對物件執行某些操作的函式。函式和方法之間存在細微差別 - 函式是語句的獨立單元，而方法附加到物件並且可以透過this關鍵字引用。

方法對於從將物件的內容顯示到螢幕到對一組區域性屬性和引數執行復雜的數學運算的一切都有用。

例如 - 以下是一個簡單的示例，演示如何使用document物件的write()方法在文件上寫入任何內容。

document.write("This is test");

使用者定義的物件

所有使用者定義的物件和內建物件都是稱為Object的物件的後代。

new 運算子

new運算子用於建立物件的例項。要建立物件，new運算子後跟建構函式方法。

在下面的示例中，建構函式方法是 Object()、Array() 和 Date()。這些建構函式是內建的 JavaScript 函式。

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

Object() 建構函式

建構函式是一個建立和初始化物件的函式。JavaScript 提供了一個稱為Object()的特殊建構函式來構建物件。Object()建構函式的返回值分配給一個變數。

該變數包含對新物件的引用。分配給物件的屬性不是變數，並且沒有使用var關鍵字定義。

示例 1

嘗試以下示例；它演示瞭如何建立一個物件。

即時演示

<html>
   <head>
      <title>User-defined objects</title>     
      <script type = "text/javascript">
         var book = new Object();   // Create the object
         book.subject = "Perl";     // Assign properties to the object
         book.author  = "Mohtashim";
      </script>      
   </head>
   
   <body>  
      <script type = "text/javascript">
         document.write("Book name is : " + book.subject + "<br>");
         document.write("Book author is : " + book.author + "<br>");
      </script>   
   </body>
</html>

輸出

Book name is : Perl 
Book author is : Mohtashim

示例 2

此示例演示瞭如何使用使用者定義的函式建立物件。這裡this關鍵字用於引用已傳遞給函式的物件。

即時演示

<html>
   <head>   
   <title>User-defined objects</title>
      <script type = "text/javascript">
         function book(title, author) {
            this.title = title; 
            this.author  = author;
         }
      </script>      
   </head>
   
   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
      </script>      
   </body>
</html>

輸出

Book title is : Perl 
Book author is : Mohtashim

為物件定義方法

前面的示例演示了建構函式如何建立物件並分配屬性。但我們需要透過為其分配方法來完成物件的定義。

示例

嘗試以下示例；它顯示瞭如何在物件中新增函式。

即時演示

<html>
   
   <head>
   <title>User-defined objects</title>
      <script type = "text/javascript">
         // Define a function which will work as a method
         function addPrice(amount) {
            this.price = amount; 
         }
         
         function book(title, author) {
            this.title = title;
            this.author  = author;
            this.addPrice = addPrice;  // Assign that method as property.
         }
      </script>      
   </head>
   
   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);
         
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>      
   </body>
</html>

輸出

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100

with 關鍵字

‘with’關鍵字用作引用物件屬性或方法的一種簡寫形式。

指定為with引數的物件在後續程式碼塊的持續時間內成為預設物件。物件的屬性和方法可以在不命名物件的情況下使用。

語法

with 物件的語法如下 -

with (object) {
   properties used without the object name and dot
}

示例

嘗試以下示例。

即時演示

<html>
   <head>
   <title>User-defined objects</title>   
      <script type = "text/javascript">
         // Define a function which will work as a method
         function addPrice(amount) {
            with(this) {
               price = amount;
            }
         }
         function book(title, author) {
            this.title = title;
            this.author = author;
            this.price = 0;
            this.addPrice = addPrice;  // Assign that method as property.
         }
      </script>      
   </head>
   
   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);
         
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>      
   </body>
</html>

輸出

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100

JavaScript 原生物件

JavaScript 有幾個內建或原生物件。這些物件可以在您的程式中的任何位置訪問，並且在任何執行在任何作業系統上的瀏覽器中都將以相同的方式工作。

以下是所有重要 JavaScript 原生物件的列表 -

JavaScript - Number 物件

Number物件表示數字資料，可以是整數或浮點數。通常，您不需要擔心Number物件，因為瀏覽器會自動將數字字面量轉換為數字類的例項。

語法

建立number物件的語法如下 -

var val = new Number(number);

如果在數字位置提供任何非數字引數，則該引數無法轉換為數字，它將返回NaN（非數字）。

Number 屬性

以下是每個屬性及其說明的列表。

序號	屬性和說明
1	MAX_VALUE JavaScript 中數字可以具有的最大可能值 1.7976931348623157E+308
2	MIN_VALUE JavaScript 中數字可以具有的最小可能值 5E-324
3	NaN 等於非數字值。
4	NEGATIVE_INFINITY 小於 MIN_VALUE 的值。
5	POSITIVE_INFINITY 大於 MAX_VALUE 的值
6	prototype Number 物件的靜態屬性。使用 prototype 屬性將新屬性和方法分配給當前文件中的 Number 物件
7	constructor 返回建立此物件例項的函式。預設情況下，這是 Number 物件。

在以下部分中，我們將透過一些示例來演示 Number 的屬性。

Number 方法

Number 物件只包含作為每個物件定義一部分的預設方法。

序號	方法及描述
1	toExponential() 強制數字以指數表示法顯示，即使該數字處於 JavaScript 通常使用標準表示法的範圍內。
2	toFixed() 格式化一個數字，使其在小數點右側具有指定位數。
3	toLocaleString() 返回當前數字的字串值版本，其格式可能根據瀏覽器的本地設定而有所不同。
4	toPrecision() 定義要顯示的數字的總位數（包括小數點左側和右側的數字）。
5	toString() 返回數字值的字串表示形式。
6	valueOf() 返回數字的值。

在以下部分，我們將提供一些示例來解釋 Number 的方法。

JavaScript - 布林物件

Boolean 物件表示兩個值，要麼是“true”，要麼是“false”。如果value 引數被省略或為 0、-0、null、false、NaN、undefined 或空字串（""），則該物件最初的值為 false。

語法

使用以下語法建立布林物件。

var val = new Boolean(value);

布林屬性

以下是布林物件屬性的列表：

序號	屬性和說明
1	constructor 返回對建立該物件的 Boolean 函式的引用。
2	prototype prototype 屬性允許您向物件新增屬性和方法。

在以下部分，我們將提供一些示例來說明布林物件的屬性。

布林方法

以下是布林物件的方法及其描述的列表。

序號	方法及描述
1	toSource() 返回一個包含布林物件原始碼的字串；您可以使用此字串建立等效的物件。
2	toString() 返回一個字串，根據物件的值返回“true”或“false”。
3	valueOf() 返回布林物件的原始值。

在以下部分，我們將提供一些示例來演示布林方法的使用。

JavaScript - 字串物件

String 物件允許您使用一系列字元；它使用許多輔助方法包裝 JavaScript 的字串原始資料型別。

由於 JavaScript 會自動在字串原始值和 String 物件之間進行轉換，因此您可以在字串原始值上呼叫 String 物件的任何輔助方法。

語法

使用以下語法建立 String 物件：

var val = new String(string);

String 引數是一系列已正確編碼的字元。

字串屬性

以下是 String 物件的屬性及其描述的列表。

序號	屬性和說明
1	constructor 返回對建立該物件的 String 函式的引用。
2	length 返回字串的長度。
3	prototype prototype 屬性允許您向物件新增屬性和方法。

在以下部分，我們將提供一些示例來演示 String 屬性的使用。

字串方法

以下是 String 物件中可用的方法及其描述的列表。

序號	方法及描述
1	charAt() 返回指定索引處的字元。
2	charCodeAt() 返回一個數字，指示給定索引處的字元的 Unicode 值。
3	concat() 組合兩個字串的文字並返回一個新字串。
4	indexOf() 返回在呼叫 String 物件中指定值的第一次出現的索引，如果未找到則返回 -1。
5	lastIndexOf() 返回在呼叫 String 物件中指定值的最後一次出現的索引，如果未找到則返回 -1。
6	localeCompare() 返回一個數字，指示引用字串在排序順序中是在給定字串之前、之後還是與之相同。
7	match() 用於將正則表示式與字串匹配。
8	replace() 用於查詢正則表示式和字串之間的匹配項，並將匹配的子字串替換為新的子字串。
9	search() 執行在正則表示式和指定字串之間查詢匹配項的操作。
10	slice() 提取字串的一部分並返回一個新字串。
11	split() 透過將字串分成子字串，將 String 物件拆分為字串陣列。
12	substr() 返回從指定位置開始的字串中的字元，直到指定數量的字元。
13	substring() 返回字串中兩個索引之間的字元。
14	toLocaleLowerCase() 字串中的字元轉換為小寫，同時尊重當前區域設定。
15	toLocaleUpperCase() 字串中的字元轉換為大寫，同時尊重當前區域設定。
16	toLowerCase() 返回呼叫字串值轉換為小寫後的結果。
17	toString() 返回表示指定物件的字串。
18	toUpperCase() 返回呼叫字串值轉換為大寫後的結果。
19	valueOf() 返回指定物件的原始值。

字串 HTML 包裝器

以下是返回包含在適當 HTML 標記中的字串副本的方法的列表。

序號	方法及描述
1	anchor() 建立一個用作超文字目標的 HTML 錨點。
2	big() 建立一個以大字型顯示的字串，就像它在<big> 標記中一樣。
3	blink() 建立一個閃爍的字串，就像它在<blink> 標記中一樣。
4	bold() 建立一個以粗體顯示的字串，就像它在<b> 標記中一樣。
5	fixed() 使字串以固定間距字型顯示，就像它在<tt> 標記中一樣。
6	fontcolor() 使字串以指定顏色顯示，就像它在<font color="color"> 標記中一樣。
7	fontsize() 使字串以指定字型大小顯示，就像它在<font size="size"> 標記中一樣。
8	italics() 使字串以斜體顯示，就像它在<i> 標記中一樣。
9	link() 建立一個請求另一個 URL 的 HTML 超文字連結。
10	small() 使字串以小字型顯示，就像它在<small> 標記中一樣。
11	strike() 使字串顯示為刪除線文字，就像它在<strike> 標記中一樣。
12	sub() 使字串顯示為下標，就像它在<sub> 標記中一樣。
13	sup() 使字串顯示為上標，就像它在<sup> 標記中一樣。

在以下部分，我們將提供一些示例來演示 String 方法的使用。

JavaScript - 陣列物件

Array 物件允許您將多個值儲存在一個變數中。它儲存相同型別元素的固定大小的順序集合。陣列用於儲存資料集合，但通常將陣列視為相同型別變數的集合更有用。

語法

使用以下語法建立Array 物件：

var fruits = new Array( "apple", "orange", "mango" );

Array 引數是字串或整數列表。當您使用 Array 建構函式指定單個數字引數時，您指定陣列的初始長度。陣列允許的最大長度為 4,294,967,295。

您可以透過簡單地分配值來建立陣列，如下所示：

var fruits = [ "apple", "orange", "mango" ];

您將使用序數來訪問和設定陣列中的值，如下所示。

fruits[0] is the first element
fruits[1] is the second element
fruits[2] is the third element

陣列屬性

以下是 Array 物件的屬性及其描述的列表。

序號	屬性和說明
1	constructor 返回對建立該物件的陣列函式的引用。
2	index 該屬性表示字串中匹配項的基於零的索引。
3	input 此屬性僅存在於由正則表示式匹配建立的陣列中。
4	length 反映陣列中元素的數量。
5	prototype prototype 屬性允許您向物件新增屬性和方法。

在以下部分，我們將提供一些示例來說明 Array 屬性的使用。

陣列方法

以下是 Array 物件的方法及其描述的列表。

序號	方法及描述
1	concat() 返回一個新陣列，該陣列由將此陣列與其他陣列和/或值連線而成。
2	every() 如果此陣列中的每個元素都滿足提供的測試函式，則返回 true。
3	filter() 建立一個新陣列，其中包含此陣列的所有元素，對於這些元素，提供的過濾函式返回 true。
4	forEach() 為陣列中的每個元素呼叫一個函式。
5	indexOf() 返回陣列中等於指定值的元素的第一個（最小）索引，如果未找到則返回 -1。
6	join() 將陣列的所有元素連線成一個字串。
7	lastIndexOf() 返回陣列中等於指定值的元素的最後一個（最大）索引，如果未找到則返回 -1。
8	map() 建立一個新陣列，其中包含對傳遞給此陣列的每個元素呼叫的函式的結果。
9	pop() 從陣列中刪除最後一個元素並返回該元素。
10	push() 向陣列的末尾新增一個或多個元素，並返回陣列的新長度。
11	reduce() 同時對陣列的兩個值（從左到右）應用函式，以將其減少為單個值。
12	reduceRight() 同時對陣列的兩個值（從右到左）應用函式，以將其減少為單個值。
13	reverse() 反轉陣列元素的順序 - 第一個變為最後一個，最後一個變為第一個。
14	shift() 從陣列中刪除第一個元素並返回該元素。
15	slice() 提取陣列的一部分並返回一個新陣列。
16	some() 如果此陣列中的至少一個元素滿足提供的測試函式，則返回 true。
17	toSource() 表示物件的原始碼。
18	sort() 對陣列的元素進行排序。
19	splice() 向陣列新增和/或從陣列中刪除元素。
20	toString() 返回表示陣列及其元素的字串。
21	unshift() 向陣列的前面新增一個或多個元素，並返回陣列的新長度。

在以下部分，我們將提供一些示例來演示 Array 方法的使用。

JavaScript - 日期物件

Date 物件是內置於 JavaScript 語言中的資料型別。Date 物件使用new Date( ) 建立，如下所示。

建立 Date 物件後，許多方法允許您對其進行操作。大多數方法只是允許您獲取和設定物件的年份、月份、日期、小時、分鐘、秒和毫秒欄位，使用本地時間或 UTC（通用或 GMT）時間。

ECMAScript 標準要求 Date 物件能夠以毫秒精度表示 1970 年 1 月 1 日前後 1 億天內的任何日期和時間。這是一個正負 273,785 年的範圍，因此 JavaScript 可以表示到 275755 年的日期和時間。

語法

您可以使用以下任何語法使用 Date() 建構函式建立 Date 物件。

new Date( )
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])

注意 - 方括號中的引數始終是可選的。

以下是引數的描述：

無引數 - 無引數時，Date() 建構函式建立一個設定為當前日期和時間的 Date 物件。
毫秒數 - 當傳遞一個數字引數時，它被視為日期的內部數字表示形式（以毫秒為單位），如 getTime() 方法返回的那樣。例如，傳遞引數 5000 會建立一個表示 1970 年 1 月 1 日午夜後五秒的日期。
日期字串 - 當傳遞一個字串引數時，它是日期的字串表示形式，格式為 Date.parse() 方法接受的格式。
7 個引數 - 要使用上面顯示的建構函式的最後一種形式。以下是每個引數的描述：

年份 - 表示年份的整數。
月份 - 表示月份的整數，從 0（一月）到 11（十二月）。
日期 - 表示月份中的某一天的整數。
hour − 表示一天中小時數的整數（24 小時制）。
minute − 表示時間讀數中分鐘部分的整數。
second − 表示時間讀數中秒部分的整數。
millisecond − 表示時間讀數中毫秒部分的整數。

日期屬性

以下是 Date 物件的屬性及其說明列表。

序號	屬性和說明
1	constructor 指定建立物件原型的函式。
2	prototype prototype 屬性允許您向物件新增屬性和方法。

在以下部分，我們將提供一些示例來演示不同日期屬性的使用。

日期方法

以下是與Date一起使用的方法及其說明列表。

序號	方法及描述
1	Date() 返回今天的日期和時間。
2	getDate() 根據本地時間返回指定日期的月份中的日期。
3	getDay() 根據本地時間返回指定日期的一週中的日期。
4	getFullYear() 根據本地時間返回指定日期的年份。
5	getHours() 根據本地時間返回指定日期的小時數。
6	getMilliseconds() 根據本地時間返回指定日期的毫秒數。
7	getMinutes() 根據本地時間返回指定日期的分鐘數。
8	getMonth() 根據本地時間返回指定日期的月份。
9	getSeconds() 根據本地時間返回指定日期的秒數。
10	getTime() 返回指定日期的數值，表示自 1970 年 1 月 1 日 00:00:00 UTC 以來經過的毫秒數。
11	getTimezoneOffset() 返回當前區域設定的時區偏移量（以分鐘為單位）。
12	getUTCDate() 根據世界標準時間返回指定日期的月份中的日期。
13	getUTCDay() 根據世界標準時間返回指定日期的一週中的日期。
14	getUTCFullYear() 根據世界標準時間返回指定日期的年份。
15	getUTCHours() 根據世界標準時間返回指定日期的小時數。
16	getUTCMilliseconds() 根據世界標準時間返回指定日期的毫秒數。
17	getUTCMinutes() 根據世界標準時間返回指定日期的分鐘數。
18	getUTCMonth() 根據世界標準時間返回指定日期的月份。
19	getUTCSeconds() 根據世界標準時間返回指定日期的秒數。
20	getYear() 已棄用 - 根據本地時間返回指定日期的年份。請使用 getFullYear 代替。
21	setDate() 根據本地時間設定指定日期的月份中的日期。
22	setFullYear() 根據本地時間設定指定日期的完整年份。
23	setHours() 根據本地時間設定指定日期的小時數。
24	setMilliseconds() 根據本地時間設定指定日期的毫秒數。
25	setMinutes() 根據本地時間設定指定日期的分鐘數。
26	setMonth() 根據本地時間設定指定日期的月份。
27	setSeconds() 根據本地時間設定指定日期的秒數。
28	setTime() 將 Date 物件設定為自 1970 年 1 月 1 日 00:00:00 UTC 以來經過的毫秒數所表示的時間。
29	setUTCDate() 根據世界標準時間設定指定日期的月份中的日期。
30	setUTCFullYear() 根據世界標準時間設定指定日期的完整年份。
31	setUTCHours() 根據世界標準時間設定指定日期的小時數。
32	setUTCMilliseconds() 根據世界標準時間設定指定日期的毫秒數。
33	setUTCMinutes() 根據世界標準時間設定指定日期的分鐘數。
34	setUTCMonth() 根據世界標準時間設定指定日期的月份。
35	setUTCSeconds() 根據世界標準時間設定指定日期的秒數。
36	setYear() 已棄用 - 根據本地時間設定指定日期的年份。請使用 setFullYear 代替。
37	toDateString() 將 Date 的“日期”部分作為人類可讀的字串返回。
38	toGMTString() 已棄用 - 使用 Internet GMT 約定將日期轉換為字串。請使用 toUTCString 代替。
39	toLocaleDateString() 使用當前區域設定的約定將 Date 的“日期”部分作為字串返回。
40	toLocaleFormat() 使用格式字串將日期轉換為字串。
41	toLocaleString() 使用當前區域設定的約定將日期轉換為字串。
42	toLocaleTimeString() 使用當前區域設定的約定將 Date 的“時間”部分作為字串返回。
43	toSource() 返回表示等效 Date 物件源的字串；您可以使用此值建立新物件。
44	toString() 返回表示指定 Date 物件的字串。
45	toTimeString() 將 Date 的“時間”部分作為人類可讀的字串返回。
46	toUTCString() 使用世界標準時間約定將日期轉換為字串。
47	valueOf() 返回 Date 物件的原始值。

使用世界標準時間約定將日期轉換為字串。

Date 靜態方法

除了前面列出的許多例項方法外，Date 物件還定義了兩個靜態方法。這些方法是透過 Date() 建構函式本身呼叫的。

序號	方法及描述
1	Date.parse( ) 解析日期和時間的字串表示形式，並返回該日期的內部毫秒錶示形式。
2	Date.UTC( ) 返回指定 UTC 日期和時間的毫秒錶示形式。

在以下部分，我們將提供一些示例來演示 Date 靜態方法的使用。

JavaScript - Math 物件

math 物件為您提供了數學常數和函式的屬性和方法。與其他全域性物件不同，Math 不是建構函式。Math 的所有屬性和方法都是靜態的，可以透過使用 Math 作為物件來呼叫，而無需建立它。

因此，您可以將常數pi 稱為Math.PI，並將正弦函式稱為Math.sin(x)，其中 x 是方法的引數。

語法

呼叫 Math 屬性和方法的語法如下所示

var pi_val = Math.PI;
var sine_val = Math.sin(30);

Math 屬性

以下是 Math 的所有屬性及其說明列表。

序號	屬性和說明
1	E \ 尤拉常數和自然對數的底數，大約為 2.718。
2	LN2 2 的自然對數，大約為 0.693。
3	LN10 10 的自然對數，大約為 2.302。
4	LOG2E E 的以 2 為底的對數，大約為 1.442。
5	LOG10E E 的以 10 為底的對數，大約為 0.434。
6	PI 圓周與其直徑的比率，大約為 3.14159。
7	SQRT1_2 1/2 的平方根；等效地，1 除以 2 的平方根，大約為 0.707。
8	SQRT2 2 的平方根，大約為 1.414。

在以下部分，我們將提供一些示例來演示 Math 屬性的使用。

Math 方法

以下是與 Math 物件關聯的方法及其說明列表

序號	方法及描述
1	abs() 返回數字的絕對值。
2	acos() 返回數字的反餘弦（以弧度為單位）。
3	asin() 返回數字的反正弦（以弧度為單位）。
4	atan() 返回數字的反正切（以弧度為單位）。
5	atan2() 返回其引數商的反正切。
6	ceil() 返回大於或等於數字的最小整數。
7	cos() 返回數字的餘弦。
8	exp() 返回 E^N，其中 N 是引數，E 是尤拉常數，即自然對數的底數。
9	floor() 返回小於或等於數字的最大整數。
10	log() 返回數字的自然對數（以 E 為底）。
11	max() 返回零個或多個數字中最大的數字。
12	min() 返回零個或多個數字中最小的數字。
13	pow() 返回底數的指數次冪，即底數^指數。
14	random() 返回 0 到 1 之間的偽隨機數。
15	round() 返回四捨五入到最接近整數的數字的值。
16	sin() 返回數字的正弦。
17	sqrt() 返回數字的平方根。
18	tan() 返回數字的正切。
19	toSource() 返回字串“Math”。

在以下部分，我們將提供一些示例來演示與 Math 相關的方法的使用。

正則表示式和 RegExp 物件

正則表示式是一個描述字元模式的物件。

JavaScript 的RegExp 類表示正則表示式，String 和RegExp 都定義了使用正則表示式對文字執行強大的模式匹配和搜尋替換功能的方法。

語法

正則表示式可以使用RegExp ()建構函式定義，如下所示：

var pattern = new RegExp(pattern, attributes);
or simply
var pattern = /pattern/attributes;

以下是引數的說明：

pattern − 指定正則表示式模式的字串或另一個正則表示式。
attributes − 一個可選字串，包含任何“g”、“i”和“m”屬性，分別指定全域性、不區分大小寫和多行匹配。

方括號

方括號([])在正則表示式的上下文中具有特殊含義。它們用於查詢一系列字元。

序號	表示式和說明
1	[...] 方括號之間的任何一個字元。
2	[^...] 方括號之間不存在的任何一個字元。
3	[0-9] 它匹配從 0 到 9 的任何十進位制數字。
4	[a-z] 它匹配從小寫a到小寫z的任何字元。
5	[A-Z] 它匹配從大寫A到大寫Z的任何字元。
6	[a-Z] 它匹配從小寫a到大寫Z的任何字元。

上面顯示的範圍是一般的；您還可以使用範圍[0-3]來匹配從 0 到 3 的任何十進位制數字，或使用範圍[b-v]來匹配從b到v的任何小寫字元。

量詞

括號字元序列和單個字元的頻率或位置可以用特殊字元表示。每個特殊字元都有特定的含義。+、*、?和$標記都跟隨一個字元序列。

序號	表示式和說明
1	p+ 它匹配包含一個或多個p的任何字串。
2	p* 它匹配包含零個或多個p的任何字串。
3	p? 它匹配包含最多一個p的任何字串。
4	p{N} 它匹配包含N個p的序列的任何字串
5	p{2,3} 它匹配包含兩個或三個p的序列的任何字串。
6	p{2, } 它匹配包含至少兩個p的序列的任何字串。
7	p$ 它匹配任何以p結尾的字串。
8	^p 它匹配任何以p開頭的字串。

示例

以下示例更詳細地解釋了字元匹配。

序號	表示式和說明
1	[^a-zA-Z] 它匹配任何不包含從a到z和A到Z的任何字元的字串。
2	p.p 它匹配包含p、後跟任何字元，然後再次後跟另一個p的任何字串。
3	^.{2}$ 它匹配包含正好兩個字元的任何字串。
4	*<b>(.)</b>** 它匹配任何包含在<b>和</b>之間的字串。
5	p(hp)* 它匹配包含p後跟零個或多個hp序列的任何字串。

字面字元

序號	字元 & 描述
1	字母數字自身
2	\0 NUL字元 (\u0000)
3	\t 製表符 (\u0009)
4	\n 換行符 (\u000A)
5	\v 垂直製表符 (\u000B)
6	\f 換頁符 (\u000C)
7	\r 回車符 (\u000D)
8	\xnn 由十六進位制數nn指定的拉丁字元；例如，\x0A與\n相同
9	\uxxxx 由十六進位制數xxxx指定的Unicode字元；例如，\u0009與\t相同
10	\cX 控制字元^X；例如，\cJ等效於換行符\n

元字元

元字元只是一個以反斜槓開頭的字母字元，用於賦予組合特殊的含義。

例如，您可以使用'\d'元字元搜尋一大筆錢：/([\d]+)000/，這裡\d將搜尋任何數字字元的字串。

下表列出了可以在Perl風格正則表示式中使用的一組元字元。

序號	字元 & 描述
1	. 單個字元
2	\s 空白字元（空格、製表符、換行符）
3	\S 非空白字元
4	\d 數字（0-9）
5	\D 非數字
6	\w 單詞字元（a-z、A-Z、0-9、_）
7	\W 非單詞字元
8	[\b] 字面退格符（特殊情況）。
9	[aeiou] 匹配給定集合中的單個字元
10	[^aeiou] 匹配給定集合之外的單個字元
11	(foo\|bar\|baz) 匹配指定的任何備選方案

修飾符

有幾個可用的修飾符可以簡化您使用正則表示式的方式，例如大小寫敏感、多行搜尋等。

序號	修飾符 & 描述
1	i 執行不區分大小寫的匹配。
2	m 指定如果字串包含換行符或回車符，則^和$運算子將匹配換行符邊界，而不是字串邊界
3	g 執行全域性匹配，即查詢所有匹配項，而不是在第一次匹配後停止。

序號

修飾符 & 描述

執行不區分大小寫的匹配。

指定如果字串包含換行符或回車符，則^和$運算子將匹配換行符邊界，而不是字串邊界

執行全域性匹配，即查詢所有匹配項，而不是在第一次匹配後停止。

RegExp 屬性

以下是與RegExp關聯的屬性及其描述列表。

序號	屬性和說明
1	constructor 指定建立物件原型的函式。
2	global 指定是否設定了“g”修飾符。
3	ignoreCase 指定是否設定了“i”修飾符。
4	lastIndex 開始下一次匹配的索引。
5	multiline 指定是否設定了“m”修飾符。
6	source 模式的文字。

在以下部分，我們將提供一些示例來演示RegExp屬性的用法。

RegExp 方法

以下是與RegExp關聯的方法及其描述列表。

序號	方法及描述
1	exec() 在其字串引數中執行匹配搜尋。
2	test() 在其字串引數中測試匹配。
3	toSource() 返回表示指定物件的object literal；您可以使用此值建立新物件。
4	toString() 返回表示指定物件的字串。

在以下部分，我們將提供一些示例來演示RegExp方法的用法。

JavaScript - 文件物件模型或DOM

每個網頁都駐留在瀏覽器視窗內，該視窗可以被視為一個物件。

Document物件表示在該視窗中顯示的HTML文件。Document物件具有各種屬性，這些屬性引用其他物件，這些物件允許訪問和修改文件內容。

訪問和修改文件內容的方式稱為文件物件模型或DOM。物件以層次結構組織。這種層次結構適用於Web文件中物件的組織。

Window物件 - 層次結構的頂部。它是物件層次結構的最外層元素。
Document物件 - 載入到視窗中的每個HTML文件都成為一個Document物件。文件包含頁面的內容。
Form物件 - 包含在<form>...</form>標記中的所有內容都設定Form物件。
表單控制元件元素 - Form物件包含為該物件定義的所有元素，例如文字欄位、按鈕、單選按鈕和複選框。

這是一個幾個重要物件的簡單層次結構 -

存在多個DOM。以下部分詳細解釋了每個DOM，並描述瞭如何使用它們來訪問和修改文件內容。

傳統DOM - 這是在早期版本的JavaScript語言中引入的模型。它得到所有瀏覽器的良好支援，但僅允許訪問文件的某些關鍵部分，例如表單、表單元素和影像。
W3C DOM - 此文件物件模型允許訪問和修改所有文件內容，並由全球資訊網聯盟（W3C）標準化。此模型幾乎得到所有現代瀏覽器的支援。
IE4 DOM - 此文件物件模型是在Microsoft Internet Explorer瀏覽器的版本4中引入的。IE 5及更高版本包含對大多數基本W3C DOM功能的支援。

DOM相容性

如果要編寫一個指令碼，使其能夠根據可用性使用W3C DOM或IE 4 DOM，則可以使用功能測試方法，該方法首先檢查方法或屬性的存在以確定瀏覽器是否具有所需的功能。例如 -

if (document.getElementById) {
   // If the W3C method exists, use it
} else if (document.all) {
   // If the all[] array exists, use it
} else {
   // Otherwise use the legacy DOM
}

JavaScript - 錯誤 & 異常處理

程式設計中有三種類型的錯誤：(a) 語法錯誤，(b) 執行時錯誤和 (c) 邏輯錯誤。

語法錯誤

語法錯誤，也稱為解析錯誤，在傳統的程式語言中發生在編譯時，在JavaScript中發生在解釋時。

例如，以下行會導致語法錯誤，因為它缺少右括號。

<script type = "text/javascript">
   <!--
      window.print(;
   //-->
</script>

當JavaScript中發生語法錯誤時，只有包含在與語法錯誤相同執行緒中的程式碼會受到影響，其他執行緒中的其餘程式碼將繼續執行，假設它們中沒有任何內容依賴於包含錯誤的程式碼。

執行時錯誤

執行時錯誤，也稱為異常，發生在執行期間（編譯/解釋之後）。

例如，以下行會導致執行時錯誤，因為這裡的語法是正確的，但在執行時，它試圖呼叫一個不存在的方法。

<script type = "text/javascript">
   <!--
      window.printme();
   //-->
</script>

異常也會影響發生它們的執行緒，允許其他JavaScript執行緒繼續正常執行。

邏輯錯誤

邏輯錯誤可能是最難追蹤的錯誤型別。這些錯誤不是語法或執行時錯誤的結果。相反，當您在驅動指令碼的邏輯中犯錯並且沒有得到預期的結果時，就會發生這些錯誤。

您無法捕獲這些錯誤，因為這取決於您的業務需求，您希望在程式中使用哪種型別的邏輯。

try...catch...finally語句

最新版本的JavaScript添加了異常處理功能。JavaScript實現了try...catch...finally結構以及throw運算子來處理異常。

您可以捕獲程式設計師生成的和執行時異常，但您無法捕獲JavaScript語法錯誤。

以下是try...catch...finally塊的語法 -

<script type = "text/javascript">
   <!--
      try {
         // Code to run
         [break;]
      } 
      
      catch ( e ) {
         // Code to run if an exception occurs
         [break;]
      }
      
      [ finally {
         // Code that is always executed regardless of 
         // an exception occurring
      }]
   //-->
</script>

try塊後面必須緊跟一個catch塊或一個finally塊（或兩者之一）。當try塊中發生異常時，異常將放置在e中，並執行catch塊。可選的finally塊在try/catch之後無條件執行。

示例

這是一個示例，我們試圖呼叫一個不存在的函式，該函式反過來會引發異常。讓我們看看在沒有try...catch的情況下它的行為如何 -

即時演示

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               alert("Value of variable a is : " + a );
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>      
   </body>
</html>

輸出

現在讓我們嘗試使用try...catch捕獲此異常並顯示一條使用者友好的訊息。如果要隱藏此錯誤，您也可以抑制此訊息。

即時演示

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               try {
                  alert("Value of variable a is : " + a );
               } 
               catch ( e ) {
                  alert("Error: " + e.description );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

輸出

您可以使用finally塊，它將在try/catch之後始終無條件執行。這是一個示例。

即時演示

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               
               try {
                  alert("Value of variable a is : " + a );
               }
               catch ( e ) {
                  alert("Error: " + e.description );
               }
               finally {
                  alert("Finally block will always execute!" );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

輸出

throw語句

您可以使用throw語句引發內建異常或自定義異常。稍後可以捕獲這些異常，您可以採取適當的操作。

示例

以下示例演示瞭如何使用throw語句。

即時演示

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               var b = 0;
               
               try {
                  if ( b == 0 ) {
                     throw( "Divide by zero error." ); 
                  } else {
                     var c = a / b;
                  }
               }
               catch ( e ) {
                  alert("Error: " + e );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

輸出

您可以使用字串、整數、布林值或物件在一個函式中引發異常，然後您可以在與上面相同的函式中捕獲該異常，或者在另一個函式中使用try...catch塊捕獲該異常。

onerror() 方法

onerror 事件處理程式是 JavaScript 中第一個促進錯誤處理的功能。每當頁面上發生異常時，就會在視窗物件上觸發error 事件。

即時演示

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            window.onerror = function () {
               alert("An error occurred.");
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

輸出

onerror 事件處理程式提供三條資訊來識別錯誤的確切性質：

錯誤訊息 - 瀏覽器為給定錯誤顯示的相同訊息
URL - 發生錯誤的檔案
行號 - 給定 URL 中導致錯誤的行號

以下示例演示如何提取這些資訊。

示例

即時演示

<html>
   <head>
   
      <script type = "text/javascript">
         <!--
            window.onerror = function (msg, url, line) {
               alert("Message : " + msg );
               alert("url : " + url );
               alert("Line number : " + line );
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

輸出

您可以以您認為更好的任何方式顯示提取的資訊。

如果載入影像時出現任何問題，您可以使用如下所示的onerror方法顯示錯誤訊息。

<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />

您可以將onerror與許多 HTML 標籤一起使用，以便在發生錯誤時顯示相應的提示訊息。

JavaScript - 表單驗證

表單驗證通常在伺服器端進行，在客戶端輸入所有必要資料並按下提交按鈕後。如果客戶端輸入的資料不正確或丟失，伺服器將不得不將所有資料傳送回客戶端，並請求使用正確的資訊重新提交表單。這確實是一個漫長的過程，給伺服器帶來了很大的負擔。

JavaScript 提供了一種在將表單資料傳送到 Web 伺服器之前在客戶端計算機上驗證表單資料的方法。表單驗證通常執行兩個功能。

基本驗證 - 首先，必須檢查表單以確保所有必填欄位都已填寫。這隻需要迴圈遍歷表單中的每個欄位並檢查資料。
資料格式驗證 - 其次，必須檢查輸入的資料是否格式和值正確。您的程式碼必須包含適當的邏輯來測試資料的正確性。

示例

我們將舉一個例子來理解驗證的過程。這是一個簡單的 HTML 格式表單。

即時演示

<html>   
   <head>
      <title>Form Validation</title>      
      <script type = "text/javascript">
         <!--
            // Form validation code will come here.
         //-->
      </script>      
   </head>
   
   <body>
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
         <table cellspacing = "2" cellpadding = "2" border = "1">
            
            <tr>
               <td align = "right">Name</td>
               <td><input type = "text" name = "Name" /></td>
            </tr>
            
            <tr>
               <td align = "right">EMail</td>
               <td><input type = "text" name = "EMail" /></td>
            </tr>
            
            <tr>
               <td align = "right">Zip Code</td>
               <td><input type = "text" name = "Zip" /></td>
            </tr>
            
            <tr>
               <td align = "right">Country</td>
               <td>
                  <select name = "Country">
                     <option value = "-1" selected>[choose yours]</option>
                     <option value = "1">USA</option>
                     <option value = "2">UK</option>
                     <option value = "3">INDIA</option>
                  </select>
               </td>
            </tr>
            
            <tr>
               <td align = "right"></td>
               <td><input type = "submit" value = "Submit" /></td>
            </tr>
            
         </table>
      </form>      
   </body>
</html>

輸出

基本表單驗證

首先讓我們看看如何進行基本表單驗證。在上面的表單中，當發生onsubmit事件時，我們呼叫validate()來驗證資料。以下程式碼顯示了此 validate() 函式的實現。

<script type = "text/javascript">
   <!--
      // Form validation code will come here.
      function validate() {
      
         if( document.myForm.Name.value == "" ) {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         if( document.myForm.EMail.value == "" ) {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
            document.myForm.Zip.value.length != 5 ) {
            
            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         if( document.myForm.Country.value == "-1" ) {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }
   //-->
</script>

資料格式驗證

現在我們將瞭解如何在將輸入的表單資料提交到 Web 伺服器之前驗證它。

以下示例演示如何驗證輸入的電子郵件地址。電子郵件地址必須至少包含一個“@”符號和一個點 (.)。此外，“@”不能是電子郵件地址的第一個字元，最後一個點必須至少在“@”符號之後一個字元。

示例

嘗試以下用於電子郵件驗證的程式碼。

<script type = "text/javascript">
   <!--
      function validateEmail() {
         var emailID = document.myForm.EMail.value;
         atpos = emailID.indexOf("@");
         dotpos = emailID.lastIndexOf(".");
         
         if (atpos < 1 || ( dotpos - atpos < 2 )) {
            alert("Please enter correct email ID")
            document.myForm.EMail.focus() ;
            return false;
         }
         return( true );
      }
   //-->
</script>

JavaScript - 動畫

您可以使用 JavaScript 建立一個複雜的動畫，其中包含但不限於以下元素：

煙花
淡入淡出效果
捲入或卷出
頁面進入或頁面退出
物件移動

您可能對現有的基於 JavaScript 的動畫庫感興趣：Script.Aculo.us。

本教程提供了一個關於如何使用 JavaScript 建立動畫的基本理解。

JavaScript 可用於根據由邏輯方程或函式確定的某種模式，在頁面周圍移動多個 DOM 元素（<img />、<div> 或任何其他 HTML 元素）。

JavaScript 提供以下兩個函式，這些函式在動畫程式中經常使用。

setTimeout( function, duration) - 此函式在距現在duration毫秒後呼叫function。
setInterval(function, duration) - 此函式每隔duration毫秒呼叫function。
clearTimeout(setTimeout_variable) - 此函式呼叫清除由 setTimeout() 函式設定的任何計時器。

JavaScript 還可以設定 DOM 物件的許多屬性，包括其在螢幕上的位置。您可以設定物件的top和 left 屬性以將其定位在螢幕上的任何位置。以下是其語法。

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or

// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

手動動畫

因此，讓我們使用 DOM 物件屬性和 JavaScript 函式實現一個簡單的動畫，如下所示。以下列表包含不同的 DOM 方法。

我們使用 JavaScript 函式getElementById()獲取 DOM 物件，然後將其分配給全域性變數imgObj。
我們定義了一個初始化函式init()來初始化imgObj，其中我們設定了它的position和left屬性。
我們在視窗載入時呼叫初始化函式。
最後，我們呼叫moveRight()函式將左側距離增加 10 畫素。您也可以將其設定為負值以將其移動到左側。

示例

嘗試以下示例。

即時演示

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
            }
            
            window.onload = init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click button below to move the image to right</p>
         <input type = "button" value = "Click Me" onclick = "moveRight();" />
      </form>      
   </body>
</html>

輸出

自動化動畫

在上面的示例中，我們看到了影像如何隨著每次點擊向右移動。我們可以使用 JavaScript 函式setTimeout()來自動執行此過程，如下所示：

我們添加了更多方法。因此，讓我們看看這裡有什麼新內容：

moveRight()函式呼叫setTimeout()函式來設定imgObj的位置。
我們添加了一個新函式stop()來清除setTimeout()函式設定的計時器，並將物件設定為其初始位置。

示例

嘗試以下示例程式碼。

即時演示

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            var animate ;
            
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,20);    // call moveRight in 20msec
            }
            function stop() {
               clearTimeout(animate);
               imgObj.style.left = '0px'; 
            }
            
            window.onload = init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click the buttons below to handle animation</p>
         <input type = "button" value = "Start" onclick = "moveRight();" />
         <input type = "button" value = "Stop" onclick = "stop();" />
      </form>      
   </body>
</html>

滑鼠事件的懸停

這是一個簡單的示例，顯示了使用滑鼠事件的影像懸停。

讓我們看看我們在以下示例中使用了什麼：

在載入此頁面時，“if”語句檢查影像物件是否存在。如果影像物件不可用，則不會執行此程式碼塊。
Image()建構函式建立並預載入一個名為image1的新影像物件。
src 屬性被分配給名為 /images/html.gif 的外部影像檔案。
類似地，我們建立了image2物件並在該物件中分配了/images/http.gif。
#（井號）停用連結，以便瀏覽器在單擊時不會嘗試轉到 URL。此連結是影像。
當用戶滑鼠移到連結上時，將觸發onMouseOver事件處理程式，當用戶滑鼠移開連結（影像）時，將觸發onMouseOut事件處理程式。
當滑鼠移到影像上時，HTTP 影像從第一個影像更改為第二個影像。當滑鼠從影像移開時，將顯示原始影像。
當滑鼠從連結移開時，初始影像 html.gif 將重新出現在螢幕上。

即時演示

<html>
   
   <head>
      <title>Rollover with a Mouse Events</title>
      
      <script type = "text/javascript">
         <!--
            if(document.images) {
               var image1 = new Image();     // Preload an image
               image1.src = "/images/html.gif";
               var image2 = new Image();     // Preload second image
               image2.src = "/images/http.gif";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>Move your mouse over the image to see the result</p>
      
      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"
         onMouseOut = "document.myImage.src = image1.src;">
         <img name = "myImage" src = "/images/html.gif" />
      </a>
   </body>
</html>

JavaScript - 多媒體

JavaScript 的navigator物件包含一個名為plugins的子物件。此物件是一個數組，每個瀏覽器中安裝的每個外掛都有一個條目。navigator.plugins 物件僅受 Netscape、Firefox 和 Mozilla 支援。

示例

以下示例演示如何列出瀏覽器中安裝的所有外掛：

即時演示

<html>
   <head>
      <title>List of Plug-Ins</title>
   </head>
   
   <body>
      <table border = "1">
         <tr>
            <th>Plug-in Name</th>
            <th>Filename</th>
            <th>Description</th>
         </tr>
         
         <script language = "JavaScript" type = "text/javascript">
            for (i = 0; i<navigator.plugins.length; i++) {
               document.write("<tr><td>");
               document.write(navigator.plugins[i].name);
               document.write("</td><td>");
               document.write(navigator.plugins[i].filename);
               document.write("</td><td>");
               document.write(navigator.plugins[i].description);
               document.write("</td></tr>");
            }
         </script>
      </table>      
   </body>
</html>

輸出

檢查外掛

每個外掛在陣列中都有一個條目。每個條目都有以下屬性：

name - 是外掛的名稱。
filename - 是載入以安裝外掛的可執行檔案。
description - 是外掛的描述，由開發人員提供。
mimeTypes - 是一個數組，其中包含外掛支援的每個 MIME 型別的一個條目。

您可以在指令碼中使用這些屬性來找出已安裝的外掛，然後使用 JavaScript 播放相應的媒體檔案。請檢視以下示例。

<html>   
   <head>
      <title>Using Plug-Ins</title>
   </head>
   
   <body>   
      <script language = "JavaScript" type = "text/javascript">
         media = navigator.mimeTypes["video/quicktime"];
         
         if (media) {
            document.write("<embed src = 'quick.mov' height = 100 width = 100>");
         } else {
            document.write("<img src = 'quick.gif' height = 100 width = 100>");
         }
      </script>      
   </body>
</html>

輸出

注意 - 這裡我們使用 HTML <embed> 標籤來嵌入多媒體檔案。

控制多媒體

讓我們舉一個在幾乎所有瀏覽器中都能正常工作的實際例子：

即時演示

<html>   
   <head>
      <title>Using Embeded Object</title>
      
      <script type = "text/javascript">
         <!--
            function play() {
               if (!document.demo.IsPlaying()) {
                  document.demo.Play();
               }
            }
            function stop() {
               if (document.demo.IsPlaying()) {
                  document.demo.StopPlay();
               }
            }
            function rewind() {
               if (document.demo.IsPlaying()) {
                  document.demo.StopPlay();
               }
               document.demo.Rewind();
            }
         //-->
      </script>
   </head>
   
   <body>      
      <embed id = "demo" name = "demo"
         src = "http://www.amrood.com/games/kumite.swf"
         width = "318" height = "300" play = "false" loop = "false"
         pluginspage = "http://www.macromedia.com/go/getflashplayer"
         swliveconnect = "true">
      
      <form name = "form" id = "form" action = "#" method = "get">
         <input type = "button" value = "Start" onclick = "play();" />
         <input type = "button" value = "Stop" onclick = "stop();" />
         <input type = "button" value = "Rewind" onclick = "rewind();" />
      </form>      
   </body>
</html>

輸出

如果您使用的是 Mozilla、Firefox 或 Netscape，則

JavaScript - 除錯

開發人員在編碼時偶爾會犯錯誤。程式或指令碼中的錯誤稱為bug。

查詢和修復錯誤的過程稱為除錯，是開發過程的正常部分。本節介紹可以幫助您完成除錯任務的工具和技術。

IE 中的錯誤訊息

跟蹤錯誤的最基本方法是在瀏覽器中開啟錯誤資訊。預設情況下，當頁面上發生錯誤時，Internet Explorer 會在狀態列中顯示一個錯誤圖示。

雙擊此圖示將帶您到一個對話方塊，其中顯示有關發生的特定錯誤的資訊。

由於此圖示很容易被忽略，因此 Internet Explorer 提供了在每次發生錯誤時自動顯示錯誤對話方塊的選項。

要啟用此選項，請選擇工具→Internet 選項→高階選項卡，然後最後選中“顯示有關每個指令碼錯誤的通知”複選框選項，如下所示：

Firefox 或 Mozilla 中的錯誤訊息

其他瀏覽器（如 Firefox、Netscape 和 Mozilla）會將錯誤訊息傳送到一個名為JavaScript 控制檯或錯誤控制檯的特殊視窗。要檢視控制檯，請選擇工具→錯誤控制檯或 Web 開發。

不幸的是，由於這些瀏覽器在發生錯誤時不會給出任何視覺指示，因此您必須保持控制檯開啟並監視指令碼執行過程中的錯誤。

錯誤通知

在控制檯上或透過 Internet Explorer 對話方塊顯示的錯誤通知是語法錯誤和執行時錯誤的結果。這些錯誤通知包括髮生錯誤的行號。

如果您使用的是 Firefox，則可以單擊錯誤控制檯中提供的錯誤以轉到指令碼中包含錯誤的確切行。

如何除錯指令碼

有多種方法可以除錯您的 JavaScript：

使用 JavaScript 驗證器

檢查 JavaScript 程式碼中是否存在奇怪錯誤的一種方法是將其透過一個程式執行，該程式會檢查它以確保它是有效的，並且遵循該語言的官方語法規則。這些程式稱為驗證解析器或簡稱驗證器，通常與商業 HTML 和 JavaScript 編輯器一起提供。

JavaScript 最方便的驗證器是 Douglas Crockford 的 JavaScript Lint，它可在 Douglas Crockford 的 JavaScript Lint 上免費獲得。

只需訪問該網頁，將您的 JavaScript（僅 JavaScript）程式碼貼上到提供的文字區域中，然後單擊 jslint 按鈕。此程式將解析您的 JavaScript 程式碼，確保所有變數和函式定義都遵循正確的語法。它還將檢查 JavaScript 語句（例如 if 和while），以確保它們也遵循正確的格式。

向程式新增除錯程式碼

您可以在程式中使用alert()或document.write()方法來除錯程式碼。例如，您可能會編寫如下內容：

var debugging = true;
var whichImage = "widget";

if( debugging )
   alert( "Calls swapImage() with argument: " + whichImage );
   var swapStatus = swapImage( whichImage );

if( debugging )
   alert( "Exits swapImage() with swapStatus=" + swapStatus );

透過檢查alert()的內容和順序，您可以非常輕鬆地檢查程式的執行狀況。

使用 JavaScript 偵錯程式

偵錯程式是一個應用程式，它將指令碼執行的所有方面都置於程式設計師的控制之下。偵錯程式透過一個介面提供對指令碼狀態的細粒度控制，允許您檢查和設定值以及控制執行流程。

一旦指令碼載入到偵錯程式中，就可以一行一行地執行，或者指示它在某些斷點處停止。一旦執行停止，程式設計師就可以檢查指令碼及其變數的狀態，以確定是否有問題。您還可以監視變數的值變化。

Mozilla JavaScript 偵錯程式（代號為 Venkman）的最新版本，適用於 Mozilla 和 Netscape 瀏覽器，可以從 http://www.hacksrus.com/~ginda/venkman 下載

開發者實用技巧

您可以牢記以下技巧，以減少指令碼中的錯誤數量並簡化除錯過程 -

使用大量的註釋。註釋使您能夠解釋編寫指令碼的原因以及解釋程式碼中特別困難的部分。
始終使用縮排使您的程式碼易於閱讀。縮排語句還可以讓您更輕鬆地匹配開始和結束標籤、花括號和其他 HTML 和指令碼元素。
編寫模組化程式碼。儘可能將語句分組到函式中。函式允許您將相關語句分組，並以最小的努力測試和重用程式碼部分。
在命名變數和函式的方式上保持一致。嘗試使用足夠長的名稱，這些名稱具有意義並描述變數的內容或函式的用途。
在命名變數和函式時使用一致的語法。換句話說，全部使用小寫或全部使用大寫；如果您更喜歡駝峰式命名法，請始終如一地使用它。
測試長指令碼的方式應採用模組化方式。換句話說，不要嘗試在測試任何部分之前編寫整個指令碼。編寫一部分並使其工作，然後再新增下一部分程式碼。
使用描述性變數和函式名稱，並避免使用單字元名稱。
注意您的引號。請記住，引號成對使用，用於括起字串，並且兩個引號必須是相同的樣式（單引號或雙引號）。
注意您的等號。您不應將單個 = 用於比較目的。
使用var關鍵字顯式宣告變數。

JavaScript - 圖片地圖

您可以使用 JavaScript 建立客戶端影像對映。客戶端影像對映由 <img /> 標籤的usemap屬性啟用，並由特殊的 <map> 和 <area> 擴充套件標籤定義。

將形成地圖的影像以通常的方式插入頁面，使用 <img /> 元素，除了它帶有稱為usemap的額外屬性。usemap 屬性的值是您即將看到的 <map> 元素的 name 屬性的值，前面帶有井號或雜湊符號。

<map> 元素實際上為影像建立了地圖，並且通常緊跟在 <img /> 元素之後。它充當 <area /> 元素的容器，這些元素實際上定義了可點選的熱點。<map> 元素僅帶有一個屬性，即name屬性，它是標識地圖的名稱。這就是 <img /> 元素如何知道要使用哪個 <map> 元素。

<area> 元素指定定義每個可點選熱點的邊界的形狀和座標。

以下程式碼結合了影像對映和 JavaScript，當滑鼠移動到影像的不同部分時，在文字框中生成訊息。

即時演示

<html>   
   <head>
      <title>Using JavaScript Image Map</title>
      
      <script type = "text/javascript">
         <!--
            function showTutorial(name) {
               document.myform.stage.value = name
            }
         //-->
      </script>
   </head>
   
   <body>
      <form name = "myform">
         <input type = "text" name = "stage" size = "20" />
      </form>
      
      <!-- Create  Mappings -->
      <img src = "/images/usemap.gif" alt = "HTML Map" border = "0" usemap = "#tutorials"/>
      
      <map name = "tutorials">
         <area shape="poly" 
            coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" alt = "Perl Tutorial"
            target = "_self" 
            onMouseOver = "showTutorial('perl')" 
            onMouseOut = "showTutorial('')"/>
         
         <area shape = "rect" 
            coords = "22,83,126,125"
            href = "/html/index.htm" alt = "HTML Tutorial" 
            target = "_self" 
            onMouseOver = "showTutorial('html')" 
            onMouseOut = "showTutorial('')"/>
         
         <area shape = "circle" 
            coords = "73,168,32"
            href = "/php/index.htm" alt = "PHP Tutorial"
            target = "_self" 
            onMouseOver = "showTutorial('php')" 
            onMouseOut = "showTutorial('')"/>
      </map>
   </body>
</html>

輸出

您可以透過將滑鼠游標放在影像物件上來感受地圖的概念。

JavaScript - 瀏覽器相容性

瞭解不同瀏覽器之間的差異以處理每個瀏覽器的方式非常重要。因此，瞭解您的網頁正在執行的瀏覽器非常重要。

要獲取有關網頁當前正在執行的瀏覽器的資訊，請使用內建的navigator物件。

Navigator 屬性

在您的網頁中，您可以使用多個與 Navigator 相關的屬性。以下是每個屬性的名稱和描述列表。

序號	屬性和說明
1	appCodeName 此屬性是一個字串，包含瀏覽器的代號，Netscape 用於 Netscape，Microsoft Internet Explorer 用於 Internet Explorer。
2	appVersion 此屬性是一個字串，包含瀏覽器的版本以及其他有用資訊，例如其語言和相容性。
3	language 此屬性包含瀏覽器使用的語言的兩位字母縮寫。僅限 Netscape。
4	mimTypes[] 此屬性是一個數組，包含客戶端支援的所有 MIME 型別。僅限 Netscape。
5	platform[] 此屬性是一個字串，包含為其編譯瀏覽器的平臺。“Win32”用於 32 位 Windows 作業系統
6	plugins[] 此屬性是一個數組，包含已安裝在客戶端上的所有外掛。僅限 Netscape。
7	userAgent[] 此屬性是一個字串，包含瀏覽器的代號和版本。此值傳送到源伺服器以識別客戶端。

Navigator 方法

有幾個特定於 Navigator 的方法。以下是它們的名稱和描述列表。

序號	描述
1	javaEnabled() 此方法確定客戶端是否啟用了 JavaScript。如果啟用了 JavaScript，則此方法返回 true；否則，返回 false。
2	plugings.refresh 此方法使新安裝的外掛可用，並使用所有新的外掛名稱填充 plugins 陣列。僅限 Netscape。
3	preference(name,value) 此方法允許簽名指令碼獲取和設定一些 Netscape 首選項。如果省略第二個引數，則此方法將返回指定首選項的值；否則，它將設定該值。僅限 Netscape。
4	taintEnabled() 如果啟用了資料汙染，則此方法返回 true；否則返回 false。

瀏覽器檢測

有一個簡單的 JavaScript 可以用來找出瀏覽器的名稱，然後相應地為使用者提供 HTML 頁面。

即時演示

<html>   
   <head>
      <title>Browser Detection Example</title>
   </head>
   
   <body>      
      <script type = "text/javascript">
         <!--
            var userAgent   = navigator.userAgent;
            var opera       = (userAgent.indexOf('Opera') != -1);
            var ie          = (userAgent.indexOf('MSIE') != -1);
            var gecko       = (userAgent.indexOf('Gecko') != -1);
            var netscape    = (userAgent.indexOf('Mozilla') != -1);
            var version     = navigator.appVersion;
            
            if (opera) {
               document.write("Opera based browser");
               // Keep your opera specific URL here.
            } else if (gecko) {
               document.write("Mozilla based browser");
               // Keep your gecko specific URL here.
            } else if (ie) {
               document.write("IE based browser");
               // Keep your IE specific URL here.
            } else if (netscape) {
               document.write("Netscape based browser");
               // Keep your Netscape specific URL here.
            } else {
               document.write("Unknown browser");
            }
            
            // You can include version to along with any above condition.
            document.write("<br /> Browser version info : " + version );
         //-->
      </script>      
   </body>
</html>

輸出

列印頁面

JavaScript 快速指南

JavaScript - 概述

什麼是 JavaScript？

客戶端 JavaScript

JavaScript 的優點

JavaScript 的侷限性

JavaScript 開發工具

JavaScript 的現狀如何？

JavaScript - 語法

您的第一個 JavaScript 程式碼

空白字元和換行符

分號是可選的

大小寫敏感

JavaScript 中的註釋

示例

在瀏覽器中啟用 JavaScript

Internet Explorer 中的 JavaScript

Firefox 中的 JavaScript

Chrome 中的 JavaScript

Opera 中的 JavaScript

針對非 JavaScript 瀏覽器的警告

JavaScript - 在 HTML 檔案中的位置

在<head>...</head>部分中的 JavaScript

在<body>...</body>部分中的 JavaScript

在<body>和<head>部分中的 JavaScript

外部檔案中的 JavaScript

JavaScript - 變數

JavaScript 資料型別

JavaScript 變數

JavaScript 變數作用域

JavaScript 變數命名

JavaScript 保留字

JavaScript - 運算子

什麼是運算子？

算術運算子

示例

輸出

比較運算子

示例

輸出

邏輯運算子

示例

輸出

位運算子

示例

賦值運算子

示例

輸出

其他運算子

條件運算子 (? :)

示例

輸出

typeof 運算子

示例

輸出

JavaScript - if...else 語句

if-else 流程圖

if 語句

語法

示例

輸出

if...else 語句

語法

示例

輸出

if...else if... 語句

語法

示例

輸出

JavaScript - Switch Case

流程圖

語法

示例

輸出

輸出

JavaScript - while 迴圈

while 迴圈

流程圖

語法

示例