JavaScript

在數百萬張頁面中,JavaScript 被用來改進設計、驗證表單、檢測瀏覽器、創建cookies,等等等等。

JavaScript 是因特網上最流行的腳本語言,並且可在所有主要的瀏覽器中運行,比方說 Internet Explorer MozillaFirefoxNetscape、和 Opera

你應該具備的基礎知識:

在繼續學習前,你應該對以下知識有基本的瞭解:

·  HTML

·  XHTML

如果你希望首先學習這些內容,請在 首頁 訪問相關教程。

什麼是 JavaScript

·        JavaScript 被設計用來向 HTML 頁面添加交互行爲。

·        JavaScript 是一種腳本語言(腳本語言是一種輕量級的編程語言)。

·        JavaScript 由數行可執行計算機代碼組成。

·        JavaScript 通常被直接嵌入 HTML 頁面。

·        JavaScript 是一種解釋性語言(就是說,代碼執行不進行預編譯)。

·        所有的人無需購買許可證均可使用 JavaScript

Java JavaScript 是相同的嗎?

不同!

在概念和設計方面,Java JavaScript 是兩種完全不同的語言。

Java(由太陽微系統公司開發)很強大,同時也是更復雜的編程語言,就像同級別的 C C++

JavaScript 能做什麼?

JavaScript HTML 設計師提供了一種編程工具

HTML 創作者往往都不是程序員,但是 JavaScript 卻是一種只擁有極其簡單的語法的腳本語言!幾乎每個人都有能力將短小的代碼片斷放入他們的 HTML 頁面當中。

JavaScript 可以將動態的文本放入 HTML 頁面

類似於這樣的一段 JavaScript 聲明可以將一段可變的文本放入 HTML 頁面:document.write("<h1>" + name + "</h1>")

JavaScript 可以對事件作出響應

可以將 JavaScript 設置爲當某事件發生時纔會被執行,例如頁面載入完成或者當用戶點擊某個 HTML 元素時。

JavaScript 可以讀寫 HTML 元素

JavaScript 可以讀取及改變 HTML 元素的內容。

JavaScript 可被用來驗證數據

在數據被提交到服務器之前,JavaScript可被用來驗證這些數據。

JavaScript 可被用來檢測訪問者的瀏覽器

JavaScript 可被用來檢測訪問者的瀏覽器,並根據所檢測到的瀏覽器,爲這個瀏覽器載入相應的頁面。

JavaScript 可被用來創建 cookies

JavaScript 可被用來存儲和取回位於訪問者的計算機中的信息。

真實的名稱是 ECMAScript

JavaScript 的正式名稱是 "ECMAScript"。這個標準由 ECMA 組織發展和維護。

ECMA-262 是正式的 JavaScript 標準。這個標準基於 JavaScript (Netscape) JScript (Microsoft)

Netscape (Navigator 2.0) Brendan Eich 發明了這門語言,從 1996 年開始,已經出現在所有的 Netscape Microsoft 瀏覽器中。

ECMA-262 的開發始於 1996 年,在 1997 7 月,ECMA 會員大會採納了它的首個版本。

1998 年,該標準成爲了國際 ISO 標準 (ISO/IEC 16262)

這個標準仍然處於發展之中。

HTML <script> 標籤用於把 JavaScript 插入 HTML 頁面當中。

實例

生成文本

如何在頁面中寫文本

生成普通文本和標籤

如何使用 JavaScript 在頁面中寫入普通文本和標籤。

如何把 JavaScript 放入 HTML 頁面

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

上面的代碼會在 HTML 頁面中產生這樣的輸出:

Hello World! 

實例解釋:

如果需要把一段 JavaScript 插入 HTML 頁面,我們需要使用 <script> 標籤(同時使用 type 屬性來定義腳本語言)。

這樣,<scripttype="text/javascript"> </script> 就可以告訴瀏覽器 JavaScript 從何處開始,到何處結束。

<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>

document.write 字段是標準的 JavaScript 命令,用來向頁面寫入輸出。

document.write 命令輸入到 <scripttype="text/javascript"></script>之間後,瀏覽器就會把它當作一條 JavaScript 命令來執行。這樣瀏覽器就會向頁面寫入 "HelloWorld!"

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

TIY

注意:如果我們不使用 <script> 標籤,瀏覽器就會把 document.write("HelloWorld!") 當作純文本來處理,也就是說會把這條命令本身寫到頁面上。

TIY

如何與老的瀏覽器打交道

那些不支持 JavaScript 的瀏覽器會把腳本作爲頁面的內容來顯示。爲了防止這種情況發生,我們可以使用這樣的 HTML 註釋標籤:

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

註釋行末尾的兩個正斜槓是 JavaScript 的註釋符號,它會阻止 JavaScript 編譯器對這一行的編譯。

當頁面載入時,會執行位於 body 部分的 JavaScript

當被調用時,位於 head 部分的 JavaScript 纔會被執行。

實例

head 部分

包含函數的腳本位於文檔的 head 部分。這樣我們就可以確保在調用函數前,腳本已經載入了。

body 部分

執行位於 body 部分的腳本。

外部 JavaScript

如何訪問外部腳本。

