(a12) labmm3 - javascript - arrays

25
JavaScript: Objecto Array() e arrays^n Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 12, 26-10-2012

Upload: carlos-santos

Post on 24-Jun-2015

668 views

Category:

Education


2 download

TRANSCRIPT

Page 1: (A12) LabMM3 - JavaScript - Arrays

JavaScript: Objecto Array() e arrays^n

Carlos SantosLabMM 3 - NTC - DeCA - UAAula 12, 26-10-2012

Page 2: (A12) LabMM3 - JavaScript - Arrays

Arrays: operações base: leitura

• Escrita

• var elemento = nomeArray[índice];

• Exemplos

• var letraEscolhida = arrayLetras[1]; //??

• alert(arrayLetras[0]); //??

• arrayLetras[1] = arrayLetras[2]; //??

“a”“x”“c”“d”

undefined

“z”

Page 3: (A12) LabMM3 - JavaScript - Arrays

De regresso às resmas de gajas do Nelo

• Criar um array para ajudar o Nelo a guardar o nome das gajas atuais: Asdrubal, Porfirio e Zacarias:

var gajasNelo = new Array(“Asdrubal”,“Porfirio”,“Zacarias”);

• O Nelo chateou-se com o Asdrubal e arranjou logo o “Jair” para o substituir. Pelo meio ainda ficou com o “Marcão”:

gajasNelo[0] = “Jair”;

gajasNelo[3] = “Marcão”;

“Asdrubal”“Porfirio”

“Zacarias”

“Jair”“Porfirio”

“Zacarias”“Marcão”

0

1

2

0

1

2

3

Page 4: (A12) LabMM3 - JavaScript - Arrays

De volta às resmas de gajas do Nelo

• O Nelo é muito esquecido e por isso temos de gerar uma mensagem de alerta que diga:

• “Nelo, mulher, as tuas gajas são: ..., ..., ..., ...”

var msg = “Nelo, mulher, as tuas gajas são: “;

msg = msg + gajasNelo[0] + “, “;

msg = msg + gajasNelo[1] + “, “;

msg = msg + gajasNelo[2] + “, “;

msg = msg + gajasNelo[3];

alert (msg); //??

“Jair”“Porfirio”

“Zacarias”“Marcão”

0

1

2

3

Page 5: (A12) LabMM3 - JavaScript - Arrays

Sistematizar o acesso a um array

var msg = “Nelo, mulher, as tuas gajas são: “;

msg = msg + gajasNelo[0] + “, “;

msg = msg + gajasNelo[1] + “, “;

msg = msg + gajasNelo[2] + “, “;

msg = msg + gajasNelo[3];

alert (msg); //??

// Versão com ciclo for

var msg = “Nelo, mulher, as tuas gajas são: “;

for (cont = 0; cont <=3; cont++) {

msg = msg + gajasNelo[cont] + “, “;

}

alert (msg); // Será que o resultado final é exatamente igual?

Page 6: (A12) LabMM3 - JavaScript - Arrays

Estrutura de repetição: for-in

for ( index in nomeArray ){// código a executar

}

variável que no decorrer da execução do ciclo vai tomar todos os valores dos índices

do objeto array que se pretende iterar todos os elementos

Page 7: (A12) LabMM3 - JavaScript - Arrays

Estrutura de repetição: for-in (exemplo)

var msg = “Nelo, mulher, as tuas gajas são: “;

for (cont = 0; cont <= gajasNelo.length - 1; cont++) {

msg = msg + gajasNelo[cont] + “, “;

}

alert (msg);

// versão com for-in

var gajasNelo = new Array("Jair", "Marcolino", "Marco");

for (var indexGaja in gajasNelo) {

msg = msg + gajasNelo[indexGaja] + ", ";

}

alert (msg);

Page 8: (A12) LabMM3 - JavaScript - Arrays

Informação e métodos úteis num Array()

• Quantos elementos tem o array neste momento?

• Como adicionar um elemento no final de um array?

• Como adicionar um elemento no início de um array?

• Como apagar um elemento do array e não deixar um espaço vazio?

• ...

Page 9: (A12) LabMM3 - JavaScript - Arrays

Objetosno dia-a-dia

Um objeto é uma “coisa” definida por um conjunto de: propriedades- modelo- espaçoDeArmazenamento

métodos/funções- ligar(nr. telefone)- play(album)

Page 10: (A12) LabMM3 - JavaScript - Arrays

Objetos em programação (versão light)

• são também uma “coisa” definida por um conjunto de propriedades e métodos que podem ser reutilizados livremente na execução de um programa.

• as características de um objeto são definidas pela sua classe, que podem ser:

• built-in

• user defined

• a instanciação de um novo objeto é conseguida através da invocação do operador new.

Page 11: (A12) LabMM3 - JavaScript - Arrays

Operador new

• Instanciação de um array

• var nomeArray = new Array();

classe Array()

propriedades Array

métodos Array

objeto nomeArray

propriedades Array

métodos Array

new

