Fuente: https://www.youtube.com/watch?v=q32skvBgxo4
Video original: Learn JavaScript KEY EVENTS in 10+ minutes! ⌨
Autor original: Bro Code - [Recursos en los comentarios]
Fecha de publicación: 2023-12-14
Los recursos incluidos en el video, si los necesitas, deja un mensaje en [la sección de comentarios], se organizarán por separado.
Doblaje de subtítulos: transcripción de voz, traducción de subtítulos, doblaje de texto, sincronización labial, etc., todo realizado por IA. Si hay imprecisiones, indícalo. (Materiales relacionados del video, caja de herramientas, responde en comentarios con me gusta, monedas y favoritos)---[Grupo de Traducción IA de Recursos de Qi Ge]
Este video te introduce a los eventos de teclado en JavaScript, enfocándose en el uso de keydown y keyup, y explica por qué no se recomienda usar keypress. Aprenderás cómo agregar un escucha de eventos al document, ver el objeto de evento de teclado, leer event.key, y cambiar el contenido de elementos HTML y estilos CSS al presionar y soltar teclas. En la segunda parte también se usa las teclas de dirección para controlar el movimiento de una caja, demostrando la coordinación de las coordenadas x, y y moveAmount, y usando preventDefault para evitar el desplazamiento predeterminado de la página con las teclas de dirección. Finalmente se combina el cambio de estilo por teclas y el movimiento con teclas de dirección para crear un pequeño efecto interactivo. Adecuado para principiantes de front-end que recién entran en contacto con DOM y escuchas de eventos.
00:00 Introducción y eventos de teclado
Se presentan los objetivos del curso, se repasan los escuchas de eventos, y se explican los conceptos básicos y la compatibilidad de keydown, keyup y keypress.
00:46 Escuchar eventos de teclado
Se agrega un escucha de eventos al document, pasando el tipo de evento y la función de devolución de llamada, y se conoce el objeto de evento event.
01:57 Práctica de presionar y soltar
Se usa console.log para ver el objeto de evento de teclado, leyendo propiedades como key, keyCode, altKey, shiftKey y target.
03:11 Cambiar estilo con teclas
Se crea un elemento de caja, al presionar una tecla se cambia el texto y el color de fondo, al soltar la tecla se restauran el HTML y CSS.
06:07 Mover la caja con teclas de dirección
Se controla el movimiento de la caja con las teclas de dirección, configurando moveAmount, las coordenadas x e y, y determinando la dirección con switch.
09:42 Prevenir el desplazamiento predeterminado
Las teclas de dirección desplazan la página por defecto, se usa preventDefault para evitar el comportamiento predeterminado, y se ajusta la distancia de movimiento.
10:51 Combinación y resumen
Se combina el cambio de estilo por teclas y el movimiento con teclas de dirección, y finalmente se resume la forma de escuchar keydown y keyup.
