JavaScriptavanzado.

Walter Fernando Reyes Peña

PROGRAMACIÓN HTML II

Instituto IACC

23-10-2019
 INTRODUCCIÓN

OBJETIVOS DEL CONTROL:

Aplicar estructuras de control y bucles en JavaScript, para ofrecer interactividad a

las páginas web.

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 semanas ha estado
trabajando en el desarrollo de 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 además se realizó
el diseño preliminar de las validaciones requeridas para los datos suministrados
por el usuario. Esta semana se deberá completar la implementación del código de
validación, para lo cual se deberá hacer uso de las estructuras de control y los
bucles.
El documento resultante que deberá generar como entrega de la actividad de la
semana 7contendrá el código JavaScript, con las estructuras de validación de la
información, además de un documento con las consideraciones tomadas para el
diseño.
 DESARROLLO

Códigos se adjuntan:

Se adjunta conforme a lo requerido

Archivo “misestilos.css”.
// JavaScript Document
// Control Nro 7 Programacion HTML2
// Walter Reyes Peña.

//Variables Globales

var verificaEdad;
var verificaGenero;

//Validando datos ingresados o seleccionados.!!

function actualizacion_rut() {
var NRO_RUT=document.getElementById("_rut").value;
if (NRO_RUT.length <= 10){
alert ("El R.U.T. ingresado no corresponde.!!");
document.getElementById("_rut").focus();
} else {
console.log("EL RUT ingresado es : ", NRO_RUT);
valida_rut();
}
}

function valida_rut(){
// Proxima rutina de Validación de RUT mediante POO.
}

function actualizacion_edad(){
var EDAD_E=document.getElementById("_edad").value;
console.log("La edad es : ", EDAD_E);
if ((EDAD_E < 10) || (EDAD_E > 120)){
alert ("La edad NO corresponde al rango requerido, debe ser
entre 10 y 120 años.!!");
document.getElementById("enviar_ok").checked;
document.getElementById("_edad").focus();
 }
}

//Valida el Género seleccionado.

function actualizacion_generoh(){
verificaGenero = document.getElementById("genero_h").value;
console.log("EL género es : ", verificaGenero);
}

function actualizacion_generom(){
verificaGenero = document.getElementById("genero_m").value;
console.log("EL género es : ", verificaGenero);
}

//Valida la Frecuencia con la que usa el servicio seleccionado.

function actualizacion_FUS_n(){
var Frecuencia_Uso=document.getElementById("FUS_n").value;
console.log("La frecuencia de uso es : ", Frecuencia_Uso);
}
function actualizacion_FUS_p(){
var Frecuencia_Uso=document.getElementById("FUS_p").value;
console.log("La frecuencia de uso es : ", Frecuencia_Uso);
}
function actualizacion_FUS_r(){
var Frecuencia_Uso=document.getElementById("FUS_r").value;
console.log("La frecuencia de uso es : ", Frecuencia_Uso);
}
function actualizacion_FUS_t(){
var Frecuencia_Uso=document.getElementById("FUS_t").value;
console.log("La frecuencia de uso es : ", Frecuencia_Uso)
}

//Valida el Horario en el que usa el servicio regularmente

seleccionado.
function actualizacion_Hu_n(){
var Horario_Uso=document.getElementById("Hu_n").value;
console.log("El horario de uso es : ", Horario_Uso);
}
function actualizacion_Hu_m(){
var Horario_Uso=document.getElementById("Hu_m").value;
console.log("El horario de uso es : ", Horario_Uso);
}
function actualizacion_Hu_v(){
 var Horario_Uso=document.getElementById("Hu_v").value;
console.log("El horario de uso es : ", Horario_Uso);
}

// Valida los ítems seleccionados de Lineas de Metro que normalmente

utiliza.
function actualizacion_linea_1(){
var LINEA_1 = document.getElementById("linea_1").checked;
console.log("Usa línea 1 : ", LINEA_1);
}

function actualizacion_linea_2(){
var LINEA_2 = document.getElementById("linea_2").checked;
console.log("Usa línea 2 : ", LINEA_2);
}

function actualizacion_linea_4(){
var LINEA_4 = document.getElementById("linea_4").checked;
console.log("Usa línea 4 : ", LINEA_4);
}

function actualizacion_linea_4a(){
var LINEA_4a = document.getElementById("linea_4a").checked;
console.log("Usa línea 4a :", LINEA_4a);
}

function actualizacion_linea_5(){
var LINEA_5 = document.getElementById("linea_5").checked;
console.log("Usa línea 5 : ", LINEA_5);
}

//Valida la Calidad general del servicio.

function actualizacion_CGS_m(){
var Calidad_Servicio=document.getElementById("CGS_m").value;
console.log("La calidad de servicio es : ", Calidad_Servicio);
}

function actualizacion_CGS_d(){
var Calidad_Servicio=document.getElementById("CGS_d").value;
console.log("La calidad de servicio es : ", Calidad_Servicio);
}

function actualizacion_CGS_r(){
var Calidad_Servicio=document.getElementById("CGS_r").value;
 console.log("La calidad de servicio es : ", Calidad_Servicio);
}

function actualizacion_CGS_b(){
var Calidad_Servicio=document.getElementById("CGS_b").value;
console.log("La calidad de servicio es : ", Calidad_Servicio);
}

function actualizacion_CGS_e(){
var Calidad_Servicio=document.getElementById("CGS_e").value;
console.log("La calidad de servicio es : ", Calidad_Servicio);
}

// Valida Observaciones Personales.

function perdida_foco_glosa(){
var Glosa=document.getElementById("observaciones").value;
alert ("Las observaciones ingresadas son : " + Glosa);
}

// Opción para poterior para la verificación del formulario.

function CargaPag(){
//Este ítem se ussrá para bloqueo de boton enviar al iniciar.
document.getElementById("_enviar").disabled = true;
}

function aviso(){

if ((verificaGenero!="Hombre") || (verificaGenero!="Mujer")){
alert ("El género es : " + verificaGenero);;
}

//Código que habilita el botón luego de verificar datos ingresados.

//document.getElementById("_enviar").disabled = true;
}

Figura 0, código CSS de la aplicación desarrollada.

 REFERENCIAS BIBLIOGRÁFICAS

 MANUAL DE CONTENIDO_HTML_II IACC SEMANA 6.-

 El gran libro de HTML5, CSS3 y JavaScript Libro de Juan Diego Gauchat.