[{"_1":2,"_140":-5,"_141":-5},"loaderData",{"_3":4,"_139":-5},"routes/courseViewer",{"_5":6,"_19":20,"_25":-5,"_26":8,"_27":28,"_56":57,"_133":134,"_136":137},"course",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18},"isFree",false,"id","63eff8ac74e7946635ec1a34","title","Mínimo JS para React","authorName","Héctor Bliss","slug","minimo-js-para-react","version","1.2","nextVideo",{"_11":21,"_15":22,"_9":23,"_24":-5},"Desestructuración","desestructuracion-4us0ADIMhd2SmhvuilgtO","63effa2774e7946635ec1a5f","poster","user","isPurchased","video",{"_9":29,"_15":30,"_11":31,"_32":33,"_34":-5,"_35":36,"_37":-5,"_38":39,"_13":40,"_41":42,"_43":44,"_45":46,"_24":-5,"_47":48,"_49":50,"_51":-5,"_52":53,"_54":55},"64fb601f512a357379135cd3","Fetch-API","Fetch API","isPublic",true,"moduleName","storageLink","https://firebasestorage.googleapis.com/v0/b/fixter-67253.appspot.com/o/fixtergeek.com%2Fmicro-cursos%2Fm%C3%ADnimoJSparaReact%2F10_fetchAPI.mov?alt=media&token=19e3cd25-df5b-4d0c-8e6f-5935a10054f4","m3u8","index",2,"Héctorbliss","photoUrl","https://i.imgur.com/TaDTihr.png","description","## Fetch API\n\nTe explico cómo funciona la Fetch API, cómo puedes usarla por primera vez y por qué es importante aprender a usarla. 🤓\n[Docs](https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Basic_concepts)\n\n\nTe explico cómo funciona la Fetch API, cómo puedes usarla por primera vez y por qué es importante aprender a usarla. 🤓\n[Docs](https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Basic_concepts)\n\n\nAprender a utilizar la fetch API es muy saludable para tu carrera.\n","duration","387.033333","module","63eff8e874e7946635ec1a3c","courseIds",[10,10,10,10,10,10,10,10,10],"v","createdAt",["D",1694195743123],"updatedAt",["D",1694196482212],"videos",[58,68,75,81,87,93,99,105,111,118,129],{"_9":59,"_15":60,"_11":60,"_32":33,"_34":-5,"_35":61,"_37":-5,"_38":62,"_13":40,"_41":42,"_43":63,"_45":64,"_24":-5,"_47":48,"_49":65,"_51":62,"_52":66,"_54":67},"63eff9e274e7946635ec1a50","Funciones","https://firebasestorage.googleapis.com/v0/b/fixter-67253.appspot.com/o/fixtergeek.com%2Fmicro-cursos%2Fm%C3%ADnimoJSparaReact%2FFunctions_1.mp4?alt=media&token=53ea6c94-330b-488e-bcdf-b17efa4711c6",0,"","516.633333",[10,10,10,10,10],["D",1676671458447],["D",1694195897590],{"_9":23,"_15":22,"_11":21,"_32":33,"_34":-5,"_35":69,"_37":-5,"_38":70,"_13":40,"_41":42,"_43":63,"_45":71,"_24":-5,"_47":48,"_49":72,"_51":62,"_52":73,"_54":74},"https://firebasestorage.googleapis.com/v0/b/fixter-67253.appspot.com/o/fixtergeek.com%2Fmicro-cursos%2Fm%C3%ADnimoJSparaReact%2Fdesestructurando_2.mp4?alt=media&token=aa471bac-f0ba-4d76-a997-26d4ed013502",3,"288.633333",[10,10,10],["D",1676671527647],["D",1694195897590],{"_38":76,"_9":77,"_15":78,"_11":79,"_45":80,"_43":63,"_47":48,"_32":8,"_34":-5},4,"63effa5274e7946635ec1a6e","asincronia-YcWPWGL8nINjYV5PIoDkE","Asincronía","666.233333",{"_38":82,"_9":83,"_15":84,"_11":85,"_45":86,"_43":63,"_47":48,"_32":8,"_34":-5},5,"63effa6b74e7946635ec1a7d","asyncawait-V1l4UHePB6VCovpo25V1H","async/await","448.266667",{"_38":88,"_9":89,"_15":90,"_11":91,"_45":92,"_43":63,"_47":48,"_32":8,"_34":-5},6,"63effa9074e7946635ec1a93","promesas-YslikAEIitJ32hWIW_dbk","Promesas","634.466667",{"_38":94,"_9":95,"_15":96,"_11":97,"_45":98,"_43":63,"_47":48,"_32":8,"_34":-5},7,"63effaad74e7946635ec1aa2","programacion-funcional-Im1ztr6krYblSW-vqO7cF","Programación funcional","253",{"_38":100,"_9":101,"_15":102,"_11":103,"_45":104,"_43":63,"_47":48,"_32":8,"_34":-5},8,"63effabe74e7946635ec1ab1","metodos-del-array-sP5SHfHsiGEV6cA6KONgQ","Métodos del Array","148.933333",{"_38":106,"_9":107,"_15":108,"_11":109,"_45":110,"_43":63,"_47":48,"_32":8,"_34":-5},9,"63effad574e7946635ec1ac0","modulos-es6-l40ni725Ig_VPFZKVEKSq","Módulos ES6","389.033333",{"_38":112,"_9":113,"_15":114,"_11":115,"_45":116,"_43":117,"_47":48,"_32":8,"_34":-5},10,"63f003d874e7946635ec1c5f","eventos-del-dom-2023","Eventos del DOM","479.666667","# Eventos del DOM con JS\n\nCuando utilizamos **JavaScript** en el navegador, o del lado del cliente, regularmente nos vamos a encontrar trabajando con las **API** del navegador, una de estas **API**, tal vez la más común, es la del **DOM**.\n\nCómo seguro ya sabes, el **DOM** (Document Object Model) es todo el documento **HTML** representado en un árbol de nodos. A mi me gusta pensar que estos nodos se han convertido de simples etiquetas **HTML** a objetos vivos, han pasado de ser solo un concepto a realmente vivir dentro del navegador. \n\nEstos nodos son manipulables, accesibles y modificables, de hecho podemos decir que modificar estos nodos es la razón de existir de **JavaScript**, porque aunque **JS** hoy en día se usa en muchisimos entornos, incluido el servidor, nació como un pequeñito sistema de scripting para manipular el **DOM. 🤯**\n\nPor eso es muy importante aprender sobre esta manipulación. En esta lección vamos a aprender 3 cosas importantes:\n\n1. Cómo seleccionar y cómo crear nodos con **JavaScript.**\n2. Vamos a conectarnos a algunos eventos disponibles de estos nodos y del documento.\n3. También vamos a entender cómo podemos usar templates HTML con JS.\n\nVamos pues. 🏄🏻\n\n## 🛸 Manipulación de nodos con JavaScript\n\nExisten varias maneras de manipular un nodo con **JavaScript**, una de las más modernas es utilizando una herramienta que se nos incluye en el objeto `document`, presente en el navegador. \n\nPara asegurarnos de que tenemos acceso a este objeto, vamos a abrir las herramientas de desarrollador en alguna pestaña de nuestro navegador. Esto lo podemos hacer con click derecho e inspeccionar (en Chrome).\n\n```jsx\nconst nodo = document.querySelector('h1');\n```\n\nla herramienta del `document` que estamos usando aquí se llama `querySelector`. A estas herramientas que nos facilitan la selección de nodos y algunas otras opciones que veremos en un momento, se le conoce como “Vanilla JS” este nombre es una de esas cosas nerds de las que los developers gustan. Vanilla porque es difrutable, más fácil que lo que se tenía antes, así que es una forma de decir que es más fácil que con `selectElementByTagName`, por ejemplo.\n\nUna vez que hemos capturado el nodo, tenemos acceso a todas sus propiedades, y por supuesto, también podemos modificarlo. Vamos a cambiar el contenido de texto de este nodo:\n\n```jsx\nconst nodo = document.querySelector('h1');\nconsole.log(nodo.textContent); // Esto nos mostrará en consola el contenido\n// Pero, este método también nos sirve como setter:\nnodo.textContent = \"Hola Blissmo\";\nconsole.log(nodo.textContent); // el contenido se ha modificado también en la página web\n```\n\npodemos incluso cambiar el color y cualquier otro estilo CSS que se le que quiera aplicar al nodo:\n\n```jsx\nnodo.style.color = \"tomato\"; // 🤯\n```\n\nEsto solo es la punta del iceberg, pues no solo podemos modificar nodos existentes, también podemos crear nuevos nodos y agregarlos al *body* o como hijo de cualquier otro nodo:\n\n```jsx\nconst nuevoNodo = document.createElement('h1');\nnuevoNodo.textContent = \"Nuevo Blissmo\";\ndocument.body.prepend(nuevoNodo);\n// Con estas dos lineas de código, hemos agregado un nuevo nodo `

