guia practica 7

Página: 1

GUIA PRACTICA Nº 7 CURSO : Desarrollo de Entornos Web SEMESTRE : 2015 - 02 SECCIÓN : TODAS TEMA : Programación Orientada a Objetos

Ejercicio 2a Diseña una página HTML donde registre los datos de un Participante: nombre, apellido, DNI y correo electrónico, validando:

a. Campo Nombre y Apellido: no sea vacío b. Campo DNI no esté vacío y sea de 8 digitos c. Campo Correo: no se encuentre vacío y sea de formato email.

Procedimientos: 1. En su disco de trabajo, debe crear una carpeta llamada DEW semana07 con la

siguiente estructura:

Página: 2

2. A continuación abrimos el DreamWeaver y seleccionamos desde la opción Sitio,

nuevo Sitio, tal como se muestra 3. Ingrese el nombre del sitio y seleccione la carpeta DEW semana07 Haga clic en el botón Guardar para terminar.

Selecciona la opción

Buscamos la carpeta del sitio

Selecciona la carpeta

Página: 3

4. A continuación vamos a crear una página javaScript. Selecciona desde la opción

crear nuevo, la opción JS, tal como se muestra.

Se muestra la plantilla de la página JS, tal como se muestra en la figura.

Selecciona la opción para crear página

Página: 4

En este archivo js definimos las funciones para generar un slider de imágenes. Paso 1: Definimos un Array de imágenes, el cual almacenará las direcciones de las imágenes y un Array de direcciones URL, tal como se muestra A continuación definimos dos variables: La variable “c”: la cual llevará el índice o ubicación de las imágenes a visualizar La variable “t”: la cual manejará el setTimeout

Definición de un Array de imágenes

Definición de un Array de URL

Contador de imágenes

Manejo del setTimeout

Página: 5

Como último paso definimos los métodos rotación() y ver(n), tal como se muestra. En estas funciones aplicamos los métodos setTimeout (método, milisegundos) y clearTimeout (var). Grabe el archivo en la carpeta js con el nombre librería.js, tal como se muestra.

Función que permite realizar el cambio de imagen: ejecutando

setTimeout()

Función que permite realizar cambio de

imágenes

Selecciona la carpeta js

Nombre del archivo

Página: 6

5. A continuación vamos a crear una página javaScript. Selecciona desde la

opción crear nuevo, la opción JS, tal como se muestra.

En el archivo definimos la clase Persona y el método mensaje, tal como se muestra

Selecciona la opción para crear página

Definición de la clase Persona

Definición del método mensaje de la clase

Persona

Página: 7

A continuación defina la función validar, donde ingresamos los datos: nombre, apellido, dni y correo.

a. Nombre y apellido: no debe estar vacío y debe contener caracteres b. dni: sea numérico y de 8 cifras c. Correo: no debe estar vacío y debe ser formato correo

Defina la función registro, el cual recibe como parámetro: nombre, apellido, dni y correo, primero ejecute el método validar, si retorna 1, instanciar la clase Persona y ejecuta el método mensaje, tal como se muestra.

Definición de la expresión para ingresar solo

caracteres

Valido: nombre y apellido no está vacío o no es de

formato indicado

Valido que el dni sea del formato indicado

Valido si el correo no es de formato indicado

Si los datos están OK, muestra una alerta y retorna 1

Definición de la función registro

Página: 8

A continuación, guardar el archivo js con el nombre de estructura.js, tal como se muestra.

6. A continuación agregamos una hoja de estilo, tal como se muestra.

Selecciona la opción para crear hoja de estilo

Selecciona la carpeta js

Nombre del archivo

Página: 9

Defina los estilos para las páginas, tal como se muestra.

A continuación guardamos el archivo en la carpeta CSS, y le asignamos el nombre estilo, tal como se muestra.

Selecciona la carpeta css

Nombre del archivo

Página: 10

7. Seleccione la opción Nuevo del menú Archivo para crear un documento de HTML,

tal como se muestra Página HTML en blanco

Selecciona esta opción para crear la página

HTML

Página: 11

A continuación guardar la página HTML, como home, tal como se muestra A continuación referenciar la dirección de la hoja de estilo y la librería: arrastre, desde la ventana Archivo, el archivo css y el archivo js, tal como se muestra

Selecciona la carpeta páginas

Nombre del archivo

Página: 12

A continuación diseña la cabecera de la página <header> donde se visualiza la imagen y la numeración para cambiar de imagen.

Al cargar la página, ejecutamos el método rotación()

Bloque donde visualizamos el slider de imagenes

Bloque donde al clickear un número, cambiamos de

imagen

Página: 13

Defina el section donde diseña el registro de participantes; y en el boton ACEPTAR, programa el evento onClick para ejecutar el metodo registro, tal como se muestra

Evento onClick, donde ejecuto el método registro enviando el nombre, apellido, dni y correo

Página: 14

Guarda el archivo, ejecuta la página home.html, ingresa los datos al presionar el botón Aceptar visualizo los datos seleccionados.