JavaScript - Marx Gomes Van der Linden

Transcrição

JavaScript
Objetos e Arrays
Ferramentas para Internet
Marx Gomes Van der Linden
Objetos

Javascript define um tipo especial de variável
chamado Objeto.
Objetos não pertencem a classes
explicitamente definidas.
Um objeto em Javascript é uma associação de
múltiplos valores, organizados por nomes.




Tipo de dados especial que contém
conjuntos de dados de outros tipos.
Pode ser visto como um array associativo
ou lista associativa.
http://marx.vanderlinden.com.br/
2
Objetos como Listas Associativas


Uma lista associativa é análoga a um
dicionário.
A cada chave da lista, é associado um valor.

"Milho" → "Amarelo"

"Arroz" → "Branco"

"Limão" → "Verde
3


Para criar um objeto, basta associá-lo ao valor
{}.
Depois, podem-se associar valores
(propriedades) ao objeto usando a sintaxe:
var cores = {};
cores['milho'] = 'Amarelo';
cores['arroz'] = 'Branco';
cores['limao'] = 'Verde';
4

A mesma sintaxe é usada para recuperar os
elementos do objeto:
document.write(cores['milho']);
Saída:
Amarelo

5

A mesma variável pode, em diferentes
momentos, representar diferentes tipos de
valores, inclusive outros objetos.
var valor = {};
valor['teste'] = 385;
valor['blabla'] = 'Meu texto';
document.write(
valor['teste'] + "<br>\n" );
valor = 50.3;
document.write(valor);
385<br>
50.3
6
Criando um Objeto

É possível criar todos as propriedades de um
objeto em uma única instrução:
var computers = {
'trs-80' : 'Radio Shack',
2600 : 'Atari',
'adam' : 'Coleco'
};
document.write(
computers['adam'] + ', ' +
computers[2600] );
Coleco, Atari
7
Objetos

Para adicionar um novo elemento a um objeto
já existente, basta defini-lo:
var computers = {
'trs-80' : 'Radio Shack',
2600 : 'Atari', 'adam' : 'Coleco'
};
computers['mac'] = 'Apple';
document.write(computers['adam'] + ', '
+ computers[2600] + ', '
+ computers['mac'] );
Coleco, Atari, http://marx.vanderlinden.com.br/
Apple
8
Objetos



É possível utilizar uma sintaxe alternativa (mais
comum) para acessar alguns elementos de um
objeto.
objeto['nome'] → objeto.nome
'nome' deve seguir a convenção para
nomenclatura de variáveis:


Iniciar com letra
Não ter espaços ou caracteres especiais
9
Objetos

Exemplos:
document.write( computers['mac'] ); // Apple
document.write( computers.mac );
// Apple
document.write( computers['2600']); // Atari
document.write( computers[2600]);
// Atari
document.write( computers.2600);
// Erro!
10
Objetos
var sistemas = {
stallman : 'GNU',
'linus' : "Linux"
};
sistemas.apple = 'Mac OS X';
sistemas["microsoft"] = 'Windows';
document.write(
sistemas['stallman'] + " " );
document.write(sistemas.linus + " ");
document.write(sistemas.microsoft + " ");
document.write(sistemas["apple"]);
GNU Linux Windowshttp://marx.vanderlinden.com.br/
Mac OS X
11
for/in



A estrutura de controle for/in serve para
percorrer todas as propriedades de um objeto,
mesmo que não se conheça seus nomes.
Sintaxe:
for(tmpvar in objeto)


Percorre o objeto X vezes, onde X = número
de propriedades do objeto.
A cada iteração, assumem os valores:
 tmpvar → nome da propriedade atual
 objeto[tmpvar] → valor da
12
propriedade atual
for/in
var sistemas = {
stallman : 'GNU',
'linus' : "Linux"
};
for (var x in sistemas) {
document.write(
x + ': ' + sistemas[x] + ' | '
);
}
stallman: GNU | linus:
Linux | apple: Mac OS
13
X | microsoft: Windows |
Atenção:
var sistemas = {
stallman : 'GNU',
'linus' : "Linux"
};
for (var x in sistemas) {
document.write(
x + ': ' + sistemas.x + ' | '
);
Erro!
}
stallman: GNU | linus:
Linux | apple: Mac OS
14
X | microsoft: Windows |
Objetos