` al body de la página web, y claro, podemos modificarlo, intenta cambiar el color y el tamaño tu mismo. 👽\n```\n\n## 🎪 Ahora vamos a utilizar algunos eventos del DOM\n\nUno de los eventos, que suceden en un documento HTML, más conocidos es, por su puesto, el clic. Así que para explorar este evento vamos a crear un nuevo nodo, ahí mismo en la página donde nos encontramos y vamos a agregar un “listener” o un observador, como se dice en español.\n\n```jsx\nconst btn = document.createElement('button'); // podemos crear cualquier etiqueta HTML con createElement\nbtn.textContent = \"Apachurrame\";\nbtn.style = 'border-radius:9px;background:tomato;color:white;font-size:32px;cursor:pointer;margin:16px;',\ndocument.querySelector('#root').prepend(btn);\n\n```\n\nAhora que agregamos el botón, es momento de suscribirnos a el evento del clic, pues el botón es el elemento perfecto para recibir un clic.\n\n```jsx\nbtn.addEventListener(\"click\", function(event){\n\tconsole.log(\"Haz dado Clic\")\n})\n```\n\nEsta es la forma más tradicional de agregar un “eventListener”, pero recuerda que tenemos Vanilla JS a la mano para simplificar las cosas, así que hagámoslo mejor de una manera más moderna.\n\n```jsx\nbtn.onclick = (event) => console.log(\"Haz dado clic\");\n```\n\nObserva que hemos usado un “arrow function” y que además estos eventos siempre nos entregan un objeto event, que podemos usar o no (lo usaremos en un momento más).\n\nSi das click en el botón ahora podrás darte cuenta de que mostramos dos `console.log`.\n\n> 👀 Toma nota de que al usar la sintaxis onclick los nombres de los eventos cambian sutilmente, pues mientras en un `addEventListener` el evento es `clic`, de la otra manera será `onclick`.\n> \n\nVamos a utilizar el objeto evento que recibimos cuando se hace clic, para ver que contiene.\n\n```jsx\nbtn.onclick = (event) => {\n\tconsole.log(event);\n}\n// PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}\n\n```\n\nPuedes ver que el evento está lleno de información superútil, podemos dejarnos llevar por nuestra imaginación para crear experiencias geniales para nuestros usuarios, datos como `clientX` y `clientY` que son las coordenadas del mouse al momento del clic, el tipo de clic que en este caso ha sido el “mouse” hasta el timestamp que representa el momento en el tiempo en el que el clic ha sucedido. Uff, me falta creatividad para usar todos estos datos. 🤨\n\nPero este evento incluye un elemento importante, este elemento es el `target`.\n\nEl elemento target es un nodo, es justamente el nodo responsable del evento, sí, el propio botón.\n\nPodemos hacer uso de este elemento de la siguiente manera:\n\n```jsx\nbtn.onclick = (event) => {\n\tconsole.log(event.target);\n\tevent.target.style.background = \"indigo\";\n}\n```\n\nVemos en consola el botón, además de que hemos cambiado su background, esto es muy útil cuando colocamos multiples eventos en multiples botones u otros nodos y queremos modificar solo el nodo que ha recibido el clic. ¿Genial no? 🤖\n\nAhora sabes que con JS podemos crear y modificar nodos, además de suscribirles eventos. Que por cierto, en esta lección hemos visto solo el clic para introducir esta API, pero te dejo un enlace a la documentación oficial, donde vas a encontrar la lista completa de eventos del DOM para que los explores por tu cuenta.\n\n## 🎒 Por ultimo, quiero mostrarte un hack\n\nA la creación de nodos con JS utilizando `createElement` se le conoce como programación “imperativa”, y este tipo de programación regularmente está contrastada con la programación “declarativa”. \n\nPara darte un ejemplo que te permita entender perfectamente las diferencias entre uno y otro, vamos a crear este mismo botón de una forma declarativa, ya que lo que hemos hecho anteriormente ha sido programación imperativa:\n\n```jsx\ndocument.body.innerHTML = `\n`\n```\n\nCuando ejecutamos este comandito, estamos sustituyendo todo el body con un nodo button. \n\nLo interesante aquí, es que no hemos usado `createElement` ni hemos asignado estilos al nodo con `.style`, hemos simplemente dibujado una etiqueta HTML como lo haríamos en un archivo `.html`. \n\nY lo hemos hecho en JavaScript con una de sus herramientas más recientes: las template strings o template literals. Estas comillas nos permiten escribir HTML con comodidad, haciéndonos más fácil agregar arboles de nodos más complejos sin la necesidad de crear nodo por nodo, incluso podemos incluir variables:\n\n```jsx\nconst text = \"Apachurramesta\"\ndocument.body.innerHTML = `\n
\n\t
Hola Blissmo
\n\t\n
\n`\n```\n\n¡Genial! Ahora sabes de qué trata la manipulación y los eventos del DOM, es momento de que practiques con tus nuevos poderes y te des cuenta de que tienes el mundo web a tu merced.\n\nRecuerda ser un dios benévolo. 😎🌎\n\n## Enlaces relacionados\n\nManipulación del DOM\n\nhttps://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents\n\nTodos los eventos del DOM\n\nhttps://developer.mozilla.org/es/docs/Web/Events\n\nTemplate strings\n\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals",{"_9":119,"_15":120,"_11":121,"_32":33,"_34":-5,"_35":122,"_37":-5,"_38":123,"_13":40,"_41":42,"_43":124,"_45":125,"_24":-5,"_47":48,"_49":126,"_51":-5,"_52":127,"_54":128},"64f5025cb93992bc46320170","Que-es-un-Closure","¿Qué es un Closure?","https://firebasestorage.googleapis.com/v0/b/fixter-67253.appspot.com/o/fixtergeek.com%2Fmicro-cursos%2Fm%C3%ADnimoJSparaReact%2F9_closure.mov?alt=media&token=56f41509-ef1a-4052-ae0d-143b3e47d822",1,"# Closure\n\nJavaScript controla la visibilidad y la vida de las variables y parámetros por nosotros, reduciendo la colisión de nombres y asignando memoria para los valores de forma automática por medio del scope.\n\n```jsx\nconst name = 'blissmo';\nconst sayMyName = () => { \n\tconsole.log(name) // blissmo\n}\n\nsayMyName();\n```\n\nGracias al scope, se tiene acceso a los parámetros y las variables que son definidas dentro del mismo bloque (`{}`). \n\nPero si creamos una variable con el mismo nombre de una global, JavaScript se encargará de evitar la colisión.\n\n```jsx\nconst name = 'blissmo 🤓';\nconst sayMyName = () => { \n\tconst name = 'pedrito 😎';\n\tconsole.log(name) // pedrito 😎\n}\n\nsayMyName();\n```\n\n¿Podemos usar esta característica a nuestro favor?, ¡claro! Veamos qué pasa si creamos un objeto ayudándonos de una función:\n\n```jsx\n// Constructor\nconst createUser = function (name){\n\treturn {\n\t\tsayMyName: function () {\n\t\t\treturn name;\n\t\t}\n\t}\n}\n// Creamos el objeto (como una instancia):\nconst user = createUser('blissmo 🤓');\n\n// Invocamos getMyName\nuser.sayMyName(); // blissmo 🤓\n```\n\n> 👀 A estas funciones se les llama constructors\n> \n\nSi observas bien esta función, te preguntarás: ¿Donde es que se almacena el valor de name? El objeto no tiene ninguna propiedad name, ni nada de `this.name=name` o algo similar. Sin embargo, la referencia a la variable `name` queda almacenada en el objeto user. 🤯\n\nEsto porque el método `sayMyName` tiene privilegios de scope. \n\nEs decir, que la función `sayMyName` seguirá teniendo acceso al valor original del parámetro, gracias al scope. A esto se le llama closure.\n\n## Vamos un ejemplo práctico del closure para entender mejor\n\nVamos a definir una función que genere un contador de 0 hasta el número que le indiquemos y coloque número por número en un nodo del DOM cada segundo.\n\n```jsx\nconst counter = function (max, node) {\n\tlet current = 0;\n\tconst count = function () {\n\t current +=1\n\t\tif(current <= max) {\n\t\t\tnode.innerText = current;\n\t\t\tsetTimeout(count, 1000);\n\t\t}\n\t}\n\n\tsetTimeout(count,1000);\n}\n```\n\nEsto se resuelve fácilmente con un poco de recursividad, pero observa que la magia sucede gracias a que la función count tiene acceso privilegiado por ser parte del scope de `current`. \n\n## Ahora veamos un error común\n\nExisten errores comunes al escribir código JavaScript cuando no se tiene en cuenta el closure.\n\n```jsx\n// ESTO ESTÁ MAL\nconst counter = function (max,node){\n\tfor(i=0; i<=max; i++){\n\t\tsetTimeout(()=>{\n\t\t\tconsole.log(\"i:\",i)\n\t\t\tnode.innerText = i;\n\t\t},1000i)\n\t}\n}\n```\n\nEsto no funciona correctamente porque la `i` que hemos usado dentro del `setTimeout` es una referencia a la variable dentro del scope, pero no una referencia al valor. \n\nUn segundo después, cuando el primer `setTimeout` es ejecutado, el valor de `i` ya es `11`, pues el `for` ya ha terminado. 😱\n\nPero, podemos usar un closure* para resolver este problema:\n\n```jsx\n// ESTO ESTÁ MEJOR\n\nconst counter = function (max,node){\n\tconst helper = (value) => function () {\n\t\tconsole.log(value)\n\t\tnode.innerText = value;\n\t}\n\tfor(i=0; i<=max; i++){\n\t\tconst fun = helper(i); // hacemos un closure de i\n\t\tsetTimeout(()=>{\n\t\t\tfun()\n\t\t},1000i)\n\t}\n}\n```\n\n¡Genial! 🤯 Ahora que entiendes qué es un closure le puedes sacar todo el provecho 🔥🎉\n\n## De paso vamos a entender let\n\nHay una forma más de resolver este for de forma más simple.\n\n```jsx\n// LIBERANDO EL PODER DE LET\n\nconst counter = function (max,node){\n\tconst helper = function (value){\n\t\tconsole.log(value)\n\t\tnode.innerText = value;\n\t}\n\tfor(let i=0; i<=max; i++){\n\t\tsetTimeout(()=>{\n\t\t\thelper(i)\n\t\t},1000i)\n\t}\n}\n```\n\nCuando i es utilizada en el for como var, su valor es global, signifíca que cuando la usamos, no estamos pasando el valor de i, sino su referencia, por eso cuando es utilizada en el setTimeout esta devuelve su valor actual y no de cuando se definío el setTimeout.\n\nPero con let, esto es distinto, una variable let es inmune al hoisting, y se mantiene local al scope donde fue definida, esto significa que la i que se usa en el setTimeout ya no es global sino una copia local. 🤯\n\nAbrazo. Bliss. 🤓\n\n## Enlaces relacionados\n\nMozilla docs\n\nhttps://developer.mozilla.org/es/docs/Web/JavaScript/Closures","174.366667",[10,10],["D",1693778524508],["D",1694195897590],{"_9":29,"_15":30,"_11":31,"_32":33,"_34":-5,"_35":36,"_37":-5,"_38":39,"_13":40,"_41":42,"_43":44,"_45":46,"_24":-5,"_47":48,"_49":130,"_51":-5,"_52":131,"_54":132},[10,10,10,10,10,10,10,10,10],["D",1694195743123],["D",1694196482212],"moduleNames",[135],"nomodules","searchParams",{"_138":8},"success","root","actionData","errors"]