Location y hash navigation

Si están usando la extensión live server, deben de tener cuidado de la url que está en el navegador, al cambiar el location.hash manualmente (desde consola) se cambia la ruta en la ventana del navagador también, y si pusieron en consola algo como:

location.hash="hola"

y realizan algún cambio en el código, al guardar, la extension live server “refrescará” la ventana del navegador, pero conservando el hash “#hola” en la dirección de la página, lo que puede provocar que creas que tu código está mal, cual en realidad sí está funcionando.

El

false 

según la documentación se conoce como

useCapture

Es Opcional

Si es true, useCapture indica que el usuario desea iniciar la captura. Después de iniciar la captura, todos los eventos del tipo especificado serán lanzados al listener registrado antes de comenzar a ser controlados por algún EventTarget que esté por debajo en el arbol DOM del documento.

https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener

Adicional en la parte que menciona el:

load

Este cuenta con una caracteristica vs el DOMContentLoaded

El evento load se desencadena cuando se ha cargado toda la página, incluidos todos los recursos dependientes, como hojas de estilo e imágenes. Esto contrasta con DOMContentLoaded, que se activa tan pronto como se ha cargado el DOM de la página, sin esperar a que los recursos terminen de cargarse.

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Se que escribi mucho perdón, Pero si declaran la funcion como arrow function de la siguiente manera

window.addEventListener('DOMContentLoaded', navigatior, false)
window.addEventListener('hashchange', navigatior, false)

const navigatior = () => {
    	//your code
}

Les va a generar un error interesante 😏

Dejo la respuesta a la incógnita del tercer parámetro al definir un evento.
Dejo mi apuntes del dominio del DOM en caso que requieras ampliar algo de información:
https://denim-roll-f1a.notion.site/Manipulaci-n-del-DOM-con-JS-fdd3de3e7b444d19bf61b39d1bacb1e0

Bubble: Propagación de eventos

La propagación de eventos burbujeante, ascendente o Bubble, se produce cuando se define un evento en un elemento (padre) que contiene otros elementos (hijos). Por ejemplo:

<div id="div1">
    <div id="div2">
        <div id="div3">
            Hola
        </div>
    </div>
</div>

Si definimos un event listener en div3 y le das click aparentemente estas dando click a los elementos div2 y div1. Esto se debe a que JS esta pensado para que el evento interno se propague hacia arriba hasta llegar a su máximo contenedor DOM. Similar a una burbuja que asciende desde el fondo hasta el tope del liquido.

La forma de detener el ascenso de eventos, es usando el método stopPropagation(). Que viene dentro del argumento event que cualquier evento nos provee, por tanto, yo puedo decirle al div3: “Oiga, yo solo lo quiero clickar a usted, no a los demás, sí, ya se que usted está dentro de los demás, pero yo solo lo quiero a usted”, de tal forma que al event listener del programation le puedo declarar como:

div3.addEventListener("click",event => {

event.stopPropagation()

});

De esta forma, el evento de div2 y div1 no serán ejecutados.

Dato curioso, cuando tu defines un elemento con un ID en HTML, en JavaScript se crea automáticamente una variable con ese id que creaste, por eso es completamente posible que yo pueda usar la variable div3 sin tener que seleccionar el elemento.

En la definición de la escucha de un evento este tiene tres parametros, el evento, la función que ejecutara cuando se detecte el evento y el modo burbble (false) que es el modo por defecto o el modo capturing (true).

div3.addEventListener("click",funcion, false);

Capturing

Hay otra fase del procesamiento de eventos llamada “captura”. Rara vez se usa en código real, pero a veces puede ser útil.

Los eventos del DOM estándar describen 3 fases de propagación de eventos:

1. Fase de captura: el evento se reduce al elemento.
2. Fase objetivo: el evento alcanzó el elemento objetivo.
3. Fase burbujeante: el evento emerge del elemento hacia todos sus padre.

Podemos decir que el evento en modo captura, es la contra parte del burbujeante, de tal manera que también se le denomina goteo. En este caso el evento se captura en el elemento padre y este lo desencadena los eventos en los elementos hijos.

Para verlo en nuestro ejemplo, para activar este modo de trabajo definimos:

div1.addEventListener("click",funcion, false);

<div id="div1">
    <div id="div2">
        <div id="div3">
            Hola
        </div>
    </div>
</div>

En este caso el evento se detecta en el elemento div1 y después se ejecutará en los elementos div2 y div1

En videos anteriores hicieron un aporte para optimizar el código y no tener que andar escribiendo a cada rato la linea de .querySelector cuando necesitamos hacer target a un elemento del html.

En esto me base para ahorrar lineas de código e implementar la misma idea pero con el .createElement que usamos muy seguido.

const Cr = (elemento) => document.createElement(elemento);

Utilice Cr por ser las siglas de la palabra “Create”, pero pueden nombrarla del modo que quieran, de este modo cada vez que necesitemos crear un elemento por medio de Js Solo tendríamos que escribirlo así:

