Các lỗi trong JavaScript – Throw và Try rồi Catch

Các câu lệnh try cho phép bạn thử nghiệm một khối mã lỗi.

Các câu lệnh catch cho phép bạn xử lý các lỗi.

Các câu lệnh throw cho phép bạn tạo ra các lỗi tùy chỉnh.

Các câu lệnh finally cho phép bạn thực thi mã, sau khi trycatch, bất kể kết quả thế nào.

Xuất hiện lỗi!

Khi bạn thực thi code JavaScript, các lỗi khác nhau có thể xuất hiện.

Các lỗi có thể được tạo ra bởi các dòng code lỗi của lập trình viên, lỗi cũng có thể do nhập liệu sai và những thứ không lường trước khác:

Ví dụ

<!DOCTYPE html>
<html>
<body><p id=”demo”></p><script>
try {
adddlert(“Welcome guest!”);
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.message;
}
</script>

</body>
</html>

 

Trong ví dụ trên, chúng ta đã có một lỗi đánh máy trong các mã (trong khối try).

Các khối catch bắt lỗi, và thực thi mã để xử lý nó.

JavaScript try và catch

Câu lệnh try cho phép bạn định nghĩa một khối code để kiểm tra các lỗi trong khi thực thi.

Câu lệnh catch cho phép bạn định nghĩa một khối code để thực thi nếu một lỗi xuất hiện trong khối try.

Các câu lệnh try và catch thành cặp đôi trong JavaScript:

try {
Khối code để try
}

catch(err) {
Khối mã để xử lý lỗi }

JavaScript ném ra ngoại lệ

Khi lỗi xuất hiện, JavaScript sẽ không dừng như bình thường được và tạo ra một thông báo lỗi.

Thuật ngữ kỹ thuật cho nó là: JavaScript sẽ ném ra một ngoại lệ.

Câu lệnh ném

Câu lệnh throw cho phép bạn tạo ra một lỗi tuỳ chỉnh.

Thuật ngữ kỹ thuật là bạn ném ra một ngoại lệ.

Một ngoại lệ có thể là chuỗi JavaScript, một số, một Boolean hoặc một Đối tượng:

throw “Quá lớn”;    // ném ra một văn bản
throw 500;          // ném ra một số

Nếu bạn sử dụng throw kết hợp với try và catch, bạn có thể điều chỉnh lưu lượng chương trình và tạo ra các thông báo lỗi tuỳ chỉnh.

Ví dụ về xác nhận thông tin nhập vào

Ví dụ này kiểm tra đầu vào. Nếu giá trị là sai, một ngoại lệ (err) được ném ra.

Ngoại lệ (err) được tóm bởi lệnh catch và một thông báo lỗi tùy chỉnh được hiển thị:

<!DOCTYPE html>
<html>
<body><p>Hãy nhập một số trong khoảng từ 5 đến 10:</p><input id=”demo” type=”text”>
<button type=”button” onclick=”myFunction()”>Kiểm tra giá trị nhập vào</button>
<p id=”message”></p>

<script>
function myFunction() {
var message, x;
message = document.getElementById(“message”);
message.innerHTML = “”;
x = document.getElementById(“demo”).value;
try {
if(x == “”) throw “rỗng”;
if(isNaN(x)) throw “không phải là số”;
x = Number(x);
if(x < 5) throw “quá nhỏ”;
if(x > 10) throw “quá lớn”;
}
catch(err) {
message.innerHTML = “Input is ” + err;
}
}
</script>

</body>
</html>

HTML Validation

Đoạn code trên chỉ là ví dụ.

Các trình duyệt hiện đại sẽ thường xuyên kết hợp cả JavaScript và HTML để chuẩn hoá, xác nhận thông tin. Sử dụng các luật xác thực có sẵn được định nghĩa trong các thuộc tính của HTML:

<input id=”demo” type=”number” min=”5″ max=”10″ step=”1″

Bạn có thể đọc thêm về chuẩn hoá form trong bài viết khác của chúng tôi.

Câu lệnh finally

Câu lệnh finally cho phép bạn thực thi code, sau khi trycatch, bất kể kết quả thế nào:

try {
Khối mã để try
}

catch(err) {
Khối mã để xử lý lỗi
}

finally {
Khối mã được thực hiện bất kể kết quả của try / catch
}

Ví dụ

function myFunction() {
var message, x;
message = document.getElementById(“message”);
message.innerHTML = “”;
x = document.getElementById(“demo”).value;
try {
if(x == “”) throw “rỗng”;
if(isNaN(x)) throw “không phải là số”;
x = Number(x);
if(x > 10) throw “quá lớn”;
if(x < 5) throw “quá nhỏ”;
}
catch(err) {
message.innerHTML = “Error: ” + err + “.”;
}
finally {
document.getElementById(“demo”).value = “”;
}
}

Leave a Comment