Interatividade com JavaScript Puro: Menu Mobile, FAQ Sanfona e Animações — aula do módulo Landing Page Moderna do Zero, na trilha Seus Primeiros Projetos…
Leitura de aproximadamente 5 minutos.
Módulo: Landing Page Moderna do Zero · Curso: Seus Primeiros Projetos Práticos com IA · Formação: Formação Nível Zero: Ferramentas Essenciais e Gratuitas de IA e Código
Até a aula anterior, nossa página já possui estrutura organizada (HTML) e visual elegante (CSS). No entanto, ela ainda é estática: se o usuário clicar no botão de menu no celular ou em uma pergunta da seção de dúvidas, nada acontece.
O JavaScript é a linguagem de programação que roda diretamente dentro do navegador do visitante. Ele permite "escutar" as ações de quem navega na página (como um clique no mouse, o toque na tela do celular ou a rolagem) e modificar o conteúdo visual em tempo real, sem necessidade de recarregar o site.
+-------------------------------------------------------------+
| O CICLO DE INTERATIVIDADE NO NAVEGADOR |
+-------------------------------------------------------------+
| |
| 1. AÇÃO DO USUÁRIO 2. ESCUTA DO JAVASCRIPT |
| [Usuário clica no FAQ] ─> [addEventListener('click')] |
| │ |
| ▼ |
| 4. TRANSIÇÃO VISUAL 3. ALTERAÇÃO DO DOM |
| [CSS expande a resposta]<─ [Elemento ganha classe .ativo] |
| |
+-------------------------------------------------------------+
DOM é a sigla para Document Object Model (Modelo de Objeto do Documento). Quando o navegador lê o arquivo index.html, ele transforma cada tag em um objeto vivo na memória.
Com poucas linhas de JavaScript puro, nós conseguimos: 1. Selecionar um elemento: Usando document.querySelector('#meu-botao') para localizar um item específico pelo ID ou classe. 2. **Adicionar um ouvinte de evento (Event Listener): Usando .addEventListener('click', funcao) para dizer ao navegador o que fazer quando aquele elemento for clicado. 3. Alternar classes visuais (Toggle Class)**: Usando .classList.toggle('ativo') para adicionar ou remover estilos definidos no CSS.
| Abordagem | Vantagens | Desvantagens | Recomendação | |---|---|---|---| | **JavaScript Puro (Vanilla JS) | Zero dependências, ultra-rápido, código enxuto | Exige entender a base do DOM | Ideal para páginas de conversão e sites institucionais | | Bibliotecas Antigas (jQuery) | Sintaxe simples | Peso desnecessário de carregamento, obsoleta | Evitar em projetos novos | | Frameworks Pesados (React/Vue)** | Poderoso para sistemas complexos | Complexidade de configuração (build tools) | Reservar para aplicações web interativas completas |
Em telas pequenas, os links do cabeçalho ficam ocultos por padrão para economizar espaço. Um botão com três traços (ícone hambúrguer) alterna a visibilidade da lista de links quando tocado.
Em vez de exibir todas as respostas do FAQ de uma vez só (o que deixaria a página gigante), exibimos apenas as perguntas. Ao clicar na dúvida, a resposta desliza suavemente para baixo; ao clicar novamente, ela se fecha.
Quando o usuário clica em um link do menu como "Benefícios" ou "Agendar Agora", a página não dá um salto brusco para a seção, mas desliza suavemente até o destino.
Para orientar o assistente de IA a gerar o arquivo script.js com código limpo e seguro, utilize este prompt:
Atue como um desenvolvedor frontend especialista em JavaScript moderno (ES6+) e manipulação do DOM.
Com base no index.html e style.css da nossa landing page, gere o arquivo script.js completo.
Implemente com JavaScript puro (sem bibliotecas externas):
1. Menu mobile: Ao clicar no botão com id="btn-mobile", alterne a classe "ativo" no elemento <nav id="menu"> e no próprio botão.
2. FAQ Accordion: Para cada item com classe ".faq-item", adicione um clique no título (.faq-pergunta) que abra a resposta (.faq-resposta) alternando a classe "aberto" e feche os outros itens abertos.
3. Rolagem suave: Garanta que todos os links âncora (<a href="#...">) rolem suavemente até a seção correspondente usando scrollIntoView({ behavior: 'smooth' }).
4. Fechar menu mobile ao clicar em um link: Se o menu mobile estiver aberto e o usuário clicar em um link de seção, feche o menu automaticamente.
Entregue o código completo com comentários explicativos em um bloco único de código markdown.
[!IMPORTANT]
Carregar o script antes do HTML estar renderizado: Se você incluir a tag<script src="script.js"></script>no início do<head>sem o atributodefer, o JavaScript tentará encontrar os botões antes que eles existam na tela, resultando no erro clássicoCannot read properties of null (reading 'addEventListener'). A melhor prática é colocar a tag do script logo antes do fechamento da tag</body>noindex.html.
Vamos conectar o arquivo JavaScript e testar as interações:
1. Crie o arquivo script.js: Na mesma pasta do projeto, crie o arquivo script.js e cole o código fornecido pela IA. 2. Vincule no HTML: Abra o index.html e verifique se a linha <script src="script.js"></script> está presente logo antes da linha final </body>. 3. Teste o Menu Mobile: No navegador, abra o modo celular (F12 -> Ctrl + Shift + M), clique no botão do menu e confirme se os links aparecem e desaparecem a cada clique. 4. Teste o FAQ Sanfona: Role até a seção de dúvidas e clique em cada pergunta para ver as respostas expandindo e recolhendo suavemente. 5. Comemore a primeira entrega: Sua Landing Page completa em HTML5, CSS3 e JavaScript puro está concluída e funcionando localmente!