Um objeto pode ter outros objetos como
membros:
var comp = {};
comp.mac = {};
comp.mac.sistema = "Mac OS X";
comp.mac.fabricante = "Apple";
comp.winpc = {}
comp.winpc.sistema = "Windows";
comp.winpc.fabricante = "Microsoft";
15
Objetos
for(tipo in comp){
document.write("<h1>" + tipo +
"</h2><ul>");
for(prop in comp[tipo])
document.write("<li><em>" +
prop + "</em>: " +
comp[tipo][prop] + "</li>"
);
document.write("</ul>");
16
Objetos
17
Arrays



Um objeto pode ser tratado como um array,
que armazena uma lista seqüencial de valores.
Os elementos de um array podem ser de
qualquer tipo.
Para criar um objeto como um array, basta usar
a sintaxe []:
var vazio = [];
var primos = [2, 3, 5, 7, 11];
var outros = [ 1.1, true, "a" ];
18
Arrays




Os elementos de um array são acessados
pelos seus índices, que são números inteiros.
O primeiro elemento tem índice 0.
O último índice é sempre N-1, onde N é o
número de elementos do array.
Não há necessidade de se preocupar com
alocação de espaço.
19
Arrays

A sintaxe [] também para recuperar
elementos do array, a partir do índice.
var pratos = ['Pizza', 'Chocolate',
'Lasanha', 'Feijoada'];
document.write(
"Eu quero " + pratos[2] + " com " +
pratos[3] + "."
);
Eu quero Lasanha com Feijoada.
20
Tamanho do array

Todo array tem uma propriedade length, que
armazena o seu tamanho.
document.write(
"Eu quero " + pratos.length + " pratos: ");
for(var i=0; i<pratos.length; i++)
document.write(pratos[i] + ' ');
Eu quero 4 pratos: Pizza Chocolate Lasanha
21
Feijoada
Exibindo o array

Também é possível escrever na tela o array
diretamente:
document.write(
"Eu quero " + pratos.length + " pratos: ");
document.write(pratos);
Eu quero 4 pratos:
Pizza,Chocolate,Lasanha,Feijoada
22
Modificando o array
var pratos = ['Pizza', 'Chocolate', 'Lasanha',
'Feijoada'];
document.write("Eu quero " + pratos.length + "
pratos: ");
pratos[3] = 'Salada'; pratos[5] = 'Macarrão';
document.write('<br>');
pratos: ");
for(var i=0; i<pratos.length;
http://marx.vanderlinden.com.br/ i++)
23
Saída
Feijoada
Salada undefined Macarrão
24
Encurtando o array
'Feijoada'];
pratos: ");
pratos.length = 2;
pratos: ");
25
Saída
Feijoada
Eu quero 2 pratos: Pizza Chocolate
26
Aumentando o array
'Feijoada'];
pratos: ");
pratos.length = 6;
pratos: ");
27
Saída
Feijoada
Feijoada undefined undefined
28
Arrays

Arrays em Javascript são dinâmicos.

Redimensionamento automático:

O array cresce para acomodar novos
elementos que lhe são atribuídos.
O comprimento do array (length) pode ser
modificado diretamente em tempo de
execução.


Elementos não inicializados recebem o valor
undefined.
29
Arrays e Objetos




Um array é um objeto como qualquer outro.
Um array pode ter propriedades (como
qualquer objeto).
As propriedades e os índices do array não se
misturam.
Inteiros e strings que podem ser convertidas
em inteiros são consideradas índices.
30
Arrays e Objetos
pratos = [ 'Pizza', 'Chocolate', 'Lasanha',
'Feijoada' ];
pratos['extra'] = 'Surpresa do dia';
document.write("Eu quero " + pratos.length +
" pratos: ");
document.write(pratos['extra']);
Feijoada Surpresahttp://marx.vanderlinden.com.br/
do dia
31
Arrays e Objetos
'Feijoada' ];
pratos['6'] = 'Salada';
pratos[0.5] = 'Promoção';
pratos[true] = 'Molho';
document.write(
"Eu quero " + pratos.length + " pratos: " );
document.write( pratos[i] + ' ' );
document.write( '<br>' );
document.write( pratos.extra
http://marx.vanderlinden.com.br/ + ', ' +
pratos[0.5] + ', ' + pratos[true] );
32
Saída
Feijoada undefined undefined Salada
Surpresa do dia, Promoção, Molho
33
Strings como arrays

Em Javascript, um string pode ser tratado
como um array de caracteres, apenas para
leitura.
var pais = "Brasil";
pais[3] = 'z';
document.write(
pais.length + ' ' + pais[2] + ' ' + pais
);
6 a Brasil
34
for/in

