Sintaxe JavaScript

Este capítulo ensina a escrever JavaScript vanilla: let, const, função, array, objeto, if, loop e o console. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Este volume tem 52 capítulos. Esta é a 50.

O exemplo está em exemplos/50-sintaxe-javascript/. O arquivo assets/javascript/infografico.js já usa essas peças. Você vai lê-lo, copiar trechos menores e mudar uma coisa por vez. Preveja. Recarregue. Confira. Abra o console do navegador.

O que você vai aprender

• Ligar um arquivo .js com defer.
• Guardar valores em let e const.
• Escrever função com parâmetro e retorno.
• Usar array e objeto para os trabalhos fictícios.
• Desviar com if e repetir com for.
• Depurar com console e breakpoints, sem jQuery.

Arquivo, ordem e console

JavaScript de página é um texto .js. Na Oficina Costeira ele vive em assets/javascript/. No HTML:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Infográfico — Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
    <script src="assets/javascript/infografico.js" defer></script>
  </head>
  <body>
    <a class="skip" href="#conteudo">Pular para o conteúdo</a>
    <main id="conteudo" tabindex="-1">
      <h1>Trabalhos fictícios por frente</h1>
      <ul>
        <li>Identidade: 8</li>
        <li>Publicação: 12</li>
        <li>Oficina: 5</li>
      </ul>
      <div data-grafico></div>
    </main>
  </body>
</html>

defer espera o HTML. O caminho do src é relativo ao arquivo HTML, como no CSS.

Abra as ferramentas do navegador (F12) e a aba Console. Erro de arquivo não encontrado aparece ali. Aviso seu também.

console.log("Oficina Costeira — estudo");

Mude só o texto da string. Preveja a nova frase no console. Recarregue. Confira. Tire o console.log depois, para não poluir. O hábito é: ver, entender, limpar.

Erro comum: infografico.js.txt no Windows. O navegador não executa. Mostre extensões no Explorador.

let, const e tipos simples

Variável é um nome que guarda um valor. const quando o nome não vai apontar para outro valor. let quando o valor vai mudar. Evite var neste volume: escopo antigo, surpresa em loop.

const coletivo = "Oficina Costeira";
let visitasFicticias = 0;
visitasFicticias = 1;

Números não levam aspas. Texto leva. Verdadeiro e falso são true e false.

const cidade = "João Pessoa";
const frentes = 3;
const publicado = false;

Nomes em camelCase: visitasFicticias. Não comece com número. Não use espaço.

Mude só const visitasFicticias = 0 e depois tente visitasFicticias = 1. Preveja erro no console se você usou const. Recarregue. Confira a mensagem. Troque para let se o valor precisa mudar. Use const no array de barras, porque o nome barras permanece o mesmo array.

Erro comum: const nome = Rui sem aspas. O navegador procura uma variável Rui e quebra. Personagens fictícios são texto: "Rui Pedrosa".

Funções: um nome para um processo

Função agrupa passos. Você chama pelo nome. Parênteses passam entrada. return devolve saída.

function rotuloFrente(nome, valor) {
  return nome + ": " + valor + " trabalhos fictícios";
}

const texto = rotuloFrente("Identidade", 8);

A função não precisa do DOM. Ela só monta texto. Fácil de prever: Identidade: 8 trabalhos fictícios.

Função também pode não devolver nada e só fazer um efeito depois. Prefira, no começo, funções que devolvem valor: você imprime o retorno no console e confere.

console.log(rotuloFrente("Publicação", 12));

Mude só o retorno para omitir a palavra fictícios. Preveja o texto mais curto. Recarregue. Confira no console. A página só muda se algum código usar esse retorno no HTML.

Erro comum: esquecer return e achar que a função “devolve sozinha” a última linha. Sem return, o resultado é undefined.

Array e objeto

Array é lista ordenada. Índice começa em zero. Objeto é conjunto de nomes e valores. Os trabalhos da Oficina Costeira cabem numa lista de objetos.

const barras = [
  { nome: "Identidade", valor: 8 },
  { nome: "Publicação", valor: 12 },
  { nome: "Oficina", valor: 5 }
];

console.log(barras[0].nome);
console.log(barras.length);

barras[0].nome é "Identidade". length é 3. Acrescentar uma frente fictícia é um objeto a mais, não uma variável nova barra4.

Mude só o valor de Oficina para 6. Preveja a terceira linha do infográfico. Recarregue. Confira a página e a lista HTML: os dois precisam dizer o mesmo número. Se só o script mudar, a melhoria progressiva quebra.

Erro comum: barras[3] quando há três itens. O último é barras[2]. O índice 3 é undefined.

if e loops

if pergunta. else cobre o outro caminho. Comparação: === (igualdade estrita). Negação: !.

const raiz = document.querySelector("[data-grafico]");
if (!raiz) {
  console.log("Sem alvo. A lista HTML permanece.");
} else {
  raiz.replaceChildren();
  for (const item of barras) {
    const p = document.createElement("p");
    p.textContent = rotuloFrente(item.nome, item.valor);
    raiz.append(p);
  }
}

for...of percorre o array. Cada volta, item é um objeto. textContent coloca texto, não HTML: seguro contra tags coladas por engano.

Há também for (let i = 0; i < barras.length; i++). O for...of lê melhor neste caso.

Mude só if (!raiz) para if (raiz). Preveja a lógica invertida: o gráfico extra some quando o div existe. Recarregue. Confira. Devolva a negação. Inverter if é um bug clássico.

Erro comum: = dentro do if (if (raiz = null)). Isso atribui, não compara. Use ===.

Depurar de propósito

Quando quebra:

1. Olhe o console. Leia a linha do erro.
2. Confira o caminho do src.
3. Confira se o elemento existe (seletor).
4. Use console.log num valor de cada vez.
5. No painel Fontes, coloque um ponto de parada na linha do for e recarregue. Passo a passo.

console.log("itens", barras.length);
console.log("alvo", raiz);

Não apague o problema com try vazio. Não ligue jQuery para “sumir o erro”. O erro está te ensinando o arquivo, a linha e o tipo.

Sirva em localhost se o console reclamar de módulo ou de fetch (próximo volume). Para este JS simples, file:// costuma bastar.

python -m http.server 8769 --bind 127.0.0.1 --directory curso

http://127.0.0.1:8769/exemplos/50-sintaxe-javascript/infografico.html se o arquivo existir; senão a home. Encerre com Ctrl+C. Não publique. Não envie dado de formulário.

Mude só um seletor para [data-graficoo]. Preveja raiz nulo e a lista HTML sozinha. Recarregue. Confira o log. Corrija o seletor.

Atividades

1. Qual a diferença prática entre let e const?
2. Por que barras[0] é Identidade e não Oficina?
3. O que textContent evita, comparado a colar HTML em innerHTML com texto de fora?
4. Como você vê um arquivo JS que o navegador não achou?
5. if (raiz = null) compara? O que faz?

Respostas comentadas

1. const não deixa o nome apontar para outro valor. let deixa. Os dois existem só no bloco onde nasceram. Prefira const até precisar mudar.
2. Array começa no índice zero. O primeiro objeto da lista é Identidade.
3. Evita que o navegador interprete < e tags. Números fictícios são texto.
4. No console: 404 ou falha de carregar o script. A aba Rede também mostra o caminho.
5. Não compara. Atribui null a raiz e o if trata isso como falso. Use ===.

Referências

• let
• const
• Funções
• Array
• if…else
• console

O arquivo completo

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

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}