Curso JavaScript: 84. DOM: Ejercicios Prácticos | Eventos del Teclado (Atajos) -

En este video de ejercicios del #DOM de #JavaScript te enseño a detectar eventos del teclado y a hacer atajos (shortcuts).
💛 Aprende JavaScript aprendejavascr...
📖 Mis notas sobre JavaScript jonmircha.com/...
📖 Mis notas sobre ECMAScript jonmircha.com/...
📖 Mis notas sobre JavaScript Asíncrono jonmircha.com/...
📖 Mis notas sobre JSON jonmircha.com/...
📖 Mis notas sobre el DOM jonmircha.com/dom
📦 Códigos: github.com/jon...
🔔 Suscríbete al canal kzbin.info... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
🤲 Apóyame en Patreon / jonmircha
📫 Suscríbete a mi lista de correo tinyletter.com...

[@ceciliayanez667]

Cada vez que Jon finaliza un vídeo diciendo: "por favor, si crees que este contenido aporta valor..." Me digo a mi misma: esto es oro puro jajaja! Gracias profe!

[@jonmircha]

🙈😉🙌🏻

[@putamadreostia]

El Enter... el keycode es el número 30. Voy a probar... Y como ven, el keycode es el número 13. Genial. A parte de eso, grandísimo trabajo. Me está siendo de mucha ayuda.

[@jonmircha]

;)

[@CarlosFigueroa-fz9jl]

Jajajaja

[@TheMiguel18]

jajajaja sii

[@peter-jb]

8:00 :v de nada xdxd

[@Ni_idea_de_tecnologia]

Se me ocurren mil cosas que se pueden hacer con esta información. jejejje. Muchas gracias Sr Mircha

[@jonmircha]

Un saludo👋🏻😉

[@tongastonga22]

Yo de nuevo, GRACIAS JONN!!! es que agradecer es lo mas que puedo hacer por ahora, mi pasar economico no es muy bueno, espero poder salir a flote y donar!

[@jonmircha]

👋🏻😉

[@GAST0N]

En mi ejercicio creé los atajos con "Ctrl" + (otra tecla). Para evitar el comportamiento por defecto, por ej cuando apretamos Ctrl + a selecciona todo el texto, lo hice con el método e.preventDefault(). Así solo mandaba un alert sin seleccionar el texto.

[@jonmircha]

👍🏻

[@instintoimagen]

el mejor #curso de #javascript

[@jonmircha]

😉👌🏻

[@Black_Coding]

Cada clase que avanzamos veo a JS como algo más hermoso, muchas gracias.

[@jonmircha]

😉👋🏻

[@emersonpalaciootalvaro2632]

parcero excelente, la verdad es que superas en mucho, a los demás tutoriales de js en youtube.

[@jonmircha]

Gracias, saludos!

[@MX7681]

Me están encantando estos ejercicios!!!💕

[@jonmircha]

Excelente!👋🏻😉

[@edgarzambrano3505]

muchas gracias profe, mas claro no se puede

[@jonmircha]

😉👍🏻

[@maicodiaz7487]

ADMITO QUE MIS PEFERIDOS SON VICTOR ROBLES Y FERNANDO HERRERA DE UDEMY....PERO AL VER TUS VIDEOS JONATAN MIRCHA....SIMPLEMENTE ESTAS EN OTRO NIVEL, SOS INCREIBLE!!!

[@jonmircha]

Gracias ☺️ comparte para llegar a más personas 😃

[@_-_-_-_-_-_-_-_-_---_-_--_----]

Victor Robles es un pelele que no tiene ni idea de enseñar, una perdida de tiempo y de dinero, no profundiza en nada, sus videos no tienen sentido.

[@Wiiiiizard]

🧙‍♂Muchas gracias, muy bueno el curso!!!

[@jonmircha]

Gracias por comentar

[@martinsantos718]

Gracias por tus cursos, son excelentes. Conforme avancé en cada uno de tus vídeos me agradó javascript, ya lo aplicó en algunos proyectos que estoy haciendo con otros lenguajes de progrmación. He recomendado tu curso a muchos.

