If you're seeing this message, it means we're having trouble loading external resources on our website.

Si estás detrás de un filtro de páginas web, por favor asegúrate de que los dominios *.kastatic.org y *.kasandbox.org estén desbloqueados.

Contenido principal

Unidad: Introducción a JS: dibujo y animación

Introducción a la programación

Si eres nuevo por acá, ve nuestro video introductorio y obtén un breve recorrido de nuestro curso de programación. Después, ¡ponte a programar!
Aprende
¿Qué es programar?
(Abre un modal)
Aprender programación en Khan Academy
(Abre un modal)

Conceptos básicos de dibujo

Te vamos a mostrar los conceptos básicos de programación y cómo dibujar figuras.
Aprende
Hacer dibujos con código
(Abre un modal)
Consejo rápido: arrastrar números
(Abre un modal)
Desafío: muñeco de nieve sencillo
(Abre un modal)
Dibujar más figuras con código
(Abre un modal)
Desafío: muñeco de nieve que saluda
(Abre un modal)

Colorear

¡Te vamos a mostrar cómo colorear y delinear tus figuras!
Aprende
Colorear con código
(Abre un modal)
Consejo rápido: seleccionar color
(Abre un modal)
Desafío: día nevado soleado
(Abre un modal)
El poder de la documentación
(Abre un modal)
Proyecto: ¿qué hay de cena?
(Abre un modal)

Variables

Cubriremos cómo utilizar variables para almacenar valores, animar tus dibujos y más.
Aprende
Introducción a las variables
(Abre un modal)
Desafío: dientes de conejo
(Abre un modal)
Más acerca de variables
(Abre un modal)
Desafío: rana loca
(Abre un modal)
Repaso: variables
(Abre un modal)
Practica
Usar variables
4 preguntas

Conceptos básicos de animación

Aprende cómo animar tus dibujos.
Aprende
¿Qué son las animaciones?
(Abre un modal)
Hacer animaciones
(Abre un modal)
Desafío: el sol que explota
(Abre un modal)
Atajos para incrementos
(Abre un modal)
Un atajo más corto
(Abre un modal)
Desafío: nubes que se separan
(Abre un modal)
Proyecto: estrella fugaz
(Abre un modal)

Programas interactivos

Aprende cómo hacer programas que dibujen figuras con base en la ubicación del ratón, como apps de dibujo.
Aprende
Interacción con el ratón
(Abre un modal)
Desafío: jitomate sabroso
(Abre un modal)
Desafío: locura de movimiento con el ratón
(Abre un modal)

Adicional: cambiar el tamaño con variables

Aprende cómo utilizar expresiones variables para cambiar el tamaño de las partes de tu dibujo en relación a otras partes. (Esto requiere un poco más de matemáticas, así que si sientes que aún no tienes una buena comprensión de las fracciones, puedes saltarte esto).
Aprende
Usar expresiones matemáticas en JS
(Abre un modal)
Cambiar el tamaño de las figuras con expresiones variables
(Abre un modal)
Desafío: ojos de oso pardo
(Abre un modal)
Proyecto: ataque animal
(Abre un modal)
Practica
Usar expresiones variables
6 preguntas

Texto y cadenas

Aprende cómo mostrar texto en el lienzo, cambiar su tamaño, colorearlo y animarlo.
Aprende
Texto fabuloso: parte uno
(Abre un modal)
Desafío: mis comidas favoritas
(Abre un modal)
Texto fabuloso: parte dos
(Abre un modal)
Desafío: rastreador del ratón
(Abre un modal)
Repaso: texto y cadenas
(Abre un modal)
Proyecto: diseño de anuncio
(Abre un modal)

Funciones

Haz tu código más reutilizable al agruparlo en funciones y luego haz que esas funciones acepten parámetros y regresen valores.
Aprende
Funciones
(Abre un modal)
Desafío: di tu nombre
(Abre un modal)
Parámetros de funciones
(Abre un modal)
Desafío: topos en los agujeros
(Abre un modal)
Valores de regreso de una función
(Abre un modal)
Desafío: calculadora
(Abre un modal)
Variables locales y globales
(Abre un modal)
Funciones especiales de ProcessingJS
(Abre un modal)
Repaso: funciones
(Abre un modal)
Proyecto: pecera
(Abre un modal)

