JavaScript · Capítulo 1
¿Qué es JavaScript?
Descubre el lenguaje de programación de la web, cómo ejecutarlo en el navegador y escribe tu primer programa.
Teoría
JavaScript (JS) es el lenguaje de programación de la web. Es lo que hace que las páginas sean interactivas: responden a clics, validan formularios, muestran animaciones, cargan datos sin recargar la página, y mucho más.
A diferencia de HTML y CSS que son lenguajes descriptivos, JavaScript es un lenguaje de programación completo: tiene variables, funciones, condicionales, bucles, objetos, y puede comunicarse con servidores.
JavaScript se ejecuta directamente en el navegador (Chrome, Firefox, etc.) — no necesitas instalar nada para comenzar.
💡¿Sabías que?
Cómo incluir JavaScript en HTML
Hay tres formas de agregar JavaScript a una página:
1. JS Inline (evitar)
Código JavaScript escrito directamente dentro de atributos HTML como
onclick. Muy difícil de mantener cuando el proyecto crece.2. Script interno
Código escrito dentro de una etiqueta
<script> dentro del propio archivo HTML. Sirve para practicar, pero mezcla lógica con contenido.3. Script externo (recomendado)
Código en un archivo separado con extensión
.js (por ejemplo script.js), que se conecta al HTML con la etiqueta <script src="...">.<!-- Script interno: va dentro del HTML, antes de </body> -->
<body>
<h1>Mi página</h1>
<script>
console.log("¡Hola desde JavaScript!");
</script>
</body>
<!-- Script externo: conecta un archivo .js separado -->
<body>
<h1>Mi página</h1>
<script src="js/script.js" defer></script>
</body>Cómo funciona el atributo src en la etiqueta script
El atributo src le dice al navegador dónde encontrar tu archivo JavaScript. Funciona igual que el href del CSS — es la ruta al archivo:
src="script.js"→ el archivo está en la misma carpeta que el HTML
src="js/script.js"→ el archivo está dentro de una carpeta llamadajs/
src="../script.js"→ el archivo está en la carpeta anterior
El atributo defer es importante: le indica al navegador que espere a que termine de cargar todo el HTML antes de ejecutar el JavaScript. Sin defer, el script podría intentar modificar elementos que todavía no existen en la página.
<!-- Estructura completa recomendada -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página</title>
<!-- El CSS va en el head -->
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<h1>Hola mundo</h1>
<!-- El JS va ANTES del cierre de body, con defer -->
<script src="js/script.js" defer></script>
</body>
</html>La consola del navegador
La consola es tu mejor amiga para aprender JavaScript. Es donde:
- Puedes escribir y ejecutar JS directamente
- Ver los mensajes de
console.log()
- Ver errores y advertencias
- Inspeccionar valores de variables
console.log() es la herramienta más básica para mostrar información mientras desarrollas — como el "print" o "System.out.println" de JavaScript.
// Comentario de una línea
/* Comentario
multilínea */
// Mostrar en consola
console.log("Hola mundo"); // string
console.log(42); // número
console.log(true); // booleano
console.log([1, 2, 3]); // array
console.log({ nombre: "Ana" }); // objeto
// Diferentes tipos de log
console.log("ℹ️ Información");
console.warn("⚠️ Advertencia");
console.error("❌ Error");Tipos de datos primitivos
JavaScript tiene 7 tipos de datos primitivos. Los más importantes para empezar:
- String: texto entre comillas dobles
"Hola", simples'mundo'o backticks para templates
- Number: números enteros o decimales →
42,3.14,-100
- Boolean: verdadero o falso →
true,false
- Null: ausencia intencional de valor →
null
- Undefined: variable declarada sin valor →
undefined
// Strings
console.log("Texto con comillas dobles");
console.log('Texto con comillas simples');
console.log(`Template literal: Hola ${"mundo"}`);
// Numbers
console.log(42);
console.log(3.14);
console.log(-100);
// Booleans
console.log(true);
console.log(false);
// El operador typeof dice el tipo
console.log(typeof "Hola"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"⚠️JavaScript ≠ Java
🚀La consola es tu REPL
2 + 2, "Hola".toUpperCase(), Math.random().Ejercicio práctico
🎯 Tu misión
Abre el panel de consola y experimenta con `console.log()`. Muestra: tu nombre, tu edad, si eres estudiante (booleano), y usa `typeof` para verificar el tipo de cada valor. Al final, intenta una operación matemática simple.