JavaScript 基礎知識


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!")


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM