Introducción a la programación web

Interacciones con el teclado

Mr. Norman Trujillo

ntrujillo@csa.edu.ni

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?

Un mando invisible

Imagina que el teclado es como un mando a distancia invisible. Cada tecla envía un mensaje al navegador, y el código solo tiene que estar atento para recibirlo y actuar.

Objetivos

1

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

2

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

Más allá de escribir texto

Tradicionalmente, usamos el teclado para llenar formularios o escribir correos.

En programación web, el teclado es un controlador de eventos que dispara acciones inmediatas.

Antes usábamos el mouse

Ya sabemos cómo detectar clics. El teclado funciona de forma similar, pero nos ofrece muchas más opciones de control simultáneo.

onclick

onmouseover

¿Y el teclado?

El navegador siempre escucha

Cada vez que presionas una tecla, el navegador genera un objeto de evento lleno de información útil sobre qué ocurrió exactamente.

Keydown

Este evento se dispara en el momento preciso en que una tecla es presionada hacia abajo.

Uso principal

Mover personajes, saltar o activar funciones de disparo rápido.

A

Keyup

Este evento se dispara cuando el usuario suelta la tecla y esta vuelve a su posición original.

Uso principal

Detener movimientos, validar texto escrito o cerrar menús temporales.

El ciclo de la pulsación

Presionar

keydown

→

Soltar

keyup

¿Qué tecla fue?

Cuando capturamos el evento, JavaScript nos entrega un objeto que contiene los datos de la tecla presionada. Las propiedades más usadas son:

event.key

Nos devuelve el carácter literal (ejemplo: “a”, “Enter”, “ArrowLeft”).

event.code

Nos devuelve el código físico de la tecla (ejemplo: “KeyA”, “Space”).

Entendiendo event.key

Es lo que el usuario ve o la función de la tecla.

Tecla	Valor de event.key
Barra espaciadora	“ ” (espacio)
Flecha arriba	“ArrowUp”

Entendiendo event.code

Es la posición física de la tecla en el teclado, sin importar el idioma configurado.

Tecla	Valor de event.code
Letra Q	“KeyQ”
Número 1	“Digit1”

Preparando el escucha

Para que nuestra página reaccione, debemos agregar un “EventListener” al objeto global window o a un elemento específico.

window.addEventListener(“keydown”, function(event) {

// aquí va nuestra lógica

});

La caja de datos

El parámetro “event” (que puedes llamar como quieras, como “e”) es como una caja que llega a la función cada vez que tocas una tecla.

Objeto event

{
key: “Enter”,
code: “Enter”,
repeat: false,
...
}

Paso 1: El HTML

Ejemplo Práctico

Necesitamos un lugar donde mostrar qué tecla estamos presionando.

<h1>Detector de Teclas</h1>

<div id=“pantalla”>Presiona una tecla...</div>

Paso 2: Conectar

Primero seleccionamos el elemento de nuestra página para poder escribir en él más tarde.

let miPantalla = document.getElementById(“pantalla”);

Nota: usamos una variable para que el código sea más limpio y fácil de leer.

Paso 3: El escucha

Agregamos el evento a toda la ventana del navegador (window).

window.addEventListener(“keydown”, function(e) {

// aquí sucederá la magia

});

Paso 4: Ver la tecla

Usamos innerHTML para cambiar el texto del div por la tecla presionada.

window.addEventListener(“keydown”, function(e) {

miPantalla.innerHTML = “Presionaste: ” + e.key;

});

¿Cómo se ve funcionando?

Vista de la página

Detector de Teclas

Presionaste: Enter

¡Manos a la obra!

Crea un detector de teclas simple. Cuando presiones una tecla, el color de fondo de tu div debe cambiar a amarillo y mostrar el nombre de la tecla en mayúsculas.

💡 Pista: Usa e.key.toUpperCase() para las mayúsculas.

Tomando decisiones

No siempre queremos que pase lo mismo con todas las teclas. Podemos usar “if” para filtrar.

if (e.key === “r”) {

document.body.style.backgroundColor = “red”;

}

Ejemplo 2: Semáforo de Teclas

Vamos a hacer que la página cambie de color según la letra inicial del color en inglés.

R

Red

G

Green

B

Blue

Lógica para el Rojo

window.addEventListener(“keydown”, function(e) {

if (e.key === “r”) {

document.body.style.background = “red”;

}

});

Lógica para el Verde

if (e.key === “g”) {

document.body.style.background = “green”;

}

Agregamos este bloque después del anterior dentro de la misma función.

Lógica para el Azul

if (e.key === “b”) {

document.body.style.background = “blue”;

}

Limpiando la página

¿Qué pasa si queremos volver al color blanco? Podemos usar el evento keyup para que al soltar la tecla, el color desaparezca.

window.addEventListener(“keyup”, function() {

document.body.style.background = “white”;

});

Interacción Completa

R

Presionada

→

¡ROJO!

El desafío supremo

¿Podemos mover un objeto por la pantalla usando las flechas del teclado? ¡Claro que sí!

Necesitaremos variables para guardar la posición horizontal (X) y vertical (Y).

Eje X y Eje Y

En la web, la posición se mide en píxeles desde la esquina superior izquierda.

X: Izquierda / Derecha
Y: Arriba / Abajo

(0,0)

Box

Pantalla

