Haz llegado al final de este artículo pero, ¿Recuerdas la información más importante? Para verificar que has retenido esta información antes de que continúes, pon a prueba tus habilidades:
El objetivo de esta prueba de habilidad es evaluar si has entendido nuestro artículo de Introducción a los eventos.
Puede probar soluciones en los editores interactivos a continuación; sin embargo, puede resultar útil descargar el código y utilizar una herramienta en línea como CodePen, jsFiddle o Glitch para trabajar en las tareas.
Si se queda atascado, pídanos ayuda; consulte la sección Evaluación o ayuda adicional al final de esta página.
En los ejemplos siguientes, si hay un error en su código, se mostrará en el panel de resultados de la página para ayudarle a intentar encontrar la respuesta (o en la consola JavaScript del navegador, en el caso del archivo descargable). versión).
Algunas de las preguntas a continuación requieren que escriba algún código de manipulación DOM para completarlas, como crear nuevos elementos HTML, configurar su contenido de texto para que sea igual a valores de cadena específicos y anidarlos dentro de elementos existentes en la página, todo a través de JavaScript.
Aún no hemos enseñado esto explícitamente en el curso, pero habrá visto algunos ejemplos que lo utilizan y nos gustaría que investigue un poco sobre qué API DOM necesita para responder con éxito las preguntas. Un buen punto de partida es nuestro tutorial sobre manipulación de documentos.
En nuestra primera tarea relacionada con eventos, necesita crear un controlador de eventos simple que haga que el texto dentro del botón (btn) cambie cuando se hace clic en él y vuelva a cambiar cuando se haga clic nuevamente.
El HTML no debe cambiarse; solo el JavaScript.
Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:
Descarga el punto de partida para que esta tarea funcione en tu propio editor o en un editor online.
Ahora veremos los eventos del teclado. Para aprobar esta evaluación, debe crear un controlador de eventos que mueva el círculo alrededor del lienzo proporcionado cuando se presionan las teclas WASD en el teclado. El círculo se dibuja con la función drawCircle(), que toma los siguientes parámetros como entradas:
Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:
Descarga el punto de partida para que esta tarea funcione en tu propio editor o en un editor online.
En la siguiente tarea relacionada con eventos, debe configurar un detector de eventos en el elemento principal de los botones <button> (<div class="button-bar"> … </div>), que cuando se invoca haciendo clic en cualquiera de los botones establecerá el fondo del barra de botones al color contenido en el atributo de color de datos del botón.
Queremos que resuelvas esto sin recorrer todos los botones y sin darle a cada uno su propio detector de eventos.
Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:
Descarga el punto de partida para que esta tarea funcione en tu propio editor o en un editor online.
Puedes practicar estos ejemplos en los editores interactivos anteriores.
Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0