在哪裏放置 JavaScript

頁面中的腳本會在頁面載入瀏覽器後立即執行。我們並不總希望這樣。有時,我們希望當頁面載入時執行腳本,而另外的時候,我們則希望當用戶觸發事件時才執行腳本。

位於 head 部分的腳本:

當腳本被調用時,或者當事件被觸發時,腳本就會被執行。當你把腳本放置到 head 部分後,就可以確保在需要使用腳本之前,它已經被載入了。

<html>
<head>
<script type="text/javascript">
....
</script>
</head>
....

位於 body 部分的腳本:

在頁面載入時腳本就會被執行。當你把腳本放置於 body 部分後,它就會生成頁面的內容。

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

body head 部分的腳本:

你可以在文檔中放置任何數量的腳本,因此你既可以把腳本放置到 body,又可以放置到 head 部分。

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

使用外部 JavaScript

有時,你也許希望在若干個頁面中運行 JavaScript,同時不在每個頁面中寫相同的腳本。

爲了達到這個目的,你可以將 JavaScript 寫入一個外部文件之中。然後以 .js 爲後綴保存這個文件。

注意:外部文件不能包含 <script> 標籤。

然後把 .js 文件指定給 <script> 標籤中的 "src" 屬性,就可以使用這個外部文件了:

<html>
<head>
<script src="xxx.js">....</script>
</head>
<body>
</body>
</html>

提示:您可以把 .js 文件放到網站目錄中通常存放腳本的子目錄中,這樣更容易管理和維護。

JavaScript 是由瀏覽器執行的語句序列。

JavaScript 語句

JavaScript 語句是發給瀏覽器的命令。這些命令的作用是告訴瀏覽器要做的事情。

這個 JavaScript 語句告訴瀏覽器向網頁輸出 "Helloworld"

document.write("Hello world");

通常要在每行語句的結尾加上一個分號。大多數人都認爲這是一個好的編程習慣,而且在 web 上的 JavaScript 案例中也常常會看到這種情況。

分號是可選的(根據 JavaScript 標準),瀏覽器把行末作爲語句的結尾。正因如此,常常會看到一些結尾沒有分號的例子。

註釋:通過使用分號,可以在一行中寫多條語句。

JavaScript 代碼

JavaScript 代碼是 JavaScript 語句的序列。

瀏覽器按照編寫順序依次執行每條語句。

本例向網頁輸出一個標題和兩個段落:

<script type="text/javascript">
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

TIY

JavaScript 代碼塊

JavaScript 可以分批地組合起來。

代碼塊以左花括號開始,以右花括號結束。

代碼塊的作用是一併地執行語句序列。

本例向網頁輸出一個標題和兩個段落:

<script type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>

TIY

上例的用處不大。僅僅演示了代碼塊的使用而已。通常,代碼塊用於在函數或條件語句中把若干語句組合起來(比方說如果條件滿足,就可以執行這個語句分組了)。

您會在稍後的章節學習到更多有關函數和條件的知識。

JavaScript 註釋可用於增強代碼的可讀性。

JavaScript 註釋

可以添加註釋來對 JavaScript 進行解釋,或者提高其可讀性。

單行的註釋以 // 開始。

本例用單行註釋來解釋代碼:

<script type="text/javascript">
// 這行代碼輸出標題:
document.write("<h1>This is a header</h1>");
// 這行代碼輸出段落:
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

TIY

JavaScript 多行註釋

多行註釋以 /* 開頭,以 */ 結尾。

本例使用多行註釋來解釋代碼:

<script type="text/javascript">
/*
下面的代碼將輸出
一個標題和兩個段落
*/
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

TIY

使用註釋來防止執行

在本例中,我們用註釋來阻止一行代碼的執行:

<script type="text/javascript">
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
//document.write("<p>This is another paragraph</p>");
</script>

TIY

在本例中,我們用註釋來阻止若干行代碼的執行:

<script type="text/javascript">
/*
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
*/
</script>

TIY

在行末使用註釋

在本例中,註釋放置在語句的行末:

<script type="text/javascript">
document.write("Hello"); // 輸出 "Hello" 
document.write("World"); // 輸出 "World" 
</script>

變量是用於存儲信息的容器:

x=5;length=66.10;

還記得在學校裏學過的代數嗎?

當您回憶在學校學過的代數課程時,想到的很可能是:x=5, y=6, z=x+y 等等。

還記得嗎,一個字母可以保存一個值(比如 5),並且可以使用上面的信息計算出 z 的值是 11

您一定沒有忘記,對吧。

這些字母稱爲變量,變量可用於保存值 (x=5) 或表達式 (z=x+y)

JavaScript 變量

正如代數一樣,JavaScript 變量用於保存值或表達式。

可以給變量起一個簡短名稱,比如 x,或者更有描述性的名稱,比如 length

JavaScript 變量也可以保存文本值,比如 carname="Volvo"

JavaScript 變量名稱的規則:

  • 變量對大小寫敏感(y  Y 是兩個不同的變量)
  • 變量必須以字母或下劃線開始

註釋:由於 JavaScript 對大小寫敏感,變量名也對大小寫敏感。

