JavaScript: Añadir interactividad

¿Qué es JavaScript?

JavaScript es un lenguaje de programación completo: tiene todas las características clásicas de programación que quizá hayas visto en otros lenguajes (o de las que al menos hayas oído hablar), como las variables, los bucles y las funciones.

JavaScript, cuando se usa en páginas web (aunque también se puede usar en otros lugares), suele funcionar así:

• Obtiene referencias a uno o más valores, como números, o a elementos de la página.
• Hace algo con esos valores, como sumar los números.
• Devuelve un resultado que se puede usar para hacer otra cosa más adelante. Por ejemplo, quizá quieras mostrar en la página la suma de esos números.

Veamos un ejemplo. Usaremos la misma lista básica que vimos en los últimos artículos:

<p>Instrucciones para la vida:</p>

<ul>
  <li>Comer</li>
  <li>Dormir</li>
  <li>Repetir</li>
</ul>

También definiremos una clase CSS llamada .done que dará estilo a cualquier elemento al que se aplique, para que parezca una tarea completada, con el texto en verde y tachado. En el siguiente paso la aplicaremos a nuestros elementos <li> con JavaScript.

.done {
  color: darkseagreen;
  text-decoration: line-through solid black 2px;
}

Ahora pasemos al JavaScript. Aquí, primero guardamos las referencias a los elementos <li> en una variable llamada listItems. Después definimos una función llamada toggleDone() que añade la clase done a un elemento de la lista si todavía no la tiene, y la quita si ya la tiene. Por último, recorremos los elementos de la lista (con forEach()) y añadimos un detector de eventos (con addEventListener()) a cada uno, para que al hacer clic en él se alterne la clase done y se aplique el CSS que definimos antes.

const listItems = document.querySelectorAll("li");

function toggleDone(e) {
  if (!e.target.className) {
    e.target.className = "done";
  } else {
    e.target.className = "";
  }
}

listItems.forEach((item) => {
  item.addEventListener("click", toggleDone);
});

No te preocupes si ahora no entiendes el JavaScript anterior. Familiarizarse con JavaScript es más difícil que familiarizarse con HTML y CSS, pero las cosas quedarán más claras más adelante en el curso.

Este ejemplo se verá así en un navegador web:

Prueba a hacer clic varias veces en los elementos de la lista y fíjate en cómo se activan y desactivan los estilos de «hecho». No está nada mal para 11 líneas de JavaScript.

Un recorrido por «Hello world!»

Para empezar a escribir algo de JavaScript, te guiaremos para añadir un ejemplo Hello world! a tu sitio web de ejemplo. (Hello world! es el ejemplo introductorio estándar en programación).

1. Dentro de tu carpeta first-website o de la carpeta de ejemplo que acabas de descargar, crea una carpeta nueva llamada scripts.

2. Dentro de la carpeta scripts, crea un documento de texto nuevo llamado main.js y guárdalo.

3. Ve a tu archivo index.html y escribe este código en una línea nueva, justo antes de la etiqueta de cierre </head>:

   html

   <script async src="scripts/main.js"></script>
   

   Hace lo mismo que el elemento <link> para el CSS: aplica el JavaScript a la página para que pueda afectar al HTML (junto con el CSS y cualquier otra cosa de la página).

4. Añade este código a tu archivo scripts/main.js:

   js

   // Guarda una referencia al <h1> en una variable
   const myHeading = document.querySelector("h1");
   // Actualiza el contenido de texto del <h1>
   myHeading.textContent = "Hello world!";
   

5. Asegúrate de que los archivos HTML y JavaScript estén guardados y carga index.html en tu navegador. Deberías ver algo así:

Veamos cómo funciona este ejemplo.

Usamos JavaScript para cambiar el texto del encabezado a Hello world!. Obtuvimos una referencia al encabezado y la guardamos en una variable llamada myHeading (un contenedor que guarda un valor). Es parecido a cómo se aplica CSS a los elementos: primero seleccionas los elementos que quieres modificar con un selector CSS y después defines los estilos que quieres para ellos. En ambos casos, cuando quieres hacer algo con un elemento, primero tienes que seleccionarlo.

