Các lỗi trong JavaScript – Lệnh Throw và Try
Câu lệnh try cho phép bạn kiểm tra một khối mã để tìm lỗi. Câu lệnh catch cho phép bạn xử lý lỗi. Câu lệnh throw cho phép bạn tạo các lỗi tùy chỉnh. Câu lệnh finally cho phép bạn thực thi mã, sau khi cố gắng try và catch, bất kể kết quả. Lỗi trong ...
Câu lệnh try cho phép bạn kiểm tra một khối mã để tìm lỗi.
Câu lệnh catch cho phép bạn xử lý lỗi.
Câu lệnh throw cho phép bạn tạo các lỗi tùy chỉnh.
Câu lệnh finally cho phép bạn thực thi mã, sau khi cố gắng try và catch, bất kể kết quả.
Lỗi trong JavaScript
Khi thực hiện mã JavaScript, các lỗi khác nhau có thể xảy ra. Lỗi có thể là lỗi mã hóa được thực hiện bởi lập trình viên, lỗi do dữ liệu nhập vào sai và những lỗi không lường trước trước được.
Trong ví dụ này sẽ tạo ra một lỗi bằng cách cảnh báo như adddlert:
<p id=”demo”></p>
<script>
try {
adddlert(“Welcome guest!”);
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.message;
}
</script>
JavaScript nhận adddlert như là một lỗi, và thực hiện mã catch để xử lý.
Lệnh try và catch
Câu lệnh try cho phép bạn xác định một khối mã để kiểm tra lỗi trong khi nó đang được thực thi.
Câu lệnh catch cho phép bạn xác định một khối mã sẽ được thực hiện, nếu xảy ra lỗi trong khối try.
Các câu lệnh try và catch sử dụng đồng thời:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
Lệnh throw
Khi một lỗi xảy ra, JavaScript sẽ tạm dừng và tạo ra một thông báo lỗi. Đối tượng Error sẽ được tạo ra với hai thuộc tính name và message.
Câu lệnh throw cho phép bạn tạo ra một lỗi tuỳ chỉnh. Về mặt kỹ thuật bạn có thể hiểu là throw an exception (throw an error). Đó có thể là một chuỗi, số, Boolean hay một đối tượng.
throw “Too big”; // throw a text
throw 500; // throw a number
Nếu bạn sử dụng lệnh throw cùng với try và catch, bạn có thể kiểm soát luồng chương trình và tạo ra các thông báo lỗi tùy chỉnh.
<!DOCTYPE html>
<html>
<body><p>Please input a number between 5 and 10:</p>
<input id=”demo” type=”text”>
<button type=”button” onclick=”myFunction()”>Test Input</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 “empty”;
if(isNaN(x)) throw “not a number”;
x = Number(x);
if(x < 5) throw “too low”;
if(x > 10) throw “too high”;
}
catch(err) {
message.innerHTML = “Input is ” + err;
}
}
</script></body>
</html>
Xác nhận HTML
Đoạn mã ở trên chỉ là một ví dụ. Các trình duyệt hiện nay thường sử dụng kết hợp JavaScript và tích hợp xác nhận HTML, sử dụng các quy tắc xác nhận được xác định trước trong các thuộc tính HTML:
<input id=”demo” type=”number” min=”5″ max=”10″ step=”1″
Lệnh finally
Câu lệnh finally cho phép bạn thực thi mã, sau khi cố gắng try và catch, bất kể kết quả:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}
Ví dụ:
function myFunction() {
var message, x;
message = document.getElementById(“message”);
message.innerHTML = “”;
x = document.getElementById(“demo”).value;
try {
if(x == “”) throw “is empty”;
if(isNaN(x)) throw “is not a number”;
x = Number(x);
if(x > 10) throw “is too high”;
if(x < 5) throw “is too low”;
}
catch(err) {
message.innerHTML = “Error: ” + err + “.”;
}
finally {
document.getElementById(“demo”).value = “”;
}
}
Đối tượng Error
JavaScript có đối tượng error được xây dựng để cung cấp thông tin lỗi khi xảy ra lỗi. Đối tượng error cung cấp hai thuộc tính hữu ích: name và message.
| Thuộc tính | Mô tả |
| name | Thiết lập hoặc trả về một tên lỗi |
| message | Thiết lập hoặc trả lại thông báo lỗi (một chuỗi) |
Sáu giá trị khác nhau có thể được trả về bởi thuộc tính name:
| Error Name | Mô tả |
| EvalError | Đã xảy ra lỗi trong hàm eval() |
| RangeError | Một số “out of range” đã xảy ra |
| ReferenceError | Một tài liệu tham khảo bất hợp pháp đã xảy ra |
| SyntaxError | Đã xảy ra lỗi cú pháp |
| TypeError | Đã xảy ra lỗi kiểu |
| URIError | Đã xảy ra lỗi trong encodeURI() |
Sáu giá trị khác nhau được mô tả dưới đây:
Lỗi Eval
Một EvalError cho biết một lỗi trong hàm eval().
Các phiên bản JavaScript mới hơn không nêu bất kỳ EvalError nào. Sử dụng SyntaxError thay thế.
Lỗi Range
Một RangeError được nêu ra nếu bạn sử dụng một số nằm ngoài phạm vi các giá trị pháp lý. Ví dụ: bạn không thể đặt số chữ số có ý nghĩa của một số là 500.
var num = 1;
try {
num.toPrecision(500); // A number cannot have 500 significant digits
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.name;
}
Lỗi Reference
Một lỗi ReferenceError được nêu ra nếu bạn sử dụng (reference) một biến chưa được khai báo:
var x;
try {
x = y + 1; // y cannot be referenced (used)
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.name;
}
Lỗi Syntax (cú pháp)
Một SyntaxError được nêu ra nếu bạn cố gắng để đánh giá mã với một lỗi cú pháp.
try {
eval(“alert(‘Hello)”); // Missing ‘ will produce an error
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.name;
}
Lỗi Type
Một lỗi TypeError được nêu ra nếu bạn sử dụng một giá trị nằm ngoài phạm vi các kiểu dự kiến:
var num = 1;
try {
num.toUpperCase(); // You cannot convert a number to upper case
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.name;
}
Lỗi URI
Một URIError được ném ra nếu bạn sử dụng các ký tự không được chấp thuận trong một hàm URI:
try {
decodeURI(“%%%”); // You cannot URI decode these percent signs
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.name;
}
Thuộc tính lỗi đối tượng không chính thống
Mozilla và Microsoft định nghĩa một số thuộc tính đối tượng lỗi không chính thống:
fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)
Không sử dụng các thuộc tính này trong các trang web được public. Chúng sẽ không hoạt động trên tất cả các trình duyệt.
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
