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 sulleysAge\blue{\text{sulleysAge}} que almacena el valor 15\green{15}.

Arreglos

var ages=[2,4,8];\quad \text{var} \blue{\text{ ages}} = [\green{2}, \pink{4}, \purple{8}];
  • Esto crea un arreglo llamado ages\blue{\text{ages}} que almacena tres valores: 2,4,8\green{2}, \pink{4}, \purple{8}.
  • ages[1]\blue{\text{ages}}[1] tiene el valor 4 \pink{4}.

Funciones

var sayHello=function() {\quad \text{var} \blue{\text{ sayHello}} = \text{function}()\ \{
text("Hello world!",100,200);\qquad \text{text}(\text{\green{"Hello world!"}}, \pink{100}, \pink{200});
}\quad\}
  • Esto crea una función llamada sayHello\blue{\text{sayHello}} que cuando sea llamada escribirá el texto "Hello world!"\text{\green{"Hello world!"}} en la pantalla en las coordenadas (100,200)(\pink{100, 200}).
var sayHello=function(x, y) {\quad \text{var} \blue{\text{ sayHello}} = \text{function}(\pink{x},\ \pink{y})\ \{
text("Hello world!", x, y);\qquad \text{text}(\text{\green{"Hello world!"}},\ \pink{x},\ \pink{y});
}\quad\}
  • Esta función sayHello\blue{\text{sayHello}} ahora tiene dos parámetros de entrada, x\pink{x} y y\pink{y}, para definir las coordenadas del texto.

Objetos

var snowman={};\quad \text{var} \blue{\text{ snowman}} = \{\};
  • Esto crea un objeto vacío llamado snowman\blue{\text{snowman}}.
var snowman={\quad \text{var} \blue{\text{ snowman}} = \{
age:2,\qquad \green{\text{age}}: \pink{2},
color:"white",\qquad \green{\text{color}}: \pink{\text{"white"}},
likes:["milk", "cold days"]\qquad \green{\text{likes}}: [\pink{\text{"milk"}},\ \pink{\text{"cold days"}}]
}\quad\}
  • El objeto snowman\blue{\text{snowman}} ahora contiene tres propiedades: snowman.age=2\text{\blue{snowman}.\green{age}} = \pink{2} y snowman.color="white"\text{\blue{snowman}.\green{color}} = \pink{\text{"white"}}. La tercera propiedad de snowman\text{\blue{snowman}} es un arreglo llamado likes\text{\green{likes}}.

¡Diviértete!

Cargando