Facultad de Ciencias y Tecnologías Departamento de Computación Ingeniería en Telemática Programación Orientada a la web Práctica 4: Mi agenda personal Objetivo: En esta práctica se introducirá en la utilización de JavaScript para dotar de interactividad nuestras páginas web. Se evaluará el uso de arrays, funciones y demás elementos de JavaScript. Duración de la Práctica: 2 Semana. Introducción En esta práctica, realizaremos una página web en la cual aplicaremos los conceptos vistos en la teoría acerca de JavaScript. Para su realización, recomiendo se debe de tener a mano la documentación y los ficheros proporcionados en la clase. Esta página web simulará una agenda de contactos personalizada. Por tal motivo nuestro sitio web estará compuesto por dos páginas. La primera se llamará index.html y será la que pida al usuario su login y su clave para poder acceder a la segunda página que se llamará agenda.html que es la que contendrá la agenda en concreto. Funcionamiento y aspecto de la página Web Inicialmente, nuestra página Web mostrará la página de inicio (index.html) el cual tendrá la apariencia siguiente. En esta página se le pedirá al usuario su nombre y su clave para poder acceder a la página de la agenda cuando este presione el botón enviar. Se deja ha opción del estudiante el decidir el nombre y la clave de acceso. Ing. Denis Espinoza Hernández Facultad de Ciencias y Tecnologías Departamento de Computación Ingeniería en Telemática Programación Orientada a la web Se deberá de validar que al pulsar el botón enviar, el usuario no haya dejado ninguno de los campos en blanco en cuyo caso se le enviará un mensaje: También se enviará un mensaje cada vez que el nombre o la clave no sean los correctos indicándole: Una vez que el usuario haya introducido el nombre y la clave correctos, se cargará en la misma ventana la página agenda.html. La interfaz de dicha página es la siguiente: Ing. Denis Espinoza Hernández Facultad de Ciencias y Tecnologías Departamento de Computación Ingeniería en Telemática Programación Orientada a la web Al cargar la página se estará inicializada con cuatro registros. De momento, no seremos estrictos con las validaciones y nos conformaremos con que cada botón haga lo que se indica. Como se puede observar, dicha página consta con los botones siguientes: (Nuevo): Vaciará las cajas de texto para que el usuario pueda ingresar un nuevo registro. (Guardar): Guarda el nuevo registro que el usuario este añadiendo y luego se irá al primer registro, una vez que se halla añadido el registro, se enviará un mensaje que diga, “Mensaje Añadido Correctamente”. (Borrar): Borrará el elemento actual. Antes de hacerlo, se enviará al usuario un mensaje para confirmar si en realidad desea borrar el elemento. (Buscar): Presentará por pantalla un prompt que preguntará al usuario el nombre de la persona que desea buscar. Se recorrerán todos los elementos del array en busca de alguna coincidencia con la cadena que el usuario haya introducido. Si se encuentra, el formulario se ubicará en la posición en la que está el elemento presentando por pantalla sus datos, sino se encuentra se enviará un mensaje de elemento no encontrado. Los demás botones permitirán movernos a los largo de todos los registros como en las bases de datos (Primero, Anterior, Siguiente, Ultimo). Desarrollo de la Práctica Para la realización de dicha práctica, se deberán de elaborar dos páginas web que son index.html y agenda.hml como se menciono anteriormente. Como primer paso, diseñe las dos páginas web para que estructuralmente tengan la forma siguiente: Ing. Denis Espinoza Hernández Facultad de Ciencias y Tecnologías Departamento de Computación Ingeniería en Telemática Programación Orientada a la web index.html: agenda.html Ing. Denis Espinoza Hernández Facultad de Ciencias y Tecnologías Departamento de Computación Ingeniería en Telemática Programación Orientada a la web Como segundo paso, quite los bordes a las tablas en ambas páginas web. Ahora declare un archivo llamado estilo.css en cual deberá declarar dos estilos: Encabezado: Que será aplicado a los encabezados de ambas páginas web (es decir la primera fila de cada uno de las tablas), el cual permita que el fondo sea el archivo header.gif , las letras en negrita, arial, centradas, de tamaño 12 y de color blancas y que determine que el ancho es de 12%. Elemento: Que será aplicado al resto de las filas de ambas tablas, el cual permita que el fondo sea el archivo blue.gif , las letras en arial, alineadas a la izquierda, de tamaño 12 y de color negras. Una vez definida la hoja de estilo, añádala a ambas páginas y recuerda establecer esos estilos a las filas correctas de cada tabla para que sus páginas se vean como la que se muestra en el inicio. Para finalizar deberemos de crear un archivo de JavaScript al que llamaremos funciones.js en el cual añadiremos todo el código necesario para darle toda la funcionalidad a nuestra página web. Este archivo deberá de ser incluido en cada uno de las páginas ya que ambas utilizan funciones JavaScript. Funciones para agenda.html También dentro del fichero funciones.js se deberán de añadir todas las funciones necesarias para darle funcionalidad a nuestra agenda. La estructura del archivo funciones.js es la siguiente: function validar(formu) { /*Se encarga de validar los datos introducidos en el formulario de inicio si son correctos Nos enviará a la página agenda.html usando location.href = “agenda.html”*/ } //Array que guardará los datos de los contactos de la agenda Agenda = new Array(); //Añadiendo datos para un contacto Agenda[0] = new Array(4); Agenda[0][0] = "Denis Espinoza"; Agenda[0][1] = "denis@yahoo.es"; Agenda[0][2] = "3151978"; Agenda[0][3] = "Ninguna"; //De igual manera que se hizo deberá añadir 3 elementos más al array /* La función iniciar, recibe el formulario y coloca en el los elementos almacenados en la primera posición del array. Esta función es llamada desde el evento load del body */ Ing. Denis Espinoza Hernández Facultad de Ciencias y Tecnologías Departamento de Computación Ingeniería en Telemática Programación Orientada a la web function iniciar(formu) { formu.nombre.value = Agenda[0][0]; formu.email.value = Agenda[0][1]; formu.telefono.value = Agenda[0][2]; formu.notas.value = Agenda[0][3]; } /* Todas las funciones siguientes son llamadas desde el evento onClick*/ function nuevo(formu) { // Vacía todos los campos del formulario, es llamado desde la imagen de nuevo. } function guardar(formu) { /*Añade memoria para un nuevo elemento del array y guarda en el los datos que están en el formulario. Es llamada desde la imagen guardar */ } function primero(formu) { /*Carga en el formulario lo que hay en la primera posición del array, es llamada desde el botón primero*/ } function anterior(formu) { /*Carga en el formulario lo que hay en la posición anterior a la posición actual del array, debe validarse que no se intente acceder a la posición -1, es llamada desde el botón anterior*/ } function siguiente(formu) { /*Carga en el formulario lo que hay en la posición siguiente a la posición actual del array, debe validarse que no se intente acceder a la posición última + 1, es llamada desde el botó n siguiente*/ } function ultimo(formu) { /*Carga en el formulario lo que hay en la última posición del array, es llamada desde el botón ultimo*/ } Ing. Denis Espinoza Hernández Facultad de Ciencias y Tecnologías Departamento de Computación Ingeniería en Telemática Programación Orientada a la web function borrar(formu) { /*Borra lo que hay en la posición actual, enviando un mensaje de confirmación primero y luego un mensaje de aviso*/ } function buscar(formu) { /*Enviará un prompt que pregunte al usuario el nombre que desea buscar y una vez hecho cargará en el formulario el dato buscado o enviará un mensaje de error si acaso no lo encuentra*/ } Ing. Denis Espinoza Hernández