12 Jun Programa que mediante addEventListener invoca un saludo auténtico
En la red se encuentra disponible el típico ejercicio con un window.alert().
Cansado de este ejemplo en esta publicación encontrarás un ejercicio de iniciación con un saludo auténtico.
Los conceptos que te serán de utilidad son:
Pasemos al ejercicio.
Enunciado
Escribe un programa que cuando se pulse el botón cree un nodo imagen y lo inserte en el documento web.
El nodo debe contener la imagen saludo.gif adjunta.
Haz que cuando se haga doble click sobre una imagen se elimine el primer nodo imagen generado.
No hay límite en el nombre de imágenes que se pueden añadir y todas se deben poder eliminar.
Atención: el doble click no es correlativo, un doble click sobre una imagen no necesariamente eliminará esta sino la primera. No se pide el uso de la instrucción this para resolver este ejercicio.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejercicio addEventListener</title>
<meta name="author" content="Francesc Ricart"/>
</head>
<body>
<button>Cuando me pulses activaré un evento javascript</button>
<script>
// escribe aquí tu código JS
</script>
</body>
</html>
Solución del ejercicio
Observa que todas las variables empiezan con z.
Esto se debe a una estrategia con mis alumnos de web que les indica que me estoy inventando un nombre. Simplemente es para ayudar a entender que los nombres de las variables son puramente inventados.
- La función saludo() genera un nodo y lo injerta en el documento.
- La función eliminarMano() pide una lista de nodos de tipo imagen y elimina el primero de la lista. Es activado mediante un doble click sobre la última imagen del documento.
window.addEventListener("load",zInit);
function zInit(){
var zBotones = document.querySelectorAll("button");
zBotones[0].addEventListener("click",saludo);
};
function saludo(){
zMano = document.createElement("img");
zMano.style.display="block";
var zBody = document.querySelectorAll("body")[0];
zMano.src = "saludo.gif";
zBody.appendChild(zMano);
zMano.addEventListener("dblclick",eliminarMano);
}
function eliminarMano(){
document.querySelectorAll("img")[0].parentNode.removeChild(zMano);
}Para mejorar el código deberíamos usar this. De este modo valdría hacer click sobre cualquier imagen y no específicamente la última que se haya injertado en el body.
¡Hola!
Querido lector,
Este es un buen ejercicio para la asimilación de conceptos. ¡Espero que te sea de utilidad!
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
Repasamos los distintos métodos directos e indirectos y estrategias para acceder e identificar los nodos del DOM de modo inequívoco.
¿Estás cansado de buscar como solucionar el error concreto de tu script? La consola del navegador es tu ayuda. ¡Deja de buscar!
Javascript es un lenguaje basado en métodos. Existen muchos métodos predefinidos que afectan a arrays, strings, números y casi cualquier variable de tipo objeto. Veamos un resumen de los más important...
En esta entrada encontrarás 3 formas distintas de modificar tu ubicación de búsqueda en google sin necesidad de que te tengas que desplazar.
Ejercicio práctico con solución sobre como crear un menú vertical con submenú vertical desplegable en javascript sin jquery. Incluye solución.
Ejercicio javascript resuelto en el que see plantea un script para cargar una imagen aleatoria cada vez que se clica un botón.
No Comments