Em um array, a estrutura for/in recupera
tanto as propriedades do objeto, quanto os
índices do array.
35
for/in
'Feijoada' ];
pratos['6'] = 'Salada';
pratos[0.5] = 'Promoção';
pratos[true] = 'Molho';
document.write("Conteúdo do objeto: <ul>");
for (var x in pratos)
document.write(
'<li>' + x + ': ' + pratos[x] + '</li>'
);
document.write("</ul>");
36
Saída
Conteúdo do objeto:
●
0: Pizza
●
1: Chocolate
●
2: Lasanha
●
3: Feijoada
●
extra: Surpresa do dia
●
6: Salada
●
0.5: Promoção
●
true: Molho
37
delete



A palavra-chave delete pode ser usada para
excluir propriedades do objeto ou índices do
array.
Ao se excluir um elemento do arrays, os
elemntos seguintes não são movidos.
Sintaxe:
 delete objeto.nome;
 delete objeto['valor'];
 delete objeto[variável];
38
Excluindo elementos
delete pratos[2];
delete pratos.extra;
●
0: Pizza
●
0: Pizza
●
1: Chocolate
●
1: Chocolate
●
2: Lasanha
●
3: Feijoada
●
3: Feijoada
●
6: Salada
●
extra: Surpresa do dia
●
0.5: Promoção
●
6: Salada
●
true: Molho
●
0.5: Promoção
●
true: Molho
39
Métodos

Um método é uma função associada a um
objeto.
Ex.: document.write("Hello, World!")
Javascript define alguns métodos que podem
ser utilizados em arrays:



join

splice

reverse

push

sort

pop

concat

shif

slice
unshift

40
join()

join([separador])


Retorna a concatenação de todos os
elementos do array, intercalados com o
separador.
Se o separador não for especificado, usase ','.
var pratos = [ 'Pizza', 'Chocolate',
'Lasanha', 'Feijoada' ];
document.write( pratos.join('; ') );
Pizza; Chocolate; http://marx.vanderlinden.com.br/
Lasanha; Feijoada
41
reverse()

reverse()

Inverte a ordem os elementos do array.
pratos.reverse();
Feijoada; Lasanha; Chocolate; Pizza
42
sort()

sort()

Ordena os elementos do array alfabeticamente.
pratos.sort();
Chocolate; Feijoada; Lasanha; Pizza
43
concat()

concat(elemento+)

Retorna um novo array, composto pela
concatenação do array original com todos os
argumentos.
var novospratos = pratos.concat(
'Salada', 'Macarrão' );
document.write( novospratos );
Pizza,Chocolate,Lasanha,Feijoada,Salada,
Macarrão
44
concat()

Arrays adicionados com concat() são
mesclados ao original.
var vegetais =
[ 'Tomate', 'Cenoura', 'Pimentão' ];
var novospratos = pratos.concat(
vegetais, ['Feijão', 'Arroz'], 'Frango'
);
document.write( novospratos );
Pizza,Chocolate,Lasanha,Feijoada,Tomate,Ceno
45
ura,Pimentão,Feijão,Arroz,Frango
slice()

slice(início,[fim])



Retorna um novo array contendo os
elementos do array original a partir de
início, até antes do fim.
Se fim for omitido, usa-se o último elemento.
Números negativos podem ser usados em
ambos os argumentos, significando uma
contagem a partir do final do array.
46
slice()
document.write( pratos.slice(1,3)
+ " <br>\n" );
document.write( pratos.slice(1)
+ " <br>\n");
document.write( pratos.slice(-2) );
Chocolate,Lasanha<br>
Chocolate,Lasanha,Feijoada<br>
Lasanha<br>
47
splice()

splice(início, [fim], [elemento+])



Remove elementos do array, nas posições
entre início e antes de fim.
Opcionalmente, insere novos elementos, no
lugar dos removidos.
Modifica o array original! (não retorna um
novo array).
48
splice()
pratos.splice(1,2, 'Feijão', 'Arroz');
Pizza,Feijão,Arroz,Feijoada
49
push()

push(elemento+)



Modifica o array, adicionando elementos ao
seu final.
Retorna o novo tamanho do array.
Não mescla novos arrays acrescentados.
var x = pratos.push('Feijão', 'Arroz');
document.write( x + ' itens: ' + pratos);
6 itens: Pizza,Chocolate,Lasanha,Feijoada,
Feijão,Arroz
50
concat() vs. push()
var fj = ['Feijão', 'Arroz'];
pratos2 = pratos.concat(fj);
var t1 = pratos2.length;
var t2 = pratos.push(fj);
document.write(
t2 + ' itens: ' + pratos.join('| ') +
"<br>\n"
);
document.write(
t1 + ' itens: ' http://marx.vanderlinden.com.br/
+ pratos2.join('| ')
);
51
concat() vs. push()

