Évaluation finale

Quiz du cours « JavaScript — modularité, performance et API navigateur »

12 questions à choix unique pour vérifier que le parcours est acquis. Une seule tentative de réponse par question, correction immédiate.

80 % de bonnes réponses sont nécessaires pour valider le cours. Vous pouvez repasser le quiz autant de fois que nécessaire : seul votre meilleur score est conservé.

Dans le gestionnaire de tâches, quelle répartition respecte le mieux la séparation des responsabilités entre modules ?

Le module de données gère l’état, le module d’interface effectue le rendu et le point d’entrée les relie. Le module de données gère l’état et le rendu, tandis que le point d’entrée ne fait que charger la page. Chaque module modifie directement l’état et le DOM selon ses besoins. Le point d’entrée contient toutes les règles métier et les autres modules ne font que stocker des constantes.

Un fichier store.js exporte une fonction nommée createTask. Quelle syntaxe permet de l’importer dans app.js, situé dans le même dossier ?

import createTask from "./store.js"; import { createTask } from "./store.js"; const { createTask } = require("store.js"); import { createTask } from "/store.js";

Le module de rendu importe le module de données, qui importe à son tour le module de rendu. Quel problème cette organisation crée-t-elle ?

Elle empêche nécessairement d’utiliser des fonctions nommées. Elle transforme automatiquement les imports statiques en imports dynamiques. Elle crée une dépendance circulaire, qui complique l’initialisation et la compréhension du graphe de dépendances. Elle rend les fonctions du module de données impossibles à tester.

Quelle forme d’état initial convient le mieux à un gestionnaire de tâches qui affiche une progression calculée à partir des tâches ?

Un objet contenant le tableau des tâches et, séparément, une valeur de progression qu’il faut synchroniser après chaque modification. Un objet contenant uniquement la progression ; les tâches sont relues dans le DOM pour la recalculer. Un objet contenant les tâches, le nombre d’éléments DOM et leur état de visibilité. Un objet contenant les données nécessaires, par exemple un tableau tasks, la progression étant calculée à partir de ce tableau.

Une action TASK_TOGGLED est reçue par une fonction réductrice. Quelle mise à jour respecte le principe d’immutabilité ?

Retourner un nouvel état et un nouveau tableau, en remplaçant l’objet de la tâche modifiée. Modifier directement state.tasks[index].done, puis retourner state. Modifier le tableau existant avec splice, puis retourner un nouvel objet contenant ce même tableau. Réinitialiser tout l’état, car une action ne peut pas cibler une tâche précise.

Comment tester une transition d’état sans navigateur ?

Créer un élément DOM, déclencher un clic, puis vérifier son texte. Appeler la fonction de transition avec un état et une action, puis comparer le résultat attendu au résultat obtenu. Ouvrir la page dans deux onglets et comparer manuellement les listes. Appeler localStorage pour confirmer que la fonction retourne le bon état.

Pour relier les clics sur les tâches à des actions applicatives, quel usage de la délégation d’événements convient ?

Ajouter un gestionnaire distinct à chaque élément, puis faire modifier directement l’état par chacun. Observer les changements du DOM et en déduire les actions qui ont été déclenchées. Écouter les événements sur un parent stable, identifier la tâche ciblée et convertir l’événement en action nommée. Enregistrer les événements dans localStorage, puis les rejouer au chargement.

Quelle méthode convient pour restaurer des tâches enregistrées dans localStorage tout en gérant un contenu illisible ?

Lire la valeur et l’utiliser directement comme tableau de tâches, car localStorage conserve les types JavaScript. Parser le contenu avec JSON.parse sans gestion d’erreur, car une valeur enregistrée est toujours valide. Ignorer toute valeur enregistrée et utiliser l’état initial à chaque chargement. Lire la valeur, traiter l’absence de données, entourer le parsing d’une gestion d’erreur et revenir à un état initial valide si nécessaire.

À quel moment un IntersectionObserver peut-il déclencher le calcul ou l’affichage différé de la progression ?

Lorsque le panneau observé entre dans la zone d’intersection configurée avec la fenêtre ou sa racine. Dès que le document est analysé, même si le panneau n’a pas été observé. Uniquement après un clic sur le panneau, car l’observateur écoute les interactions utilisateur. Quand le navigateur détecte une modification de localStorage.

L’appel à navigator.clipboard.writeText est refusé. Quel comportement l’application doit-elle prévoir ?

Considérer la copie comme réussie dès que la méthode a été appelée. Traiter le rejet de la promesse et informer l’utilisateur que la copie a échoué. Relancer immédiatement l’appel en boucle jusqu’à ce qu’il aboutisse. Supprimer le résumé, puisque l’échec indique que son contenu est invalide.

Pour remplacer le contenu d’une liste de tâches en limitant les modifications successives du DOM, quelle approche est adaptée ?

Vider la liste, puis insérer chaque tâche directement dans le DOM au fil de la boucle. Modifier le texte de chaque nœud après l’avoir ajouté séparément à la liste. Construire les nouveaux nœuds dans un DocumentFragment, puis insérer ce fragment en une opération groupée. Créer un fragment, puis l’ajouter après chaque tâche pour rendre chaque étape immédiatement visible.

Le module d’export du résumé ne doit être chargé qu’au premier clic sur le bouton d’export. Quelle solution correspond à cette exigence ?

Importer le module avec un import statique en haut du point d’entrée, puis masquer le bouton. Copier le code du module dans le gestionnaire de clic pour éviter tout import. Charger le module au démarrage avec fetch, puis différer uniquement l’appel à sa fonction. Appeler import() dans le gestionnaire du bouton, puis traiter le rejet éventuel du chargement.

Toutes les questions doivent être répondues.