Tutorial: tu primer script en JavaScript

Ahora que ya tienes una página con HTML y CSS, vamos a agregarle un botón que reaccione cuando alguien haga clic. Tranquilo, nadie va a explotar, es solo JavaScript.

Paso 1: agrega un botón a tu HTML

En tu archivo index.html, dentro de <body>, agrega:

<button id="boton-saludo">Saludar</button>
<p id="mensaje"></p>
<script src="script.js"></script>

Paso 2: crea tu archivo JavaScript

Crea script.js en la misma carpeta:

const boton = document.querySelector('#boton-saludo');
const mensaje = document.querySelector('#mensaje');

boton.addEventListener('click', () => {
  mensaje.textContent = '¡Hola! Acabas de ejecutar tu primer JavaScript.';
});

Paso 3: prueba en el navegador

Abre index.html, haz clic en el botón "Saludar" y observa cómo aparece el mensaje. Si no pasa nada, revisa la consola del navegador antes de culpar a la computadora, casi siempre es un typo (lo sabemos por experiencia, no juzgamos). Acabas de:

1. Seleccionar elementos del HTML desde JavaScript.
2. Escuchar un evento (click).
3. Modificar el contenido de la página dinámicamente.

Reto extra

Modifica el script para que, en lugar de un mensaje fijo, salude usando el valor de un campo de texto:

<input id="nombre" type="text" placeholder="Tu nombre" />

const input = document.querySelector('#nombre');

boton.addEventListener('click', () => {
  mensaje.textContent = `¡Hola, ${input.value || 'amigo'}!`;
});

¡Felicidades! Ya combinaste HTML, CSS y JavaScript en un solo proyecto. Guárdate ese ego boost, te lo has ganado (aunque tu código tenga un console.log de más por ahí).