40. JS Errors

Σφάλματα JavaScript – Throw and Try to Catch


Η δήλωση try σας επιτρέπει να δοκιμάσετε ένα μπλοκ κώδικα για σφάλματα.

Η δήλωση catch σας επιτρέπει να χειριστείτε το σφάλμα.

Η δήλωση throw σας επιτρέπει να δημιουργήσετε προσαρμοσμένα σφάλματα.

Η δήλωση finally σας επιτρέπει να εκτελέσετε κώδικα, μετά από try and catch, ανεξάρτητα από το αποτέλεσμα.


Σφάλματα θα συμβούν!

Κατά την εκτέλεση κώδικα JavaScript, μπορεί να προκύψουν διαφορετικά σφάλματα.

Τα σφάλματα μπορεί να είναι σφάλματα κωδικοποίησης που έγιναν από τον προγραμματιστή, σφάλματα λόγω λανθασμένης εισόδου και άλλα απρόβλεπτα πράγματα.

Παράδειγμα

Σε αυτό το παράδειγμα έχουμε γράψει το alert ως adddlert για να προκληθεί σκόπιμα ένα σφάλμα:

<p id="demo"></p>

<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>

Δοκιμάστε τον εαυτό σας »

Η JavaScript καταγράφει το adddlert ως σφάλμα και εκτελεί τον κώδικα catch για να το χειριστεί.


Οι JavaScript δηλώσεις try and catch

Η δήλωση try σάς επιτρέπει να ορίσετε ένα μπλοκ κώδικα που θα δοκιμαστεί για σφάλματα κατά την εκτέλεση.

Η δήλωση catch σάς επιτρέπει να ορίσετε ένα μπλοκ κώδικα που θα εκτελεστεί, εάν παρουσιαστεί σφάλμα στο δοκιμαστικό μπλοκ.

Οι δηλώσεις JavaScript tryκαι catch έρχονται σε ζεύγη:

try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}

JavaScript Throws Errors

Όταν παρουσιαστεί σφάλμα, η JavaScript κανονικά θα σταματήσει και θα δημιουργήσει ένα μήνυμα σφάλματος.

Ο τεχνικός όρος για αυτό είναι: Η JavaScript πετάει μια εξαίρεση (πετάει ένα λάθος)  throw an exception (throw an error) .

Η JavaScript θα δημιουργήσει πραγματικά ένα αντικείμενο Error με δύο ιδιότητες: όνομα και μήνυμα.


Η δήλωση throw 

Η δήλωση throw σας επιτρέπει να δημιουργήσετε ένα προσαρμοσμένο σφάλμα.

Τεχνικά μπορείτε να πετάξετε μια εξαίρεση (να πετάξετε ένα λάθος) .

Η εξαίρεση μπορεί να είναι JavaScript String, Number, Booleanή Object:

throw "Too big";    // throw a text
throw 500;          // throw a number

Αν χρησιμοποιείτε throw μαζί με tryκαι catch, μπορείτε να ελέγξετε τη ροή του προγράμματος και να δημιουργήσετε προσαρμοσμένα μηνύματα σφάλματος.


Παράδειγμα επαλήθευσης input

Αυτό το παράδειγμα εξετάζει την είσοδο. Εάν η τιμή είναι λάθος, πετιέται μια εξαίρεση (err).

Η εξαίρεση (err) πιάνεται στη δήλωση catch και εμφανίζεται ένα προσαρμοσμένο μήνυμα λάθους:

<!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="p01"></p>

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  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>

Δοκιμάστε τον εαυτό σας »


Επικύρωση HTML

Ο παραπάνω κώδικας είναι απλώς ένα παράδειγμα.

Τα σύγχρονα προγράμματα περιήγησης συχνά χρησιμοποιούν συνδυασμό JavaScript και ενσωματωμένης επικύρωσης HTML, χρησιμοποιώντας προκαθορισμένους κανόνες επικύρωσης που ορίζονται στα χαρακτηριστικά HTML:

<input id="demo" type="number" min="5" max="10" step="1">

Μπορείτε να διαβάσετε περισσότερα σχετικά με την επικύρωση των φορμών σε ένα επόμενο κεφάλαιο αυτού του σεμιναρίου.


Η τελική δήλωση (the finally statement)

Η δήλωση finally σας επιτρέπει να εκτελέσετε κώδικα, μετά από try and catch, ανεξάρτητα από το αποτέλεσμα:

Σύνταξη

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
}

