Envoyer votre premier script au navigateur
Ajoutons un menu hamburger pour ouvrir et fermer vos liens sur les écrans de taille mobile, nécessitant ainsi de l’interactivité côté client !
Préparez-vous à…
- Créer un composant de menu hamburger
- Rédiger un
<script>
pour permettre aux visiteurs de votre site d’ouvrir et de fermer le menu de navigation - Déplacer votre JavaScript dans son fichier
.js
Construire un composant Hamburger
Titre de la section Construire un composant HamburgerCréez un composant <Hamburger />
pour ouvrir et fermer votre menu mobile.
-
Créez un fichier nommé
Hamburger.astro
danssrc/components/
-
Copiez le code suivant dans votre composant. Cela représentera votre menu « hamburger » à 3 lignes pour ouvrir et fermer vos liens de navigation sur mobile. (Vous ajouterez les nouveaux styles CSS dans
global.css
ultérieurement.)src/components/Hamburger.astro ------<div class="hamburger"><span class="line"></span><span class="line"></span><span class="line"></span></div> -
Placez ce nouveau composant
<Hamburger />
juste avant votre composant<Navigation />
dansHeader.astro
.Montrez-moi le code !
src/components/Header.astro ---import Hamburger from './Hamburger.astro';import Navigation from './Navigation.astro';---<header><nav><Hamburger /><Navigation /></nav></header> -
Ajoutez les styles suivants pour votre composant Hamburger :
src/styles/global.css /* Styles de la navigation */.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;}}
Rédiger votre première balise de script
Titre de la section Rédiger votre première balise de scriptVotre en-tête n’est pas encore interactif car il ne peut pas réagir aux interactions de l’utilisateur, comme cliquer sur le menu hamburger pour afficher ou masquer les liens de navigation.
L’ajout d’une balise <script>
fournit du JavaScript côté client pour « écouter » un événement utilisateur, puis réagir en conséquence.
-
Ajoutez la balise
<script>
suivante àindex.astro
, juste avant la balise de fermeture</body>
.src/pages/index.astro <Footer /><script>document.querySelector('.hamburger')?.addEventListener('click', () => {document.querySelector('.nav-links')?.classList.toggle('expanded');});</script></body> -
Consultez à nouveau l’aperçu de votre navigateur en utilisant différentes tailles, et vérifiez que vous avez un menu de navigation fonctionnel qui est à la fois réactif à la taille de l’écran et réagit aux interactions de l’utilisateur sur cette page.
Importation d’un fichier .js
Titre de la section Importation d’un fichier .jsAu lieu d’écrire votre JavaScript directement sur chaque page, vous pouvez déplacer le contenu de votre balise <script>
dans son propre fichier .js
dans votre projet.
-
Créez
src/scripts/menu.js
(vous devrez créer un nouveau dossier/scripts/
) et déplacez-y votre JavaScript.src/scripts/menu.js document.querySelector('.hamburger').addEventListener('click', () => {document.querySelector('.nav-links').classList.toggle('expanded');}); -
Remplacez le contenu de la balise
<script>
dansindex.astro
par l’importation de fichier suivante :src/pages/index.astro <Footer /><script>document.querySelector('.hamburger')?.addEventListener('click', () => {document.querySelector('.nav-links')?.classList.toggle('expanded');});import "../scripts/menu.js";</script></body> -
Contrôlez à nouveau votre aperçu de navigateur à une taille plus petite et vérifiez que le menu hamburger est toujours capable d’ouvrir et de fermer vos liens de navigation.
-
Ajoutez la même balise
<script>
avec l’importation sur vos deux autres pages,about.astro
etblog.astro
, et vérifiez que vous avez un en-tête réactif et interactif sur chaque page.src/pages/about.astro & src/pages/blog.astro <Footer /><script>import "../scripts/menu.js";</script></body>
Vous aviez précédemment utilisé un peu de JavaScript pour construire des parties de votre site :
- Définir les titres de la fenêtre et de votre page dynamiquement
- Parcourir une liste de compétences sur la page « À propos »
- Afficher conditionnellement des éléments HTML
Ces commandes sont toutes exécutées au moment de la compilation pour créer du HTML statique pour votre site, puis le code est « jeté ».
Le JavaScript dans une balise <script>
est envoyé au navigateur et peut être exécuté en fonction des interactions de l’utilisateur, comme actualiser une page ou changer l’état d’un élément interactif.
Tester vos connaissances
Titre de la section Tester vos connaissances-
Quand Astro exécute-t-il le JavaScript écrit dans le frontmatter d’un composant ?
-
En option, Astro peut envoyer du JavaScript au navigateur pour permettre :
-
Le JavaScript côté client sera envoyé au navigateur d’un utilisateur quand il est écrit ou importé :
Liste de contrôle
Titre de la section Liste de contrôleRessources
Titre de la section RessourcesLes scripts côté client dans Astro
Tutorials