Contenido principal
Programación de computadoras
Curso: Programación de computadoras > Unidad 1
Lección 15: ObjetosRepaso: objetos
Este es un repaso de lo que cubrimos en esta lección sobre objetos.
Tenemos muchos tipos de valores que podemos almacenar en variables de JavaScript, y a veces queremos guardar muchos valores relacionados juntos: ¡aquí es donde entran los objetos!
Un objeto es un tipo de datos que nos permite almacenar una colección de propiedades en una sola variable. Para crear un objeto, declaramos una variable como lo haríamos normalmente, y luego utilizamos llaves para rodear las parejas de propiedades clave-valor:
var objectName = {
propertyName: propertyValue,
propertyName: propertyValue,
...
};Aquí hay un objeto que describe a Winston. Este objeto tiene dos propiedades,
hometown (ciudad de nacimiento) y hair (cabello), y cada una de las propiedades son cadenas de caracteres:var aboutWinston = {
hometown: "Mountain View, CA",
hair: "no"
};Aquí hay un objeto más complejo que describe un gato, con cuatro propiedades:
age (edad), furColor (color de pelo), likes (cosas que le gustan) y birthday (cumpleaños).var lizzieTheCat = {
age: 18,
furColor: "grey",
likes: ["catnip", "milk"],
birthday: {"month": 7, "day": 17, "year": 1994}
};Observa como cada propiedad guarda un tipo de dato distinto:
age guarda un número, furColor guarda una cadena de caracteres, likes guarda un arreglo y birthday guarda otro objeto. Eso es la cosa genial de los objetos (bueno, una de las cosas geniales). ¡Pueden guardar otros objetos dentro de ellos! Así que puedes tener objetos muy anidados para describir datos complejos.También puedes ver objetos que en sus declaraciones usan comillas alrededor de los nombres de propiedades, como:
var aboutWinston = {
"hometown": "Mountain View, CA",
"hair": "no"
};Eso es equivalente a lo que vimos anteriormente sin comillas, pero nos tardamos más en escribirlo. La única vez que es absolutamente necesario usar comillas es si el nombre de tu propiedad tiene un espacio, por ejemplo:
var aboutWinston = {
"his hair": "none"
};Aquí tenemos que usar comillas, porque de lo contrario el intérprete de JavaScript se confundirá. Este es mi consejo: ¡simplemente no uses espacios en los nombres de las propiedades! Así nunca tendrás que poner los nombres de las propiedades entre comillas.
Acceder a las propiedades de los objetos
Un objeto no es útil a menos que podamos ver dentro de él y obtener los valores de las diferentes propiedades. Podemos hacer eso de dos maneras. Primero, mediante lo que llamamos "notación de punto", en donde escribimos el nombre de la variable, seguido por un "." y luego el nombre de la propiedad:
var aboutWinston = {
ciudad natal: "Mountain View, CA",
cabello: "no"
};
text("Winston es de " + aboutWinston.hometown, 100, 100);
text("Winston tiene el cabello " + aboutWinston.hair + " ", 100, 150);También podemos usar "notación de corchetes", que es parecida a cómo accedemos a los elementos de un arreglo, en donde escribimos el nombre de la variable, luego corchetes con el nombre de la propiedad entre comillas:
var hisHometown = aboutWinston["hometown"];
var hisHair = aboutWinston["hair"];Si intentamos acceder a una propiedad que no existe, veríamos "undefined" (indefinido):
text("El objetivo en la vida de Winston es " + aboutWinston.lifeGoal, 100, 150);Modificar las propiedades de un objeto
Al igual que cuando almacenamos otros tipos de datos en las variables, podemos cambiar los valores de las propiedades del objeto en cualquier momento durante un programa, al usar la notación de punto o de corchetes:
aboutWinston.hair = "curly"; // (rizado en inglés) ¡Winston consigue una peluca!¡También podemos agregar propiedades completamente nuevas!
aboutWinston.lifeGoal = "teach JavaScript";Si ya no ocupamos una propiedad, podemos borrarla (pero probablemente la mayor parte del tiempo solo le cambiaremos el valor):
delete aboutWinston.hair;Arreglos de objetos
Ahora que conoces tanto los arreglos como los objetos, puedes combinarlos para crear arreglos de objetos, que de hecho son formas muy útiles de almacenar datos en programas. Por ejemplo, un arreglo de gatos:
var myCats = [
{name: "Lizzie",
age: 18},
{name: "Daemon",
age: 1}
];
for (var i = 0; i < myCats.length; i++) {
var myCat = myCats[i];
println(myCat.name + ' tiene ' + myCat.age + ' años.');
}Observa que iteramos a través de un arreglo de la misma forma que iteramos a través de un arreglo de números o de cadenas de caracteres, al usar un bucle for. Dentro de cada iteración, accedemos al elemento actual del arreglo con notación de corchetes y accedemos a las propiedades de ese elemento del arreglo (un objeto) con notación de punto.
Aquí hay otro ejemplo práctico que podrías ocupar en tus programas, un arreglo de coordenadas de posición:
var positions = [
{x: 200, y: 100},
{x: 200, y: 200},
{x: 200, y: 300}
];
for (var i = 0; i < positions.length; i++) {
var position = positions[i];
ellipse(position.x, position.y, 100, 100);
}¿Genial, no? Los objetos pueden ser confusos al principio, pero sigue usándolos, y eventualmente te volverás adictos a ellos, ¡y querrás convertir todo en un objeto!
¿Quieres unirte a la conversación?
esmuy dificil aprender esto cuando tienes 7 años(43 votos)
Felicidades si tienes 7 años y estás aquí! ;)(32 votos)
hasta ahora el ejericicio que más me rompio la cabeza.(25 votos)
me costo el de la reseña de peliculas pero lo complete for es muy complejo.(10 votos)
Hasta aquí todo perfecto y bien explicado, pero los objetos me esta costando mucho entenderlo y me parece explicado de forma demasiado breve. Hubiese estado bien una traducción a palabras del código. Por ejemplo si pone //if (mousePressed) { if (mouseButton==RIGHT)...// En vez de poner solo el código explicar // si, el ratón se pulsa, y si lo pulsado es el botón derecho, ocurrirá...// Así entendemos qué esta ocurriendo y cómo de una forma más sencilla.(5 votos)
Alguien me ayude a evaluar mis proyectos(4 votos)
como hago para almacenar una imagen dentro de un objeto(5 votos)- Este arreglo de objeto es de la actividad anterior, espero te sirva ;)
var movies = [
{
title: "Puff the Magic Dragon",
review: "Best movie ever!!",
image: getImage("avatars/aqualine-seed")
},
{
title: "Terminator",
review: "Hasta la vista Baby",
image: getImage("avatars/duskpin-seed")
},
{
title: "300",
review: "Thi's Sparta!!",
image: getImage("avatars/leafers-seed")
}
];(19 votos)
Porque no hay un ejemplo exacto de lo que tenemos que hacer?(5 votos)- En el uso del bucle "for", después de desarrollarlo se anota:
var position = position [i]:
<no tengo bien claro para que sirve esta variable. Alguien me puede ayudar?(2 votos)
Dentro del bucle for, la viariable i tiene un valor de 0, lo cual te sirve como un contador. Para ejectutar la primera posición de x sin usar el bucle, debes escribir text("Mi posición actual es" + position[0], 100, 100); La variable i dentro del bucle se encarga de llamar todos los elementos del objeto, usando la propiedad position.length. Espero te sirva.(6 votos)
estuvo fácil y divertido(4 votos)- Lo complicado del desafío anterior fue darle las coordenadas de posición al momento de mostrar las películas, ya que a pesar de dejarlas espaciadas y legible no me lo daba como correcto, el ejercicio en sí estuvo bastante simple.(4 votos)
- Leer que a otros les costó trabajo el desafío de "Reseña de películas", me tranquiliza un poco.(4 votos)