Errores de JavaScript: lanzar y tratar de detectar
- La instrucción try te permite probar un bloque de código en busca de errores.
- La declaración catch te permite manejar el error.
- La sentencia throw te permite crear errores personalizados.
- La sentencia finally te permite ejecutar código, después de intentar y capturar, independientemente del resultado.
¡Se producirán errores!
Al ejecutar código JavaScript, pueden ocurrir diferentes errores.
Los errores pueden ser errores de codificación cometidos por el programador, errores debidos a una entrada incorrecta y otras cosas imprevisibles.
Ejm
En este ejemplo, hemos escrito alert como adddlert para producir deliberadamente un error:
<!DOCTYPE html> <html> <body> <h2>JavaScript Error Handling</h2> <p>This example demonstrates how to use <b>catch</b> to diplay an error.</p> <p id="demo"></p> <script> try { adddlert("Welcome guest!"); } catch(err) { document.getElementById("demo").innerHTML = err.message; } </script> </body> </html>
JavaScript detecta adddlert como un error y ejecuta el código de captura para manejarlo.
Javascript try y catch
La instrucción try te permite definir un bloque de código para que se pruebe en busca de errores mientras se ejecuta.
La declaración catch te permite definir un bloque de código que se ejecutará, si ocurre un error en el bloque try.
Las declaraciones de JavaScript que intentan capturar vienen en pares:
try { Bloque de código para probar } catch(err) { Bloque de código para manejar errores
JavaScript Lanzar Errores
Cuando ocurre un error, JavaScript normalmente se detiene y genera un mensaje de error. El término técnico para esto es: JavaScript lanzará una excepción (lanzará un error). JavaScript realmente creará un objeto Error con dos propiedades: nombre y mensaje.
La declaración throw
La sentencia throw te permite crear un error personalizado. Técnicamente, puedes lanzar una excepción (lanzar un error). La excepción puede ser una cadena de JavaScript, un número, un booleano o un objeto:
Ejm
throw "Too big"; // throw a text throw 500; // throw a number
Si usas throw junto con try y catch, puedes 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 excepción (err) es detectada por la declaración catch y se muestra un mensaje de error personalizado:
Ejm
<!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() { var message, x; message = document.getElementById("p01"); message.innerHTML = ""; 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 usarán una combinación de JavaScript y validación HTML incorporada, usando reglas de validación predefinidas definidas en atributos HTML.
Ejm
<input id="demo" type="number" min="5" max="10" step="1">
La última declaración
La sentencia finalmente te permite ejecutar código, después de intentar y capturar, independientemente del resultado:
Ejm
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 }
Ejm
<!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() { var message, x; message = document.getElementById("p01"); message.innerHTML = ""; 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 = "Input " + err; } finally { document.getElementById("demo").value = ""; } } </script> </body> </html>
El objeto 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 Error
Propiedad | Descripción |
---|---|
name | Establece o devuelve un nombre de error |
message | Establece o devuelve un mensaje de error (una cadena) |
Propiedad del nombre Error
La propiedad de nombre de error puede devolver seis valores diferentes.
Nombre de Error | Descripción |
---|---|
EvalError | Ha ocurrido un error en la función eval() |
RangeError | Se ha producido un número “fuera de rango” |
ReferenceError | Ha ocurrido una referencia ilegal |
SyntaxError | Un error de sintaxis ha ocurrido |
TypeError | Ha ocurrido un error de tipo |
URIError | Se produjo un error en encodeURI() |
Los diferentes nombres son descritos
EvalError
Un EvalError indica un error en la función eval(). Las versiones más nuevas de JavaScript no arrojan EvalError. Utilice SyntaxError en su lugar.
RangeError
Se lanza un RangeError si usas un número que está fuera del rango de valores legales. Por ejemplo. no puedes establecer el número de dígitos significativos de un número en 500.
Ejm
<!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> var num = 1; try { num.toPrecision(500); } catch(err) { document.getElementById("demo").innerHTML = err.name; } </script> </body> </html>
ReferenceError
Se lanza un ReferenceError si usas (referencias) una variable que no ha sido declarada:
Ejm
<!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> var x; try { x = y + 1; } catch(err) { document.getElementById("demo").innerHTML = err.name; } </script> </body> </html>
SyntaxError
Se produce SyntaxError si intentas evaluar el código con un error de sintaxis.
Ejm
<!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>
TypeError
Se lanza un TypeError si usas un valor que está fuera del rango de tipos esperados.
Ejm
<!DOCTYPE html> <html> <body> <h2>JavaScript Errors</h2> <p>You cannot convert a number to upper case:</p> <p id="demo"></p> <script> var num = 1; try { num.toUpperCase(); } catch(err) { document.getElementById("demo").innerHTML = err.name; } </script> </body> </html>
Error de URI (Identificador uniforme de recursos)
Se lanza un URIError si usas caracteres ilegales en una función URI.
Ejm
<!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>
Propiedades de objeto de 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 utilices estas propiedades en sitios web públicos. No funcionarán en todos los navegadores