100 días de código Javascript... 7ma parte

Ejemplo. Validar datos con Javascript.
main.js

document.addEventListener("DOMContentLoaded", function(event) {
    
    console.log('Se ha ejecutado código JS');
    const btnActivar = document.getElementById("btnActivar");

    function activarEnvio(){
         alert("Enviando los datos...");
    }


    var tabla1Fila1 = false;
    var tabla1Fila2 = false;
    var tabla1Fila3 = false;

    var tabla2Fila1 = false;
    var tabla2Fila2 = false;
    var tabla2Fila3 = false;
   

    function validarFormulario(){
    var nomProd1 = "";
    var monto1 = "";
    var numContrato1 = "";
    
    if(nomProd1!=""){
      if(nomProd1!=""&&monto1!=""&&numContrato1!=""){
         document.getElementById("infoError1").style.display="none";tabla1Fila1=true;
      }else{
        document.getElementById("prrfError1").style.color="red";
        document.getElementById("prrfError1").innerText="Error: Debe completar todos los datos de la tabla 1 fila 1.";
        document.getElementById("infoError1").style.display="block";
      }
    }else{
        if(monto1!=""&&numContrato1!=""){
           document.getElementById("prrfError1").style.color="red";
           document.getElementById("prrfError1").innerText="Error: Debe completar todos los datos de la tabla 1 fila 1.";
           document.getElementById("infoError1").style.display="block";
        }else{
           document.getElementById("infoError1").style.display="none";tabla1Fila1=true;
        }
    }

    var nomProd2 = "";
    var monto2 = "";
    var numContrato2 = "";

    if(nomProd2!=""){
      if(nomProd2!=""&&monto2!=""&&numContrato2!=""){
         document.getElementById("infoError2").style.display="none";tabla1Fila2=true;
      }else{
        document.getElementById("prrfError2").style.color="red";
        document.getElementById("prrfError2").innerText="Error: Debe completar todos los datos de la tabla 1 fila 2.";
        document.getElementById("infoError2").style.display="block";
      }
    }else{
        if(monto2!=""&&numContrato2!=""){
           document.getElementById("prrfError2").style.color="red";
           document.getElementById("prrfError2").innerText="Error: Debe completar todos los datos de la tabla1 fila 2.";
           document.getElementById("infoError2").style.display="block";
        }else{
           document.getElementById("infoError2").style.display="none";tabla1Fila2=true;
        }
    }

    var nomProd3 = "";
    var monto3 = "";
    var numContrato3 = "";

    if(nomProd3!=""){
      if(nomProd3!=""&&monto3!=""&&numContrato3!=""){
         document.getElementById("infoError3").style.display="none";tabla1Fila3=true;
      }else{
        document.getElementById("prrfError3").style.color="red";
        document.getElementById("prrfError3").innerText="Error: Debe completar todos los datos de la tabla 1 fila 3.";
        document.getElementById("infoError3").style.display="block";
      }
    }else{
        if(monto3!=""&&numContrato3!=""){
           document.getElementById("prrfError3").style.color="red";
           document.getElementById("prrfError3").innerText="Error: Debe completar todos los datos de la tabla 1  fila 3.";
           document.getElementById("infoError3").style.display="block";
        }else{
           document.getElementById("infoError3").style.display="none";tabla1Fila3=true;
        }
    }



   var tv1 = "9";
   var nb1 = "4";
   var nt1 = "7";
   var cp1 = "12";
   var s1 = "1234";
   var pt1 = "1200";

   if(tv1!=""){
      if(tv1!=""&&nb1!=""&&nt1!=""&&cp1!=""&&s1!=""&&pt1!=""){
         document.getElementById("infoError4").style.display="none";tabla2Fila1=true;
      }else{
        document.getElementById("prrfError4").style.color="red";
        document.getElementById("prrfError4").innerText="Error: Debe completar todos los datos de la tabla 2  fila 1.";
        document.getElementById("infoError4").style.display="block";
      }
    }else{
        if(nb1!=""&&nt1!=""&&cp1!=""&&s1!=""&&pt1!=""){
           document.getElementById("prrfError4").style.color="red";
           document.getElementById("prrfError4").innerText="Error: Debe completar todos los datos de la tabla 2 fila 1.";
           document.getElementById("infoError4").style.display="block";
        }else{
           document.getElementById("infoError4").style.display="none";tabla2Fila1=true;
        }
    }


   var tv2 = "B";
   var nb2 = "y";
   var nt2 = "6";
   var cp2 = "99";
   var s2 = "1204";
   var pt2 = "1900";

    if(tv2!=""){
      if(tv2!=""&&nb2!=""&&nt2!=""&&cp2!=""&&s2!=""&&pt2!=""){
         document.getElementById("infoError5").style.display="none";tabla2Fila2=true;
      }else{
        document.getElementById("prrfError5").style.color="red";
        document.getElementById("prrfError5").innerText="Error: Debe completar todos los datos de la tabla 2 fila 2.";
        document.getElementById("infoError5").style.display="block";
      }
    }else{
        if(nb2!=""&&nt2!=""&&cp2!=""&&s2!=""&&pt2!=""){
           document.getElementById("prrfError5").style.color="red";
           document.getElementById("prrfError5").innerText="Error: Debe completar todos los datos de la tabla 2 fila 2.";
           document.getElementById("infoError5").style.display="block";
        }else{
           document.getElementById("infoError5").style.display="none";tabla2Fila2=true;
        }
    }



   var tv3 = "G";
   var nb3 = "8";
   var nt3 = "87";
   var cp3 = "4";
   var s3 = "8";
   var pt3 = "88";


    if(tv3!=""){
      if(tv3!=""&&nb3!=""&&nt3!=""&&cp3!=""&&s3!=""&&pt3!=""){
         document.getElementById("infoError6").style.display="none";tabla2Fila3=true;
      }else{
        document.getElementById("prrfError6").style.color="red";
        document.getElementById("prrfError6").innerText="Error: Debe completar todos los datos de la tabla 2 fila 3.";
        document.getElementById("infoError6").style.display="block";
      }
    }else{
        if(nb3!=""&&nt3!=""&&cp3!=""&&s3!=""&&pt3!=""){
           document.getElementById("prrfError6").style.color="red";
           document.getElementById("prrfError6").innerText="Error: Debe completar todos los datos de la tabla 2 fila 3.";
           document.getElementById("infoError6").style.display="block";
        }else{
           document.getElementById("infoError6").style.display="none";tabla2Fila3=true;
        }
    }
   }



    btnActivar.addEventListener("click", ()=>{
        console.log("Verificar datos");
        validarFormulario();
        if(tabla1Fila1 && tabla1Fila2 && tabla1Fila3 && tabla2Fila1 && tabla2Fila2 && tabla2Fila3){
           document.getElementById("infoFinal").style.display="block";
           document.getElementById("prrfFinal").innerText="Ya no hay errores, listo para enviar datos.";
           document.getElementById("prrfFinal").style.color="blue";
           activarEnvio();
        }else{
           document.getElementById("infoFinal").style.display="block";
           document.getElementById("prrfFinal").innerText="Hay errores, corrigalos por favor";
           document.getElementById("prrfFinal").style.color="red";
        }

    });



});

