Errores de JavaScript
Tira e intenta... Atrapa... Finalmente
La trydeclaración define un bloque de código para ejecutar (para probar).
La catchdeclaración define un bloque de código para manejar cualquier error.
La finallydeclaración define un bloque de código para ejecutar independientemente del resultado.
La throwinstrucción define un error personalizado.
¡Ocurrirán errores!
Al ejecutar código JavaScript, pueden ocurrir diferentes errores.
Los errores pueden ser errores de codificación cometidos por el programador, errores debido a una entrada incorrecta y otras cosas imprevisibles.
Ejemplo
En este ejemplo, escribimos mal "alerta" como "adddlert" para producir un error deliberadamente:
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
JavaScript detecta adddlert como un error y ejecuta el código catch para manejarlo.
JavaScript prueba y atrapa
La trydeclaración le permite definir un bloque de código para probar errores mientras se ejecuta.
La catchinstrucción le permite definir un bloque de código que se ejecutará si ocurre un error en el bloque de prueba.
Las declaraciones de JavaScript tryy catch
vienen en pares:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
JavaScript arroja errores
Cuando ocurre un error, JavaScript normalmente se detendrá y generará un mensaje de error.
El término técnico para esto es: JavaScript lanzará una excepción (arrojará un error) .
JavaScript realmente creará un objeto Error con dos propiedades: nombre y mensaje .
La declaración de tiro
La throwdeclaración le permite crear un error personalizado.
Técnicamente, puede lanzar una excepción (lanzar un error) .
La excepción puede ser JavaScript String, a Number, a Booleano an Object:
throw "Too big"; // throw a text
throw 500; // throw a number
Si usa throwjunto con tryy
catch, puede controlar el flujo del programa y generar mensajes de error personalizados.
Ejemplo de validación de entrada
Este ejemplo examina la entrada. Si el valor es incorrecto, se lanza una excepción (err).
La declaración catch captura la excepción (err) y se muestra un mensaje de error personalizado:
<!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>
Validación HTML
El código anterior es solo un ejemplo.
Los navegadores modernos a menudo usan una combinación de JavaScript y validación HTML integrada, usando reglas de validación predefinidas definidas en atributos HTML:
<input id="demo" type="number" min="5" max="10" step="1">
Puede leer más sobre la validación de formularios en un capítulo posterior de este tutorial.
La declaración final
La finallydeclaración le permite ejecutar código, después de intentar y capturar, independientemente del resultado:
Sintaxis
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
}Ejemplo
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 = "";
}
}
El objeto de error
JavaScript tiene un objeto de error incorporado que proporciona información de error cuando ocurre un error.
El objeto de error proporciona dos propiedades útiles: nombre y mensaje.
Propiedades del objeto de error
| Propiedad | Descripción |
|---|---|
| nombre | Establece o devuelve un nombre de error |
| mensaje | Establece o devuelve un mensaje de error (una cadena) |
Valores de nombre de error
La propiedad del nombre del error puede devolver seis valores diferentes:
| Nombre del error | Descripción |
|---|---|
| EvalError | Ha ocurrido un error en la función eval() |
| RangeError | Se ha producido un número "fuera de rango" |
| Error de referencia | Ha ocurrido una referencia ilegal |
| Error de sintaxis | Se ha producido un error de sintaxis. |
| Error de tecleado | Se ha producido un error de tipo |
| URIError | Se ha producido un error en codificarURI() |
Los seis valores diferentes se describen a continuación.
Error de evaluación
Un EvalErrorindica un error en la función eval().
Las versiones más nuevas de JavaScript no arrojan EvalError. Utilice SyntaxError en su lugar.
Error de rango
Se RangeErrorlanza una si usa un número que está fuera del rango de valores legales.
Por ejemplo: no puede establecer el número de dígitos significativos de un número en 500.
Ejemplo
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500
significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Error de referencia
Se ReferenceErrorlanza una si usa (referencia) una variable que no ha sido declarada:
Ejemplo
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Error de sintaxis
Se SyntaxErrorlanza una si intenta evaluar el código con un error de sintaxis.
Ejemplo
try {
eval("alert('Hello)"); //
Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Error de tecleado
Se TypeErrorlanza una si usa un valor que está fuera del rango de tipos esperados:
Ejemplo
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number
to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Error de URI (identificador uniforme de recursos)
Se URIErrorlanza una si usa caracteres ilegales en una función URI:
Ejemplo
try {
decodeURI("%%%"); // You cannot URI decode
percent signs
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Propiedades de objeto de error no estándar
Mozilla y Microsoft definen algunas propiedades de objetos de error no estándar:
nombre de archivo ( Mozilla ) número
de línea (Mozilla)
número de columna (Mozilla)
pila (Mozilla)
descripción (Microsoft)
número (Microsoft)
No utilice estas propiedades en sitios web públicos. No funcionarán en todos los navegadores.
Referencia completa de errores
Para obtener una referencia completa del objeto Error, vaya a nuestra Referencia completa de errores de JavaScript .