Bloque 1 · Fundamentos del lenguaje — Curso de JavaScript

Lección 1 · Teoría

Tu primer programa

JavaScript es el lenguaje que ejecuta el navegador para dotar de comportamiento a las páginas: reaccionar a clics, calcular, validar formularios, pedir datos a servidores… HTML es el esqueleto, CSS la pintura, y JavaScript los músculos.

1.1 · Dónde vive el código

El navegador ejecuta todo lo que encuentre dentro de etiquetas <script>. Lo habitual es colocarlas al final del <body>, cuando el HTML ya existe:

index.html

<body>
  <h1>Mi página</h1>

  <script>
    // tu código JavaScript aquí dentro
  </script>
</body>

⚠️ En proyectos grandes el código se escribe en un archivo aparte (app.js) y se enlaza con <script src="app.js"></script>. En este bloque trabajaremos con el script incrustado para ver resultados al instante.

1.2 · La consola: tu mejor amiga

console.log() imprime mensajes en la consola del navegador (F12 → pestaña «Consola»). Será tu laboratorio durante todo el curso: ahí verás qué contiene cada variable y qué está haciendo tu código.

tu primer programa

console.log("Hola, mundo");
console.log(42);
console.log("Puedo imprimir", varios valores, "seguidos");

Cada llamada crea una línea nueva. Las comas insertan un espacio entre valores.

1.3 · Comentarios: notas para humanos

dos sabores

// Comentario de UNA línea: el intérprete lo ignora

/*
   Comentario de BLOQUE:
   ocupa varias líneas y sirve para explicar
   secciones enteras o desactivar código temporalmente.
*/

💡 El código se lee diez veces más de lo que se escribe. Un buen comentario explica el PORQUÉ («descuento aplicado por campaña de verano»), no lo obvio («suma dos números»).

Lección 2 · Teoría

Variables y constantes

Una variable es una caja con nombre donde guardas un valor para usarlo después. En JavaScript moderno hay dos formas de crearlas:

let vs const vs var
Palabra	¿Se puede reasignar?	Úsala cuando…
`let`	Sí ✔️	El valor cambiará (edad, contador, resultado)
`const`	No ❌	El valor es fijo (nombre, IVA, año de nacimiento)
`var`	Sí ✔️	Nunca — es la forma antigua (legado). Sepárela para leer código viejo

declarar, asignar y reasignar

let edad;            // declarar (caja vacía)
edad = 25;           // asignar
edad = edad + 1;     // reasignar: ahora vale 26 ✔️

const nombre = "Ada";
nombre = "Ana";      // ❌ TypeError: no se puede reasignar una const

💡 Regla profesional: usa const por defecto y cambia a let solo cuando necesites reasignar. Así quien lea tu código sabe de un vistazo qué valores son estables.

2.1 · Nombres que ayudan

camelCase: precioFinal, añoNacimiento — primera minúscula, siguientes palabras en mayúscula pegadas.
Descriptivos: totalConIva mejor que x o dato1.
Prohibidos: empezar por número (2jugadores), espacios (mi variable), guiones (mi-variable es una resta para JS).
Reservadas: no puedes llamar así a una variable let, if, class…

⚠️ Si olvidas declarar una variable y solo asignas (edad = 25; sin let/const), JavaScript la crea global silenciosamente: fuente clásica de bugs. Activa siempre la declaración.

Lección 3 · Teoría

Tipos de datos primitivos

Toda caja guarda un valor de algún tipo. Estos son los cinco que dominarán este bloque:

Los primitivos del día a día
Tipo	Ejemplos	Para…
`string`	`"Ada"`, `'hola'`, ``texto``	Texto: nombres, mensajes
`number`	`25`, `-3`, `3.14`	Números: edades, precios (¡también los decimales!)
`boolean`	`true`, `false`	Sí/no: interruptores lógicos
`undefined`	una variable declarada sin asignar	«Todavía no tiene valor»
`null`	`let respuesta = null;`	«Vacío a propósito»

3.1 · typeof: el detective

pregunta el tipo

typeof "Ada"      // "string"
typeof 25        // "number"
typeof true      // "boolean"
typeof sinValor  // "undefined"
typeof null      // "object" 😅 — bug histórico del lenguaje

3.2 · Strings con superpoderes: template literals

Las comillas invertidas (backticks) permiten interpolar variables con ${ } y escribir varias líneas sin trucos:

❌ concatenación antigua

const saludo = "Hola, " + nombre + ". Tienes " + edad + " años.";

✅ template literal

const saludo = `Hola, ${nombre}. Tienes ${edad} años.`;
// incluso permite cálculos: ${edad >= 18 ? ...}

⚠️ Ojo con el clásico "10" + 5: el + con un string concatena → "105". Los demás operadores sí convierten: "10" - 5 da 5. Por eso las conversiones explícitas (lección 4) son obligatorias en código serio.

💡 NaN («Not a Number») aparece cuando un cálculo numérico se hace añicos, p. ej. Number("hola"). Si ves NaN en consola: revisa qué estás convirtiendo.