[@jonmircha]

😃🙌🏻

[@leomax522]

Muy bueno Jon. Espectacular. Gracias.

[@carlosjavierorozco8418]

Grandioso! muchas gracias

[@jonmircha]

😉👋🏻

[@jeanlaguna6949]

Tuve que cambiarlo a ctrlKey porque al usar el alt del teclado me cambiaba el valor de la "a" en el teclado por una "å" y la validación no se cumplia. Muchas gracias Jon por este curso, eres un referente en la formación autodidacta.

[@jonmircha]

🤓👍🏻

[@raulruidiazgoleadordeperu9524]

Profesor ya no se recomiende usar Keypress ya no esta en el estandar segun la MDN

[@braianrico4422]

Tus clases, independientemente si son secciones cortas o largas, tienen el plus de tu personalidad y esta lo engrampa a uno de inmediato. Gracias por compartir tu conocimiento, bendiciones!!! 🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

🙌🏻🙌🏻🙌🏻

[@JuanDGamba]

En Ópera no se pueden hacer comandos con la tecla alt porque abre el menú del navegador y tal parece que no hay forma de quitar ese atajo. En Edge Anaheim tampoco permite utilizar la tecla alt por alguna razón.

[@jonmircha]

😮

[@r.w.s.2402]

Me ha encantado este vídeo:) No sabía que se podían hacer estas cosas tan chulas con Javascript!

[@jonmircha]

😉

[@johnherrera5913]

Master! Es increíble lo bien que enseñas

[@jonmircha]

😉👍🏻

[@danielfabiani4468]

Muy bueno. Solo me permitió key==="a". Con keyCode, ni chrome ni mozilla. Muchas gracias.

[@jonmircha]

Excelente!

[@leonardoprone5967]

Excelente, Jon! gracias

[@jonmircha]

😉👍🏻

[@moisescastillo3447]

De los mejores cursos que he tenido la suerte de ver, hay muy poco material que hable y toque sobre el evento touch que se emplea en tables y dispositivos móviles como los slideshows dandole un toque muy agradable y facil de usar, podrias tambien tocarlo en tu curso con ejemplos practicos, seria un tremendo aporte para todos aquellos amantes de este arte, desde ya graciaa por todo el esfuerzo que aplicas en este material invaluable

[@aaronfabriciosantacruzvald8101]

Los eventos del teclado me parecen de mucha utilidad.

[@marianitaarb]

Hoy retomando el curso... Feliz año nuevo Jon!! Gracias por tus valiosos aportes 😃🤗

[@jonmircha]

Igualmente!!!

[@nachosanabria6942]

excelente video muchas gracias Jon

[@jonmircha]

🙂👍

[@juansebastian2721]

Hola Jon, Gracias por tu dedicación; estoy aprendiendo muchas cosas nuevas

[@jonmircha]

Con mucho gusto

[@josephlojan827]

Maestro estoy aprendiendo muchísimo contigo. Voy a sacarle el maximo provecho al js.

[@jonmircha]

Mucha suerte!👍🏻😉

[@AmirOrtega-wz4bs]

Hola Jon, excelente video como siempre. Tengo una pregunta sobre lo dicho en el minuto 3:30 'Acá no se hace delegación de eventos porque realmente la detección de los eventos del teclado debe asignarse al nodo raíz, en este caso el document', no lo entendí muy bien porqué no se pone la función dentro del d.addEventListener('DOMContentLoaded', (event) => {}) y en cambio se crea un nuevo d.addEventListener('keydown', event => {});

[@fernandocarrillo1336]

Excelente explicación! Nota: Cada vez que probaba una combinación con la tecla Control, se activaba algún atajo de teclado de Chrome de inmediato decía "haaaay ahora que hice?" 😅😅

[@jonmircha]

jejeje

[@carlesbautista8293]

Que bien Jonathan, muchisimas gracias!!!

[@jonmircha]

De nada!

[@elkintorres1614]

Hola Jhon, me encantan los videos y eso que voy en el 4° jejeje, de seguro muchos veran tus videos solo ten paciencia

