Projeto Atual:

Programando Aplicativos com Javascript

14/07/2022

Listas de Valores - Arrays

Até aqui, os tipos de dados apresentados representam um único valor. Nos problemas da vida real, muitas vezes utilizamos coleções de valores. Javascript possui estruturas de dados para armazenar coleções. Vamos começar com Array, que pode representar uma lista de valores.  Quando você vai fazer compras no mercado, muitas vezes leva uma lista de compras. Por exemplo: feijão, arroz, sal, açúcar, óleo. A representação de um Array em Javascript é iniciada e terminada com colchetes. Entre os colchetes, vão os itens do Array separados por vírgulas. Veja os exemplos abaixo:

const frutas = ['limão', 'banana', 'laranja', 'abacaxi', 'mamão'];

const potenciasDe2 = [ 2, 4, 16, 32, 64 ];

const tiposMisturados = [ 'um', 2, 3, 'quatro', False ];

Pelos exemplos, você já pode ter percebido que os itens de um Array podem ter qualquer um dos tipos de dados já vistos, e que é possível misturá-los.

Propriedades e métodos para o tipo Array

Javascript é uma linguagem orientada a objetos, e um Array se comporta como um objeto. O que você precisa saber sobre isso por enquanto é que algumas operações que podem ser realizadas utilizando um objeto são chamadas métodos, e a notação utilizada é parecida com a ativação de funções que já foram apresentadas.

Considere as declarações abaixo:


const frutas = ["banana", "laranja", "limão"];
const legumes = ["abóbora", "cenoura"];
A propriedade lenght retorna o número de elementos no Array

frutas.lenght            // Para o exemplo, tem o valor 3
legumes.lenght           // Para o exemplo, tem o valor 2

Veja alguns métodos que podem ser utilizados:

Método        Exemplo                            Descrição

push()            legumes.push("batata")    Acrescenta um item ao Array (no final)

pop()              frutas.pop()                      Devolve o último elemento, removendo-o da coleção

concat()         frutas.concat(legumes)    Cria um novo Array com elementos dos dois objetos

join()              frutas.join(", ")                  Cria um texto único com todos os elementos do objeto 
                                                              intercalados com o separador dado

Você pode ter acesso ao valor que está em uma posição do Array usando a notação abaixo:

var primeiraFruta = frutas[0];
var segundaFruta = frutas[1];
var ultimaFruta = frutas[frutas.lenght – 1]

Note que os índices em um Array começam de zero, e vão até o tamanho do mesmo menos 1. Para saber mais sobre Arrays, consulte a referência da linguagem ou a fonte primária de seu estudo.

Arrays e o Comando for

Existe uma variante do comando for que serve para percorrer todos os elementos de um Array, executando um bloco de comandos para cada valor encontrado:

for (<declaração de variável> of <sequência>) {

       <bloco de comandos>
   }

Na verdade, esta variante serve para qualquer objeto que contenha uma sequência de valores. Por exemplo, valores do tipo texto são sequências de letras.

Melhor explicar com mais um exemplo, onde vamos aplicar um pouco de tudo que já foi visto:

<!DOCTYPE HTML>
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <title>Exemplo Javascript - for ... of</title>
  </head>
  <body>
    <p>Informe o preço de cada produto (use . ao invés de ,).</p>
    <p id="resultado">
    </p>
  </body>
  <script type="text/javascript">
    var areaResultado = document.getElementById('resultado'); 

    const mantimentos = [ "1kg de feijão", "2kg de arroz", "1kg de açúcar",
                          "1 garrafa de óleo"];

    var custo = 0;
    
    for (var produto of mantimentos) {
      let valor = prompt("Qual é o preço de " + produto + "?", "1.00");
      
      custo = custo + parseFloat(valor);
    }
    areaResultado.innerHTML =
        "O custo total das compras vai ser de: R$" + custo.toFixed(2);
  </script>
</html>

Execute o programa, e veja se o resultado é o esperado. Lembre-se que o interpretador é "Americano", e usa ponto ao invés de vírgula para separar as decimais de um número. Se você preencheu valores com vírgulas, a parte dos centavos foi ignorada.  Em um programa comercial, você deveria aceitar valores com vírgulas, e mudar o formato do resultado para ter os centavos separados por vírgula e com duas casas decimais. Aqui, optamos pela simplicidade, para manter o foco nos conceitos apresentados.

Neste programa, usamos uma nova função pré-definida: prompt(). Ao ser ativada, prompt() suspende o programa principal e abre uma janela de diálogo na tela, mostrando a mensagem no primeiro argumento e solicitando uma resposta. O valor no segundo argumento é o valor sugerido para a resposta, que o usuário pode alterar. Quando o usuário aciona o botão para fechar o diálogo, a função retorna o controle ao programa principal, com o valor da resposta como resultado. Esta função foge do modelo orientado a eventos, mas é apropriada para solicitar informações dentro de um bloco de repetição, onde é necessário aguardar a resposta para prosseguir a execução. Existe outra função semelhante, alert(), que mostra uma mensagem em uma janela de diálogo e aguarda que o usuário acione o botão indicando que leu a mensagem.



Postado por às

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)