Préparer un fichier JavaScript pour la page

Quand vous écrivez du JavaScript, le navigateur ne l’exécute pas automatiquement : la page HTML doit indiquer quel fichier charger. Sans cette liaison, votre gestionnaire de tâches reste une page statique et vous ne pouvez pas vérifier le comportement de votre code. Vous allez relier la page à un premier fichier JavaScript, puis confirmer son exécution dans les outils du navigateur.

Relier le fichier JavaScript à la page

Le squelette fourni contient déjà la balise nécessaire dans l’en-tête de index.html. Son attribut src indique le chemin vers le fichier à charger, et type="module" demande au navigateur de traiter ce fichier comme un module ES. Respectez les minuscules et le chemin : le fichier doit bien se trouver dans le dossier js et s’appeler main.js.

<script type="module" src="js/main.js"></script>

Le chemin est relatif à index.html : js/main.js désigne donc le fichier main.js placé dans le sous-dossier js. Créez ce dossier si nécessaire, puis créez-y le fichier. Une balise script de type module peut être placée dans l’en-tête comme dans le squelette ; gardez cette organisation identique afin de retrouver facilement le point d’entrée du programme.

Écrire une première instruction

Pour tester le lien, écrivez dans js/main.js une instruction qui envoie un message dans la console. Une instruction demande au navigateur d’effectuer une action ; ici, console.log affiche le texte fourni. Ce test ne modifie pas encore la page : il sert uniquement à vérifier que le fichier a bien été chargé et exécuté.

console.log("Le gestionnaire de tâches est prêt.");

Le gestionnaire de tâches est prêt.

Une fois la page chargée, ouvrez les outils de développement de votre navigateur et sélectionnez l’onglet Console. Rechargez la page : le message doit apparaître. La console sert à observer les messages et les erreurs pendant le développement ; elle est distincte du contenu visible dans la page. Si le message n’apparaît pas, vérifiez d’abord le chemin indiqué dans src, le nom des dossiers et la présence d’une éventuelle erreur signalée par le navigateur.

Appliquer les variables du projet aux classes existantes

La page comporte déjà des classes pour son cadre, son en-tête, le formulaire et la progression. Ajoutez dans l’unique feuille style.css des règles pour ces éléments, en utilisant les variables définies par le projet plutôt que des valeurs de style en dur. Les règles ci-dessous couvrent les classes déjà présentes dans le HTML ; elles ne changent ni la structure de la page ni le rôle du fichier JavaScript.

:root {
  --taches-couleur-fond: #f5f7fb;
  --taches-couleur-surface: #ffffff;
  --taches-couleur-texte: #202938;
  --taches-couleur-accent: #3659d9;
  --taches-couleur-bordure: #d8deea;
  --taches-espace: 1rem;
  --taches-espace-large: 2rem;
  --taches-rayon: 0.75rem;
  --taches-police: system-ui, sans-serif;
  --taches-taille-texte: 1rem;
  --taches-largeur-page: 48rem;
}

.taches-page {
  background-color: var(--taches-couleur-fond);
  color: var(--taches-couleur-texte);
  font-family: var(--taches-police);
  font-size: var(--taches-taille-texte);
}

.taches-entete {
  max-width: var(--taches-largeur-page);
  margin: var(--taches-espace-large) auto;
}

.taches-entete__titre {
  color: var(--taches-couleur-accent);
}

.taches-principale {
  max-width: var(--taches-largeur-page);
  margin: var(--taches-espace-large) auto;
  padding: var(--taches-espace);
  background-color: var(--taches-couleur-surface);
  border-radius: var(--taches-rayon);
}

.taches-formulaire {
  padding: var(--taches-espace);
  border: var(--taches-espace) solid var(--taches-couleur-bordure);
  border-radius: var(--taches-rayon);
}

.taches-formulaire__champ {
  padding: var(--taches-espace);
  color: var(--taches-couleur-texte);
  border: var(--taches-espace) solid var(--taches-couleur-bordure);
  border-radius: var(--taches-rayon);
}

.taches-formulaire__bouton {
  padding: var(--taches-espace);
  color: var(--taches-couleur-surface);
  background-color: var(--taches-couleur-accent);
  border-radius: var(--taches-rayon);
}

.taches-progression {
  margin: var(--taches-espace-large) 0;
  padding: var(--taches-espace);
  background-color: var(--taches-couleur-fond);
  border-radius: var(--taches-rayon);
}

Les noms de variables CSS restent préfixés par --taches-, conformément au contrat du projet. Les valeurs de couleur, d’espacement, de largeur et de typographie sont centralisées dans :root, puis réutilisées avec var(). Cette feuille ne remplace pas le HTML : elle met en forme les classes qu’il contient déjà. Vous pourrez ajouter les règles des autres classes autorisées lorsque les éléments correspondants seront abordés.

À retenir

• La balise script avec type="module" relie la page à un fichier JavaScript traité comme module.
• Le chemin js/main.js part du dossier contenant index.html.
• console.log permet de vérifier une instruction en observant la console du navigateur.
• En cas de message absent, vérifiez le chemin et recherchez une erreur de chargement dans la console.
• Les règles de style initiales réutilisent les variables autorisées pour les classes déjà présentes dans la page.

Dans la prochaine leçon, vous déclarerez vos premières variables avec const et let.