Práctica 2.

Interfaces Web dinámicas: lenguajes de

script (I).
Objetivos
Los objetivos de esta práctica son los siguientes:
Comprender el papel de los lenguajes de script del lado del cliente en la interfaz de usuario para
sistemas web.
Conocer los elementos fundamentales del lenguaje de cliente web JavaScript.
Practicar programas sencillos con JavaScript para mejorar la usabilidad: modificación de la página,
validación de formularios web, enlaces dinámicos,...

Tras realizar esta práctica, el alumno será capaz de crear e incluir código JavaScript en los
documentos HTML para dotar de comportamiento dinámico a la interfaz web. En concreto, sabrá
asociar código con eventos de usuario, programar controles de validación de datos y modificar el
documento HTML dinámicamente utilizando los objetos predefinidos y objetos DOM proporcionados
por JavaScript. El alumno será capaz de aplicar estas técnicas en la implementación de sistemas
más usables.
Enunciado
Debido al propósito original de HTML, muy pronto se hizo patente la necesidad de enriquecer la
experiencia del usuario en el uso de hiperdocumentos en la web. Los únicos comportamientos
interactivos “de fábrica” en HTML son la activación de enlaces y, de forma muy limitada, el uso de
formularios (v.g no hay soporte directo para la validación de datos). La forma más común y eficaz
de añadir comportamientos dinámicos a las interfaces Web consiste en utilizar un lenguaje de
script (interpretado) de cliente, es decir, que se ejecuta en el navegador. De esta forma, el usuario
percibe los cambios en la interfaz como resultado de sus acciones de una manera inmediata, sin
requerir comunicación con el servidor. Los fragmentos de código del script se insertan en
determinados lugares del documento HTML, por lo que estarán disponibles para su ejecución
cuando la página se cargue en el navegador, dotando al documento de comportamiento propio,
capaz de manipular la estructura, el contenido o incluso la presentación del propio documento. En
otras palabras, se tiene la posibilidad de modificar la propia interfaz de usuario. El más extendido
de estos lenguajes es JavaScript, incluido originariamente en los navegadores de Netscape, y que a
día de hoy es un estándar ECMA denominado ECMAScript. JavaScript es un lenguaje interpretado,
para web y orientado a objetos (aunque usa tipado débil), que se ejecuta en un entorno anfitrión
(el navegador web) que le provee de un contexto de ejecución, en forma de objetos predefinidos
que representan diferentes elementos del navegador y la página, así como otras facilidades. Las
características más destacables de JavaScript, en lo referente a las interfaces de usuario, son:
Modificación del texto en un documento HTML: es posible insertar en un determinado lugar
del documento un determinado texto, v.g. el valor de una variable.
Reacción ante eventos: puede asociarse la ejecución de una función a la ocurrencia de un
determinado suceso (v.g la página se ha cargado, el usuario ha pulsado un botón). Esta
característica es clave para la programación del comportamiento de la interfaz de usuario.
Lectura/modificación de etiquetas HTML: JavaScript permite añadir, modificar o borrar
cualquier elemento del documento HTML, lo cual abre la posibilidad de modificar la estructura, el
contenido, la presentación o el enlazado de la información. Esto se consigue proporcionando al
programador una interfaz DOM (Document Object Model), que le permite manipular mediante una
sencilla notación el árbol del documento HTML.
Validación de datos de entrada: es sencillo programar las comprobaciones necesarias para
asegurarse de que los datos introducidos por el usuario son válidos, antes de ser enviados a un
agente de procesamiento.
Las diferentes versiones de JavaScript que implementan los navegadores en cuanto a las interfaces
DOM hacen que la programación en este lenguaje sea especialmente laboriosa para garantizar la
compatibilidad con diferentes navegadores. Esta particularidad ha de tenerse en cuenta al diseñar
interfaces para la web. Utilizaremos dos documentos como referencia básica para esta práctica. En
primer lugar, el tutorial JavaScript de w3c schools [1], que recoge mediante ejemplos interactivos
las características del lenguaje, y ofrece una referencia extensiva de los objetos predefinidos y los
objetos DOM. Luego, en [2] se ofrecen tutoriales tanto introductorios como para aspectos
específicos (en ocasiones dependientes del navegador), que sirven como consulta rápida.
Actividad 1: Comportamiento dinámico
El objetivo de esta actividad es practicar con los elementos más comunes del lenguaje para
implementar comportamiento dinámico básico en el documento: modificaciones al documento y
enlaces dinámicos. Para implementar esta actividad, se requiere conocer los siguientes elementos
de JavaScript: objetos predefinidos (Window, Date, Array…), Objetos DOM y eventos definidos en
un objeto. Para introducir el lenguaje se recomienda en primer lugar leer detenidamente las
secciones “JS Basics” y “JS Objects” propuestas en [1], visualizando los ejemplos para
familiarizarse con la sintaxis. Las ayudas se refieren al mismo [1]. Se desea modificar la página
web creada durante la Actividad 1 de la Práctica 1 (“mi primera página Web”) con las siguientes
características:
Mostrará la fecha y hora actual en la esquina superior derecha (Ayuda: consultar objeto JS Date y
las funciones avanzadas de JS Timing), actualizando este valor cada segundo.
Permitirá al usuario cambiar el color de fondo y del texto, así como el de los enlaces, tanto
visitados como por visitar. Para probar esta funcionalidad, incluir en la página un enlace a sí misma
y un fragmento de texto (Ayuda: consultar objeto DOM Body dentro de JS HTML DOM).
Mostrará al usuario una tabla con 3 columnas y un número cualquiera (arbitrariamente largo) de
filas, y le permitirá decidir qué columnas desea visualizar. Además, el color de fondo de las filas se
irá alternando entre gris y azul. La información almacenada en la tabla será la misma de una de las
secciones ya presente en la página (Ayuda: puede utilizarse un objeto JS Array para conservar los
datos de la tabla cuando las celdas se borran).
Tendrá una lista arbitrariamente larga de sitios Web externos (Universidades, redes sociales,
noticias…) que permita seleccionar al usuario los sitios Web que desea visitar. Al final de la lista se
añadirá un botón “Navegar”. El comportamiento deseado es que cuando se pulse en el botón, se
navegue simultáneamente a las páginas de inicio de los sitios Web que hubiesen sido
seleccionadas. (Ayuda: consultar objeto DOM Window dentro de JS HTML DOM).

