15 min JavaScript — DOM, événements et asynchrone Gratuit
Objectif : Organiser le point d’entrée du gestionnaire dans un module ES et vérifier son chargement dans le navigateur.
Une page peut afficher son contenu sans que le JavaScript soit correctement relié : le gestionnaire resterait alors statique, et les prochaines fonctionnalités ne pourraient pas démarrer. Dans cette leçon, vous préparez le point d’entrée du projet et vérifiez que le navigateur exécute bien son module.
Relier la page au point d’entrée
Un module ES est un fichier JavaScript chargé selon le système de modules du navigateur. Dans le projet, index.html charge js/main.js avec l’attribut type="module". Ce fichier est le point d’entrée : il sera le lieu où vous organiserez progressivement le démarrage du gestionnaire.
Gardez les trois fichiers convenus : index.html, style.css et js/main.js. Le chemin du script est écrit depuis la page HTML : le dossier js se trouve au même niveau que index.html. Pour cette première étape, le module affiche un message de démarrage dans la console ; il ne touche pas encore au contenu de la page.
L’attribut type="module" indique au navigateur de traiter le fichier comme un module ES. Les modules utilisent automatiquement le mode strict et leurs déclarations restent dans leur propre portée, plutôt que de devenir des variables globales accessibles depuis toute la page. Vous n’ajoutez pas de dépendance externe : le navigateur fournit directement cette prise en charge.
Préparer le fichier de styles
La feuille unique du projet définit les variables autorisées et donne une présentation de base aux classes déjà présentes dans le squelette. Ces règles rendent visibles la structure, la progression et les commandes sans changer le HTML de référence. Vous compléterez ensuite le comportement de l’interface dans les leçons consacrées au DOM.
Aperçu appliqué au document HTML de cette leçon : la règle CSS est injectée dans la page pour voir son effet réel.
Comprendre les exports et imports nommés
Un module peut rendre une fonction disponible avec export. Un autre module peut la récupérer avec import, en reprenant exactement son nom entre accolades et en indiquant le chemin relatif vers son fichier. Ce mécanisme permet de séparer des responsabilités lorsque le projet grandit ; pour respecter l’organisation de ce projet, vous conservez ici un seul fichier JavaScript, js/main.js.
Dans ce point d’entrée, vous définissez une fonction nommée puis l’appelez directement. La déclaration utilise export pour illustrer la syntaxe d’un export nommé ; il n’y a pas encore d’import, car aucun second module n’est prévu dans les fichiers du projet. Vous utiliserez des imports nommés lorsque vous travaillerez avec des fonctions exportées par un autre module.
js/main.jsJavaScript
// Indique dans la console que le module a bien démarré.
export function afficherDemarrage() {
console.info("Gestionnaire de tâches prêt.");
}
afficherDemarrage();
Aperçu du rendu
Chargement de l'aperçu…
// Indique dans la console que le module a bien démarré.
export function afficherDemarrage() {
console.info("Gestionnaire de tâches prêt.");
}
afficherDemarrage();<style>:root{--atelier-couleur-texte:#202124;--atelier-couleur-fond:#f5f6fa;--atelier-couleur-accent:#3157c8;--atelier-espace-petit:0.5rem;--atelier-espace-moyen:1rem;--atelier-espace-grand:2rem;--atelier-rayon:0.5rem;--atelier-police:system-ui, sans-serif;--atelier-largeur-page:48rem;--atelier-ombre:0 0.125rem 0.5rem #20212422;}</style><!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gestionnaire de tâches</title>
<link rel="stylesheet" href="style.css">
<script type="module" src="js/main.js"></script>
</head>
<body class="atelier-page">
<header class="atelier-entete">
<h1>Gestionnaire de tâches</h1>
<p>Organisez vos tâches et suivez votre progression.</p>
</header>
<main class="atelier-principal">
<section class="atelier-progression" aria-labelledby="titre-progression">
<h2 id="titre-progression">Progression</h2>
<p><span data-progression-texte>0 tâche terminée sur 0</span></p>
<progress class="atelier-progression__barre" data-progression max="100" value="0">0%</progress>
</section>
<form class="atelier-formulaire" data-formulaire>
<label for="nouvelle-tache">Nouvelle tâche</label>
<input class="atelier-champ" id="nouvelle-tache" name="titre" type="text" required>
<button class="atelier-bouton" type="submit">Ajouter</button>
</form>
<div class="atelier-actions">
<div class="atelier-filtres" role="group" aria-label="Filtrer les tâches">
<button class="atelier-bouton" type="button" data-filtre="toutes" aria-pressed="true">Toutes</button>
<button class="atelier-bouton" type="button" data-filtre="actives" aria-pressed="false">À faire</button>
<button class="atelier-bouton" type="button" data-filtre="terminees" aria-pressed="false">Terminées</button>
</div>
<button class="atelier-bouton" type="button" data-charger>Charger des tâches</button>
</div>
<p class="atelier-message" data-message role="status" aria-live="polite"></p>
<ul class="atelier-liste" data-liste aria-label="Liste des tâches"></ul>
<template data-modele-tache>
<li class="atelier-tache" data-id="">
<input type="checkbox" data-action="basculer">
<span data-titre></span>
<button class="atelier-bouton" type="button" data-action="supprimer">Supprimer</button>
</li>
</template>
</main>
</body>
</html>
Résultat attendu
Gestionnaire de tâches prêt.
Vérifier le chargement dans le navigateur
Enregistrez les trois fichiers en respectant leur emplacement, puis ouvrez index.html depuis un serveur local. Dans les outils de développement du navigateur, consultez l’onglet Console : le message « Gestionnaire de tâches prêt. » doit apparaître une fois. Cette vérification confirme que le chemin de script est correct et que le code du module s’exécute.
Si le message manque, vérifiez d’abord le chemin js/main.js, puis recherchez une erreur dans la console. Une erreur de syntaxe empêche le module de s’exécuter ; une erreur de chemin indique généralement un fichier absent ou mal placé. Le contenu HTML reste visible même lorsque le module échoue : l’affichage seul ne prouve donc pas que le JavaScript a démarré.
À retenir
Reliez la page à js/main.js avec une balise script portant type="module".
Conservez les fichiers à leurs emplacements prévus et vérifiez le chemin relatif depuis index.html.
Les modules ES permettent d’exporter des fonctions nommées et de les importer depuis un autre module.
Confirmez le démarrage en contrôlant le message de la console et corrigez toute erreur signalée.
Dans la prochaine leçon, vous repérerez les éléments de l’interface auxquels le gestionnaire devra se connecter.
Envie d'aller plus loin ?
Les cours Enovatic sont gratuits et le resteront. Si vous cherchez un accompagnement
encadré, nos formations professionnelles sont animées par les mêmes formateurs.
