GUIA PRACTICA N 7

CURSO
SEMESTRE
SECCIN
TEMA

:
:
:
:

Desarrollo de Entornos Web

2015 - 02
TODAS
Programacin Orientada a Objetos

Ejercicio 2a
Disea una pgina HTML donde registre los datos de un Participante: nombre,
apellido, DNI y correo electrnico, validando:
a. Campo Nombre y Apellido: no sea vaco
b. Campo DNI no est vaco y sea de 8 digitos
c. Campo Correo: no se encuentre vaco y sea de formato email.

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

Pgina: 1

2. A continuacin abrimos el DreamWeaver y seleccionamos desde la opcin Sitio,

nuevo Sitio, tal como se muestra

Selecciona la opcin

3. Ingrese el nombre del sitio y seleccione la carpeta DEW semana07

Buscamos
la carpeta
del sitio

Selecciona
la carpeta

Haga clic en el botn Guardar para terminar.

Pgina: 2

4. A continuacin vamos a crear una pgina javaScript. Selecciona desde la opcin

crear nuevo, la opcin JS, tal como se muestra.

Selecciona la opcin
para crear pgina

Se muestra la plantilla de la pgina JS, tal como se muestra en la figura.

Pgina: 3

En este archivo js definimos las funciones para generar un slider de imgenes.

Paso 1: Definimos un Array de imgenes, el cual almacenar las direcciones de las
imgenes y un Array de direcciones URL, tal como se muestra

Definicin de un Array
de imgenes
Definicin de un Array
de URL

A continuacin definimos dos variables:

La variable c: la cual llevar el ndice o ubicacin de las imgenes a visualizar
La variable t: la cual manejar el setTimeout

Contador de imgenes

Manejo del setTimeout

Pgina: 4

Como ltimo paso definimos los mtodos rotacin() y ver(n), tal como se muestra. En
estas funciones aplicamos los mtodos setTimeout (mtodo, milisegundos) y
clearTimeout (var).

Funcin que permite

realizar el cambio de
imagen: ejecutando
setTimeout()

Funcin que permite

realizar cambio de
imgenes

Grabe el archivo en la carpeta js con el nombre librera.js, tal como se muestra.

Selecciona la carpeta js

Nombre del archivo

Pgina: 5

5. A continuacin vamos a crear una pgina javaScript. Selecciona desde la

opcin crear nuevo, la opcin JS, tal como se muestra.

Selecciona la opcin
para crear pgina

En el archivo definimos la clase Persona y el mtodo mensaje, tal como se muestra

Definicin de la clase
Persona

Definicin del mtodo

mensaje de la clase
Persona

Pgina: 6

A continuacin defina la funcin validar, donde ingresamos los datos: nombre, apellido,
dni y correo.
a. Nombre y apellido: no debe estar vaco y debe contener caracteres
b. dni: sea numrico y de 8 cifras
c. Correo: no debe estar vaco y debe ser formato correo

Definicin de la expresin
para ingresar solo
caracteres
Valido: nombre y apellido
no est vaco 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 estn OK, muestra una

alerta y retorna 1

Defina la funcin registro, el cual recibe como parmetro: nombre, apellido, dni y
correo, primero ejecute el mtodo validar, si retorna 1, instanciar la clase Persona y
ejecuta el mtodo mensaje, tal como se muestra.

Definicin de la funcin registro

Pgina: 7

A continuacin, guardar el archivo js con el nombre de estructura.js, tal como se

muestra.

Selecciona la carpeta js

Nombre del archivo

6. A continuacin agregamos una hoja de estilo, tal como se muestra.

Selecciona la opcin para

crear hoja de estilo

Pgina: 8

Defina los estilos para las pginas, tal como se muestra.

A continuacin guardamos el archivo en la carpeta CSS, y le asignamos el nombre

estilo, tal como se muestra.

Selecciona la carpeta css

Nombre del archivo

Pgina: 9

7.

Seleccione la opcin Nuevo del men Archivo para crear un documento de HTML,
tal como se muestra

Selecciona esta opcin

para crear la pgina
HTML

Pgina HTML en blanco

Pgina: 10

A continuacin guardar la pgina HTML, como home, tal como se muestra

Selecciona la carpeta pginas

Nombre del archivo

A continuacin referenciar la direccin de la hoja de estilo y la librera: arrastre, desde

la ventana Archivo, el archivo css y el archivo js, tal como se muestra

Pgina: 11

A continuacin disea la cabecera de la pgina <header> donde se visualiza la imagen

y la numeracin para cambiar de imagen.

Al cargar la pgina, ejecutamos

el mtodo rotacin()

Bloque donde visualizamos el

slider de imagenes

Bloque donde al clickear

un nmero, cambiamos de
imagen

Pgina: 12

Defina el section donde disea 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 mtodo registro enviando el
nombre, apellido, dni y correo

Pgina: 13

Guarda el archivo, ejecuta la pgina home.html, ingresa los datos al presionar el botn
Aceptar visualizo los datos seleccionados.

Pgina: 14