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

¡Empieza aquí!

Introducción a esta lección

¿Listo para sumergirte en algo de código?

En esta lección vas a construir un modelo sencillo de un muñeco de nieve y articularlo con JavaScript. Después puedes extender el modelo para crear tu propio personaje en el proyecto final.
En esta lección vas a llenar algunas partes importantes de un programa mucho más grande, parecido a cómo las personas trabajan con software en Pixar.

Resumen de la lección

Primero vas a construir unos círculos al usar objetos.
Después vas a combinar varias figuras en un arreglo de objetos.
Por último vas a escribir funciones deformadoras de modo que puedas mover y desplazar tu modelo.
Al final, ¡estarás listo para el proyecto final!

¿Qué necesitas saber antes de empezar?

  • Si nunca has programado nada antes, te recomendamos pasar por nuestro curso de Introducción a JS para aprender los conceptos de variables, arreglos, funciones y objetos. Y, por supuesto, ¡regresa cuando estés listo!
  • Si ya has programado antes pero no en Khan Academy, te recomendamos que primero te familiarizes con nuestro ambiente, al crear un nuevo programa aquí.
  • Si ya aprendiste a programar aquí en Khan Academy, ¡perfecto! Solo repasa los siguientes conceptos y refresca cualquier habilidad que tengas un poco olvidada.
  • Esta lección aborda temas de matemáticas (ecuaciones para transformaciones geométricas) apropiadas para segundo de secundaria en adelante. Puedes repasar este concepto en nuestra lección de escenarios y puestas en escena.

Repaso rápido de los conceptos de programación que usarás

Variables

start text, v, a, r, end text, start color #6495ed, start text, space, s, u, l, l, e, y, s, A, g, e, end text, end color #6495ed, equals, start color #28ae7b, 15, end color #28ae7b, ;
  • Esto crea una variable llamada start color #6495ed, start text, s, u, l, l, e, y, s, A, g, e, end text, end color #6495ed que almacena el valor start color #28ae7b, 15, end color #28ae7b.

Arreglos

start text, v, a, r, end text, start color #6495ed, start text, space, a, g, e, s, end text, end color #6495ed, equals, open bracket, start color #28ae7b, 2, end color #28ae7b, comma, start color #ff00af, 4, end color #ff00af, comma, start color #9d38bd, 8, end color #9d38bd, close bracket, ;
  • Esto crea un arreglo llamado start color #6495ed, start text, a, g, e, s, end text, end color #6495ed que almacena tres valores: start color #28ae7b, 2, end color #28ae7b, comma, start color #ff00af, 4, end color #ff00af, comma, start color #9d38bd, 8, end color #9d38bd.
  • start color #6495ed, start text, a, g, e, s, end text, end color #6495ed, open bracket, 1, close bracket tiene el valor start color #ff00af, 4, end color #ff00af.

Funciones

start text, v, a, r, end text, start color #6495ed, start text, space, s, a, y, H, e, l, l, o, end text, end color #6495ed, equals, start text, f, u, n, c, t, i, o, n, end text, left parenthesis, right parenthesis, space, left brace
start text, t, e, x, t, end text, left parenthesis, start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text, comma, start color #ff00af, 100, end color #ff00af, comma, start color #ff00af, 200, end color #ff00af, right parenthesis, ;
right brace
  • Esto crea una función llamada start color #6495ed, start text, s, a, y, H, e, l, l, o, end text, end color #6495ed que cuando sea llamada escribirá el texto start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text en la pantalla en las coordenadas left parenthesis, start color #ff00af, 100, comma, 200, end color #ff00af, right parenthesis.
start text, v, a, r, end text, start color #6495ed, start text, space, s, a, y, H, e, l, l, o, end text, end color #6495ed, equals, start text, f, u, n, c, t, i, o, n, end text, left parenthesis, start color #ff00af, x, end color #ff00af, comma, space, start color #ff00af, y, end color #ff00af, right parenthesis, space, left brace
start text, t, e, x, t, end text, left parenthesis, start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text, comma, space, start color #ff00af, x, end color #ff00af, comma, space, start color #ff00af, y, end color #ff00af, right parenthesis, ;
right brace
  • Esta función start color #6495ed, start text, s, a, y, H, e, l, l, o, end text, end color #6495ed ahora tiene dos parámetros de entrada, start color #ff00af, x, end color #ff00af y start color #ff00af, y, end color #ff00af, para definir las coordenadas del texto.

Objetos

start text, v, a, r, end text, start color #6495ed, start text, space, s, n, o, w, m, a, n, end text, end color #6495ed, equals, left brace, right brace, ;
  • Esto crea un objeto vacío llamado start color #6495ed, start text, s, n, o, w, m, a, n, end text, end color #6495ed.
start text, v, a, r, end text, start color #6495ed, start text, space, s, n, o, w, m, a, n, end text, end color #6495ed, equals, left brace
start color #28ae7b, start text, a, g, e, end text, end color #28ae7b, colon, start color #ff00af, 2, end color #ff00af, comma
start color #28ae7b, start text, c, o, l, o, r, end text, end color #28ae7b, colon, start color #ff00af, start text, ", w, h, i, t, e, ", end text, end color #ff00af, comma
start color #28ae7b, start text, l, i, k, e, s, end text, end color #28ae7b, colon, open bracket, start color #ff00af, start text, ", m, i, l, k, ", end text, end color #ff00af, comma, space, start color #ff00af, start text, ", c, o, l, d, space, d, a, y, s, ", end text, end color #ff00af, close bracket
right brace
  • El objeto start color #6495ed, start text, s, n, o, w, m, a, n, end text, end color #6495ed ahora contiene tres propiedades: start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, point, start color #28ae7b, a, g, e, end color #28ae7b, end text, equals, start color #ff00af, 2, end color #ff00af y start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, point, start color #28ae7b, c, o, l, o, r, end color #28ae7b, end text, equals, start color #ff00af, start text, ", w, h, i, t, e, ", end text, end color #ff00af. La tercera propiedad de start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, end text es un arreglo llamado start text, start color #28ae7b, l, i, k, e, s, end color #28ae7b, end text.

¡Diviértete!

¿Quieres unirte a la conversación?

Sin publicaciones aún.
¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.