⏱️ Duración estimada: 2 horas

Sesión 17 - Introducción a JavaScript

Contenidos de la Sesión

En esta sesión se ha introducido JavaScript como lenguaje de programación del navegador. Se han explicado sus orígenes, la consola de Chrome como herramienta de desarrollo, los tipos de datos, los operadores, la declaración de variables, las estructuras de control y la declaración de funciones. Al final de la sesión se ha hecho una primera toma de contacto con el acceso al DOM para dar interactividad a la página.

El ejemplo construido en clase se encuentra en la carpeta example/, con los archivos index.html e index.js.

1. Historia de JavaScript

JavaScript nació en 1995 creado por Brendan Eich en Netscape en solo 10 días. A pesar de su nombre, no tiene ninguna relación con Java; el nombre fue una decisión de marketing de la época.

👉 JavaScript es el único lenguaje de programación nativo del navegador
👉 Hoy también se ejecuta en el servidor gracias a Node.js
👉 Es el lenguaje más usado del mundo según la encuesta anual de Stack Overflow

2. Consola de Chrome y REPL

La consola de Chrome (DevTools → pestaña Console) es una herramienta de desarrollo integrada en el navegador que permite ejecutar código JavaScript de forma interactiva.

Funciona como un REPL (Read–Eval–Print Loop):

1. Read — lees (escribes) una expresión
2. Eval — el motor la evalúa
3. Print — muestra el resultado
4. Loop — vuelve al paso 1

Cómo abrirla

console.log()

La función más usada para depurar código:

console.log("Hola mundo"); // escribe en la consola
console.log(typeof 42); // "number"
console.log("valor:", 42); // varios valores a la vez

3. Tipos de datos y typeof

JavaScript tiene tipado dinámico: una misma variable puede cambiar de tipo a lo largo de la ejecución. Para conocer el tipo de un valor se usa el operador typeof.

let a;
console.log(typeof a); // "undefined"

a = 10;
console.log(typeof a); // "number"

a = "hola";
console.log(typeof a); // "string"

a = true;
console.log(typeof a); // "boolean"

a = null;
console.log(typeof a); // "object"  ← bug histórico de JS

a = {};
console.log(typeof a); // "object"

a = [];
console.log(typeof a); // "object"

4. Operadores booleanos

Los operadores booleanos (o lógicos) trabajan con valores true / false.

true && true; // true
true && false; // false
true || false; // true
false || false; // false
!true; // false
!!0; // false  (convierte 0 a booleano)
!!"hola"; // true   (string no vacío es truthy)

Comparadores de igualdad

3 == "3"; // true  ← coerción de tipo, ¡peligroso!
3 === "3"; // false ← compara valor Y tipo → correcto ✅
3 !== "3"; // true  ← correcto ✅

5. Operadores aritméticos

Operadores de asignación abreviada

let a = 1000;

a += 1; // a = a + 1  → 1001
a -= 2; // a = a - 2  → 999
a *= 3; // a = a * 3  → 2997
a /= 7; // a = a / 7  → 428.14…

a++; // a = a + 1 (post-incremento)
a--; // a = a - 1 (post-decremento)
++a; // pre-incremento
--a; // pre-decremento

Post-incremento vs pre-incremento

La diferencia es cuándo se aplica el incremento respecto al valor que se usa en la expresión:

let x = 5;

// POST-incremento (x++)
// Primero se usa el valor actual (5), luego se incrementa
let post = x++;
console.log(post); // 5  ← valor ANTES del incremento
console.log(x); // 6  ← x ya vale 6 después

// PRE-incremento (++x)
// Primero se incrementa, luego se usa el nuevo valor
let pre = ++x;
console.log(pre); // 7  ← valor DESPUÉS del incremento
console.log(x); // 7  ← x también vale 7

6. Declaración de variables

En JavaScript hay tres formas de declarar variables:

