Erros de JavaScript
Jogue e tente...Pegue...Finalmente
A tryinstrução define um bloco de código para ser executado (para tentar).
A catchinstrução define um bloco de código para lidar com qualquer erro.
A finallyinstrução define um bloco de código para ser executado independentemente do resultado.
A throwinstrução define um erro personalizado.
Erros vão acontecer!
Ao executar o código JavaScript, diferentes erros podem ocorrer.
Erros podem ser erros de codificação feitos pelo programador, erros devido a entrada errada e outras coisas imprevisíveis.
Exemplo
Neste exemplo, digitamos incorretamente "alert" como "adddlert" para produzir deliberadamente um erro:
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
JavaScript detecta adddlert como um erro e executa o código catch para tratá-lo.
JavaScript tente e pegue
A tryinstrução permite que você defina um bloco de código para ser testado quanto a erros enquanto está sendo executado.
A catchinstrução permite definir um bloco de código a ser executado, caso ocorra um erro no bloco try.
As instruções JavaScript trye catch
vêm em pares:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
JavaScript lança erros
Quando ocorre um erro, o JavaScript normalmente para e gera uma mensagem de erro.
O termo técnico para isso é: JavaScript lançará uma exceção (lançará um erro) .
Na verdade, o JavaScript criará um objeto Error com duas propriedades: name e message .
A declaração de arremesso
A throwinstrução permite que você crie um erro personalizado.
Tecnicamente, você pode lançar uma exceção (lançar um erro) .
A exceção pode ser um JavaScript String, a Number, a Booleanou an Object:
throw "Too big"; // throw a text
throw 500; // throw a number
Se você usar throwjunto com trye
catch, poderá controlar o fluxo do programa e gerar mensagens de erro personalizadas.
Exemplo de validação de entrada
Este exemplo examina a entrada. Se o valor estiver errado, uma exceção (err) é lançada.
A exceção (err) é capturada pela instrução catch e uma mensagem de erro personalizada é exibida:
<!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>
Validação HTML
O código acima é apenas um exemplo.
Os navegadores modernos geralmente usam uma combinação de JavaScript e validação HTML integrada, usando regras de validação predefinidas definidas em atributos HTML:
<input id="demo" type="number" min="5" max="10" step="1">
Você pode ler mais sobre validação de formulários em um capítulo posterior deste tutorial.
A declaração final
A finallyinstrução permite executar o código, depois de tentar e pegar, independentemente do resultado:
Sintaxe
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
}Exemplo
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 = "";
}
}
O objeto de erro
JavaScript tem um objeto de erro integrado que fornece informações de erro quando ocorre um erro.
O objeto de erro fornece duas propriedades úteis: nome e mensagem.
Propriedades do objeto de erro
| Propriedade | Descrição |
|---|---|
| nome | Define ou retorna um nome de erro |
| mensagem | Define ou retorna uma mensagem de erro (uma string) |
Valores de nome de erro
Seis valores diferentes podem ser retornados pela propriedade error name:
| Nome do erro | Descrição |
|---|---|
| EvalError | Ocorreu um erro na função eval() |
| Erro de intervalo | Ocorreu um número "fora do intervalo" |
| Erro de referência | Ocorreu uma referência ilegal |
| Erro de sintaxe | Ocorreu um erro de sintaxe |
| TypeError | Ocorreu um erro de tipo |
| Erro de URI | Ocorreu um erro no encodeURI() |
Os seis valores diferentes são descritos abaixo.
Erro de avaliação
An EvalErrorindica um erro na função eval().
Versões mais recentes do JavaScript não lançam EvalError. Use SyntaxError em vez disso.
Erro de intervalo
A RangeErroré lançado se você usar um número que está fora do intervalo de valores legais.
Por exemplo: Você não pode definir o número de dígitos significativos de um número para 500.
Exemplo
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500
significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Erro de referência
A ReferenceErroré lançado se você usar (referência) uma variável que não foi declarada:
Exemplo
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Erro de sintaxe
A SyntaxErroré lançado se você tentar avaliar o código com um erro de sintaxe.
Exemplo
try {
eval("alert('Hello)"); //
Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Erro de tipo
A TypeErroré lançado se você usar um valor que está fora do intervalo de tipos esperados:
Exemplo
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number
to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Erro de URI (Identificador Uniforme de Recursos)
A URIErroré lançado se você usar caracteres ilegais em uma função URI:
Exemplo
try {
decodeURI("%%%"); // You cannot URI decode
percent signs
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Propriedades do objeto de erro não padrão
A Mozilla e a Microsoft definem algumas propriedades de objetos de erro não padrão:
fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
descrição (Microsoft)
número (Microsoft)
Não use essas propriedades em sites públicos. Eles não funcionarão em todos os navegadores.
Referência de erro completa
Para obter uma referência completa do objeto Error, acesse nosso Complete JavaScript Error Reference .