實例

在腳本執行的過程中,可以改變變量的值。可以通過其名稱來引用一個變量,以此顯示或改變它的值。

本例爲您展示原理

聲明(創建) JavaScript 變量

JavaScript 中創建變量經常被稱爲聲明變量。

您可以通過 var語句來聲明 JavaScript 變量:

var x;
var carname;

在以上聲明之後,變量並沒有值,不過您可以在聲明它們時向變量賦值:

var x=5;
var carname="Volvo";

註釋:在爲變量賦文本值時,請爲該值加引號。

JavaScript 變量賦值

通過賦值語句向 JavaScript 變量賦值:

x=5;
carname="Volvo";

變量名在 = 符號的左邊,而需要向變量賦的值在 = 的右側。

在以上語句執行後,變量 x 中保存的值是 5,而 carname 的值是 Volvo

向未聲明的 JavaScript 變量賦值

如果您所賦值的變量還未進行過聲明,該變量會自動聲明。

這些語句:

x=5;
carname="Volvo"; 

與這些語句的效果相同:

var x=5;
var carname="Volvo"; 

重新聲明 JavaScript 變量

如果您再次聲明瞭 JavaScript 變量,該變量也不會丟失其原始值。

var x=5;
var x; 

在以上語句執行後,變量 x 的值仍然是 5。在重新聲明該變量時,x 的值不會被重置或清除。

JavaScript 算術

正如代數一樣,您可以使用 JavaScript 變量來做算術:

y=x-5;
z=y+5; 

在本教程的下一節中,您將學習能夠在 JavaScript 變量間使用的運算符。

運算符 = 用於賦值。

運算符 + 用於加值。

運算符 = 用於給 JavaScript 變量賦值。

算術運算符 + 用於把值加起來。

y=5;
z=2;
x=y+z; 

在以上語句執行後,x 的值是 7

JavaScript 算術運算符

算術運算符用於執行變量與/或值之間的算術運算。

給定 y=5,下面的表格解釋了這些算術運算符:

運算符

描述

例子

結果

+

x=y+2

x=7

-

x=y-2

x=3

*

x=y*2

x=10

/

x=y/2

x=2.5

%

求餘數 (保留整數)

x=y%2

x=1

++

累加

x=++y

x=6

--

遞減

x=--y

x=4

JavaScript 賦值運算符

賦值運算符用於給 JavaScript 變量賦值。

給定 x=10  y=5,下面的表格解釋了賦值運算符:

運算符

例子

等價於

結果

=

x=y

 

x=5

+=

x+=y

x=x+y

x=15

-=

x-=y

x=x-y

x=5

*=

x*=y

x=x*y

x=50

/=

x/=y

x=x/y

x=2

%=

x%=y

x=x%y

x=0

用於字符串的 + 運算符

+ 運算符用於把文本值或字符串變量加起來(連接起來)。

如需把兩個或多個字符串變量連接起來,請使用 + 運算符。

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

在以上語句執行後,變量 txt3 包含的值是 "What a verynice day"

要想在兩個字符串之間增加空格,需要把空格插入一個字符串之中:

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

或者把空格插入表達式中:

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

在以上語句執行後,變量 txt3 包含的值是:

"What a very nice day"

對字符串和數字進行加法運算

請看這些例子:

x=5+5;
document.write(x);
 
x="5"+"5";
document.write(x);
 
x=5+"5";
document.write(x);
 
x="5"+5;
document.write(x);

TIY

規則是:

如果把數字與字符串相加,結果將成爲字符串。

·        PreviousPage

·        NextPage

·        比較和邏輯運算符用於測試 true false

·        比較運算符

·        比較運算符在邏輯語句中使用,以測定變量或值是否相等。

·        給定 x=5,下面的表格解釋了比較運算符:

運算符

描述

例子

==

等於

x==8 爲 false

===

全等(值和類型)

x===5 爲 true;x==="5" 爲 false

!=

不等於

x!=8 爲 true

大於

x>8 爲 false

小於

x<8 爲 true

>=

大於或等於

x>=8 爲 false

<=

小於或等於

x<=8 爲 true

·        如何使用

·        可以在條件語句中使用比較運算符對值進行比較,然後根據結果來採取行動:

·         if (age<18) document.write("Too young");

·        您將在本教程的下一節中學習更多有關條件語句的知識。

·        邏輯運算符

·        邏輯運算符用於測定變量或值之間的邏輯。

·        給定 x=6 以及 y=3,下表解釋了邏輯運算符:

運算符

描述

例子

&&

and

(x < 10 && y > 1) 爲 true

||

or

(x==5 || y==5) 爲 false

!

not

!(x==y) 爲 true

·        條件運算符

·        JavaScript 還包含了基於某些條件對變量進行賦值的條件運算符。

·        語法

·         variablename=(condition)?value1:value2 

·        例子

·         greeting=(visitor=="PRES")?"Dear President ":"Dear ";

·        如果變量 visitor 中的值是 "PRES",則向變量 greeting 賦值 "Dear President ",否則賦值 "Dear"

·        JavaScript 中的條件語句用於完成不同條件下的行爲。

·        實例

·        If 語句

