JavaScript: manejo de errores y excepciones
Hay tres tipos de errores en la programación: (a) errores de sintaxis, (b) errores en tiempo de ejecución y (c) errores lógicos.
Errores de sintaxis
Errores de sintaxis, también llamados parsing errors, ocurren en tiempo de compilación en lenguajes de programación tradicionales y en tiempo de interpretación en JavaScript.
Por ejemplo, la siguiente línea provoca un error de sintaxis porque falta un paréntesis de cierre.
<script type = "text/javascript">
<!--
window.print(;
//-->
</script>Cuando ocurre un error de sintaxis en JavaScript, solo el código contenido dentro del mismo hilo que el error de sintaxis se ve afectado y el resto del código en otros hilos se ejecuta asumiendo que nada en ellos depende del código que contiene el error.
Errores en tiempo de ejecución
Errores de tiempo de ejecución, también llamados exceptions, ocurren durante la ejecución (después de la compilación / interpretación).
Por ejemplo, la siguiente línea causa un error en tiempo de ejecución porque aquí la sintaxis es correcta, pero en el tiempo de ejecución, está intentando llamar a un método que no existe.
<script type = "text/javascript">
<!--
window.printme();
//-->
</script>Las excepciones también afectan el hilo en el que ocurren, permitiendo que otros hilos de JavaScript continúen con la ejecución normal.
Errores lógicos
Los errores lógicos pueden ser el tipo de error más difícil de rastrear. Estos errores no son el resultado de un error de sintaxis o de tiempo de ejecución. En cambio, ocurren cuando comete un error en la lógica que impulsa su secuencia de comandos y no obtiene el resultado que esperaba.
No puede detectar esos errores, porque depende de los requisitos de su negocio qué tipo de lógica desea poner en su programa.
El intento ... atrapar ... finalmente Declaración
Las últimas versiones de JavaScript agregaron capacidades de manejo de excepciones. JavaScript implementa eltry...catch...finally construir así como el throw operador para manejar excepciones.
Usted puede catch generado por el programador y runtime excepciones, pero no puedes catch Errores de sintaxis de JavaScript.
Aquí está el try...catch...finally sintaxis de bloque -
<script type = "text/javascript">
<!--
try {
// Code to run
[break;]
}
catch ( e ) {
// Code to run if an exception occurs
[break;]
}
[ finally {
// Code that is always executed regardless of
// an exception occurring
}]
//-->
</script>los try El bloque debe ir seguido de exactamente uno catch bloque o uno finallybloque (o uno de ambos). Cuando ocurre una excepción en eltry bloque, la excepción se coloca en e y el catchse ejecuta el bloque. El opcionalfinally block se ejecuta incondicionalmente después de try / catch.
Ejemplos
Aquí hay un ejemplo en el que intentamos llamar a una función no existente que, a su vez, genera una excepción. Veamos cómo se comporta sintry...catch-
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
alert("Value of variable a is : " + a );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Salida
Ahora intentemos capturar esta excepción usando try...catchy mostrar un mensaje fácil de usar. También puede suprimir este mensaje si desea ocultar este error a un usuario.
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a );
}
catch ( e ) {
alert("Error: " + e.description );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Salida
Puedes usar finallybloque que siempre se ejecutará incondicionalmente después del try / catch. Aquí hay un ejemplo.
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a );
}
catch ( e ) {
alert("Error: " + e.description );
}
finally {
alert("Finally block will always execute!" );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Salida
La declaración de tiro
Puedes usar throwdeclaración para generar sus excepciones integradas o sus excepciones personalizadas. Posteriormente, estas excepciones se pueden capturar y puede tomar la acción apropiada.
Ejemplo
El siguiente ejemplo demuestra cómo utilizar un throw declaración.
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
var b = 0;
try {
if ( b == 0 ) {
throw( "Divide by zero error." );
} else {
var c = a / b;
}
}
catch ( e ) {
alert("Error: " + e );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Salida
Puede generar una excepción en una función usando una cadena, un entero, un booleano o un objeto y luego puede capturar esa excepción en la misma función que hicimos anteriormente o en otra función usando un try...catch bloquear.
El método onerror ()
los onerrorEl controlador de eventos fue la primera característica que facilitó el manejo de errores en JavaScript. loserror El evento se dispara en el objeto de ventana siempre que ocurre una excepción en la página.
<html>
<head>
<script type = "text/javascript">
<!--
window.onerror = function () {
alert("An error occurred.");
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Salida
los onerror El controlador de eventos proporciona tres piezas de información para identificar la naturaleza exacta del error:
Error message - El mismo mensaje que mostraría el navegador para el error dado
URL - El archivo en el que ocurrió el error
Line number- El número de línea en la URL proporcionada que causó el error.
Aquí está el ejemplo para mostrar cómo extraer esta información.
Ejemplo
<html>
<head>
<script type = "text/javascript">
<!--
window.onerror = function (msg, url, line) {
alert("Message : " + msg );
alert("url : " + url );
alert("Line number : " + line );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Salida
Puede mostrar la información extraída de la forma que crea que es mejor.
Puedes usar un onerror , como se muestra a continuación, para mostrar un mensaje de error en caso de que haya algún problema al cargar una imagen.
<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />Puedes usar onerror con muchas etiquetas HTML para mostrar mensajes apropiados en caso de errores.