1. ¿Qué es la animación de imágenes en JS?

Consiste en cambiar o modificar dinámicamente las imágenes que aparecen en una página web mediante código. Esto se logra usando funciones, eventos y condicionales para que las imágenes respondan a acciones del usuario, como hacer clic o mover el cursor. En nuestros ejercicios, utilizamos el clic del mouse para producir el cambio.

2. Estructura básica con HTML

HTML (HyperText Markup Language) es el lenguaje utilizado para crear y estructurar los elementos de una página web. En nuestro proyecto, HTML permite colocar:

• Títulos.
• Párrafos.
• Imágenes.
• Listas.
• Separadores.
• Pie de página.

Ejemplo:
<img src="off.png" id="bombillo">

Esta instrucción coloca una imagen en la página. El atributo id sirve para identificar de forma única un elemento dentro del documento HTML. Gracias a él, JavaScript puede encontrar y manipular ese elemento directamente usando: document.getElementById("bombillo")

3. El rol de JavaScript

JavaScript es un lenguaje de programación que permite agregar comportamiento e interactividad a una página web. En nuestro proyecto, JavaScript permite que una imagen cambie cuando el estudiante hace clic sobre ella.

4. ¿Qué es una etiqueta HTML?

Es una instrucción utilizada para indicar al navegador qué elemento debe colocar o interpretar en una página web. En resumen: una etiqueta HTML es como una pieza de construcción que le dice al navegador qué tipo de contenido mostrar y cómo debe comportarse.

Ejemplos utilizados en nuestro proyecto de animación de imágenes en JavaScript

• <html>: Indica el inicio y final del documento HTML.
• <head>: Contiene información de configuración de la página.
• <title>: Define el título de la página.
• <body>: Contiene el contenido visible.
• <h1>: Crea un encabezado principal.
• <h2>: Crea un subtítulo.
• <p>: Crea un párrafo.
• <img>: Inserta una imagen.
• <br>: Inserta un salto de línea.
• <hr>: Inserta una línea horizontal.
• <script>: Permite escribir código JavaScript.
• <footer>: Define el pie de página.

5. Elemento o etiqueta <img>

Se utiliza para mostrar una imagen en una página web. En nuestro ejercicio utilizamos:

<img src="off.png" id="bombillo" onclick="cambiarBombillo()">

Esta línea contiene varios elementos importantes:

• src: Indica qué archivo de imagen debe mostrar el navegador.
• Id: Permite asignar un identificador único a un elemento HTML. Gracias a ese identificador, JavaScript puede localizar posteriormente esa imagen.
• Onclick: En JavaScript es un evento que se activa cuando el usuario hace clic con el mouse sobre un elemento de la página web.

6. ¿Qué es un evento?

Un evento es una acción que ocurre en una página web y que puede provocar que JavaScript ejecute una instrucción. Algunos eventos comunes son:

• Clic del mouse.
• Movimiento del mouse.
• Pulsación de una tecla.
• Carga de una página.

En nuestro proyecto utilizamos principalmente el evento: Onclick, que significa “al hacer clic”.

Ejemplo escrito: onclick="cambiarBombillo();". Significa que cuando el usuario haga clic sobre esta imagen, se ejecutará la función cambiarBombillo().

7. ¿Qué es una función?

Es un conjunto de instrucciones que se agrupan bajo un nombre para realizar una determinada tarea. En nuestro proyecto se representó así: function cambiarBombillo(){...}

• La función se llama: cambiarBombillo
• Su tarea es cambiar la imagen del bombillo.

8. Funciones sin argumentos

En nuestro taller utilizamos funciones con paréntesis vacíos. Los paréntesis están vacíos porque esta función no recibe datos o argumentos desde el evento.

Ejemplos de funciones sin argumentos usados en nuestro taller:

• function cambiarBombillo()
• function cambiarCara()
• function cambiarLuzSemaforo()
• function cambiarCarrera() (o la función usada en su ejemplo de 4 historias)
• function cambiarEmoji()

9. ¿Qué es una variable?

Es un espacio utilizado por un programa para almacenar temporalmente un dato o referencia. En JavaScript tradicional podemos declarar una variable utilizando: var o let.

En nuestro taller lo usamos así: var imagen = document.getElementById("bombillo");. Aquí se está utilizando imagen para guardar la referencia al elemento HTML encontrado.

10. ¿Qué significa document?

Representa el documento HTML que está cargado en el navegador. Por medio de document, JavaScript puede acceder a los elementos de la página.

Ejemplo en JavaScript: document.getElementById("bombillo"). Podemos interpretarlo de manera sencilla como: «Busca dentro de esta página el elemento que tenga determinado ID.»

11. ¿Qué significa getElementById()?

Es un método de JavaScript que permite buscar un elemento HTML utilizando su atributo id.

12. ¿Qué significa imagen.src?

Recordemos que imagen representa nuestra imagen, mientras que src representa la dirección o archivo de la imagen; por lo tanto, imagen.src permite consultar o modificar la imagen que está mostrando el elemento.

Por ejemplo: imagen.src = "on.png"

13. ¿Qué hace match()?

Permite comprobar si una cadena de texto coincide con un determinado patrón o contiene determinada información. En nuestro caso se utiliza para comprobar qué imagen está actualmente cargada.

Ejemplo: if (imagen.src.match("on.png")) puede interpretarse como: «Si la imagen actual corresponde a on.png…»

14. Ciclo condicional IF

El IF simple tiene una sola condición y una acción cuando esa condición es verdadera.

Diferencias entre los 3 tipos de IF

• IF simple: if (Si ocurre algo, realiza una acción)
• IF compuesto: if + else (Si ocurre algo haz A, si no haz B)
• IF múltiple: if + else if + else (Comprueba varias posibilidades)

Para recordar

• Simple: una condición
• Compuesto: dos caminos
• Múltiple: varias posibilidades

15. ¿Cómo funciona nuestra animación?

Podemos resumir todo el proceso de esta manera: