En este ejercicio trabajaremos con los eventos del teclado, y conforme se vaya avanzando en los ejercicios, veremos más eventos. Vamos a ver como funciona la detección de cada una de las teclas del dispositivo, y veremos como hacer atajos personalizados, de tal manera que si creamos una aplicación interactiva tipo Photoshop Online, podemos crear nuestros propios shortcuts. En este capítulo aprenderemos a hacer shortcuts personalizados.
Principalmente el teclado tiene tres eventos:
- keyup: este evento actúa cuando soltamos la tecla.
- keydown: este evento actúa cuando presionamos la tecla.
- keypress: este evento actúa mientras presionamos la tecla. Si mantenemos presionada la tecla el evento se seguirá ejecutando.
Nota: la propiedad keyCode va a ser una propiedad muy importante porque cada tecla tiene un código, y así es como vamos a poder identificar a las letras.
En este capítulo hemos modificado los archivos del capítulo anterior:
- dom-ejercicios.html
- index_dom.js
Y hemos creado un archivo nuevo
- teclado.js
Veamos la sintaxis de estos 3 archivos, los archivos dom-ejercicios.css, menu_hamburguesa.js y reloj.js se mantienen invariables y se puede coger su código del capítulo anterior.
Sintaxis de dom-ejercicios.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Ejercicios del DOM</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/1.2.1/hamburgers.min.css" /> <link rel="stylesheet" href="dom-ejercicios.css" /> </head> <body> <header class="header"> <h1>Ejercicios del DOM</h1> </header> <button class="panel-btn hamburger hamburger--vortex" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <aside class="panel"> <nav class="menu"> <a href="#seccion1">Reloj Digital y Alarma Sonora</a> <a href="#seccion2">Eventos del teclado</a> <a href="#seccion3">Sección 3</a> <a href="#seccion4">Sección 4</a> <a href="#seccion5">Sección 5</a> </nav> </aside> <main> <section id="seccion1" class="section"> <h2>Reloj Digital y Alarma Sonora</h2> <div id="reloj"></div> <div> <button id="activar-reloj">Iniciar Reloj</button> <button id="desactivar-reloj">Detener Reloj</button> <button id="activar-alarma">Iniciar Alarma</button> <button id="desactivar-alarma">Detener Alarma</button> </div> </section> <section id="seccion2" class="section"> <h2>Eventos del teclado</h2> </section> <section id="seccion3" class="section"> <h2>Sección 3</h2> </section> <section id="seccion4" class="section"> <h2>Sección 4</h2> </section> <section id="seccion5" class="section"> <h2>Sección 5</h2> </section> </main> <script src="index_dom.js" type="module"></script> </body> </html>
Sintaxis de index_dom.js.
import hamburgerMenu from "./menu_hamburguesa.js";
import { digitalClock, alarm } from "./reloj.js";
import { shortcuts } from "./teclado.js";
const d = document;
d.addEventListener("DOMContentLoaded", (e) => {
hamburgerMenu(".panel-btn", ".panel", ".menu a");
digitalClock("#reloj", "#activar-reloj", "#desactivar-reloj");
alarm("alarma.mp3", "#activar-alarma", "#desactivar-alarma");
});
d.addEventListener("keydown", (e) => {
shortcuts(e);
});
Sintaxis de teclado.js.
const d = document;
export function shortcuts(e) {
console.log(e.type);
console.log(e.key);
console.log(e.keyCode); // Código que las computadoras le dan a cada tecla
console.log(`Ctrl: ${e.ctrlKey}`);
console.log(`Alt: ${e.altKey}`);
console.log(`Shift: ${e.shiftKey}`);
console.log(e);
if (e.key === "a" && e.altKey) {
alert("Has lanzado una alerta con el teclado");
}
if (e.key === "c" && e.altKey) {
confirm("Has lanzado una confirmación con el teclado");
}
if (e.key === "p" && e.altKey) {
prompt("Has lanzado un aviso con el teclado");
}
}