Chyby JavaScriptu Zkuste Catch Throw

Obsah

    Zobrazit obsah

hodit a zkusit...chytit...konečně

Příkaz try definuje blok kódu, který se má spustit (vyzkoušet).

Příkaz catch definuje blok kódu pro zpracování jakékoli chyby.

Příkaz konečně definuje blok kódu, který se má spustit bez ohledu na výsledek.

Příkaz throw definuje vlastní chybu.

Chyby se budou dít!

Při provádění kódu JavaScript se mohou objevit různé chyby nastat.

Chyby mohou být chyby v kódování způsobené programátorem, chyby způsobené chybou vstupy a další nepředvídatelné věci.

Příklad

V tomto příkladu jsme zadali chybně „alert“ jako „adddlert“, abychom záměrně vytvořili chybu:

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Error Handling</h2>

<p>How to use <b>catch</b> to display an error.</p>

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

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

</body>
</html>

JavaScript zachytí addlert jako chybu a spustí zachytit kód na zvládnout to.

try ... catch

Příkaz try umožňuje definovat blok kódu, který má být testováno na chyby při jeho provádění.

Příkaz catch umožňuje definovat blok kódu do být proveden, pokud dojde k chybě v bloku try.

Příkazy JavaScript try a chytit přijít ve dvojicích:

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

JavaScript vyvolává chyby

Když dojde k chybě, JavaScript to udělá normálně zastavit a vygenerovat chybovou zprávu.

Technický výraz pro to zní: JavaScript bude vyhazovat an výjimka (vyvolá chybu).

JavaScript ve skutečnosti vytvoří Chybový objekt se dvěma vlastnostmi: jméno a zpráva.

Příkaz throw

Příkaz throw umožňuje vytvořit vlastní chybu.

Technicky můžete vyvolat výjimku (vyvolat chybu).

Výjimkou může být řetězec JavaScriptu, číslo, Boolean nebo Objekt:

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

Pokud používáte hodit společně s zkuste a chytit, můžete ovládat program tok a generování vlastních chybových zpráv.

Příklad ověření vstupu

Tento příklad zkoumá vstup. Pokud je hodnota nesprávná, je vyvolána výjimka (err).

Výjimka (err) je zachycena příkazem catch a zobrazí se vlastní chybová zpráva:

<!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.trim() == "") 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>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript try catch</h2>

<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.trim() == "")  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>

Ověření HTML

Výše uvedený kód je pouze příkladem.

Moderní prohlížeče často používají kombinaci JavaScriptu a vestavěného HTML ověření pomocí předdefinovaných ověřovacích pravidel definovaných v atributech HTML:

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

Více o ověřování formulářů si můžete přečíst v pozdější kapitole tohoto kurzu.

Prohlášení konečně

Příkaz konečně vám umožňuje spustit kód po try a chytit, bez ohledu na výsledek:

Syntax

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
}

Příklad

function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  
try { 
    
if(x.trim() == "") 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 = "";
    }
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript try catch</h2>

<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.trim() == "")  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 = "Input " + err;
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>

</body>
</html>

Objekt chyby

JavaScript má vestavěný chybový objekt, který poskytuje informace o chybě dojde k chybě.

Chybový objekt poskytuje dvě užitečné vlastnosti: název a zprávu.

Chyba Vlastnosti objektu

name

Nastaví nebo vrátí název chyby

message

Nastaví nebo vrátí chybovou zprávu (řetězec)

Hodnoty názvu chyby

Vlastnost error name může vrátit šest různých hodnot:

EvalError

Ve funkci eval() došlo k chybě

RangeError

Došlo k číslu „mimo rozsah“.

ReferenceError

Došlo k nezákonnému odkazu

SyntaxError

Došlo k chybě syntaxe

TypeError

Došlo k chybě typu

URIError

V encodeURI() došlo k chybě

Šest různých hodnot je popsáno níže.

Chyba Eval

EvalError označuje chybu ve funkci eval().

Novější verze JavaScriptu nezpůsobují EvalError. Místo toho použijte SyntaxError.

Chyba rozsahu

RangeError je vyvoláno, pokud použijete číslo, které je mimo rozsah právních hodnot.

Například: Nelze nastavit počet platných číslic čísla na 500

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot set the number of significant digits of a number to 500:</p>

<p id="demo">

<script>
let num = 1;
try {
  num.toPrecision(500);
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Referenční chyba

Pokud použijete (odkaz) proměnnou, vyvolá se ReferenceError která nebyla vyhlášena:

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot use the value of a non-existing variable:</p>

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

<script>
let x = 5;
try {
  x = y + 1;
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Chyba syntaxe

SyntaxError se vyvolá, pokud se pokusíte vyhodnotit kód pomocí chyba syntaxe.

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot evaluate code that contains a syntax error:</p>

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

<script>
try {
  eval("alert('Hello)");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Chyba typu

TypeError se vyvolá, pokud použijete hodnotu mimo rozsah očekávaných typů:

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot convert a number to upper case:</p>

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

<script>
let num = 1;
try {
  num.toUpperCase();
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Chyba URI (Uniform Resource Identifier).

Pokud ve funkci URI použijete nepovolené znaky, zobrazí se URIError:

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>Some characters cannot be decoded with decodeURI():</p>

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

<script>
try {
  decodeURI("%%%");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Vlastnosti nestandardního chybového objektu

Mozilla a Microsoft definují některé nestandardní vlastnosti chybového objektu:

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

Nepoužívejte tyto vlastnosti na veřejných webových stránkách. Nebudou fungovat ve všech prohlížečích.

Kompletní odkaz na chybu

Úplný odkaz na objekt Error naleznete v části Complete Odkaz na chyby JavaScriptu.