Envie seu primeiro script ao navegador

Vamos adicionar um menu hambúrguer para abrir e fechar seus links em tamnhos de tela móveis, que necessita de interatividade no lado do cliente!

Se prepare para...

• Criar um componente de menu hambúrguer
• 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 Hambúrguer

Seção intitulada Construa um componente Hambúrguer

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

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

2. Copie o seguinte código em seu componente. Isso irá representar o seu menu “hambúrguer” de 3-linhas para abrir e fechar seus links de navegação em dispositivos móveis. (Você vai adicionar os novos estilos CSS ao global.css posteriormente.)

   src/components/Hamburguer.astro

   ---
   ---
   <div class="hamburguer">
     <span class="line"></span>
     <span class="line"></span>
     <span class="line"></span>
   </div>

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

   Me mostre o código!

   src/components/Header.astro

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

4. Adicione os seguintes estilos ao seu componente Hambúrguer:

   src/styles/global.css

   /* estilos da navegação */
   .hamburguer {
     padding-right: 20px;
     cursor: pointer;
   }
   
   .hamburguer .line {
     display: block;
     width: 40px;
     height: 5px;
     margin-bottom: 10px;
     background-color: #ff9776;
   }
   
   .nav-links {
     width: 100%;
     top: 5rem;
     left: 48px;
     background-color: #ff9776;
     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;
   }
   
   .nav-links a:hover, a:focus {
     background-color: #ff9776;
   }
   
   .expanded {
     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;
     }
   
     .hamburguer {
       display: none;
     }
   }

Escreva sua primeira tag de script

Seção intitulada 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 hambúrguer 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> em index.astro, logo antes da tag de fechamento </body>.

   src/pages/index.astro

     <Footer />
     <script>
       document.querySelector('.hamburguer').addEventListener('click', () => {
         document.querySelector('.nav-links').classList.toggle('expanded');
       });
     </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

Seção intitulada 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

   document.querySelector('.hamburguer').addEventListener('click', () => {
     document.querySelector('.nav-links').classList.toggle('expanded');
   });

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

   src/pages/index.astro

     <Footer />
     <script>
       document.querySelector('.hamburguer').addEventListener('click', () => {
         document.querySelector('.nav-links').classList.toggle('expanded');
       });
   
       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 hambúrguer 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

Seção intitulada 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

Seção intitulada 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

Seção intitulada Recursos

Scripts no lado do cliente no Astro