Page 12: (A12) LabMM3 - JavaScript - Arrays

JavaScript: objeto Array: propriedades

• length: devolve o número atual de elementos de um array

// Exemplo: Versão alterada com ciclo for

var msg = “Nelo, mulher, as tuas gajas são: “;

for (cont = 0; cont <= gajasNelo.length - 1; cont++) {

msg = msg + gajasNelo[cont] + “, “;

}

alert (msg);

0

1

2

3

gajasNelo.length -> 4

“Jair”“Porfirio”

“Zacarias”“Marcão”

Page 13: (A12) LabMM3 - JavaScript - Arrays

JavaScript: objeto Array: métodos

• Os mais comuns... mas existem mais!Método Descriçãoconcat() Joins two or more arrays, and returns a copy of the joined arrays

join() Joins all elements of an array into a string

pop() Removes the last element of an array, and returns that element

push() Adds new elements to the end of an array, and returns the new length

reverse() Reverses the order of the elements in an array

shift() Removes the first element of an array, and returns that element

slice() Selects a part of an array, and returns the new array

sort() Sorts the elements of an array

splice Adds/Removes elements from an array

toString() Converts an array to a string, and returns the result

unshift() Adds new elements to the beginning of an array, and returns the new lengthhttp://www.w3schools.com/jsref/jsref_obj_array.asp

Page 14: (A12) LabMM3 - JavaScript - Arrays

Array: métodos: concat()

var parents = ["Jani", "Tove"];

var children = ["Cecilie", "Lone"];

var family = parents.concat(children);

document.write(family);

// ??

var parents = ["Jani", "Tove"];

var brothers = ["Stale", "Kai Jim", "Borge"];

var children = ["Cecilie", "Lone"];

var family = parents.concat(brothers, children);

document.write(family);

// ??

Os exemplos desta secção são retirados do w3schools

Page 15: (A12) LabMM3 - JavaScript - Arrays

Array: métodos: concat()

var parents = ["Jani", "Tove"];

var children = ["Cecilie", "Lone"];

var family = parents.concat(children);

document.write(family);

// Jani,Tove,Cecilie,Lone

var parents = ["Jani", "Tove"];

var brothers = ["Stale", "Kai Jim", "Borge"];

var children = ["Cecilie", "Lone"];

var family = parents.concat(brothers, children);

document.write(family);

// Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone

Page 16: (A12) LabMM3 - JavaScript - Arrays

Array: métodos: join()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.write(fruits.join() + "<br />");

document.write(fruits.join("+") + "<br />");

document.write(fruits.join(" and "));

// ??

// ??

// ??

Page 17: (A12) LabMM3 - JavaScript - Arrays

Array: métodos: join()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.write(fruits.join() + "<br />");

document.write(fruits.join("+") + "<br />");

document.write(fruits.join(" and "));

// Banana,Orange,Apple,Mango

// Banana+Orange+Apple+Mango

// Banana and Orange and Apple and Mango

Page 18: (A12) LabMM3 - JavaScript - Arrays

Array: métodos: pop()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.write(fruits.pop() + "<br />");

document.write(fruits + "<br />");

document.write(fruits.pop() + "<br />");

document.write(fruits);

// ??

// ??

// ??

// ??

Page 19: (A12) LabMM3 - JavaScript - Arrays

Array: métodos: pop()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.write(fruits.pop() + "<br />");

document.write(fruits + "<br />");

document.write(fruits.pop() + "<br />");

document.write(fruits);

// Mango

// Banana,Orange,Apple

// Apple

// Banana,Orange

Page 20: (A12) LabMM3 - JavaScript - Arrays

Array: métodos: push()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.write(fruits.push("Kiwi") + "<br />");

document.write(fruits.push("Lemon","Pineapple")+"<br />");

document.write(fruits);

// ??

// ??

// ??

Page 21: (A12) LabMM3 - JavaScript - Arrays

Array: métodos: push()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.write(fruits.push("Kiwi") + "<br />");

document.write(fruits.push("Lemon","Pineapple")+"<br />");

document.write(fruits);

// 5

// 7

// Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple

Page 22: (A12) LabMM3 - JavaScript - Arrays

Array: métodos: reverse()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.write(fruits.reverse());

// ??

Page 23: (A12) LabMM3 - JavaScript - Arrays

Array: métodos: reverse()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.write(fruits.reverse());

// Mango,Apple,Orange,Banana

Page 24: (A12) LabMM3 - JavaScript - Arrays

Array: métodos: shift()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.write(fruits.shift() + "<br />");

document.write(fruits + "<br />");

document.write(fruits.shift() + "<br />");

document.write(fruits);

// ??

// ??

// ??

// ??

Page 25: (A12) LabMM3 - JavaScript - Arrays

Array: métodos: shift()

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.write(fruits.shift() + "<br />");

document.write(fruits + "<br />");

document.write(fruits.shift() + "<br />");

document.write(fruits);

// Banana

// Orange,Apple,Mango

// Orange

// Apple,Mango