Errores en Javascript

Posted by On octubre 26, 2015 2 Comments

Los errores en javascript, así como en todos los lenguajes van a ocurrir ya sean debidos a fallos de programación, entrada de información equivocada en los formularios u otros casos imprevisibles en la programación.

Para tratar de controlar los errores en javascript se utiliza una estructura de trabajo llamada try catch y  se compone de cuatro «pasos»

  • try: permite comprobar los posibles errores en un bloque de código.
  • catch: permite manejar el error
  • throw: permite crear errores personalizados
  • finally: ejecuta código después del try catch sin importar el resultado del error.

Cuando se comete un error javascript normalmente se va a detener y nos mostrará un mensaje de error, haciendo lo que normalmente se llama; lanzar una excepción.

Aunque hoy en día es muy fácil validar desde el propio HTML , se suele utilizar también JS para conseguir resultados óptimos, tal y como veremos en el ejemplo.

¿Como funciona todo esto?

Bueno para saber como funciona todo esto lo primero que tenemos que hacer es ver la estructura de nuestro código para atrapar errores:

try{
    //código del try
}
catch(err){
    //código del catch
}
finally{
    //código del finally
}

Como vemos en el esqueleto de la estructura siempre tendrá la misma forma, aunque podríamos prescindir del finally.

En el siguiente ejemplo vamos a comprobar como esto funciona de forma muy sencilla pero es extrapolable a casi cualquier proyecto que deseemos.

<!DOCTYPE html>
<html>
<body>
Por favor introduzca un número entre 5 y 10:
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Lanzar</button>
<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "escriba algo";
        if(isNaN(x)) throw "introduzca un número";
        x = Number(x);
        if(x > 10)   throw "valor demasiado alto";
        if(x < 5)    throw "valor demasiado bajo";
    }
    catch(err) {
        message.innerHTML = err;
    }
    finally {
        document.getElementById("demo").value = "";
    }
}
</script>
</body>
</html>

En este ejemplo no tocamos nada que no hayamos visto ya, se introduce un input para recoger un valor y una vez recogido se introduce en el try donde se compara el valor que debe de tener con el que tiene nuestra variable, creando un mensaje de error personalizado que se lanza desde el catch y finalmente se limpia la casilla de input en el finally.

Este código esta listo para copiar y ejecutarlo directamente.