index.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
  <title>Ejemplos en JS</title>
</head>
<script type="text/javascript" src="main.js">
</script>

<style type="text/css">
#infoError1{
  display: none;
}
#prrfError1{
  text-align: center;
}

#infoError2{
  display: none;
}
#prrfError2{
  text-align: center;
}

#infoError3{
  display: none;
}
#prrfError3{
  text-align: center;
}

#infoError4{
  display: none;
}
#prrfError4{
  text-align: center;
}

#infoError5{
  display: none;
}
#prrfError5{
  text-align: center;
}

#infoError6{
  display: none;
}
#prrfError6{
  text-align: center;
}


#infoFinal{
  display: none;
}
#prrfFinal{
  text-align: center;
}




</style>
<body>
  <h1>Programando en JS</h1>
  
  <div id="infoError1">
    <p id="prrfError1"></p>
  </div><br/>
  <div id="infoError2">
    <p id="prrfError2"></p>
  </div><br/>
  <div id="infoError3">
    <p id="prrfError3"></p>
  </div><br/>
  <div id="infoError4">
    <p id="prrfError4"></p>
  </div><br/>
  <div id="infoError5">
    <p id="prrfError5"></p>
  </div><br/>
  <div id="infoError6">
    <p id="prrfError6"></p>
  </div>
   <br/>
   <div id="infoFinal">
    <p id="prrfFinal"></p>
  </div>

  <div id="btnDiv">
  <button id="btnActivar">Verfificar</button>
  </div>