Declaraciones lógicas y condicionales (if)

¡Enséñale a tu programa a tomar decisiones!
Aprende
Declaraciones condicionales (if)
(Abre un modal)
Desafío: pelota que rebota
(Abre un modal)
Más interacción con el ratón
(Abre un modal)
Desafío: tu primera aplicación de pintura
(Abre un modal)
Booleanos
(Abre un modal)
Desafío: analizador de números
(Abre un modal)
Operadores lógicos
(Abre un modal)
Desafío: tu primer botón
(Abre un modal)
Desafío: botón más inteligente
(Abre un modal)
If/Else - parte 1
(Abre un modal)
Desafío: tarjetas didácticas llamativas
(Abre un modal)
If/Else - parte 2
(Abre un modal)
Repaso: declaraciones lógicas y condicionales (if)
(Abre un modal)
Números aleatorios
(Abre un modal)
Proyecto: Bola 8 mágica
(Abre un modal)

Depurar programas

¿Cómo puedes averiguar qué es lo que está mal con tu código? Aprende consejos y trucos para depurar tus programas.
Aprende
Depurar con println()s
(Abre un modal)
Más consejos para depurar
(Abre un modal)

Hacer bucles

¿Estás repitiendo algo una y otra vez? ¡Los bucles están aquí para ayudar!
Aprende
Introducción a los bucles while
(Abre un modal)
Desafío: una regla de bucles
(Abre un modal)
Más bucles while: Hopper con globos
(Abre un modal)
Desafío: un paisaje de bucles
(Abre un modal)
¡Bucles for! Una nueva clase de bucle
(Abre un modal)
Desafío: papel rayado
(Abre un modal)
Bucles for anidados
(Abre un modal)
Repaso: hacer bucles
(Abre un modal)
Proyecto: construye una casa
(Abre un modal)
Practica
Usar bucles for
6 preguntas

Escribir código limpio

Aprende cómo escribir código de JavaScript que sea fácil de leer y entender, con buen uso de sangría, espaciado, nombres y comentarios.
Aprende
Código legible
(Abre un modal)
Aclarar con comentarios
(Abre un modal)
Practica
Escribir código limpio
9 preguntas

Arreglos

¡Almacena múltiples valores en tus variables con arreglos!
Aprende
Introducción a los arreglos
(Abre un modal)
Desafío: frutas favoritas
(Abre un modal)
Iterar sobre arreglos
(Abre un modal)
Desafío: animales favoritos
(Abre un modal)
Modificar arreglos
(Abre un modal)
Desafío: creador de constelaciones
(Abre un modal)
Repaso: arreglos
(Abre un modal)
Proyecto: haz que llueva
(Abre un modal)

Objetos

Aprende cómo almacenar datos complejos en objetos.
Aprende
Introducción a los objetos
(Abre un modal)
Desafío: tarjeta de receta
(Abre un modal)
Modificar objetos
(Abre un modal)
Desafío: pintor de cuadros
(Abre un modal)
Arreglos de objetos
(Abre un modal)
Desafío: reseñas de películas
(Abre un modal)
Repaso: objetos
(Abre un modal)
Proyecto: librero
(Abre un modal)

Diseño orientado a objetos

Cómo utilizar conceptos orientados a objetos en JavaScript para hacer código más reutilizable.
Aprende
Tipos de objetos
(Abre un modal)
Desafío: arcoiris doble
(Abre un modal)
Métodos de objetos
(Abre un modal)
Desafío: carita sonriente
(Abre un modal)
Herencia en objetos
(Abre un modal)
Desafío: floricultor
(Abre un modal)
Repaso: diseño orientado a objetos
(Abre un modal)

Convertirse en un mejor programador

Ahora que entiendes los fundamentos de la programación, aprende técnicas que te ayudarán a ser más productivo y a escribir un código más hermoso.
Aprende
Planear un proyecto de programación
(Abre un modal)
Planear con pseudocódigo
(Abre un modal)
Qué aprender a continuación
(Abre un modal)

Acerca de esta unidad

Aprende cómo utilizar el lenguaje JavaScript y la biblioteca ProcessingJS para crear dibujos y animaciones divertidas.