Buenas underc0de este post lo publique en mi blog espero que a mas de uno les sea de utilidad lo siguiente :p
Bueno anteriormente publique una entrada la cual era un
juego de piedra, papel o tijera... en la cual
probabamos el codigo javascript en la consola de firebug, aunque puede ser de utilidad para comprobar errores tambien en este caso explicaremos dos de mis favoritas
Empezaremos con algo que viene ya en
W3schools y nos guiaremos de ella
Try...Throw...CatchEstos son la utilizacion de
try (intentar ejecutar codigo)... throw (lanzar mensaje personalizado)... catch (atrapar errores)....Bueno siempre que programas un script en javascript
pueden suceder errores, y
con try,throw y catch podemos saber por que suceden tales errores (si es que sabemos en que parte se encuentra el error )....Bueno aunque
no es necesario usar throw muchas veces puede resultar util para personalizar nuestro mensaje de error, por lo cual veremos un ejemplo de try...catch y uno de try...throw...catch Ejemplo de try...catch:<!DOCTYPE html>
<html>
<head>
<title>try...catch</title>
<script>
var txt="";
function mensaje(){
try{
adddlert("Bievenido invitado");
}
catch(e){
txt="Ha ocurrido un error\n\n";
txt+="Descripcion: "+ e.message+"\n\n";
txt+="Da click aceptar para continuar\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="Ver mensaje" onclick="mensaje();" />
</body>
</html>Lo que hace esto es
intentar ejecutar el codigo que se encuentra entre try { code} pero si el codigo es erroneo se pasa a catch el cual lanza un mensaje de alerta con el error, en este caso e que es el parametro de catch, nos ayuda para que se muestre el mensaje que recogio e.message
Imagen de ejemplo
Como puedes ver nos lanza el mensaje de error en este caso nos dice que
adddlert no esta definida y como es claro esa funcion no existe
Ahora
podriamos personalizar ese mensaje de adddlert pero mejor veremos otro ejemplo, estos dos ejemplos que les muestro los pueden ver en w3schools, les deje el enlace arriba
Ejemplo try...throw...catch:<!DOCTYPE html>
<html>
<head>
<title>try...throw...catch</title>
<script>
function myFunction(){
try{
var x=document.getElementById('demo').value;
if(x=="") throw "vacio";
if(isNaN(x)) throw "no es numero";
if(x>10) throw "es mayor";
if(x<5) throw "es menor";
var y=document.getElementById('mess');
y.innerHTML="Correcto!";
}
catch(e){
var y=document.getElementById('mess');
y.innerHTML="Error: "+ e + ".";
}
}
</script>
</head>
<body>
<h1>Detectando errores y personalizando</h1>
<p>Porfavor introduce un numero entre 5 y 10:</p>
<input type="text" id="demo" />
<input type="button" onclick="myFunction();" value="Probar valor" />
<p id="mess"></p>
</body>
</html>En este ejemplo lo que hacemos es darle un rango de valores al input... entre 5 y 10 si es menor lo mostramos si es mayor tambien si esta vacio tambien si es una letra tambien xDDD
Imagen ejemplo 2
Por consola y firebugEn realidad yo trabajo con firefox y no tengo idea si otros navegadores incluyen una consola de este tipo de todas formas creo que muchos deben de tenerlo solo es cuestion de buscarle XDD
En este caso yo utilizo
Web Developer Tool y de ahi la saco la consola.... Desde
Tools>Error Console....o Tambien la
tachita que muestra te dice el error que puede estar causando...
Y tambien esta
firebug que es demasiado bueno para hacer debug jeje
Aqui tenemos el ultimo ejemplo parecido al primero siendo que tenemos el mismo error, pero en este caso no utilizamos try...catch...
Ejemplo 3:
<!DOCTYPE html>
<html>
<head>
<title>Console</title>
<script>
function alerta(){
adddlert("Bievenido invitado");
}
</script>
</head>
<body>
<input type="button" onclick="alerta();" value="Probar!" />
</body>
</html>
Imagen ejemplo 1
Como puedes ver en la imagen de ejemplo en este caso utilizamos la consola de errores para detectar el error
Imagen ejemplo 2
Y en este otro ejemplo utilizamos firebug para detectar el error...
Espero que estos consejos o tutorial les haya sido de utilidad a mas de uno
