JavaScript學習（十五）----程式調試與錯誤處理IE浏覽器内鍵的錯誤報告處理異常JavaScript 語言調試技巧小結

目錄 IE浏覽器内鍵的錯誤報告處理異常異常類型文法異常：運作時異常：邏輯異常：觸發onerror事件處理異常例子：使用onerror事件處理異常。使用try...catch...finally語句處理異常例子：使用try...catch...finally語句處理異常 1.嵌套try...catch語句例子：使用嵌套try...catch語句處理異常 2.Error對象例子： 3.使用throw語句抛出異常例子：使用throw語句抛出異常。 JavaScript 語言調試技巧使用alert()語句進行調試使用write()語句進行調試使用抛出自定義異常消息進行調試例子：使用自定義異常消息進行調試小結

每種浏覽器都有自己的JavaScript錯誤報告機制，隻是報告的方式不同而已。

如果需要IE浏覽器彈出錯誤報告對話框，需要設定IE浏覽器，選擇設定---Internet選項---進階---顯示每個腳本錯誤通知

JavaScript學習（十五）----程式調試與錯誤處理IE浏覽器内鍵的錯誤報告處理異常JavaScript 語言調試技巧小結

JavaScript語言處理異常通常有兩種方式。一種方式是使用onerror事件，該事件可以在window對象或圖像對象上觸發，而另一種方式是使用try...catch...finally模型。

通常在程式員輸入一些編譯器無法識别的代碼後發生的。

通常在運作時碰到一個錯誤時發生的，與“文法異常”的差別在于它不一定是JavaScript語言的錯誤引發的異常。

通常發生在程式設計時，程式沒有按照預先設計的方式運作。

觸發onerror事件是最早用于JavaScript異常的機制，頁面出現異常時，将觸發onerror事件，該事件在window對象上觸發。

文法：

<script language="JavaScript">
			window.onerror=function(){
				alert("您調用的函數不存在");
				return true;
			}
		</script>

參數說明：window.onerror:觸發onerror事件。

說明：如果在onerror事件處理函數中沒有使用“return true；”語句，在彈出錯誤提示對話框後，浏覽器的錯誤報告也會顯示出來。為了隐藏此錯誤報告，函數需要傳回true。

除了window對象可以觸發onerror事件之外，圖像對象也可以觸發onerror事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>對象</title>
		
	</head>
	<body>
		<img src="img/banner01.png">
		<p>loading...</p>
		<script type="text/javascript">
			document.getElementsByTagName("img")[0].onload =function() {
				document.getElementsByTagName("p")[0].innerHTML ='加載完成！';
			}
			document.getElementsByTagName("img")[0].onerror =function() {
				document.getElementsByTagName("img")[0].src = "images/backgeound.png";
				document.getElementsByTagName("img")[0].onerror = null;
				document.getElementsByTagName("p")[0].innerHTML ='加載失敗！';
			}
		</script>		
	</body>
</html>

使用onerror事件處理異常除了可以捕捉異常之外，還可以提供如下3種資訊來确定發生異常的詳細資訊。

異常資訊：擷取異常資訊。
URL：擷取發生異常的檔案的絕對路徑。
行号：給定發生異常檔案的行号。

<script type="text/javascript">
	window.onerror=function(ms,Url,Line){
		alert("您調用的函數不存在\n"+ms+"\n"+Url+"\n"+Line+"\n");
		return true;
	}
</script>

本執行個體使用onerror事件處理在window對象和圖像對象中的異常情況，并以提示框的形式顯示異常資訊。

