Guía 07

Guía 07

DAWM / Proyecto02

Actividades previas

Actividades en clases

  1. Clona localmente tu repositorio landing.
  2. Sigue las instrucciones de Gemini, y:
    • Cree, o utilice, una carpeta con scripts y agregue el archivo de código externo ‘main.js’.
    • Agregue la referencia con la ruta al archivo de código externo en el archivo index.html.

DOMContentLoaded & Window API

  1. Defina la función flecha loaded, con un parámetro eventLoaded.
    • Del API del objeto window, use la función alert para mostrar un mensaje.
    • Use el objeto console para mostrar el contenido del parámetero.
    • Detenga la ejecución del código con el objeto debugger.
  let loaded = ( eventLoaded ) => {
    
    window.alert("landing page loaded");
    console.log( eventLoaded );
    debugger;

  }
  1. Del API del objeto window, use la función addEventListener para establecer la función loaded como un callback que responda al evento DOMContentLoaded.
  let loaded = ( ... ) => {

    ...

  }

  window.addEventListener("DOMContentLoaded", loaded);
  1. (STOP 1) Compruebe el resultado en el navegador.
  2. Habilite el inspector del navegador. Actualice su navegador e inspecione los objetos con el depurador.

Document API

  1. Asigne un identificador único al elemento formulario del documento HTML.
  2. Dentro de la función flecha loaded:
    • Del API del objeto document, use la función getElementById para obtener una referencia al elemento HTML de acuerdo con el argumento.
  let loaded = ( eventLoaded ) => {

    let myform = document.getElementById('<identificador-del-formulario>');
    debugger;

  }

  window.addEventListener( ... )
  1. (STOP 2) Compruebe el resultado en el navegador.
  2. Habilite el inspector del navegador. Actualice su navegador e inspecione los objetos con el depurador.

Evento predeterminado

  1. Dentro de la función flecha loaded:
    • Al objeto con la referencia al formulario, agregue un callback que responda al evento submit (con el parámetro eventSubmit).
  let loaded = ( eventLoaded ) => {

    let myform = document.getElementById('<identificador-del-formulario>');
    
    myform.addEventListener('submit', ( eventSubmit ) => { 

      debugger;

    })

  }

  window.addEventListener( ... )
  1. (STOP 3) Compruebe el resultado en el navegador.
  2. Habilite el inspector del navegador. Actualice su navegador e inspecione los objetos con el depurador.

Evento personalizado

  1. Asigne un identificador único para cada elemento de ingreso de datos del formulario, p.e.:
  ...
  <input id="element1" type="text">
  ...
  1. Dentro de la función flecha loaded:
    • Del API del objeto eventSubmit, use la función preventDefault para detener el proceso predeterminado.
    • Del API del objeto con la referencia al elemento HTML con identificador element1, use la propiedad value para extraer el contenido.
    • Del API de la cadena de texto, use la propiedad length para contar las cantidad de letras en el texto.
    • Del API del objeto con la referencia al elemento HTML con identificador element1, use el método focus para establecer el enfoque en el elemento HTML.
    • Del API del objeto window, use él método alert para mostrar con un mensaje de alerta.
  let loaded = ( eventLoaded ) => {

    ...
    
    myform.addEventListener('submit', ( eventSubmit ) => {

      eventSubmit.preventDefault();

      let element1Value = element1.value;
      
      // Validación del contenido del input 

      if( element1Value.length == 0 ) {
        
        element1.focus()

        alert('Ingrese un texto válido')

        return;
      }

      debugger;

    })

  }

  window.addEventListener( ... )
  1. (STOP 4) Compruebe el resultado en el navegador.
  2. Habilite el inspector del navegador. Actualice su navegador e inspecione los objetos con el depurador.

Validación del contenido del formulario

  1. Continúe con la validación del resto de elementos HTML para el ingreso de datos en el formulario.
  2. (STOP 5) Compruebe el resultado en el navegador.
  3. Versiona local y remotamente el repositorio landing.

Documentación

Fundamental

Términos

Javascript, función flecha, API, console, debugger, window, evento, document, propiedad, función.

Referencias