Dados em JavaScript

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira é um acervo comunitário fictício no bairro da Ribeira, Recife. Neste capítulo a casa ganha um gerador de história do cais: um nome, uma lista de lugares, uma lista de objetos. O resultado é uma frase nova a cada clique.

O exemplo está em pacote de exemplos/13-dados-em-javascript/. Abra index.html. Clique em Gerar. Depois abra historia.js.

Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Guardar valores em variáveis (const e let).
• Usar números e fazer contas simples.
• Montar e juntar strings.
• Guardar vários itens num array.
• Ligar esses dados ao gerador de história da Ribeira.

Variáveis

Uma variável é um nome que aponta para um valor. const quando o valor não muda. let quando precisa mudar.

const biblioteca = "Biblioteca da Ribeira";
let visitas = 0;
visitas = visitas + 1;

O nome descreve o dado: visitas, não x. Não comece com número. Não use espaço.

const não impede mudar o conteúdo de um array. Impede trocar o array inteiro por outro. No gerador, as listas são const.

Erro comum: escrever visitas = visitas + 1 sem ter declarado visitas com let. O console acusa variável inexistente.

Números

JavaScript trata 10 e 10.5 como número. Operadores: + - * / %.

const aberto = 9;
const fechado = 17;
const horas = fechado - aberto;

Math.floor corta a parte decimal. Math.random() devolve um número de 0 (incluso) a 1 (excluso). No gerador isso escolhe um índice da lista.

function sorteio(lista) {
  return lista[Math.floor(Math.random() * lista.length)];
}

lista.length é a quantidade de itens. O índice começa em 0. Quatro lugares: índices 0, 1, 2 e 3.

Mude uma coisa. No console da página do exemplo, digite 3 + "2" e Enter. Preveja. O resultado é a string "32", não 5. O + junta se um lado é texto.

Strings

String é texto entre aspas. Simples ou duplas, desde que o par feche.

const nome = "Lina";
const frase = nome + " achou um caderno no cais.";

+ entre strings concatena. trim() tira espaços das pontas. No gerador, se o campo vier vazio, entra "Alguém".

const nome = document.getElementById("nome").value.trim() || "Alguém";

|| "Alguém" usa o segundo valor se o primeiro for vazio.

Não misture aspas de jeitos diferentes na mesma string sem escapar. O arquivo quebra e o console aponta a linha.

Arrays

Array é uma lista ordenada. Colchetes. Itens separados por vírgula.

const lugares = ["cais", "mangue", "sobrado", "feira de São José"];
const objetos = ["caderno", "lanterna", "mapa de maré", "caneca esmaltada"];

lugares[0] é "cais". lugares.push("ponte") acrescenta no fim.

O gerador sorteia um lugar e um objeto. A história muda porque o índice muda.

Mude uma coisa. Em historia.js, acrescente "ponte da Boa Vista" no array lugares. Preveja essa frase aparecer de vez em quando. Recarregue. Clique Gerar várias vezes. Confira.

Erro comum: lugares[4] numa lista de quatro itens. Não existe. O valor é undefined e a frase sai estranha.

O gerador completo

historia.js na pasta do exemplo:

const lugares = ["cais", "mangue", "sobrado", "feira de São José"];
const objetos = ["caderno", "lanterna", "mapa de maré", "caneca esmaltada"];
function sorteio(lista) {
  return lista[Math.floor(Math.random() * lista.length)];
}
document.getElementById("gerar").addEventListener("click", function () {
  const nome = document.getElementById("nome").value.trim() || "Alguém";
  const texto = nome + " achou um " + sorteio(objetos) + " no " + sorteio(lugares) + " e voltou para a biblioteca antes da chuva.";
  document.getElementById("historia").textContent = texto;
});

textContent coloca texto. Não use innerHTML para o que a pessoa digitou: o nome não deve virar marcação.

O HTML já tem label ligado ao campo nome e o botão id="gerar".

Disco, 127.0.0.1 e publicação

No disco, historia.js é um arquivo. No navegador, o script roda e monta a frase. Em 127.0.0.1 o mesmo arquivo é servido só para você:

python -m http.server 8080 --bind 127.0.0.1

Publicação pública não faz parte deste exercício. Não grave nomes reais no campo. Lina, Iara e Nuno são personagens fictícios da casa.

Atividades

1. Qual a diferença prática entre const lugares e let visitas neste volume?
2. Por que lugares[0] é o cais e não o mangue?
3. Você acrescenta um objeto na lista e gera de novo. Como confere que o array mudou?

Respostas comentadas

1. lugares é a lista fixa do gerador; o nome do array não é trocado. visitas precisaria mudar a cada incremento; por isso seria let.
2. Índice começa em zero. O primeiro item escrito no array é o índice 0.
3. Recarregue. Clique Gerar várias vezes. O novo objeto precisa aparecer em alguma frase. Se nunca aparecer, o push ou a vírgula no array falhou — olhe o console.

O arquivo completo

Referência do exemplo 13-dados-em-javascript, reproduzida aqui para que você possa conferir sem sair da página.

historia.js

const lugares = ["cais", "mangue", "sobrado", "feira de São José"];
const objetos = ["caderno", "lanterna", "mapa de maré", "caneca esmaltada"];
function sorteio(lista) {
  return lista[Math.floor(Math.random() * lista.length)];
}
document.getElementById("gerar").addEventListener("click", function () {
  const nome = document.getElementById("nome").value.trim() || "Alguém";
  const texto = nome + " achou um " + sorteio(objetos) + " no " + sorteio(lugares) + " e voltou para a biblioteca antes da chuva.";
  document.getElementById("historia").textContent = texto;
});