JavaScript - Xử lý lỗi & ngoại lệ
Có ba loại lỗi trong lập trình: (a) Lỗi cú pháp, (b) Lỗi thời gian chạy và (c) Lỗi logic.
Lỗi cú pháp
Lỗi cú pháp, còn được gọi là parsing errors, xảy ra tại thời điểm biên dịch trong các ngôn ngữ lập trình truyền thống và tại thời điểm diễn giải trong JavaScript.
Ví dụ: dòng sau đây gây ra lỗi cú pháp vì nó thiếu dấu ngoặc đóng.
<script type = "text/javascript">
<!--
window.print(;
//-->
</script>Khi lỗi cú pháp xảy ra trong JavaScript, chỉ mã chứa trong cùng một chuỗi với lỗi cú pháp bị ảnh hưởng và phần còn lại của mã trong các chuỗi khác được thực thi giả sử không có gì trong đó phụ thuộc vào mã chứa lỗi.
Lỗi thời gian chạy
Lỗi thời gian chạy, còn được gọi là exceptions, xảy ra trong quá trình thực thi (sau khi biên dịch / thông dịch).
Ví dụ: dòng sau đây gây ra lỗi thời gian chạy vì ở đây cú pháp đúng, nhưng trong thời gian chạy, nó đang cố gọi một phương thức không tồn tại.
<script type = "text/javascript">
<!--
window.printme();
//-->
</script>Các ngoại lệ cũng ảnh hưởng đến luồng mà chúng xảy ra, cho phép các luồng JavaScript khác tiếp tục thực thi bình thường.
Lỗi lôgic
Lỗi logic có thể là loại lỗi khó theo dõi nhất. Những lỗi này không phải là kết quả của lỗi cú pháp hoặc lỗi thời gian chạy. Thay vào đó, chúng xảy ra khi bạn mắc lỗi logic điều khiển tập lệnh của bạn và bạn không nhận được kết quả như mong đợi.
Bạn không thể mắc phải những lỗi đó, vì nó phụ thuộc vào yêu cầu kinh doanh của bạn loại logic nào bạn muốn đưa vào chương trình của mình.
Tuyên bố thử ... bắt ... cuối cùng
Các phiên bản mới nhất của JavaScript đã thêm các khả năng xử lý ngoại lệ. JavaScript thực hiệntry...catch...finally xây dựng cũng như throw toán tử để xử lý các ngoại lệ.
Bạn có thể catch do lập trình viên tạo và runtime ngoại lệ, nhưng bạn không thể catch Lỗi cú pháp JavaScript.
Đây là try...catch...finally cú pháp khối -
<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>Các try khối phải được theo sau bởi chính xác một catch khối hoặc một finallykhối (hoặc một trong cả hai). Khi một ngoại lệ xảy ra trongtry khối, ngoại lệ được đặt trong e và catchkhối được thực thi. Tùy chọnfinally khối thực thi vô điều kiện sau khi thử / bắt.
Ví dụ
Đây là một ví dụ trong đó chúng tôi đang cố gắng gọi một hàm không tồn tại, đến lượt nó lại đưa ra một ngoại lệ. Hãy để chúng tôi xem nó hoạt động như thế nào mà không có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>Đầu ra
Bây giờ chúng ta hãy cố gắng bắt ngoại lệ này bằng cách sử dụng try...catchvà hiển thị thông báo thân thiện với người dùng. Bạn cũng có thể chặn thông báo này nếu bạn muốn ẩn lỗi này với người dùng.
<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>Đầu ra
Bạn có thể dùng finallykhối sẽ luôn thực thi vô điều kiện sau lần thử / bắt. Đây là một ví dụ.
<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>Đầu ra
Tuyên bố ném
Bạn có thể dùng throwtuyên bố để nâng cao các ngoại lệ cài sẵn của bạn hoặc các ngoại lệ tùy chỉnh của bạn. Sau đó, những ngoại lệ này có thể được ghi lại và bạn có thể thực hiện một hành động thích hợp.
Thí dụ
Ví dụ sau minh họa cách sử dụng throw tuyên bố.
<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>Đầu ra
Bạn có thể nêu ra một ngoại lệ trong một hàm bằng cách sử dụng một chuỗi, số nguyên, Boolean hoặc một đối tượng và sau đó bạn có thể nắm bắt ngoại lệ đó trong cùng một hàm như chúng ta đã làm ở trên hoặc trong một hàm khác bằng cách sử dụng try...catch khối.
Phương thức onerror ()
Các onerrortrình xử lý sự kiện là tính năng đầu tiên giúp xử lý lỗi trong JavaScript. Cácerror sự kiện được kích hoạt trên đối tượng cửa sổ bất cứ khi nào một ngoại lệ xảy ra trên trang.
<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>Đầu ra
Các onerror trình xử lý sự kiện cung cấp ba phần thông tin để xác định bản chất chính xác của lỗi -
Error message - Thông báo tương tự mà trình duyệt sẽ hiển thị cho lỗi đã cho
URL - Tệp đã xảy ra lỗi
Line number- Số dòng trong URL nhất định gây ra lỗi
Đây là ví dụ để hiển thị cách trích xuất thông tin này.
Thí dụ
<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>Đầu ra
Bạn có thể hiển thị thông tin đã trích xuất theo bất kỳ cách nào bạn nghĩ là tốt hơn.
Bạn có thể sử dụng một onerror , như hình dưới đây, để hiển thị thông báo lỗi trong trường hợp có bất kỳ sự cố nào khi tải hình ảnh.
<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />Bạn có thể dùng onerror với nhiều thẻ HTML để hiển thị các thông báo thích hợp trong trường hợp có lỗi.