Invia il tuo primo script al browser

Aggiungiamo un menu hamburger per aprire e chiudere i link su schermi di dimensioni ridotte, richiedendo un po’ di interattività lato client!

Preparati a…

• Crea un componente menu hamburger
• Scrivi un <script> per permettere ai visitatori del sito di aprire e chiudere il menu di navigazione
• Sposta il tuo JavaScript in un file .js

Costruisci un componente Hamburger

Crea un componente <Hamburger /> per aprire e chiudere il menu mobile.

1. Crea un file chiamato Hamburger.astro in src/components/

2. Copia il seguente codice nel tuo componente. Questo rappresenterà il tuo menu “hamburger” a 3 linee per aprire e chiudere i link di navigazione su mobile. (Aggiungerai i nuovi stili CSS a global.css più tardi.)

   src/components/Hamburger.astro

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

3. Posiziona questo nuovo componente <Hamburger /> appena prima del componente <Navigation /> in Header.astro.

   Mostrami il codice!

   src/components/Header.astro

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

4. Aggiungi i seguenti stili per il tuo componente Hamburger:

   src/styles/global.css

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

Scrivi il tuo primo tag script

Il tuo header non è ancora interattivo perché non può rispondere all’input dell’utente, come cliccare sul menu hamburger per mostrare o nascondere i link di navigazione.

Aggiungendo un tag <script> fornisci JavaScript lato client per “ascoltare” un evento dell’utente e rispondere di conseguenza.

1. Aggiungi il seguente tag <script> a index.astro, appena prima del tag di chiusura </body>.

   src/pages/index.astro

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

2. Controlla nuovamente l’anteprima del browser a varie dimensioni e verifica di avere un menu di navigazione funzionante che sia sia responsive alla dimensione dello schermo che risponda all’input dell’utente su questa pagina.

Importare un file .js

Invece di scrivere il tuo JavaScript direttamente su ogni pagina, puoi spostare il contenuto del tuo tag <script> in un file .js separato nel tuo progetto.

1. Crea src/scripts/menu.js (dovrai creare una nuova cartella /scripts/) e sposta il tuo JavaScript al suo interno.

   src/scripts/menu.js

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

2. Sostituisci il contenuto del tag <script> su index.astro con la seguente importazione del file:

   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. Controlla nuovamente l’anteprima del browser a una dimensione ridotta e verifica che il menu hamburger apra e chiuda ancora i link di navigazione.

4. Aggiungi lo stesso <script> con l’importazione alle altre due pagine, about.astro e blog.astro e verifica di avere un header responsive e interattivo su ogni pagina.

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

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

Da tenere presente

Hai precedentemente usato un po’ di JavaScript per costruire parti del tuo sito:

• Definendo dinamicamente il titolo della pagina e l’intestazione
• Iterando attraverso una lista di competenze nella pagina Su di me
• Mostrando condizionalmente elementi HTML

Quei comandi vengono tutti eseguiti al momento della build per creare HTML statico per il tuo sito, e poi il codice viene “scartato”.

Il JavaScript in un tag <script> viene inviato al browser, ed è disponibile per essere eseguito, in base a interazioni dell’utente come il refresh di una pagina o il toggle di un input.

Metti alla prova le tue conoscenze

1. Quando Astro esegue il JavaScript scritto nel frontmatter di un componente?

   1. Astro non esegue mai JavaScript

   2. al momento della build

   3. Quando un visitatore clicca un pulsante

   Invia

2. Opzionalmente, Astro può inviare JavaScript al browser per permettere:

   1. agli utenti di cliccare sui link della pagina

   2. tempi di caricamento più veloci

   3. interattività lato client

   Invia

3. Il JavaScript lato client verrà inviato al browser di un utente quando è scritto o importato:

   1. nei tag <script>

   2. tra i delimitatori di codice di un file .astro

   3. in global.css

   Invia

Checklist

• Posso aggiungere interattività lato client con JavaScript in un tag <script>.
• Posso importare un file .js in un tag <script>.

Risorse

Script lato client in Astro (EN)