Table of contents
- Throw, y Try...Catch...Finally
- ¡Ocurrirán errores!
- JavaScript try y catch
- JavaScript arroja errores
- La declaración Trow
- Ejemplo de validación de entrada
- Validación HTML
- La declaración Finally
- El objeto Error
- Propiedades del objeto de error
- Valores de nombre de error
- Eval Error
- Range Error
- Reference Error
- Syntax Error
- Type Error
- URI (Uniform Resource Identifier) Error
- Propiedades Objeto Error no-estándar
- Referencia completa de Errors en JavaScript
Los objetos
Errorse generan cuando se producen errores en tiempo de ejecución. El objetoErrortambién se puede utilizar como objeto base para excepciones definidas por el usuario.
Throw, y Try...Catch...Finally
La declaración try define un bloque de código para ejecutar (para probar).
La declaración catch define un bloque de código para manejar cualquier error.
La declaración finally define un bloque de código que se ejecutará independientemente del resultado.
La declaración throw 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 "alert" 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
adddlertcomo un error y ejecuta el códigocatchpara manejarlo.
JavaScript try y catch
La declaración try le permite definir un bloque de código que se probará en busca de errores mientras se ejecuta.
La declaración catch le permite definir un bloque de código que se ejecutará si ocurre un error en el bloque try.
Las declaraciones de JavaScript try y 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 generará una excepción (arrojará un error).
JavaScript realmente creará un objeto Error con dos propiedades: nombre y mensaje.
La declaración Trow
La declaración throw le permite crear un error personalizado.
Técnicamente puedes lanzar una excepción (arrojar un error).
La excepción puede ser una cadena de JavaScript, un número, un booleano o un objeto:
throw "Too big"; // genera un texto
throw 500; // genera un numero
Si usa throw junto con try y 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 genera una excepción (err).
La excepción (err) es detectada por la declaración catch 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.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>
Validación HTML
El código anterior es sólo un ejemplo.
Los navegadores modernos suelen utilizar una combinación de JavaScript y validación HTML integrada, utilizando reglas de validación predefinidas definidas en atributos HTML:
<input id="demo" type="number" min="5" max="10" step="1">
Puedes leer más sobre validación de formularios en un capítulo posterior de este tutorial.
La declaración Finally
La declaración finally le permite ejecutar código, después de intentarlo y capturarlo, 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.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 = "";
}
}
El objeto Error
JavaScript tiene un objeto de error integrado 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 |
name | Establece o devuelve un nombre de error. |
message | Establece o devuelve un mensaje de error (una cadena). |
Valores de nombre de error
La propiedad name de error puede devolver seis valores diferentes:
| Nombre Error | Descripción |
EvalError | Se ha producido un error en la función eval(). |
RangeError | Se ha producido un número "fuera de rango". |
ReferenceError | Se ha producido una referencia ilegal. |
SyntaxError | Se ha producido un error de sintaxis. |
TypeError | Se ha producido un error de tipo. |
URIError | Se ha producido un error en encodeURI(). |
Los seis valores diferentes se describen a continuación.
Eval Error
Un EvalError indica un error en la función eval().
Las versiones más recientes de JavaScript no arrojan
EvalError. En su lugar, utiliceSyntaxError.
Range Error
Se genera un RangeError si utiliza un número que está fuera del rango de valores aceptados.
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;
}
Reference Error
Se genera un ReferenceError 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;
}
Syntax Error
Se genera un SyntaxError 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;
}
Type Error
Se genera un TypeError si utiliza 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;
}
URI (Uniform Resource Identifier) Error
Se genera un URIError si utiliza 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 Objeto Error no-estándar
Mozilla y Microsoft definen algunas propiedades de objetos de error no estándar:
fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)
No utilice estas propiedades en sitios web públicos. No funcionarán en todos los navegadores.
Referencia completa de Errors en JavaScript
Para obtener una referencia completa del objeto Error, vaya a nuestro Complete JavaScript Error Reference.
W3Schools es el sitio de desarrolladores web más grande del mundo.