const parrafo = Cr('p');

No es película pero si es documental, por si les interesa: El viaje interminable

• Location Propiedad del navegador de JS que permite leer la URL en la que nos encontramos actualmente, entre sus propiedades está el hash, puerto, ruta, etc

• onhaschange: Permite que ejecutemos cierto código cada vez que cambie nuestro hash

Codigo de la clase 😁👍🏻

window.addEventListener("DOMContentLoaded", navigator, false)
window.addEventListener("hashchange", navigator, false)

function navigator() {
  if (location.hash.startsWith("#trends")) {
    trendsPage()
  } else if (location.hash.startsWith("#search=")) {
    searchPage()
  } else if (location.hash.startsWith("#movie=")) {
    movieDetailsPage()
  } else if (location.hash.startsWith("#category=")) {
    categoriesPage()
  } else {
    homePage()
  }
}

function homePage() {
  console.log("Home!!")
  getTrendingMoviesPreview()
  getCategoriesPreview()
}
function categoriesPage() {
  console.log("Categories!!")
}
function movieDetailsPage() {
  console.log("Movie!!")
}
function searchPage() {
  console.log("Search!!")
}
function trendsPage() {
  console.log("TRENDS!!")
}

Para quien se pregunte como puede hacer más leíble el nido de if else:

window.addEventListener('load', handleRouter, false)
window.addEventListener('hashchange', handleRouter, false)

function navigator(){
  const router = {
    '#trends': () => {console.log('trends')},
    '#search=': () => {console.log('search')},
    '#movie=': () => {console.log('movies')},
    '#category=': () => {console.log('categories')},
    '#home': () => {console.log('home')},
  }

  if(true){
    return router[window.location.hash] || router['#home']
  }
}

function handleRouter(){
  const router = navigator()
  router()
}

De hecho me lo enseño juan dc en otro curso.

El tercer parametro se utiliza para determinar si se va a manejar con bubbling cuando es false o capturing cuando es true

Les comparto una forma que encontré para facilitar la lectura del código. 😄

const navegador = () => {
	console.log({ location });

	const HASHES = {
		'#trends'    : () => trendsPage(),
		'#search='   : () => searchPage(),
		'#movie='    : () => moviePage(),
		'#category=' : () => categoryPage(),
	};

	for (const KEY of Object.keys(HASHES)) {
		if (location.hash.startsWith(KEY)) {
			HASHES[KEY]();

			return;
		}
	}

	homePage();
};

const homePage = () => {
	console.log('HOME');
};

const categoryPage = () => {
	console.log('CATEGORY 37');
};

const moviePage = () => {
	console.log('MOVIE');
};

const searchPage = () => {
	console.log('SEARCH');
};

const trendsPage = () => {
	console.log('TRENDS');
};

window.addEventListener('load', navegador, false);
window.addEventListener('hashchange', navegador, false);

Como mensiono Juan tambien en el evento de carga tambien funciona con ‘load’ pero hay un pequeño problema, cuando cambias el hash no te va a redirecionar sino que se quedara en la misma pantalla.
Asi que tenemos que utilizar en el argumento ‘DOMContentLoaded’

Dejo la documentación sobre el addEventListener en este link

window.addEventListener('load', navigator, false);
window.addEventListener('hashchange', navigator, false);

function navigator(){
  console.log({ location });

  if(location.hash.startsWith('#trens')){
    trendsPage();
  }else if(location.hash.startsWith('#search=')){
    searchPage();
  }else if(location.hash.startsWith('#movie=')){
    movieDetailPage();
  }else if(location.hash.startsWith('#category=')){
    categoryPage();
  }else{
    homePage();
  }
}

function homePage(){
  console.log('HOME!!!');
}

function searchPage(){
  console.log('SEARCH!!!');
}

function movieDetailPage(){
  console.log('MOVIE!!!');
}

function categoryPage(){
  console.log('CATEGORY!!!');
}

function trendsPage(){
  console.log('TRENDS!!!');
}

El código con comentarios, si lo necesitas en texto, dímelo 🙌

El evento ‘hashchange’ tiene un valor booleano al final para determinar si la navegación es un fragmento o no. Una navegación por fragmentos ocurre cuando la parte de la URL correspondiente al ‘#’ ha cambiado y el valor booleano será cambiado a ‘true’ si la navegación es una navegación por fragmentos, y ‘false’ si no lo es.
.
Básicamente te permite lograr eventos por cambios en el anchor (#) haciendo el sitio dinámico. Esto podría servir por ejemplo para hacer toggle a las clases de tus etiquetas HTML con JS para así mostrar u ocultar distintas vistas.

Creo haber Descubierto un easter egg, el Profe Juan fue uno de los responsables de que el nuevo curso de programación, haya sido orientado al mundo de Pokémon con Mokepón y no de Dragon ball o Naturo.

gracias juan nunca se me hubiese ocurrido