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.
Syntax Errors
Lỗi cú pháp, còn được gọi là lỗi phân tích cú pháp, 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 phiên dịch trong JavaScript.
Ví dụ: dòng sau gây ra lỗi cú pháp vì thiếu dấu ngoặc đơn đóng.
<script type = "text/javascript">
<!--
window.print(;
//-->
</script>
Khi xảy ra lỗi cú pháp trong JavaScript, chỉ mã chứa trong cùng một luồng có lỗi cú pháp bị ảnh hưởng và phần còn lại của mã trong các luồng khác được thực thi giả sử không có gì trong đó phụ thuộc vào mã chứa lỗi.
Runtime Errors
Lỗi thời gian chạy, còn được gọi là ngoại lệ, xảy ra trong quá trình thực thi (sau khi biên dịch/diễn giải).
Ví dụ: dòng sau 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.
Logical Errors
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 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 mình và bạn không nhận được kết quả như mong đợi.
Bạn không thể bắt những lỗi đó, bởi vì nó phụ thuộc vào yêu cầu kinh doanh của bạn, loại logic bạn muốn đưa vào chương trình của mình.
The try…catch…finally Statement
Các phiên bản mới nhất của JavaScript đã thêm khả năng xử lý ngoại lệ. JavaScript triển khai cấu trúc try…catch…finally cũng như toán tử ném để xử lý các ngoại lệ.
Bạn có thể phát hiện các ngoại lệ do lập trình viên tạo và thời gian chạy, nhưng bạn không thể phát hiện các lỗi cú pháp JavaScript.
Đây là cú pháp khối try…catch…cuối cùng –
<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>
Khối thử phải được theo sau bởi chính xác một khối bắt hoặc một khối cuối cùng (hoặc một trong cả hai). Khi một ngoại lệ xảy ra trong khối try, ngoại lệ đó được đặt trong e và khối catch được thực thi. Khối cuối cùng tùy chọn thực thi vô điều kiện sau khi thử/bắt.
Ví dụ
Đây là một ví dụ mà chúng tôi đang cố gắng gọi một chức năng không tồn tại, do đó sẽ đư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ần 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>
Bây giờ chúng ta hãy thử bắt ngoại lệ này bằng cách sử dụng try…catch và hiển thị một 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 khỏ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>
Bạn có thể sử dụng khối cuối cùng 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>
The throw Statement
Bạn có thể sử dụng câu lệnh ném để đưa ra các ngoại lệ tích hợp sẵn hoặc các ngoại lệ tùy chỉnh của mình. Sau đó, những ngoại lệ này có thể được ghi lại và bạn có thể thực hiện hành động thích hợp.
Ví dụ
Ví dụ sau minh họa cách sử dụng câu lệnh ném.
<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>
Bạn có thể đưa 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 khối try…catch.
The onerror() Method
Trình xử lý sự kiện onerror là tính năng đầu tiên hỗ trợ xử lý lỗi trong JavaScript. Sự kiện lỗi được kích hoạt trên đối tượng cửa sổ bất cứ khi nào có 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>
Trình xử lý sự kiện onerror cung cấp ba mẩu thông tin để xác định bản chất chính xác của lỗi –
Thông báo lỗi – 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
Số dòng− Số dòng trong URL đã cho gây ra lỗi
Dưới đây là ví dụ cho thấy làm thế nào để trích xuất thông tin này.
Ví 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>
Bạn có thể hiển thị thông tin được trích xuất theo bất kỳ cách nào bạn cho là tốt hơn.
Bạn có thể sử dụng phương thức onerror, như hình bên dưới, để 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.')" />