Envía tu primer script al navegador

Vamos a añadir un botón para abrir y cerrar tu menú de navegación en tamaños de pantalla móvil, ¡requiriendo algo de interactividad del lado del cliente!

Prepárate para…

• Crea un componente de menú
• Escribe un <script> para permitir a los visitantes de tu sitio abrir y cerrar el menú de navegación
• Mueve tu JavaScript a su archivo .js

Construye un componente Menu

Crea un componente <Menu /> para abrir y cerrar tu menú móvil.

1. Crea un archivo llamado Menu.astro en src/components/

2. Copia el siguiente código en tu componente. Crea un botón que será usado para alternar la visibilidad de los enlaces de navegación en dispositivos móviles. (Añadirás los nuevos estilos CSS a global.css más adelante.)

   src/components/Menu.astro

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

3. Coloca este nuevo componente <Menu /> justo antes de tu componente <Navigation /> en Header.astro.

   ¡Muéstrame el código!

   src/components/Header.astro

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

4. Añade los siguientes estilos para tu componente Menu, incluyendo algunos estilos responsive:

   src/styles/global.css

   /* nav styles */
   .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;
     }
   }

Escribe tu primera etiqueta script

Tu header aún no es interactivo porque no puede responder a la entrada del usuario, como hacer clic en el menú para mostrar u ocultar los enlaces de navegación.

Añadir una etiqueta <script> proporciona JavaScript del lado del cliente para "escuchar" un evento del usuario y luego responder en consecuencia.

1. Añade la siguiente etiqueta <script>, usando el soporte integrado de TypeScript de Astro, a index.astro, justo antes de la etiqueta de cierre </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. Revisa la vista previa de tu navegador de nuevo en varios tamaños, y verifica que tienes un menú de navegación funcional que es tanto responsive al tamaño de pantalla como responde a la entrada del usuario en esta página.

Importando un archivo .js

En lugar de escribir tu JavaScript directamente en cada página, puedes mover el contenido de tu etiqueta <script> a su propio archivo .js en tu proyecto.

1. Crea src/scripts/menu.js (tendrás que crear una nueva carpeta /scripts/) y mueve tu JavaScript ahí.

   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. Reemplaza el contenido de la etiqueta <script> en index.astro con el siguiente import de archivo:

   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. Revisa la vista previa de tu navegador de nuevo en un tamaño más pequeño y verifica que el menú aún abre y cierra tus enlaces de navegación.

4. Añade la misma etiqueta <script> con import a tus otras dos páginas, about.astro y blog.astro y verifica que tienes un header responsive e interactivo en cada página.

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

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

Conclusión

Anteriormente habías usado algo de JavaScript para construir partes de tu sitio:

• Definir dinámicamente el título y encabezado de tu página
• Mapear a través de una lista de habilidades en la página About
• Mostrar condicionalmente elementos HTML

Esos comandos son todos ejecutados en tiempo de build para crear HTML estático para tu sitio, y luego el código es "descartado."

El JavaScript en una etiqueta <script> es enviado al navegador, y está disponible para ejecutarse, basado en interacciones del usuario como refrescar una página o alternar una entrada.

Pon a prueba tu conocimiento

1. ¿Cuándo ejecuta Astro cualquier JavaScript escrito en el frontmatter de un componente?

   1. Astro nunca ejecuta JavaScript

   2. en tiempo de build

   3. Cuando un visitante hace clic en un botón

   Enviar

2. Opcionalmente, Astro puede enviar JavaScript al navegador para permitir:

   1. a los usuarios hacer clic en enlaces de página

   2. tiempos de carga más rápidos

   3. interactividad del lado del cliente

   Enviar

3. El JavaScript del lado del cliente será enviado al navegador del usuario cuando es escrito o importado:

   1. en etiquetas <script>

   2. entre las vallas de código de un archivo .astro

   3. en global.css

   Enviar

Checklist

• Puedo añadir interactividad del lado del cliente con JavaScript en una etiqueta <script>.
• Puedo importar un archivo .js en una etiqueta <script>.

Recursos

Scripts del lado del cliente en Astro