javaScript中的try catch
阿新 • • 發佈：2018-12-03
直接上圖上程式碼吧！簡單明瞭！
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>測試在head標籤中加入br標籤後會導致javaScript的insertBefore函數出錯的問題</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/body.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mark.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/console.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/console.js"></script> </head> <body> <h2>測試在head標籤中加入br標籤後會導致javaScript的insertBefore函數出錯的問題</h2> <input type="button" value="測試在head標籤中加入br標籤後會導致javaScript的insertBefore函數出錯的問題" onclick="testBrTag()"> <br><br> <h3>測試在javaScript中的try catch</h3> 1. 任何數值除以0都會導致錯誤而終止程式執行。但是在 JavaScript 中，會返回出特殊的值，因此不會影響程式的執行。<br/> 2. 比0大的數除以0，則會得到無窮大，所以 js 用 Infinity 來顯示出來<br/> <a href="http://www.w3school.com.cn/js/js_errors.asp" target="_blank"> JavaScript 錯誤 - Throw、Try 和 Catch </a> <input type="button" value="測試沒使用try catch的時候，程式是否會中斷(情況1)" onclick="testTryCatch()"><br/> <input type="button" value="測試沒使用try catch的時候，程式是否會中斷(情況2)" onclick="testTryCatch2()"><br/> <input type="button" value="測試使用了try catch的時候，程式是否會繼續執行" onclick="testTryCatch3()"><br/> Throw 語句<br/> throw 語句允許我們建立自定義錯誤。<br/> 正確的技術術語是：建立或丟擲異常（exception）。<br/> 如果把 throw 與 try 和 catch 一起使用，那麼您能夠控制程式流，並生成自定義的錯誤訊息。<br/> 語法<br/> throw exception<br/> 異常可以是 JavaScript 字串、數字、邏輯值或物件。<br/> <h2>請輸入一個5到10之間的數字:</h2> <input id="demo" type="text"> <button type="button" onclick="myFunction()">測試輸入</button> <h2 id="mess"></h2> </body> <script type="text/javascript"> //測試在head標籤中加入br標籤後會導致javaScript的insertBefore函數出錯的問題 function testBrTag() { console.log("我是testBrTag()函式"); var linkNode = document.createElement('link'); linkNode.rel = "stylesheet"; linkNode.type = "text/css"; linkNode.href = "css/console.css"; //能獲得物件 var firstScriptNode = document.getElementsByTagName('script')[0]; //能獲得物件 var test1 = linkNode; var test2 = firstScriptNode; //能獲得物件 var test3 = document.getElementsByTagName('head'); //能獲得物件 var test4 = document.getElementsByTagName('head')[0]; //唯獨這句話報錯(報錯資訊:NotFoundError: Node was not found),之所以報錯就是因為head標籤中不小心多加上了一個br標籤才導致的報錯 document.getElementsByTagName('head')[0].insertBefore(linkNode, firstScriptNode); console.log("我是testBrTag()函式中的最後一行程式碼"); } </script> <script type="text/javascript"> //debug("測試在head標籤中加入br標籤後會導致javaScript的insertBefore函數出錯的問題"); </script> <script type="text/javascript"> function testTryCatch() { var a = 66; var b = 0; console.log("測試javaScript中某行程式碼如果報錯，後面的語句是否會繼續執行?(即如果某行程式碼報錯，程式是否會中斷?)"); console.log("a = " + a); console.log("b = " + b); console.log("我老家在江西省贛州市於都縣"); /* 1. 任何數值除以0都會導致錯誤而終止程式執行。但是在 JavaScript 中，會返回出特殊的值，因此不會影響程式的執行。 2. 比0大的數除以0，則會得到無窮大，所以 js 用 Infinity 來顯示出來 */ var c = a / b; //在javaScript中得到Infinity console.log("c = " + c); console.log("好久好久沒寫javascript程式碼了"); console.log("呵呵"); var x = 0 / 0; //NaN; var y = 1 / 0; //Infinity; var z = 1 / 0 * 0; //NaN; console.log("x = " + x + " y = " + y + " z = " + z); // try { // } catch (e) { // } } //js中出現錯誤，程式會中斷 function testTryCatch2() { console.log("hello"); alerts("Welcome guest!"); //故意寫錯，故意在alert後面加個s var text = "中國"; console.log("text = " + text); console.log("上面的alert()函式多了一個s就會報錯,並且會導致javascript中止執行，後面的程式碼也不會執行了"); } //js中產生錯誤，因為錯誤被捕捉了，所以後續的程式碼能夠繼續執行 function testTryCatch3() { console.log("hello"); try { alerts("Welcome guest!"); //故意寫錯，故意在alert後面加個s } catch (e) { console.log("####捕捉到錯誤產生,錯誤資訊描述:" + e.message); console.log("****捕捉到錯誤產生,錯誤資訊描述:" + e); } var text = "中國"; console.log("text = " + text); console.log("因為錯誤被捕捉了，所以後續的程式碼能夠繼續執行"); } function myFunction() { try { //取元素的值 //var textValue = document.getElementById("demo2").value;//注意：如果這行程式碼出錯，也會丟擲一個錯誤，也會在catch塊中捕捉到該錯誤 var textValue = document.getElementById("demo").value;//注意：如果這行程式碼出錯，也會丟擲一個錯誤，也會在catch塊中捕捉到該錯誤 //自定義錯誤訊息 if (textValue == "") throw "值為空"; //根據獲取的值，丟擲錯誤 if (isNaN(textValue)) throw "不是數字"; if (textValue > 10) throw "太大"; if (textValue < 5) throw "太小"; var h2Tag = document.getElementById("mess"); //抓住上面throw丟擲的錯誤，給h2標籤顯示 h2Tag.innerHTML = "正常"; } catch (err) { var h2Tag = document.getElementById("mess"); //抓住上面throw丟擲的錯誤，給h2標籤顯示 h2Tag.innerHTML = "錯誤：" + err; //最好是直接使用err物件，我個人不推薦使用err.message這種方式，因為如果是自定義錯誤訊息，那麼err.message就會得到undefined console.log("####捕捉到錯誤產生,錯誤資訊描述:" + err.message); console.log("****捕捉到錯誤產生,錯誤資訊描述:" + err); } var hometown = "江西省贛州市於都縣"; console.log("hometown = " + hometown); console.log("因為錯誤被捕捉了，所以後續的程式碼能夠繼續執行"); } </script> </html>