11 Jun Asignación de eventos. Limpiar el html de JS en línea
En javascript existen 3 formas diferenciadas de ejecutar eventos en un documento web.
Mediante un ejercicio de clase del curso IFCD0110 os animo a practicar como podemos desvincular al máximo javascript del html.
Esta lectura te puede servir para repasar la teoría necesaria para resolver el ejercicio que hoy se presenta.
Sin más dilación pasemos al ejercicio.
Enunciado
Un estudiante del curso de web está aprendiendo la teoría relativa a los eventos javascript.
Le han explicado como llamar eventos en línea con el html pero ahora está aprendiendo nuevas estrategias para la asignación de eventos.
¿Puedes ayudarle a desvincular el máximo posible el html y el javascript?
(traducción: mantén en una hoja el HTML y el CSS y crea un hoja de nombre functions.js dónde escribir todo el JS)
El código del que dispone el alumno es el que se te proporciona a continuación.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Eventos</title>
<style>
#contenedor{
width:300px;
height:300px;
border:1px solid #000;
}
</style>
</head>
<body>
<p onclick="pintarAzul()">Haz click y se pintará azul</p>
<p onmouseover="pintarRojo()">Saca el ratón y se pintará rojo</p>
<p ondblclick="pintarVerde()">Haz doble click y se pintará verde</p>
<input type="text" oninput="escribirTexto()"/>Escribe algo y se reproducirá en el contenedor
<p onmouseenter="pintarBlanco()">Pasa el ratón por encima y se pintará blanco</p>
<div id="contenedor"></div>
<script>
var zContenedor = document.getElementById("contenedor");
var zContadorLetras = 0;
function pintarAzul(){
zContenedor.style.backgroundColor = "blue";
}
function pintarRojo(){
zContenedor.style.backgroundColor = "red";
}
function pintarVerde(){
zContenedor.style.backgroundColor = "green";
}
function escribirTexto(){
zContadorLetras++;
zContenedor.innerHTML = zContadorLetras;
}
function pintarBlanco(){
zContenedor.style.backgroundColor = "white";
}
</script>
</body>
</html>Solución del ejercicio. Estrategia 1
La primera solución posible es tratar las llamadas a eventos javascript como si se tratara de atributos.
Un atributo es cualquier información que acompaña a la etiqueta o elemento web. Por ejemplo , src, target, href, … son atributos.
Pues bien, faltaría más los eventos también lo son y se pueden llamar y modificar del mismo modo.
El código html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Eventos</title>
<style>
#contenedor{
width:300px;
height:300px;
border:1px solid #000;
}
</style>
</head>
<body>
<p>Haz click y se pintará azul</p>
<p>Saca el ratón y se pintará rojo</p>
<p>Haz doble click y se pintará verde</p>
<input type="text"/>Escribe algo y se reproducirá en el contenedor
<p>Pasa el ratón por encima y se pintará blanco</p>
<div id="contenedor"></div>
<script src="functions.js"></script>
</body>
</html>El archivo functions.js
var zContenedor = document.getElementById("contenedor");
var zContadorLetras = 0;
var zParrafos = document.querySelectorAll("p");
var zInputs = document.querySelectorAll("input");
zParrafos[0].onclick = pintarAzul; //SIN EL PARÉNTESIS
/*fijaros en el problema. esta instrucción sobreescrible la línea 7.
se ejecuta siempre la última instrucción*/
zParrafos[0].onclick = saludo;
zParrafos[1].onmouseover = pintarRojo;
zParrafos[2].ondblclick = pintarVerde;
zParrafos[3].onmouseenter= pintarBlanco;
zInputs[0].oninput = escribirTexto;
function pintarAzul(){
zContenedor.style.backgroundColor = "blue";
}
function saludo(){
alert("mira ya no pinta porqué he sido el último");
}
function pintarRojo(){
zContenedor.style.backgroundColor = "red";
}
function pintarVerde(){
zContenedor.style.backgroundColor = "green";
}
function escribirTexto(){
zContadorLetras++;
zContenedor.innerHTML = zContadorLetras;
}
function pintarBlanco(){
zContenedor.style.backgroundColor = "white";
}Solución del ejercicio. Estrategia 2
La solución previamente presentada es compatible con todos los navegadores web. Incluidas versiones anteriores a IE8.
Sin embargo el problema es que se sobrescribe posibles instrucciones anteriores. Por ejemplo no podemos ejecutar 2 eventos click distintos que hagan cosas diferentes.
Para ello la solución es usar la instrucción .addEventListener()
El código html quedará igual. Se omite.
El archivo functions.js
var zContenedor = document.getElementById("contenedor");
var zParrafos = document.querySelectorAll("p");
var zInputs = document.querySelectorAll("input");
var zContadorLetras = 0;
zParrafos[0].addEventListener("click",pintarAzul);
zParrafos[0].addEventListener("click",saludos);
zParrafos[1].addEventListener("mouseover",pintarRojo);
zParrafos[2].addEventListener("dblclick",pintarVerde);
zParrafos[3].addEventListener("mouseenter",pintarBlanco);
zInputs[0].addEventListener("input",escribirTexto);
function pintarAzul(){
zContenedor.style.backgroundColor = "blue";
}
function saludo(){
window.alert("¡funcionan los dos clicks!");
}
function pintarRojo(){
zContenedor.style.backgroundColor = "red";
}
function pintarVerde(){
zContenedor.style.backgroundColor = "green";
}
function escribirTexto(){
zContadorLetras++;
zContenedor.innerHTML = zContadorLetras;
}
function pintarBlanco(){
zContenedor.style.backgroundColor = "white";
}Observar que ahora si podemos asignar dos funciones distintas sobre un mismo tipo de evento.
En la solución presentada fijaros que el primer párrafo cuando se pulsa desencadena dos acciones diferenciadas.
¡Hola!
Querido lector,
Deseo que este pequeño ejemplo te haya sido de utilidad.
Fijaros que no se ha usado el evento onload.
Os animo a mejorar el código.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
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 trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
Explicamos como podemos obtener el ancho y la altura real disponibles de la ventana del navegador mediante Javascript puro y con jQuery
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.
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
En este resumen encontrarás dos ejemplos explicados paso a paso del while. Incluye una cuenta creciente y una cuenta decreciente.
No Comments