Lección 4 · Teoría

Operadores y conversiones

4.1 · Aritméticos

Los seis básicos
Operador	Hace	Ejemplo
`+ - *`	Suma, resta, multiplicación	`7 * 6 // 42`
`/`	División (siempre decimal si toca)	`7 / 2 // 3.5`
`%`	Módulo: resto de la división	`7 % 2 // 1` (impar)
`**`	Potencia	`2 ** 10 // 1024`

💡 El módulo % es oro: par/impar (n % 2), ciclos cada N elementos (i % 3 === 0), extraer dígitos… Lo usarás constantemente.

4.2 · Atajos de asignación

mismo resultado, menos tinta

puntos += 10;   // puntos = puntos + 10
vida   -= 5;    // vida   = vida - 5
saldo  *= 2;    // saldo  = saldo * 2
visitas++;      // suma 1  |  visitas-- resta 1

4.3 · Precedencia: quién manda

Como en matemáticas: * y / antes que + -. Ante la duda, paréntesis — gratis y legibles:

const total = 2 + 3 * 4;       // 14 (primero 3*4)
const forzado = (2 + 3) * 4;   // 20

4.4 · Comparación estricta: === siempre

❌ == convierte antes de comparar

"5" == 5      // true 😱
"" == 0      // true 😱
null == undefined // true

✅ === exige el mismo tipo

"5" === 5     // false ✔️
"" === 0     // false ✔️
null === undefined // false

Completan la familia: !==, >, <, >=, <=. Todas devuelven un boolean — la materia prima del Bloque 2.

4.5 · Conversiones explícitas

convierte TÚ, no el lenguaje

const entrada = "42";

Number(entrada) + 8     // 50 ✔️ número real
parseInt("12px")        // 12 — lee el entero inicial
parseFloat("3.14km")    // 3.14 — admite decimales
String(99)              // "99" — número a texto
Boolean(0)              // false

Number("abc")           // NaN — no se pudo convertir

Number() para convertir de verdad; falla (NaN) si hay cualquier letra.
parseInt()/parseFloat() leen el número del principio y descartan el resto.
Diferencia clave: parseInt("3.9") → 3 (corta), parseFloat("3.9") → 3.9.

Práctica guiada

✍️ Los 16 ejercicios del bloque

Crea la carpeta js-b1/ y resuelve en orden — cada ejercicio usa lo aprendido en los anteriores. Trabaja en archivos ej01.html, ej02.html… con un <script> al final del body y abre la consola (F12).

Sección A · Consola y scripts

1 Hola, JavaScript

Página mínima con un script que imprima en consola un saludo y tu nombre en dos líneas distintas.

Ver solución

<script>
  // Mi primer programa en JS
  console.log("¡Hola, JavaScript!");
  console.log("Soy Raúl");
</script>

2 Documenta tu código

Añade al ejercicio 1 un comentario de línea explicando cada log y un comentario de bloque arriba con tu nombre y la fecha.

Ver solución

/*
  ej01.html — saludo inicial
  Autor: Raúl · 22/08/2026
*/

// saludo general al arrancar la página
console.log("¡Hola, JavaScript!");
// presentación personal
console.log("Soy Raúl");

3 Tres datos en una sola línea

Imprime ciudad, comida favorita y año actual en UNA única llamada a console.log, separados por comas.

Ver solución

console.log("Madrid", "tortilla de patatas", 2026);

Sección B · Variables

4 Ficha en variables

Declara const nombre, let edad y const ciudad con tus datos y muéstralos con un único console.log usando comas.

Ver solución

const nombre = "Raúl";
let edad = 34;
const ciudad = "Madrid";

console.log(nombre, edad, ciudad);

5 Reasignación segura

Empieza con let puntos = 0, súbelo a 10 y luego a 25 reasignando. Añade una const e intenta reasignarla: documenta el error que lanza el navegador en un comentario.

Ver solución

let puntos = 0;
puntos = 10;
puntos = 25;
console.log(puntos); // 25

const dni = "12345678X";
// dni = "otro"; ❌ TypeError: Assignment to constant variable.

6 El corrector de nombres

Estas declaraciones fallan o son horribles: let 2nombre;, let mi variable;, let nombre-completo;. Escribe las tres versiones corregidas en camelCase y compruébalas en el navegador.

Ver solución

let segundoNombre = "Luis";
let miVariable = 7;
let nombreCompleto = "Ada Lovelace";

Sección C · Tipos de datos

7 Detective typeof

Crea cinco variables (una de cada tipo visto) y muestra en consola el typeof de cada una junto a su nombre.

Ver solución

const texto = "hola";
const numero = 3.14;
const encendido = true;
let vacio;
const nulo = null;

console.log("texto:", typeof texto);
console.log("numero:", typeof numero);
console.log("encendido:", typeof encendido);
console.log("vacio:", typeof vacio);
console.log("nulo:", typeof nulo); // "object", bug histórico

8 undefined vs null

Declara let sinAsignar; y let vaciado = null;. Muestra ambos y añade un comentario explicando la diferencia con tus palabras.

