Actividad 08

Desarrollo de Entornos Web (2351) 1
LABORATORIO
Trabajando con expresiones regulares
En este laboratorio vamos a crear una página HTML llamada registro.html para ingresar los
datos del usuario. En este proceso realice las siguientes operaciones:
a. Validar que el DNI tenga 8 dígitos
b. Validar que el nombre y apellido no estén vacíos
c. Validar que el fono sea numérico entre 9 a 15 dígitos
d. Validar que el email tenga el formato de correo electrónico.
1. Creando el Sitio Web

Defina una carpeta llamado SitioWeb_07, en ella crea las siguientes sub carpetas, tal como se
muestra.
Figura : Caso práctico

Fuente: Diseño propio
2. Trabajando con Visual Studio Code

Para crear una página web, abrir el aplicativo Visual Studio Code.

Carrera de Computación e Informática Cibertec

Para trabajar con la carpeta llamada SitioWeb_07 en Visual Studio Code, arrastre la carpeta
hacia la ventana del Visual, tal como se muestra; y luego soltarla.

Donde se visualiza la carpeta en la parte izquierda de la ventana del aplicativo


1. Diseñando la página web

En esta etapa vamos a diseñar la registro.html.

Agregando los enlaces al archivo CSS y javaScript

En la página1.html, defina el esquema de la página web. Primero enlazamos la página a la hoja
de estilos: estilos.css y a los archivos js: programa.js y validación.js. En el body, defina el
esquema de la página, agregar los selectores a los elementos de la misma.


Diseño de la página web

Defina los elementos de la página, tal como se muestra.
<body>
<main>
<header>
<div id="divlogo">
<img src="imgs/logo.jpg" />
</div>
<div id="divsocial">
<img class="social" src="imgs/face.jpg" data-social="face" />
<img class="social" src="imgs/instagram.jpg" data-social="instagram" />
<img class="social" src="imgs/twitter.jpg" data-social="twitter" />
</div>
<img id="imgheader" src="imgs/header.jpg" alt="Diseño" />
<div id="nav">
<a href="#">Home</a>
<a href="#">Productos</a>
<a href="#">Ofertas</a>
<a href="#">Sedes</a>
<a href="#">Contactenos</a>
</div>
</header>
<section id="soferta">
<h2 id="h2cab">Registro de Usuario</h2>
<form name="frmregistro" onsubmit="registrar(this)">
<table>
<tr>
<td>DNI</td>
<td><input type="text" name="txtdni" placeholder="DNI"> </td>
</tr>
<tr>
<td>Nombre</td>
<td><input type="text" name="txtnombre" placeholder="Nombre"> </td>
</tr>
<tr>
<td>Apellido</td>
<td><input type="text" name="txtapellido" placeholder="Apellido"> </td>
</tr>
<tr>
<td>Direccion</td>
<td><input type="text" name="txtdireccion" placeholder="Direccion"> </td>
</tr>
<tr>
<td>Telefono</td>
<td><input type="text" name="txtfono" placeholder="Telefono"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="txtemail" placeholder="Email"></td>
</tr>

<tr>
<td><input type="reset" value="Limpiar"></td>
<td><input type="submit" value="Enviar"></td>
</tr>
</table>
</form>
</section>
<footer>
<div class="divfooter" >
<img class="imgfooter" src="imgs/tradiciones.jpg" />
<p>Tradiciones</p>
</div>
<div class="divfooter">
<img class="imgfooter" src="imgs/gastronomia.jpg" />
<p>Gastronomía</p>
</div>
<div class="divfooter">
<img class="imgfooter" src="imgs/festival.jpg" />
<p>Festival</p>
</div>
<img id="imgfooter" src="imgs/pie.jpg" />
</footer>
</main>
</body>
Definiendo el archivo estilos.css

Definida el esquema de la página, defina el estilo a los elementos de la página en la hoja de
estilo, tal como se muestra.
body
{
background-color:beige;
}
main{
width:94%;
margin-left:3%;
margin-right:3%;
margin-top: 10px;
float:left;
background-color:white;
border-radius:20px;
}
header{
width:80%;
float:left;
background-color: #F56A09;
padding:30px 10% 30px 10%;
}