·        如何編寫一個 If 語句。

·        If...else 語句

·        如何編寫 if...else 語句。

·        If..else if...else 語句

·        如何編寫 if..else if...else 語句

·        隨機鏈接

·        本例演示一個隨機的鏈接,當您單擊這個鏈接時,會打開某個隨機的網站。

·        條件語句

·        在您編寫代碼時,經常需要根據不同的條件完成不同的行爲。可以在代碼中使用條件語句來完成這個任務。

·        JavaScript 中,我們可以使用下面幾種條件語句:

·        if 語句

·        在一個指定的條件成立時執行代碼。

·        if...else 語句

·        在指定的條件成立時執行代碼,當條件不成立時執行另外的代碼。

·        if...else if....else 語句

·        使用這個語句可以選擇執行若干塊代碼中的一個。

·        switch 語句

·        使用這個語句可以選擇執行若干塊代碼中的一個。

·        If 語句

·        如果希望指定的條件成立時執行代碼,就可以使用這個語句。

·        語法:

·         if (條件)
·         {
·         條件成立時執行代碼
·         } 

·        注意:請使用小寫字母。使用大寫的 IF 會出錯!

·        實例 1

·         <script type="text/javascript">
·         //Write a "Good morning" greeting if
·         //the time is less than 10
·          
·         var d=new Date()
·         var time=d.getHours()
·          
·         if (time<10) 
·         {
·         document.write("<b>Good morning</b>")
·         }
·         </script>

·        實例 2

·         <script type="text/javascript">
·         //Write "Lunch-time!" if the time is 11
·          
·         var d=new Date()
·         var time=d.getHours()
·          
·         if (time==11) 
·         {
·         document.write("<b>Lunch-time!</b>")
·         }
·         </script>

·        注意:請使用雙等號 (==) 比較變量!

·        注意:在語法中沒有 else僅僅當條件爲 true ,代碼纔會執行。

·        If...else 語句

·        如果希望條件成立時執行一段代碼,而條件不成立時執行另一段代碼,那麼可以使用 if....else 語句。

·        語法:

·         if (條件)
·         {
·         條件成立時執行此代碼
·         }
·         else
·         {
·         條件不成立時執行此代碼
·         }

·        實例

·         <script type="text/javascript">
·         //If the time is less than 10,
·         //you will get a "Good morning" greeting.
·         //Otherwise you will get a "Good day" greeting.
·          
·         var d = new Date()
·         var time = d.getHours()
·          
·         if (time < 10) 
·         {
·         document.write("Good morning!")
·         }
·         else
·         {
·         document.write("Good day!")
·         }
·         </script>

·        If...else if...else 語句

·        當需要選擇多套代碼中的一套來運行時,請使用 if....else if...else 語句。

·        語法:

·         if (條件1)
·         {
·         條件1成立時執行代碼
·         }
·         else if (條件2)
·         {
·         條件2成立時執行代碼
·         }
·         else
·         {
·         條件1和條件2均不成立時執行代碼
·         }

·        實例:

·         <script type="text/javascript">
·          
·         var d = new Date()
·         var time = d.getHours()
·          
·         if (time<10)
·         {
·         document.write("<b>Good morning</b>")
·         }
·         else if (time>10 && time<16)
·         {
·         document.write("<b>Good day</b>")
·         }
·         else
·         {
·         document.write("<b>Hello World!</b>")
·         }
·         </script>

·        JavaScript 中的條件語句用於完成基於不同條件的行爲。

·        實例

·        Switch 語句

·        如何編寫一個 Switch 語句。

·        JavaScript Switch 語句

·        如果希望選擇執行若干代碼塊中的一個,你可以使用 switch 語句:

·        語法:

·         switch(n)
·            {
·            case 1:
·              執行代碼塊 1
·              break
·            case 2:
·              執行代碼塊 2
·              break
·            default:
·              如果n即不是1也不是2,則執行此代碼
·            }

·        工作原理switch 後面的 (n) 可以是表達式,也可以(並通常)是變量。然後表達式中的值會與 case 中的數字作比較,如果與某個 case 相匹配,那麼其後的代碼就會被執行。break 的作用是防止代碼自動執行到下一行。

·        實例:

·         <script type="text/javascript">
·         //You will receive a different greeting based
·         //on what day it is. Note that Sunday=0,
·         //Monday=1, Tuesday=2, etc.
·          
·         var d=new Date()
·         theDay=d.getDay()
·          
·         switch (theDay)
·            {
·            case 5:
·              document.write("Finally Friday")
·              break
·            case 6:
·              document.write("Super Saturday")
·              break
·            case 0:
·              document.write("Sleepy Sunday")
·              break
·            default:
·              document.write("I'm looking forward to this weekend!")
·         }
·         </script>

·        可以在 JavaScript 中創建三種消息框:警告框、確認框、提示框。

·        實例

·        警告框

·        帶有折行的警告框

·        確認框

·        提示框

·        警告框

·        警告框經常用於確保用戶可以得到某些信息。

·        當警告框出現後,用戶需要點擊確定按鈕才能繼續進行操作。

·        語法:

·         alert("文本")

·        確認框

