llevo meses estudiando programacion, por lejos la persona que mas facilidad tiene para explicar cosas dificiles, este canal deberia tener minimo un millon de reproducciones, exijo una comunidad que apoye este tipo de informacion amena y simplificada sin dejar nada importante afuera, simplicidad y carisma al explicar, 10 de 10.
La verdad que coincido con todos los comentarios, este seÃąor tiene en don de la enseÃąanza, excelente muchas gracias, es un placer aprender asÃ. Dios te bendiga
No tenÃa ni idea de Fetch y me parece que tu vÃdeo estÃĄ muy bien hecho y anima a seguir aprendiendo. Es muy ÃĄgil y no te enredas en mil demostraciones de cuÃĄnto sabes, a diferencia de lo que hacen en otros vÃdeos que parecen mÃĄs un show de autopromociÃģn personal que un tutorial. El tuyo es claro y directo. IntentÃĐ encontrar la forma de enviarte un par de sugerencias (una sugerencia y un informe de error, mejor dicho). La primera es que no termino de saber cuÃĄndo "data" es variable y cuÃĄndo no. Me parece que no lo es siempre en tu cÃģdigo, sino que en algunos sitios forma parte de la sintaxis. Si no es asÃ, entonces es que no lo entendà muy bien, pero quizÃĄ fuera mejor que usaras distintos nombres que dejen claro cuÃĄndo es sintaxis y cuÃĄndo no.. Por ejemplo: ".then(data =>data.text())" y ".then(data=>[console.log(data)})". Aparecen con distinto color en el cÃģdigo, y supongo que es porque en algunos casos es variable y en otros es palabra reservada o parte de la sintaxis... Como ves, para un principante como yo, serÃa mejor usar cosas como "contenido", "datos", que no puedan hacer pensar que son parte del lenguaje de programaciÃģn, que suele ser de palabras inglesas. La otra apreciaciÃģn que querÃa hacerte es que en el vÃdeo dices que tu programa crea usuarios aletorios, pero debes decir aleAtorios, con la "a". QuerÃa decirte esto en un mensaje mÃĄs privado, pero no supe. Seguramente no tendrÃĄ remedio, pero creà mejor avisarte . Enhorabuena por tu canal.
Me gustan muchos tus videos, soy muy nuevo en esto, de echo... Estoy aprendiendo con vos, arranquÃĐ con HTML y Css desde 0, luego vi los FUNDAMENTOS y ahora estoy viendo JS desde 0, solo tengo una pequeÃąa critica, que puedes tomarla o no, se me complica mucho tener una continuidad de JS porque hay otras enseÃąanzas dentro de este curso y eso hace que me estÃĐ mareando un poco bastante!!! QuizÃĄs sea esa la mejor manera y me de cuenta mientras valla avanzando con este curso, pero por el momento me estÃĄ mareando mucho, por lo demÃĄs te admiro mucho!!!
si wn debiera enseÃąar en una u! Lo amÃĐ, hasta comprÃĐ sus cursos poh, solo por que me dà cuenta que el compadre explica bien y esa inversiÃģn valdrÃa la pena!
Para los que no les sirve fetch pueden usar una extension de chrome llamada web server for chrome, crea un "servidor" que se alimenta de la carpeta que seleccionen , corren y el cÃģdigo del video funciona perfecto
disculpa baje esa app para chrome pero tampoco me resulta, que molestia que no funcione nada de ningun tutorial donde le haga fetch a un archivo de la misma carpeta... todo ok con el link de las api publicas... si alguno consigue una forma de arreglar estos estaria agradecido.
Totalmente de acuerdo con "linuxexp", Aunque la explicaciÃģn de este "videotutorial es muy completa" que bueno tener uno de "Axios" que definitivamente es mejor alternativa que "fetch". Saludos desde Colombia.
Saludos al crack chileno de la enseÃąanza Web. Revisando el mÃĐtodo fetch y comparÃĄndolo con la librerÃa axios, aÚn fetch tiene un camino por recorrer. Estuve leyendo un artÃculo en Medium que tiene excelente informaciÃģn sobre esa comparaciÃģn.... medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5 Detalles de fetch que afloran: 1) Para obtener los datos en Json debe hacerse en 2 pasos como Ud lo hizo acÃĄ en su video, un 2do then para capturar la respuesta de la promesa retornada en el 1er then y asi obtener la data en Json 2) El manejo de errores en fetch da resultados inesperados. Como contraparte la libreria axios tiene su costo: Cargarla en tiempo de ejecuciÃģn... Asà que mi estimado profe, esperamos su vÃdeo: Consumiendo Apis con Axios
Estoy en el archivo index.html pero al darle clic derecho y abrir en live Server, me sale otra pagina (127.0.0.1:5500), en mi visual studio code tengo otros workspaces pero veo q tu solo tienes agregado puros archivos. Como le hago para que me abra en el live server el index.html.? por favor
Llegaste de vacaciones con todas las ganas del mundo jeje, me alegra que subas tanto contenido, muchÃsimas gracias por todo tu esfuerzo, una cosita: Ehnm me preguntaba si podÃas hacer un vÃdeo acerca de validaciones para formularios utilizando jqBootstrapValidation o si quieres hacer una serie de vÃdeos donde nos enseÃąes a validar formularios, te lo agradecerÃa muchiisisismo. un abrazo crack
Bluuweb ! primero que nada muchas gracias por tus aportes y por la humildad con la que compartes tus conocimientos, tengo una duda respecto a esto, a mi me funciona con cualquier tipo de comillas `` o " " o ' ' (`data` o "data " o 'data ' ) sabes por que??
Hola de una api en la web, quiero extaer el dato de que corresponde a la propiedad field1 (28.75 serÃa el dato) en el siguente json: {"channel":{"id":1550833,"name":"DIEGO2","description":"TEMPERATURA DE EQUIPO N2","latitude":"0.0","longitude":"0.0","field1":"Temp Entrada Aire 1","field2":"Temp Salida Aire 2","field3":"Temp Entrada Refr 3","field4":"Temp Evaporador 4","field5":"Temp Salida Evaporador 5","field6":"SALTO TERMICO AIRE","field7":"HUMEDAD RELATIVA","field8":"RECALENTAMIENTO","created_at":"2021-10-27T18:48:04Z","updated_at":"2021-11-19T16:06:33Z","last_entry_id":73905},"feeds":[{"created_at":"2022-09-19T18:34:04Z","entry_id":73905,"field1":"28.75"}]} por mas que lo intento, no consigo obtenerlo... Âŋcomo lo podrÃa obtener?
@@lnard214 No sÃģlo sirve para eso, intentando hacer los ejercicios que explica, cuando quieras linkear archivos como el txt, si no lo haces con live server te tirara error. Una de las condiciones que la consola pide es que la direcciÃģn contenga http o https para mostrar la acciÃģn. Como live server simula un servidor lo harÃĄ sin problemas, pero si abres directamente en el navegador no lo harÃĄ y saldrÃĄ el error que he dicho. O al menos eso es lo que me ha pasado al intentar y probarlo xD
hola amigo maestro!!!! excelente todo el contenido de tu canal. pregunta1 se habrÃĄ actualizado el javascript? ya que use contenido.innerHTML=data y anduvo prefecto al leer el txt, pregunta2 para encriptar el cÃģdigo para que los visitantes no nos vean la programaciÃģn en javascript se puede algo fÃĄcil? saludos y gracias
Hola que tal me encantas tus videos estoy aprendiendo bastante, una cosas tengo un problema con el navegador Chrome al presionar el boton no me toma porque no es http o https habra alguna forma de saltar esa condiciÃģn y muestre el mensaje?
Buenas al intentar pintar el texto en archivo txt me aparece este error "Pedido de origen cruzado bloqueado: La polÃtica de mismo origen no permite leer el recurso remoto en file:///C:/Users/Miguel/Documents/Programacion/Java01/texto.txt. (RazÃģn: pedido CORS no es http). TypeError: NetworkError when attempting to fetch resource." E intentado tambiÃĐn copiando y pegando el cÃģdigo como lo dejaste en la descripciÃģn y me sigue saliendo el mismo error.
Hola yo tambiÃĐn tuve ese problema, la soluciÃģn es tener instalado la extension Liver Server (en tu Visual Studio Code). Una vez instalado, le das click derecho a tu archivo html y luego en Abrir con Live Server(Open with Live Server). Se abrira el archivo con un puerto(en mi caso es el 5500) y listo . (copie y pegue otro comentario que me salvo a mi jajaj)
Hola muchas gracias por tus videos, me han ayudado muchisimo explicas muy bien parce. Tengo una duda. Porque cuando ejecuto por primera vez el boton me llama el archivo de texto con "hola soy un archivo con fetch" pero cuando modifico el contenido del archivo, me sigue trayendo la informaciÃģn inicional. (Corro el documento html en apache, trate de apagar y reiniciar el servidor pero tampoco funciono). De nuevo muchas gracias.
por que me sale el error fecth API cannot load URL scheme muts be "http" or "https" for CORS request ? ejecuto desde chrome el index, hay que instalar algo o es necesario el servidor que tu tienes ? pueden ayudarme ..
no tienes el server activado. anda a visual studio code, ve a extensiones y descarga live server o mejor pon en youtube bluuweb visual studio code 2 y te explicara como ocuparlo
Hola. no se ejecuta esa funciÃģn. Me arroja el siguiente error. Fetch API cannot load file:///C:/xampp/htdocs/api-usuarios/texto.txt. URL scheme must be "http" or "https" for CORS request. BusquÃĐ en todos los foros posibles, incluido Stack Overflow, y nada. ÂŋQuÃĐ estÃĄ ocurriendo? Muchas gracias.
A mi me arrojaba el mismo error, creo que a muchos otros tambien. No lo he solucionado pero notÃĐ que cuando intento leer datos de una api externa me funciona perfecto. A lo mejor te faltÃģ configurar algo del Live Server.
me tiraba el mismo error y cuando active las extenciones me funciono perfecto. Tengo instaladas Beautify, ESLint, HTML CSS Support, HTML Snippets, JavaScript (ES6) code snippets, Live Server, Sass y vscode-icons las mismas son recomendadas por Bluuweb, Saludos
No se si respondas a dia de hoy, pero hago igualmente y me sale este error: fetch API cannot load file:///C:/Users/Jugla/Documents/JS/texto.txt. URL scheme must be "http" or "https" for CORS request. traer @ codigo.js:3. onclick @ index.html:16 codigo.js:3 Uncaught (in promise) TypeError: Failed to fetch at traer (codigo.js:3) at HTMLButtonElement.onclick (index.html:16) descargue el archivo que creo el profesor pensando que depronto fue un fallo mio, revise era lo mismo y no sirvio con el del profe.
Buenas, si yo quiero utilizar como decÃs un archivo .js para todo lo que respecta a javascript y no tirarlo en el mismo cÃģdigo de html, como hago para utilizar el document.??? Porque no logro encontrar la forma de que el mismo haga referencia al archivo html donde deberÃa buscar. Gracias.
Saludos, no sÃĐ si ya lograron resolver el problema, en alguna parte del video Ignacio menciona que debe estar corriendo Live Server, esta es una extensiÃģn de Visual Studio Code, se instala y luego pones a ejecutar el servidor, luego abres la pÃĄgina y deberÃa funcionar.
@Kurt acuÃąa perez tambien hizo un comentario al respecto. "no tienes el server activado. anda a visual studio code, ve a extensiones y descarga live server o mejor pon en youtube bluuweb visual studio code 2 y te explicara como ocuparlo"
@@AlavergaJoseDirectos te aparece el error en consola? Lo solucione abriendo la pagina desde un servidor para que me agregara el http, utilicÃĐ el live server en vs code
oscar arbey herrera moreno en el teclado debe de haber una tecla que tenga esas comillas , si mal no recuerdo estÃĄn por donde las teclas de las { } . SÃģlo que tienes que usar ALT + la tecla o ctrl + alt + la tecla. Espero que se entienda.
Joel Miguel Valente No, un objeto es literalmente un conjunto de atributos, caracterÃsticas y propiedades de una entidad en javascript, y JSON es un conjunto de objetos que permite ordenarlos de una forma mÃĄs simple y bella. Saludos.
Gracias.. puedes enseÃąar a conectar api de criptomonedas como bittrex...
6 āļāļĩāļāļĩāđāđāļĨāđāļ§
Hola buenas, excelentes videos, tengo ciertas dudas, el "data" se llama asà porque es una palabra reservada o le podemos dar cualquier otro nombre, ya que es confuso que: data => data.text(); lo veo un poco raro y por eso pregunto, luego otra duda es, que pasaria si pongo comillas simples ( ' ' ) en vez de las comillas especiales ( Âī Âī ), porque no entiendo el por quÃĐ en este caso hay que usar esas comillas especiales. Gracias de antemano.
con respecto a la pregunta 1; no es una palabra reservada, realmente esa linea es la que hace la promesa de respuesta; yo personalmente uso la palabra "response" para darle mas semÃĄntica. con respecto a la pregunta 2; las comillas; no son estÃĄs ( Âī Âī ), sino ÃĐstas ( ` ` ), y es la forma en que ES6 agrega algo que en otros lenguajes llaman "InterpolaciÃģn" o "string interpolation"; javascript lo llama plantillas de cadena de texto o "string templates". ver: ( developer.mozilla.org/es/docs/Web/JavaScript/Referencia/template_strings ).
var contenido = document.querySelector('#contenido') function traer() { fetch('texto.txt') .then(data => data.txt()) .then(data=>{ console.log(data) }) } No veo el error
inclusive master, dejo este manual por aqui esta muy bueno...Leelo desarrolloweb.com/manuales/manual-de-ecmascript-6.html#capitulos196 , podras descargar el manual, me lo e leido todo y entendi la mayoria de tus videos como sin nada.
Holaa esta muy bueno el tutorial , pero me hw quedado estancado esta parte: Hello, world!
Obtener
var contenido= document.querySelector('#contenido'); function traer(){ fetch('texto.txt').then(data => data.text()).then(data =>{ console.log(data) }) /*contenido.innerHTML =`fasaafadasda`*/ }
Linea 49:Obtener Linea 55: fetch('texto.txt').then(data => data.text()).then(data =>{ y en la consola del navegador dice el siguiente error: index.html:55 Fetch API cannot load file:///C:/Users/LI/Documents/GitHub/Proyectotienda/texto.txt. URL scheme must be "http" or "https" for CORS request. traer @ index.html:55 onclick @ index.html:49 index.html:55 Uncaught (in promise) TypeError: Failed to fetch at traer (index.html:55) at HTMLButtonElement.onclick (index.html:49) de antemano gracias!!! :/, creo que el error es por que me falta levantar el servidor, como hiciste eso?
Hola, descarga el plugin de web server for chrome. 1) Seleccionas la carpeta donde esta el archivo 2) Marcas las siguientes casillas: Run in background , also on internet, accesible on local network , 3) Picas en show advanced options y seleccionas : Set cors headers, listen on IPV6 , plan , allow file upload, verbose logging 4) Copias la segunda web url que te da el pluggin y la pegas en el fetch
Muy buena explicaciÃģn!!, solo me da un problema si alguien me puede ayudar, al realizar el ejercicio del video, en la consola me aparecen dos problemas 1š) Solicitud desde otro origen bloqueada: la polÃtica de mismo origen impide leer el recurso remoto en file:///Users/javierruiz/Desktop/proyecto_web/cursos_web/bluuweb/textos/texto.txt (razÃģn: la solicitud CORS no es http). 2š) TypeError: NetworkError when attempting to fetch resource. llevo varios dÃas intentando resolver y no puedo, tengo un mac, y no practico en local SOY MUY NOVATO EN ESTO DE LA PROGRAMACIÃN GRACIAS
Hola yo tambiÃĐn tuve ese problema, la soluciÃģn es tener instalado la extension Liver Server (en tu Visual Studio Code). Una vez instalado, le das click derecho a tu archivo html y luego en Abrir con Live Server(Open with Live Server). Se abrira el archivo con un puerto(en mi caso es el 5500) y listo .
![Async & Await en Javascript con Fetch y Axios [EspaÃąol]](http://i.ytimg.com/vi/stiPdlSkTOI/mqdefault.jpg)
Mae, que bÃĄrbaro, su capacidad de simplificar un tema un tanto complicado es espectacular, sos un dios de la pedagogÃa. Inmensamente agradecido.
llevo meses estudiando programacion, por lejos la persona que mas facilidad tiene para explicar cosas dificiles, este canal deberia tener minimo un millon de reproducciones, exijo una comunidad que apoye este tipo de informacion amena y simplificada sin dejar nada importante afuera, simplicidad y carisma al explicar, 10 de 10.
sigo instruyÃĐndome para ocupar vue de tus videos, gracias por todo el material que das
Tenes una vocaciÃģn de docencia increÃble. Muchas gracias!
La verdad que coincido con todos los comentarios, este seÃąor tiene en don de la enseÃąanza, excelente muchas gracias, es un placer aprender asÃ. Dios te bendiga
Un genio el profe, mas claro imposible!!!
Explicas muy bien amigo! gracias
Bro lo que me estan guiando tus videos. muchas gracias por ayudarnos.
No tenÃa ni idea de Fetch y me parece que tu vÃdeo estÃĄ muy bien hecho y anima a seguir aprendiendo. Es muy ÃĄgil y no te enredas en mil demostraciones de cuÃĄnto sabes, a diferencia de lo que hacen en otros vÃdeos que parecen mÃĄs un show de autopromociÃģn personal que un tutorial. El tuyo es claro y directo. IntentÃĐ encontrar la forma de enviarte un par de sugerencias (una sugerencia y un informe de error, mejor dicho). La primera es que no termino de saber cuÃĄndo "data" es variable y cuÃĄndo no. Me parece que no lo es siempre en tu cÃģdigo, sino que en algunos sitios forma parte de la sintaxis. Si no es asÃ, entonces es que no lo entendà muy bien, pero quizÃĄ fuera mejor que usaras distintos nombres que dejen claro cuÃĄndo es sintaxis y cuÃĄndo no.. Por ejemplo: ".then(data =>data.text())" y ".then(data=>[console.log(data)})". Aparecen con distinto color en el cÃģdigo, y supongo que es porque en algunos casos es variable y en otros es palabra reservada o parte de la sintaxis... Como ves, para un principante como yo, serÃa mejor usar cosas como "contenido", "datos", que no puedan hacer pensar que son parte del lenguaje de programaciÃģn, que suele ser de palabras inglesas.
La otra apreciaciÃģn que querÃa hacerte es que en el vÃdeo dices que tu programa crea usuarios aletorios, pero debes decir aleAtorios, con la "a". QuerÃa decirte esto en un mensaje mÃĄs privado, pero no supe. Seguramente no tendrÃĄ remedio, pero creà mejor avisarte .
Enhorabuena por tu canal.
Este man si que explica de lo mejor. Imposible no entenderle, todo un crack sigue asi!!!
Preciso, que manera de enseÃąar tan sencilla y prÃĄctica.
Me gustan muchos tus videos, soy muy nuevo en esto, de echo... Estoy aprendiendo con vos, arranquÃĐ con HTML y Css desde 0, luego vi los FUNDAMENTOS y ahora estoy viendo JS desde 0, solo tengo una pequeÃąa critica, que puedes tomarla o no, se me complica mucho tener una continuidad de JS porque hay otras enseÃąanzas dentro de este curso y eso hace que me estÃĐ mareando un poco bastante!!! QuizÃĄs sea esa la mejor manera y me de cuenta mientras valla avanzando con este curso, pero por el momento me estÃĄ mareando mucho, por lo demÃĄs te admiro mucho!!!
si wn debiera enseÃąar en una u! Lo amÃĐ, hasta comprÃĐ sus cursos poh, solo por que me dà cuenta que el compadre explica bien y esa inversiÃģn valdrÃa la pena!
Pero por la chucha que maravilla seÃąor.
Muchas gracias don Blu.
Excelente hermano, que manera tan sencilla y practica de explicar como siempre. Mil gracias por su gran aporte!!
Amigo, excelente explicaciÃģn. Vale la pena ver sus videos. Felicitaciones
Wow, vaya manera tan clara de explicar. Ya activÃĐ las notificaciones; espero el siguiente video :)
Para los que no les sirve fetch pueden usar una extension de chrome llamada web server for chrome, crea un "servidor" que se alimenta de la carpeta que seleccionen , corren y el cÃģdigo del video funciona perfecto
disculpa baje esa app para chrome pero tampoco me resulta, que molestia que no funcione nada de ningun tutorial donde le haga fetch a un archivo de la misma carpeta... todo ok con el link de las api publicas... si alguno consigue una forma de arreglar estos estaria agradecido.
@@eduardocuadra6681 tengo el mismo problema eduardo no puedo hacer fech al archivo de la misma carpeta :/ algÚn heroe que nos pueda ayudar
Excelente Ignacio tus videos. Muchas Gracias por compartirlo
Totalmente de acuerdo con "linuxexp", Aunque la explicaciÃģn de este "videotutorial es muy completa" que bueno tener uno de "Axios" que definitivamente es mejor alternativa que "fetch". Saludos desde Colombia.
Gracias por compartir tus conocimientos!
excelente explicaciÃģn, despuÃĐs de este tutorial se puede leer cualquier manual y entenderlo ademÃĄs.. gracias!
Gracias por tus comentarios! Saludos MarÃa!
Saludos al crack chileno de la enseÃąanza Web.
Revisando el mÃĐtodo fetch y comparÃĄndolo con la librerÃa axios, aÚn fetch tiene un camino por recorrer.
Estuve leyendo un artÃculo en Medium que tiene excelente informaciÃģn sobre esa comparaciÃģn....
medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5
Detalles de fetch que afloran:
1) Para obtener los datos en Json debe hacerse en 2 pasos como Ud lo hizo acÃĄ en su video, un 2do then para capturar la respuesta de la promesa retornada en el 1er then y asi obtener la data en Json
2) El manejo de errores en fetch da resultados inesperados.
Como contraparte la libreria axios tiene su costo: Cargarla en tiempo de ejecuciÃģn...
Asà que mi estimado profe, esperamos su vÃdeo: Consumiendo Apis con Axios
Estoy en el archivo index.html pero al darle clic derecho y abrir en live Server, me sale otra pagina (127.0.0.1:5500), en mi visual studio code tengo otros workspaces pero veo q tu solo tienes agregado puros archivos. Como le hago para que me abra en el live server el index.html.? por favor
Muchas Gracias, en serio me ayudaste un montÃģn!!
Llegaste de vacaciones con todas las ganas del mundo jeje, me alegra que subas tanto contenido, muchÃsimas gracias por todo tu esfuerzo, una cosita: Ehnm me preguntaba si podÃas hacer un vÃdeo acerca de validaciones para formularios utilizando jqBootstrapValidation o si quieres hacer una serie de vÃdeos donde nos enseÃąes a validar formularios, te lo agradecerÃa muchiisisismo. un abrazo crack
Bluuweb ! primero que nada muchas gracias por tus aportes y por la humildad con la que compartes tus conocimientos, tengo una duda respecto a esto, a mi me funciona con cualquier tipo de comillas `` o " " o ' ' (`data` o "data " o 'data ' ) sabes por que??
Hola Carlos Arturo, podrÃas decirme el nombre de la canciÃģn que usabas en la apertura de tus videos?
genio total! re bien explicado
Hola de una api en la web, quiero extaer el dato de que corresponde a la propiedad field1 (28.75 serÃa el dato) en el siguente json:
{"channel":{"id":1550833,"name":"DIEGO2","description":"TEMPERATURA DE EQUIPO N2","latitude":"0.0","longitude":"0.0","field1":"Temp Entrada Aire 1","field2":"Temp Salida Aire 2","field3":"Temp Entrada Refr 3","field4":"Temp Evaporador 4","field5":"Temp Salida Evaporador 5","field6":"SALTO TERMICO AIRE","field7":"HUMEDAD RELATIVA","field8":"RECALENTAMIENTO","created_at":"2021-10-27T18:48:04Z","updated_at":"2021-11-19T16:06:33Z","last_entry_id":73905},"feeds":[{"created_at":"2022-09-19T18:34:04Z","entry_id":73905,"field1":"28.75"}]}
por mas que lo intento, no consigo obtenerlo... Âŋcomo lo podrÃa obtener?
Hola groso! Vengo siguiendo la playlist de JS, te faltÃģ explicar un poco mas lo de Live Server. Saludos!
live server es una extension visual studio code la busca y la instala es para que no tenga que actualizar la pagina
@@lnard214 No sÃģlo sirve para eso, intentando hacer los ejercicios que explica, cuando quieras linkear archivos como el txt, si no lo haces con live server te tirara error. Una de las condiciones que la consola pide es que la direcciÃģn contenga http o https para mostrar la acciÃģn. Como live server simula un servidor lo harÃĄ sin problemas, pero si abres directamente en el navegador no lo harÃĄ y saldrÃĄ el error que he dicho. O al menos eso es lo que me ha pasado al intentar y probarlo xD
@@Heliz14 Gracias por la explicaciÃģn!
hola amigo maestro!!!! excelente todo el contenido de tu canal. pregunta1 se habrÃĄ actualizado el javascript? ya que use contenido.innerHTML=data y anduvo prefecto al leer el txt, pregunta2 para encriptar el cÃģdigo para que los visitantes no nos vean la programaciÃģn en javascript se puede algo fÃĄcil? saludos y gracias
Hola que tal me encantas tus videos estoy aprendiendo bastante, una cosas tengo un problema con el navegador Chrome al presionar el boton no me toma porque no es http o https habra alguna forma de saltar esa condiciÃģn y muestre el mensaje?
Pero que tenÃĐs? La bola de cristal? Le venÃs pegando a todo lo que necesito jajaa q loco! Abrazo y muchas gracias shileno!
hola, cuando hago la funcion me tira un error que dice "traer is not defined", como puedo solucionarlo?
8:16 Hola! de cual video o lista de reproducciÃģn hablas? Quisiera el link para verlo porfa. Gracias
th-cam.com/video/8ibcDy02FAw/w-d-xo.html
Se que hace un aÃąo lo pediste pero la duda de uno es la de otro tambien
Me apunto! en estos dias lo voy a tomar!
Hola no has hecho el curso de FECH en tu web.
Buenas al intentar pintar el texto en archivo txt me aparece este error
"Pedido de origen cruzado bloqueado: La polÃtica de mismo origen no permite leer el recurso remoto en file:///C:/Users/Miguel/Documents/Programacion/Java01/texto.txt. (RazÃģn: pedido CORS no es http).
TypeError: NetworkError when attempting to fetch resource."
E intentado tambiÃĐn copiando y pegando el cÃģdigo como lo dejaste en la descripciÃģn y me sigue saliendo el mismo error.
Hola yo tambiÃĐn tuve ese problema, la soluciÃģn es tener instalado la extension Liver Server (en tu Visual Studio Code). Una vez instalado, le das click derecho a tu archivo html y luego en Abrir con Live Server(Open with Live Server). Se abrira el archivo con un puerto(en mi caso es el 5500) y listo . (copie y pegue otro comentario que me salvo a mi jajaj)
Como se puede hacer para interpretar bien los acentos cuando se hace un fetch a un archivo txt?
Excelente video, me ha ayudado mucho. Pero si quiero mostrar mas de un texto con viÃąetas, Âŋcomo puedo hacer?
Pudieras hacer algo con fetch junto a modales..
SerÃa genial
Hola muchas gracias por tus videos, me han ayudado muchisimo explicas muy bien parce. Tengo una duda. Porque cuando ejecuto por primera vez el boton me llama el archivo de texto con "hola soy un archivo con fetch" pero cuando modifico el contenido del archivo, me sigue trayendo la informaciÃģn inicional. (Corro el documento html en apache, trate de apagar y reiniciar el servidor pero tampoco funciono). De nuevo muchas gracias.
entons con este metodo puedo ocultar una pag web? y darle estilo y todo y nadie ve el codigo
por que me sale el error fecth API cannot load URL scheme muts be "http" or "https" for CORS request ? ejecuto desde chrome el index, hay que instalar algo o es necesario el servidor que tu tienes ? pueden ayudarme ..
no tienes el server activado. anda a visual studio code, ve a extensiones y descarga live server o mejor pon en youtube bluuweb visual studio code 2 y te explicara como ocuparlo
@@kurtacunaperez670 gracias
si o si hay que usar live server si no no funcionarÃĄ el traer un archivo de texto local
Hola. no se ejecuta esa funciÃģn. Me arroja el siguiente error.
Fetch API cannot load file:///C:/xampp/htdocs/api-usuarios/texto.txt. URL scheme must be "http" or "https" for CORS request.
BusquÃĐ en todos los foros posibles, incluido Stack Overflow, y nada.
ÂŋQuÃĐ estÃĄ ocurriendo?
Muchas gracias.
A mi me arrojaba el mismo error, creo que a muchos otros tambien. No lo he solucionado pero notÃĐ que cuando intento leer datos de una api externa me funciona perfecto. A lo mejor te faltÃģ configurar algo del Live Server.
me tiraba el mismo error y cuando active las extenciones me funciono perfecto.
Tengo instaladas Beautify, ESLint, HTML CSS Support, HTML Snippets, JavaScript (ES6) code snippets, Live Server, Sass y vscode-icons
las mismas son recomendadas por Bluuweb, Saludos
ParabÃĐns!!! Excelente explicaçÃĢo e exemplos prÃĄticos e reais!!!
voce fala muito ben
@@ricardomontalvan8533 kkkkk
inpresionante tu cutso! ahora estoy con un problema! no carga la pagina de bootstrap
weon seco, la cagaste. He visto demasiado videos tutoriales y al Único que le puedo entender es a ti. crack
Sos el mejor
exelente... que bueno ya que no hay tutoriales a fondo de fetch api
Si es verdad... se vienen otras secciones :) Saludos
No se si respondas a dia de hoy, pero hago igualmente y me sale este error:
fetch API cannot load file:///C:/Users/Jugla/Documents/JS/texto.txt. URL scheme must be "http" or "https" for CORS request.
traer @ codigo.js:3.
onclick @ index.html:16
codigo.js:3 Uncaught (in promise) TypeError: Failed to fetch
at traer (codigo.js:3)
at HTMLButtonElement.onclick (index.html:16)
descargue el archivo que creo el profesor pensando que depronto fue un fallo mio, revise era lo mismo y no sirvio con el del profe.
Si el live Server no esta corriendo te va dar error
Que fuentes utilizas?
Bueno el tutorial, te pasaste, muchas gracias!!!
No me funciona los del txt. InstalÃĐ Xammp, no sirviÃģ, instale la extensiÃģn de Chrome OK 2000, tampoco. No me funciona fetch en Local
Muestra tu cÃģdigo para ayudarte.
Debes activar el live server primero
@@joelfranciscovaldezaquino9014 como hago eso. tengo poco conocimiento del tema.
var contenedor=document.getElementById('contenido');
var botontraer=document.getElementById('boton');
function traer (){
fetch('texto.txt')
.then(data => data.text())
.then(data=>{
console.log(data)
contenedor.innerHTML='${data}'
})
}
botontraer.onclick=traer;
@@pedrogonzalezrivear8625 Live server es una extension en Visual Studio Code que te muestra en real time la ejecucion en el local.
simplemente gracias por existir! (L)
gracias!
Buenas, si yo quiero utilizar como decÃs un archivo .js para todo lo que respecta a javascript y no tirarlo en el mismo cÃģdigo de html, como hago para utilizar el document.??? Porque no logro encontrar la forma de que el mismo haga referencia al archivo html donde deberÃa buscar. Gracias.
Me pasaba lo mismo, solo pase la declaraciÃģn de contenido dentro de la funciÃģn y listo
Hola. Sabes que instalÃĐ todas las extensiones que mostraste, pero el .html no me lo muestra con esos colores. QuÃĐ puede ser? muchas gracias
Eso es el Tema de Colores de VS Code. El que estÃĄ usando se llama Monokai (creo), el mimo que trae Sublime.
Saludos desde Mexicali, MÃĐxico
Saludos MÃĐxico! y Leopoldo :)
Sigues poniendo a nuestro alcance muy valiosas herramientas, gracias
exelente esplicacion
hola. me sale Fetch API cannot load. en el que estoy haciendo y en los archivos que dejaste. ayuda!!!!
me sale lo mismo... ya lo has solucionado ???
Lo mismo x3
Saludos, no sÃĐ si ya lograron resolver el problema, en alguna parte del video Ignacio menciona que debe estar corriendo Live Server, esta es una extensiÃģn de Visual Studio Code, se instala y luego pones a ejecutar el servidor, luego abres la pÃĄgina y deberÃa funcionar.
@Kurt acuÃąa perez tambien hizo un comentario al respecto. "no tienes el server activado. anda a visual studio code, ve a extensiones y descarga live server o mejor pon en youtube bluuweb visual studio code 2 y te explicara como ocuparlo"
@@heimysalvarado6274 No es un tema de servidor amigo !!
tengo un problema con el fecth no me carga o no me indentifica el archivo que le mando
si estas usando el navegador Microsoft Edge, data no es compatible
developer.mozilla.org/es/docs/Web/API/Fetch_API
@@micromacanudo es que creo que es algo del php
@@AlavergaJoseDirectos te aparece el error en consola? Lo solucione abriendo la pagina desde un servidor para que me agregara el http, utilicÃĐ el live server en vs code
tengo que estar conectado a un servidor local para que el fetch funcione ?
si
Sale TypeError: contenido is null, se habrÃĄ actualizado algo?
revise bien como tienes escrito el id, si es necesario cÃĄmbialo. El error es que no se esta identificando el objeto por el id asignado.
parcero una pregunta como se sacan esas comillas especiales?? excelentes tutoriales gracias
oscar arbey herrera moreno en el teclado debe de haber una tecla que tenga esas comillas , si mal no recuerdo estÃĄn por donde las teclas de las { } . SÃģlo que tienes que usar ALT + la tecla o ctrl + alt + la tecla. Espero que se entienda.
Felix Mtz gracias!!
oscar arbey herrera moreno No hay de que !
@@felix9368 gracias amigo no lograba conseguir como hacer eso con la variable, las habÃa confundido con comillas simples jajaja
@@floppy6264 no es nada
TENGO QUE APRENDER PRIMERO LOS CALLBAKS ANTES DE IR POR LAS PROMESAS EN JAVASCRIPT ?? :/ :/
Gracias Crack!!
Pregunta: ÂŋObjeto no es lo mismo que JSON? o como java / javascript
Joel Miguel Valente No, un objeto es literalmente un conjunto de atributos, caracterÃsticas y propiedades de una entidad en javascript, y JSON es un conjunto de objetos que permite ordenarlos de una forma mÃĄs simple y bella. Saludos.
Ah gracias por responderme!
Joel Miguel Valente No hay de que , espero que se haya entendido la respuesta.
Y con archivo aparte de JS no me funciona esto, porque tienen esa manÃa de no hacer las cosas como son usadas en el mundo real?
HOLA no me funciona en un JS externo por que sera??
Me pasaba lo mismo, solo pase la declaraciÃģn de contenido dentro de la funciÃģn y listo
Gracias.. puedes enseÃąar a conectar api de criptomonedas como bittrex...
Hola buenas, excelentes videos, tengo ciertas dudas, el "data" se llama asà porque es una palabra reservada o le podemos dar cualquier otro nombre, ya que es confuso que: data => data.text(); lo veo un poco raro y por eso pregunto, luego otra duda es, que pasaria si pongo comillas simples ( ' ' ) en vez de las comillas especiales ( Âī Âī ), porque no entiendo el por quÃĐ en este caso hay que usar esas comillas especiales. Gracias de antemano.
con respecto a la pregunta 1; no es una palabra reservada, realmente esa linea es la que hace la promesa de respuesta; yo personalmente uso la palabra "response" para darle mas semÃĄntica.
con respecto a la pregunta 2; las comillas; no son estÃĄs ( Âī Âī ), sino ÃĐstas ( ` ` ), y es la forma en que ES6 agrega algo que en otros lenguajes llaman "InterpolaciÃģn" o "string interpolation"; javascript lo llama plantillas de cadena de texto o "string templates". ver: ( developer.mozilla.org/es/docs/Web/JavaScript/Referencia/template_strings ).
var contenido = document.querySelector('#contenido')
function traer() {
fetch('texto.txt')
.then(data => data.txt())
.then(data=>{
console.log(data)
})
}
No veo el error
inclusive master, dejo este manual por aqui esta muy bueno...Leelo desarrolloweb.com/manuales/manual-de-ecmascript-6.html#capitulos196 , podras descargar el manual, me lo e leido todo y entendi la mayoria de tus videos como sin nada.
como se escriben esas comillas?
es la tilde
Deberias de tener un curso en Udemy, pagaria de buena gana por el.Animate
Holaa esta muy bueno el tutorial , pero me hw quedado estancado esta parte:
Hello, world!
Obtener
var contenido= document.querySelector('#contenido');
function traer(){
fetch('texto.txt').then(data => data.text()).then(data =>{
console.log(data)
})
/*contenido.innerHTML =`fasaafadasda`*/
}
Linea 49:Obtener
Linea 55: fetch('texto.txt').then(data => data.text()).then(data =>{
y en la consola del navegador dice el siguiente error: index.html:55 Fetch API cannot load file:///C:/Users/LI/Documents/GitHub/Proyectotienda/texto.txt. URL scheme must be "http" or "https" for CORS request.
traer @ index.html:55
onclick @ index.html:49
index.html:55 Uncaught (in promise) TypeError: Failed to fetch
at traer (index.html:55)
at HTMLButtonElement.onclick (index.html:49)
de antemano gracias!!! :/, creo que el error es por que me falta levantar el servidor, como hiciste eso?
Hola, descarga el plugin de web server for chrome.
1) Seleccionas la carpeta donde esta el archivo
2) Marcas las siguientes casillas: Run in background , also on internet, accesible on local network ,
3) Picas en show advanced options y seleccionas : Set cors headers, listen on IPV6 , plan , allow file upload, verbose logging
4) Copias la segunda web url que te da el pluggin y la pegas en el fetch
@@fernandomgo5616 cual es es plugin .... yo no lo encuentro
no usen onclick en etiquetas html eso ya no se usa mas para JS solo captures el id y usen eventos....
las comillas especiales se ponen con atl+96 :D
heroe
Gracias amigo.
Sos un heroe me salvaste
Like 550, muy buen video
Para los que les sale error deben poner el codigo en su servidor.
Cual es el link para la configuraciÃģn del server?
pone en el buscador de youtube 'bluuweb visual studio code 2'
aqui hay algo que me resultÃģ.
developer.mozilla.org/es/docs/Learn/Common_questions/set_up_a_local_testing_server
Desde el mismo visual studio code, vas a extensiones, buscas "live server" lo instalas y listo.
Muy buena explicaciÃģn!!, solo me da un problema si alguien me puede ayudar, al realizar el ejercicio del video, en la consola me aparecen dos problemas
1š) Solicitud desde otro origen bloqueada: la polÃtica de mismo origen impide leer el recurso remoto en file:///Users/javierruiz/Desktop/proyecto_web/cursos_web/bluuweb/textos/texto.txt (razÃģn: la solicitud CORS no es http).
2š) TypeError: NetworkError when attempting to fetch resource.
llevo varios dÃas intentando resolver y no puedo,
tengo un mac, y no practico en local
SOY MUY NOVATO EN ESTO DE LA PROGRAMACIÃN
GRACIAS
Hola yo tambiÃĐn tuve ese problema, la soluciÃģn es tener instalado la extension Liver Server (en tu Visual Studio Code). Una vez instalado, le das click derecho a tu archivo html y luego en Abrir con Live Server(Open with Live Server). Se abrira el archivo con un puerto(en mi caso es el 5500) y listo .
Cual es el link de live server?
si estÃĄs usando Visual Studio Code, desde allà mismo puedes instalarlo buscando desde las extensiones.
Excelente, pero ojala al explicar reemplazes la palabra "Esta cosa" por su nombre como esta funciÃģn, este parrafo etc.
nadie vino a buscar las comillas especiales xD
Hice el siguiente ejercicio, muestro el script:
document.addEventListener('DOMContentLoaded', () => {
const $contenido = document.querySelector('#contenido'),
$btn = document.querySelector('button'),
url = 'pag1.html'
function traer() {
fetch(url)
.then(data => data.text())
.then(data => {
$contenido.innerHTML = `${data}`
})
.catch(error=>{
$contenido.innerHTML = `${error}`
})
} //traer
$btn.addEventListener('click', traer)
}) //DOMContentLoaded
Y ese es el archivo pag1.html:
p{ color:green; font-size: 2em; font-style:italic; font-weight: bold;}
Hola Mundo Como realizo un 'Single Page Application' (SPA) y luego PWA (Aplicaciones para escritorio, celulares y tablets)? Alguien puede ayudarme, gracias.
Link para live server en Visual Studio Code goo.gl/B7vc3C
EXCELENTE, solo que al principio bien razista la api de usuarios xD, aparece una mujer negra y dice MONA xD
Es como ver un vÃdeo "PORNO" ðĪĢ