Después, establecimos el valor de la propiedad textContent de la variable myHeading (que representa el contenido de texto del elemento <h1>) en Hello world!.

Las líneas que empiezan por // son comentarios de JavaScript. Al igual que los comentarios de HTML y CSS, el navegador los ignora, y te permiten añadir notas sobre tu código para explicar cómo funciona.

Sigamos y añadamos algunas funciones nuevas a nuestro sitio de ejemplo.

Añadir un cambiador de imágenes

En esta sección, usarás JavaScript y funciones de la API del DOM para alternar entre dos imágenes. El cambio ocurrirá cuando un usuario haga clic en la imagen que se muestra.

1. Elige otra imagen para mostrar en tu sitio de ejemplo. Lo ideal es que tenga el mismo tamaño que la que añadiste antes, o lo más parecido posible.

2. Guarda esta imagen en tu carpeta images.

3. Añade el siguiente código JavaScript a tu archivo main.js, asegurándote de reemplazar firefox2.png y las dos apariciones de firefox-icon.png por los nombres de tu segunda y tu primera imagen, respectivamente.

   js

   const myImage = document.querySelector("img");
   
   myImage.addEventListener("click", () => {
     const mySrc = myImage.getAttribute("src");
     if (mySrc === "images/firefox-icon.png") {
       myImage.setAttribute("src", "images/firefox2.png");
     } else {
       myImage.setAttribute("src", "images/firefox-icon.png");
     }
   });
   

4. Guarda todos los archivos y carga index.html en el navegador. Ahora, al hacer clic en la imagen, debería cambiar a la otra.

En este código, guardaste una referencia a tu elemento <img> en la variable myImage. Después le asignaste una función manejadora del evento click. Cada vez que se hace clic en el <img>, la función hace lo siguiente:

• Obtiene el valor del atributo src de la imagen.
• Usa un condicional (la estructura if...else) para comprobar si el valor de src es igual a la ruta de la imagen original:
  • Si lo es, el código cambia el valor de src a la ruta de la segunda imagen, lo que obliga a cargar la otra imagen dentro del elemento <img>.
  • Si no lo es (es decir, la imagen ya se ha cambiado), el valor de src vuelve a la ruta de la imagen original.

Añadir un mensaje de bienvenida personalizado

A continuación, vamos a cambiar el encabezado de la página para que muestre un mensaje de bienvenida personalizado cuando el usuario visite el sitio por primera vez. Este mensaje de bienvenida se guardará en el navegador con la API de Web Storage, así que, si el usuario sale del sitio y vuelve más tarde, sus datos personalizados seguirán ahí. También incluiremos una forma de que el usuario cambie el mensaje.

1. En index.html, añade la siguiente línea justo antes de la etiqueta de cierre </body>:

   html

   <button>Change user</button>
   

2. En main.js, pon el siguiente código al final del archivo, exactamente como está escrito. Crea referencias al nuevo botón y al encabezado, y guarda cada una en una variable:

   js

   let myButton = document.querySelector("button");
   let myHeading = document.querySelector("h1");
   

3. Añade la siguiente función para establecer el saludo personalizado. Todavía no hará nada; llamaremos a la función más adelante.

   js

   function setUserName() {
     const myName = prompt("Por favor, introduce tu nombre.");
     localStorage.setItem("name", myName);
     myHeading.textContent = `Mozilla is cool, ${myName}`;
   }
   

   La función setUserName() contiene una función prompt(), que pide al usuario que introduzca datos y los guarda en una variable después de que haga clic en Aceptar. En este ejemplo, pedimos al usuario que introduzca un nombre y lo guardamos en myName.
   
   

   Después, el código usa la API de Web Storage, que nos permite guardar datos en el navegador y recuperarlos más tarde. Usamos la función localStorage.setItem() para crear y guardar un elemento de datos llamado "name", y le damos como valor la variable myName, que contiene lo que escribió el usuario.
   
   

   Por último, establecemos el textContent del encabezado en una cadena que incluye el nombre guardado del usuario.

