Curso gratuito de JavaScript
Clase 01 · 3 horas

JavaScript
para diseñadores

Cada concepto controla algo visual. Nada de abstracciones — todo se ve en pantalla.

01 —

Variables & tipos

30 min

Una variable es una caja que guarda un valor. Ese valor puede ser un color, un texto, un número — cualquier cosa que tu diseño necesite recordar.

CÓDIGO
let color  = "#c84b2f"  // string: texto
let titulo = "Helvetica"
let tamaño = 48           // number: número
let activo = true         // boolean: verdadero/falso

// Usar la variable para cambiar algo visual
document.body.style.background = color
▶ DEMO INTERACTIVA — haz clic en un color
#c84b2f
02 —

Funciones

40 min

Una función es un bloque de código con nombre que puedes reutilizar. Piénsala como un preset en Figma: defines los parámetros una vez y los aplicas cuantas veces quieras.

CÓDIGO
function aplicarTema(fondo, texto) {
  document.body.style.background = fondo
  document.body.style.color      = texto
}

// Llamar la función con distintos valores
aplicarTema("#1a1a1a", "#ffffff") // oscuro
aplicarTema("#fffff0", "#111111") // papel
▶ DEMO INTERACTIVA — aplica un tema

Tipografía y espacio

El buen diseño comunica antes de que se lea.

03 —

Condicionales

30 min

Un condicional le dice al código: si pasa esto, haz aquello; si no, haz otra cosa. El ejemplo más cercano para un diseñador: el toggle de modo oscuro.

CÓDIGO
let modoOscuro = false  // empieza en claro

function toggleModo() {
  if (modoOscuro === false) {
    document.body.style.background = "#111"
    modoOscuro = true
  } else {
    document.body.style.background = "#fff"
    modoOscuro = false
  }
}
▶ DEMO INTERACTIVA — toggle de modo
Modo: CLARO
04 —

Arrays & forEach

40 min

Un array es una lista ordenada de valores. forEach recorre cada elemento y hace algo con él — sin que tú tengas que contar manualmente.

CÓDIGO
let paleta = ["#c84b2f", "#f0c27f", "#3d6b5e", "#1a1814"]

paleta.forEach(color => {
  let caja = document.createElement("div")
  caja.style.background = color
  document.body.appendChild(caja)
  // "por cada color, crea una caja"
})
▶ DEMO INTERACTIVA — paletas
05 —

Eventos

40 min

Un evento es cualquier cosa que hace el usuario: clic, tecla, hover, scroll. addEventListener le dice al elemento que esté atento y responda.

CÓDIGO
let fuentes = ["serif", "monospace", "cursive", "sans-serif"]
let i = 0

document.querySelector("h1").addEventListener("click", () => {
  i = i + 1
  if (i >= fuentes.length) i = 0
  document.querySelector("h1").style.fontFamily = fuentes[i]
})
▶ DEMO INTERACTIVA — haz clic en el título
Diseño tipográfico
clic para cambiar tipografía
Proyecto final · 20 min

Generador de color aleatorio

Todo lo visto en una sola función. Variables, condicionales, eventos — más una fórmula matemática para generar hex.

CÓDIGO COMPLETO
function colorAleatorio() {
  let letras = "0123456789ABCDEF"
  let color  = "#"

  for (let i = 0; i < 6; i++) {
    color += letras[Math.floor(Math.random() * 16)]
  }
  return color
}

document.querySelector("button").addEventListener("click", () => {
  let nuevoColor = colorAleatorio()
  document.body.style.background = nuevoColor
})
#C84B2F