Guia Practica 7
description
Transcript of Guia Practica 7
![Page 1: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/1.jpg)
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:
![Page 2: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/2.jpg)
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
![Page 3: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/3.jpg)
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
![Page 4: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/4.jpg)
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
![Page 5: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/5.jpg)
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
![Page 6: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/6.jpg)
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
![Page 7: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/7.jpg)
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
![Page 8: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/8.jpg)
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
![Page 9: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/9.jpg)
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
![Page 10: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/10.jpg)
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
![Page 11: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/11.jpg)
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
![Page 12: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/12.jpg)
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
![Page 13: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/13.jpg)
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
![Page 14: Guia Practica 7](https://reader034.fdocuments.mx/reader034/viewer/2022050909/5695d4401a28ab9b02a0ca1e/html5/thumbnails/14.jpg)
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.