07/09/2018, 14:52

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.

Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • 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
0