VICERRECTORADO DOCENTE Código: GUIA-PRL-001
CONSEJO ACADÉMICO Aprobación: 2016/04/06
Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación
PRÁCTICA DE LABORATORIO
CARRERA: INGENIERIA DE SISTEMAS/COMPUTACION ASIGNATURA: HIPERMEDIAL
NRO. PRÁCTICA: 3 TÍTULO PRÁCTICA: Resolución de problemas sobre JavaScript
OBJETIVO
- Entender y organizar de una mejor manera los sitios de web en Internet
- Diseñar adecuadamente elementos gráficos en sitios web en Internet.
- Crear sitios web aplicando estándares actuales.
1. Se pide diseñar una interfaz en HTML que permita ingresar los siguientes campos en un formulario: cedula,
nombres, apellidos, dirección, teléfono, fecha de nacimiento, correo electrónico y contraseña.
Resolución CS N° 076-04-2016-04-20
VICERRECTORADO DOCENTE Código: GUIA-PRL-001
CONSEJO ACADÉMICO Aprobación: 2016/04/06
Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación
Luego, usando funciones de JavaScript se pide validar que todos los campos han sido ingresados, además;
que los valores ingresados en cada campo del formulario sean correctos teniendo en cuenta las siguientes
condiciones:
a. Se debe validar qué, en el campo de la cedula, se ingrese sólo números y que la misma sea correcta, en
base, al último dígito verificador.
b. Se debe validar qué, en el campo del nombre, ingrese mínimo un nombre y que permita ingresar sólo letras
Resolución CS N° 076-04-2016-04-20
VICERRECTORADO DOCENTE Código: GUIA-PRL-001
CONSEJO ACADÉMICO Aprobación: 2016/04/06
Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación
c. Se debe validar qué, en el campo del apellido, ingrese mínimo un apellido y que permita ingresar sólo letras
En este campo se utiliza el mismo procedimiento que en el del campo nombre puesto que es similar.
d. Se debe validar qué, en el campo del teléfono, permita ingresar sólo números y un máximo de 10
e. Se debe validar que la fecha de nacimiento ingrese en el formato dd/mm/yyyy.
Resolución CS N° 076-04-2016-04-20
VICERRECTORADO DOCENTE Código: GUIA-PRL-001
CONSEJO ACADÉMICO Aprobación: 2016/04/06
Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación
f. Se debe validar qué, en el campo correo electrónico, permita ingresar un correo válido. Se considera un
correo válido, cuando comienza por tres o más valores alfanuméricos, luego un @, seguido por la extensión
“[Link]” o “[Link]”.
g. Se debe validar que la contraseña ingresada tenga mínimo 8 caracteres, además, debe incluir al menos: una
letra mayúscula, una letra minúscula y un carácter especial (@, _, $)
Resolución CS N° 076-04-2016-04-20
VICERRECTORADO DOCENTE Código: GUIA-PRL-001
CONSEJO ACADÉMICO Aprobación: 2016/04/06
Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación
2. Se pide diseñar una interfaz en html que tenga tres botones que diga “Anterior”, “Iniciar”, “Siguiente”, y una
imagen.
Resolución CS N° 076-04-2016-04-20
VICERRECTORADO DOCENTE Código: GUIA-PRL-001
CONSEJO ACADÉMICO Aprobación: 2016/04/06
Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación
Luego, desde javascript se debe controlar para al hacer clic sobre uno de los botones realice una acción
relacionada a una galería de imágenes
a. Se debe tener, un arreglo con los nombres de diez imágenes, previamente descargadas y almacenadas en
una carpeta llamada “images”.
b. La galería de imágenes debe visualizar exclusivamente 5 imágenes.
c. Cada vez que se haga clic en le botón iniciar se deben escoger de manera aleatoria cinco imágenes de las diez
que se mostrarán en la galería de imágenes.
d. Al hacer clic en el botón siguiente y haber llegado a la última imagen disponible, el botón siguiente deberá
ser deshabilitado (sólo cuando se ha llegado a la última imagen el botón siguiente deberá estar
deshabilitado)
e. Al hacer clic en el botón anterior y haber llegado a la primera imagen disponible, el botón anterior deberá ser
deshabilitado (sólo cuando se ha llegado a la última imagen y cuando se inicie la galería de imágenes el botón
anterior deberá estar deshabilitado)
Resolución CS N° 076-04-2016-04-20
VICERRECTORADO DOCENTE Código: GUIA-PRL-001
CONSEJO ACADÉMICO Aprobación: 2016/04/06
Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación
RESULTADO(S) OBTENIDO(S):
1. Formulario
a. Al darle click al botón aceptar sin llenar ningún campo se muestra el siguiente mensaje y los bordes de
los textbox se muestran de color rojo
Resolución CS N° 076-04-2016-04-20
VICERRECTORADO DOCENTE Código: GUIA-PRL-001
CONSEJO ACADÉMICO Aprobación: 2016/04/06
Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación
b. Rellenando los campos uno por uno.
Al comprobar que todos los campos están correctos se salta a una página php
Resolución CS N° 076-04-2016-04-20
VICERRECTORADO DOCENTE Código: GUIA-PRL-001
CONSEJO ACADÉMICO Aprobación: 2016/04/06
Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación
2. Galería de Fotos
Al darle click a incio
Resolución CS N° 076-04-2016-04-20
VICERRECTORADO DOCENTE Código: GUIA-PRL-001
CONSEJO ACADÉMICO Aprobación: 2016/04/06
Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación
En la ultima foto mostrada se bloquea el botón siguiente
Repositorio GitHub
[Link]
Usuario:
waltermauc
Resolución CS N° 076-04-2016-04-20
VICERRECTORADO DOCENTE Código: GUIA-PRL-001
CONSEJO ACADÉMICO Aprobación: 2016/04/06
Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación
CONCLUSIONES:
- Los estudiantes podrán organizar sitios web basados en el lenguaje de etiquetado HTML, CSS y JavaScript
RECOMENDACIONES:
- Probar la solución de la práctica en al menos tres navegadores web; Google Chrome, Firefox y Safari
Estudiante: Walter Bau
Firma:
Resolución CS N° 076-04-2016-04-20
