Todos los sitios web que usas hoy ejecutan JavaScript. El menú que se abre, el formulario que comprueba tu correo, el chat que se actualiza en directo: eso es JavaScript trabajando.

También es el lenguaje detrás de muchas herramientas de pruebas, como Playwright y Cypress. Por eso aprenderlo ayuda tanto a desarrolladores como a testers.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación para la web. HTML da estructura a una página, CSS le da estilo y JavaScript le da comportamiento. Con Node.js también puedes ejecutar JavaScript fuera del navegador, en servidores y en tu propio ordenador.

Ejecuta tu primer código

No necesitas instalar nada. Abre tu navegador, pulsa F12, ve a la pestaña Consola y escribe:

console.log("¡Hola, JavaScript!");

Para usarlo en una página, añade un script a un archivo HTML:

<!DOCTYPE html>
<html>
  <body>
    <h1 id="title">Hola</h1>
    <script src="app.js"></script>
  </body>
</html>

Variables y tipos de datos

const name = "Asha";     // no se puede reasignar
let score = 10;          // puede cambiar
score = score + 5;

const isActive = true;   // booleano
const nothing = null;    // vacío a propósito
let notSet;              // undefined

console.log(typeof name, typeof score);

Tipos principales: string, number, boolean, null, undefined, object y symbol. Compara siempre con === (igual estricto), no con ==, para evitar sorpresas.

Funciones

function add(a, b) {
  return a + b;
}

const multiply = (a, b) => a * b;   // función flecha

console.log(add(2, 3), multiply(4, 5));

Las funciones se pueden pasar de un lado a otro como cualquier valor. Esa idea impulsa la mayor parte del JavaScript moderno.

Arrays y objetos

const tools = ["Playwright", "Cypress", "Selenium"];
tools.push("Appium");

const names = tools.map(t => t.toUpperCase());
const long = tools.filter(t => t.length > 7);

const user = { name: "Asha", role: "tester", skills: ["JS", "SQL"] };
console.log(user.name, user.skills[0]);

const { role } = user;           // desestructuración
const copy = { ...user, role: "lead" };   // spread

El DOM y los eventos

El DOM es la página tal como la ve JavaScript. Puedes leerla y cambiarla.

const title = document.querySelector("#title");
const button = document.createElement("button");
button.textContent = "Púlsame";
document.body.append(button);

button.addEventListener("click", () => {
  title.textContent = "¡Has pulsado el botón!";
});

Un evento es algo que ocurre, como un clic, una pulsación de tecla o el envío de un formulario. Lo escuchas y ejecutas código cuando ocurre.

Promesas y async/await

Algunas tareas tardan, como cargar datos de un servidor. JavaScript no se congela mientras espera. Usa promesas, y async/await las hace fáciles de leer.

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
  console.log("Inicio");
  await wait(1000);
  console.log("Un segundo después");
}

run();

Llama a una API con fetch

async function loadUser() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
    if (!res.ok) throw new Error("La solicitud falló: " + res.status);
    const user = await res.json();
    console.log(user.name);
  } catch (err) {
    console.error(err.message);
  }
}

loadUser();

Comprueba siempre res.ok y envuelve la llamada en try/catch. ¿Quieres entender qué ocurre detrás de estas llamadas? Lee nuestras buenas prácticas de API REST.

Miniproyecto: una lista de tareas

<input id="task" placeholder="Nueva tarea">
<button id="add">Añadir</button>
<ul id="list"></ul>

<script>
  const input = document.querySelector("#task");
  const list = document.querySelector("#list");

  document.querySelector("#add").addEventListener("click", () => {
    const text = input.value.trim();
    if (!text) return;

    const li = document.createElement("li");
    li.textContent = text;
    li.addEventListener("click", () => li.remove());
    list.append(li);
    input.value = "";
  });
</script>

Después, guarda las tareas en localStorage para que sigan ahí tras recargar la página.

Errores comunes de los principiantes

• Usar == en lugar de ===.
• Olvidar await dentro de una función async.
• Cambiar el DOM antes de que la página haya cargado.
• Copiar código sin leer los errores de la consola.

Cuando estés listo, aprende TypeScript, que añade tipos a JavaScript y detecta errores pronto. Si te gustan las pruebas, prueba la automatización de navegadores con las herramientas de nuestra guía de herramientas de automatización de pruebas.

Preguntas frecuentes

Sigue aprendiendo