Interacciones con el teclado

Introducción a la programación web

Mr. Norman Trujillo

ntrujillo@csa.edu.ni

¡Bienvenidos a clase!

Hoy daremos vida a nuestras páginas web. Los estudiantes descubrirán cómo transformar un simple teclado en un control maestro para sus creaciones digitales.

Preparación

Abran su editor de código y preparen su navegador favorito para las pruebas.

Pregunta esencial

¿Cómo puede el teclado convertirse en una herramienta que permite al usuario controlar y dar vida a elementos dentro de una página web?

Objetivos de aprendizaje

Identificación

Los estudiantes identificarán los eventos principales del teclado en JavaScript, como keydown y keyup, y sus propiedades básicas.

Implementación

Los estudiantes implementarán código que responda a pulsaciones de teclas para modificar elementos de la página de forma interactiva.

Imagina un mando a distancia invisible

Cada tecla envía un mensaje secreto al navegador. Como programadores, nuestro trabajo es estar atentos para recibirlo y actuar.

El poder del teclado

🏃

Flechas

Mueven personajes en un mundo digital.

✨

Espacio

Activa saltos o disparos en un juego.

🎨

Letras

Cambian colores o lanzan hechizos.

Breve repaso

Antes usábamos el mouse...

Recordamos cómo las interacciones ocurrían al hacer clic o mover el puntero. Ahora, el teclado nos permite una interacción más rápida y profesional.

click mouseover keydown ?

Eventos del teclado

Un evento de teclado ocurre cuando el usuario interactúa con cualquier tecla física del dispositivo.

JavaScript puede detectar exactamente cuándo presionas, mantienes o sueltas una tecla.

window.addEventListener(
  “keydown”, 
  actuar
);

¿Qué es un evento?

🔔

Una señal de acción

Es la forma en que el navegador nos dice: “¡Oye! Algo acaba de pasar”. En este caso, alguien tocó el teclado.

keydown

Se activa en el momento exacto en que presionas la tecla hacia abajo.

Uso común:

Iniciar una acción inmediata, como disparar un proyectil o empezar a correr.

Detalles de keydown

Repetición automática

Si mantienes presionada la tecla, el evento se repetirá continuamente hasta que la sueltes.

Sensibilidad

Es el evento más rápido de los dos principales, capturando la intención del usuario al instante.

keyup

Se activa cuando dejas de presionar la tecla y esta vuelve a su posición original.

Uso común:

Detener una acción, como dejar de caminar o terminar de cargar una habilidad.

Detalles de keyup

Un solo disparo

A diferencia de keydown, este evento solo ocurre una vez por cada pulsación, justo al final.

Confirmación

Es ideal para saber que el usuario ha terminado de escribir un mensaje o de realizar una combinación.

Diferencia clave

KEYDOWN

Presión inicial

Vs

KEYUP

Liberación final

Propiedad event.key

Nos dice el valor del carácter que fue presionado. Es lo que verías escrito en la pantalla.

“a” “Enter” “ArrowUp”

Ejemplo de valor:

“Escape”

¿Por qué usar event.key?

Es fácil de leer para nosotros (humano-legible).
Respeta el idioma y la configuración del teclado.

Propiedad event.code

“KeyA”

Referencia física de la tecla

Identifica la posición física de la tecla en el teclado, sin importar qué carácter esté impreso en ella.

“No importa si es una 'a' minúscula o mayúscula, la tecla física es la misma”.

Códigos comunes

Digit1

Tecla del número 1 arriba de las letras.

Space

Barra espaciadora física.

ShiftLeft

Tecla Shift del lado izquierdo.

key vs code

Atributo	event.key	event.code
Definición	El valor del carácter.	La posición física.
Ejemplo	“A” o “a”	“KeyA”
Sensible a Shift	Sí	No

Preparando el detector

Para que la página escuche al teclado en todo momento, agregamos el detector al objeto global window.

Esto asegura que no importa dónde esté el foco, la página responderá.

