Các lệnh xử lý lỗi trong JavaScript

- JavaScript cung cấp cho ta bốn loại lệnh dùng để kiểm soát và xử lý lỗi: try, catch, throw, finally

1) Lệnh "try" và "catch" trong JavaScript

- Như chúng ta đã biết:

Khi thực thi một đoạn mã JavaScript, nếu một câu lệnh nào đó bị lỗi thì việc thực thi sẽ kết thúc
(tất cả những câu lệnh nằm phía sau câu lệnh bị lỗi sẽ không được thực thi)

- Từ đây, lệnh try giúp chúng ta tránh tình trạng này.

- Lệnh try được dùng để kiểm tra (thực thi) một đoạn mã, nếu đoạn mã đó có chứa câu lệnh bị lỗi thì những câu lệnh nằm phía sau câu lệnh bị lỗi sẽ không được thực thi. Tuy nhiên, những câu lệnh nằm ngoài lệnh try thì vẫn thực thi bình thường.

- Lệnh try cần phải sử dụng kèm với lệnh catch hoặc lệnh finally

(Nhưng thông thường thì lệnh try được sử dụng chung với lệnh catch nhiều hơn)

- Lệnh catch dùng để xác định một đoạn mã và đoạn mã đó sẽ được thực thi nếu đoạn mã bên trong lệnh try có chứa câu lệnh bị lỗi (Điều đó đồng nghĩa với việc: nếu đoạn mã bên trong lệnh try không chứa câu lệnh bị lỗi thì đoạn mã bên trong lệnh catch sẽ không được thực thi).

Ví dụ:

- Câu lệnh aaaleert("<p>Tài liệu học JavaScript</p>") bên trong lệnh try của đoạn mã phía dưới bị lỗi. Nên hai câu lệnh còn lại nằm phía sau nó không được thực thi.

- Vì bên trong lệnh try có chứa câu lệnh bị lỗi nên đoạn mã nằm bên trong lệnh catch mới được thực thi.

=> Và đặc biệt là những câu lệnh nằm ngoài lệnh try ... catch vẫn được thực thi bình thường.

<script>
    document.write("<p>Tài liệu học HTML</p>");
    try{
        document.write("<p>Tài liệu học CSS</p>");
        aaaleert("<p>Tài liệu học JavaScript</p>");
        document.write("<p>Tài liệu học MySQL</p>");
        document.write("<p>Tài liệu học PHP</p>");
    }catch(err){
        document.write("<p>Bên trong lệnh try chứa câu lệnh bị lỗi</p>");
        document.write("<p>Bên trong lệnh try chứa câu lệnh bị lỗi</p>");
        document.write("<p>Bên trong lệnh try chứa câu lệnh bị lỗi</p>");
    }
    document.write("<p>Tài liệu học PHP</p>");
</script>

Xem ví dụ

- Lưu ý: Lệnh catch phải có một tham số (điển hình ví dụ trên là tham số err), tham số này dùng để lưu trữ một đối tượng, đối tượng này chứa các thông tin về lỗi của câu lệnh bị lỗi trong lệnh try.

Ví dụ:

Hiển thị thông tin về lỗi của câu lệnh bị lỗi nằm trong lệnh try.

<script>
    try{
        document.write("<p>Tài liệu học CSS</p>");
        aaaleert("<p>Tài liệu học JavaScript</p>");
        document.write("<p>Tài liệu học MySQL</p>");
        document.write("<p>Tài liệu học PHP</p>");
    }catch(err){
        document.write("THÔNG TIN LỖI: " + err);
    }
</script>

Xem ví dụ

2) Lệnh "throw" trong JavaScript

- Lệnh throw thường được đặt bên trong lệnh try

- Lệnh throw có chức năng ném ra một lỗi (hoặc cũng có thể nói là tạo ra một lỗi)

- Lưu ý: Sau khi lệnh throw "được thực thi" thì một lỗi sẽ được tạo ra, điều đó cũng đồng nghĩa với việc câu lệnh bị lỗi. Do đó, những câu lệnh còn lại nằm phía sau lệnh throw sẽ không được thực thi.

Ví dụ 1:

Bên trong lệnh try của đoạn mã phía dưới, tôi sử dụng lệnh throw để tạo một lỗi có nội dung là:
"Chất lượng bài viết chưa được tối ưu"

<script>
    try{
        document.write("<p>Tài liệu học HTML</p>");
        throw "Chất lượng bài viết chưa được tối ưu";
        document.write("<p>Tài liệu học CSS</p>");
        document.write("<p>Tài liệu học JavaScript</p>");
    }catch(err){
        document.write("THÔNG TIN LỖI: " + err);
    }
</script>

Xem ví dụ

Ví dụ 2:

Dùng lệnh throw để kiểm tra giá trị được nhập

