Envie seu primeiro script ao navegador

Vamos adicionar um botão para abrir e fechar seu menu de navegação em tamanhos de tela móveis, que necessita de interatividade no lado do cliente!

Se prepare para...

• Criar um componente de menu
• Escrever um <script> para permitir visitantes do site abrirem e fecharem o menu de navegação
• Mover seu JavaScript para seu arquivo .js

Construa um componente de Menu

Crie um componente <Menu /> para abrir e fechar sua navegação móvel.

1. Crie um arquivo chamado Menu.astro em src/components/

2. Copie o seguinte código em seu componente. Ele cria um botão que será utilizado para alternar a visibilidade dos links de navegação em dispositivos móveis. (Você vai adicionar os novos estilos CSS ao global.css posteriormente.)

   src/components/Menu.astro

   ---
   ---
   <button aria-expanded="false" aria-controls="main-menu" class="menu">
     Menu
   </button>

3. Coloque esse novo componente <Menu /> logo antes do seu componente <Navigation /> em Header.astro.

   Me mostre o código!

   src/components/Header.astro

   ---
   import Menu from './Menu.astro';
   import Navigation from './Navigation.astro';
   ---
   <header>
     <nav>
       <Menu />
       <Navigation />
     </nav>
   </header>

4. Adicione os seguintes estilos ao seu componente de Menu, incluindo alguns estilos responsivos:

   src/styles/global.css

   /* estilos da navegação */
   .menu {
     background-color: #0d0950;
     border: none;
     color: #fff;
     font-size: 1.2rem;
     font-weight: bold;
     padding: 5px 10px;
   }
   
   .nav-links {
     width: 100%;
     display: none;
     margin: 0;
   }
   
   .nav-links a {
     display: block;
     text-align: center;
     padding: 10px 0;
     text-decoration: none;
     font-size: 1.2rem;
     font-weight: bold;
     text-transform: uppercase;
     color: #0d0950;
   }
   
   .nav-links a:hover,
   .nav-links a:focus{
     background-color: #ff9776;
   }
   
   :has(.menu[aria-expanded="true"]) .nav-links {
     display: unset;
   }
   
   @media screen and (min-width: 636px) {
     .nav-links {
       margin-left: 5em;
       display: block;
       position: static;
       width: auto;
       background: none;
     }
   
     .nav-links a {
       display: inline-block;
       padding: 15px 20px;
     }
   
     .menu {
       display: none;
     }
   }

Escreva sua primeira tag de script

Seu cabeçalho ainda não é interativo pois ele não consegue responder as interações do usuário, como clicar no menu para mostrar ou esconder os links de navegação.

Adicionar uma tag <script> fornece JavaScript no lado do cliente para “escutar” por um evento do usuário e então responder de acordo.

1. Adicione a seguinte tag <script>, utilizando o suporte nativo a TypeScript do Astro, em index.astro, logo antes da tag de fechamento </body>.

   src/pages/index.astro

     <Footer />
     <script>
       const menu = document.querySelector('.menu');
   
       menu?.addEventListener('click', () => {
         const isExpanded = menu.getAttribute('aria-expanded') === 'true';
         menu.setAttribute('aria-expanded', `${!isExpanded}`);
       });
     </script>
   </body>

2. Verifique sua pré-visualização do navegador novamente em vários tamanhos, e verifique que você tem um menu de navegação funcional que é tanto responsivo ao tamanho da tela quanto responde a interação do usuário na página.

Importando um arquivo .js

Ao invés de escrever seu JavaScript diretamente em cada página, você pode mover os conteúdos da sua tag <script> para seu próprio arquivo .js em seu projeto.

1. Crie src/scripts/menu.js (você terá que criar uma nova pasta /scripts/) e mova seu JavaScript para ela.

   src/scripts/menu.js

   const menu = document.querySelector('.menu');
   
   menu?.addEventListener('click', () => {
     const isExpanded = menu.getAttribute('aria-expanded') === 'true';
     menu.setAttribute('aria-expanded', `${!isExpanded}`);
   });

2. Substitua os conteúdos da tag <script> em index.astro com a seguinte importação de arquivo:

   src/pages/index.astro

     <Footer />
     <script>
       const menu = document.querySelector('.menu');
   
       menu?.addEventListener('click', () => {
         const isExpanded = menu.getAttribute('aria-expanded') === 'true';
         menu.setAttribute('aria-expanded', `${!isExpanded}`);
       });
   
       import "../scripts/menu.js";
     </script>
   </body>

3. Verifique a pré-visualização do seu navegador novamente em um tamanho de tela menor e verifique que o menu ainda abre e fecha seus links de navegação.

4. Adicione o mesmo <script> por importação para suas outras duas páginas, about.astro e blog.astro e verifique que você tem um cabeçalho responsivo e interativo em cada página.

   src/pages/about.astro & src/pages/blog.astro

     <Footer />
     <script>
       import "../scripts/menu.js";
     </script>
   </body>

Aprendizado

Você tinha utilizado algum JavaScript anteriormente para construir partes do seu site:

• Definir o título da sua página e cabeçalho dinamicamente
• Mapear através de uma lista de habilidades na página Sobre
• Mostrar elementos HTML condicionalmente

Esses comandos são todos executados em tempo de build para criar HTML estático para seu site, e então o código é “jogado fora.”

O JavaScript e uma tag <script> é enviado para o navegador, e é disponível para execução, baseado na interação do usuário como atualizar a página ou alternar uma entrada.

Teste seu conhecimento

1. Quando o Astro executa qualquer JavaScript escrito no frontmatter de um componente?

   1. Astro nunca executa JavaScript

   2. Em tempo de build

   3. Quando um visitante clica em um botão

   Enviar

2. Opcionalmente, Astro pode enviar JavaScript para o navegador para permitir:

   1. usuários a clicarem links da página

   2. tempos de carregamento mais rápidos

   3. interatividade no lado do cliente

   Enviar

3. O JavaScript no lado do cliente será enviado ao navegador do usuário quando ele é escrito ou importado:

   1. em tags <script>

   2. entre as cercas de código de um arquivo .astro

   3. em global.css

   Enviar

Checklist

• Eu posso adicionar interatividade no lado do cliente com JavaScript em uma tag <script>.
• Eu posso importar um arquivo .js em uma tag <script>.

Recursos

Scripts no lado do cliente no Astro (EN)