Pular para o conteúdo
murad.guide

A Web Aberta

Capítulo 49

Pensar como programa

7 min de leitura 1.250 palavras 2 gravuras

Este capítulo começa o JavaScript da Oficina Costeira pela cabeça, não pela biblioteca. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Este volume tem 52 capítulos. Esta é a 49.

O exemplo está em exemplos/49-pensar-como-programa/. HTML e CSS já carregam o site. JavaScript, daqui até a 51, é vanilla: a linguagem do navegador, sem jQuery. Ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

O navegador já tem uma linguagem

JavaScript nasceu nos anos 1990 para o navegador. O nome parece Java. A linguagem não é Java. São histórias diferentes. O que importa para você: o arquivo .js é texto. O navegador lê de cima para baixo, salvo quando um if ou um evento desvia.

A página da Oficina Costeira já funciona sem esse arquivo. O script é melhoria. Se ele falhar, a lista, o menu e o formulário ficam.

Três papéis no navegador:

Não comece pelo atalho de biblioteca. Comece por um passo que você consegue dizer em voz alta.

Mude só uma frase no index.html (não no JS). Preveja a home. Recarregue. Confira. Você ainda está no território conhecido. O programa vai reagir a essa estrutura, não substituí-la.

Erro comum: copiar um pacote “para fazer o site moderno” antes de saber o que o pacote faz. Neste volume o eixo é vanilla.

Pensar em passos

Um programa não adivinha. Ele executa instruções. Se a ordem estiver errada, o resultado erra mesmo com cada linha “parecendo certa”.

Oficina de pensar — problema: mostrar quantos trabalhos fictícios existem em cada frente.

Roteiro em português:

  1. Ter os números (Identidade 8, Publicação 12, Oficina 5).
  2. Achar o lugar da página onde o extra pode aparecer.
  3. Se esse lugar não existir, parar sem quebrar o resto.
  4. Se existir, escrever os mesmos números ali.

Isso já é o programa. O código só traduz.

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

Antes de querySelector, você decide o que os dados são. Antes de if, você decide a regra de parada.

Mude só o valor 12 para 13 no roteiro de papel e no array. Preveja o texto novo. Ainda não precisa ligar o script. A conta acontece na cabeça. Depois o arquivo confirma.

Erro comum: abrir o editor e ir digitando função sem saber a saída esperada. Escreva a saída em uma frase: “três linhas com nome e número”.

Entrada, processo, saída

Quase todo comportamento cabe nisto.

Entrada: o que já existe (HTML, um clique, uma lista).

Processo: a decisão ou a conta.

Saída: o que a pessoa percebe (texto novo, foco, nada se a regra falhar).

Exemplo da Oficina Costeira:

const raiz = document.querySelector("[data-grafico]");
if (!raiz) {
  // Sem saída extra. A lista HTML já basta.
}

O if é uma bifurcação. Uma pergunta, dois caminhos. Sem drama. Sem biblioteca.

Mude só a condição para sempre verdadeira achando um elemento que existe. Preveja parágrafos extra. Recarregue a página do infográfico, se o exemplo já tiver o div. Confira. Se o div não existir neste retrato do capítulo 49, a saída honesta é “nada extra”. Isso também é pensar como programa: ausência é um resultado.

Erro comum: tratar “não aconteceu nada” como mistério. Muitas vezes o seletor não achou o elemento. A regra de parada funcionou.

Uma história curta, sem fetiche

No começo dos navegadores, a página era documento. Depois veio um jeito de reagir a clique e de mexer no texto sem recarregar tudo. Essa linguagem se padronizou (ECMAScript). Os navegadores atuais entendem let, const, funções, arrays e o DOM.

Outras épocas usaram atalhos porque o DOM era irregular. jQuery foi um desses atalhos. Ele não é a linguagem. Não entra como eixo aqui. O capítulo 51 cita “como era” em um parágrafo. Não instale.

Você não precisa decorar datas. Precisa da consequência: o código que escrevemos é o de hoje, no navegador, em arquivo próprio, com defer ou no fim do body, para o HTML existir antes.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pensar — Oficina Costeira</title>
    <script src="assets/javascript/infografico.js" defer></script>
  </head>
  <body>
    <main>
      <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>

Mude só: tire o defer e coloque o script no head sem defer. Preveja: o script pode rodar antes do div. Recarregue. Confira o console (capítulo 50 aprofunda). Recoloque defer. A ordem de carregamento é parte do programa.

Erro comum: script no head sem defer e achar que “JavaScript não funciona”. O HTML ainda não estava lá.

Resumo dos conceitos: dado, decisão, repetição

Oficina: do português ao arquivo

Pegue um comportamento mínimo da Oficina Costeira: ao clicar num botão, ler um aviso de que o formulário não envia.

Roteiro:

  1. Achar o botão.
  2. Achar a região do aviso.
  3. Se faltar um dos dois, parar.
  4. No clique, escrever o aviso. Não mandar rede.

Ainda sem a sintaxe completa da próximo capítulo, você já rejeita soluções: não usar alert em loop; não apagar o main; não pedir e-mail verdadeiro.

Escreva o roteiro num comentário no JS:

// 1. Achar o botão type="submit" de contato.html
// 2. Impedir envio real
// 3. Mostrar aviso na própria página

Mude só o comentário 3 para “mostrar aviso no h1”. Preveja: o título da página sumiria. Recarregue a ideia na cabeça. Recuse. O h1 não é a saída certa. Comentário ruim revela desenho ruim antes do bug.

Erro comum: começar pelo efeito (“quero um popup”) e só depois perguntar se a página ainda faz sentido sem script.

O que esta série não é

Não é curso de jQuery. Não é Node. Não é aplicativo de celular. Não é cadastro. O formulário usa apoio pronto para cancelar o envio após a validação. action="#" e method="get" sozinhos não impediriam o pedido. Servidor só em 127.0.0.1 para testar arquivos.

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

Abra http://127.0.0.1:8769/exemplos/49-pensar-como-programa/. Encerre com Ctrl+C. Não use 0.0.0.0. Não publique.

A próximo capítulo ensina let, const, função, array, objeto, if, loop e console. Esta cobrou o hábito: dizer os passos, prever, só então digitar.

Resumo dos conceitos: repetição, decisão, dado

Atividades

  1. Qual camada da página deve continuar se o JavaScript falhar?
  2. Escreva entrada, processo e saída para o infográfico da Oficina Costeira.
  3. Por que este volume não usa jQuery como eixo?
  4. O script no head sem defer pode achar o div data-grafico? Por quê?
  5. “Fazer o site interativo” é um bom roteiro de programa? Como melhorar?

Respostas comentadas

  1. HTML (e o CSS que já baixou). Conteúdo, links e formulário demonstrativo.
  2. Entrada: números combinados e o elemento alvo. Processo: se o alvo existe, montar texto. Saída: parágrafos no div, ou nada.
  3. Porque o navegador já fala JavaScript. jQuery foi atalho de outra época. Aqui o aluno lê querySelector e addEventListener.
  4. Em geral não. O HTML abaixo ainda não foi interpretado. defer ou o script no fim do body esperam o documento.
  5. Não. É vago. Melhor: “no clique do botão de contato, impedir envio e mostrar um aviso no próprio main”.

Referências

O arquivo completo

Referência do exemplo 49-pensar-como-programa, 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.";});}