Grabación del selector de color siendo usado para cambiar el color de fondo

Consejo rápido: seleccionar color

[pic 1]Google ClassroomFacebookTwitterCorreo electrónico

En la guía paso a paso pasada, exploramos cómo usar el selector de color para, fácilmente, encontrar un color. Como no puedes ver el selector de color en acción en nuestras guías paso a paso, aquí hay un GIF que muestra cómo se usa:

[pic 2]

Grabación del selector de color siendo usado para cambiar el color de fondo.

Haz clic en cualquier lugar en los números para hacer que el selector de color aparezca. Después, haz clic en la barra de colores del lado derecho para cambiar el color general que estés seleccionando y haz clic en el lado izquierdo para cambiar la luminosidad/brillo del color. ¡Vas a probarlo en el siguiente desafío!

Realiza una pregunta

[pic 3]

• Preguntas

• Sugerencias y agradecimientos

Los mejores Recientes

como se cuando es el color correcto

[pic 4] • 21 votos 

 • 1 comentario • Marcael comentario de josue antony

hace un año de [pic 5] Ver el perfil de:josue antony

solo tienes que seleccionarlo y ver si correcto :)

4 votos 

 • 1 comentario • Marcael comentario de cesar

hace un año de [pic 6] Ver el perfil de:cesar

Mostrar todas las 2 respuestas a la pregunta de josue antony• Responde esta pregunta

quien invento este programa

0 votos 

 • 1 comentario • Marcael comentario de carlosceballos28

hace un año de [pic 7] Ver el perfil de:carlosceballos28