·        確認框用於使用戶可以驗證或者接受某些信息。

·        當確認框出現後,用戶需要點擊確定或者取消按鈕才能繼續進行操作。

·        如果用戶點擊確認,那麼返回值爲 true。如果用戶點擊取消,那麼返回值爲 false

·        語法:

·         confirm("文本")

·        提示框

·        提示框經常用於提示用戶在進入頁面前輸入某個值。

·        當提示框出現後,用戶需要輸入某個值,然後點擊確認或取消按鈕才能繼續操縱。

·        如果用戶點擊確認,那麼返回值爲輸入的值。如果用戶點擊取消,那麼返回值爲 null

·        語法:

·         prompt("文本","默認值")

·        函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。

·        實例

·        函數

·        如何調用函數。

·        帶有參數的函數

·        如何向函數傳遞變量,以及如何在函數中使用該變量。

·        帶有參數的函數 2

·        如何向函數傳遞多個變量,以及如何在函數中使用這些變量。

·        返回值的函數

·        如何從函數返回值。

·        帶有參數並返回值的函數

·        如何向函數輸入兩個參數值,並返回值。

·        JavaScript 函數

·        將腳本編寫爲函數,就可以避免頁面載入時執行該腳本。

·        函數包含着一些代碼,這些代碼只能被事件激活,或者在函數被調用時纔會執行。

·        你可以在頁面中的任何位置調用腳本(如果函數嵌入一個外部的 .js 文件,那麼甚至可以從其他的頁面中調用)。

·        函數在頁面起始位置定義,即 <head> 部分。

·         <html>
·         <head>
·         <script type="text/javascript">
·         function displaymessage()
·         {
·         alert("Hello World!")
·         }
·         </script>
·         </head>
·          
·         <body>
·         <form>
·         <input type="button" value="Click me!" onclick="displaymessage()" >
·         </form>
·         </body>
·         </html>

·        親自試一試

·        假如上面的例子中的 alert("Hello world!!") 沒有被寫入函數,那麼當頁面被載入時它就會執行。現在,當用戶擊中按鈕時,腳本纔會執行。我們給按鈕添加了 onClick 事件,這樣按鈕被點擊時函數纔會執行。

·        JS 事件這一章,你會學到更多關於 JavaScript 事件的知識。

·        如何定義函數

·        創建函數的語法:

·         function 函數名(var1,var2,...,varX)
·           {
·           代碼...
·           }

·        var1, var2 等指的是傳入函數的變量或值。{ } 定義了函數的開始和結束。

·        注意:無參數的函數必須在其函數名後加括號:

·         function 函數名()
·         {
·           代碼...
·         }

·        注意:別忘記 JavaScript 中大小寫字母的重要性。"function" 這個詞必須是小寫的,否則 JavaScript 就會出錯。另外需要注意的是,必須使用大小寫完全相同的函數名來調用函數。

·        return 語句

·        return 語句用來規定從函數返回的值。

·        因此,需要返回某個值的函數必須使用這個 return 語句。

·        例子

·        下面的函數會返回兩個數相乘的值(a b):

·         function prod(a,b)
·         {
·         x=a*b
·         return x
·         }

·        當您調用上面這個函數時,必須傳入兩個參數:

·         product=prod(2,3)

·        而從 prod() 函數的返回值是 6,這個值會存儲在名爲 product 的變量中。

·        JavaScript 變量的生存期

·        當您在函數內聲明瞭一個變量後,就只能在該函數中訪問該變量。當退出該函數後,這個變量會被撤銷。這種變量稱爲本地變量。您可以在不同的函數中使用名稱相同的本地變量,這是因爲只有聲明過變量的函數能夠識別其中的每個變量。

·        如果您在函數之外聲明瞭一個變量,則頁面上的所有函數都可以訪問該變量。這些變量的生存期從聲明它們之後開始,在頁面關閉時結束。

·        JavaScript 中的循環用來將同一段代碼執行指定的次數(或者當指定的條件爲 true 時)。

·        實例

·        For 循環

·        如何編寫 loop 循環來按照指定的次數執行相同的代碼。

·        循環產生 HTML 標題

·        如何使用Loop循環來產生不同的HTML標題。

·        JavaScript 循環

·        在編寫代碼時,你常常希望反覆執行同一段代碼。我們可以使用循環來完成這個功能,這樣就用不着重複地寫若干行相同的代碼。

·        JavaScript 有兩種不同種類的循環:

·        for

·        將一段代碼循環執行指定的次數

·        while

·        當指定的條件爲 true 時循環執行代碼

·        for 循環

·        在腳本的運行次數已確定的情況下使用 for 循環。

·        語法:

·         for (變量=開始值;變量<=結束值;變量=變量+步進值) 
·         {
·             需執行的代碼
·         }

·        實例:

·        解釋:下面的例子定義了一個循環程序,這個程序中 i 的起始值爲 0。每執行一次循環,i 的值就會累加一次 1,循環會一直運行下去,直到 i 等於 10 爲止。

·        註釋:步進值可以爲負。如果步進值爲負,需要調整 for 聲明中的比較運算符。

