Ejercicio: Primeros pasos con JavaScript

⏱ 25 minutos
📶 Nivel: principiante

Objetivo

Escribir tus primeras instrucciones: mostrar mensajes en la consola, crear una constante y cambiar el texto y el color de elementos de la página.

La página de partida

Esta es la página sobre la que trabaja tu código. No la modifiques: escribe solo el JavaScript.

pagina.html

<h1 id="titulo">Mi primera página con JavaScript</h1>
<p id="saludo"></p>

▶ Prueba tu código aquí (opcional)

Código (edítalo y pulsa Ejecutar)

<h1 id="titulo">Mi primera página con JavaScript</h1>
<p id="saludo"></p>
<script>
  // escribe tu JavaScript
</script>

Página (resultado)

Consola

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Escribe console.log("Hola, mundo");.
Escribe una instrucción que muestre en la consola el resultado de 2 + 3 (debe aparecer 5).
Crea una constante nombre con tu nombre y muestra en la consola el texto Hola, seguido de tu nombre (con console.log("Hola,", nombre)).
Con document.getElementById("saludo"), cambia el texto del párrafo #saludo a ¡Hola, JavaScript! usando textContent.
Cambia el texto del título #titulo a JavaScript funciona.
Cambia el color del título con titulo.style.color = "#4f46e5".
Añade un comentario // que explique qué hace cada bloque.

💡 Pista 1: no veo cambios en la página

Asegúrate de que escribes .textContent = "…" (con el igual) y de que el id es exactamente saludo. Revisa la consola por si hay un error.

💡 Pista 2: ¿cómo guardo un elemento para usarlo después?

Con una variable: const titulo = document.getElementById("titulo"); y luego titulo.textContent = "…".

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código JavaScript

✅ Ver una solución de ejemplo

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

app.js

// 1. Mensajes en la consola
console.log("Hola, mundo");
console.log(2 + 3);

const nombre = "Ana";
console.log("Hola,", nombre);

// 2. Cambiar la página
const saludo = document.getElementById("saludo");
saludo.textContent = "¡Hola, JavaScript!";

const titulo = document.getElementById("titulo");
titulo.textContent = "JavaScript funciona";
titulo.style.color = "#4f46e5";

💡 🏁 Reto extra (opcional)

Escribe un programa que muestre en la consola tu nombre, tu edad y tu ciudad en tres líneas separadas. Después intenta provocar a propósito un ReferenceError y lee el mensaje.