JavaScript Error - Throw and Try to Catch

try De statement maakt het mogelijk om fouten in het codeblok te testen.

catch De statement maakt het mogelijk om fouten te verwerken.

throw Een statement dat u toestaat om aangepaste fouten te maken.

finally Maakt het mogelijk om code uit te voeren, na try en catch, ongeacht het resultaat.

Fouten zullen altijd optreden!

Er kunnen verschillende fouten optreden bij het uitvoeren van JavaScript-code.

Fouten kunnen optreden door foutieve codering van de programmeur, foutieve invoer of andere onvoorziene problemen.

Example

In dit voorbeeld, we gebruiken adddlert Schrijf een waarschuwingcode om opzettelijk een fout te veroorzaken:

<p id="demo"></p>
<script>
try {
    adddlert("Welkom op het bezoek!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

Try It Yourself

JavaScript vangt adddlert op als een fout en voert code uit om de fout te verwerken.

JavaScript try en catch

try De statement maakt het mogelijk om een codeblok te definiëren om fouten te detecteren tijdens de uitvoering.

catch De statement maakt het mogelijk om een codeblok te definiëren dat moet worden uitgevoerd, als er een fout optreedt in de try-codeblok.

JavaScript Statements try en catch Wordt paarsgewijs weergegeven:

try {
     Een codeblok voor testen
}
 catch(err) {
     Een codeblok om fouten te verwerken
}

JavaScript gooit een fout

Bij het optreden van een fout stopt JavaScript meestal en geeft een foutbericht weer.

De technische term wordt zo beschreven:JavaScript gooit een uitzondering (gooit een fout).

JavaScript maakt in feite een object met twee eigenschappen aan Object Error:naam en bericht.

throw-statement

throw Een statement dat u toestaat om aangepaste fouten te maken.

Technisch gezien kunt uGooi een uitzondering (gooi een fout).

Een uitzondering kan een JavaScript-string, getal, boolean of object zijn:

throw "Te groot";    // gooi tekst
throw 500;          // gooi een getal

als throw en try en catch Samen gebruikt, kunnen ze het programmaflow controleren en aangepaste foutmeldingen genereren.

Invoer verificatie voorbeeld

In dit voorbeeld wordt de invoer gecontroleerd. Als de waarde onjuist is, wordt een uitzondering (err) gegooid.

Deze uitzondering (err) wordt opgevangen door een catch-statement en een aangepaste foutmelding wordt weergegeven:

<!DOCTYPE html>
<html>
<body>
<p>Voer een getal in tussen 5 en 10 in:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test invoer</button>
<p id="message"></p>
<script>
function myFunction() {
    var message, x;
    bericht = document.getElementById("bericht");
    bericht.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "leeg";
         if(isNaN(x)) throw "is geen getal";
         x = Number(x);
        if(x < 5) throw "te klein";
        if(x > 10) throw "te groot";
    }
    catch(err) {
        message.innerHTML = "Invoer is " + err;
    }
}
</script>
</body>
</html>

Try It Yourself

HTML-verificatie

Het bovenstaande codevoorbeeld is slechts een voorbeeld.

Moderne browsers combineren vaak JavaScript met ingebouwde HTML-verificatie, door gebruik te maken van vooraf gedefinieerde verificatierules die zijn gedefinieerd in HTML-eigenschappen:

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

U zult later in dit handboek meer leren over formulierverificatie.

finally-statement

finally Een statement dat u toestaat om code uit te voeren na try en catch, ongeacht het resultaat:

try {
     // Codeblok voor testdoeleinden
}
 catch(err) {
     // Codeblok om fouten te verwerken
} 
finally {
     // Elke codeblok die ongeacht het resultaat wordt uitgevoerd
}

Example

function myFunction() {
    var message, x;
    bericht = document.getElementById("bericht");
    bericht.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "is leeg";
        if(isNaN(x)) throw "is geen getal";
         x = Number(x);
        if(x >  10) throw "te groot";
        if(x <  5) throw "te klein";
    }
    catch(err) {
        bericht.innerHTML = "Fout: " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Try It Yourself

Object Error

JavaScript heeft een ingebouwde object error dat foutinformatie biedt wanneer een fout optreedt.

het object error biedt twee nuttige eigenschappen:naam en bericht.

Eigenschappen van het object Error

Property Beschrijving
naam Instellen of teruggeven van de foutnaam
bericht Instellen of teruggeven van het foutbericht (een string)

Waarden van foutnamen

De property name van het object error kan zes verschillende waarden teruggeven:

Foutnaam Beschrijving
EvalError Er is een fout opgetreden in de eval() functie
RangeError Er is een fout opgetreden buiten het getalbereik
ReferenceError Er is een ongeldige referentie opgetreden
SyntaxError Er is een syntaxisfout opgetreden
TypeError Er is een typefout opgetreden
URIError Fout die is opgetreden in encodeURI()

Hieronder leggen we de zes verschillende waarden uit in detail.

Eval fout

EvalError foutmelding van de eval() functie uit.

Nieuwere versies van JavaScript gooien geen enkele EvalErrorGebruik SyntaxError Vervang.

Bereikfout

RangeError zal worden gegooid wanneer u een getal gebruikt dat buiten het geldige bereik ligt.

Bijvoorbeeld: u kunt de aantal cijfers van een getal niet instellen op 500.

Example

var num = 1;
try {
    num.toPrecision(500);   // Een getal kan geen 500 geldige cijfers hebben
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Try It Yourself

Reftreffout

Als u een variabele gebruikt (reftreert) die nog niet is verklaard, dan ReferenceError zal worden gegooid:

Example

var x;
try {
    x = y + 1;   // y kan niet worden gerefdereerd (gebruikt)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Try It Yourself

Syntaxisfout

Als u code met syntaxisfouten berekent, dan SyntaxError Thrown:

Example

try {
    eval("alert('Hello')");   // Het ontbreken van ' zal een fout veroorzaken
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

Try It Yourself

Typefout

Als de waarde die u gebruikt buiten het verwachte bereik ligt, dan TypeError Thrown:

Example

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

Try It Yourself

URI Error

If you use illegal characters in URI functions, then URIError Thrown:

Example

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

Try It Yourself

Non-standard Error Object Properties

Mozilla and Microsoft have defined non-standard error object properties:

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

Do not use these properties on public websites. They do not work on all browsers.