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.

Matando al Dragón

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... 5ta parte

Continuando con esta serie de posts he aquí más ejemplos de código en Javascript.

35. Recuperar el title de una página:

alert(document.title)

36.Cargar contenido:

<div id="contenedor"></div>
    <script>
      const contenedor = document.querySelector("#contenedor")
      var Robot = {
        nombre: "El Robotron",
        init: function(){
          contenedor.innerHTML = Robot.nombre
        }
      };
      window.addEventListener("load",Robot.init);
    </script>

37. Obtener texto de un atributo:

<span data-offset-key="4lpif-0-0"></span>
<script>
  let elSpan = document.querySelector("[data-offset-key = '4lpif-0-0']");
  elSpan.innerHTML = "<h3>Hola, amigos</h3><p>Esto lo puse yo.</p>";
</script>

38. Funciones (usando jQuery). Pasar parámetros.

var contenedor = $("#contenedor");

//función
function miFuncion(){
    contenedor.html("<marquee behavior='alternate'>Hola, mundo</marquee>");
}
 
//pasar parámetros
function miOtraFuncion(event){
  contenedor.html(event.data.nombre+" "+event.data.apellido);
}

//button
$("#Btn").on( "click", miFuncion);

//button para pasar parámetros
$("#BtnPasar").click({nombre: "Juan", apellido: "Perez"}, miOtraFuncion);

Código HTML:

<div id="contenedor"></div>
<button id="Btn">Ejecuta algo</button>
<button id="BtnPasar">Pasar parámetros</button>

En posteriores publicaciones habrá más código.