Lenguaje Java Script
Ejercicio 4 - Detector de teclas presionadas
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detección de Teclas</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Detección de Teclas Presionadas</h1>
<p>Presiona cualquier tecla en tu teclado y la detectaremos aquí:</p>
<div id="tecla">---</div>
</body>
</html>
script.js
// Agregar un evento al documento para capturar teclas
document.addEventListener('keydown', function(event) {
// Obtener el nombre de la tecla presionada
const teclaPresionada = event.key; // Nombre de la tecla
const codigoTecla = event.code; // Código físico de la tecla
// Mostrar el resultado en el elemento con id "tecla"
document.getElementById('tecla').innerText = `Tecla: "${teclaPresionada}" | Código: "${codigoTecla}"`;
});
Evento Keydown:
🔹document.addEventListener(‘keydown’, callback): Escucha el evento keydown, que se dispara cada vez que el usuario presiona una tecla en el teclado.
El callback recibe un objeto event que contiene información sobre el evento, como la tecla presionada, el código físico de la tecla, y más.
Propiedades del Evento:
🔹event.key: Devuelve el carácter asociado a la tecla presionada (Ej. «a», «Enter», «1»).
🔹event.code: Devuelve el código físico de la tecla, que es independiente de la configuración del teclado ( Ej. KeyA, «Enter», «Digit1»).
Mostrar la tecla en tiempo real:
Actualizamos el contenido del elemento con id=»tecla» usando innerText.