Ver solución

let sinAsignar;
let vaciado = null;

console.log(sinAsignar, vaciado);

// undefined: la caja existe pero nadie ha metido nada aún.
// null: yo mismo he vaciado la caja a propósito.

9 Presentación con template literal

Con las variables del ejercicio 4, construye con backticks la frase: «Me llamo ___, tengo ___ años y vivo en ___.» en un solo console.log.

Ver solución

console.log(`Me llamo ${nombre}, tengo ${edad} años y vivo en ${ciudad}.`);

Sección D · Operadores y conversiones

10 Calculadora de compra

precio = 19.99, unidades = 3. Calcula subtotal, IVA (21 %) y total. Muestra los tres valores.

Ver solución

const precio = 19.99;
const unidades = 3;
const IVA = 0.21;

const subtotal = precio * unidades;
const cuotaIva = subtotal * IVA;
const total = subtotal + cuotaIva;

console.log("Subtotal:", subtotal);
console.log("IVA:", cuotaIva);
console.log("Total:", total);

11 ¿Par o impar?

Con el operador módulo, muestra el resto de dividir 7 entre 2 y 8 entre 2. Comenta qué significa cada resultado.

Ver solución

console.log(7 % 2); // 1 → impar
console.log(8 % 2); // 0 → par

12 Contador de visitas

Parte de let visitas = 100. Súmale 50 con +=, réstale 20, incrementa con ++ y muestra el valor después de cada paso (4 logs).

Ver solución

let visitas = 100;
console.log(visitas); // 100

visitas += 50;
console.log(visitas); // 150

visitas -= 20;
console.log(visitas); // 130

visitas++;
console.log(visitas); // 131

13 Reloj matemático

Convierte 3725 segundos a horas, minutos y segundos usando SOLO divisiones y módulos. Pista: / 3600, luego % 3600, / 60…

Ver solución

const totalSegundos = 3725;

const horas = Math.floor(totalSegundos / 3600);        // 1
const restoHoras = totalSegundos % 3600;             // 125
const minutos = Math.floor(restoHoras / 60);          // 2
const segundos = restoHoras % 60;                    // 5

console.log(`${horas}h ${minutos}m ${segundos}s`); // "1h 2m 5s"

14 Comparador estricto

Muestra los resultados de: 5 == "5", 5 === "5", "a" !== "b" y 18 >= 18. Comenta cada línea explicando el porqué.

Ver solución

console.log(5 == "5");   // true: == convierte "5" a número antes
console.log(5 === "5");  // false: number ≠ string
console.log("a" !== "b"); // true: son distintos
console.log(18 >= 18);   // true: incluye el límite

15 Fábrica de conversiones

Partiendo de const entradaUsuario = "42";: súmale 8 convirtiéndola con Number(); convierte 99 a texto y concaténale « grados»; compara parseInt("3.14") con parseFloat("3.14").

Ver solución

const entradaUsuario = "42";

console.log(Number(entradaUsuario) + 8);   // 50
console.log(String(99) + " grados");      // "99 grados"
console.log(parseInt("3.14"));            // 3 (corta en el punto)
console.log(parseFloat("3.14"));          // 3.14

16 🏆 Proyecto integrador: «ficha-personal.html»

Une TODO el bloque en una página con un script que genere tu ficha personal calculada:

Mínimo 3 variables con let/const (nada de var)
Mezcla de números y cadenas + una operación aritmética entre variables
Resumen final construido con un template literal
Dos o más console.log — y ninguna alert()
Alguna conversión de tipo (Number(), parseInt()…)

Este ejercicio es el reto del laboratorio del examen: la validación automática comprobará estos criterios por ti.

Bloque 1: Fundamentos del lenguaje

Tu primer programa

1.1 · Dónde vive el código

1.2 · La consola: tu mejor amiga

1.3 · Comentarios: notas para humanos

Variables y constantes

2.1 · Nombres que ayudan

Tipos de datos primitivos

3.1 · typeof: el detective

3.2 · Strings con superpoderes: template literals

Operadores y conversiones

4.1 · Aritméticos

4.2 · Atajos de asignación

4.3 · Precedencia: quién manda

4.4 · Comparación estricta: === siempre

4.5 · Conversiones explícitas

✍️ Los 16 ejercicios del bloque

Sección A · Consola y scripts

1 Hola, JavaScript

2 Documenta tu código

3 Tres datos en una sola línea

Sección B · Variables

4 Ficha en variables

5 Reasignación segura

6 El corrector de nombres

Sección C · Tipos de datos

7 Detective typeof

8 undefined vs null

9 Presentación con template literal

Sección D · Operadores y conversiones

10 Calculadora de compra

11 ¿Par o impar?

12 Contador de visitas

13 Reloj matemático

14 Comparador estricto

15 Fábrica de conversiones

16 🏆 Proyecto integrador: «ficha-personal.html»

📝 Examen del Bloque 1

Parte A · Test teórico (aprueba con 10/14)

Parte B · Reto práctico final