Manual Esencial de JavaScript: Sintaxis, Estructuras y DOM

Introducción a JavaScript

Comentarios

// Una línea
/* Varias
   líneas */

Variables

let x = 10;
const PI = 3.14;
var y = 20; // (evitar en código moderno)

Tipos de Datos

let nombre = "Juan";    // string
let edad = 25;          // number
let activo = true;      // boolean
let nada = null;        // null
let indefinido;         // undefined
let persona = { nombre: "Ana", edad: 30 }; // objeto
let lista = [1, 2, 3];  // array

Estructuras de Control

Condicionales

// If-else
if (x > 0) {
  console.log("Positivo");
} else {
  console.log("Negativo");
}

// Switch
switch (dia) {
  case "lunes":
    console.log("Comienza la semana");
    break;
  default:
    console.log("Otro día");
}

Bucles

// For
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// While
while (x > 0) {
  x--;
}

// Do While
do {
  x++;
} while (x < 5);

Funciones en JavaScript

Declaración y Tipos

// Declaración
function saludar(nombre) {
  return "Hola " + nombre;
}

// Función flecha
const saludarFlecha = (nombre) => "Hola " + nombre;

// Función anónima
setTimeout(function () {
  console.log("Esperando...");
}, 1000);

Estructuras de Datos Avanzadas

Objetos y Arrays

let personaObj = {
  nombre: "Pedro",
  edad: 30,
  saludar: function() {
    return "Hola " + this.nombre;
  }
};

let frutas = ["manzana", "pera", "uva"];
console.log(frutas[0]); // manzana

// Métodos comunes de arrays
frutas.push("banana");
frutas.pop();
frutas.forEach(f => console.log(f));
let nuevas = frutas.map(f => f.toUpperCase());

Manipulación del DOM y Eventos

DOM y Fetch

// Selección
let titulo = document.getElementById("titulo");
let parrafos = document.querySelectorAll("p");

// Modificar contenido
titulo.textContent = "Nuevo título";

// Eventos
boton.addEventListener("click", () => {
  alert("¡Click!");
});

// JSON
let datos = '{"nombre":"Luis", "edad":28}';
let obj = JSON.parse(datos);
let str = JSON.stringify(obj);

// Fetch API
fetch("https://api.example.com/datos")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

Características Modernas (ES6+)

Operadores y Sintaxis

// Operador ternario
let mensaje = edad >= 18 ? "Mayor de edad" : "Menor de edad";

// Destructuración
let { nombre, edad } = persona;
let [a, b] = lista;

// Spread
let copia = [...lista];
let combinado = { ...persona, ciudad: "Madrid" };

Apéndice

Palabras Claves Reservadas

abstract boolean break byte case
match char class const continue
debugger default delete do double
else enum export extends false
final finally float for function
goto if implements import in
instanceof int interface long native
new null package private protected
public return short static super
switch synchronized this throw throws
transient true try typeof var
void volatile while with