No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Quedan menos de 24 hrs para aprender Ingl茅s, AI y m谩s a precio especial.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

0 D铆as
1 Hrs
14 Min
53 Seg

Location y hash navigation

8/17
Recursos

Aportes 29

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥渞efrescar谩鈥 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: 鈥淥iga, 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 鈥渃aptura鈥. 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 鈥淐reate鈥, 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!!")
}

Esta es mi solucion para evitar anidar tantos if y que ademas me parece mas pulida y facil de leer y entender

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

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.

Me ando muriendo de risa por el 鈥淧UMM鈥 del minuto 16:27 JAJAJJAJAJA

Por cierto, asi va mi proyecto

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 鈥榣oad鈥 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 鈥楧OMContentLoaded鈥

Dejo la documentaci贸n sobre el addEventListener en este link

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.

Clousure + Switch 馃挭


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

function navigator(){
    let go = navigate();
switch(location.hash){
    case "#home":
            go.home();
            break;
    case "#search":
            go.search();
            break;
    case "#categories":
            go.categories();
            break;
    case "#trends":
            go.trends();
            break;
    case "#details":
            go.details();
            break;
    default: go.home();
}
}

function navigate(){

    return {
        "home": ()=>{
            console.log("you are on home");
            getTrendingMovies();
            getCategories();
        },
        "search": ()=>{
            console.log("you are on search");
        },
        "categories": ()=>{
            console.log("you are on categories");
            
        },
        "trends": ()=>{
            console.log("you are on trends");
        },
        "details": ()=>{
            console.log("you are on details");
        }
    }
}

En resumen hay dos formas de propagaci贸n en el DOM bubbling=false y capturing=true. Si se quiere que el evento de un elemento dentro de otro elemento con evento se ejecute primero, entonces se utiliza false o no se coloca nada porque por defecto es false, pero si se quiere que el evento del elemento externo se ejecute primero que el elemento con el evento interno se utiliza true.

Bueno, le铆 una docuentaci贸n para entender eso del terver par谩metro del addEventListener, y tiene que ver con el DOM Event Flow, que b谩sicamente es el proceso a trav茅s del cu谩l se origina el evento (en la implementaci贸n de Eventos DOM) y se env铆a o propaga a trav茅s del 谩rbol de nodo y pues cada evento tiene un nodo objetivo.

Entonces hay unas fases, la de captura que va desde la ra铆z del 谩rbol de nodos y se propaga hacia los nodos anteriores del nodo objetivo; la de bubbling que es la fase que hace el proceso contrario y la target que es cuando se env铆a al nodo de destino.

Entonces b谩sicamente este par谩metro lo que indica es en qu茅 fases se quiere escuchar el evento. El true es s贸lo para la fase de captura y el false es s贸lo para la fase bubbling y target.

Tal vez no les importe mucho pero estaba leyendo la documentacion del evento 鈥楧OMContentLoaded鈥 y dice que este no espera a que todo cargue: " It doesn鈥檛 wait for other things like images, subframes, and async scripts to finish loading." No espera la carga de imagenes, subframes(no se que son) y scrips asincronos.

En cambio el evento 鈥渓oad鈥: " should be used only to detect a fully-loaded page" se usa para detectar paginas completamente cargadas.

Ademas dice que el objetivo de este evento es el Document pero que se usa sobre el windo para manejar el evento en fase de captura o burbuja: 鈥淭he original target for this event is the Document that has loaded. You can listen for this event on the Window interface to handle it in the capture or bubbling phases.鈥

Lo de las fases lo explico bastante bien un compa帽ero en estos comentarios.
link info

Explicaci贸n del "false"
El false en el addEventListener se refiere a la opci贸n useCapture. Si esta opci贸n se establece en true, el EventListener se activar谩 en la fase de captura, lo que significa que se activar谩 cuando el evento se propague desde el elemento ra铆z hacia abajo hasta el elemento de destino. Si se establece en false, el EventListener se activar谩 en la fase de burbujeo, lo que significa que se activar谩 cuando el evento se propague desde el elemento de destino hacia arriba hasta el elemento ra铆z. En tu caso, se ha establecido en false, lo que significa que el EventListener se activar谩 en la fase de burbujeo.

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 馃檶

Auto Save de VSC 馃敟

Si te olvidas con frecuencia de guardar los cambios de tus archivos puedes usar el autoguardado de VSC que lo har谩 autom谩ticamente por ti.

Solo ve a File y luego dale check en Auto Save

de lo aprendido en otro curso lo correcto ser铆a escribirlo as铆:

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

    if (location.hash.startsWith('#trends')) {
        trendPage();
    } else if (location.hash.startsWith('#search=')) {
        searchPage();
    } else if (location.hash.startsWith('#movie=')) {
        movieDetailsPage();
    } else if (location.hash.startsWith('#category=')) {
        categoriesPage();
    } else {
        homePage();
    }

    location.hash
}

window.addEventListener('DOMContentLoaded', navigator, false);
window.addEventListener('haschange', navigator, false);

Cuando se trabaja con eventListener lo recomendable es colocar nuestra funcion con un arrow function (en este caso 鈥渘avigator鈥 debido a que si en un futuro necesitemos eleminar ese evento lo podriamos ubicar con su nombre 鈥渘avigator鈥 y optimizar el performance de nuestro DOM.

Deber铆an de hacer un curso en donde se separe la teor铆a de localStorage, location y otros elementos, as铆 quedar铆an mucho m谩s claros, de paso que ese curso tambi茅n tenga a las API Web m谩s 煤tiles.

En este curso, al tener que detenerse al explicar de manera superficial ciertos conceptos, por un lado, provoca que sea m谩s lento y, por otro lado, no se profundiza lo suficiente en ciertos conceptos, pues solo se limitan a que el ejercicio funcione, pero no a que un estudiante pueda aplicar lo que quiera con esos conceptos.

Generalmente, eso le pasa al grupo que desarrollo este curso en otros mas.

Genial esta clase me pusiste a volar jejejeje

El evento 鈥榟ashchange鈥 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 鈥榯rue鈥 si la navegaci贸n es una navegaci贸n por fragmentos, y 鈥榝alse鈥 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.

gracias juan nunca se me hubiese ocurrido