You are on page 1of 31

JavaScript avanzado

Eduardo Andrés Espinoza Muñoz

Programación HTML II

Instituto IACC

27 de Agosto del 2018


INSTRUCCIONES: Recuerde que usted pertenece al departamento de informática de una

compañía de análisis de mercado denominada Merana, y en las últimas dos semanas fue

asignado a un nuevo proyecto donde requerían realizar una encuesta online para indagar respecto

de la calidad del servicio recibido por los usuarios del Metro.

Ya se diseñó e implementó el formulario que será utilizado y se realizó el diseño preliminar de

las estructuras de validación, y como parte de la tarea de esta semana se debe haber completado

el diseño e implementación del código necesario para validar los datos suministrados por el

usuario.

El código resultante de la tarea de esta semana contempla el rediseño de la estructura del código

generado para que utilice programación orientada a objetos (POO) y funciones, a fin de ofrecer

una implementación eficiente y estructurada. Las funciones y objetos desarrollados deben poder

ser reusados con facilidad en otro proyecto, por lo que se debe tener cuidado de no generar una

alta dependencia entre los componentes del código.


Desarrollo

 Código estilo css

@charset "utf-8";

<!—Se indican colores corporativos al formulario, fuente, tamaño y color -->

body{

background-image: url(../images/fondo.jpg);

background-size: cover;

background-attachment: fixed;

font-family: 'Comic Sans', sans-serif;

font-size: 0.75em;

color: #000000;

<!—Se determina padding general para las etiquetas div, danlole los valores a margin y al

padding-->

div{

margin: auto;

padding: 0.125em 0em;

<!—Se determina el aspecto del encabezado-->

h1, h3 {

text-align: center;

font-weight: bold;

text-shadow: 0.125em 0.125em #A5E989;


letter-spacing: 0.1em;

<!—Se determina el aspecto general del formulario, color de fondo, espaciado y margen, etc,-->

form {

background: rgba(0, 225, 0, 0.5);

padding: 0em 0.5em 0.5em;

margin-top: 1.25em;

border-radius: 20px;

border: thin solid #FBFBEF;

<!—Se determina el marco del grupo fiedset, con sus características-->

fieldset {

border-radius: 15px;

border-color: #FBFBEF;

margin-bottom: 0.625em;

border-top-width: 0.125em;

border-top-style: solid;

padding: 0.310em;

box-shadow: 10px 10px 5px #274219;

<!—Se determina los títulos de los grupos con sus características-->

legend {

padding: 0.125em 0.625;

text-align: right;
font-weight: bold;

letter-spacing: 0.2em;

label{

color: #6AE955;

text-shadow:5px 5px 5px #000000;

<!—Se determina input con sus características incluidas color, espaciado etc.-->

input{

background: #FFFFFF;

padding: 0.125em;

color: #000000;

border-radius: 10px;

border: 0.062em solid #FFFFFF;

<!—Se determina el ancho y la alineación de los campos de texto-->

input[type='text']{

width: 140px;

text-align: right;

<!—Se le indica cambiar el color del texto al seleccionar en radio buttons-->

input[type='radio']:checked + label,input[type='checkbox']:checked + label{

color: #000000;

}
<!—Se determina los parámetros de las listas de selección, indicando sus características -->

select{

width: 160px;

background: #FFFFFF;

color: #000000;

padding: 5;

border-radius: 10px;

border: 0.062em solid #000000;

<!—Se determina el cuadro de texto con sus características -->

textarea{

background: #FFFFFF;

color: #000000;

resize: none;

height: 08em;

width: 94%;

border-radius: 10px;

border: 0.062em solid #000000;

<!—Se indica la eliminación de la decoración de las etiquetas “a”-->

a{

text-decoration: none;

}
<!—Se alinean los botones-->

.botones{

text-align: center;

<!—Se mantiene en una línea el contenido-->

.unalinea{

padding: 0.187em 0.652em;

display: inline-block;

<!—Se indica que el bloque de texto este centrado-->

.textarea{

padding: 0.312em;

text-align: center;

<!—Se determina los parámetros de los botones y sus características -->

.boton {

color: #FFFFFF;

background : #007700;

padding: 0.5em;

margin: 0em 0.625em;

font-size: 0.937em;

font-weight: bolder;

box-shadow: 10px 10px 5px #274219;

}
<!—Se indica que cambie de color cuando el mouse este sobre el botón-->

.boton:hover {

cursor: pointer;

background : #58FA82;

<!— Se comienza a usar media queries, indicando los estilos css que debe cargar al contenedor

dependiendo del ancho mínimo y máximos de los pixeles ->

@media screen and (min-width: 481px) and (max-width: 700px) {

body{

font-size: 14px;

div{

padding: 0.625em;

max-width: 560px;

h1 {

letter-spacing: 0.3em;

form {

padding: 0.625em;

margin-top: 2.5em;

textarea{

width: 85%;
}

.boton {

padding: 0.937em;

margin: 0em 1.25em;

@media screen and (min-width: 701px){

body{

font-size: 16px;

div{

padding: 1.25em;

max-width: 640px;

h1 {

letter-spacing: 0.3em;

form {

padding: 1.875em;

margin-top: 2.5em;

fieldset {

margin-bottom: 2.5em;

border-top-width: 0.187em;
}

legend {

padding: 1.25em;

textarea{

margin-bottom: 1.25em;

width: 80%;

padding: 1.25em;

height: 7em;

.boton {

padding: 1.25em;

margin: 0em 2.5em;

 Código php

<?php

// Para recibir datos desde formulario

$rut=trim($_POST['rut']);

$edad=trim($_POST['edad']);

$genero=$_POST['genero'];

$frecuencia=$_POST['frecuencia'];

$horario=$_POST['horario'];
$lineas=implode(",",$_POST['lineas']);

$qos=$_POST['qos'];

$obs=trim($_POST['obs']);

// Los parametros de conexion a base de datos

$dbhost = "localhost";

$dbuser = "metroform";

$dbpass = "123456";

$dbname = "db_form_metro";

$dbtable = "respuestas";

// Para conectar a base de datos

$link = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

if(!$link){

die( mysqli_errno() . ':' . mysqli_error() );

// Se preparan los query para insertar datos

$consulta = "INSERT INTO ".$dbtable." (rut,

edad,

genero,

frecuencia,

horario,

linea,

valor,

observacion

) ";
$consulta = $consulta . "VALUES ('$rut','$edad,'$genero','$frecuencia','$horario','$lineas',

'$qos','$obs');";

// Para insertar datos recibidos a la BD, validar su correcta ejecución, además sedetiene en caso

de algún error o falla, se incluye función if

$q = mysqli_query($link,$consulta);

if(!$q) {

mysqli_close($link);

die( mysqli_errno() . ' : ' . mysqli_error() );

}else{

// Para consultar los registros ingresados correctamente basados en el ultimo ingreso, se incluye

función if

$ultimo = mysqli_insert_id($link);

$consulta = "SELECT fecha, rut, edad, genero, frecuencia, horario, linea, valor, observacion

FROM ".$dbtable." WHERE id=".$ultimo.";";

$q = mysqli_query($link,$consulta);

if(!$q) {

mysqli_close($link);

die( mysqli_errno() . ' : ' . mysqli_error() );

if(mysqli_num_rows($q)){

while($row=mysqli_fetch_array($q,MYSQLI_ASSOC)){

$rut=$row['rut'];

$edad=$row['edad'];
$genero=$row['genero'];

$frecuencia=$row['frecuencia'];

$horario=$row['horario'];

$lineas=$row['linea'];

$qos=$row['valor'];

$obs=$row['observacion'];

// Se usan método if, switch y str_replace, para el formatear los datos de lectura

if ($genero== "F"){

$genero="Femenino";

}elseif($genero== "M"){

$genero="Masculino";

switch ($frecuencia) {

case '1':

$frecuencia="Nunca";

break;

case '2':

$frecuencia="Poca frecuencia";

break;

case '3':

$frecuencia="Regularmente";

break;

case '4':

$frecuencia="Todo el tiempo";
break;

switch ($horario) {

case '1':

$horario="Horario Punta";

break;

case '2':

$horario="Horario Medio";

break;

case '3':

$horario="Horario Valle";

break;

$lineas=str_replace("l"," Línea ",$lineas);

switch ($qos) {

case '1':

$qos="Malo";

break;

case '2':

$qos="Deficiente";

break;

case '3':

$qos="Regular";

break;
case '4':

$qos="Bueno";

break;

case '5':

$qos="Excelente";

break;

?>

 Código HTML para la respuesta del usuario

<html>

<head>

<title>Control6 - HTML II - Eduardo Espinoza</title>

<link href="public/css/estilos.css" rel="stylesheet" type="text/css">

</head>

<body>

<meta name='viewport' content='width=device-width'>

<div class="contenedor">

<p><h1 class="respuesta">Gracias por su participación</h1></p>

<p><h3 class="respuesta">Datos enviados correctamente:</h3></p>

<form class="" action="tarea4.html">

<div>

<p>

RUT: <?php echo $rut; ?><br>


Edad: <?php echo $edad. ' años'; ?><br>

Género: <?php echo $genero; ?><br>

</p>

<p>

Frecuencia de uso: <?php echo $frecuencia; ?><br>

Horario de uso regular: <?php echo $horario; ?><br>

Líneas que utiliza: <?php echo $lineas; ?><br>

Evaluación de calidad de servicio: <?php echo $qos; ?><br>

</p>

<p>

Observaciones adicionales: <?php echo $obs; ?>

</p>

</form>

</div>

<div class="botones">

<a href="tarea6.html">

<input class="boton" type="submit" value="Volver" title="Volver al formulario"/>

</a>

</div>

</body>

</html>

<?php

}
}

mysqli_close($link);

?>

 Código JavaScript

function validar(){

// Se asignan los valores de campos del formulario a variables JavaScript

var form=document.encuesta;

var rut = document.getElementById('rut');

var edad = document.getElementById('edad');

var masculino = document.getElementById('m');

var femenino = document.getElementById('f');

var frecuencia = document.getElementById('frecuencia');

var punta = document.getElementById('hp');

var medio = document.getElementById('hm');

var valle = document.getElementById('hv');

var lineas = document.getElementsByName('lineas[]');

var qos = document.getElementById('qos');

var obs = document.getElementById('obs');

//Se crean los patrones para realizar la comparación

var patronRut = /^(\d{2}\.?\d{3}\.?\d{3}-)([kK]{1}$|\d{1}$)/g;

// Se crean las validaciones de campos vacios, para ello se enviara un mensaje de alerta si algún

campo queda vacío, en el caso del rut, además de validación, este compara la expresión , para

ello se utilizarán distintos bucles.


if (rut.value==0){

alert("El campo Rut esta vacío");

form.rut.focus();

return false;

}else if(!rut.value.match(RegExp(patronRut))){

alert("RUT incorrecto");

form.rut.focus();

return false;

if (edad.value==0){

alert("El campo Edad esta vacío");

form.edad.focus();

return false;

if (masculino.checked==false && femenino.checked==false){

alert("No selecciono ningún Género");

form.m.focus();

return false;

if (frecuencia.value=="Seleccione..."){

alert("Seleccione una frecuencia de uso");

form.frecuencia.focus();

return false;

}
if (punta.checked==false && medio.checked==false && valle.checked==false){

alert("No selecciono ningún Horario de uso regular");

form.hp.focus();

return false;

//Aquí se valida selección de al menos una línea, el ciclo recorre el array obtenido, y verifica si al

menos una esta activada, si validación es false mostrara un mensaje de alerta y activa focus en

primer checkbox

var validado = false;

for (var i=0; i<lineas.length; i++){

if (lineas[i].checked) {

validado = true;

if (validado == false) {

alert('Seleccione al menos una línea');

form.l1.focus();

return false;

if (qos.value=="Seleccione..."){

alert("Evalué la calidad del servicio");

form.qos.focus();

return false;

}
// Para el envío de formulario

form.submit();

// Se crea una función para normalizar el ingreso de los datos

function normalizaRut(entrada){

var salida = '';

var permitidos = '1234567890-k.K';

for (var i=0; i<entrada.length; i++){

if (permitidos.indexOf(entrada.charAt(i)) != -1){

salida = salida + entrada.charAt(i);

return salida;

function normalizaEdad(entrada){

var salida = '';

var permitidos = '1234567890';

for (var i=0; i<entrada.length; i++){

if (permitidos.indexOf(entrada.charAt(i)) != -1 && entrada<=120){

salida = salida + entrada.charAt(i);

return salida;

}
function normalizaObs(entrada){

var salida = '';

var permitidos =

"abcdefghijklmnñopqrstvwxyzáéíóúÁÉÍÓÚABCDEFGHIJKLMNÑOPQRSTVWXYZ12345678

90.-_";

for (var i=0; i<entrada.length; i++){

if (permitidos.indexOf(entrada.charAt(i)) != -1){

salida = salida + entrada.charAt(i);

return salida;

 Código HTML

<!DOCTYPE html>

<!—Para realizar las validaciones con JavaScript, se eliminan los atributos "required" y "pattern"

-->

<html>

<head>

<!—Se define el charset a UTF-8 y el titulo -->

<meta http-equiv="Content-Type" content="text/html; charset="utf-8"/>

<title>Control7- HTML II - Eduardo Espinoza</title>

<link href="public/css/estilos.css" rel="stylesheet" type="text/css">


<script type="text/javascript" src="public/js/scripts.js"></script>

</head>

<body>

<noscript>

<p>

Para una mejor experiencia en el sitio, se recomienda habilitar el uso

de JavaScript en su navegador.

</p>

</noscript>

<meta name='viewport' content='width=device-width'>

<!-- se integra el div al modo contenedor -->

<div class="contenedor">

<!—Se define el encabezado y sus características incluyendo el método post-->

<header>

<h1><font color="#4673D3">Encuesta Realizada por Merana " Calidad de Servicio del Metro

de Santiago "</font></h1>

</header>

<form name="encuesta" action="form.php" method="post">

<p>

<!—Se crea campo para datos del usuario-->

<fieldset><legend>Datos del Usuario</legend>

<div class="unalinea">

<!—Se crea el campo rut con un ejemplo de cómo se debe ingresar -->

<label for="rut">Rut: </label>


<input autofocus type="text" id="rut" name="rut"

title="Formato para RUT: 12.345.678-9"

placeholder="12.345.678-9"

maxlength="12"

onkeyup="this.value=normalizaRut(this.value);"/>

</div>

<div class="unalinea">

<!—Se crea campo edad indicando un rango de edad mínima y máxima -->

<label for="edad">Edad: </label>

<input type="text" id="edad" name="edad"

title="Mínimo 10 años, máximo 120 años"

placeholder="25"

maxlength="3"

onkeyup="this.value=normalizaEdad(this.value);"/>

</div>

<div>

<!—Se crean los botones de género-->

Género:

<div class="unalinea">

<input type="radio" id="m" name="genero" value="M"/>

<label for="m">Masculino</label>

</div>

<div class="unalinea">

<input type="radio" id="f" name="genero" value="F"/>


<label for="f">Femenino</label>

</div>

</div>

</fieldset>

</p>

<p>

<!—Se crea el campo frecuencia-->

<div>

Frecuencia de uso:

<select id="frecuencia" name="frecuencia">

<option disabled selected>Seleccione...</option>

<option value="1">Nunca</option>

<option value="2">Poca frecuencia</option>

<option value="3">Regularmente</option>

<option value="4">Todo el tiempo</option>

</select>

</div>

<div>

<!—Se crean botones para el campo horario, con separación de div para la resolución-->

Horario de uso regular:<br>

<div class="unalinea">

<input type="radio" id="hp" name="horario" value="1"/>

<label for="hp">Horario Punta</label>

</div>
<div class="unalinea">

<input type="radio" id="hm" name="horario" value="2"/>

<label for="hm">Horario Medio</label>

</div>

<div class="unalinea">

<input type="radio" id="hv" name="horario" value="3"/>

<label for="hv">Horario Valle</label>

</div>

</div>

<div>

<!—Se crea campo líneas, con separación de div para la resolución-->

<label>Lineas que utiliza:<br></label>

<div class="unalinea">

<input type="checkbox" id="l1" value="l1" name="lineas[]">

<label for="l1">Linea 1</label>

</div>

<div class="unalinea">

<input type="checkbox" id="l2" value="l2" name="lineas[]">

<label for="l2">Linea 2</label>

</div>

<div class="unalinea">

<input type="checkbox" id="l4" value="l4" name="lineas[]">

<label for="l4">Linea 4</label>

</div>
<div class="unalinea">

<input type="checkbox" id="l4a" value="l4a" name="lineas[]">

<label for="l4a">Linea 4A</label><br>

</div>

<div class="unalinea">

<input type="checkbox" id="l5" value="l5" name="lineas[]">

<label for="l5">Linea 5</label>

</div>

<div class="unalinea">

<input type="checkbox" id="l6" value="l6" name="lineas[]">

<label for="l6">Linea 6</label>

</div>

<div class="unalinea">

<label for="l1v"></label>

</div>

</div>

<div>

<!—Se crea el menú "Calidad de servicio"-->

Calidad general de servicio:

<select id="qos" name="qos">

<option disabled selected>Seleccione...</option>

<option value="1">Malo</option>

<option value="2">Deficiente</option>

<option value="3">Regular</option>
<option value="4">Bueno</option>

<option value="5">Excelente</option>

</select>

</div>

</fieldset>

</p>

<!—Se crea el campo observaciones con un límite de 200 caracteres-->

<div class="textarea">

<fieldset><legend>Observaciones</legend>

<textarea id="obs" name="obs"

cols="16" rows="" maxlength="200" pattern="[A-Za-z0-9]{0,200}" value="" title="(Opcional)

Máximo 200 caracteres" onkeyup="this.value=normalizaObs(this.value);" >

</textarea>

</fieldset>

</div>

<!—Se crean lo botones para el envío de formulario-->

<div class="botones">

<input type="reset" class="boton" value="Limpiar" title="Alt + L para limpiar" accesskey="L"/>

<input type="button" class="boton" value="Enviar" title="Alt + K para enviar" id="enviaForm"

accesskey="K" onclick="validar();"/>

</div>

</form>

</div>

</body>
</html>

Imagen Formulario en navegador


Bibliografía

IACC (2016). JavaScript II. Programación HTML II. Semana 7.

Recuperado de: https://rolandocaldas.com/html5/como-incluir-javascript-en-html5 (2018)

You might also like