JavaScript avanzado

Eduardo Andrés Flores Sepúlveda

Programación HTML II

Instituto IACC

21 de Diciembre de 2019
 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ÑOPQRSTVWXYZ123
4567890.-_";

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>
 Bibliografía

- IACC 2019. Programación HTML II. JavaScript II. Contenidos de la Semana 7.