</body>
<html>

Validar RFC:

 <script>
            function rfcValido(rfc, aceptarGenerico = true) {
    const re = /^([A-ZÑ&]{3,4}) ?(?:- ?)?(\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])) ?(?:- ?)?([A-Z\d]{2})([A\d])$/;
    var validado = rfc.match(re);

    if (!validado)  // Coincide con el formato general del regex?
        return false;

    // Separar el dígito verificador del resto del RFC
    const digitoVerificador = validado.pop(),
        rfcSinDigito = validado.slice(1).join(''),
        len = rfcSinDigito.length,

        // Obtener el digito esperado
        diccionario = "0123456789ABCDEFGHIJKLMN&OPQRSTUVWXYZ Ñ",
        indice = len + 1;
    var suma,
        digitoEsperado;

    if (len == 12) suma = 0
    else suma = 481; // Ajuste para persona moral

    for (var i = 0; i < len; i++)
        suma += diccionario.indexOf(rfcSinDigito.charAt(i)) * (indice - i);
    digitoEsperado = 11 - suma % 11;
    if (digitoEsperado == 11) digitoEsperado = 0;
    else if (digitoEsperado == 10) digitoEsperado = "A";

    // El dígito verificador coincide con el esperado?
    // o es un RFC Genérico (ventas a público general)?
    if ((digitoVerificador != digitoEsperado)
        && (!aceptarGenerico || rfcSinDigito + digitoVerificador != "XAXX010101000"))
        return false;
    else if (!aceptarGenerico && rfcSinDigito + digitoVerificador == "XEXX010101000")
        return false;
    return rfcSinDigito + digitoVerificador;
}


        </script>

Validar RFC

function rfcValido(rfc) {
    var re = /^([ A-ZÑ&]?[A-ZÑ&]{3}) ?(?:- ?)?(\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])) ?(?:- ?)?([A-Z\d]{2})([A\d])$/,
        validado = rfc.match(re);
	
    if (!validado)  //Coincide con el formato general?
    	return false;
    
    //Separar el dígito verificador del resto del RFC
    var digitoVerificador = validado.pop(),
        rfcSinDigito = validado.slice(1).join('')
        
    //Obtener el digito esperado
    var diccionario  = "0123456789ABCDEFGHIJKLMN&OPQRSTUVWXYZ Ñ",
        lngSuma      = 0.0,
        digitoEsperado;

    if (rfcSinDigito.length == 11) rfc = " " + rfc; //Ajustar a 12
    for(var i=0; i<13; i++)
        lngSuma = lngSuma + diccionario.indexOf(rfcSinDigito.charAt(i)) * (13 - i);
    digitoEsperado = 11 - lngSuma % 11;
    if (digitoEsperado == 11) digitoEsperado = 0;
    if (digitoEsperado == 10) digitoEsperado = "A";
  
	//El dígito verificador coincide con el esperado?
    return digitoVerificador == digitoEsperado;
}

Continuaremos con más post sobre Javascript.

100 días de código en Javascript... 6ta parte

Continuando con esta serie de post sobre Javascript.

39. Mandar o no mandar parámetros.

function suma(x, y=1){
  return x+y;
}

document.write(suma(4));//5
document.write(suma(4,3));//7
document.write(suma(2));//3

La función suma recibe dos parámetros (x,y), por default y tendrá el valor de 1, así que
si omitimos un valor la función funcionará sin problema alguno.

Otro ejemplo. Cambiamos el color de un div mandando uno o dos parámetros.

function cambiaColor(elemento, color='red'){
  var contenedor = document.getElementById(elemento);
contenedor.style.backgroundColor = color;
}

cambiaColor('panel');
cambiaColor('panel','blue');

<div id="panel">
  <p>Hola, mundo.</p>
</div>

40.  let y const

var variableGlobal = 232;

const ConstantePI =3.141519;

