Le retour de Bart
Vous vous souvenez du générateur de Bart écrit en PHP ? Eh bien cette fois-ci nous allons coder la version JavaScript du générateur de phrase.
Introduction
Dans ce TP nous allons pratiquer la manipulation du DOM en JavaScript. Bien que je trouve que ça ne soit pas forcément la meilleure façon de faire (je préfère de loin l'approche VueJS), il est complètement possible de créer, afficher, conditionner l'affichage d'éléments 100% avec du JavaScript. Dans ce TP vous allez écrire le code JavaScript afin de réaliser :
Création de la structure
Nous l'avons fait de multiples fois, je vous laisse mettre en place la structure de votre projet. Je souhaite cependant que celle-ci respecte quelques règles :
- Votre fichier HTML doit s'appeler
index.html. - L'ensemble de vos ressources
publicdoivent être dans un dossierpublic. - La CSS doit être externalisée dans un dossier nommé
style. - Le JavaScript doit être dans un fichier
main.jsdans un dossier nomméjs.
La fainéantise ! La clé du succès 🔑
Nous en avons déjà parlé, un développeur doit être efficace (et fainéant)… Ne vous amusez donc pas à recoder l'ensemble. Reprenez le code que vous avez réalisé lors de la création du Bart en version PHP
Halt !
Quelques petits rappels…
<!-- Inclure une CSS -->
<link rel="stylesheet" href="public/style/main.css" />
<!-- Inclure un fichier JS -->
<script src="public/js/main.js"></script>Le HTML
Voilà la structure de mon HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bart JS Générator</title>
<link rel="stylesheet" href="public/style/main.css" />
<script src="public/js/main.js"></script>
</head>
<body>
<div id="tableau"></div>
</body>
</html>Le JS
Votre fichier JavaScript va contenir la logique de notre application. Pour rappel, celle-ci est très simple, elle ne « fait que » afficher des phrases dans la div avec comme identifiant #tableau.
Votre travail va donc se résumer à :
- Créer les variables (phrase et nombre de lignes).
- Une boucle (type
for, voir vos notes ou le cours). - Un sélecteur pour obtenir le tableau (
let tableau = document.getElementById('tableau');) - L'ajout d'élément « dans la div tableau ». (voir le support)
réfléchir avant d'agir
Écrire le code immédiatement est tentant ? Mais arrêtons-nous un instant pour réfléchir à notre code. Tenter d'écrire votre code en français (ou via un diagramme)
Où placer le JS ?
Maintenant que vous avez votre code JavaScript, vous avez deux solutions :
- La première est de mettre votre JS à la fin de votre HTML. L'objectif : faire en sorte que celui-ci soit exécuté quand votre page est chargée. (À votre avis, est-ce une bonne idée ?)
- La seconde est de mettre votre JS dans le
headde votre site. Celui-ci sera donc chargé au plus tôt par contre le code sera lancé immédiatement… Alors, comment faire ?
La solution ?
Attendre que votre page « soit entièrement chargée » afin de déclencher votre JavaScript ! Cet évènement est appelé Dom Ready (il est très important), dès que cet évènement est « levé » vous pouvez exécuter votre JS.
Concrètement il faut écrire :
En pur JS :
document.addEventListener("DOMContentLoaded", function () {
// Votre code ici
console.log("Je m'affiche quand la page est chargée entièrement.");
});Une petite remarque
Vous croiserez peut-être dans du code existant l'écriture jQuery équivalente : $(function () { … });. C'est plus concis, mais ça nécessite une librairie externe. On verra qu'avec VueJS ça sera encore plus simple, sans réinventer la roue.
Je vous laisse écrire le code nécessaire au bon fonctionnement de votre site.
Bloqué ?
Besoin d'aide ? Voici ma version
Allons plus loin
Vous êtes en avance ?
Cette partie est un bonus pour les étudiants qui ont terminé. jQuery n'est plus un choix automatique aujourd'hui, mais vous le croiserez très certainement dans des projets existants en entreprise. Autant savoir le reconnaitre et le manipuler.
Vous avez codé votre application en pur JS. Je vous laisse migrer votre code pour utiliser :
- Les sélecteurs jQuery.
- La création et la manipulation du DOM grâce à jQuery.
Petit rappel
Inclure jQuery dans votre projet est aussi simple que d'ajouter dans votre head :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>C'est à vous, je vous laisse travailler.