No es invento de una persona. hay varias personas que crearon los códigos, ha llevado mucho tiempo, es la evolución del trabajo colaborativo de mucha gente de las universidades y colegios de EEUU. -Aquí en KhanAcademy también están haciendo que estas herramientas y lenguajes sea mas fáciles de aprender y de usar. no es un programa, sino codigos para crear programas. y todo lo que ves aquí es "la magia del código" que fue programado para que aprendas a programar mejor. (Son llamados "desarrollos"… (leermásde este comentario)

Repaso: variables

[pic 8]Google ClassroomFacebookTwitterCorreo electrónico

Aquí está lo que cubrimos en esta lección sobre variables.

Una variable es una manera de almacenar valores. Para usar una variable, debemos tanto declararla (para hacerle saber al programa acerca de la variable) como luego asignarla (para hacerle saber al programa qué valor estamos almacenando en la variable).

Aquí está cómo declararíamos una variable llamada "xPos":

var xPos;

Ahora, podemos asignarle a xPos que tenga el valor 10:

xPos = 10;

Si queremos (¡y amenudo lo queremos!) podemos declarar y asignar en una sola declaración:

var xPos = 10;

Si después, por alguna razón, queremos cambiar el valor de una variable, podemos reasignarla:

var xPos = 10;

// algún tiempo más tarde...

xPos = 20;

Pronto veremos por qué la reasignación volver a asignar puede ser útil cuando queremos animar nuestro dibujos.

¿Cómo podemos escoger nombres para nuestras variables? Para las variables en JavaScript, sigue estas reglas:

• Los nombres de las variables pueden empezar con letras, o los símbolos $ o _. Solo pueden contener letras, números, $ y _.  No pueden empezar con un número. "myVariable", "leaf_1" y "$money3" son todos ejemplos válidos de nombres de variables.
• Los nombres de las variables distinguen entre mayúsculas y minúsculas, lo que significa que "xPos" es diferente de "xpos", así que asegúrate de ser consistente.
• Los nombres de las variables no pueden ser los mismos que los nombres de las variables existentes, y hay muchas en nuestro entorno de programación de ProcessingJS. Si alguna vez te sale un error como "Read only!", trata de cambiar el nombre de tu variable.
• Los nombres de las variables deben ser claros y con sentido; por ejemplo, en vez de "ts", usa "toothSize".
• Los nombres de las variables deben usar el formato mayúscula y minúscula (camelCase) para varias palabras, como "toothSize" en vez de "toothsize" o "tooth_size".

Vamos a usar mucho las variables cuando aprendamos animación en la siguiente lección, así que haz preguntas aquí si no entiendes algo acerca de ellas.

¿Qué son las animaciones?

[pic 9]Google ClassroomFacebookTwitterCorreo electrónico

¡Felicidades por aprender cómo hacer dibujos con tus habilidades de programación! Ahora vas a aprender cómo convertir esos dibujos en animaciones, con solo unas cuantas líneas más de código.

Sin embargo, primero vamos a hablar acerca de qué es una animación. ¿Cómo podrías hacer una animación sin programar?

Podrías hacer un montón de dibujos en pedazos de papel, luego hojear esos pedazos de papel de modo que los dibujos pasaran en una secuencia y se vería como una animación. Bueno, se vería como una animación si esos dibujos fueran cada uno un poco diferente de los otros. Por ejemplo, revisa esta animación hecha en lápiz y papel de un carro que va por la calle:

[pic 10]

Animación hecha en lápiz y papel de un carro que va por la calle

Sin embargo, probablemente tomaría un rato hacer esa animación, y bueno, no es tan buena. Se mueve bastante y no tiene nada de color.

¡Pero ahora vivimos en el futuro! Podemos hacer una mejor animación de manera programática en pocos minutos con solo una docena de líneas de código, como esta:

Animación programada de un carro rojo que va por la calle

¿Quieres aprender a programar eso? ¡Sigue adelante!

Usar expresiones matemáticas en JS

[pic 11]Google ClassroomFacebookTwitterCorreo electrónico

En el lenguaje JavaScript (y en la mayoría de los lenguajes de programación), podemos usar operadores matemáticos para calcular números y crear expresiones.

Ya viste algunos ejemplos de sumas en JS, al usar el operador +. También puedes usar - para restas, * para multiplicaciones, / para divisiones y % para sacar el residuo. Aquí hay ejemplos de esos en acción:

var x = 10;

var a = x + 5; // suma 5, el resultado es 15

var b = x - 5; // resta 5, el resultado es 5

var c = x * 2; // multiplica por 2, el resultado es 20

var d = x / 4; // divide entre 4, el resultado es 2.5

var e = x % 4; // divide entre 4 & regresa el residuo, el resultado es 2

Cuando usas varios operadores matemáticos en una sola expresión, la computadora sigue un "orden de operaciones" para asegurarse de que calcule el resultado de la misma manera cada vez. Es el mismo orden de operaciones que probablemente aprendiste en tus clases de matemáticas y comúnmente puede recordarse como "PEMDSR": paréntesis, exponentes, multiplicación, división, suma y resta. Puedes aprender más acerca del orden de las operaciones en Khan Academy.

Por ejemplo, en el siguiente código, primero se evaluarían las dos expresiones entre paréntesis, luego multiplicaría esos resultados y, por último, le sumaría 100 a ese resultado.

  var x = 10;

  var a = (x + 10) * (x / 2) + 100;

Al igual que en las expresiones matemáticas, solo necesitas paréntesis si quieres que tu expresión sea evaluada de manera diferente a como se haría de acuerdo al orden de las operaciones. De otra manera, puedes omitirlos.

A continuación, haremos un ejemplo que usa expresiones más complicadas con variables y operadores matemáticos. Si quieres, primero juega con algunas de estas expresiones matemáticas, para asegurarte de que entiendas bien cómo las evalúa la computadora.

Repaso: texto y cadenas

[pic 12]Google ClassroomFacebookTwitterCorreo electrónico

Aquí está un repaso de lo que cubrimos en esta lección sobre texto:

Antes de esta lección, estábamos usando valores numéricos para la mayoría de las cosas: pasarle números a las funciones, almacenar números en variables, etc. Como ya viste, también podemos usar valores de texto. En JavaScript, a estos valores de texto los llamamos cadenas; piensa acerca de ellos como una cadena de letras.

Para crear una cadena, rodeamos el texto entre comillas:

...