function nada(){
   let variableLocal = variableGlobal;
   let variableLocalPI = ConstantePI;
}

Con el nuevo estandar de Javascript es importante entender que la palabra let nos permite definir una variable 'local', una que este definida en un bloque en particular. El ámbito es lo que lo caracteriza:

function decidir(dato){
  if( dato == 'si'){
    let numero = 33;
  }

  console.log(numero);//Esto dará un error

}

Y const para variables cuyo valor es inmutable (que no puede cambiar).

const boton = document.querySelector('.miBoton');

const label = document.getElementById('etiqueta');

/*Esto ya no es permitido: ya los hemos definido como una constante*/

label = "Hola";
boton = new Date();

Crear funciones con let es muy sencillo:

/*Variables*/
const contenido1 = document.getElementById('contenido1');
const btn1 = document.getElementById('btn1');


/*Funciones*/
let inicio = ()=> console.log('%c Hola, amigos','background-color:black;color:orange;');

let saludar = (nombre)=> window.alert(`Hola ${nombre} eres bienvenido`);

let miNombre = () => prompt('Tu nombre:');



/*Listeners*/
btn1.addEventListener('click',()=>{
 saludar(miNombre())
});


window.addEventListener('load',inicio());

41.Keypress y KeyUp. Escribir un texto y que se muestre en mayúsculas.

<input type="text" id="txt1" value="" placeholder="Coloca tu nombre" />

Los eventos 'keypress' y 'keyup' nos ayudan a captar las teclas presionadas.

const texto = document.querySelector('#txt1');


txt1.addEventListener('keypress',()=>{
txt1.value = txt1.value.toString().toUpperCase();
});

txt1.addEventListener('keyup',()=>{
txt1.value = txt1.value.toString().toUpperCase();
});

Más contenido en el próximo post.

100 días de código en Javascript... 4ta parte

31. Si quieres saber qué día es hoy podemos usar Date.  En este caso extendemos la clase Date y creamos un método getDia() para mostrarlo.

class Fecha extends Date{
  getDia(){
    var dia =this.getDay();
    var result = "";
    switch(dia){
      case 7: result = "Domingo";break;
      case 6: result = "Sabado";break;
      case 5: result = "Viernes";break;
      case 4: result = "Jueves";break;
      case 3: result = "Miercoles";break;
      case 2: result = "Martes";break;
      case 1: result = "Lunes";break;
      default: result = "NO ESPECIFICADO";break;
    }
    return result;
  }

}

let fecha = new Fecha();
console.log("Hoy es ",fecha.getDia());

32. Crear objetos. En el ejemplo vemos que podemos ir agregando nuevos atributos (mes).

var objFecha = {
  "dia":"Viernes",
  "año":"1950",
  "hora":"09:00PM"
}

objFecha.mes ="Enero";
console.log(objFecha);

33. Más ejemplos de herencia en JS:

/*Clase base de todo animal*/
class Animal{}

//Clase base de animales acuáticos
class AnimalAcuatico extends Animal{}

//Clase base de animales terrestres
class AnimalTerrestre extends Animal{}


//Sublcase de clase AnimalAcuatico
class Delfin extends AnimalAcuatico{}


//Subclase de clase AnimalTerrestre
class Rinoceronte extends AnimalTerrestre{}

34.Extender atributos de una clase definida:

/*Cre la clase Computadora con tres atributos iniciales*/

var Computadora = function(sistema_operativo, modelo, marca){
     this.sistema_operativo=sistema_operativo;
     this.modelo=modelo;
     this.marca=marca;
};


//Agregando/extendiendo atributos

Computadora.prototype.dns='';

Computadora.prototype.ip='';

Computadora.prototype.red='';

//Agregando/extendiendo métodos

Computadora.prototype.verComputadora=function(computadora){

var objetoC= 'Computadora 
Modelo: '+computadora.modelo
+"
Marca: "+computadora.marca+"
Sistema operativo: "+computadora.sistema_operativo
+"
IP:" +computadora.ip+"
DNS: "+computadora.dns
+"
RED: "+computadora.red;

document.getElementById('comp').innerHTML= objetoC;

}

¿Cómo creo una instancia?