Saída:
5 itens: Pizza| Chocolate| Lasanha| Feijoada| Feijão,Arroz
6 itens: Pizza| Chocolate| Lasanha| Feijoada| Feijão| Arroz
52
pop()

pop()

Remove o último elemento do array e o
retorna.
var ultimo = pratos.pop();
document.write(ultimo + "<br>\n");
Feijoada<br>
Pizza,Chocolate,Lasanha
53
unshift()

unshift(elemento+)

Insere os elementos no início do array, na ordem
em que são especificados.
pratos.unshift('Batata frita');
54
unshift()

1
pratos.unshift('Arroz', 'Batata', 'Cebola');

2
pratos.unshift('Arroz');
pratos.unshift('Batata');
pratos.unshift('Cebola');
55
unshift()

1
Arroz,Batata,Cebola,Pizza,Chocolate,Lasanha,
Feijoada

2
Cebola,Batata,Arroz,Pizza,Chocolate,Lasanha,
Feijoada
56
shift()

shift()

Remove o primeiro elemento e o retorna.
var primeiro = pratos.shift();
document.write(primeiro + "<br>\n");
Pizza<br>
Chocolate,Lasanha,Feijoada
57
Arrays Multidimensionais



Em Javascript, um array pode conter
elementos de qualquer tipo, inclusive outros
arrays.
Arrays que contém outros arrays podem ser
visualizados como matrizes.
Podem ser usados para armazenar séries de
dados que ocupam mais de uma dimensão.
58
Matrizes
var
[
[
[
];
familia =
"Fred",
"George",
"Homer",
[
"Barney" ],
"Jane", "Elroy" ],
"Marge", "Bart" ],
document.write(
familia[1][2] + ', ' + familia[2][0]
);

Saída:
Elroy, Homer
59
Acrescentando Elementos
var
[
[
[
];
familia =
"Fred",
"George",
"Homer",
[
"Barney" ],
"Jane", "Elroy" ],
"Marge", "Bart" ],
familia[0][2] = "Wilma";
//familia[3][2] = "Erro!";
document.write( familia[1][2] + ', ' +
familia[2][0] + ', ' + familia[0][2] );
Elroy, Homer, Wilma
60
Objetos e Arrays



Arrays podem conter objetos de qualquer tipo,
não apenas outros arrays.
Objetos também podem conter outros objetos e
arrays.
É possível usar várias combinações de objetos
e arrays, para organizar seus dados de
maneira hierárquica.
61
Array de Objetos
familia = [
{ pai
amigo
},
{ 'pai'
'mae'
'filho'
},
{ pai
mae
filho
} ];
: 'Fred',
: 'Barney'
: 'George',
: 'Jane',
: 'Elroy'
: 'Homer',
: 'Marge',
: 'Bart'
document.write( familia[1].mae
+ ', ' +
familia[2].filho );
62
Objeto com Objetos
familia = {
'Flintstones' : {
pai
: 'Fred',
amigo
: 'Barney' },
'Jetsons' : {
'pai'
: 'George',
'mae'
: 'Jane',
'filho'
: 'Elroy'
},
'Simpsons' : {
pai
: 'Homer',
mae
: 'Marge',
filho
: 'Bart' }
};
document.write( familia.Jetsons.mae
+ ', ' 63+
familia.Simpsons.filho );
Objeto com Arrays
familia = {
'Flintstones' : [ 'Fred', 'Barney' ],
'Jetsons' :
[ 'George', 'Jane', 'Elroy' ],
'Simpsons' :
[ 'Homer', 'Marge', 'Bart' ]
};
document.write( familia.Jetsons[1] + ', ' +
familia.Simpsons[2] );
64
Percorrendo a Estrutura Hierárquica


Para percorrer estruturas hierárquicas, basta
utilizar combinações de loops for ou for/in.
Exemplo (Objeto com Objetos):
for(nomefam in familia){
document.write(
"<h3>" + nomefam + "</h3>"
);
for(membro in familia[nomefam])
document.write(
"<strong>" + membro+ "</strong> " +
familia[nomefam][membro] + "<br>"
);
65
}
Percorrendo a Estrutura Hierárquica
66

JavaScript - Marx Gomes Van der Linden

Transcrição

Documentos relacionados

Textos Luminosos Descrição: Este é um script muito interessante

Menus - Fortaleza do Guincho

Noite de Halloween

Lição de casa – Tucanos Escreva uma propaganda de restaurante

Clientela exigente explica sucesso de restaurante japonês na

O Estado de São Paulo – Caderno Viagem

Pra sempre Toscana

gastronomia Europeia - Lusanova Online Brasil

C4 13 de setembro de 2013 – festival gourmet

Tabela de preços