<script>
    function KiemTraDuLieu() {
        document.getElementById("demo").innerHTML = "";
        var number = document.getElementById("number").value;
        try{ 
            if(number == ""){
                throw "Bạn chưa nhập giá trị";
            }else if(isNaN(number)){
                throw "Giá trị bạn nhập không phải là một số";
            }else if(number < 1){
                throw "Giá trị vừa nhập nhỏ hơn giá trị cho phép";
            }else if(number > 10){
                throw "Giá trị vừa nhập lớn hơn giá trị cho phép";
            }
            document.getElementById("demo").innerHTML = "Hợp lệ";
        }
        catch(err){
            document.getElementById("demo").innerHTML = err;
        }
    }
</script>

Xem ví dụ

3) Lệnh "finally" trong JavaScript

- Lệnh finally thường được đặt phía sau lệnh try hoặc try ... catch

- Lệnh finally dùng để thực thi một đoạn mã mặc định
(mặc cho đoạn mã bên trong lệnh try có chứa câu lệnh bị lỗi hay không)

Ví dụ:

<script>
    function KiemTraDuLieu() {
        document.getElementById("demo").innerHTML = "";
        var number = document.getElementById("number").value;
        try{ 
            if(number == ""){
                throw "Bạn chưa nhập giá trị";
            }else if(isNaN(number)){
                throw "Giá trị bạn nhập không phải là một số";
            }else if(number < 1){
                throw "Giá trị vừa nhập nhỏ hơn giá trị cho phép";
            }else if(number > 10){
                throw "Giá trị vừa nhập lớn hơn giá trị cho phép";
            }
            document.getElementById("demo").innerHTML = "Hợp lệ";
        }
        catch(err){
            document.getElementById("demo").innerHTML = err;
        }
        finally{
            document.getElementById("number").value = "";
        }
    }
</script>

Xem ví dụ

4) Đối tượng lưu trữ thông tin lỗi

- Lệnh catch bao giờ cũng bắt buộc phải có một tham số, tham số này dùng để lưu trữ một đối tượng và đối tượng này sẽ chứa các thông tin về lỗi của câu lệnh bị lỗi trong lệnh try.

- Đối tượng lưu trữ thông tin lỗi này có hai thuộc tính:

name (trả về tên loại lỗi của câu lệnh bị lỗi)
message (trả về thông báo lỗi của câu lệnh bị lỗi)

- Loại lỗi được chia thành năm dạng cơ bản:

ReferenceError	Xảy ra khi sử dụng một biến chưa được khai báo.
URIError	Xảy ra khi sử dụng các ký tự không hợp lệ trong các hàm xử lý URI.
TypeError	Xảy ra khi sử dụng các giá trị có kiểu dữ liệu nằm ngoài mong đợi.
RangeError	Xảy ra khi sử dụng một tham số có giá trị nằm ngoài phạm vi giá trị cho phép
SyntaxError	Xảy ra khi câu lệnh bị sai cú pháp.

Lưu ý: Các thuộc tính này có thể sẽ khác nhau trên các trên các trình duyệt khác nhau, nên bạn chỉ nên sử dụng những thuộc tính này trong quá trình kiểm tra, thử nghiệm.

4.1) ReferenceError

- ReferenceError xảy ra khi ta sử dụng một biến chưa được khai báo.

Ví dụ:

<script>
    try{
        document.write(text);
    }catch(err){
        document.write(err);
        document.write("Loại lỗi: " + err.name);
        document.write("Thông báo lỗi: " + err.message);
    }
</script>

Xem ví dụ

4.2) URIError

- URIError xảy ra khi ta sử dụng các ký tự không hợp lệ trong các hàm xử lý URI.

Ví dụ:

<script>
    try{
        var a = decodeURI("%%%");
    }catch(err){
        document.write(err);
        document.write("Loại lỗi: " + err.name);
        document.write("Thông báo lỗi: " + err.message);
    }
</script>

Xem ví dụ

4.3) TypeError

- TypeError xảy ra khi ta sử dụng các giá trị có kiểu dữ liệu nằm ngoài mong đợi.

Ví dụ:

<script>
    try{
        var numb = 1;
        numb.toUpperCase();
    }catch(err){
        document.write(err);
        document.write("Loại lỗi: " + err.name);
        document.write("Thông báo lỗi: " + err.message);
    }
</script>

Xem ví dụ

4.4) RangeError

- RangeError xảy ra khi ta sử dụng một tham số có giá trị nằm ngoài phạm vị giá trị cho phép.

Ví dụ:

<script>
    try{
        var numb = 12.4514;
        numb.toPrecision(500);
    }catch(err){
        document.write(err);
        document.write("Loại lỗi: " + err.name);
        document.write("Thông báo lỗi: " + err.message);
    }
</script>

Xem ví dụ

4.5) SyntaxError

- SyntaxError xảy ra khi câu lệnh bị sai cú pháp.

Ví dụ:

<script>
    try{
        eval("alert('Lập Trình Web)");
    }catch(err){
        document.write(err);
        document.write("Loại lỗi: " + err.name);
        document.write("Thông báo lỗi: " + err.message);
    }
</script>

Xem ví dụ