Closing: haciendo tu sitio web interactivo

closing2_2.md

Closing: haciendo tu sitio web interactivo

DOM

• ¿Qué es el DOM? Document Object Model

• ¿Qué es un selector? Nos permite encontrar uno o más elementos HTML

• ¿Cuál es la diferencia entre document.getElementById y document.getElementsByClassName? Además de que regresan elementos por distinto selector, el Elements regresa especificamente un arreglo, así devuelva un sólo elemento dentro.

• ¿Cómo preguntamos por los hijos de un elemento usando el DOM? con children y childNodes, aunque childNodes devuelve además comments y textElements

• ¿Cómo preguntamos por el padre de un elemento usando el DOM? parentElement

• ¿Qué atributos CSS de un elemento se pueden modificar usando el DOM? All of them?

• ¿Cómo podemos simular animación entre elementos HTML? Cambiando sus propiedades dentro de un setInterval(<function>, time_in_ms)

BOM

• ¿Qué es el BOM? Browser Object Model

• ¿En qué se relaciona el DOM con el BOM?

• ¿Cuáles son algunos usos comunes del BOM?

  • Cambiar el location
  • Obtener tamaño del dispositivo y el viewport

MODIFICANDO EL DOM

• ¿Se pueden crear nuevos nodos usando el DOM? Sí, con document.createElement()

• ¿Qué es un nodo? Una parte del DOM que puede o no formar parte visual de la página.

• ¿Cuántos tipos de nodos existen? 12

• ¿Por qué decimos que el DOM tiene nodos? Porque contiene muchos elementos que a su vez pueden tener otros elementos dentro de ellos, creando una estructura en forma de árbol.

• ¿Por qué decimos que el DOM tiene nodos de objetos? porque cada nodo tienen propiedades y métodos asociados.

• ¿Cómo accedemos a la propiedad style de body usando el DOM? document.body.style

• ¿Cuál es el nodo origen en el DOM? document

• ¿Cuál es el nodo origen en el BOM? window

• ¿Cuál es la diferencia entre nodo y elemento? Todos son nodos, un elemento es uno de los tipos de nodos, que representa etiquetas (que pueden formar parte del DOM una vez añadidas al mismo, o igual vivir independientes dentro del Javascript).

##EVENTOS

• ¿Qué es un evento? Es cuando el usuario realiza una acción permitiéndole interactuar con el programa. A cada evento se le asocia un manejador (conocido como eventHandlers o eventListener) el cual, se ejecutará cuando ocurra el evento.

• ¿Cuáles son los eventos más utilizados en un navegador?

  • keyup/keydown
  • focus/blur/change
  • clicking/double clicking/hover
  • scroll
  • load (cuando todos los elementos han sido cargados)
  • script execution timeline
    • setTimeout, setInterval (llamar funciones en ciertos tiempos)
    • debouncing (evitar que una función se ejecute rápidamente)

• ¿Cómo detectamos un click del usuario? document.getElementById('boton').addEventListener('click', function(){ console.log('Así!') });

• ¿Cómo detectamos entrada de texto del usuario?

  • keydown/keyup en cada presión de tecla.
  • change cuando se registra el cambio en el input.
  • prompt() uggly alert con input, usese solo en caso de emergencia.

• ¿Cómo detectamos el envio de un formulario? document.querySelector('form').onsubmit(function(e){e.preventDefault()});

• ¿Podemos usar el evento submit a un input type=text? Sí y no, el input no tiene evento submit, pero el form.submit se ejecuta con Enter o con click en button type=submit, siempre y cuando estén todos estos elementos dentro del form

• ¿De qué nos sirve la palabra "event" o "e"? Contiene los datos del evento ejecutado, su tipo, la tecla presionada en caso de los keyup/keydown y tiene métodos para por ejemplo, prevenir el comportamiento por defecto (preventDefault()) u obtener exactamente que fue clickeado dentro de él (permitiendo Event Delegation).

• ¿Cómo podemos almacenar o pasar información entre elementos HTML? En los Data Attributes a los que podemos acceder por medio de setAttribute() y getAttribute()

• ¿Qué es event delegation? Es cuando en lugar de añadir el manejador de un evento al elemento clickeado, se lo añades al elemento padre y a través de e.target obtienes la información del elemento clickeado, se usa cuando tienes por ejemplo una lista de elementos que todos son iguales y deben de responder igual y además están cambiando todo el tiempo.

  • How JavaScript Event Delegation Works

• ¿Qué es event propagation? Es el ordén en el que el navegador dispara los eventos asociados a por ejemplo un click, y tiene 2 formas de funcionar:

  • bubbling: El valor por defecto, este evento será ejecutado en ordén comenzando, desde lo más profundo del árbol.
  • capture: addEventListener(<event>,<function>, TRUE), el navegador detecta el click desde el elemento más arriba del árbol(HTML) y va buscando eventos asociados hasta llegar a lo más profundo del árbol, en este caso, ejecutará el evento en cuanto es detectado, sin esperar a que comience el bubbling.

• ¿Cómo definimos eventos propios? Usando CustomEvent(), y podemos dispararlos (ya que nada lo disparará a menos que nosotros lo indiquemos), con dispatchEvent();

  • Ver más: CustomEvent()

• ¿Cuál es la diferencia entre onClick y addEventListener("click")?

  • onClick: Es el equivalente a escribir una función anonima como propiedad del elemento, y como tal sólo puedes tener 1 asociada.
  • addEventListener: Solo sirve en IE > 9 (antes es attachEvent), y puede añadir más de un manejador (por eso necesitamos mandar la función que deseamos remover al llamar removeEventListener()), su última diferencia es que podemos usar el último parametro para cambiar cuando se llama el evento durante el event propagation.
  • Ver Más: Stackoverflow: addEventListener vs onclick