Eventos
Para crear una interacción real en tu sitio web, debes usar eventos. Estos son unas estructuras de código que captan lo que sucede en el navegador, y permite que en respuesta a las acciones que suceden se ejecute un código. El ejemplo más obvio es un clic (click event), que se activa al hacer clic sobre algo. Para demostrar esto, prueba ingresando lo siguiente en tu consola, luego da clic sobre la página actual:
document.querySelector("html").onclick = function () {
alert("¡Ouch! ¡Deja de pincharme!");
};
Hay muchas maneras de enlazar un evento a un elemento; aquí hemos seleccionado el elemento <html> y le asignamos a su propiedad onclick una función anónima (función sin nombre) que contiene el código que se ejecutará cuando el evento suceda.
let miHTML = document.querySelector("html");
miHTML.onclick = function () {};
Sobrecargar tu sitio web de ejemplo
Añadir un cambiador de imagen
En esta sección añadirás otra imagen a tu sitio usando la DOM API y agregarás un poco de código para cambiar entre imágenes al hacer clic.
- Primero que todo, busca una imagen que te guste para tu sitio. Asegúrate que sea del mismo tamaño que la primera, o lo más cerca posible.
- Guarda tu imagen en tu carpeta
images. - Renombra esta imagen «firefox2.png» (sin las comillas).
- Ve a tu archivo
main.jsy agrega el siguiente JavaScript (si tu JavaScript de «Hola Mundo» está aún allí, bórralo).
let miImage = document.querySelector("img");
miImage.onclick = function () {
let miSrc = miImage.getAttribute("src");
if (miSrc === "images/firefox-icon.png") {
miImage.setAttribute("src", "images/firefox2.png");
} else {
miImage.setAttribute("src", "images/firefox-icon.png");
}
};
5. Guarda todos los archivos y carga index.html en tu navegador. Ahora cuando hagas clic en la imagen, ¡esta debe cambiar por otra!
Esto fue lo que sucedió: se almacena una referencia a tu elemento <img> en la variable miImage. Luego, haces que esta propiedad del manejador de evento onclick de la variable sea igual a una función sin nombre (una función «anónima»). Ahora, cada vez que se haga clic en la imagen:
- El código recupera el valor del atributo
srcde la imagen. - El código usa una condicional para comprobar si el valor
srces igual a la ruta de la imagen original:- Si es así, el código cambia el valor de
srca la ruta de la segunda imagen, forzando a que se cargue la otra imagen en el elemento<img>. - Si no es así (significa que ya fue modificada), se cambiará el valor de
srcnuevamente a la ruta de la imagen original, regresando a como era en un principio.
- Si es así, el código cambia el valor de
¿Te ha resultado útil??
0 / 0