[@manuelcobasguerra5688]

El Mejor Curso de JavaScript En KZbin MIL GRACIAS POR TUS ENSENANZAS; pdata: (Mi Teclado esta en ingles y en linux fedora no se como configurar el teclado, pero si se que se escribe con enie :D )

[@lucasb777]

Gracias Jon sos un genio!! Por fin siento que realmente estoy aprendiendo. Cuando termine con tu curso de javaScript, por cual de tus cursos me recomendas seguir? Mira que vi cursos en youtube, hice uno pago tambien en una plataforma. Pero recien ahora y a mis 31 años le voy encontrando el gustito a esto. Se puede gente, se puede! Te admiro por lo didactico que sos jon!

[@jonmircha]

😉👋🏻 jonmircha.com/cursos

[@aronlife1098]

Desde los ejercicios de programación me quede con los if de una linea😅 if (e.key === "a" && e.altKey) alert("Haz lanzado un alert mediante un shorkut");

[@jonmircha]

👍🏻

[@juanpablorodriguez2494]

Gracias por tus cursos de los mejores!!!! 😍😍😍

[@jonmircha]

Hola, muchas gracias

[@nomeloexplicaron62]

Gracias por sus enseñanzas sensei

[@jonmircha]

De nada

[@mercurioazul630]

Estuvo bueno y útil.

[@jonmircha]

🤓

[@martinbergesio1990]

Estoy con estos ejercicios de eventos de teclado y por lo que leo en la documentación de MDN veo que dicen que la propiedad .keyCode esta en desuso. Entiendo que quizás para este ejercicio la podría utilizar igual, pero me recomiendas mejor utilizar la propiedad .key para saber que tecla se ha pulsado o cuál sería mejor? Pronto te paso mis ejercicios cuando los termine. Un saludo, muchas gracias.

[@jonmircha]

Ambas funcionan, con la que quieras :)

[@LukasArias99]

Profe, seria buena practica de ventas especificar claramente que tipo de beneficios se obtienen en Patreon !

[@jonmircha]

?_?

[@gastontimchuk2295]

Hola Jon, tu info es la gloria, algo que me estuvo pasando es que la propiedad ctrlkey altkey shiftkey aunque las apriete me tiraba falso. Alguna ayuda con eso?

[@vegaimagen9075]

Como siempre excelente Jon..una pregunta,como sabes yo no me dedico a la web , me gusta aprender, osea mi nombre de usurio vegaimagen es solo nombre jeje..Yo aprendi de ti desde bextlan la organizacion de codigo alfabeticamente para hacer una web sobretodo en css .. viendo tus videos de js y se que lo haces para hacerlo mas entendible para nosotros abres diferentes files y le haces import...si yo quiziera hacer una web con muchos eventos de js que recomiendas ..hacerlo en un solo file de js o abrir varios para cada evento/.Gracias y saludos

[@jonmircha]

Si tu app va a crecer mucho, te sugiero usar módulos, si es una app pequeña, puedes hacerlo en un sólo archivo, no te compliques las cosas :)

[@vegaimagen9075]

Gracias

[@elweonweandolaweafome]

Se me fue el video muy rapido y no es por reproducirlo a 1.25 xd sino porque es muy ameno entender todo contigo Jon :D, no sabìa que los shortcuts son tan faciles xddddddddd

[@jonmircha]

👋🏻😉

[@paulpaucarb]

jon puedes hacer un curso de react

[@jonmircha]

Pronto

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@JoseVillanueva-to3zx]

Hola Jon disculpa una duda que me esta rompiendo la cabeza en las alertas si me funciona con || pero si lo hago con && no hace nada que puede ser :/ ? y muchas gracias de antemano

[@jonmircha]

Pues depende de lo que quieras, recuerda que con && todas las condiciones deben cumplirse

[@aronlife1098]

Al ver que el código está en if de una línea, otra manera de resolverlo seria mediante los operadores ternarios

[@carloseduardogomezlozano491]

