Capítulo 9: Detección de Errores MSc. Alexis Cabrera Mondeja.

Presentación del tema: "Capítulo 9: Detección de Errores MSc. Alexis Cabrera Mondeja."— Transcripción de la presentación:

1 Capítulo 9: Detección de Errores MSc. Alexis Cabrera Mondeja

2 Detección de errores JavaScript es un lenguaje de programación interpretado, lo que significa que no se pueden detectar la mayoría de errores en el código hasta que se ejecutan los scripts. De esta forma, antes de considerar un script como correcto, es necesario probarlo en todos los navegadores sobre los que se vaya a utilizar.

3 Cuando se producen errores durante la ejecución de un script, los navegadores proporcionan cierta información útil para descubrir el punto exacto en el que se ha producido el error y su posible solución. Solucionar los errores de un script se denomina “depurar el script” o “debugear el script” (término que viene de la palabra inglesa “debug”, que significa “eliminar los errores de una aplicación”). Desafortunadamente, no todos los navegadores proporcionan la misma información útil, lo que complica la solución de los errores para cada tipo de navegador. A continuación se muestran las herramientas que proporciona cada navegador para detectar y corregir los errores en JavaScript.

4 Corrección de errores con Internet Explorer Dependiendo de su configuración, el navegador Internet Explorer puede tener desactivada la notificación de errores de JavaScript. Por este motivo, en primer lugar puede ser necesario activar los mensajes de aviso sobre los errores de JavaScript. Para activar las notificaciones, se accede al menú Herramientas > Opciones, pestaña Opciones Avanzadas y se activa la opción Mostrar una notificación sobre cada error de secuencia de comandos, como se muestra en la siguiente imagen:

5

6 Una vez activado, se mostrará un mensaje de error cada vez que se produzcan errores de JavaScript en una página. Además, en la esquina inferior izquierda se muestra un pequeño mensaje indicando que la página contiene errores: Pulsando sobre el botón Mostrar Detalles » es posible acceder a cierta información adicional sobre el error producido:

7 Internet Explorer es el navegador que menos información proporciona. Además, cuando se produce un error no siempre indica correctamente la posición del posible error. El tipo de mensajes (muy breves y en ocasiones ambiguos) y la falta de precisión sobre el lugar en el que se ha producido realmente el error, hacen que depurar un script en Internet Explorer sea una tarea excesivamente complicada.

8 Corrección de errores con Firefox Depurar scripts utilizando Firefox es una experiencia completamente diferente y más sencilla que depurarlos con Internet Explorer. Firefox proporciona herramientas más útiles, activadas por defecto y que muestran más información y mucho más precisa. Para depurar un script con Firefox, solamente es necesario acceder a la opción Consola de error dentro del menú Herramientas:

9 La consola de errores permite diferenciar los mensajes de información, los mensajes de aviso y los mensajes de error. Además, permite visualizar todos los errores de la página simultáneamente. Por cada error detectado se indica la posible solución mediante un mensaje en inglés y se muestra el trozo de código del script donde se ha producido el error. Además, pulsando sobre el enlace incluido se accede a la línea concreta del archivo concreto donde se ha producido el error.

10 Además, Firefox permite instalar pequeñas mejoras y ampliaciones en el navegador, que se conocen con el nombre de extensiones. Una de las extensiones más interesantes para los desarrolladores de aplicaciones web es Firebug, que se puede descargar gratuitamente desde http://www.getfirebug.com/ El mismo error de JavaScript muestra la siguiente información en Firebug:

11 Si se pincha sobre el mensaje de error, Firebug también redirige a la línea concreta del script en la que se está produciendo el error: Firebug incluye cientos de utilidades y herramientas necesarias para depurar aplicaciones web y para diseñar páginas web. Además, proporciona información detallada sobre XHTML, CSS, DOM y JavaScript. Toda la documentación, tutoriales y preguntas frecuentes sobre Firebug se pueden encontrar en http://www.getfirebug.com/docs.html

12 Corrección de errores con Opera El navegador Opera también dispone de una consola de errores muy completa que muestra toda la información sobre el error producido. La consola de errores se accede desde el menú Herramientas > Avanzado y la opción Consola de error:

13 Recursos útiles Estándares y especificaciones oficiales ▪ Especificación oficial del lenguaje JavaScript: ECMAScript Language Specification (3ª edición, Diciembre de 1999) ▪ Otros estándares relacionados: ECMAScript Components Specification (ECMA-290), ECMAScript 3rd Edition Compact Profile (ECMA-327), ECMAScript for XML (E4X) Specification (ECMA-357)

14 Scripts y utilidades gratuitas ▪ Hotscripts : sitio web en inglés que contiene referencias a miles de scripts y utilidades de JavaScript gratuitas. Hotscripts ▪ Dynamic Drive : sitio web en inglés con cientos de scripts gratuitos de JavaScript con las utilidades más comunes (calendarios, menús, formularios, animaciones de texto, enlaces, galerías de imágenes, etc.) Dynamic Drive ▪ Gamarod JavaScript : sitio web en español que contiene decenas de utilidades JavaScript gratuitas listas para usar. Gamarod JavaScript Tympanus.net Tympanus.net : Sitio con lo más novedoso de javascript, css3 y html5.

15 Libros Professional JavaScript for Web Developers, Nicholas C. Zakas (ISBN: 978-0-7645- 7908-0). Algunos capítulos son demasiado avanzados para los principiantes de JavaScript, pero la mayoría de capítulos explican conceptos básicos de forma sencilla y clara. JavaScript: The Definitive Guide (Fifth Edition), David Flanagan (ISBN 13: 9780596101992). Referencia completa de JavaScript en más de 1.000 páginas que explican con detalle cualquier aspecto de este lenguaje de programación.

16 Ejercicio 1.Diseñe un formulario en HTML para el registro de un usuario a su web. Los campos a incluir son los siguientes: Nombre(s), Apellidos, Email, contraseña, fecha de nacimiento, Sexo, Ocupación. a)Mediante javascript cree una función que valide cada uno de los campos antes de enviarse. b)Utilice un script de tipo calendario para el ingreso en el campo fecha. c)Valide que el email ingresado sea un email válido.

17