comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[JavaScript][MEDIO] Detectando Errores

  • 1 Respuestas
  • 1346 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Conectado arthusu

  • *
  • Underc0der
  • Mensajes: 536
  • Actividad:
    10%
  • Reputación 2
  • Yo solo se que no se nada - Socrátes
    • Ver Perfil
    • Arthusu BLOG
  • Skype: arthusuxD
« en: 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 :P

Empezaremos con algo que viene ya en You are not allowed to view links. Register or Login y nos guiaremos de ella :D

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 :P)....


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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>try...catch</title>
  5.         <script>
  6.                 var txt="";
  7.                 function mensaje(){
  8.                         try{
  9.                                 adddlert("Bievenido invitado");
  10.                         }
  11.                         catch(e){
  12.                                 txt="Ha ocurrido un error\n\n";
  13.                                 txt+="Descripcion: "+ e.message+"\n\n";
  14.                                 txt+="Da click aceptar para continuar\n\n";
  15.                                 alert(txt);
  16.                         }
  17.                 }
  18.         </script>
  19. </head>
  20. <body>
  21.         <input type="button" value="Ver mensaje" onclick="mensaje();" />
  22. </body>
  23. </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 :P

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

Ejemplo try...throw...catch:

Código: Javascript
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>try...throw...catch</title>
  5.         <script>
  6.                 function myFunction(){
  7.                         try{
  8.                                 var x=document.getElementById('demo').value;
  9.                                 if(x=="") throw "vacio";
  10.                                 if(isNaN(x)) throw "no es numero";
  11.                                 if(x>10) throw "es mayor";
  12.                                 if(x<5) throw "es menor";
  13.                                 var y=document.getElementById('mess');
  14.                                 y.innerHTML="Correcto!";
  15.                         }
  16.                         catch(e){
  17.                                 var y=document.getElementById('mess');
  18.                                 y.innerHTML="Error: "+ e + ".";
  19.                         }
  20.                 }
  21.         </script>
  22. </head>
  23. <body>
  24.         <h1>Detectando errores y personalizando</h1>
  25.         <p>Porfavor introduce un numero entre 5 y 10:</p>
  26.         <input type="text" id="demo" />
  27.         <input type="button" onclick="myFunction();" value="Probar valor" />
  28.         <p id="mess"></p>
  29. </body>
  30. </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 :P



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 You are not allowed to view links. Register or Login 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 You are not allowed to view links. Register or Login 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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>Console</title>
  5.         <script>
  6.                 function alerta(){
  7.                         adddlert("Bievenido invitado");
  8.                 }
  9.         </script>
  10. </head>
  11. <body>
  12.         <input type="button" onclick="alerta();" value="Probar!" />
  13. </body>
  14. </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 :P
« Última modificación: Agosto 12, 2013, 11:02:57 pm por Destructor.php »

Desconectado blackdrake

  • *
  • Co Admin
  • Mensajes: 1904
  • Actividad:
    18.33%
  • Reputación 15
    • Ver Perfil
« Respuesta #1 en: Julio 20, 2013, 08:03:20 am »
Muy bueno arthusu muchas gracias por el aporte :)



 

¿Te gustó el post? COMPARTILO!



[JavaScript][BASICO] Resolver funciones matemáticas (Versión simple) By 2Fac3R

Iniciado por 2Fac3R

Respuestas: 0
Vistas: 1072
Último mensaje Diciembre 23, 2012, 12:55:06 am
por 2Fac3R
[JavaScript] 4 clase: Datos Boleanos o Logicos, variables indefinidas o nulas

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1410
Último mensaje Febrero 24, 2010, 11:02:19 am
por ANTRAX
[JavaScript][AVANZADO] Trabajar con DOM desde Firefox e Internet Explorer

Iniciado por arthusu

Respuestas: 0
Vistas: 1519
Último mensaje Julio 16, 2011, 07:05:12 pm
por arthusu
[JavaScript] 5 clase: Funcion typeof y reasignacion dinamica de variables

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1600
Último mensaje Febrero 24, 2010, 11:03:06 am
por ANTRAX
Curso: JavaScript y jQuery [Crear Sitios y Apps Web]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 59
Último mensaje Julio 27, 2018, 01:39:37 pm
por Mr.Kratos