·         <html>
·         <body>
·          
·         <script type="text/javascript">
·         var i=0
·         for (i=0;i<=10;i++)
·         {
·         document.write("The number is " + i)
·         document.write("<br />")
·         }
·         </script>
·          
·         </body>
·         </html>

·        結果:

·         The number is 0
·         The number is 1
·         The number is 2
·         The number is 3
·         The number is 4
·         The number is 5
·         The number is 6
·         The number is 7
·         The number is 8
·         The number is 9
·         The number is 10

·        while 循環

·        我們將在下一節中學習 while 循環。

·        JavaScript 中的循環用來將同一段代碼執行指定的次數(或者當指定的條件爲 true 時)。

·        實例

·        While 循環

·        利用 while 循環在指定條件爲 true 時來循環執行代碼。

·        Do while 循環

·        利用 do...while 循環在指定條件爲 true 時來循環執行代碼。在即使條件爲 false 時,這種循環也會至少執行一次。這是因爲在條件被驗證前,這個語句就會執行。

·        while 循環

·        while 循環用於在指定條件爲 true 時循環執行代碼。

·        語法:

·         while (變量<=結束值)
·         {
·             需執行的代碼
·         }

·        注意:除了<=,還可以使用其他的比較運算符。

·        實例:

·        解釋:下面的例子定義了一個循環程序,這個循環程序的參數 i 的起始值爲 0。該程序會反覆運行,直到 i 大於 10 爲止。i 的步進值爲 1

·         <html>
·         <body>
·         <script type="text/javascript">
·         var i=0
·         while (i<=10)
·         {
·         document.write("The number is " + i)
·         document.write("<br />")
·         i=i+1
·         }
·         </script>
·         </body>
·         </html>

·        結果:

·         The number is 0
·         The number is 1
·         The number is 2
·         The number is 3
·         The number is 4
·         The number is 5
·         The number is 6
·         The number is 7
·         The number is 8
·         The number is 9
·         The number is 10

·        do...while 循環

·        do...while 循環是 while 循環的變種。該循環程序在初次運行時會首先執行一遍其中的代碼,然後當指定的條件爲 true 時,它會繼續這個循環。所以可以這麼說,do...while 循環爲執行至少一遍其中的代碼,即使條件爲 false,因爲其中的代碼執行後纔會進行條件驗證。

·        語法:

·         do
·         {
·             需執行的代碼
·         }
·         while (變量<=結束值)

·        實例:

·         <html>
·         <body>
·         <script type="text/javascript">
·         var i=0
·         do 
·         {
·         document.write("The number is " + i)
·         document.write("<br />")
·         i=i+1
·         }
·         while (i<0)
·         </script>
·         </body>
·         </html>

·        結果:

·         The number is 0

·        有兩種可以用在循環中的語句:break continue

·        實例

·        break 語句

·        使用 break 語句來終止循環。

·        continue 語句

·        使用 continue 語句來終止當前的循環,然後從下一個值繼續執行。

·        JavaScript break continue 語句

·        有兩種特殊的語句可用在循環內部:break continue

·        Break

·        break 命令可以終止循環的運行,然後繼續執行循環之後的代碼(如果循環之後有代碼的話)。

·        實例:

·         <html>
·         <body>
·         <script type="text/javascript">
·         var i=0
·         for (i=0;i<=10;i++)
·         {
·         if (i==3){break}
·         document.write("The number is " + i)
·         document.write("<br />")
·         }
·         </script>
·         </body>
·         </html>

·        結果:

·         The number is 0
·         The number is 1
·         The number is 2

·        Continue

·        continue 命令會終止當前的循環,然後從下一個值繼續運行。

·        實例:

·         <html>
·         <body>
·         <script type="text/javascript">
·         var i=0
·         for (i=0;i<=10;i++)
·         {
·         if (i==3){continue}
·         document.write("The number is " + i)
·         document.write("<br />")
·         }
·         </script>
·         </body>
·         </html>

·        結果:

·         The number is 0
·         The number is 1
·         The number is 2
·         The number is 4
·         The number is 5
·         The number is 6
·         The number is 7
·         The number is 8
·         The number is 9
·         The number is 10

·        for...in 語句用於遍歷數組或者對象的屬性(對數組或者對象的屬性進行循環操作)。

·        實例

·        for...in 語句

·        如何使用 for...in 語句來遍歷數組內的元素。

·        JavaScript for...in 語句

·        for...in 語句用於對數組或者對象的屬性進行循環操作。

·        for ... in 循環中的代碼每執行一次,就會對數組的元素或者對象的屬性進行一次操作。

·        語法:

·         for (變量in對象)
·         {
·             在此執行代碼
·         }

·        變量用來指定變量,指定的變量可以是數組元素,也可以是對象的屬性。

·        實例:

·        使用 for ... in 循環遍歷數組。

·         <html>
·         <body>
·          
·         <script type="text/javascript">
·         var x
·         var mycars = new Array()
·         mycars[0] = "Saab"
·         mycars[1] = "Volvo"
·         mycars[2] = "BMW"
·          
·         for (x in mycars)
·         {
·         document.write(mycars[x] + "<br />")
·         }
·         </script>
·          
·         </body>
·         </html>

