Envía tu primer script al navegador

Añadamos un menú hamburguesa para abrir y cerrar los enlaces en pantallas de dispositivos móviles, lo que requiere cierta interactividad con el cliente.

Prepárate para...

• Crear un componente de menú de hamburguesa
• Escribir un <script> para que los visitantes de tu sitio puedan abrir y cerrar el menú de navegación
• Mover tu JavaScript a un archivo .js.

Construye un componente Hamburger

Sección titulada Construye un componente Hamburger

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

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

2. Copia el siguiente código en tu componente. Esto representará tu menú “hamburguesa” de 3 líneas para abrir y cerrar tus enlaces de navegación en móvil. (Añadirás los nuevos estilos CSS a global.css más tarde).

   src/components/Hamburger.astro

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

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

   ¡Enséñame el código!

   src/components/Header.astro

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

4. Añade los siguientes estilos para tu componente Hamburger:

   src/styles/global.css

   /* estilos de la barra de navegación*/
   .hamburger {
     padding-right: 20px;
     cursor: pointer;
   }
   
   .hamburger .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;
     }
   
     .hamburger {
       display: none;
     }
   }

Escribe tu primera etiqueta script

Sección titulada Escribe tu primera etiqueta script

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

La adición de 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> a index.astro, justo antes de la etiqueta de cierre </body>.

   src/pages/index.astro

     <Footer />
     <script>
       document.querySelector('.hamburger').addEventListener('click', () => {
         document.querySelector('.nav-links').classList.toggle('expanded');
       });
     </script>
   </body>

2. Comprueba de nuevo la vista previa del navegador en varios tamaños y verifica que el menú de navegación funciona, que es responsivo al tamaño de la pantalla y que responde a las entradas del usuario en esta página.

Importa un archivo .js

Sección titulada Importa un archivo .js

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

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

   src/scripts/menu.js

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

2. Sustituye el contenido de la etiqueta <script> en index.astro por la siguiente importación de archivos:

   src/pages/index.astro

     <Footer />
     <script>
       document.querySelector('.hamburger').addEventListener('click', () => {
         document.querySelector('.nav-links').classList.toggle('expanded');
       });
   
       import "../scripts/menu.js";
     </script>
   </body>

3. Comprueba de nuevo la vista previa del navegador a un tamaño más pequeño y verifica que el menú hamburguesa todavía abre y cierra los enlaces de tu navegación.

4. Añade la misma etiqueta <script> con la importación a tus otras dos páginas, about.astro y blog.astro y comprueba que tienes un encabezado responsivo 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 utilizado JavaScript para construir partes de tu sitio:

• Definir dinámicamente el título y la cabecera de la página
• Mapeo a través de una lista de competencias en la página ‘Acerca de’
• Visualización condicional de elementos HTML

Todos esos comandos se ejecutan en tiempo de compilación para crear HTML estático para tu sitio, y luego el código se “tira”.

El JavaScript de una etiqueta <script> se envía al navegador y está disponible para ejecutarse en función de las interacciones del usuario, como actualizar una página o cambiar una entrada.

Pon a prueba tus conocimientos

Sección titulada Pon a prueba tus conocimientos

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

   1. Astro nunca ejecuta JavaScript

   2. en tiempo de compilación

   3. Cuando un visitante pulsa un botón

   Enviar

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

   1. que los usuarios hagan clic en los enlaces de las páginas

   2. tiempos de carga más rápidos

   3. interactividad del lado del cliente

   Enviar

3. El JavaScript del lado del cliente se enviará al navegador del usuario cuando se escriba o importe:

   1. en etiquetas <script>.

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

   3. en global.css

   Enviar

Checklist

Sección titulada 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

Sección titulada Recursos

Scripts del lado del cliente en Astro