JavaScript para principiantes
Con HTML y CSS tienes una página con estructura y estilo. Con JavaScript le añades comportamiento.
Lección 1 — Qué es JavaScript y tu primera línea de código
JavaScript (JS) es el lenguaje que hace que una página web reaccione: que algo pase al hacer clic en un botón, que un texto cambie sin recargar la página, que se valide un formulario antes de enviarlo. Si HTML es el esqueleto y CSS la ropa, JavaScript son los músculos.
Se escribe dentro de una etiqueta <script>, normalmente justo antes de cerrar </body> — así el navegador ya ha leído todo el HTML antes de ejecutar el código:
<body>
<h1>Hola</h1>
<script>
console.log("¡Esto se ve en la consola del navegador!");
</script>
</body>console.log() imprime un mensaje en la consola del navegador (se abre con la tecla F12, pestaña "Console"). Es la herramienta que más vas a usar para comprobar que tu código hace lo que crees que hace.
Para guardar datos usamos variables. Hoy en día se usan casi siempre let (para valores que pueden cambiar) y const (para valores que no cambian):
const nombre = "EGV Code";
let visitas = 1;
visitas = visitas + 1;
console.log(nombre, visitas); // EGV Code 2Ahora un ejemplo real: un botón que cambia un texto de la página al hacer clic, usando document.getElementById() para "buscar" un elemento por su id:
<p id="mensaje">Todavía no has hecho clic.</p>
<button id="miBoton">Haz clic aquí</button>
<script>
const boton = document.getElementById("miBoton");
const mensaje = document.getElementById("mensaje");
boton.addEventListener("click", function () {
mensaje.textContent = "¡Has hecho clic!";
});
</script><body> de tu página HTML de la lección 1, guarda y ábrelo en el navegador. Al hacer clic, el texto debería cambiar al momento — sin recargar la página. También puedes abrir la consola (F12) en cualquier página y escribir console.log("hola") para probar sin necesidad de guardar ningún archivo.
Lección 2 — Variables y tipos de datos
En la lección 1 ya usaste let y const para guardar valores. Lo que no vimos es que en JavaScript cada valor tiene un tipo, y saber cuál es cada uno evita muchos errores. Los tipos básicos (o "primitivos") son cuatro:
- string — texto, siempre entre comillas:
"Hola"o'Hola'. - number — números, con o sin decimales, sin comillas:
42,3.14. - boolean — solo puede valer
trueofalse. Se usa para condiciones. - undefined — el valor por defecto de una variable a la que aún no le has asignado nada.
const nombre = "EGV Code";
const edad = 3;
const activo = true;
let sinValor;
console.log(typeof nombre); // "string"
console.log(typeof edad); // "number"
console.log(typeof activo); // "boolean"
console.log(typeof sinValor); // "undefined"typeof te dice el tipo de cualquier valor — muy útil cuando algo no funciona como esperas y quieres comprobar qué estás manejando realmente. Para combinar texto con variables, en vez de sumar strings con + se usan template literals: comillas invertidas (` `) con la variable dentro de ${ }.
const producto = "hosting";
const precio = 2.95;
console.log(`El ${producto} cuesta ${precio}€ al mes.`);
// El hosting cuesta 2.95€ al mes.Además de esos cuatro tipos sueltos, hay dos estructuras que agrupan varios valores y que vas a usar constantemente:
- array — una lista ordenada, entre corchetes
[ ]. Cada valor tiene una posición, empezando en 0. - object — una colección de pares clave-valor, entre llaves
{ }. Se accede por nombre, no por posición.
const lenguajes = ["HTML", "CSS", "JavaScript"];
console.log(lenguajes[0]); // "HTML"
console.log(lenguajes.length); // 3
const cliente = {
nombre: "Eugeni",
plan: "Starter",
activo: true
};
console.log(cliente.nombre); // "Eugeni"
console.log(cliente.plan); // "Starter"console.log() en cada caso.
Lección 3 — Condicionales (if / else)
Hasta ahora tu código siempre hace lo mismo. Un condicional le permite decidir: "si esto se cumple, haz A; si no, haz B". Es la base de casi cualquier lógica real. Se escribe con if seguido de una condición entre paréntesis, y el código a ejecutar entre llaves:
const stock = 0;
if (stock === 0) {
console.log("Sin stock");
}Para comparar valores se usan los operadores de comparación — el más importante es === (triple igual), que compara valor y tipo, a diferencia de ==, que solo compara el valor y puede dar sorpresas. Usa siempre === salvo que sepas por qué necesitas lo contrario.
===/!==— igual / distinto>/<— mayor que / menor que>=/<=— mayor o igual / menor o igual
Para dar una alternativa cuando la condición no se cumple, se añade else; y para encadenar varias condiciones distintas, else if:
const stock = 3;
if (stock === 0) {
console.log("Sin stock");
} else if (stock < 5) {
console.log("Últimas unidades");
} else {
console.log("Disponible");
}
// Últimas unidadesJavaScript revisa las condiciones de arriba a abajo y ejecuta solo el primer bloque que se cumple — el resto se ignora, aunque también fueran ciertas. Cuando necesitas combinar varias condiciones a la vez, se usan los operadores lógicos && (y — se cumplen las dos) y || (o — se cumple al menos una):
const edad = 25;
const tieneCuenta = true;
if (edad >= 18 && tieneCuenta) {
console.log("Puede comprar");
}Volviendo al botón de la lección 1: puedes usar un if dentro del propio addEventListener para que el clic haga cosas distintas según el estado:
let clics = 0;
boton.addEventListener("click", function () {
clics = clics + 1;
if (clics === 1) {
mensaje.textContent = "¡Has hecho clic!";
} else {
mensaje.textContent = `Llevas ${clics} clics.`;
}
});clics >= 5 para mostrar un mensaje distinto a partir del quinto clic — es la misma idea con otra condición.
Lección 4 — Funciones básicas
En las lecciones anteriores has ido repitiendo variaciones del mismo código: comparar un valor, construir un mensaje, actualizar un contador. Una función es un bloque de código con nombre que puedes definir una vez y ejecutar (llamar) tantas veces como quieras, con datos distintos cada vez. Se define con la palabra function:
function saludar(nombre) {
console.log(`Hola, ${nombre}`);
}
saludar("Eugeni"); // Hola, Eugeni
saludar("Marta"); // Hola, Martanombre es un parámetro: un hueco que se rellena con el valor real (el argumento) cada vez que llamas a la función. La misma función, dos llamadas, dos resultados distintos — eso es lo que evita tener que copiar y pegar el mismo console.log una y otra vez.
Cuando una función necesita devolver un valor para usarlo después (no solo mostrarlo), se usa return. En cuanto el código llega a un return, la función termina ahí y entrega ese valor a quien la llamó:
function calcularPrecioConIVA(precio) {
return precio * 1.21;
}
const total = calcularPrecioConIVA(10);
console.log(total); // 12.1A diferencia de console.log (que solo imprime en pantalla), return guarda el resultado en una variable para seguir usándolo en el resto del código — sumarlo, mostrarlo en la página, pasarlo a otra función. Además de function nombre() {}, hoy en día es muy habitual escribir funciones cortas como arrow functions, con una sintaxis más breve:
const calcularPrecioConIVA = (precio) => {
return precio * 1.21;
};
console.log(calcularPrecioConIVA(10)); // 12.1Es exactamente la misma idea que function, solo con otra forma de escribirla — la verás mucho en código ajeno, sobre todo dentro de addEventListener, como ya usaste (sin nombre propio) en la lección 1 y 3.
esMayorDeEdad(edad) que use un if como el de la lección 3 y haga return true o return false según corresponda. Llámala varias veces con edades distintas y comprueba el resultado con console.log(esMayorDeEdad(16)).