JavaScript-fouten
Gooi en probeer ... Vang ... Eindelijk
De tryinstructie definieert een codeblok dat moet worden uitgevoerd (om te proberen).
De catchinstructie definieert een codeblok om elke fout af te handelen.
De finallyinstructie definieert een codeblok dat moet worden uitgevoerd, ongeacht het resultaat.
De throwinstructie definieert een aangepaste fout.
Fouten zullen gebeuren!
Bij het uitvoeren van JavaScript-code kunnen verschillende fouten optreden.
Fouten kunnen codeerfouten zijn die door de programmeur zijn gemaakt, fouten door verkeerde invoer en andere onvoorziene zaken.
Voorbeeld
In dit voorbeeld hebben we "alert" verkeerd gespeld als "adddlert" om opzettelijk een fout te veroorzaken:
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
JavaScript vangt addlert op als een fout en voert de catch-code uit om het af te handelen.
JavaScript proberen en vangen
Met de tryinstructie kunt u een codeblok definiëren dat moet worden getest op fouten terwijl het wordt uitgevoerd.
Met de catchinstructie kunt u een codeblok definiëren dat moet worden uitgevoerd als er een fout optreedt in het try-blok.
De JavaScript-statements tryen catch
komen in paren:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
JavaScript gooit fouten
Wanneer er een fout optreedt, zal JavaScript normaal gesproken stoppen en een foutmelding genereren.
De technische term hiervoor is: JavaScript zal een uitzondering genereren (een fout veroorzaken) .
JavaScript maakt in feite een Error-object met twee eigenschappen: name en message .
De worpverklaring
Met de throwinstructie kunt u een aangepaste fout maken.
Technisch gezien kun je een exception gooien (een error weggooien) .
De uitzondering kan een JavaScript String, a Number, a Booleanof een zijn Object:
throw "Too big"; // throw a text
throw 500; // throw a number
Als u throwsamen met tryen
catchgebruikt, kunt u de programmastroom regelen en aangepaste foutmeldingen genereren.
Voorbeeld van invoervalidatie
In dit voorbeeld wordt de invoer onderzocht. Als de waarde verkeerd is, wordt een uitzondering (err) gegenereerd.
De uitzondering (err) wordt opgevangen door de catch-instructie en er wordt een aangepast foutbericht weergegeven:
<!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() {
const message =
document.getElementById("p01");
message.innerHTML = "";
let 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-validatie
Bovenstaande code is slechts een voorbeeld.
Moderne browsers gebruiken vaak een combinatie van JavaScript en ingebouwde HTML-validatie, met behulp van vooraf gedefinieerde validatieregels die zijn gedefinieerd in HTML-attributen:
<input id="demo" type="number" min="5" max="10" step="1">
U kunt meer lezen over formuliervalidatie in een later hoofdstuk van deze tutorial.
De laatste verklaring
Met de finallyinstructie kun je code uitvoeren, na try and catch, ongeacht het resultaat:
Syntaxis
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
}Voorbeeld
function myFunction() {
const message =
document.getElementById("p01");
message.innerHTML = "";
let 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 = "";
}
}
Het foutobject
JavaScript heeft een ingebouwd foutobject dat foutinformatie geeft wanneer er een fout optreedt.
Het error-object biedt twee handige eigenschappen: naam en bericht.
Eigenschappen van foutobject
| Eigendom | Beschrijving |
|---|---|
| naam | Stelt een foutnaam in of geeft deze terug |
| bericht | Stelt een foutmelding in of geeft deze terug (een tekenreeks) |
Foutnaam Waarden
Zes verschillende waarden kunnen worden geretourneerd door de eigenschap error name:
| Foutnaam | Beschrijving |
|---|---|
| EvalError | Er is een fout opgetreden in de functie eval() |
| Bereikfout | Er is een nummer "buiten bereik" opgetreden |
| Referentiefout | Er is een illegale verwijzing opgetreden |
| Syntax error | Er is een syntaxisfout opgetreden |
| Typefout | Er is een typefout opgetreden |
| URIEfout | Er is een fout opgetreden in encodeURI() |
De zes verschillende waarden worden hieronder beschreven.
Evaluatiefout
An EvalErrorgeeft een fout aan in de functie eval().
Nieuwere versies van JavaScript genereren geen EvalError. Gebruik in plaats daarvan SyntaxError.
Bereikfout
A RangeErrorwordt gegenereerd als u een getal gebruikt dat buiten het bereik van de wettelijke waarden valt.
Bijvoorbeeld: u kunt het aantal significante cijfers van een getal niet instellen op 500.
Voorbeeld
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500
significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Referentiefout:
A ReferenceErrorwordt gegooid als u een variabele gebruikt (referentie) die niet is gedeclareerd:
Voorbeeld
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Syntax error
A SyntaxErrorwordt gegenereerd als u code probeert te evalueren met een syntaxisfout.
Voorbeeld
try {
eval("alert('Hello)"); //
Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Typefout
A TypeErrorwordt gegenereerd als u een waarde gebruikt die buiten het bereik van de verwachte typen ligt:
Voorbeeld
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number
to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
URI-fout (Uniform Resource Identifier)
A URIErrorwordt gegenereerd als u ongeldige tekens gebruikt in een URI-functie:
Voorbeeld
try {
decodeURI("%%%"); // You cannot URI decode
percent signs
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Eigenschappen van niet-standaard foutobject
Mozilla en Microsoft definiëren enkele niet-standaard eigenschappen van foutobjecten:
fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
beschrijving (Microsoft)
nummer (Microsoft)
Gebruik deze eigenschappen niet op openbare websites. Ze werken niet in alle browsers.
Volledige foutreferentie
Ga voor een volledige referentie van het Error-object naar onze Complete JavaScript Error Reference .