#imgheader{
width:100%;
height:300px;
float:left;
}
#nav{
width:100%;
float:left;
margin-top:5px;
}
#divlogo{
width:40%;
float:left;
}
#divlogo>img{
width:30%;
height:50px;
float:left;
margin:2%
}
#divsocial{
width:100%;
text-align: right;
}
.social{
width: 30px;
width: 30px;
border-radius: 20px;
}
#nav>a{
height:40px;
padding-top: 10px;
padding-bottom: 10px;
width: 20%;
font-size:1.5em;
color: white;
text-align: center;
float: left;
}
#nav>a:hover{
background-color: white;
color:#F56A09;
}
#slogueo>h2{
text-align: center;
}
table{
margin: 0 auto;
}

footer{
width:100%;
min-height: 200px;
float:left;
background-color: #F56A09;
}
.divfooter{
width: 33.3%;
float: left;
text-align: center;
}
.divfooter>img{
width: 90px;
height: 90px;
padding-top: 50px;
padding-bottom: 10px;
}
.divfooter>p{
color:white;
font-size: 1.5em;
}
#imgfooter{
width: 100%;
height: 120px;
float: left;
}
Definiendo la programación: programa.js.

1. En el archivo de javascript programa.js, defina el Array lista, el cual almacena las
direcciones de las imágenes. Este Array() será utilizado en ela función carrusel(), el cual
cambia la imagen por intervalo de un segundo, tal como se muestra.


2. Defina las funciones cambio(e) y regresa(e), funciones que permiten cambiar la imagen
de la red social. A continuación defina las funciones gira(e) y retorna(e) funciones que
permiten girar un elemento 360 grados y 0 grados en su eje Y por un segundo.

3. A continuación, en el archivo programa.js, enlazamos a los elementos de las paginas,

los eventos correspondientes, tal como se muestra.


Definiendo la programación: valida.js.

1. Defina el evento keypress para el input txtdni, donde verifique que la longitud
del mismo sea 8 caracteres; y además solo permite el ingrese de caracteres
numéricos.

2. Defina el evento keypress para los input txtnombre y txtapellido, donde

permite solamente el ingreso de caracteres no numéricos.


3. Defina el método registrar, donde valida los datos de los input utilizando las
expresiones regulares, dichas validaciones están especificadas en la pregunta.


Para ejecutar la página web, seleccionar la pestaña registro.html, y presiona la tecla F5.


Actividad 08

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Actividad 08

Cargado por

Copyright:

Formatos disponibles

Desarrollo de Entornos Web (2351) 1

1. Creando el Sitio Web

Figura : Caso práctico

2. Trabajando con Visual Studio Code

Figura : Caso práctico

Carrera de Computación e Informática Cibertec

Figura : Caso práctico

Donde se visualiza la carpeta en la parte izquierda de la ventana del aplicativo

Figura : Caso práctico

Carrera de Computación e Informática Cibertec

1. Diseñando la página web

Figura : Caso práctico

Agregando los enlaces al archivo CSS y javaScript

Figura : Caso práctico

Carrera de Computación e Informática Cibertec

Diseño de la página web

Carrera de Computación e Informática Cibertec

Definiendo el archivo estilos.css

Carrera de Computación e Informática Cibertec

Carrera de Computación e Informática Cibertec

Definiendo la programación: programa.js.

Figura : Caso práctico

Carrera de Computación e Informática Cibertec

Figura : Caso práctico

3. A continuación, en el archivo programa.js, enlazamos a los elementos de las paginas,

Figura : Caso práctico

Carrera de Computación e Informática Cibertec

Definiendo la programación: valida.js.

Figura : Caso práctico

2. Defina el evento keypress para los input txtnombre y txtapellido, donde

Figura : Caso práctico

Carrera de Computación e Informática Cibertec

Figura : Caso práctico

Carrera de Computación e Informática Cibertec

Figura : Caso práctico

Carrera de Computación e Informática Cibertec

También podría gustarte