Curso JavaScript: 63. DOM: Atributos y Data-Attributes -
En este video te enseño los conceptos de atributos y data-attributes en el #API del #DOM de #JavaScript.
💛 Aprende JavaScript aprendejavascript.org/
📖 Mis notas sobre JavaScript jonmircha.com/javascript
📖 Mis notas sobre ECMAScript jonmircha.com/ecmascript
📖 Mis notas sobre JavaScript Asíncrono jonmircha.com/javascript-asin...
📖 Mis notas sobre JSON jonmircha.com/json
📖 Mis notas sobre el DOM jonmircha.com/dom
📦 Códigos: github.com/jonmircha/youtube-js
🔔 Suscríbete al canal kzread.info?sub_con... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/jonmircha
📫 Suscríbete a mi lista de correo tinyletter.com/jonmircha/
Пікірлер: 186
viendo codigos siempre me volaba la cabeza tratar de entender por que anteponian el signo $ y hoy rapidito y sencillo el profe explica por que y para que min 12:01 , aun profundiza diciendo que no es hoy por hoy referencia de jquery sino que hoy en dia tiene otro uso, esa informacion asi de concreta sencilla no la habia encontrado en ningun lado. gracias🙌 profe por enseñar asi de contundente 😎
@jonmircha
3 жыл бұрын
😉👌
CLARO QUE APORTA VALOR, tanto así que me volvió a dar fé en que SI PUEDO construir mi carrera como desarrollador :)
@jonmircha
3 жыл бұрын
;)
Este tema lo manejaba pero siempre explicas cosas q desconocia, lo del $ por ejemplo en elementos del DOM. Estoy aprendiendo mucho, gracias!! y ojala sigas con uno de React despues de esto, es asombroso!!
@jonmircha
4 жыл бұрын
De nada, comparte para llegar a más gente :)
@nestorperaltavargas227
4 жыл бұрын
@@jonmircha ¿si se viene el de React profe?
sept 11 1969**Nov 9 2023 gracias excelente curso felicidades John Mircha
@jonmircha
7 ай бұрын
👋🏻😉
Muchas gracias jon. Que tengas un buen día.
@jonmircha
Жыл бұрын
👋🏻😉
Estaba en un curso de asincronismo en Platzi y venía buscando un tutorial del objeto XMLHttpRequest pero me quedé en todo tu curso, hay cosas que Platzi no maneja a profundidad y tú si y que son importantes de entender, me hiciste ver que aún me faltaban conceptos para poder seguir adelante con mi preparación. Gracias Jon.
@jonmircha
Жыл бұрын
😉👋🏻
🧙♂Muchas gracias, muy buen curso!!!
@jonmircha
Жыл бұрын
Gracias por comentar
Si me ha pasado ver variables con $ como prefijo, ahora entiendo a que se refiere , gracias profesor por los ticks
@jonmircha
2 ай бұрын
👋🏻😉
function tituloDinamico(){ let i = 0 setInterval(() => { i++ document.title = `DOM - Cambio nº ${i}` }, 1000); } tituloDinamico() Prueben ese código!! Gracias Jon, me está encantando toda esta parte del DOM. Veo que hay mucho potencial con esto, espero llegar lejos. Saludos!!
@leandrodipardo1725
10 ай бұрын
Hola, porque funciona ese bucle si no esta autoejecutandose de vuelta ni es un for
@leandrodipardo1725
10 ай бұрын
Ah es un set interval, ya entendi
Hola Jon, no te imaginas lo que me está sirviendo este curso. Llevaba tiempo dando saltos de un curso a otro y en este es en el que realmente estoy aprendiendo. Lo he compartido por varios grupos de telegram y a amigos que están estudiando programación como yo. Muchas gracias y un saludo!
@jonmircha
2 жыл бұрын
😃👍🏻
Fantástico! aprendi mucho! explicas muy bien!
@jonmircha
2 жыл бұрын
Gracias por comentar
Gracias! bastante esclarecedor fue esta clase para mi.
@jonmircha
Жыл бұрын
Con mucho gusto
Esa del $ en la declaración no me la sabia, buen video
@jonmircha
Жыл бұрын
👋🏻😉
JonMircha = Renovador de Fe! jejej gracias Jon!!!!! Sube uno de React Jon please! saludos!
Gracias !!!! Todo aquel que ande por aqui, no dude que la CALIDAD de este curso es espectacular!
@jonmircha
7 ай бұрын
👋🏻😉
Gracias profe!
Jon sos una bestia, el manejo del DOM era lo que me faltaba para ser completo en JS.
@jonmircha
Жыл бұрын
😉👍🏻
mcuhas gracias , tus videos me ayudan mas que mis clases regulares XD
@jonmircha
2 жыл бұрын
Con mucho gusto
Al final del vídeo, para remover el data-id, poniéndolo dentro de en un console, lo marca como undefined, más bien es declararlo con la pura variable, por si nota alguien que no le funciona.
gracias por enseñar las buenas practicas, $gracias $gracias $gracias
@jonmircha
3 жыл бұрын
😎🙌🏻
Gracias por los conocimientos!
@jonmircha
Жыл бұрын
👋🏻😉
Esta clase la he disfrutado mucho ya que he entendido muchas cosas del manejo de los atributos. Gracias Sr.Mircha
@jonmircha
8 ай бұрын
👋🏻😉
sin haberlo visto ya le doy like bro , no te conosco pero tus videos son muy buenos.
@jonmircha
Жыл бұрын
😉👋🏻
Excelente vídeo
Excelente explicación, si que aprendi muchas cosas nuevas, no conocia los data atributtw
Este curso es oro puro ✅🙌👏
@jonmircha
11 ай бұрын
👋🏻😉
10:50 Jon en modo Aristóteles, hablando de sustancia y accidentes! un crack, nuestro filosofo developer!!!
@jonmircha
3 жыл бұрын
🤭🤭
otro buen video me entere del atributo data a los coñasos hace unos dias me toco usarlo y aqui el maestro tambien lo explica 🤠🤠🤠🤠 ahora si me quedo claro como funciona
@jonmircha
Жыл бұрын
👋🏻😉
Como estoy comenzando no sabia de data-attributes, lo busque, encontre y entendi, recien cuando lo entendi segui viendo la clase, excelente como siempre 😁😁😁😁 Es mi primera vez viendo al DOM pero me esta gustando solo que siento que es bastante teoria aunque se que vale la pena. Saludos
Mil gracias!
@jonmircha
2 жыл бұрын
Con gusto
Excelente como siempre. Gracias
@jonmircha
3 жыл бұрын
Gracias, saludos
Boom!!! Siempre aprendiendo algo nuevo con este Curso. Gracias gracias gracias.
@jonmircha
3 жыл бұрын
Con mucho gusto
gracias excelente video
@jonmircha
7 ай бұрын
👋🏻😉
Excelente @jonmircha como siempre y sobretodo los tips que nos da como por ejemplo $ que usamos 12:35 gracias
@jonmircha
4 жыл бұрын
De nada 🤓
Muchas gracias profe, excelente clase como siempre!!!!
@jonmircha
3 жыл бұрын
Hola, muchas gracias
Quien lo diría, con ésta clase, ahora si entendí porque en React usamos const casi para todo... Excelente! Gracias!
@jonmircha
3 жыл бұрын
Gracias por comentar
Gran video !
@jonmircha
2 жыл бұрын
😉👍🏻
Muchas Gracias Jonathan!!!! he visto el video y luego he estado practicando y todo bien :)
@jonmircha
3 жыл бұрын
:)
Gracias profe jon, este curso esta fenomenal !! :)
@jonmircha
2 жыл бұрын
Gracias a ti!😉👍🏻
Excelente!!
@jonmircha
Жыл бұрын
👋🏻😉
No conocía la practica. $linkDom.setAttribute("rel", "noopener"); Seguimos aprendiendo.. Saludos crack..
@jonmircha
3 жыл бұрын
🤓
Excelente! Muchas gracias
@jonmircha
Жыл бұрын
😉👋🏻
TE AMO
@jonmircha
3 жыл бұрын
🙈🙊
Master! Genial gracias por este curso Saludos
@jonmircha
2 жыл бұрын
Con mucho gusto
gracias jon
@jonmircha
Жыл бұрын
Con gusto
Excelente, sencillo e ilustrativo. En mi caso, considero que falta aprender a usar e interpretar el inspector Chrome, uso de debuger en la linea de código y la inspección de variables etc, entender perfomance, network etc.
@jonmircha
4 жыл бұрын
COn calma, no hay prisa 🤗
tambien tenia esa incognita del por que del signo dolar, gracias por explicar todos los pequeños detalles que para mi como novato son muy importantes
@jonmircha
Жыл бұрын
👋🏻😉
respecto a los data-attributes leí una vez que se considera buena practica usar data-attributes para tomar los elementos HTML con los que necesitemos trabajar en Js y dejar los atributos de clase u otros selectores para el CSS, de esta forma se logra desacoplar el CSS del Js y si luego por algún motivo queremos cambiarle el nombre a un atributo de clase, o hacer algún cambio respecto al CSS eso no va a afectar el Js.
Insisto, estaría bien uno de svelte y de paso uno de angular con typescript. Explicas cosas curiosas.
seguimos ;) poco a poco se logra el objetivo :P
👏👏👏 🙏🙏🙏
@jonmircha
8 ай бұрын
👋🏻😉
Excelente clase solo que la dirección 127.0.0.1 no es una dirección de brodcast es la dirección de localhsot
@jonmircha
3 жыл бұрын
Gracias por la corrección :)
que interesante se está poniendo usar HTML con JS, de a poco me pondré al día :)
@jonmircha
3 жыл бұрын
Excelente!
11:45 const en este caso es facil de entender porque ni si quiera cambia esa "variable compuesta", linkDOM siempre apunta al mismo elemento del html a través del selector que fue declarado como const. Lo que varía es, al ser usado en un futuro, el elemento del html al que apunta. Nunca estaríamos modificando lo que guarda const que es el selector de ese elemento especifico del html
@jonmircha
Жыл бұрын
👍🏻
para los trastornados como yo que se les haya ocurrido pensar obtener de éstas etiquetas: el valor del último content, se obtiene así: document.head.querySelector("meta[name=viewport]").content muy loco, suerte
@jonmircha
3 жыл бұрын
jajajaja no es nada loco eso en CSS se llama selector de atributos 🤪😉
@matiasromera330
3 жыл бұрын
@@jonmircha jajaja 🤣🤣🤣 me queda tramo para seguir estudiando
tu Batman me asusta jajaja a veces se ve cerca y a veces lejos jajaja Ey Jon, mil gracias por tanto, bendiciones! 🧙♂️🧙♂️🧙♂️
@jonmircha
2 жыл бұрын
🤭🦇🙌🏻
6:25 jaja Que grande!!!
@jonmircha
2 жыл бұрын
🤭
respecto a let y const leí una vez: usa const siempre y let cuando no quede opción.
Muito bonito OPA
@jonmircha
Жыл бұрын
😉👋🏻
4:17 direccion de loopback
Buscando por internet parece ser que la anotación del . es más rápida aparte de que es más legible, en mi opinión usaré esa a menos que me de algún problema.
Jon gracias por el curso. Tengo una duda, cuando tomamos elementos del dom y los guardamos en un const,el nombre de tal no deberia der en mayuscua? const $HOLA=...
@jonmircha
3 жыл бұрын
No por que como tal no es un valor CONSTANTE en mayúsculas suelen escribirse valores PRIMITIVOS que no cambian por ejemplo PI, pero los elementos del DOM aunque siguen siendo los mismos, son dínamicos por que podemos modificar su contenido y sus atributos
hola @jonmircha queria pedirte un favor si quiero usar query selector all como accedo a las propiedades de los elementos que seleccione, ejemplo ar atributo = document.querySelector("p").getAttribute("data-topic-name"); quiero acceder a todos los elementos p y mostrar las propiedades data-topic-name para hacer una validacion perdon por molestar.
@jonmircha
2 жыл бұрын
Tendrías que utilizar un ciclo for o un forEach para recorrer cada uno de los elementos
mircha pero me da un error de redeclaration, si pongo const me sale como en azul turqueza y let me sasle azul normal pero en ambos casos me dice algo de redeclaration let $doe = document.querySelector(".ti-do") Uncaught SyntaxError: redeclaration of let $doe
@jonmircha
3 ай бұрын
😮
buen video profe! solo una consulta , a la hora de editar atributos , solo se edita el atributo de el primer selector que encuentre??, estuve haciendo mis pruebas y puse 3 imagenes con la misma clase , pero a la hora que edite el atributo alt de la imagen , solo se me edito el primero , no hay una forma de editar el atributo alt , de las 3 imagenes al mismo tiempo??
@jonmircha
3 жыл бұрын
guárdalos en una variable con querySelectorAll y aplica un forEach
@kunjilee9810
3 жыл бұрын
@@jonmircha Gracias profe , ya funciono :3
Hola Jon, ya voy por esta parte del curso, y quería preguntarte si crees que pueda seguir con el DOM sin problemas sin haber visto la parte de animaciones y transiciones del curso de CSS? Crees que haya alguna complicación o algo así al aprender el DOM sin saber eso? (los cursos anteriores a ese de CSS sí me los vi y entendí perfectamente todo)
@jonmircha
11 ай бұрын
sin problemas, dale
@osakadev
11 ай бұрын
@@jonmircha Gracias por responder! A por el DOM y el AJAX 😎, gracias por estos videos que valen oro
Hey @jonmircha consulta: Por qué console.log($linkDOM.dataset); sólo guarda como propiedad de aquel DOMStringMap el data-id y no guarda dentro al data-description?
@jonmircha
3 жыл бұрын
guarda todos los data-attributes
@jovinoguerrero5419
3 жыл бұрын
@@jonmircha data-id y data-description son data-attributes cierto? Mi pregunta es porque en el video sólo guardó el data-id? Disculpa si estoy preguntando algo obvio o redundante, pero si no salgo de esa duda no duermo hoy 😂
@matiasromera330
3 жыл бұрын
@@jovinoguerrero5419 seguro ya te has dado cuenta pero lo que comentás no ocurre, es más, primero Jon sólo tiene el data-description, que al hacer dataset lo obtiene, y luego agrega el data-id, que con el dataset trae tanto el description como el id. Si seguís con la duda te recomiendo que veas el final del video
profe que tal un workshop pago con vuejs una app compleja con componentes donde se aclare lo de vuex y vue-router , ese tema es complicado , pues profe dejo esa opinion sobre la mesa . gracias por su atencion
@jonmircha
4 жыл бұрын
Te soy honesto, no he trabajado lo suficiente con Vue como para hacer un curso así, a diferencia de con React, pero si quieres aprender Vue como pro te sugiero el sitio de Juan Andrés Nuñez escuelavue.es/
@davidcardenas7737
4 жыл бұрын
@@jonmircha excelente profe gracias.
una pregunta jon, puedo crear data-attributtes dinamicamente con js?
@jonmircha
3 жыл бұрын
sí
Jon Cuanto dura este Curso? 90 100 120 130 140 150 o incluso mas me gustaria saber Gracias por tu gran aporte que dios te bendiga a ti y a tus conocimientos que con alegria nos compartes en tus videos mil GRACIAS
@jonmircha
4 жыл бұрын
No lo se, los voy grabando de a poco, y la verdad es que no me fijo en el número, pero más o menos yo creo que el curso terminará en mas menos 150 videos :P
Jon, cuál es la manera que más te conviene para donaciones ? Patreon, paypal o youtube ?
@jonmircha
3 жыл бұрын
Paypal 🙌🏻
Jhon gracias por el cursoo.. ahora una duda.... con el codigo de JS que sirve para añadir clases por ejemplo $linkDom.setAttribute('class', 'claseDesdeJS') ese metodo solo añade la clase desde el JavaScript reemplazando a la que tenia en el HTML, la pregunta es ¿como hago para que se le sume otra clase desde JavaScript en vez de reemplazarla ??
@jonmircha
2 жыл бұрын
Eso lo explico en la clase 65
@josedaniel3316
2 жыл бұрын
@@jonmircha a oka entonces seguire viendo el curso .. Gracias!!
Rompiendo los algoritmos de youtube! Ayuden comentando!
@jonmircha
3 жыл бұрын
😉👍
Al hacer esto: document.documentElement.lang = "en"; No se me cambia el valor de la etiqueta lang, sigue en "es". Tampoco me funciona con document.documentElement.setAttribute("lang", "es-MX"); ¿Qué puede ser?
@marcelomelogno8635
Жыл бұрын
no va a cambiar el codigo que escribiste, si no el codigo en vivo. JS lo modifica dinamicamente
Hola gente alguien sabe que utilidad practica tienen los data attributes? los he visto en varios lugares pero me gustaria saber para que son utiles
@jeisongarzon6066
2 жыл бұрын
Me gustaria saber lo mismo.
puedes pasar una referencia del uso de "$" en declaracion de variables? No encontre nada e incluso paginas donde desaconsejan su uso
@guillermorivadeneira385
3 жыл бұрын
te lo acaba de decir este gran promador. Y todavia buscas mas referencias ?
@marczlong9382
3 жыл бұрын
@@guillermorivadeneira385 pues lo que diga un youtuber si no hay referencias es irrelevante, máxime cuando otros "grandes" programadores lo desaconsejan o en la página oficial no hace mención. Yo deduzco que es un vicio-ocurrencia arrastrado de otro lenguaje, como php...
@matiasromera330
3 жыл бұрын
@@marczlong9382 tomalo o dejalo, preocupate por hacerlo como vos quieras
@marczlong9382
3 жыл бұрын
@@matiasromera330 la idea es acercarse lo más posible a un estándar de programación. Si trabajas solo es irrelevante, si trabajas en grupo necesitas estándares por lo que es importante las referencias y dejar de lado ocurrencias de un "docente"
@matiasromera330
3 жыл бұрын
@@marczlong9382 yo si trabajara en equipo lo propondría, no me parece mala idea.
No me funciona el document.documentElement.setAttribute("lang", "es-MX"); que puede ser?
@jonmircha
5 ай бұрын
🤔
Profe tengo un problema, estoy investigando y no logro encontrar una solución... Cuando uso este console log: console.log(document.querySelector(".link-dom").href); Mi navegador que es safari me da este error: TypeError: null is not an object (evaluating 'document.querySelector(".link-dom").href') Revise mi html y mi código en JS y todo parece estar bien, depronto sabes que podría ayudarme a arreglar el problema?
@elvandalo_
Жыл бұрын
YA LO SOLUCIONEEEEEEEEE llevo todo el dia en esto jajaja, Pero no podia quedarme sin arreglarlo, resulta que en mi caso el problema es como funciona JavaScript, y resulta que el script se esta iniciando en el HTML ANTES de declarar esa etiqueta o clase ".link-dom", entonces lo solucione solo llevando el llamado del script hasta el final de body. y ya todo esta en orden. Comparto esto por si a alguien le llega a pasar lo mismo
@jonmircha
Жыл бұрын
👋🏻😉
¿Por qué cuando doy clic en el " DOM " abre unan nueva página pero no carga nada?, dice " No se pudo acceder a tu archivo, (Es posible que se haya movido, editado o borrado)" :/
@jonmircha
Жыл бұрын
🤔
console.log("bravo")
@jonmircha
3 жыл бұрын
🤗
12:00 me costo encontrar la explicación de porque utiliza el simblo de dolar.
@jonmircha
3 жыл бұрын
;)
jhon por que no estas trabajando para big tech? un hombre como vos facil pasa pruebas tecnicas sea google amazon o meta
@jonmircha
2 жыл бұрын
Por que me gusta ser amo de mi tiempo, trabajando soy más como un lobo solitario y amo dar clases, mi ego no necesita trabajar en grandes empresas
@manuelvillegas1924
2 жыл бұрын
@@jonmircha Ya vi el de html y css voy por js , espero algun dia tener la mitad de tu conocimiento,eres una verdadera inspiracion, saludos
Cual es el equivalente en ingles de "buenas practicas" en español??? ... no creo que sea simplemente "good practices".
@jonmircha
3 жыл бұрын
good parts 🤓
@facundoconci4341
3 жыл бұрын
@@jonmircha Gracias Jonmircha-sensei
@joseaugvazquez
Жыл бұрын
Best practice
Rodolfo me grito :(
@jonmircha
Жыл бұрын
😮
@otakutian
Жыл бұрын
@@jonmircha No pensé recibir una respuesta de un grande. Contexto: No había entendido bien el DOM para el proyecto de la aplicación WEB y vine a los tutoriales de un grande
olvídate de la convención pon nombres en español, por favor.
@jonmircha
4 жыл бұрын
No, aprende inglés :)
@oleonunez
4 жыл бұрын
@@jonmircha ya se ingles, por lo menos leído, pero para los que estamos aprendiendo programación es mas fácil diferenciar entre una palabra en ingles reservada para el lenguaje y una palabra en español creada para el programa, de esta manera por motivos didácticos se aprende mas rápido diferenciando la estructura que hace el programador y la estructura programática que trae por defecto el lenguaje, es una ventaja.
@oleonunez
3 жыл бұрын
@Obipolare no utilice palabras reservadas para mí página, utilice palabras en Español y con acento también la tengo en firebase y corre excelente también tengo un dominio con ñ y funciona excelente
Dia 2378136217 aun no me rindo :'v
@jonmircha
3 жыл бұрын
😎👍
Hola Jon, antes que nada te agradezco tu enseñanza y esfuerzo Me llamó mucho la atencion estas lineas de código $linkDOM.setAttribute("target", "_blank"); $linkDOM.setAttribute("rel", "noopener"); $linkDOM.setAttribute("href", "kzread.info"); Si ya abriste la ventana con _blank, ¿por qué abre la pagina posteriormente con tu página? Gracias, espero me puedas contestar y agradezco nuevamente tu enseñanza
Jon, no entiendo por qué solo me funciona con el atributo lang y no con el resto. ¿Qué hago mal? El resto de los atributos me devuelve esto: console.log(document.documentElement.getAttribute("lang")); // es console.log(document.documentElement.getAttribute("charset")); // null console.log(document.documentElement.getAttribute("data-description")); // null console.log(document.documentElement.getAttribute("src")); // null console.log(document.documentElement.src); / / undefined
@jonmircha
2 жыл бұрын
Por que esos atributos nolos tiene la etiqueta html, document.documentElement hace referencia a la etiqueta html, tienes que hacer referencia a la etiqueta que tenga esos atributos
gracias excelente video
@jonmircha
2 жыл бұрын
Gracias por comentar