Programa que mediante addEventListener invoca un saludo auténtico

Programa que mediante addEventListener invoca un saludo auténtico

Print Friendly, PDF & Email
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>
un saludo a todos
¡hola a todos!

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!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.