Cual herramiento uso para realizar la aplicacion jonmircha para pc. Es tambien para Android, Apple?. Es una adaptación de la pagina de Internet?. Tiene algún curso de como realizar estas aplicaciones. Espero su respuesta. Gracias.

[@jonmircha]

Es una PWA kzbin.info/aero/PLvq-jIkSeTUYIw8CP2AP7QJs4GeeZdvs6

[@Juicio87]

Pues aquí me la pegué jaja, conseguí que se moviera pero de un extremo a otro y solo me hacía caso una vez :( veamos la solución

[@jonmircha]

😉

[@sebastianmorales823]

profe jon keydown y keypress se comportan igual, la dejo presionada y se ejecuta el evento varias veces hasta que suelte la tecla, tal vez, digo yo, cambie en la velocidad de ejecución, me confirma si es así o me puede aclarar eso

[@jonmircha]

mm parecieran igual pero no keydown al presionar keypress mientras presionas

[@sebastianmorales823]

@@jonmircha pero si yo dejo presionado teniendo keydown sigue ejecutandose indefinadamente, o se en java si hay esa diferencia en dejar presionado y presionar pero aqui yo lo probe con ambos y hacen lo mismo

[@Juankybi]

me hago un lio con las carpetas... Donde esta dom-ejercicios.html. En la carpeta .vscode? Es que llevo varios videos con problemas, ya que copio el codigo, que a mi no me enlazaba. Lo copio de gente que da sus codigos, y asi pasa que sus codigos no son exactos a los tuyos. Echo de menos tus ficheros originales con las carpetas bien estructuradas. Pierdo mas tiempo en entender los enlaces... y bueno, si tienes los orinales seria ideal

[@jonmircha]

Desde donde lo tengas simplemente respeta las rutas a tus demás archivos.

[@davidm.8835]

Muy interesante! Por curiosidad, los códigos son iguales para los diferentes tipos de teclado de cada país?

[@jonmircha]

Los códigos son estándar no importa el teclado

[@SebastianZapataMay]

Voy en el vídeo 15 de este curso, espero llegar pronto a este vídeo :c

[@jonmircha]

Con calma, ve a tu ritmo no hay prisa :)

[@ronaldm.r]

No hay prisa bro con calma llegas yo empecé desde el principio y ya voy por el video 84 en menos de un mes XD

[@brandon400]

yo como en 2 meses o más o.O

[@cxT9344]

@@brandon400 yo llegue aquí en 4 días xd

[@helipalacio8772]

👏🏻👏🏻👏🏻 🙏🏻🙏🏻🙏🏻

[@jonmircha]

😉👋🏻

[@roly7409]

que videos podria repasar para hacer este ejercicio?

[@jonmircha]

Investiga los eventos del teclado ;)

[@roly7409]

@@jonmircha gracias profe

[@gabrielvis-brawlstars1568]

profesor como hace para duplicar una linea debajo de ella misma

[@jonmircha]

alt+ shift + flecha del cursor

[@gabrielvis-brawlstars1568]

@@jonmircha lo amo

[@MaxielJohannaCamargoGomez]

:( nunca me salieron las alertas :( . Pero igual increíble clase profe

[@paulpaucarb]

tienes live server

[@miguelmendoza8855]

solo funciona con el evento keydown :)

[@ivanalexisperezcarrillo8128]

@@miguelmendoza8855 Gracias, soluciono lo que me faltaba jajaja, Saludos

[@alexumah8300]

A mi no me funciono Jon, cuando presiono shft, alt o ctrl actúa en el navegador y no en la pagina en si, busque para deshabilitarlo o algo pero no conseguí nada, por lo demas siempre excelentes tus videos gracias por tanto

[@jonmircha]

😮

[@eder3232]

para lotear rapido en un juego necesito dar varios clicks en unos puntos, como podria hacer esto?, pensaba hacerlo con electron js

[@jonmircha]

An tes de pensar en una tecnología, preocuparte por el algoritmo

[@eder3232]

@@jonmircha es que tendria que tener acceso fuera del navegador, y poder usar los eventos del mouse, quizas con node podria ser

[@eder3232]

@@jonmircha aunque tambien es verdad primero tendria que hacerlo funcionar en navegador y me preocupo luego como llevarlo fuera, excelente vere como hacerlo gracias

[@timawid]

🤩🤩✅🙌

[@jonmircha]

👋🏻😉

[@miguelmendoza8855]

alt, shift, y cntrl solo funcionan con el evento keydown ? :)

