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:
Ejercicio en el que se práctica de modo fácil la lógica de programación mediante el uso de funciones declaradas en JS.
En este ejercicio repasamos los conceptos relativos a la declaración de variables en javascript. ¿Qué declaraciones son incorrectas? Detéctalas y corrígelas.
Ejercicio javascript dónde se practica el uso de for y de while para la resolución de un mismo problema JS. Incluye solución.
Este es un simple ejercicio cuyo objetivo es únicamente coger un poco de soltura usando expresiones típicas en javascript.
Ejercicio javascript solucionado para crear una lista de recordatorios y que es capaz de resetear todos los nodos. Apuntes de clase.
En este ejercicio practicamos la diferencia entre usar un string y una variable. También otras normas básicas de sintaxis de javascript.
No Comments