Programación web dinámica

Funciones y eventos

Funciones

En JavaScript hay, básicamente, dos formas distintas de definir funciones:

function saludar () {
	alert("Hola, mundo");
}
let saludar = function (){
	alert("Hola, mundo");
}

Como declaración:

  • Puede ser invocada antes de ser declarada en el código (hoisting)
  • Debe llevar nombre
  • Puede usarse como parámetro en otras funciones (callback)

Como expresión:

  • Debe ser declarada en el código antes de ser invocada
  • Puede ser anónima
  • Puede usarse como parámetro en otras funciones (callback), valor de retorno, asignaciones y/o en expresiones de funciones inmediatamente invocadas (IIFE)

Funciones flecha

Hay, además, otra forma de escribir funciones como expresión

function saludar () {
	alert("Hola, mundo");
}
let saludar = function (){
	alert("Hola, mundo");
}

Como declaración:

  • Puede ser invocada antes de ser declarada en el código (hoisting)
  • Debe llevar nombre
  • Puede usarse como parámetro en otras funciones (callback)

Como expresión:

  • Debe ser declarada en el código antes de ser invocada
  • Puede ser anónima
  • Puede usarse como parámetro en otras funciones (callback), valor de retorno, asignaciones y/o en expresiones de funciones inmediatamente invocadas (IIFE)
let saludar = () => {
	alert("Hola, mundo");
}

Función flecha

  • No tienen su propio contexto de this

IIFE

Una IIFE es, más bien, un patrón de uso común para ejecutar código en su propio alcance (scope), o bien, para crear un nuevo contexto asíncrono dentro de un contexto síncrono

 

En general, consisten en dos partes:

  1. Una expresión de función
  2. Una invocación inmediata a la expresión de función

IIFE

Una IIFE es, más bien, un patrón de uso común para ejecutar código en su propio alcance (scope), o bien, para crear un nuevo contexto asíncrono dentro de un contexto síncrono

(function () {
  // instrucciones
})();

IIFE estándar

IIFE

Una IIFE es, más bien, un patrón de uso común para ejecutar código en su propio alcance (scope), o bien, para crear un nuevo contexto asíncrono dentro de un contexto síncrono

(() => {
  //instrucciones
})();

IIFE con una función flecha

IIFE

Una IIFE es, más bien, un patrón de uso común para ejecutar código en su propio alcance (scope), o bien, para crear un nuevo contexto asíncrono dentro de un contexto síncrono

(async () => {
  //instrucciones
})();

IIFE asíncrona

Esperando al DOM

Podemos usar una función como la que se describe a continuación para asegurar que el código sea ejecutado apenas el DOM esté listo en la memovia del navegador

let windowReady = (function () {
  function ready(fn) {
    if (document.readyState != "loading") {
      fn();
    } else if (document.addEventListener) {
      document.addEventListener("DOMContentLoaded", fn);
    } else {
      document.attachEvent("onreadystatechange", function () {
        if (document.readyState != "loading") fn();
      });
    }
  }

  return {
    ready: ready,
  };
})();

En este código podemos identificar:

  1. IIFE
  2. Función como parámetro
  3. Eventos
  4. Un objeto global que expone un método

Esperando al DOM

Después de tener definida la función anterior, podemos usarla como sigue:

windowReady.ready(function () {
  	//instrucciones
});

Lo que hacemos es enviar una función que queramos ejecutar al método windowReady.ready()

Es de notar que el código dentro de la función queda en un scope distinto al global y aislado de este

  • Una cerradura

Eventos

Los eventos son cosas que suceden dentro de una página como respuesta a alguna interacción con el usuario:

  • click
  • doble click
  • pasar el puntero del ratón sobre un elemento
  • sacar el puntero del ratón de un elemento
  • dejar presionado el botón
  • ... y una larga, larga lista más...

Eventos

Para asignar un evento se requieren:

  1. Un elemento al que asignarlo
  2. Especificar cuál es el evento que queremos reconocer
  3. Una función a invocar una vez que el evento sea disparado
let boton = document.querySelector("#boton");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

boton.addEventListener("click", () => {
  let rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

El método addEventListener no es la única manera de crear un evento pero sí es la más recomendable

Eventos

Otra forma de asignar el mismo evento podría usando un callback  ser como se muestra en el ejemplo

let boton = document.querySelector("#boton");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

function cambiaFondo() {
  let rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

boton.addEventListener("click", cambiaFondo);

Eventos

La función que se llama cuando se dispara un evento recibe, por defecto, un objeto con toda la información del evento

let boton = document.querySelector("#boton");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

function cambiaFondo(e) {
  let rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
  console.log(e);
}

boton.addEventListener("click", cambiaFondo);

El objeto de un evento

El objeto del evento lleva toda la información relacionada al evento pero hay un par de cosas que son particularmente importantes:

  1. event.target
    Esta propiedad contiene una referencia al objeto que disparó el evento
  2. event.preventDefault()
    Este método cancela el evento, previniendo que la acción que realiza por defecto se realice (como por ejemplo, evitar que un formulario sea enviado si no se ha llenado adecuadamente)

Programación web dinámica: Funciones y eventos

By Gilberto 🦁

Programación web dinámica: Funciones y eventos

Funciones y eventos

  • 55

More from Gilberto 🦁