事件是可以被 JavaScript 偵測到的行爲。

事件

JavaScript 使我們有能力創建動態頁面。事件是可以被 JavaScript 偵測到的行爲。

網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數的事件。比方說,我們可以在用戶點擊某按鈕時產生一個 onClick 事件來觸發某個函數。事件在 HTML 頁面中定義。

事件舉例:

  • 鼠標點擊
  • 頁面或圖像載入
  • 鼠標懸浮於頁面的某個熱點之上
  • 在表單中選取輸入框
  • 確認表單
  • 鍵盤按鍵

注意:事件通常與函數配合使用,當事件發生時函數纔會執行。

如果需要更多有關 Javascript 可識別事件的知識,請閱讀我們的 JavaScript 事件參考手冊

onload onUnload

當用戶進入或離開頁面時就會觸發 onload onUnload 事件。

onload 事件常用來檢測訪問者的瀏覽器類型和版本,然後根據這些信息載入特定版本的網頁。

onload onUnload 事件也常被用來處理用戶進入或離開頁面時所建立的 cookies例如,當某用戶第一次進入頁面時,你可以使用消息框來詢問用戶的姓名。姓名會保存在 cookie 中。當用戶再次進入這個頁面時,你可以使用另一個消息框來和這個用戶打招呼:"WelcomeJohn Doe!"

onFocus, onBlur onChange

onFocusonBlur onChange 事件通常相互配合用來驗證表單。

下面是一個使用 onChange 事件的例子。用戶一旦改變了域的內容,checkEmail() 函數就會被調用。

<input type="text" size="30" id="email" onchange="checkEmail()">

onSubmit

onSubmit 用於在提交表單之前驗證所有的表單域。

下面是一個使用 onSubmit 事件的例子。當用戶單擊表單中的確認按鈕時,checkForm() 函數就會被調用。假若域的值無效,此次提交就會被取消。checkForm() 函數的返回值是 true 或者 false。如果返回值爲true,則提交表單,反之取消提交。

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

onMouseOver onMouseOut

onMouseOver onMouseOut 用來創建動態的按鈕。

下面是一個使用 onMouseOver 事件的例子。 onMouseOver 事件被腳本偵測到時,就會彈出一個警告框:

<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false">
 
<img src="w3school.gif" width="100" height="30">
 
</a>

try...catch 的作用是測試代碼中的錯誤。

實例

try...catch 語句

如何編寫 try...catch 語句。

帶有確認框的 try...catch 語句

另一個編寫 try...catch 語句的例子。

JavaScript - 捕獲錯誤

當我們在網上衝浪時,總會看到帶有 runtime 錯誤的 Javascript 警告框,同時會詢問我們是否進行 debug像這樣的錯誤信息或許對開發人員有用,對用戶則未必。當錯誤發生時,他們往往會選擇離開這個站點。

本節向你講解如何捕獲和處理 Javascript 的錯誤消息,這樣就可以爲受衆提供更多的便利。

有兩種在網頁中捕獲錯誤的方法:

  • 使用 try...catch 語句。( IE5+Mozilla 1.0、和 Netscape 6 中可用)
  • 使用 onerror 事件。這是用於捕獲錯誤的老式方法。(Netscape 3 以後的版本可用)

注意:chromeopera safari 瀏覽器不支持 onerror 事件。

Try...Catch 語句

try...catch 可以測試代碼中的錯誤。try 部分包含需要運行的代碼,而 catch 部分包含錯誤發生時運行的代碼。

語法:

try
{
   //在此運行代碼
}
catch(err)
{
   //在此處理錯誤
}

注意:try...catch 使用小寫字母。大寫字母會出錯。

實例 1

下面的例子原本用在用戶點擊按鈕時顯示 "Welcomeguest!" 這個消息。不過 message() 函數中的 alert() 被誤寫爲 adddlert()。這時錯誤發生了:

<html>
<head>
<script type="text/javascript">
function message()
{
adddlert("Welcome guest!")
}
</script>
</head>
 
<body>
<input type="button" value="View message" onclick="message()" />
</body>
 
</html>

我們可以添加 try...catch 語句,這樣當錯誤發生時可以採取更適當的措施。

下面的例子用 try...catch 語句重新修改了腳本。由於誤寫了 alert(),所以錯誤發生了。不過這一次,catch 部分捕獲到了錯誤,並用一段準備好的代碼來處理這個錯誤。這段代碼會顯示一個自定義的出錯信息來告知用戶所發生的事情。

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!")
  }
catch(err)
  {
  txt="此頁面存在一個錯誤。\n\n"
  txt+="錯誤描述: " + err.description + "\n\n"
  txt+="點擊OK繼續。\n\n"
  alert(txt)
  }
}
</script>
</head>
 
<body>
<input type="button" value="View message" onclick="message()" />
</body>
 
</html>

TIY

實例 2

下一個例子會顯示一個確認框,讓用戶來選擇在發生錯誤時點擊確定按鈕來繼續瀏覽網頁,還是點擊取消按鈕來回到首頁。如果 confirm 方法的返回值爲 false,代碼會把用戶重定向到其他的頁面。如果 confirm 方法的返回值爲 true,那麼代碼什麼也不會做。

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!")
  }
