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
Sezione intitolata Costruisci un componente HamburgerCrea un componente <Hamburger />
per aprire e chiudere il menu mobile.
-
Crea un file chiamato
Hamburger.astro
insrc/components/
-
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> -
Posiziona questo nuovo componente
<Hamburger />
appena prima del componente<Navigation />
inHeader.astro
.Mostrami il codice!
src/components/Header.astro ---import Hamburger from './Hamburger.astro';import Navigation from './Navigation.astro';---<header><nav><Hamburger /><Navigation /></nav></header> -
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
Sezione intitolata Scrivi il tuo primo tag scriptIl 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.
-
Aggiungi il seguente tag
<script>
aindex.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> -
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
Sezione intitolata Importare un file .jsInvece 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.
-
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');}); -
Sostituisci il contenuto del tag
<script>
suindex.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> -
Controlla nuovamente l’anteprima del browser a una dimensione ridotta e verifica che il menu hamburger apra e chiuda ancora i link di navigazione.
-
Aggiungi lo stesso
<script>
con l’importazione alle altre due pagine,about.astro
eblog.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>
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
Sezione intitolata Metti alla prova le tue conoscenze-
Quando Astro esegue il JavaScript scritto nel frontmatter di un componente?
-
Opzionalmente, Astro può inviare JavaScript al browser per permettere:
-
Il JavaScript lato client verrà inviato al browser di un utente quando è scritto o importato:
Checklist
Sezione intitolata ChecklistRisorse
Sezione intitolata RisorseScript lato client in Astro (EN)
Tutorials