function crearComputadora(){
//Creo una instancia
var computadora = new Computadora('Linux','HP vPro','HP');

computadora.ip='148.216.33.21';

computadora.dns='148.216.60.1';

computadora.red='Infinitum';

return computadora;

}

Obtengo el objeto:

var obtenerComputadora = function(){
   var comp= crearComputadora();
   comp.verComputadora(comp);
};

Un evento:

/*<button id='btn'>Obtener</button>*/

document.getElementById('btn').addEventListener('click', obtenerComputadora);

Más en el próximo post.

Links:
http://codemonkeyjunior.blogspot.com/2019/04/100-dias-de-codigo-en-javascript-3ra.html

100 días de código en Javascript... 3ra parte

26.Si quieres reemplazar una clase (mouseenter, cuando entra; mouseleave, cuando sale):

/*
<h1 class="titulo_curso">Hola</h1>

*/


const h1_titulo = document.querySelector(".titulo_curso");

h1_titulo.addEventListener("mouseenter", function(){
 this.classList.replace('titulo_curso','importante');
});

h1_titulo.addEventListener("mouseleave", function(){
 this.classList.replace('importante','titulo_curso');
});

27. Si quieres recorrer un arreglo:

var correos = ["hugo.lopez@latinmail.com","eusebio.lopez@hotmail.com","maria.gonzalo@gmail.com","hugo.lopez@hotmail.com"];

//Ciclo for each
correos.forEach(function(element){
  console.log(element);
});

28. Si quieres crear una clase, existen varias formas de hacerlo:
Primera forma.

class Modelo{
 constructor(marca, precio,disponibilidad){
  this.marca=marca;
  this.precio=precio;
  this.disponibilidad=disponibilidad;
 }

 display(){
  var disponible = this.disponibilidad? "Disponible" : "No disponible";
  return "Modelo("+this.marca+","+this.precio+","+disponible+")"
 }
}

Donde:
Variables de instancia: marca, precio y disponibilidad.
Método: display(), que nos sirve para mostrar los datos.

El nuevo estándar de Javascript nos permite crear una clase muy al estilo de lenguajes como Java.

Segunda forma:

function Modelo (marca, precio,disponibilidad){
  this.marca=marca;
  this.precio=precio;
  this.disponibilidad=disponibilidad;
 }

Modelo.prototype.display = function(){
  var disponible = this.disponibilidad? "Disponible" : "No disponible";
  return "Modelo("+this.marca+","+this.precio+","+disponible+")"
 }

En este caso usamos prototype para definir un nuevo método a la clase Modelo.

Tercera forma:

function Modelo (marca, precio,disponibilidad){
this.marca=marca;
this.precio=precio;
this.disponibilidad=disponibilidad;
//Método
this.display=display;
}

function display(){
  var disponible = this.disponibilidad? "Disponible" : "No disponible";
  return "Modelo("+this.marca+","+this.precio+","+disponible+")";
 }

Cuarta forma:

var Modelo = {
   marca: "DELL Inspiron 1500",
   precio: 27000.00,
   disponibilidad: true,
   display:function(){
      var disponible = this.disponibilidad? "Disponible" : "No disponible";
  return "Modelo("+this.marca+","+this.precio+","+disponible+")";
   }
};

29. Si quieres crear una imagen y colocarla en un div:

//Creamos un div con id 'contenedor'
const contenedor = document.getElementById("contenedor");

//Imagen
var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
img.height=200;
img.width=200;

//Agregamos imagen a 'contenedor'
contenedor.appendChild(img);

30. Cargar un archivo TXT con el clásico AJAX:

console.log("%c Javascript activo!!","background-color:#AC0;color:#F2F2F2;");

function cargaDocumentoTxt() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("contenidoTxt").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "js/datos.txt", true);
  xhttp.send();
}

Continuaremos...

Links:
http://codemonkeyjunior.blogspot.com/2019/04/100-dias-de-codigo-en-javascript-2da.html
http://codemonkeyjunior.blogspot.com/2019/04/100-dias-de-codigo-en-javascript-1era.html
https://codemonkeyjunior.wordpress.com/2017/09/22/javascript-uso-de-prototype/
http://lineadecodigo.com/javascript/programacion-orientada-a-objetos-con-javascript-un-sencillo-ejemplo/