Introducción

JavaScript es el lenguaje de programación utilizado para añadir comportamiento e interactividad a las páginas web. Mientras que HTML define la estructura del contenido y CSS controla su presentación, JavaScript permite crear aplicaciones dinámicas capaces de responder a las acciones del usuario, realizar cálculos, tomar decisiones, repetir tareas, validar datos y comunicarse con servidores.

En esta unidad estudiarás los fundamentos del lenguaje: su sintaxis, los tipos de datos, las variables, los operadores, las estructuras de control, las funciones y otros conceptos básicos que constituyen la base de cualquier programa en JavaScript.

Estos conocimientos serán imprescindibles para abordar en unidades posteriores temas como la manipulación del DOM, la gestión de eventos, la validación de formularios, el consumo de APIs o el uso de librerías y frameworks como React o Angular.

El objetivo de esta unidad es comprender los conceptos esenciales del lenguaje y aprender a utilizarlos para desarrollar programas sencillos, claros y fáciles de mantener.

Conocimiento previo

• Introducción a HTML
• Introducción a la programación
• DevTools

Referencias

• MDN Web Docs - JavaScript
• MDN Web Docs - Guía de JavaScript
• MDN Web Docs - Referencia de JavaScript
• MDN Web Docs - Web Storage API
• MDN Web Docs - JSON
• TypeScript Handbook

Índice