[@jonmircha]

🤓👍🏻

[@NonsenseIsOver]

Hay algo que no entendí, ¿cuando usamos delegación, los eventos se escriben dentro del DOMContentLoaded para hacer el `matches()` una vez carguen todos los archivos?... ¿o cuál es la explicación?, Por un momento pensé que todos los eventos se debían asignar dentro del DOMContenLoaded.

[@jonmircha]

La delegación no esta asociada al DOMCOntentLoaded, este es un evento más como click, como mouseout, como keyup, etc... La delegación significa asignar el evento a un elemento padre en este caso al objeto document

[@NonsenseIsOver]

@@jonmircha eso responde una de mis inquietudes, y la otra es cuál es la diferencia entre ejecutar los eventos dentro y fuera del DOMContentLoaded. Ya que los de click los pusiste dentro y los de key fuera.

[@sergiotorres7708]

@@NonsenseIsOver Tenia la misma duda y empece a buscar en los comentarios, aunq llegue dos años tarde creo que es porque en las funciones anteriores estamos usando elementos de HTML para trabajar es decir, para que todo funcione bien debemos asegurarnos que el DOM este cargado, en el caso del modulo "teclado" no es necesario por la forma en que hace el codigo.

[@marcosMartinez-wm7bd]

me quede en 16:39

[@boogiemusic5686]

Mientras lo miraba pensaba que todo esto podria servir para hacer un Keylogger... solo para practicar obvio...

[@jonmircha]

:)

[@helipalacio8772]

👨

[@jonmircha]

👋🏻😉

[@aladeltatv5281]

nosé porque no me funcionaron los atajos con alt ctrl y shift

[@jonmircha]

¯\_(ツ)_/¯

[@aladeltatv5281]

@@jonmircha ya lo solucioné, estaba utilizando keypress en lugar de keydown en el addEventListener, me había olvidado de cambiarlo.

[@112358roman]

@@aladeltatv5281 Media hora buscando porque no me funcionaba! jaja Gracias!

[@shepharddeveloper5823]

a mi el keycode de la q me aparece en el 81 xD y el ENTER en el 13

[@heimancastro1954]

⌨⌨⌨⌨⌨⌨😃😃

[@jonmircha]

😉👋🏻

[@matiasmaidana2248]

¿Crees que la IA reemplace a los programadores web?

[@jonmircha]

No

[@jebusxuy]

Por alguna razón, no me funcionó con alt+p, tal vez lo tenga asignado a algo más, por si a alguien no le funciona, solo prueben otra tecla.

[@cobachista]

NO FUNCIONA LOS ATAJOS

[@MaxielJohannaCamargoGomez]

x2

[@sebastiangonzalez-wj1fj]

@@MaxielJohannaCamargoGomez revisa que tengas live, serve, que importes bien el modulo, que sea "keydown" en la parte del javascript de dom, donde pones la escucha de la acción a mi no respondía y era porque tenia "keypress", otra cosa que me pasaba es que abria mi pagina y de una presionaba, tienes que asegurarte de darle un click al dom tu misma y luego hacer la combinación que elegiste; si no haces un click en el dom antes no te va a funcionar, son los errores que tuve, te lo comparto; por si acaso son los mismos.

[@andrespaez1301]

Hice el shortCut con alt + a y me salió esto: Error in event handler: TypeError: Cannot read properties of undefined (reading 'videoWidth') at chrome-extension://mcgbeeipkmelnpldkobichboakdfaeon/content/content.js:512:23 ¿Alguién me podría decir el por qué? creí que había escrito mal el código pero no, solo cambié la letra a por la q y yano hubo problema. Qué alguien me explique por favor.