👂

Paso 1: El Escuchador

window.addEventListener(“keydown”, (evento) => {
  // Aquí irá nuestra magia
});

El parámetro “evento” contiene toda la información de la tecla que presionamos.

Paso 2: Detectar valores

window.addEventListener(“keydown”, (evento) => {
  let tecla = evento.key;
  
  if (tecla === “Enter”) {
    // Acción para el Enter
  }
});

Caso práctico 1

Cambiar el color del mundo digital

Vamos a crear una página que cambia de color según la letra presionada.

Estructura HTML

<body id=“lienzo”>
  <h1>Presiona R, V o A</h1>
</body>

Lógica JavaScript

window.addEventListener(“keydown”, (e) => {
  let fondo = document.getElementById(“lienzo”);

  if (e.key === “r”) {
    fondo.style.backgroundColor = “red”;
  } else if (e.key === “v”) {
    fondo.style.backgroundColor = “green”;
  }
});

Resultado

Al presionar la letra “r”, toda la pantalla se volverá roja instantáneamente. Es la primera vez que interactuamos sin usar el ratón.

PRESIÓN: R

¡Tu turno!

Modifica el código anterior para que al presionar la barra espaciadora (“ ”), el color de fondo vuelva a ser blanco.

“Recuerda que el valor para la barra espaciadora es un string vacío con un espacio”.

Caso práctico 2

Moviendo un cuadrado mágico

Aprenderemos a desplazar un elemento por la pantalla usando las flechas.

Coordenadas en la web

(0,0)

X: Horizontal

Y: Vertical

Para mover un objeto, cambiaremos sus valores de left y top cada vez que presionemos una tecla.

Preparación CSS

#cuadrado {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: 0px;
}

Variables de posición

Necesitamos guardar en qué posición está el cuadrado para poder sumarle o restarle píxeles.

let posX = 0;
let posY = 0;

Detectando la flecha derecha

window.addEventListener(“keydown”, (e) => {
  if (e.key === “ArrowRight”) {
    posX += 10; // Aumentamos 10px
    mover();
  }
});

function mover() {
  let c = document.getElementById(“cuadrado”);
  c.style.left = posX + “px”;
}

Lógica de las 4 flechas

Derecha / Izquierda

Sumamos o restamos a posX.

ArrowRight / ArrowLeft

Arriba / Abajo

Sumamos o restamos a posY.

ArrowUp / ArrowDown

Actualización visual

1

Capturas el evento con addEventListener.

2

Verificas con un if qué tecla fue pulsada.

3

Cambias el valor de una variable numérica.

4

Aplícas ese valor al estilo CSS (style.top o style.left).

Desafío de Movimiento

Completa el código para que el cuadrado pueda moverse en las cuatro direcciones. Asegúrate de que no se mueva demasiado rápido.

Tip: Si restas a posY, el objeto sube. Si sumas, baja.

¿Por qué es vital en los juegos?

Piensa en tus juegos favoritos. Sin la detección de teclado, no podrías explorar mundos ni reaccionar a los peligros.

La velocidad de respuesta es lo que hace que un juego se sienta “bien” o “fluido”.

W

A

S

D

Atajos de teclado

⌘

Combinaciones

Podemos detectar si se presionan varias teclas al mismo tiempo usando propiedades como ctrlKey o shiftKey.

CTRL + S

Mini Proyecto: El Atajo

Crea un detector que muestre un mensaje de “¡Guardado!” en la pantalla (usando innerHTML) cuando el usuario presione la tecla “s”.

document.getElementById(“info”).innerHTML = “¡Guardado!”;

Gran Proyecto

Dando vida a un Personaje

Uniremos todo lo aprendido para crear un avatar que reacciona a nuestras órdenes.

Requerimientos del Proyecto

1. Movimiento

El personaje debe moverse suavemente por la pantalla con las flechas.

2. Expresiones

Debe cambiar su apariencia (color o texto) al presionar diferentes letras.