1. Qué es JavaScript y dónde se ejecuta
   1.1. Historia de Javascript
   1.2. [Dónde se ejecuta] (#12-donde-se-ejecuta)
2. Añadir JavaScript a una página web
3. Sintaxis básica
4. Variables y constantes
5. Tipos de datos
6. Conversiones de tipo
7. Operadores y expresiones
8. Control de flujo
9. Funciones
10. Arrays
11. Objetos
12. Objetos predefinidos del lenguaje
13. Temporizadores
14. Almacenamiento básico en el navegador
15. Depuración y errores frecuentes
16. Buenas prácticas iniciales
17. Continuidad con TypeScript, DOM y frameworks
18. Ejercicios

1. Qué es JavaScript

JavaScript es un lenguaje de programación de alto nivel, interpretado y multiparadigma, diseñado originalmente para añadir comportamiento e interactividad a las páginas web.

Mientras que HTML define la estructura de una página y CSS controla su aspecto visual, JavaScript permite crear aplicaciones dinámicas capaces de responder a las acciones del usuario, realizar cálculos, validar datos, modificar el contenido de la página y comunicarse con servidores.

1.1. Historia de JavaScript

JavaScript fue creado en 1995 por Brendan Eich mientras trabajaba en la empresa Netscape Communications. Su desarrollo fue sorprendentemente rápido: la primera versión funcional del lenguaje se implementó en apenas diez días con el objetivo de añadir interactividad a las páginas web, que hasta entonces eran prácticamente estáticas.

Inicialmente recibió el nombre de Mocha, posteriormente pasó a llamarse LiveScript y, poco antes de su lanzamiento oficial, fue renombrado como JavaScript para aprovechar la popularidad que tenía el lenguaje Java en aquella época.

Con el crecimiento de Internet, distintos navegadores comenzaron a implementar sus propias versiones del lenguaje, lo que provocó numerosos problemas de compatibilidad. Para solucionar esta situación, en 1997 JavaScript fue estandarizado por la organización ECMA International, dando lugar al estándar ECMAScript, que define las características que deben implementar todos los motores JavaScript.

Desde entonces, el lenguaje ha evolucionado constantemente incorporando nuevas funcionalidades. Actualmente JavaScript es uno de los lenguajes de programación más utilizados del mundo y constituye una tecnología fundamental para el desarrollo de aplicaciones web modernas.

Brendan Eich

Creador de JavaScript en 1995 y uno de los principales impulsores de la evolución del lenguaje. Posteriormente también participó en la creación de Mozilla y del navegador Firefox.

1.2. Dónde se ejecuta

En el desarrollo web, JavaScript se ejecuta principalmente en el navegador del usuario. Cuando el navegador carga una página que contiene un archivo JavaScript, interpreta sus instrucciones y las ejecuta de forma automática.

Gracias a ello, JavaScript puede:

• Leer y modificar el contenido de la página web.
• Responder a eventos como clics, pulsaciones de teclado o movimientos del ratón.
• Validar datos antes de enviarlos al servidor.
• Realizar cálculos y procesar información.
• Comunicarse con servidores mediante peticiones HTTP.
• Crear interfaces de usuario dinámicas e interactivas.

Aunque JavaScript se ejecuta dentro del navegador, existen determinadas limitaciones impuestas por motivos de seguridad. Por ejemplo, una página web no puede acceder libremente a los archivos del equipo del usuario ni ejecutar acciones que comprometan el sistema operativo. Del mismo modo, cualquier validación realizada en el navegador debe volver a comprobarse en el servidor antes de procesar información importante.

Actualmente, JavaScript también puede ejecutarse fuera del navegador gracias a entornos como Node.js, lo que permite desarrollar aplicaciones de escritorio, servidores web, herramientas de línea de comandos o incluso aplicaciones móviles. No obstante, en este módulo nos centraremos en su utilización dentro del navegador.

2. Añadir JavaScript a una página web

Como ya se vio en el capitulo anterior, se puede integrar el código javascript con HTML de varias formas.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Primer ejemplo con JavaScript</title>
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1>Primer ejemplo</h1>
  </body>
</html>

El atributo defer indica al navegador que descargue el script sin bloquear la lectura del HTML y que lo ejecute cuando el documento ya esté preparado.

Archivo app.js:

console.log('JavaScript cargado correctamente');

La instrucción console.log() muestra información en la consola del navegador. Durante el aprendizaje es una herramienta esencial para comprobar valores y entender qué está ocurriendo en el programa.

3. Sintaxis básica

La sintaxis es el conjunto de reglas que indica cómo debe escribirse el código para que el navegador pueda interpretarlo.

Una instrucción sencilla puede ser una asignación, una llamada a una función o una operación:

const mensaje = 'Hola, JavaScript';

console.log(mensaje);

JavaScript distingue entre mayúsculas y minúsculas. Las variables nombre, Nombre y NOMBRE son diferentes.

const nombre = 'Ana';
const Nombre = 'Luis';

console.log(nombre);
console.log(Nombre);

Los bloques de código se escriben entre llaves:

if (nombre === 'Ana') {
  console.log('El nombre es Ana');
}

Los comentarios sirven para aclarar partes del código o dejar notas durante el desarrollo:

// Comentario de una línea

/*
  Comentario de varias líneas.
  Úsalo solo cuando realmente aporte información.
*/

En JavaScript moderno se suele terminar cada instrucción con punto y coma. Aunque el lenguaje puede insertarlos automáticamente en muchos casos, escribirlos ayuda a evitar ambigüedades.

4. Variables y constantes

Una variable permite guardar un valor para usarlo más adelante. En JavaScript moderno se declaran principalmente con const y let.

Ejemplo con const y let:

const nombre = 'Juan';
let edad = 25;

edad = 26;

console.log(nombre);
console.log(edad);

Usa const por defecto. Cambia a let solo cuando el valor tenga que reasignarse.

const precio = 30;
const iva = 0.21;
const total = precio + precio * iva;

console.log(total);

const impide reasignar la variable, pero no convierte automáticamente en inmutable el contenido de un objeto o de un array.

const usuario = {
  nombre: 'Laura',
  activo: true,
};

usuario.activo = false;

console.log(usuario);

En este ejemplo, usuario sigue apuntando al mismo objeto, aunque una de sus propiedades haya cambiado.

El ámbito de bloque significa que una variable declarada dentro de unas llaves solo existe dentro de ese bloque.

if (true) {
  const mensaje = 'Dentro del bloque';
  console.log(mensaje);
}

// console.log(mensaje); // Error: mensaje no existe fuera del bloque

5. Tipos de datos

JavaScript tiene tipado dinámico. Una variable no declara su tipo de forma fija; el tipo depende del valor que contiene en cada momento.

const nombre = 'Marta';
const edad = 20;
const matriculado = true;
const grupo = null;
let nota;

Tipos frecuentes:

Puedes consultar el tipo de un valor con typeof:

console.log(typeof 'Hola');
console.log(typeof 42);
console.log(typeof true);
console.log(typeof undefined);

Hay un caso histórico que conviene conocer:

console.log(typeof null); // object

Aunque typeof null devuelve 'object', null representa una ausencia intencionada de valor. Es una particularidad antigua del lenguaje.

Los arrays también se consideran objetos, pero se comprueban con Array.isArray():

const notas = [7, 8, 6];

console.log(typeof notas);
console.log(Array.isArray(notas));

6. Conversiones de tipo

JavaScript puede convertir tipos de forma automática en algunas operaciones. A esto se le llama coerción. Aunque puede resultar cómodo, también puede provocar resultados inesperados.

console.log('5' + 2); // '52'
console.log('5' - 2); // 3

En el primer caso, el operador + concatena texto. En el segundo, JavaScript convierte el texto '5' a número para poder restar.

Para evitar dudas, es preferible convertir explícitamente cuando sea necesario.

const edadTexto = '18';
const edad = Number(edadTexto);

console.log(edad + 1);

Funciones habituales de conversión:

Si una conversión numérica falla, el resultado es NaN, que significa Not a Number.

const resultado = Number('abc');

console.log(resultado);
console.log(Number.isNaN(resultado));

Al leer datos de formularios, recuerda que los valores suelen llegar como texto. Si necesitas operar matemáticamente, conviértelos antes.

7. Operadores y expresiones

Una expresión combina valores, variables y operadores para producir un resultado.

7.1. Operadores aritméticos

const suma = 10 + 5;
const resta = 10 - 5;
const producto = 10 * 5;
const division = 10 / 5;
const resto = 10 % 3;
const potencia = 2 ** 3;

console.log(suma, resta, producto, division, resto, potencia);

7.2. Operadores de asignación

let contador = 0;

contador += 1;
contador += 1;
contador -= 1;

console.log(contador);

7.3. Operadores de comparación

const edad = 18;

console.log(edad === 18);
console.log(edad !== 18);
console.log(edad > 16);
console.log(edad >= 18);

Usa === y !== para comparar. Comprueban valor y tipo, por lo que evitan muchas confusiones.

console.log(5 == '5');
console.log(5 === '5');

7.4. Operadores lógicos

const mayorEdad = true;
const tienePermiso = false;

console.log(mayorEdad && tienePermiso);
console.log(mayorEdad || tienePermiso);
console.log(!mayorEdad);

7.5. Operador ternario

El operador ternario permite elegir entre dos valores según una condición. Es útil para expresiones cortas, no para sustituir cualquier if.

const nota = 7;
const mensaje = nota >= 5 ? 'Aprobado' : 'Suspendido';

console.log(mensaje);

8. Control de flujo

Las estructuras de control permiten decidir qué instrucciones se ejecutan y cuántas veces.

8.1. Condicional if, else if y else

const nota = 8;

if (nota >= 9) {
  console.log('Sobresaliente');
} else if (nota >= 7) {
  console.log('Notable');
} else if (nota >= 5) {
  console.log('Aprobado');
} else {
  console.log('Suspendido');
}

8.2. Estructura switch

switch resulta útil cuando se compara una misma expresión con varios valores concretos.

const dia = 'lunes';

switch (dia) {
  case 'lunes':
    console.log('Inicio de semana');
    break;
  case 'viernes':
    console.log('Fin de semana cerca');
    break;
  default:
    console.log('Día intermedio');
}

El break evita que se ejecuten los casos siguientes. Si se omite, el programa continúa con el siguiente caso.

8.3. Bucle for

El bucle for se usa cuando conoces cuántas repeticiones quieres realizar o necesitas un contador.

for (let i = 1; i <= 5; i += 1) {
  console.log(`Vuelta ${i}`);
}

8.4. Bucle while

El bucle while repite un bloque mientras la condición sea verdadera.

let intentos = 0;

while (intentos < 3) {
  console.log(`Intento ${intentos + 1}`);
  intentos += 1;
}

8.5. Recorrer valores con for...of

for...of es cómodo para recorrer los valores de una colección iterable, como un array.

const lenguajes = ['JavaScript', 'TypeScript', 'Python'];

for (const lenguaje of lenguajes) {
  console.log(lenguaje);
}

9. Funciones

Una función agrupa instrucciones para reutilizarlas. Puede recibir datos de entrada mediante parámetros y devolver un resultado con return.

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

const resultado = sumar(4, 6);
console.log(resultado);

Los parámetros son los nombres que se declaran en la función. Los argumentos son los valores reales que se envían al llamarla.

function saludar(nombre) {
  return `Hola, ${nombre}`;
}

console.log(saludar('Ana'));

Una función puede terminar sin return, pero entonces devuelve undefined.

function mostrarMensaje(mensaje) {
  console.log(mensaje);
}

const valor = mostrarMensaje('Mensaje de prueba');
console.log(valor);

También puedes guardar una función en una constante:

const multiplicar = function (a, b) {
  return a * b;
};

console.log(multiplicar(3, 5));

Las funciones flecha son habituales en JavaScript moderno, especialmente con arrays, eventos y promesas.

const dividir = (a, b) => a / b;

console.log(dividir(10, 2));

Si la función flecha tiene varias instrucciones, usa llaves y return explícito.

const calcularPrecioFinal = (precio, iva) => {
  const incremento = precio * iva;
  return precio + incremento;
};

console.log(calcularPrecioFinal(100, 0.21));

Una buena función debe tener un propósito claro. Si una función hace demasiadas cosas, suele ser señal de que conviene dividir el problema.

10. Arrays

Un array permite almacenar una lista ordenada de valores. Cada elemento ocupa una posición llamada índice. En JavaScript, los índices empiezan en 0.

const notas = [7, 5, 9, 6];

console.log(notas[0]);
console.log(notas[1]);
console.log(notas.length);

Puedes modificar elementos concretos:

const notas = [7, 5, 9, 6];

notas[1] = 6;

console.log(notas);

Aunque notas esté declarado con const, el contenido del array puede cambiar. Lo que no puedes hacer es reasignar la variable completa.

Métodos básicos para añadir o quitar elementos:

const tareas = ['Estudiar JavaScript'];

tareas.push('Practicar arrays');
tareas.unshift('Abrir el editor');

const ultima = tareas.pop();
const primera = tareas.shift();

console.log(tareas);
console.log(primera, ultima);

Para recorrer un array puedes usar for...of cuando solo necesitas sus valores:

const nombres = ['Ana', 'Luis', 'Marta'];

for (const nombre of nombres) {
  console.log(nombre);
}

JavaScript ofrece métodos muy útiles para trabajar con arrays sin escribir bucles manuales en todos los casos.

10.1. forEach

Ejecuta una función por cada elemento. No crea un array nuevo.

const nombres = ['Ana', 'Luis', 'Marta'];

nombres.forEach((nombre) => {
  console.log(`Hola, ${nombre}`);
});

10.2. map

Crea un array nuevo transformando cada elemento.

const precios = [10, 20, 30];
const preciosConIva = precios.map((precio) => precio * 1.21);

console.log(preciosConIva);

10.3. filter

Crea un array nuevo con los elementos que cumplen una condición.

const notas = [4, 7, 5, 9, 3];
const aprobadas = notas.filter((nota) => nota >= 5);

console.log(aprobadas);

10.4. find

Devuelve el primer elemento que cumple una condición. Si no encuentra ninguno, devuelve undefined.

const productos = ['teclado', 'ratón', 'monitor'];
const encontrado = productos.find((producto) => producto === 'monitor');

console.log(encontrado);

10.5. reduce

Acumula los valores de un array para obtener un resultado único.

const importes = [5, 15, 25];
const total = importes.reduce((suma, importe) => suma + importe, 0);

console.log(total);

11. Objetos

Un objeto agrupa datos relacionados mediante propiedades. Es una estructura muy frecuente para representar entidades como usuarios, productos, tareas o configuraciones.

const alumno = {
  nombre: 'Nora',
  edad: 19,
  curso: 'DAW',
};

console.log(alumno.nombre);
console.log(alumno['curso']);

La notación con punto es la más habitual. La notación con corchetes resulta útil cuando el nombre de la propiedad está guardado en una variable.

const propiedad = 'nombre';

console.log(alumno[propiedad]);

Puedes modificar propiedades o añadir otras nuevas:

const producto = {
  nombre: 'Teclado',
  precio: 30,
};

producto.precio = 35;
producto.stock = 12;

console.log(producto);

Un método es una función guardada como propiedad de un objeto.

const carrito = {
  productos: 3,
  calcularEnvio() {
    return this.productos > 0 ? 4.99 : 0;
  },
};

console.log(carrito.calcularEnvio());

En objetos sencillos de datos, lo normal es usar propiedades. Los métodos aparecen cuando el objeto también necesita comportamiento.

Los arrays y los objetos suelen combinarse para representar listas de datos.

const alumnos = [
  { nombre: 'Ana', nota: 8 },
  { nombre: 'Luis', nota: 4 },
  { nombre: 'Marta', nota: 6 },
];

const aprobados = alumnos.filter((alumno) => alumno.nota >= 5);

console.log(aprobados);

La desestructuración permite extraer propiedades de un objeto de forma cómoda.

const usuario = {
  nombre: 'Clara',
  email: 'clara@example.com',
};

const { nombre, email } = usuario;

console.log(nombre);
console.log(email);

También se puede usar en parámetros de funciones.

function mostrarUsuario({ nombre, email }) {
  return `${nombre} <${email}>`;
}

console.log(mostrarUsuario(usuario));

12. Objetos predefinidos del lenguaje

JavaScript incluye objetos y funciones predefinidas que resuelven operaciones habituales.

12.1. String

Los textos tienen métodos para consultar y transformar su contenido.

const texto = ' JavaScript moderno ';

console.log(texto.length);
console.log(texto.trim());
console.log(texto.toUpperCase());
console.log(texto.includes('Script'));
console.log(texto.replace('moderno', 'actual'));

Recuerda que muchos métodos de String devuelven un texto nuevo. No modifican el texto original.

12.2. Number

Number permite convertir valores y comprobar resultados numéricos.

const valor = Number('42');

console.log(Number.isNaN(valor));
console.log(Number.isInteger(valor));
console.log(valor.toFixed(2));

toFixed() devuelve un texto, no un número. Es útil para mostrar importes, pero conviene tenerlo en cuenta si después vas a seguir calculando.

12.3. Math

Math agrupa operaciones matemáticas frecuentes.

console.log(Math.round(4.6));
console.log(Math.floor(4.9));
console.log(Math.ceil(4.1));
console.log(Math.max(4, 9, 2));
console.log(Math.min(4, 9, 2));
console.log(Math.random());

Ejemplo de número aleatorio entre 1 y 10:

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

console.log(aleatorio);

12.4. Date

Date permite trabajar con fechas y horas.

const ahora = new Date();

console.log(ahora.getFullYear());
console.log(ahora.getMonth() + 1);
console.log(ahora.getDate());
console.log(ahora.toLocaleDateString('es-ES'));

El mes empieza en 0, por eso enero es 0 y diciembre es 11.

12.5. JSON

JSON es un formato de texto muy usado para intercambiar datos entre cliente y servidor. Se parece a los objetos de JavaScript, pero tiene reglas propias: las claves deben ir entre comillas dobles y no puede contener funciones.

const usuario = {
  nombre: 'Ana',
  activo: true,
};

const textoJson = JSON.stringify(usuario);
const objeto = JSON.parse(textoJson);

console.log(textoJson);
console.log(objeto.nombre);

JSON.stringify() convierte un valor de JavaScript en texto JSON. JSON.parse() convierte texto JSON en un valor utilizable desde JavaScript.

13. Temporizadores

Los temporizadores permiten ejecutar código después de un tiempo o repetirlo cada cierto intervalo.

setTimeout() ejecuta una función una vez tras un retraso indicado en milisegundos.

setTimeout(() => {
  console.log('Han pasado 2 segundos');
}, 2000);

Puedes cancelar un temporizador con clearTimeout() si guardas su identificador.

const idTimeout = setTimeout(() => {
  console.log('Este mensaje no aparecerá');
}, 3000);

clearTimeout(idTimeout);

setInterval() ejecuta una función repetidamente.

let segundos = 0;

const idInterval = setInterval(() => {
  segundos += 1;
  console.log(`Segundos: ${segundos}`);

  if (segundos === 5) {
    clearInterval(idInterval);
  }
}, 1000);

Los temporizadores son útiles para prácticas sencillas, pero no deben usarse para bloquear la ejecución ni para solucionar problemas de sincronización de forma improvisada.

14. Almacenamiento básico en el navegador

El navegador ofrece mecanismos para guardar pequeñas cantidades de información en el cliente. En esta unidad veremos una introducción. Más adelante podrás aplicarlo en formularios, preferencias de usuario o pequeñas prácticas.

14.1. localStorage

localStorage guarda datos sin fecha de caducidad automática. Permanecen hasta que el usuario o la aplicación los elimine.

localStorage.setItem('tema', 'oscuro');

const tema = localStorage.getItem('tema');

console.log(tema);

Solo almacena texto. Si quieres guardar un objeto o un array, debes convertirlo a JSON.

const preferencias = {
  tema: 'oscuro',
  idioma: 'es',
};

localStorage.setItem('preferencias', JSON.stringify(preferencias));

const texto = localStorage.getItem('preferencias');
const preferenciasGuardadas = JSON.parse(texto);

console.log(preferenciasGuardadas.tema);

Para eliminar datos:

localStorage.removeItem('tema');
localStorage.clear();

14.2. sessionStorage

sessionStorage funciona de forma parecida, pero los datos se conservan solo durante la sesión de la pestaña.

sessionStorage.setItem('pasoFormulario', '2');

console.log(sessionStorage.getItem('pasoFormulario'));

14.3. Cookies

Las cookies también permiten guardar información, pero se usan mucho en comunicación cliente-servidor porque pueden enviarse automáticamente en las peticiones HTTP.

Para este nivel, lo importante es entender que no son lo mismo que localStorage y que tienen implicaciones de seguridad, privacidad y configuración.

15. Depuración y errores frecuentes

Depurar consiste en localizar y corregir errores. La consola del navegador es la primera herramienta que debes aprender a usar.

const nombre = 'Ana';
const edad = 21;

console.log(nombre);
console.log(edad);
console.log({ nombre, edad });
console.warn('Aviso de prueba');
console.error('Error de prueba');

Cuando aparece un error, lee el mensaje completo. Normalmente indica el tipo de error, el archivo y la línea aproximada.

Ejemplo de lectura defensiva sencilla:

const usuario = {
  nombre: 'Ana',
};

if (usuario.email !== undefined) {
  console.log(usuario.email.toLowerCase());
} else {
  console.log('El usuario no tiene email');
}

También puedes usar puntos de interrupción en las herramientas de desarrollo del navegador para pausar el programa y observar el valor de las variables paso a paso.

16. Buenas prácticas iniciales

• Usa const por defecto y let solo cuando necesites reasignar.
• Evita var en código nuevo.
• Usa nombres descriptivos: precioFinal es mejor que pf.
• Escribe una instrucción clara por línea.
• Usa === y !== para comparar.
• Convierte explícitamente los datos cuando vengan como texto y necesites números.
• Divide problemas grandes en funciones pequeñas.
• Evita funciones que mezclen muchas responsabilidades.
• Prefiere textContent frente a técnicas inseguras cuando más adelante manipules el DOM.
• No uses document.write() para construir páginas modernas.
• No guardes información sensible en almacenamiento accesible desde JavaScript.
• Revisa la consola del navegador con frecuencia mientras programas.
• Lee documentación actual antes de copiar soluciones antiguas.

17. Continuidad con TypeScript, DOM y frameworks

Esta unidad se centra en JavaScript como lenguaje. A partir de aquí puedes avanzar en varias direcciones:

• TypeScript, para añadir tipos estáticos y detectar errores antes de ejecutar.
• DOM, eventos y formularios, para manipular páginas reales y crear interacción.
• Comunicación asíncrona con fetch, para consumir APIs.
• React, Angular u otros frameworks, para construir interfaces con componentes.

La base que has aprendido aquí se reutiliza en todos esos temas. Los arrays, objetos, funciones, JSON, temporizadores y control de errores aparecen constantemente en el desarrollo web cliente.

18. Ejercicios