Objetivo: Aprender las funciones JS más usadas en proyectos reales.
Metodología: 1) Lee la teoría → 2) Prueba en vivo → 3) Modifica el código.
Requisitos: Solo necesitas este archivo HTML. Guárdalo localmente y ábrelo en tu navegador.
Tu progreso
0%"Órdenes" = etiquetas y metas que le dicen al navegador y a Google qué hacer.
Órdenes principales
1) DOCTYPE (dice: "soy moderno")
<!DOCTYPE html>
2) lang (dice: "hablo español")
<html lang="es">
3) charset (tildes y ñ)
<meta charset="UTF-8">
4) viewport (se ve bien en celular)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5) title (pestaña + Google)
<title>Mi sitio</title>
6) description (resumen para Google)
<meta name="description" content="Resumen cortito">
Órdenes SEO + compartir
7) robots (Google puede mirar)
<meta name="robots" content="index, follow">
8) canonical (URL "verdadera")
<link rel="canonical" href="https://misitio.com/">
9) favicon (dibujito pestaña)
<link rel="icon" href="/favicon.ico">
10) og:* (vista previa WhatsApp)
<meta property="og:title" content="Mi sitio"> <meta property="og:image" content="https://misitio.com/og.png">
11) manifest (instalar como app)
<link rel="manifest" href="/manifest.webmanifest">
Tip kinder: cuando publiques, cambiá tusitio.pages.dev por tu URL real.
JavaScript es el "cerebro": toca cosas del HTML, escucha clicks, guarda datos, trae info de internet, etc.
Funciones JS más usadas
1) Buscar elementos (encontrar cosas en la página)
document.getElementById("id")
document.querySelector(".clase")
document.querySelectorAll("button")
2) Escuchar acciones (cuando tocás)
boton.addEventListener("click", () => { ... })
3) Cambiar texto
element.textContent = "Hola"
4) Cambiar HTML (con cuidado)
element.innerHTML = "<b>Hola</b>"
5) Clases (encender/apagar estilos)
element.classList.add("ok")
element.classList.remove("ok")
element.classList.toggle("ok")
Funciones JS PRO para web
6) Guardar en el celular (memoria simple)
localStorage.setItem("nombre", "Javi")
localStorage.getItem("nombre")
7) Temporizadores (esperar y repetir)
setTimeout(() => { ... }, 1000)
setInterval(() => { ... }, 1000)
8) Traer datos de internet (API)
fetch("https://api...")
.then(r => r.json())
.then(data => console.log(data))
9) Scroll a una parte
element.scrollIntoView({ behavior: "smooth" })
10) Copiar al portapapeles
navigator.clipboard.writeText("texto")
Tocá botones y mirá el resultado. Ideal para estudiar en el bus.
Panel de prueba
Mini demo: fetch (sin API)
Para que lo pruebes sin internet, esto usa un "JSON de mentira" dentro del código. Si querés, después lo conectamos a una API real.
Completa estos ejercicios para practicar lo aprendido.
Tus notas se guardan automáticamente en tu navegador.