04-Mi agenda personal

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] = "[email protected]";
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