Exercice — Constructeur de profil utilisateur
Composez un mini-projet qui modélise, déstructure et affiche un profil utilisateur, en appliquant objets, classes, destructuration et les objets globaux du navigateur.
Objectif : créer un constructeur de profil qui prend des données
utilisateur, les modélise dans un objet/classe, les déstructure et les
affiche dans la page via document. Vous pratiquez objets, destructuration,
classes et les objets globaux window/document.
Le projet : un profil complet
Créez profil.html. Un objet utilisateur (nom, age, ville), une classe
Profil qui l'encapsule, et un affichage du profil dans #sortie en
utilisant la destructuration pour lire les champs.
Étapes pas à pas
1. Modéliser les données
Créez un objet utilisateur = { nom, age, ville }.
2. Encapsuler dans une classe
class Profil { constructor(user) { this.user = user } }.
3. Déstructurer pour l'affichage
const { nom, age, ville } = profil.user puis composez le texte.
4. Afficher via document
document.querySelector("#sortie").textContent = ....
Exercice : formater un étudiant (évaluation de la séance)
Cet exercice est l'évaluation de la séance 2 (JavaScript). Il vérifie que vous maîtrisez la destructuration avancée (valeur par défaut, rest), l'opérateur ternaire et les template literals — compétences réutilisées dans toutes les séances suivantes.
Exercice : formaterEtudiant
formaterEtudiant — Évaluation de la séance
Créer une fonction qui déstructure un objet étudiant avec valeur par défaut et rest, puis retourne une chaîne formatée avec un statut calculé.
- Déstructurer avec valeur par défaut (
note = 0) et rest (...autresInfos) - Utiliser un opérateur ternaire pour déterminer le statut
- Formater le résultat avec une template literal
Étape 1 — Déstructurez avec valeur par défaut et rest
Déstructurez nom, age, note (valeur par défaut 0) et récupérez le reste dans autresInfos.
Étape 2 — Calculez le statut
Utilisez un opérateur ternaire : note >= 10 ? "Admis" : "Échec".
Étape 3 — Retournez la chaîne formatée
Format : Nom: [nom], Age: [age], Statut: [statut], Note: [note]/20, Autres: [JSON.stringify(autresInfos)]
Indice — destructuration combinée
Combinez valeur par défaut et rest dans une seule destructuration : const { nom, age, note = 0, ...autresInfos } = etudiant.
Piège fréquent — JSON.stringify
Pour afficher autresInfos dans la chaîne, utilisez JSON.stringify(autresInfos). Sans cela, vous obtenez [object Object].
Code à valider
Le projet complet
const utilisateur = { nom: "Alice", age: 25, ville: "Paris" }
class Profil {
constructor(user) {
this.user = user
}
afficher() {
const { nom, age, ville } = this.user
return `Nom: ${nom}, Age: ${age}, Ville: ${ville}`
}
}
const profil = new Profil(utilisateur)
document.querySelector("#sortie").textContent = profil.afficher()Conseils
const { nom, age } = userextrait plusieurs propriétés en une ligne.- Une classe ne s'instancie qu'avec
new(ex.new Profil(...)). - Préférez
textContent(et noninnerHTML) pour afficher du texte.
⚠️ Pièges à éviter
Copie vs référence : const copie = user copie la référence, pas
l'objet. Modifier copie modifie aussi user. Pour une vraie copie :
{ ...user } ou structuredClone(user).
window/document absents en Node : ces objets globaux n'existent que
dans le navigateur. N'exécutez pas ce code côté serveur.
Propriété d'un objet const : const user = {...} n'empêche pas de
modifier user.nom. const verrouille la référence, pas le contenu.
Critères de réussite
- Objet
utilisateurmodélisé. - Classe
Profilavecconstructor. - Destructuration utilisée pour l'affichage.
- Rendu via
document.querySelector(...).textContent.
Validation des acquis
Quiz du chapitre
Pour aller plus loin
Relisez JavaScript avancé et Données asynchrones avant le quiz.
JavaScript avancé
Terminez le quiz du chapitre pour le marquer comme complété.
Atelier — Manipuler objets, destructuration et objets globaux
Mise en pratique assistée : créez un profil utilisateur, déstructurez-le et comparez les environnements navigateur (window/document) et Node.js (globalThis).
Synthèse — JavaScript avancé
Bilan des notions JavaScript réutilisées côté serveur : objets, destructuration et environnements.