Conteúdo principal
Revisão: Objetos
Essa é uma revisão do que abordamos nesse tutorial sobre objetos.
Nós temos muitos tipos de valores que podemos armazenar em variáveis de JavaScript, e às vezes nós queremos armazenar um grupo de valores relacionados juntos: é aqui onde os objetos entram!
Um objeto é um tipo de dado que nos permite armazenar uma coleção de propriedades em uma única variável. Para criar um objeto, podemos declarar uma variável como nós faríamos normalmente, e então nós usamos chaves para cercar os pares chave-valor de propriedade:
var objectName = {
propertyName: propertyValue,
propertyName: propertyValue,
...
};Aqui está um objeto que descreve o Winston - este objeto tem duas propriedades,
hometown e hair, e cada um dos valores de cada propriedade são sequência de caracteres (strings):var aboutWinston = {
hometown: "Mountain View, CA",
hair: "no"
};Aqui é um objeto mais complexo que descreve um gato (cat), com quatro propriedades
age, furColor, likes e birthday.var lizzieTheCat = {
age: 18,
furColor: "grey",
likes: ["catnip", "milk"],
birthday: {"month": 7, "day": 17, "year": 1994}
};Observe como cada propriedade armazena um tipo de dado diferente -
age armazena um número, furColor armazena uma string likes armazena um vetor (arranjo) e aniversário armazena a outro objeto. Isso é a que tem de legal sobre objetos (bem, uma das coisas legais) - eles podem armazenar outros objetos dentro deles! Então você pode ter profundamente objetos aninhados para descrever dados complexos.Você também pode ver objetos declarados com o nome da propriedade entre aspas, assim:
var aboutWinston = {
"hometown": "Mountain View, CA",
"hair": "no"
};Isso é equivalente ao que vimos antes, sem aspas, mas leva mais tempo para escrever. A única vez que você realmente precisa usar aspas é quando se declara uma propriedade vazia:
var aboutWinston = {
"his hair": "none"
};Temos que usar aspas, porque caso contrário o interpretador de JavaScript irá se confundir. Aqui está a minha dica para você: não utilize espaço em branco no nome das propriedades! Então você nunca terá que usar aspas em torno dos nomes de propriedade.
Acessando as propriedades do objeto
Um objeto não é útil, se não pudermos olhar dentro dele e utilizar os valores das diferentes propriedades. Podemos fazer isso de duas maneiras - primeiro, usando o que chamamos de "notação de ponto" (dot notation), onde escrevemos o nome da variável, seguido por um "." e em depois o nome da propriedade:
var aboutWinston = {
hometown: "Mountain View, CA",
hair: "no"
};
text("Winston is from " + aboutWinston.hometown, 100, 100);
text("Winston has " + aboutWinston.hair + " hair", 100, 150);Também podemos usar a "notação de colchetes", que é bastante parecida com a forma como acessamos elementos em um arranjo, escrevendo o nome da variável, e então o nome da propriedade entre aspas, dentro dos colchetes:
var hisHometown = aboutWinston["hometown"];
var hisHair = aboutWinston["hair"];Se tentarmos acessar uma propriedade que não existe, temos como retorno "undefined":
text("O objetivo da vida de Winston é " + aboutWinston.lifeGoal, 100, 150);Modificando as propriedades do objeto
Assim como quando armazenamos tipos de dados em variáveis, podemos alterar os valores das propriedades dos objetos a qualquer hora durante um programa, usando a notação de ponto ou de colchetes:
aboutWinston.hair = "curly"; // Winston conseguiu uma peruca!Também podemos adicionar novas propriedades!
aboutWinston.lifeGoal = "ensinar JavaScript";Se não quisermos mais ter uma determinada propriedade, podemos deletá-la (mas na maioria das vezes vamos apenas alterar o seu valor):
delete aboutWinston.hair;Arranjos de objetos
Agora que você conhece tanto os arrays quanto os objetos, você pode combiná-los para criar arrays de objetos, que são formas muito úteis de armazenar dados em programas. Por exemplo, um array 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 + ' is ' + myCat.age + ' years old.');
}Observe que podemos iterar por meio de um arranjo de objetos da mesma forma que podemos iterar por meio de um arranjo de números ou strings, usando um loop for. Dentro de cada iteração, podemos acessar o elemento do arranjo atual com notação de colchetes e em seguida, acessar as propriedades desse elemento do arranjo (um objeto) com a notação de ponto.
Aqui temos outro exemplo prático que você pode usar em seus programas, um arranjo de coordenadas:
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);
}Elegante, não é? Os objetos podem ser confusos a princípio, mas conforme você os usa, você fica viciado e quer transformar tudo em um objeto!
Quer participar da conversa?
Nossa complicado, mas vamos tentando, quase nao consigo fazer o teste anterior, quando é uma formula simples até que vai mais quando começa a ficar complexo fica muito dificil, mas vou continuar tentando , com o tempo vou aprender!(20 votos)
Não desista, tudo nessa vida é complicado no começo, porem de garanto com a pratica logo, logo você está um craque(22 votos)
Por que só traduziram alguns parágrafos isolados dentro do texto?(6 votos)
O meu está totalmente traduzido.
Isso é porque eles demoram mesmo.(11 votos)
why i love this website WHY WHY !
S2(3 votos)
No final do texto fala sobre o array só de cordenadas, na aula falou de criar um segundo objeto só pras cordenadas.
Pois bem, eu fico pensando em fazer um objeto e incluir as cordenadas pra cada propridade do objeto dentro do mesmo objeto. Tem alguma convenção sobre isso? Ou o ideal mesmo é fazer um array ou objeto separado somente para as cordenadas das propriedades de um outro objeto?(2 votos)
No projeto estante de livros Nao estou conseguindo fazer um array de mais de 1 livro,quando eu chamo com o for,so fica o rect e nao aparece o resto!tentei de tudo,alguem me ajuda(2 votos)- muito difícil, até agora não conseguir fazer nenhuma das atividades sem olhar os derivados, mas tudo bem, continuarei tentando(1 voto)
- porque nos dois ultimos exemplos, dentro do loop For se usa: var nomearray = nomearray[i] ? sendo que quando usamos array antes não faziamos isso. Não entendi a função de fazer isso.(1 voto)
Usam isso para encontrar o item dentro do array. Se você quiser chamar o quinto item, por exemplo, escrevenomearray[5].(1 voto)
