JavaScript 是屬於網絡的腳本語言!
JavaScript 被數百萬計的網頁用來改進設計、驗證表單、檢測瀏覽器、創建cookies,以及更多的應用。
JavaScript 是因特網上最流行的腳本語言。
JavaScript 很容易使用!你一定會喜歡它的!
JavaScript 簡介
在數百萬張頁面中,JavaScript 被用來改進設計、驗證表單、檢測瀏覽器、創建cookies,等等等等。JavaScript 是因特網上最流行的腳本語言,並且可在所有主要的瀏覽器中運行,比方說 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。
- 什么是 JavaScript?
-
- JavaScript 被設計用來向 HTML 頁面添加交互行為。
- JavaScript 是一種腳本語言(腳本語言是一種輕量級的編程語言)。
- JavaScript 由數行可執行計算機代碼組成。
- JavaScript 通常被直接嵌入 HTML 頁面。
- JavaScript 是一種解釋性語言(就是說,代碼執行不進行預編譯)。
- 所有的人無需購買許可證均可使用 JavaScript。
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)。這個標准仍然處於發展之中。
如何實現 JavaScript
HTML 的 <script> 標簽用於把 JavaScript 代碼插入 HTML 頁面當中。
方式一:
<script language="javascript" type="text/javascript">
document.write("這是由javascript輸出的文字");
</script>
方式二:
<script src="one.js"></script>
如何與老的瀏覽器打交道
那些不支持 JavaScript 的瀏覽器會把腳本作為頁面的內容來顯示。為了防止這種情況發生,我們可以使用這樣的 HTML 注釋標簽:
<script type="text/javascript">
<!--
document.write("Hello World!");
//—>
</script>
注釋行末尾的兩個正斜杠是 JavaScript 的注釋符號,它會阻止 JavaScript 編譯器對這一行的編譯。
把 JavaScript 放置到何處
當頁面載入時,會執行位於 body 部分的 JavaScript。當被調用時,位於 head 部分的 JavaScript 才會被執行。
你可以在文檔中放置任何數量的腳本,因此你既可以把腳本放置到 body,又可以放置到 head 部分。
需要注意的是:
在一個HTML文檔中,所有位置的腳本代碼,包括引入的外部js代碼,他們都將成為一個整體。你可以把他們想象成在一個類中。因此,有時來自不同文件的重名方法或重名變量,會導致意想不到的錯誤發生。
JavaScript 語句
JavaScript 是由瀏覽器執行的語句序列。這些命令的作用是告訴瀏覽器要做的事情。通常要在每行語句的結尾加上一個分號。大多數人都認為這是一個好的編程習慣,而且在 web 上的 JavaScript 案例中也常常會看到這種情況。
分號是可選的(根據 JavaScript 標准),瀏覽器把行末作為語句的結尾。正因如此,常常會看到一些結尾沒有分號的例子。通過使用分號,可以在一行中寫多條語句。
JavaScript 變量
JavaScript 變量名稱的規則:
- 應該起一些具有意義的,描述性的,讓人望文生義的變量名
- 變量對大小寫敏感(y 和 Y 是兩個不同的變量)【JavaScript 對大小寫敏感】
- 變量必須以字母或下划線開始
- 變量名不能使用系統的關鍵字或保留字
JavaScript 變量的類型:
JavaScript 是一種弱類型的語言,因此變量的類型由賦值號右邊的數據所決定。
JavaScript 運算符
算術運算符:+ – * / % ++ -- ,其中+號還被重載用於拼接字符串,另外,任何類型+上字符串都是字符串。
賦值運算符:= += -= *= /= %=
比較運算符:== === != > < >= <=
邏輯運算符:&& || !
條件運算符:? :
JavaScript 分支語句
傳統的 if 。。else,if 。。else if 。。else 的嵌套都是可行的。
switch(n)中的 n 可以是表達式,但通常是變量,case 結構中也需要使用 break 分隔。
JavaScript 消息框
可以在 JavaScript 中創建三種消息框:警告框、確認框、提示框。
警告框經常用於確保用戶可以得到某些信息。當警告框出現后,用戶需要點擊確定按鈕才能繼續進行操作。
alert("文本")
確認框用於使用戶可以驗證或者接受某些信息。當確認框出現后,用戶需要點擊確定或者取消按鈕才能繼續進行操作。如果用戶點擊確認,那么返回值為 true。如果用戶點擊取消,那么返回值為 false。
confirm("文本")
提示框經常用於提示用戶在進入頁面前輸入某個值。當提示框出現后,用戶需要輸入某個值,然后點擊確認或取消按鈕才能繼續操縱。如果用戶點擊確認,那么返回值為輸入的值。如果用戶點擊取消,那么返回值為 null。
prompt("文本","默認值")
JavaScript 函數
將腳本編寫為函數,就可以避免頁面載入時執行該腳本。函數包含着一些代碼,這些代碼只能被事件激活,或者在函數被調用時才會執行。你可以在頁面中的任何位置調用腳本(如果函數嵌入一個外部的 .js 文件,那么甚至可以從其他的頁面中調用)。
建議將函數在頁面起始位置定義,即 <head> 部分。
創建函數的語法:
function 函數名() { 代碼... }
function 函數名(var1,var2,...,varX) { 代碼... }
JavaScript 變量的生存期
當您在函數內聲明了一個變量后,就只能在該函數中訪問該變量。當退出該函數后,這個變量會被撤銷。這種變量稱為本地變量。您可以在不同的函數中使用名稱相同的本地變量,這是因為只有聲明過變量的函數能夠識別其中的每個變量。
如果您在函數之外聲明了一個變量,則頁面上的所有函數都可以訪問該變量。這些變量的生存期從聲明它們之后開始,在頁面關閉時結束。
JavaScript 循環
在編寫代碼時,你常常希望反復執行同一段代碼。我們可以使用循環來完成這個功能,這樣就用不着重復地寫若干行相同的代碼。
JavaScript 有兩種(也只有2種)不同種類的循環:
- for
- 將一段代碼循環執行指定的次數
- while
- 當指定的條件為 true 時循環執行代碼
語法格式和java或.NET是一樣的。
使用什么語句可以直接跳出多重循環?
continue 語句可以在符合一定的條件下結束本輪循環,直接進行下一輪循環。
break 語句可以在符合一定的條件下直接結束循環,代碼會跳轉到循環外靠后的最近一條語句繼續向下執行。
在 .NET 中,goto 語句可以直接定位到指定的標記為繼續執行代碼,而 javascript 中是沒有 goto 語句的,那么怎么直接跳出多重循環呢?
看下面的示例:
outerloop: // 命名外圈語句
for(var i=0; i<10; i++)
{
innerloop://命名內圈語句
for(var j=0; j<10; j++)
{
// 跳出內圈循環
if(j>3){break;}
// 跳出內圈循環
if(i==2){break innerloop;}
// 跳出外圈循環
if(i==4){break outerloop;}
document.write("i = "+i+" , j = "+j+"<br />");
}
}
document.write("final"+" i = "+i+" , j = "+j);
可以在循環外設置標記為,然后使用 break 或 continue 加上標記名直接跳出循環。這里要注意,和其他語言不同,JS中一旦跳出,程序是不會繼續從標記位處再度往下執行代碼的,而是直接執行最外層循環之后的 code,如果后面沒有 code,那么程序就此結束。
JavaScript For...In 聲明
For...In 聲明用於遍歷數組或者對象的屬性(對數組或者對象的屬性進行循環操作)。[也是 for 循環家族的一員]
下例是使用 for..in 遍歷一個數組對象,注意這里 .NET 中 foreach 的區別。
var x
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
JavaScript 事件
事件是可以被 JavaScript 偵測到的行為。
JavaScript 使我們有能力創建動態頁面。事件是可以被 JavaScript 偵測到的行為。
網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數的事件。比方說,我們可以在用戶點擊某按鈕時產生一個 onClick 事件來觸發某個函數。事件在 HTML 頁面中定義。
事件舉例:
- 鼠標點擊
- 頁面或圖像載入
- 鼠標懸浮於頁面的某個熱點之上
- 在表單中選取輸入框
- 確認表單
- 鍵盤按鍵
注意:事件通常與函數配合使用,當事件發生時函數才會執行。
onload 和 onUnload
當用戶進入或離開頁面時就會觸發 onload 和 onUnload 事件。onload 事件常用來檢測訪問者的瀏覽器類型和版本,然后根據這些信息載入特定版本的網頁。onload 和 onUnload 事件也常被用來處理用戶進入或離開頁面時所建立的 cookies。例如,當某用戶第一次進入頁面時,你可以使用消息框來詢問用戶的姓名。姓名會保存在 cookie 中。當用戶再次進入這個頁面時,你可以使用另一個消息框來和這個用戶打招呼:"Welcome John Doe!"。
onFocus, onBlur 和 onChange
onFocus、onBlur 和 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>
JavaScript Try...Catch 語句
JavaScript - 捕獲錯誤
當我們在網上沖浪時,總會看到帶有 runtime 錯誤的 Javascript 警告框,同時會詢問我們“是否進行 debug?”。像這樣的錯誤信息或許對開發人員有用,對用戶則未必。當錯誤發生時,他們往往會選擇離開這個站點。
有兩種在網頁中捕獲錯誤的方法:
- 使用 try...catch 語句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
- 使用 onerror 事件。這是用於捕獲錯誤的老式方法。(Netscape 3 以后的版本可用)
注意:chrome、opera 和 safari 瀏覽器不支持 onerror 事件。【不建議使用此方式】
下一個例子會顯示一個確認框,讓用戶來選擇在發生錯誤時點擊確定按鈕來繼續瀏覽網頁,還是點擊取消按鈕來回到首頁。
<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>
JavaScript Throw 聲明
throw 聲明的作用是創建 exception(異常)。你可以把這個聲明與 try...catch 聲明配合使用,以達到控制程序流並產生精確錯誤消息的目的。
下面的實例的作用是測定變量 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>
JavaScript 特殊字符
你可以在 JavaScript 中使用反斜杠來向文本字符串添加特殊字符。
反斜杠用來在文本字符串中插入省略號、換行符、引號和其他特殊字符。
請看下面的 JavaScript 代碼:
var txt="We are the so-called "Vikings"
from the north."
document.write(txt)
在 JavaScript 中,字符串使用單引號或者雙引號來起始或者結束。這意味着上面的字符串將被截為:We are the so-called。
要解決這個問題,就必須把在 "Viking" 中的引號前面加上反斜杠 (\)。這樣就可以把每個雙引號轉換為字面上的字符串。
var txt="We are the so-called \"Vikings\"
from the north."
document.write(txt)
現在 JavaScript 就可以輸出正確的文本字符串了:We are the so-called "Vikings" from the north。
JavaScript 指導方針
JavaScript 對大小寫敏感
名為 "myfunction" 的函數和名為 "myFunction" 的函數是兩個不同的函數,同樣,變量 "myVar" 和變量 "myvar" 也是不同的。JavaScript 對大小寫敏感 - 所以當您創建或使用變量、對象及函數時,請注意字符的大小寫。
空格
JavaScript 會忽略多余的空格。所以您可以在代碼中添加適當的空格,使得代碼的可讀性更強。下面的兩行是等效的:
name="Hege" name = "Hege"
換行
您可以在文本字符串內部使用反斜杠對代碼進行折行。下面的例子是正確的:
document.write("Hello \ World!")
但是不能像這樣折行:
document.write \ ("Hello World!")