• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
T12_LM3: Arrays (2013-2014)
 

T12_LM3: Arrays (2013-2014)

on

  • 450 views

 

Statistics

Views

Total Views
450
Views on SlideShare
436
Embed Views
14

Actions

Likes
0
Downloads
22
Comments
0

1 Embed 14

http://campus.sapo.pt 14

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    T12_LM3: Arrays (2013-2014) T12_LM3: Arrays (2013-2014) Presentation Transcript

    • JavaScript: Arrays Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 12, 24-10-2013
    • Lembram-se do Nelo e da Idália? “Resmas de gajas”
    • Se o Nelo tiver que armazenar o nome da esposa? var esposa = “Idália”;! ! • Limitações: • uma variável só permite armazenar uma unidade de informação; • por unidade de informação entende-se, um conjunto de dados que, por si só, constituem uma unidade lógica. Por exemplo: • “Herman José” é uma string cujo conteúdo pode ser considerado uma unidade de informação; • “Herman José, Nilton, Nuno Markl, Bruno Nogueira” também é uma string mas o seu conteúdo não é uma unidade de informação.
    • Como é que o Nelo pode armazenar o nome das resmas de gajas? var gaja1 = “Asdrubal”;! var gaja2 = “Porfírio”;! ...! var gajaN = “Zacarias”; // Não é uma solução adequada!! • Problemas com esta solução: • o acesso sistemático à informação pode ser muito complexo; • adicionar e/ou eliminar elementos implica alterações na própria estrutura de dados do algoritmo; • por vezes, esta solução pode parecer a mais simples mas, na maioria dos casos, acaba por implicar problemas complexos.
    • Arrays em Javascript • Um array é uma estrutura de dados complexa onde podemos armazenar múltiplas unidades de informação de um modo lógico e acessível. • um array é identificado por um nome/identificador com características semelhantes às de uma variável; • cada unidade de informação, um elemento, é armazenada num espaço próprio, acessível através de um índice, que indica a respetiva posição no array; • os elementos podem ser de qualquer tipo de dados, inclusivamente tipos de dados complexos; • o número de elementos de um array é gerido dinamicamente, permitindo aumentar ou diminuir a sua capacidade durante a execução do algoritmo.
    • Arrays: estrutura Identificador meuArray 0 Índice “nome” 1 4324 2 1.54324 3 false Elementos
    • Arrays: operações base: declaração • Declaração de um array vazio (sem elementos) • var nomeArray = new Array();! • var nomeArray = [];! • var nomeArray = new Array(5); //declara um array inicialmente dimensionado para 5 elementos! • Declaração de um array com elementos iniciais • var arrayLetras = new Array(“a”, ”b”, ”c”);! “a” 5 • var arrayNumeros = [5, 23, 13, 12]; “b” 23 “c” 13 12
    • Arrays: operações base: escrita • Escrita • nomeArray[índice] = valor;! • Exemplos • arrayLetras[1] = “x”;! “a” ! “x” ! “c” • arrayLetras[3] = “d”; “a” “x” “c” “d”
    • Arrays: operações base: escrita • Exemplos • arrayLetras[5] = “z”; “a” “x” “c” “d” undefined “z”
    • 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”
    • 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”);! 0 “Porfirio” 2 ! “Asdrubal” 1 ! “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”; 0 “Jair” 1 “Porfirio” 2 “Zacarias” 3 “Marcão”
    • 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] + “, “;! 0 “Jair” msg = msg + gajasNelo[1] + “, “;! 1 “Porfirio” msg = msg + gajasNelo[2] + “, “;! 2 “Zacarias” msg = msg + gajasNelo[3];! 3 “Marcão” alert (msg); //??!
    • 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?
    • Estrutura de repetição: for-in 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 for ( index in nomeArray )! {! // código a executar! }!
    • 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);
    • 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? • ...
    • Objetos no 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)
    • 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.
    • Operador new • Instanciação de um array • var nomeArray = new Array(); classe Array() objeto nomeArray ! ! propriedades Array new propriedades Array ! ! métodos Array métodos Array
    • 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 “Jair” 1 “Porfirio” 2 “Zacarias” 3 “Marcão” gajasNelo.length -> 4
    • JavaScript: objeto Array: métodos • Os mais comuns... mas existem mais! Método concat() join() pop() push() reverse() Descrição Joins two or more arrays, and returns a copy of the joined arrays Joins all elements of an array into a string Removes the last element of an array, and returns that element Adds new elements to the end of an array, and returns the new length 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() unshift() Converts an array to a string, and returns the result Adds new elements to the beginning of an array, and returns the new length http://www.w3schools.com/jsref/jsref_obj_array.asp
    • 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
    • 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
    • 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 "));! ! // ??! // ??! // ??
    • 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
    • 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);! ! // ??! // ??! // ??! // ??
    • 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
    • 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);! ! // ??! // ??! // ??
    • 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
    • Array: métodos: reverse() var fruits = ["Banana", "Orange", "Apple", "Mango"];! document.write(fruits.reverse());! ! // ??
    • Array: métodos: reverse() var fruits = ["Banana", "Orange", "Apple", "Mango"];! document.write(fruits.reverse());! ! // Mango,Apple,Orange,Banana
    • 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);! ! // ??! // ??! // ??! // ??
    • 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!