Se valorará la correcta implementación de las características deseadas. No se considerarán

aspectos de usabilidad en la evaluación, ya que esta actividad es introductoria. Por tanto, se pide:
Un archivo actividad1.html que contenga la página solicitada, incluyendo los scripts necesarios.
Este archivo deberá ser escrito con un editor de textos, sin la ayuda de herramientas de edición.

Actividad 2: Formularios usables

El objetivo de esta actividad es mejorar la interfaz de usuario en el uso de formularios y practicar
su diseño. Entre las mejoras a realizar están el diseño universal, la validación y la imposición de
restricciones al formulario. Para ello, se modificará el formulario de búsqueda de hoteles diseñado
durante la Actividad 2 de la Práctica 1, añadiendo los siguientes controles.
- Los campos no opcionales son el correo, la aceptación de la política de privacidad, el nombre de
usuario, la contraseña y la contraseña repetida, las fechas de inicio y de fin.
- La fecha de inicio tiene que ser anterior a la fecha de fin.
- La fecha de inicio tiene que ser posterior a la fecha actual.
- El correo tiene que estar en el formato adecuado.

Los controles se ejecutaran una vez que el usuario pinche el botón “Enviar”. Si algún control falla,
se tendrá que indicar al usuario los campos donde ha ocurrido el error de manera que lo corrija. El
entorno de uso del formulario es el siguiente: PC con ratón y teclado, resolución de al menos
800x600 en color, y cualquier navegador, tanto textual (sin soporte para tablas) como gráfico (v.g.
Opera, Firefox, o IE). Se valorará la sencillez en el uso del formulario y la existencia de los
controles indicados. Asimismo, se valorará muy positivamente todas las decisiones de diseño que
impidan al usuario cometer errores, tales como la validación de los datos, o la ayuda ofrecida al
usuario en caso de cometer algún error. Se valorará negativamente que la interfaz permita utilizar
o visualizar controles si éstos carecen de sentido. Para garantizar en lo posible la universalidad de
acceso a la interfaz, será imprescindible que no existan diferencias en el funcionamiento de los
procesos de validación en al menos dos navegadores diferentes. Asimismo, se deberá probar el
aspecto en algún navegador textual que no soporte tablas. Esto puede realizarse con el navegador
Opera, marcando las opciones View|Style|Disable Tables y View|Style|Emulate Text Browser, o
bien con navegadores puramente textuales como lynx. Por tanto, se pide:
Un archivo actividad2.html que contenga el formulario y el código JavaScript de validación. Este
archivo deberá ser escrito con un editor de textos, sin la ayuda de herramientas de edición.
Comentarios HTML dentro del documento que justifiquen qué comprobaciones se realizan, en qué
momento es mejor realizarlas y qué mensaje se le muestra al usuario para notificarle el error.
Deberá incluirse un comentario al principio del documento indicando los navegadores en los que se
ha probado y el resultado obtenido.

Ejercicios de trabajo personal

Podrán entregarse una o más de las siguientes actividades.
Actividad 3: Calculadora (entrega opcional)
Crear con JavaScript una calculadora que permita sumar, restar, dividir y multiplicar dos números.
Asumir el mismo entorno de uso que en la actividad 2. Se valorará la sencillez en el uso del mismo.
Se pide:
Un archivo actividad3.html que contenga la calculadora.

Actividad 4: Tablas ordenables (entrega opcional)

Crear una página que contenga una tabla HTML con dos columnas. La tabla tendrá una cabecera,
de forma que al hacer clic con el ratón sobre la cabecera de una columna, la tabla se ordenará de
forma creciente. Si se hace otra vez clic, lo hará de forma decreciente, y así sucesivamente por
cada columna. Ayuda: utilizar arrays y la función sort(). Las columnas han de contener números. El
entorno de uso es como el de la actividad 2, con la excepción de que se permite el uso de tablas.
La solución no debe utilizar controles dependientes de un navegador específico.
Se pide:
Un archivo actividad4.html que contenga la tabla con el comportamiento especificado

Lecturas recomendadas
[1] “JavaScript Tutorial”, Tutorial JavaScript de W3 Schools, disponible en
http://www.w3schools.com/js/
[2] “JavaScript tutorials”, disponible en http://www.javascriptkit.com/javatutors/