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 representaciones.

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

Variables

var sulleysAge=15;\quad \text{var} \blue{\text{ sulleysAge}} = \green{15};
  • Esto crea una variable llamada start color blue, s, u, l, l, e, y, s, A, g, e, end color blue que almacena el valor start color green, 15, end color green.

Arreglos

var ages=[2,4,8];\quad \text{var} \blue{\text{ ages}} = [\green{2}, \pink{4}, \purple{8}];
  • Esto crea un arreglo llamado start color blue, a, g, e, s, end color blue que almacena tres valores: start color green, 2, end color green, comma, start color pink, 4, end color pink, comma, start color purple, 8, end color purple.
  • start color blue, a, g, e, s, end color blue, open bracket, 1, close bracket tiene el valor start color pink, 4, end color pink.

Funciones

space, v, a, r, start color blue, space, s, a, y, H, e, l, l, o, end color blue, equals, f, u, n, c, t, i, o, n, left parenthesis, right parenthesis, space, left brace
text("Hello world!",100,200);\qquad \text{text}(\text{\green{"Hello world!"}}, \pink{100}, \pink{200});
space, right brace
  • Esto crea una función llamada start color blue, s, a, y, H, e, l, l, o, end color blue que cuando sea llamada escribirá el texto "Hello world!"\text{\green{"Hello world!"}} en la pantalla en las coordenadas left parenthesis, start color pink, 100, comma, 200, end color pink, right parenthesis.
space, v, a, r, start color blue, space, s, a, y, H, e, l, l, o, end color blue, equals, f, u, n, c, t, i, o, n, left parenthesis, start color pink, x, end color pink, comma, space, start color pink, y, end color pink, right parenthesis, space, left brace
text("Hello world!", x, y);\qquad \text{text}(\text{\green{"Hello world!"}},\ \pink{x},\ \pink{y});
space, right brace
  • Esta función start color blue, s, a, y, H, e, l, l, o, end color blue ahora tiene dos parámetros de entrada, start color pink, x, end color pink y start color pink, y, end color pink, para definir las coordenadas del texto.

Objetos

var snowman={};\quad \text{var} \blue{\text{ snowman}} = \{\};
  • Esto crea un objeto vacío llamado start color blue, s, n, o, w, m, a, n, end color blue.
space, v, a, r, start color blue, space, s, n, o, w, m, a, n, end color blue, equals, left brace
space, start color green, a, g, e, end color green, colon, start color pink, 2, end color pink, comma
color:"white",\qquad \green{\text{color}}: \pink{\text{"white"}},
likes:["milk", "cold days"]\qquad \green{\text{likes}}: [\pink{\text{"milk"}},\ \pink{\text{"cold days"}}]
space, right brace
  • El objeto start color blue, s, n, o, w, m, a, n, end color blue ahora contiene tres propiedades: start color blue, s, n, o, w, m, a, n, end color blue, point, start color green, a, g, e, end color green, equals, start color pink, 2, end color pink y snowman.color="white"\text{\blue{snowman}.\green{color}} = \pink{\text{"white"}}. La tercera propiedad de start color blue, s, n, o, w, m, a, n, end color blue es un arreglo llamado start color green, l, i, k, e, s, end color green.

¡Diviértete!