4. Añade el siguiente bloque condicional después de la declaración de la función. Es nuestro código de inicialización: se ejecuta cuando la página se carga por primera vez para poner en marcha el programa:

   js

   if (!localStorage.getItem("name")) {
     setUserName();
   } else {
     const storedName = localStorage.getItem("name");
     myHeading.textContent = `Mozilla is cool, ${storedName}`;
   }
   

   La primera línea de este bloque usa el operador de negación (NOT lógico, representado por el carácter !) para comprobar si el elemento de datos name no está ya guardado en localStorage. Si no lo está, se ejecuta la función setUserName() para crearlo. Si existe (es decir, el usuario estableció un nombre de usuario en una visita anterior), obtenemos el nombre guardado con localStorage.getItem() y establecemos el textContent del encabezado en una cadena más el nombre del usuario, igual que hicimos dentro de setUserName().

5. Añade al botón una función manejadora del evento click. Al hacer clic, se ejecuta setUserName(). Esto permite al usuario guardar otro nombre si quiere.

   js

   myButton.addEventListener("click", () => {
     setUserName();
   });
   

6. Guarda todos los archivos y carga index.html en el navegador. Debería pedirte de inmediato que introduzcas tu nombre. Cuando lo hagas, aparecerá dentro del <h1> como parte del saludo personalizado. Fíjate en que la personalización se mantiene incluso después de recargar la página. Puedes hacer clic en el botón «Change user» para introducir un nombre nuevo.

¿Un nombre de usuario null?

Cuando ejecutes el ejemplo y aparezca el cuadro de diálogo que te pide tu nombre, prueba a pulsar el botón Cancelar. Deberías acabar con un título que dice Mozilla is cool, null. Esto ocurre porque, al cancelar el cuadro de diálogo, el valor se establece en null. En JavaScript, null es un valor especial que representa la ausencia de valor.

Prueba también a hacer clic en Aceptar sin escribir ningún nombre. Deberías acabar con un título que dice Mozilla is cool,, porque has establecido myName en una cadena vacía.

Para evitar estos problemas, puedes añadir otro condicional que compruebe que el usuario no ha introducido un nombre en blanco. Actualiza tu función setUserName() así:

function setUserName() {
  const myName = prompt("Por favor, introduce tu nombre.");
  if (!myName) {
    setUserName();
  } else {
    localStorage.setItem("name", myName);
    myHeading.textContent = `Mozilla is cool, ${myName}`;
  }
}

En lenguaje humano, esto significa: si myName no tiene valor, vuelve a ejecutar setUserName() desde el principio. Si tiene un valor (si la afirmación anterior no es cierta), guarda el valor en localStorage y establécelo como texto del encabezado.

Conclusión

Si has seguido todas las instrucciones de este artículo, deberías acabar con una página parecida a la de la imagen de abajo. También puedes ver nuestra versión.

Si te quedas atascado, puedes comparar tu trabajo con nuestro código de ejemplo terminado en GitHub.

En este artículo apenas hemos arañado la superficie de JavaScript. Aprenderás mucho más en nuestro módulo principal Scripting dinámico con JavaScript, más adelante en el curso.

Véase también

Scrimba: Learn JavaScript ^{socio de aprendizaje de MDN}

El curso Learn JavaScript de Scrimba te enseña JavaScript resolviendo más de 140 desafíos de programación interactivos y construyendo proyectos que incluyen un juego, una extensión de navegador e incluso una aplicación móvil. Scrimba ofrece lecciones interactivas divertidas impartidas por profesores expertos.

Learn JavaScript

¡Es un recurso excelente para quienes quieren dedicarse al desarrollo web! Aprende JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiado por una evaluación automática. Las primeras 40 lecciones son gratuitas. El curso completo está disponible por un pequeño pago único.

• Anterior
• Overview: Tu primer sitio web
• Siguiente