由于在HTML檔案中<body>區域調用頁面中沒有定義函數onHave(，是以執行此頁面将會發出異常，這時，會彈出顯示“您調用的函數不存在”的錯誤提示對話框，同時在此對話框中顯示此異常的相關詳細資訊，包括錯誤資訊、發生異常檔案的絕對路徑以及在程式中發生異常的行号。

在頁面中定義了一個圖像，由于此時沒有賦給此圖像sre屬性，是以在onerror事件處理函數中賦給第一個圖像sre值将會出現異常，程式将彈出錯誤提示對話框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Onerror 事件</title>
		<script type="text/javascript" language="JavaScript">
			window.onerror=function(ms,Url,Line){
				alert("您調用的函數不存在\n"+ms+"\n"+Url+"\n"+Line+"\n"); //彈出錯誤提示對話框
				return true;
			}
			function ImgLoad(){
				document.images[0].onerror=function(){
					alert("您調用的圖像并不存在\n");
				};
				document.images[0].src="img/banner01.png";
			}
			
		</script>	
	</head>
	<body onload="ImgLoad()">
		<script language="JavaScript">
			onHave();        /*調用不存在的onHave()函數*/
		</script>
		<img />
	</body>
</html>

JavaScript中從Java語言中引入了try...catch...finally功能

<script type="text/javascript" language="JavaScript">
	try{
		somestatements;
	}
	catch(exceptions e){
		somestatements;
	}finally{
		somestatement;
	}
</script>

參數說明：

try:檢測異常關鍵字
catch：捕捉異常關鍵字
finally：最終一定會被處理的區塊的關鍵字

本執行個體使用try...catch...finally語言處理異常，當在程式中調用不存在的對象時，将彈出在catch區域中設定的異常提示資訊，并且最終彈出finally區域中的資訊提示。運作結果如圖8.5和圖8.68.6所示。

由于在頁面中并沒有定義表單以及文本框，是以在try區域中，調用表單中的文本框的長度，将發生異常，這時将執行catch區域中的語句，彈出相應異常提示資訊的對話框。

<script type="text/javascript" language="JavaScript">
	try{
		document.forms.input.length;
	}
	catch(exception){
		alert("運作時有異常發生");
	}finally{
		alert("結束try...catch...finally語句");
	}
</script>

如果在catch區域中也發生了異常，可以在catch區域中再使用一組try...catch語句，即嵌套使用try...catch語句。

<script type="text/javascript" language="JavaScript">
	try{
		somestatements;
	}
	catch(exception){
		try{
			somestatements;
		}
		catch(exception){
			somestatements;
		}
	}finally{
		somestatements;
	}
</script>

本執行個體主要實作嵌套try...catch語句處理異常，在外部try區域中調用了不存在的對象，這時将彈出外部catch區域内設定的異常提示資訊的對話框，當在catch區域中調用不存在的對象時，将産生異常，這時将彈出嵌套catch區域内設定的異常提示資訊的對話框及finally區域設定的異常提示資訊對話框。

在該執行個體中，抛出第一個異常後，将彈出"try區域運作時有異常發生"提示資訊對話框，繼續執行外部catch區域的語句，程式嘗試調用頁面中并不存在的對象，将發生異常，此時彈出“catch區域運作時有異常發生”提示資訊對話框，最後執行finally區域語句，彈出相應對話框。

<script type="text/javascript" language="JavaScript">
	try{
		alert("try區域運作時有異常發生");
	}
	catch(exception){
		try{
			document.forms.input.length;
		}
		catch(exception){
			alert("catch區域運作時有異常發生");
		}
	}finally{
		alert("結束try...catch...finally語句");
	}
</script>

try...catch...finally語句中catch通常捕捉到的對象為Error對象，Error類是所有用于抛出異常的類的基類，類似于Java語言中的用于抛出異常的基類exception，JavaScript中用于抛出異常的類如下表：

JavaScript中用于抛出異常的類

類	發生異常的原因
EvalError	錯誤發生在eval()函數中
RangeError	數字的值超過JavaScript可表示的範圍
ReferenceError	使用了非法的引用
TypeError	變量的類型錯誤
URIError	在encodeURI()函數或者decodeURI()函數中發生了錯誤

Error對象有以下兩個屬性：

name:表示異常類型的字元串

message:實際的異常資訊

本執行個體将異常提示資訊放置在彈出的提示對話框中，其中包括異常的具體資訊以及異常類型的字元串。

<script type="text/javascript" language="JavaScript">
			try{
				document.forms.input.length;
			}
			catch(exception){
				alert("實際的錯誤消息為："+exception.message+"\n錯誤類型字元串為："+exception.name);
			}finally{
				alert("結束try...catch...finally語句");
			}
		</script>

在程式使用中使用throw語句可以有目的地抛出異常。

<script type="text/javascript" language="JavaScript">
	throw new Error("somestatements");
</script>

throw：抛出異常關鍵字。

本執行個體使用throw語句抛出程式中的異常。在代碼中首先定義一個變量賦給的值為1和0的商，此變量的結果為無窮大，即Infinity，如果希望自行檢驗除零的異常，可以使用throw語句抛出異常。

<script type="text/javascript" language="JavaScript">
	try{
		var num=1/0;
		if(num=="Infinity"){
			throw new Error("被除數不可以為0");
		}
	}catch(exception){
		alert(exception.message);
	}
</script>

異常是每個程式員在開發過程中無法避免的，調試對任何程式設計者來說都是一個關鍵性技能。

當程式開發者不能定位程式發生錯誤引發的異常時，可以采用代碼跟蹤等方式查找錯誤，這時可以将alert語句放在程式的不同位置，用它來顯示程式中的變量、函數傳回值等。

<script type="text/javascript" language="JavaScript">
	alert();
</script>

缺陷：這種方法的缺點在于在代碼中嵌入太多alert()語句，當調試結束時，删除這些alert語句将是一個龐大的工程。

有時程式員希望将所有的調試資訊以清單的方式放置在頁面中，這時可以使用write()方法進行調試。

<script type="text/javascript" language="JavaScript">
	document.write();
</script>

抛出自定義異常是調試JavaScript代碼的最佳途徑，其使用了try...catch語句以及throw機制

<script type="text/javascript" language="JavaScript">
	try{
		throw(somestatements);
	}catch(exception){
		alert(exception.message);
	}
</script>

本執行個體主要使用自定義異常消息進行調試。在代碼中定義了一個函數，首先判斷函數參數的個數，如果小于2，将抛出自定義異常，然後判斷函數第二個參數是否為0，如果為0，将彈出異常提示資訊對話框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>try 事件</title>
		<script type="text/javascript" language="JavaScript">
			function test(num1,num2){
				try{
					if(arguments.length<2){             //如果參數的個數小于2
						throw new Error("參數個數不夠");   //抛出異常
					}
					if(num1/num2=="Infinity"){           //第二個參數為0
						throw new Error("被除數不可以為0"); //抛出異常
					}
				}catch(exception){          /*在catch區域彈出異常提示資訊*/
					alert(exception.message);
				}
			}
		</script>	
	</head>
	<body >
		<script language="JavaScript">
			test(1);
			test(1,0);
		</script>
	</body>
</html>

本次主要學習了JavaScript中幾種異常處理機制。隻有正确并快速的找出程式的錯誤原因，才可以提高程式開發和維護的效率。

JavaScript學習（十五）----程式調試與錯誤處理IE浏覽器内鍵的錯誤報告處理異常JavaScript 語言調試技巧小結

繼續閱讀

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

面試題解析：你接口測試是怎麼做的？

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

layui多任務上傳添加進度條

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method