catch(err)
  {
  txt="There was an error on this page.\n\n"
  txt+="Click OK to continue viewing this page,\n"
  txt+="or Cancel to return to the home page.\n\n"
  if(!confirm(txt))
    {
    document.location.href="http://www.w3school.com.cn/"
    }
  }
}
</script>
</head>
 
<body>
<input type="button" value="View message" onclick="message()" />
</body>
 
</html>

TIY

onerror 事件

我們馬上會講解 onerror 事件。但首先您需要學習如何使用 throw 語句來創建異常。throw 語句可以與 try...catch 語句一起使用。

throw 聲明的作用是創建 exception(異常或錯誤)。

實例

throw 聲明

如何使用 throw 聲明。

Throw 聲明

throw 聲明的作用是創建 exception(異常)。你可以把這個聲明與 try...catch 聲明配合使用,以達到控制程序流併產生精確錯誤消息的目的。

語法:

throw(exception)

exception 可以是字符串、整數、邏輯值或者對象。

注意:使用小寫字母編寫 throw。使用大寫字母會出錯!

實例 1

下面的實例的作用是測定變量 x 的值。如果 x 的值大於 10 或者小於 0,錯誤就會被拋出 (throw)。這個錯誤被 catch 的參數捕獲後,就會顯示出自定義的出錯信息。

<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{ 
if(x>10) 
throw "Err1"
else if(x<0)
throw "Err2"
} 
catch(er)
{
if(er=="Err1") 
alert("Error! The value is too high")
if(er == "Err2") 
alert("Error! The value is too low") 
}
</script>
</body>
</html>

使用 onerror 事件是一種老式的標準的在網頁中捕獲 Javascript 錯誤的方法。

實例

onerror 事件

如何使用 onerror 事件捕獲網頁中的錯誤。(chromeoperasafari 瀏覽器不支持)

onerror 事件

我們剛講過如何使用 try...catch 聲明來捕獲網頁中的錯誤。現在,我們繼續講解如何使用 onerror 事件來達到相同的目的。

只要頁面中出現腳本錯誤,就會產生 onerror 事件。

如果需要利用 onerror 事件,就必須創建一個處理錯誤的函數。你可以把這個函數叫作 onerror 事件處理器 (onerrorevent handler)。這個事件處理器使用三個參數來調用:msg(錯誤消息)、url(發生錯誤的頁面的 url)、line(發生錯誤的代碼行)。

語法:

onerror=handleErr
 
function handleErr(msg,url,l)
{
//Handle the error here
return true or false
}

瀏覽器是否顯示標準的錯誤消息,取決於 onerror 的返回值。如果返回值爲 false,則在控制檯 (JavaScriptconsole) 中顯示錯誤消息。反之則不會。

實例:

下面的例子展示如何使用 onerror 事件來捕獲錯誤:

<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""
 
function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}
 
function message()
{
adddlert("Welcome guest!")
}
</script>
</head>
 
<body>
<input type="button" value="View message" onclick="message()" />
</body>
 
</html>

TIY

你可以在 JavaScript 中使用反斜槓來向文本字符串添加特殊字符。

插入特殊字符

反斜槓用來在文本字符串中插入省略號、換行符、引號和其他特殊字符。

請看下面的 JavaScript 代碼:

var txt="We are theso-called "Vikings" from the north."

document.write(txt)

JavaScript 中,字符串使用單引號或者雙引號來起始或者結束。這意味着上面的字符串將被截爲:We are the so-called

要解決這個問題,就必須把在 "Viking" 中的引號前面加上反斜槓 (\)這樣就可以把每個雙引號轉換爲字面上的字符串。

var txt="We are theso-called \"Vikings\" from the north."

document.write(txt)

現在 JavaScript 就可以輸出正確的文本字符串了:We are the so-called"Vikings" from the north

這是另一個例子:

document.write ("You \& me are singing!") 

上面的例子會產生以下輸出:

You & me are singing!

下面的表格列出了其餘的特殊字符,這些特殊字符都可以使用反斜槓來添加到文本字符串中:

代碼

輸出

\'

單引號

\"

雙引號

\&

和號

\\

反斜槓

\n

換行符

\r

回車符

\t

製表符

\b

退格符

\f

換頁符

本節的內容是:在使用 JavaScript 進行編碼的過程中,其他一些需要了解的重要事項。

JavaScript 對大小寫敏感

名爲 "myfunction" 的函數和名爲"myFunction" 的函數是兩個不同的函數,同樣,變量 "myVar" 和變量 "myvar" 也是不同的。

JavaScript 對大小寫敏感 - 所以當您創建或使用變量、對象及函數時,請注意字符的大小寫。

空格

JavaScript 會忽略多餘的空格。所以您可以在代碼中添加適當的空格,使得代碼的可讀性更強。下面的兩行是等效的:

name="Hege"
name = "Hege"

換行

您可以在文本字符串內部使用反斜槓對代碼進行折行。下面的例子是正確的:

document.write("Hello \
World!")

但是不能像這樣折行:

document.write \
("Hello World!")

 

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