Paso 1: El Escenario

<div id=“escenario”>
  <div id=“avatar”>🙂</div>
</div>

Paso 2: Capturando acciones

window.addEventListener(“keydown”, (e) => {
  let personaje = document.getElementById(“avatar”);

  if (e.key === “f”) {
    personaje.innerHTML = “🤩”;
  } else if (e.key === “t”) {
    personaje.innerHTML = “😢”;
  }
});

Paso 3: Integrando movimiento

if (e.key === “ArrowDown”) {
  posY += 20;
  personaje.style.top = posY + “px”;
}

“Repite este patrón para cada una de las direcciones”.

Demostración

🤩

¿No funciona? Revisa esto

!

Falta de unidad

Olvidar agregar el “px” al final del valor en style.top.

?

Mayúsculas y minúsculas

“Enter” no es lo mismo que “enter”. Verifica siempre cómo se escribe la tecla.

Tu crecimiento hoy

Diseñador Innovador

Desarrollas y pruebas prototipos como parte de un proceso de creación.

Pensador Computacional

Separas problemas en partes para facilitar la resolución.

¿Qué aprendimos?

Diferencia entre keydown y keyup.

Uso de event.key para detectar el valor de la tecla.

Modificar estilos CSS dinámicamente mediante el teclado.

Misión Especial

Crea una interacción simple donde diferentes teclas controlen el movimiento o apariencia de un elemento y prepárala para mostrar en la siguiente clase.

¡Sé creativo! Puedes mover una nave espacial, una mascota o un simple círculo de colores.

Si pudieras controlar cualquier cosa en una web con el teclado, ¿qué sería?

¡Excelente trabajo hoy!

Nos vemos en la siguiente sesión de programación.

Mr. Norman Trujillo

ntrujillo@csa.edu.ni

Interacciones con el Teclado Slides

Interacciones con el Teclado Slides

Similar Materials

Auditory Analysis Guide

jditomaso

Neural Studio Extension

jditomaso

Musical Brain Quiz Key

jditomaso

Musical Brain Quiz

jditomaso

RAS Facilitation Tips Guide

jditomaso

Parkinsons Pulse Research Notes

jditomaso

Neural Network Map

jditomaso

Neural Notes Protocol Guide

jditomaso

Auditory Anatomy Key

jditomaso

Melody Memories Discussion Guide

jditomaso

Auditory Anatomy Activity

jditomaso

Neural Notes Reading

jditomaso

Mind Ear Slides

jditomaso

Brain Beats Lesson Plan

jditomaso

Life Cycle Exit Ticket

Janine Rye

Life Loop Answer Key

Janine Rye

Cycle Scientist Notes Worksheet

Janine Rye

Life Loop Slides

Janine Rye

Life Loop Teacher Guide

Janine Rye

Final Glow Exit Ticket

Flash Talk Worksheet

Signal Guide Teacher Resource

Flash Talk Slides

Chem Check Exit Ticket

The Glow Lab Worksheet

Glow Lab Teacher Resource

Chemical Fire Slides

Lights Out Exit Ticket

Midnight Zone Worksheet

Deep Sea Spark Slides

Glow Guide Teacher Resource

Gabarito da Atividade Professor

Prof Michelle Maia

Exploradores do Tempo Atividade Estudante

Prof Michelle Maia

Origem da Vida Slides de Apresentação

Prof Michelle Maia

Manual do Cientista Guia do Professor

Prof Michelle Maia

Motion Mission Extension Activity

Mo Godin

Motion Master Teacher Guide

Mo Godin

Force Flip Lab Activity Scaffolding

Mo Godin

Squad Flight Log Document

Ericka Swett

Safety Contract Document

Ericka Swett

Operations Guide

Ericka Swett

Workshop Norms Poster

Ericka Swett

Squad Roles Cards

Ericka Swett

Blueprint Slides

Ericka Swett

Mission Control Teacher Guide