JS ejemplos con boton

EJEMPLOS CON BOTONES

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">      
  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" >  
</head>
  <body style="color:white;background-color:black">
  <!-- ******************************************************************** -->
  <!-- SECCION DEL CUERPO HTML -->
  <center>
    <h2>Ejemplos  con botones</h2>
  </center>
  
  <table width="100%">
    <tr>
      <td>
        <button id="miBoton_1">Haz clic aquí</button>
      </td>
      <td>
        <small>
        <p>Solo presenta un ALERT</p>
        </small>
      </td>
    </tr>
    <tr><td colspan="2"><hr></td></tr>

    <tr>
      <td>
        <input id="miInput_1"
              type="text"  placeholder="Ingrese informacion">
        <br>
        <button id="miBoton_2">Haz clic aquí</button>
      </td>
      <td>
        <small>
        <p>Recupera la informacion de un INPUT</p>
        </small>
      </td>      
    </tr>
    <tr><td colspan="2"><hr></td></tr>

    <tr>
      <td>
        <button id="miBoton_3">Haz clic aquí</button>
        <div id="div_hora_fecha"></div>
      </td>
      <td>
        <small>
        <p>Cambia el texto dentro un DIV</p>
        </small>
      </td>
    </tr>
    <tr><td colspan="2"><hr></td></tr>

    <tr>
      <td>
        <button id="miBoton_4">Pasa sobre el boton</button>        
        <div id="div_sobre_boton_4"> </div>
      </td>
      <td>
        <small>
        <p>Detecta que pasa el mouse sobre el BUTTON</p>
        </small>
      </td>
    </tr>
    <tr><td colspan="2"><hr></td></tr>
    

  </table>

  <script>
    //********************************************************************
    //SECCION PARA VARIABLES Y CONSTANTES EXTERNAS / GLOBALES
    

    //********************************************************************
    //SECCION PARA INICIAR JAVASCRIPT CUANDO 
    //LA PAGINA ESTE COMPLETAMENTE CARGADA 
    document.addEventListener('DOMContentLoaded', () => 
    { console.log("Pagina cargada y lista");
      // Funcion que agrupara todos los eventos
      escucharElementos();  
      // Otras funciones que se invocaran cuando
      //este lista la pagina.
    });
    //********************************************************************
    //SECCION PARA AÑADIR TODOS LOS INTERCEPTORES
    //DE EVENTOS 
    function  escucharElementos()
    {
      document.getElementById('miBoton_1').addEventListener('click', (evento) => 
      { console.log("document.getElementById('miBoton_1') 'click' ");
          fn_miBoton_1();          
      });

      document.getElementById('miBoton_2').addEventListener('click', (evento) => 
      { console.log("document.getElementById('miBoton_2') 'click' ");
          fn_miBoton_2();          
      });

      document.getElementById('miBoton_3').addEventListener('click', (evento) => 
      { console.log("document.getElementById('miBoton_3') 'click' ");
          fn_miBoton_3();          
      });

      document.getElementById('miBoton_4').addEventListener('mouseover', (evento) => 
      { console.log("document.getElementById('miBoton_4') 'mouseover' ");
          fn_miBoton_4_over();          
      });

      document.getElementById('miBoton_4').addEventListener('mouseout', (evento) => 
      { console.log("document.getElementById('miBoton_4') 'mouseout' ");
          fn_miBoton_4_out();          
      });




      //Otros objeto del DOM y su respectivos eventos
      //...
    }  



    //********************************************************************
    //SECCION DE FUNCIONES QUE SE USARAN POR LA PAGINA
    //********************************************************************
    function fn_miBoton_1()
    {
      alert("Se presiono el miBoton_1");
    }
    //********************************************************************
    function fn_miBoton_2()
    {
      let info_miInput_1 = document.getElementById("miInput_1").value;
      info_miInput_1 = info_miInput_1.trim(); // Elimina los espacios en blanco
      let longitud_info_miInput_1 = info_miInput_1.length; // Determina la longitud del campo.
      if (longitud_info_miInput_1==0)  // Verifica el campo tenga texto
      { alert("No ingresaste nada"); }
      else
      {  alert ("Ingresaste ["+info_miInput_1+"] con longitud ["+longitud_info_miInput_1+"]" )  }
    }     
    //********************************************************************
    function fn_miBoton_3()
    {
      miFechaActual =new Date();
  
      //extraemos el día mes y año 
      let dia = miFechaActual.getDate(); 
      let mes = (parseInt(miFechaActual.getMonth()) + 1 );
      let año = miFechaActual.getFullYear();      

      // Extraer hora, minutos y segundos
      let hora = miFechaActual.getHours();
      let minutos = miFechaActual.getMinutes();
      let segundos = miFechaActual.getSeconds();

      // Formatear fecha y hora
      let msg_fecha ="" +dia + "/" + mes + "/" + año + " "+hora+":"+minutos+":"+segundos ;  
      
      // Mostrar fecha y hora en el elemento
      document.getElementById("div_hora_fecha").innerHTML =msg_fecha;     

    }
    //********************************************************************
    function fn_miBoton_4_over()
    {
      document.getElementById("div_sobre_boton_4").innerHTML ="Sobre el boton";     
    }
    //********************************************************************
    function fn_miBoton_4_out()
    {
      document.getElementById("div_sobre_boton_4").innerHTML =" ";     
    }



    //********************************************************************
    //FIN DEL SCRIPT
  </script>
  </body>
</html>
JS Y EJEMPLOS BUTTON
