有三種類型的編程錯誤:(1)語法錯誤和(2)運行時錯誤(3)邏輯錯誤:
語法錯誤:
語法錯誤,也被稱為解析錯誤,在編譯時進行傳統的編程語言,並出現在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結構以及拋出操作來處理異常。
你可以捕獲程序員生成和運行時異常,但不能捕獲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塊被執行。 try/catch語句後的可選finally塊無條件地執行。
示例:
下面是一個例子,我們正試圖調用一個不存在的函數,這將引發異常。讓我們來看看它的行為,不具有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處理錯誤。錯誤事件被觸發窗口對象,每當一個異常頁面上出現。例如:
<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事件處理程序提供了三條信息,以找出錯誤的確切性質:
這裡是例子來說明如何提取此信息
<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標記錯誤的情況下顯示相應的信息。