Ejemplos de JavaScript para principiantes con código

Estos ocho ejemplos cubren las situaciones más comunes de JavaScript en una página web. Cópialos en el editor online (pestañas HTML y JS) y cámbialos: es la forma más rápida de entender qué hace cada línea.

1. Hola mundo en la consola

JavaScript

console.log('Hola, mundo');

2. Contador con un botón

JavaScript

<p id="numero">0</p>
<button id="sumar" type="button">Sumar</button>

JavaScript

let cuenta = 0;
const numero = document.querySelector('#numero');

document.querySelector('#sumar').addEventListener('click', () => {
  cuenta++;
  numero.textContent = cuenta;
});

3. Saludo personalizado con un formulario

JavaScript

<form id="formulario">
  <label for="nombre">Tu nombre</label>
  <input id="nombre">
  <button type="submit">Saludar</button>
</form>
<p id="saludo"></p>

JavaScript

document.querySelector('#formulario').addEventListener('submit', evento => {
  evento.preventDefault();
  const nombre = document.querySelector('#nombre').value.trim();
  document.querySelector('#saludo').textContent =
    nombre ? 'Hola, ' + nombre : 'Escribe tu nombre';
});

preventDefault evita que el navegador recargue la página al enviar.

4. Lista de tareas sencilla

JavaScript

<input id="tarea">
<button id="agregar" type="button">Añadir</button>
<ul id="lista"></ul>

JavaScript

const entrada = document.querySelector('#tarea');
const lista = document.querySelector('#lista');

document.querySelector('#agregar').addEventListener('click', () => {
  const texto = entrada.value.trim();
  if (!texto) return;
  const item = document.createElement('li');
  item.textContent = texto;
  lista.append(item);
  entrada.value = '';
});

5. Alternar modo oscuro

JavaScript

document.body.classList.toggle('oscuro');

Llama a esta línea desde un botón y define en CSS cómo se ve .oscuro. classList.toggle añade la clase si no está y la quita si está.

6. Mostrar la hora y actualizarla

JavaScript

const reloj = document.querySelector('#reloj');

function mostrarHora() {
  reloj.textContent = new Date().toLocaleTimeString('es-ES');
}

mostrarHora();
setInterval(mostrarHora, 1000);

7. Calcular el total de una compra

JavaScript

const carrito = [
  { nombre: 'Cuaderno', precio: 3.5, cantidad: 2 },
  { nombre: 'Lápiz', precio: 0.8, cantidad: 5 }
];

const total = carrito.reduce((suma, p) => suma + p.precio * p.cantidad, 0);
console.log(total.toFixed(2) + ' €'); // 11.00 €

8. Número aleatorio entre 1 y 10

JavaScript

const aleatorio = Math.floor(Math.random() * 10) + 1;
console.log(aleatorio);

Math.random() devuelve un decimal entre 0 y 1 (sin incluir 1); multiplicarlo por 10, redondear hacia abajo y sumar 1 da un entero del 1 al 10.

Cómo sacarles partido

Ejecútalos tal cual y comprueba el resultado.
Cambia un valor y predice qué pasará antes de ejecutar.
Combínalos: por ejemplo, guarda la lista de tareas con localStorage.
Cuando te sientas cómodo, pasa a los proyectos completos o resuelve ejercicios con corrección automática.

Última actualización: 18 de octubre de 2026. Los ejemplos se han comprobado en un navegador actual y en Node.js.