Ajout du fichier JavaScript et des balises HTML
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compteToutes les questions
Beachmountains
14 septembre 2024
Résolue
12 réponses
Erreur 404 lors de l'accès à la boîte de dialogue
Bonjour ,
je n'arrive pas accéder à la boite de dialogue,
j'ai une erreur 404.
127.0.0.1 - - [11/Sep/2024 14:50:40] "GET /static/dist/js/script.js HTTP/1.1" 404 .
Pour générer le fichier Tailwindcss la ligne de code ne fonctionne pas .
```
"C:\Users\howie\OneDrive\Bureau\tailwindcss-windows-x64.exe" -i static\src\css\input.css -o static\dist\css\style.css.
```
Et j'ai crée le fichier style.css en supprimant -i et le remplaçant par -o et ça marche.
Et pour exécuter
```
tailwindcss --watch
```
en arrière plan il fonctionne.
je suis sur Windows 11 et sur Visual Code et qui marche mieux que PyCharm.
Merci.
00:00:00 :Dans cette partie on va ajouter notre fichier javascript et on va également charger toutesles dépendances dans le fichier html, donc la feuille de style et le fichier javascriptqu'on va tout de suite ajouter.
00:00:09 :Donc à l'intérieur de mon dossier dist ici je vais créer un autre sous-dossier que jevais appeler js et à l'intérieur de ce sous-dossier on va faire un fichier script.js qui va contenir
00:00:20 :notre javascript.Pour l'instant je vais juste mettre un alerte hello world pour vérifier que le script estbien chargé dans notre html et cette ligne de code va tout simplement afficher une boîtede texte donc ça va nous permettre de vérifier très simplement si le fichier est bien chargé
00:00:33 :à l'intérieur de index.html.Donc la première chose qu'on va faire c'est charger notre feuille de style, donc ça vanous permettre de vérifier que la feuille de style de Tailwind est bien chargée, donccette feuille de style style.css et pour ça on va utiliser une balise un petit peu spéciale
00:00:48 :de Flask qui est la balise url4.Donc url4 ça nous permet de générer à partir d'un chemin le chemin absolu vers le fichiercss.Donc cette balise url4 il faut l'entourer de doubles accolades, donc ça c'est le langagede gabarit jinja2 de Flask qui nous permet d'inclure des variables un petit peu spéciales
00:01:06 :comme ça à l'intérieur de notre fichier html.Donc ça va être des variables dynamiques qui vont être générées dans ce cas-ci parla fonction url4.
00:01:14 :Donc on lui dit qu'on va chercher dans le fichier statique et on lui indique le nomdu fichier, dans ce cas-ci c'est le fichier style.css qui se trouve dans le dossier distcss.
00:01:23 :Donc ça, ça va nous permettre d'ajouter la feuille de style et pour le fichier javascripton va le mettre juste avant le body à la fin ici et on va utiliser la même fonctiondonc url4 sauf que cette fois-ci on va cibler le script javascript.
00:01:36 :Je mets le css dans la balise head ici puisqu'on veut que le css soit chargé avant le chargementdu reste de la page pour que tout soit bien appliqué correctement et pour le javascripton va le mettre à la fin ici puisqu'on ne veut pas bloquer le rendu de la page par
00:01:49 :le fichier javascript et à l'intérieur du fichier javascript vous verrez par la suitequ'on va ajouter un écouteur d'événements qui va nous permettre d'exécuter certainesfonctions uniquement quand le DOM complet aura été chargé.
00:02:00 :Donc ce n'est pas un problème de le mettre à la fin ici et on ne le met pas dans lehead pour ne pas bloquer le rendu de la page avec le chargement de ce fichier.
00:02:08 :Donc maintenant on va vérifier que tout fonctionne, je vais remettre ma classe ici pour vérifierque le css est bien chargé donc on remet une classe tailwind, je vais m'assurer aussique je relance bien le build avec tailwind css ici pour qu'on ait bien cette classeque j'ai ajoutée dans mon html dans le fichier css de distribution donc ce fichier style.css
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.