Variables de posición

Creamos variables para rastrear dónde está nuestra caja.

let posX = 0;

let posY = 0;

let caja = document.getElementById(“jugador”);

Mover a la derecha

Si presionamos “ArrowRight”, aumentamos el valor de posX y actualizamos la posición CSS.

if (e.key === “ArrowRight”) {

posX = posX + 10;

caja.style.marginLeft = posX + “px”;

}

Mover a la izquierda

Restamos píxeles para ir en dirección contraria.

if (e.key === “ArrowLeft”) {

posX = posX - 10;

caja.style.marginLeft = posX + “px”;

}

Mover hacia abajo

Usamos posY y marginTop.

if (e.key === “ArrowDown”) {

posY = posY + 10;

caja.style.marginTop = posY + “px”;

}

Mover hacia arriba

if (e.key === “ArrowUp”) {

posY = posY - 10;

caja.style.marginTop = posY + “px”;

}

Mapa de controles

↑

←

↓

→

¡Has creado un mando de juego!

Teclas que no escriben

Algunas teclas tienen nombres especiales que debes conocer para capturarlas correctamente:

Shift “Shift”

Escape “Escape”

Espacio “ ”

Tabulación “Tab”

¡Cuidado con esto!

Mayúsculas vs Minúsculas

“A” no es lo mismo que “a”. JavaScript distingue entre ambas.

Falta de foco

A veces el teclado no funciona porque no has hecho clic dentro de la página web.

Pensemos un momento

“¿De qué otras maneras podríamos usar el teclado además de para mover cosas o cambiar colores? ¿Cómo lo usan las personas con dificultades para usar un mouse?”

Programar para todos

Usar el teclado es fundamental para la accesibilidad web. Muchas personas navegan exclusivamente con el teclado usando la tecla Tab para saltar entre botones y enlaces.

⌨️ Navegación Inclusiva

Proyecto: El Piano Mágico

Crea una página donde al presionar las teclas A, S, D, F, G se muestre una nota musical diferente en pantalla con un color vibrante.

• A = DO (Rojo)
• S = RE (Naranja)
• D = MI (Amarillo)

Evitando el eco

Si dejas presionada una tecla, el evento keydown se repite muchas veces. Podemos detectar esto con la propiedad repeat.

if (e.repeat) {

// no hagas nada si se queda pegada

return;

}

Superpoderes: Combinaciones

Podemos detectar si se presionan teclas especiales junto con otras:

e.ctrlKey (Control)
e.shiftKey (Shift)
e.altKey (Alt)
e.metaKey (Comando/Windows)

Creando un atajo

Hagamos que al presionar Ctrl + S aparezca un mensaje de “¡Guardado!”.

if (e.ctrlKey && e.key === “s”) {

e.preventDefault(); // evita que el navegador guarde la página

miPantalla.innerHTML = “Archivo guardado con éxito”;

}

Lo que aprendimos hoy

Eventos: Keydown y Keyup

Propiedades: Key y Code

DOM: innerHTML y style

Interacción en tiempo real

Estándar ISTE: Aprendiz empoderado

Articulan y establecen metas personales, desarrollan estrategias en las que aprovechan la tecnología para lograrlas y reflexionan sobre el proceso que siguen al aprender, con el fin de mejorar sus resultados.

Estándar ISTE: Pensador computacional

Separan los problemas en partes, extraen información clave y desarrollan modelos descriptivos para comprender sistemas complejos o facilitar la resolución de problemas.

Tu misión

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

¡Sé creativo! Puede ser un juego, una obra de arte o un controlador musical.

¡Buen trabajo!

Mr. Norman Trujillo

ntrujillo@csa.edu.ni

Interacciones Digitales

Interacciones con el teclado

Interacciones Teclado Presentación

Similar Lessons

Glowing Communication

Chemical Fire

Deep Sea Spark

Sopa Primordial

Prof Michelle Maia

Newton Quick Fix

Mo Godin

Blueprint Workshop

Ericka Swett

Brain Engine

Ericka Swett

Grassland Firepower

tiffany.holman

Invasion Defense

tiffany.holman

Future Proofing Earth

tiffany.holman

Heat Seekers

sjcarr

Green Machine

Ariadne Reuben Polinar

Soil Saviors

kwoodley

Invasion Alert

tiffany.holman

Control Total con el Teclado

Norman René Trujillo Zapata

Genetics Foundations

Marsha Bolden

Atomic Newton Basics

Marsha Bolden

Genetics Mystery

Marsha Bolden

Brain Bots

Peter Monadjemi

Human Odyssey

Adam Amster

The Infinite Loop

Tanner Colclasure

Solar Kitchens

Tanner Colclasure

Energy Engines

Tanner Colclasure

Deep Time Detectives

Leah Nickols

Neural Network

mmccormick

Chain Reaction Chaos

Andrew Halford

Climate Crisis Latin America

Gerardo Jimenez Ramirez

Matter Mastery

Earth and Space Connections

Data Trace Mastery

Earth System Connectors

Data First Mastery

Eco Pulse Practice

Earth and Water Systems

Ecosystem Dynamics

Matter Lab Files

Eco Explorers

Scientific Sense

EOG Heredity Decoder

Genetic Journey

Biological Blueprint

Matter Mastery

Carbon in the Balance

tiffany.holman