Παράδειγμα

function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  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 = "";
  }
}

Δοκιμάστε τον εαυτό σας »


Το αντικείμενο σφάλματος

Το JavaScript έχει ενσωματωμένο αντικείμενο σφάλματος που παρέχει πληροφορίες σφάλματος όταν παρουσιάζεται σφάλμα.

Το αντικείμενο σφάλματος παρέχει δύο χρήσιμες ιδιότητες: όνομα και μήνυμα.


Ιδιότητες αντικειμένων σφάλματος

ΙδιότηταΠεριγραφή
όνομαΟρίζει ή επιστρέφει ένα όνομα σφάλματος
μήνυμαΟρίζει ή επιστρέφει ένα μήνυμα σφάλματος (μια συμβολοσειρά)

Όνομα τιμών σφάλματος Τιμές

Μπορούν να επιστραφούν έξι διαφορετικές τιμές από την ιδιότητα ονόματος σφάλματος:

Όνομα λάθουςΠεριγραφή
EvalErrorΠαρουσιάστηκε σφάλμα στη συνάρτηση eval()
RangeErrorΈνας αριθμός “εκτός εμβέλειας” έχει εμφανιστεί
ReferenceErrorΈγινε μη επιτρεπτή αναφορά
SyntaxError Παρουσιάστηκε σφάλμα σύνταξης
TypeError Παρουσιάστηκε σφάλμα τύπου
URIErrorΠαρουσιάστηκε σφάλμα στο encodeURI ()

Οι έξι διαφορετικές τιμές περιγράφονται παρακάτω.


Eval Error

Η ένδειξηEvalError υποδηλώνει σφάλμα στη συνάρτηση eval().

Οι νεότερες εκδόσεις της JavaScript δεν πετούν EvalError. Χρησιμοποιούν αντ’ αυτού το SyntaxError.


Σφάλμα εύρους (Range Error)

Ένα RangeError πετιέται εάν χρησιμοποιείτε έναν αριθμό που βρίσκεται εκτός του εύρους των επιτρεπτών τιμών.

Για παράδειγμα: Δεν μπορείτε να ορίσετε τον αριθμό των σημαντικών ψηφίων ενός αριθμού σε 500.

Παράδειγμα

var num = 1;
try {
  num.toPrecision(500);   // A number cannot have 500 significant digits
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Δοκιμάστε τον εαυτό σας »


Σφάλμα αναφοράς (Reference Error)

Ένα ReferenceError πετιέται αν χρησιμοποιείτε (κάνετε αναφορά σε) μια μεταβλητή που δεν έχει δηλωθεί:

Παράδειγμα

var x;
try {
  x = y + 1;   // y cannot be referenced (used)
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Δοκιμάστε τον εαυτό σας »


Συντακτικό λάθος (Syntax Error)

Ένα SyntaxError πετιέται αν προσπαθήσετε να αξιολογήσετε τον κώδικα με ένα σφάλμα σύνταξης.

Παράδειγμα

try {
  eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Δοκιμάστε τον εαυτό σας »


Λάθος Τύπου (Type Error)

Ένα TypeError ρίχνεται εάν χρησιμοποιήσετε μια τιμή που είναι εκτός του εύρους των αναμενόμενων τύπων:

Παράδειγμα

var num = 1;
try {
  num.toUpperCase();   // You cannot convert a number to upper case
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Δοκιμάστε τον εαυτό σας »


URI (Uniform Resource Identifier) ​​Σφάλμα

Ένα URIError πετιέται αν χρησιμοποιείτε μη επιτρεπτούς χαρακτήρες σε μια λειτουργία URI:

Παράδειγμα

try {
  decodeURI("%%%");   // You cannot URI decode percent signs
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Δοκιμάστε τον εαυτό σας »


Μη τυπικές ιδιότητες αντικειμένου σφάλματος

Τα Mozilla και η Microsoft ορίζουν ορισμένες μη τυπικές ιδιότητες αντικειμένου σφάλματος:

fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)

Μην χρησιμοποιείτε αυτές τις ιδιότητες σε δημόσιους δικτυακούς τόπους. Δεν θα λειτουργήσουν σε όλα τα προγράμματα περιήγησης.


Πλήρης τεκμηρίωση σφαλμάτων

Για μια πλήρη τεκμηρίωση του αντικειμένου Error, μεταβείτε στην  Complete JavaScript Error Reference.


Days
Hours
Minutes

40. JS Errors

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: