Página navegador interação e comunicação com o servidor

As partes de uma página

Uma página web combina estrutura, apresentação e comportamento. HTML descreve os elementos, CSS define sua apresentação e JavaScript responde a ações ou transforma informações. São papéis complementares. Um botão que parece correto pode não realizar a ação esperada; um teste de cálculo pode passar sem que o botão esteja acessível.

Abra 05_pagina.html no navegador. Este laboratório é um arquivo local independente, sem servidor. Ele serve para estudar uma interação pequena. O catálogo principal será aberto pelo endereço local fornecido por npm start; não substitua esse passo por abrir seu index.html diretamente, pois a interface precisa conversar com a API.

Ampliar diagrama

Ler uma implementação curta

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Primeira interação Caracol</title>
  <style>
    body { font: 1.1rem sans-serif; margin: 2rem; max-width: 42rem; }
    button { padding: .7rem 1rem; font: inherit; }
    button:focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <h1>Contador de consultas de exemplo</h1>
  <p>Ative o botão com mouse ou teclado.</p>
  <button id="consultar" type="button">Registrar consulta</button>
  <p id="estado" role="status">Consultas registradas 0</p>
  <script>
    let total = 0;
    const botao = document.querySelector('#consultar');
    const estado = document.querySelector('#estado');
    botao.addEventListener('click', () => {
      total = total + 1;
      estado.textContent = 'Consultas registradas ' + total;
    });
  </script>
</body>
</html>

O atributo lang identifica o idioma da página. meta charset informa a codificação. viewport orienta a apresentação em telas menores. title nomeia a aba; h1 apresenta o título do conteúdo. O elemento button já possui comportamento de teclado que seria necessário recriar ao usar um elemento genérico como botão.

O CSS controla tamanho e espaçamento e torna o foco visível. Foco é o elemento que receberá a próxima ação de teclado. role="status" identifica uma região de atualização que tecnologias assistivas podem anunciar; sua presença isolada não certifica a acessibilidade da página. A leitura com diferentes recursos precisa ser verificada no contexto real.

No script, document.querySelector encontra os elementos por identificador. addEventListener associa uma função à ação click. A expressão () => introduz uma função sem nome nessa posição. A função só é executada quando ocorre o evento. textContent atualiza texto, evitando interpretar o conteúdo como marcação HTML. Nesse laboratório, total existe apenas enquanto a página permanece aberta. Recarregar reinicia a contagem.

Do arquivo local ao serviço HTTP

HTTP é o protocolo usado na troca de mensagens entre a interface e o servidor do projeto. A interface envia uma requisição; o servidor interpreta método e caminho e devolve status, cabeçalhos e corpo. API é uma fronteira programável que permite a outra parte usar um comportamento por um contrato.

JSON é um formato de texto para dados. Sua sintaxe exige aspas duplas nos nomes de propriedades e não admite comentários comuns de JavaScript. Ao receber JSON, o programa ainda precisa verificar tipos e regras. Um documento bem formado pode conter um id duplicado ou um booleano escrito como texto.

Uma requisição demora um tempo que varia. Promise representa um resultado futuro; await permite aguardar esse resultado dentro de uma função async. A interface precisa mostrar carregamento, sucesso vazio, sucesso com dados e falha. A existência de uma resposta não significa sucesso: uma resposta HTTP 500 também chega ao navegador e precisa ser tratada.

Prática por teclado e exercício resolvido

No laboratório, use Tab para chegar ao botão. Observe o foco e use Enter ou espaço para ativá-lo. A contagem deve mudar uma vez por ativação. Depois recarregue. O retorno a zero é esperado neste exemplo em memória, não é prova de persistência. Anote navegador, ação e resultado; não declare conformidade com toda a WCAG a partir desses passos.

Exercício: uma pessoa clica três vezes, recarrega e ativa uma vez por teclado. Qual valor deve aparecer ao final?