[JavaScript][MEDIO] Detectando Errores

arthusu · Abril 23, 2013, 03:56:30 AM

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 No tienes permitido ver los links. Registrarse o Entrar a mi cuenta y nos guiaremos de ella

Try...Throw...Catch

Estos 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:

Código: javascript

<!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:

Código: javascript

<!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 firebug

En 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 No tienes permitido ver los links. Registrarse o Entrar a mi cuenta 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 No tienes permitido ver los links. Registrarse o Entrar a mi cuenta 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:

Código: javascript

<!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

blackdrake · Julio 20, 2013, 08:03:20 AM

Muy bueno arthusu muchas gracias por el aporte

[JavaScript][MEDIO] Detectando Errores

arthusu

Abril 23, 2013, 03:56:30 AM Ultima modificación: Agosto 12, 2013, 11:02:57 PM por Destructor.php

blackdrake

Julio 20, 2013, 08:03:20 AM #1