CONSIDERACIONES IMPORTANTES

De manera incremental se ha aumentado la complejidad de este curso respecto a la pagina web :

• Estatica [No se modifica nada]
• Realiza operaciones sin la interaccion del usuario.
• Solicitud de información al usuario
• Envio de informacion al usuario.
• Dinamica basica [Solicita informacion y modifica la pagina en respuesta]
• Dinamica completa
• Cargar la pagina completa
• Recuperar informacion previa
• Interactuar continuamente con el usuario
• Modificar la pagina continuamente basado en las acciones del usuario
• Almacenar la informacion actual

Este incremento de complejidad requiere que se añadan nuevas secciones al script con la finalidad de hacerlo facil de enterder y modificar.

VARIABLES GLOBALES

<script>
//********************************************************************
//SECCION PARA VARIABLES Y CONSTANTES EXTERNAS / GLOBALES
const claveLocalStorage = 'prueba003';
  

EXPLICACIÓN : Al inicio del script se agregaran la definición de las variables externas/globales. Esto permitira ubicarlas e identificarlas.

PAGINA CARGADA

//********************************************************************
//SECCION PARA INICIAR JAVASCRIPT CUANDO 
//LA PAGINA ESTE COMPLETAMENTE CARGADA 
document.addEventListener('DOMContentLoaded', () => 
{ console.log("Pagina cargada y lista");
  // Funciones que se invocan cuando la pagina esta cargada 
});

EXPLICACIÓN :

El método document.addEventListener('DOMContentLoaded') s un método que permite agregar un evento escuchador al documento HTML para detectar cuando el contenido del documento ha sido completamente cargado.

Sintaxis: document.addEventListener('DOMContentLoaded', función);

Argumentos:

• DOMContentLoaded : El tipo de evento que se desea escuchar.
• función : La función que se ejecutará cuando se dispare el evento.

Explicación detallada

• El evento DOMContentLoaded se dispara cuando el documento HTML ha sido completamente cargado y analizado.
• La función asociada al evento se ejecutará una vez que el documento esté listo.
• Permite ejecutar código JavaScript después de que el documento esté completamente cargado.
• Evita errores debido a la falta de elementos en el documento.
• En lugar de llamar a una función se puede usar una funcion-anonima function() o una funcion flecha ()=> para escribir directamente el codigo.

escucharElementos()

document.addEventListener('DOMContentLoaded', () => 
{ // Funcion que agrupara todos los escuchadores 
  //de eventos de los objetos HTML
  escucharElementos();  //<= Funcion que agrupa TODOS los disparadadores de eventos
});

//********************************************************************
//SECCION PARA AÑADIR TODOS LOS INTERCEPTORES
//DE EVENTOS 
function  escucharElementos()
{
  // button con id=btn_accion1 y con evento click
  document.getElementById('btn_accion1').addEventListener('click', (evento) => 
  { console.log("document.getElementById('btn_accion1') 'click' ");
    fn_Presionar_Boton();
  });

  
  //Otros objeto del DOM y su respectivos eventos
  //...
  document.getElementById('btn_accion2').addEventListener('click',()=>{fn_acc_2();}); 
  document.getElementById('btn_accion3').addEventListener('dblclick',()=>{fn_acc_3(); });
  document.getElementById('btn_accion4').addEventListener('mouseover',()=>{fn_acc_4();});

}  

EXPLICACIÓN : Una vez cargada la pagina hay que definir como reaccionar a la interacción del usuario con la pagina.

Aunque es posible escribir directamente cada uno de los escuchadores dentro de la sección no es recomendable hacerlo. Lo recomendable es agruparlos dentro de una función.

A continuación presento una lista de algunos de los eventos más utilizados

• Eventos de ratón:
• click
• dblclick
• mousedown
• mouseup
• mouseover
• mouseout
• mousemove
• Eventos de teclado:
• keydown
• keyup
• keypress
• Eventos de formulario:
• submit
• change
• focus
• blur
• Eventos de documento:
• DOMContentLoaded
• load
• unload
• resize
• scroll

SECCION DE FUNCIONES

//********************************************************************
//SECCION DE FUNCIONES QUE SE USARAN POR LA PAGINA


function fn_Presionar_Boton() // Codigo de ejemplo al presionar el boton
{ console.log("Iniciando fn_Presionar_Boton");
  alert("Hago algo al presionar el boton");

}//fin de function fn_Presionar_Boton()

function fn_Calcular_Algo (datoUno,datoDos)
{
  //.... codigo ....
}
 
function fn_Presentar_Otra_Cosa ()
{
  //.... codigo ....
}

function fn_Con_CallBack (CallBack)
{
  //.... codigo ....
  Retorno = "Algo";
  CallBack(Retorno);
}

  

EXPLICACIÓN : Se agrupan las funciones para facilitar el desarrollo y modificación del codigo.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">      
</head>
  <body style="color:white;background-color:black">
  <!-- ******************************************************************** -->
  <!-- SECCION DEL CUERPO HTML -->
  <h4>Codigo para pruebas</h4>
  <p id="campo_para_mostrar_datos"></p>
  <input type="text" id="campo_para_ingresar_datos" placeholder="Ingrese informacion">
  <button id="btn_accion1">Mensaje en el boton</button>
 
  <script>
    //********************************************************************
    //SECCION PARA VARIABLES Y CONSTANTES EXTERNAS / GLOBALES
    const claveLocalStorage = 'prueba003';
    

    //********************************************************************
    //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()
    {
      // button con id=btn_accion1 y con evento click
      document.getElementById('btn_accion1').addEventListener('click', (evento) => 
      { console.log("document.getElementById('btn_accion1') 'click' ");
        fn_Presionar_Boton();
      });

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

    }  

    //********************************************************************
    //SECCION DE FUNCIONES QUE SE USARAN POR LA PAGINA


    function fn_Presionar_Boton() // Codigo de ejemplo al presionar el boton
    { console.log("Iniciando fn_Presionar_Boton");
      alert("Hago algo al presionar el boton");
 
      //Codigo para recuperar 
      let info_campo = document.getElementById("campo_para_ingresar_datos").value;
      info_campo = info_campo.trim(); // Elimina los espacios en blanco
 
      let longitud_campo = info_campo.length; // Determina la longitud del campo.
      if (longitud_campo==0)  // Verifica el campo tenga texto
      { alert("No ingresaste nada"); }
      else
      {  alert ("Ingresaste ["+info_campo+"] con longitud ["+longitud_campo+"]" ) 
 
        //Codigo para copiar el contenido dentro del campo de texto
        document.getElementById("campo_para_mostrar_datos").textContent = "Información ingresada : "+info_campo;
      }//fin if
    }//fin de function fn_Presionar_Boton()

    //********************************************************************
    //FIN DEL SCRIPT

  </script>
  </body>
</html>