Aprende JavaScript Vanilla: El Cerebro de la Web

Cualquier texto entre comillas dobles "" o simples ''. Puede contener letras, espacios, signos y emojis.

let materia = "Formación Cívica y Ética";
let saludo = "¡Buenos días maestro! 👋";

Números enteros (positivos o negativos) y decimales con punto . (nunca con coma). No llevan comillas.

let calificacion = 9.8;
let temperatura = -2;
let precioTorta = 25;

Solo tiene dos valores posibles: true (verdadero) o false (falso). Es el interruptor de luz de la programación.

let entregoTarea = true;
let llegoTarde = false;

Las operaciones básicas de matemáticas: suma (+), resta (-), multiplicación con asterisco (*) y división con diagonal (/).

let precioLibreta = 35;
let cantidad = 4;
let total = precioLibreta * cantidad; // Da 140

Permite comparar dos números: mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=). Devuelven true o false.

let calificacion = 7.5;
let aprobaste = calificacion >= 6.0; // true

En JS usamos tres signos de igual (===) para verificar si dos cosas son exactamente idénticas en valor y tipo de dato.

let respuesta = "México";
let esCorrecta = respuesta === "México"; // true

Es la forma en que la computadora toma decisiones según una condición. Imagina que el sistema evalúa si el alumno aprobó o no su examen trimestral:

let calificacion = 8.5;

if (calificacion >= 9.0) {
  console.log("🏆 ¡Excelente trabajo! Estás en el cuadro de honor.");
} else if (calificacion >= 6.0) {
  console.log("👍 ¡Aprobado! Cumpliste con el objetivo.");
} else {
  console.log("📚 Necesitas presentar examen de recuperación.");
}

Una función es como una receta o máquina de cocina: le metes ingredientes (parámetros), hace una serie de pasos y te devuelve un resultado con return.

function calcularAreaTriangulo(base, altura) {
  let area = (base * altura) / 2;
  return area;
}

// Usamos la función:
let resultado = calcularAreaTriangulo(10, 5); // 25

En lugar de escribir el mismo mensaje 30 veces para cada alumno del salón, creas una función y la llamas con el nombre de cada quien.

function saludar(alumno) {
  return "¡Hola " + alumno + "! Bienvenido al laboratorio.";
}

console.log(saludar("Carlos"));
console.log(saludar("Mariana"));

Es el lazo que une JavaScript con HTML. Le dice a JS: "Busca en la página la etiqueta que tenga este ID específico para poder cambiarla".

// Cambiamos el texto de un párrafo desde JavaScript
let titulo = document.getElementById("titulo-clase");
titulo.innerText = "¡Clase de Informática Actualizada!";

Pone una oreja atenta al botón. Cuando el usuario hace clic con el ratón o el dedo, se dispara la función que nosotros programamos.

let boton = document.getElementById("btn-enviar");

boton.addEventListener("click", function() {
  alert("¡Hiciste clic en el botón escolar!");
});