Introducción: historia, características, dónde se aplica — JavaScript

¿Qué es y para qué sirve?

Imagina que eres el director de tu propia película y tu computadora es un estudio de cine. HTML es como el guion y la escenografía (texto, imágenes, botones, tablas). CSS es el diseñador de vestuario y el iluminador (colores, fuentes, disposición bonita). Y JavaScript son los actores y los efectos especiales. ¡Es JS quien hace que todo se mueva, reaccione a los clics de botones, calcule, muestre ventanas emergentes, cambie imágenes e incluso cree juegos!

Si un sitio web fuera una persona, entonces:

• HTML — el esqueleto y la piel (estructura).
• CSS — la ropa y el maquillaje (apariencia).
• JavaScript — el cerebro y los músculos (lógica y acciones).

Sin JavaScript, un sitio web sería solo un libro aburrido que solo se puede leer, pero no se puede hojear, hacer clic en enlaces, jugar o llenar formularios. JS hace que las páginas web estén "vivas".

¿Dónde se usa JavaScript?

• En todas partes de internet: VKontakte, YouTube, juegos en el navegador (por ejemplo, Agar.io), calculadoras en línea, mapas (Yandex.Maps), editores de código (como en el que estás leyendo este artículo ahora mismo).
• Incluso en servidores (con Node.js) — por ejemplo, para procesar mensajes en chats o almacenar datos.
• En aplicaciones móviles (React Native) y de escritorio (Electron — con él están hechos Discord y VS Code).

¡JavaScript es el lenguaje más popular del mundo! ¿Por qué? Porque está integrado directamente en el navegador. No necesitas instalar nada (a diferencia de Python, que hay que descargar). Abres un bloc de notas, escribes código, lo guardas como .html y ¡listo! Puedes ejecutarlo con doble clic.

Una diferencia importante con Python: en Python, el código se ejecuta por sí solo en la consola, mientras que en JavaScript siempre está vinculado a una página web. JS no puede crear ventanas gráficas por sí mismo (como pygame), pero sí puede controlar lo que ya está en la pantalla: botones, texto, imágenes.

Ejemplos de código con explicación

La forma más sencilla de empezar es escribir código directamente en el navegador. Presiona F12 (o clic derecho → "Inspeccionar") y ve a la pestaña "Console". Allí puedes ingresar comandos. Pero nosotros crearemos páginas completas.

Crea un archivo test.html en tu computadora, ábrelo con el bloc de notas y pega el código de los ejemplos. Luego guárdalo y ábrelo en el navegador.

Ejemplo 1: ¡Hola, mundo! (el primer programa)

// Esto es un comentario de una línea. No se ejecuta.
/* Y esto es un comentario de varias líneas.
   Sirve para explicar el código. */

// El comando alert() muestra una ventana emergente con un mensaje.
alert("Hello, world! JavaScript is working!");

// El comando console.log() imprime texto en la consola del desarrollador.
// Para ver el resultado, presiona F12 y abre la pestaña Console.
console.log("This is a message in the console. Good job!");

// El comando document.write() escribe texto directamente en la página.
document.write("<h1>This is a heading created by JavaScript!</h1>");

¿Qué sucederá?

• Primero aparecerá una ventana con el texto.
• Luego, en la consola (F12) aparecerá el segundo mensaje.
• Al final, aparecerá un encabezado grande en la página.

En Python, el primer programa es simplemente print("Hello"). En JS usamos alert() o console.log(). La diferencia es que JS vive en el navegador, por lo que tiene acceso a las ventanas y a la propia página.

Ejemplo 2: Variables — cajas para datos

// Una variable es como una caja con una etiqueta.
// En Python escribes: name = "Vasya"
// En JS usamos la palabra clave let (forma moderna).

let nombre = "Masha";           // Cadena (texto)
let edad = 12;                  // Número
let leGustaLaPizza = true;      // Valor booleano (sí/no)
let cajaVacia = null;           // Vacío (nada)

// Mostremos todo en la consola:
console.log("Nombre:", nombre);
console.log("Edad:", edad);
console.log("¿Le gusta la pizza?", leGustaLaPizza);

// Se pueden sumar cadenas (concatenación):
let saludo = "Hola, " + nombre + "! Tienes " + edad + " años.";
console.log(saludo);

// O se pueden usar plantillas de cadena (como los f-strings de Python, pero con ${}):
let mejorSaludo = `Hola, ${nombre}! Tienes ${edad} años.`;
console.log(mejorSaludo);

// Cambiemos el valor de la variable:
edad = 13;  // ¡Masha tuvo su cumpleaños!
console.log("Ahora la edad es:", edad);

Explicación: Las variables sirven para almacenar información. let es como var en Python, solo que en JS es obligatorio escribir let (o const para constantes). Observa el punto y coma ; al final de cada línea — en Python no existe, pero en JS se pone (aunque a veces funciona sin él, es mejor ponerlo siempre).

let edadUsuario = 15;

// Si la edad es mayor o igual a 18:
if (edadUsuario >= 18) {
    console.log("¡Eres adulto! Puedes ver películas de terror.");
} else if (edadUsuario >= 12) {
    console.log("¡Eres adolescente! Puedes jugar a la mayoría de los juegos.");
} else {
    console.log("Eres un niño. Mejor lee un libro.");
}

// Otro ejemplo: comprobar si un número es par
let numero = 7;
if (numero % 2 === 0) {  // % es el resto de la división
    console.log("El número es par.");
} else {
    console.log("El número es impar.");
}

// Observa: en JS para la comparación se usa === (tres iguales),
// y no == (dos iguales). Dos iguales es una comparación "no estricta",
// que puede dar resultados extraños (por ejemplo, 5 == "5" es verdadero,
// aunque número y cadena son tipos diferentes). Usa siempre ===.