let b = 10;
b = "hola"; // ✅ let permite reasignación

const c = 10;
// c = 20;    // ❌ TypeError: Assignment to constant variable

7. Estructuras de control

Condicional if / else

let a = 99;

if (a > 100) {
  console.log("mayor que 100");
} else {
  console.log("menor o igual que 100");
}

switch

Útil cuando hay muchos posibles valores para una misma variable:

let a = 2;

switch (a) {
  case 1:
    console.log("vale 1");
    break;
  case 2:
    console.log("vale 2");
    break;
  default:
    console.log("vale otro");
    break;
}

Bucle for

for (let i = 1; i <= 100; i++) {
  console.log("f", i);
}

• continue — salta a la siguiente iteración
• break — sale del bucle

for (let j = 0; j < 5; j++) {
  if (j === 1) continue; // salta j = 1
  if (j === 3) break; // sale cuando j = 3
  console.log(j); // imprime: 0, 2
}

Bucle while

Ejecuta el bloque mientras la condición sea true:

let i = 101;

while (i < 200) {
  console.log("w", i);
  i++;
}

Bucle do…while

Ejecuta el bloque al menos una vez antes de comprobar la condición:

do {
  console.log("d", i);
  i++;
} while (i < 300);

8. Declaración de funciones

Una función es un bloque de código reutilizable que puede recibir parámetros y devolver un valor.

// Declaración
function suma(a, b) {
  return a + b;
}

function resta(a, b) {
  return a - b;
}

function multiplicacion(a, b) {
  return a * b;
}

function division(a, b) {
  return a / b;
}

// Invocación (llamada)
console.log(suma(1, 2)); // 3
console.log(resta(10, 4)); // 6
console.log(multiplicacion(3, 4)); // 12
console.log(division(10, 2)); // 5

const resultado = suma(1, 4);
console.log(resultado); // 5

9. Primera toma de contacto con el DOM

El DOM (Document Object Model) es la representación del HTML como un árbol de objetos que JavaScript puede leer y modificar.

Seleccionar un elemento

const x = document.getElementById("titulo");

Añadir un evento

x.addEventListener("click", () => {
  // código que se ejecuta al hacer clic en el elemento
  document.getElementsByTagName("body")[0].style.backgroundColor = "#ff0000";
  x.innerHTML = "¡Me has hecho clic!";
});

El ejemplo de la sesión usa estas técnicas para cambiar el color de fondo de la página al hacer clic en el título, mostrando que JavaScript puede reaccionar a eventos del usuario y modificar la página en tiempo real.

10. Estructura de los archivos de la sesión

example/
├── index.html   — Página con un título que reacciona al clic
└── index.js     — Script con los ejemplos de la sesión

Resumen

En esta sesión hemos aprendido:

• ✅ Historia de JavaScript — creado por Brendan Eich en 1995, estandarizado como ECMAScript
• ✅ Consola de Chrome — herramienta REPL para ejecutar y depurar código JS
• ✅ Tipos de datos — undefined, number, string, boolean, null, object y typeof
• ✅ Operadores booleanos — &&, ||, ! y comparadores === / !== (prohibidos == y !=)
• ✅ Operadores aritméticos — +, -, *, /, **, % y operadores de asignación abreviada
• ✅ Variables — const (preferida), let (cuando cambia), var (prohibida)
• ✅ Estructuras de control — if/else, switch, for, while, do…while
• ✅ Funciones — declaración con function, parámetros y return
• ✅ DOM básico — document.getElementById(), addEventListener() y modificación del HTML

Lo más importante:

Recursos Adicionales

• MDN - JavaScript
• MDN - Tipos de datos en JavaScript
• MDN - typeof
• MDN - Operadores lógicos
• MDN - Comparaciones de igualdad
• MDN - let
• MDN - const
• MDN - Funciones
• javascript.info - Fundamentos de JavaScript
• The JavaScript History (brief)