Énoncés des TPs - Map, Filter, Reduce et Événements Focus/Blur

TP 1 : Map - Transformer les Données

Vous devez utiliser map() pour transformer des tableaux.

Exercice 1.1 : Doubler les nombres

Créez un tableau nombres = [1, 2, 3, 4, 5]
Utilisez map() pour doubler chaque nombre
Affichez le résultat

Exercice 1.2 : Convertir des chaînes en nombres

Créez un tableau textes = ['10', '20', '30', '40']
Utilisez map() avec parseInt() pour convertir en nombres
Affichez le résultat

Exercice 1.3 : Ajouter un index

Créez un tableau fruits = ['pomme', 'banane', 'cerise']
Utilisez map() pour créer des phrases : “1. pomme”, “2. banane”, etc.
Affichez le résultat

Exercice 1.4 : Transformer des objets

Créez un tableau d’utilisateurs avec nom et age
Utilisez map() pour extraire seulement les noms
Utilisez map() pour créer des phrases : “Eva a 25 ans”

Exercice 1.5 : Élever au carré

Créez un tableau de nombres
Utilisez map() pour élever chaque nombre au carré
Affichez le résultat

Exercice 1.6 : Vérifier l’immutabilité

Créez un tableau original
Utilisez map() pour le transformer
Vérifiez que le tableau original n’a pas changé

TP 2 : Filter - Sélectionner les Données

Vous devez utiliser filter() pour sélectionner des éléments.

Exercice 2.1 : Filtrer les nombres pairs

Créez un tableau nombres = [1, 2, 3, 4, 5, 6, 7, 8]
Utilisez filter() pour garder seulement les nombres pairs
Affichez le résultat

Exercice 2.2 : Filtrer les nombres supérieurs à une valeur

Créez un tableau de nombres
Utilisez filter() pour garder seulement les nombres > 10
Affichez le résultat

Exercice 2.3 : Filtrer les utilisateurs par âge

Créez un tableau d’utilisateurs avec nom et age
Utilisez filter() pour garder seulement les majeurs (age >= 18)
Affichez le résultat

Exercice 2.4 : Filtrer les chaînes non vides

Créez un tableau textes = ['hello', '', 'world', '', 'javascript']
Utilisez filter() pour garder seulement les chaînes non vides
Affichez le résultat

Exercice 2.5 : Filtrer les produits par prix

Créez un tableau de produits avec nom et prix
Utilisez filter() pour garder seulement les produits < 100€
Affichez le résultat

Exercice 2.6 : Vérifier l’immutabilité

Créez un tableau original
Utilisez filter() pour le filtrer
Vérifiez que le tableau original n’a pas changé

TP 3 : Reduce - Agréger les Données

Vous devez utiliser reduce() pour combiner des éléments.

Exercice 3.1 : Calculer la somme

Créez un tableau nombres = [1, 2, 3, 4, 5]
Utilisez reduce() pour calculer la somme
Affichez le résultat

Exercice 3.2 : Calculer le produit

Créez un tableau de nombres
Utilisez reduce() pour calculer le produit (multiplication)
Affichez le résultat

Exercice 3.3 : Compter les occurrences

Créez un tableau fruits = ['pomme', 'banane', 'pomme', 'orange', 'banane', 'pomme']
Utilisez reduce() pour compter combien de fois chaque fruit apparaît
Affichez un objet : { pomme: 3, banane: 2, orange: 1 }

Exercice 3.4 : Trouver le maximum

Créez un tableau de nombres
Utilisez reduce() pour trouver le nombre maximum
Affichez le résultat

Exercice 3.5 : Grouper par propriété

Créez un tableau d’utilisateurs avec nom et ville
Utilisez reduce() pour grouper les utilisateurs par ville
Affichez un objet : { Lyon: ['Eva', 'Diane'], Paris: ['Owen', 'Alice'] }

Exercice 3.6 : Aplatir un tableau

Créez un tableau de tableaux : [[1, 2], [3, 4], [5, 6]]
Utilisez reduce() pour aplatir en un seul tableau
Affichez le résultat : [1, 2, 3, 4, 5, 6]

TP 4 : Combinaisons - Map + Filter

Vous devez combiner map() et filter().

Exercice 4.1 : Filtrer puis transformer

Créez un tableau d’utilisateurs
Utilisez filter() pour garder seulement les majeurs
Utilisez map() pour extraire seulement les noms
Affichez le résultat

Exercice 4.2 : Transformer puis filtrer

Créez un tableau de nombres
Utilisez map() pour doubler chaque nombre
Utilisez filter() pour garder seulement les nombres > 5
Affichez le résultat

Exercice 4.3 : Chaîner les opérations

Créez un tableau de produits
Filtrez les produits en stock (stock > 0)
Transformez en prix avec remise (prix * 0.9)
Affichez le résultat

TP 5 : Combinaisons - Filter + Reduce

Vous devez combiner filter() et reduce().

Exercice 5.1 : Calculer le total des produits chers

Créez un tableau de produits avec nom et prix
Utilisez filter() pour garder seulement les produits > 100€
Utilisez reduce() pour calculer le total
Affichez le résultat

Exercice 5.2 : Somme des notes valides

Créez un tableau de notes
Utilisez filter() pour garder seulement les notes >= 10
Utilisez reduce() pour calculer la somme
Affichez le résultat

Exercice 5.3 : Compter les éléments filtrés

Créez un tableau de nombres
Utilisez filter() pour garder seulement les nombres pairs
Utilisez reduce() pour compter combien il y en a
Affichez le résultat

TP 6 : Combinaisons - Map + Filter + Reduce

Vous devez combiner les trois méthodes.

Exercice 6.1 : Total des commandes complexes

Créez un tableau de commandes avec articles
Filtrez les commandes avec plus de 1 article
Transformez en prix total par commande
Calculez le grand total
Affichez le résultat

Exercice 6.2 : Moyenne des notes par matière

Créez un tableau de notes avec matiere et valeur
Groupez par matière avec reduce()
Calculez la moyenne par matière avec map()
Affichez le résultat

TP 7 : ForEach - Boucler sur les Éléments

Vous devez utiliser forEach() pour exécuter une action.

Exercice 7.1 : Afficher chaque élément

Créez un tableau de nombres
Utilisez forEach() pour afficher chaque nombre dans la console
Affichez aussi l’index

Exercice 7.2 : Ajouter des écouteurs à plusieurs éléments

Créez 5 <div> avec la classe box
Utilisez forEach() pour ajouter un écouteur click à chaque box
Changez la couleur de fond au clic

Exercice 7.3 : Modifier le style de plusieurs éléments

Créez 5 paragraphes
Utilisez forEach() pour ajouter une classe pair ou impair selon l’index
Affichez les résultats

Exercice 7.4 : Créer du HTML dynamique

Créez un tableau d’utilisateurs
Utilisez forEach() pour créer une <div> pour chaque utilisateur
Affichez le nom et l’âge
Ajoutez les divs au DOM

TP 8 : Événement Focus

Vous devez écouter l’événement focus.

Exercice 8.1 : Changer la couleur au focus

Créez un <input> texte
Ajoutez un écouteur focus
Changez la couleur de fond en jaune
Testez en cliquant sur l’input

Exercice 8.2 : Ajouter une classe au focus

Créez un <input> texte
Ajoutez un écouteur focus
Ajoutez la classe active à l’input
Testez en cliquant sur l’input

Exercice 8.3 : Afficher un message d’aide

Créez un <input> de mot de passe
Créez un <p> caché avec un message d’aide
Au focus, affichez le message
Testez en cliquant sur l’input

Exercice 8.4 : Charger des données au focus

Créez un <input> texte
Au focus, chargez les données sauvegardées depuis localStorage
Affichez-les dans l’input
Testez

TP 9 : Événement Blur

Vous devez écouter l’événement blur.

Exercice 9.1 : Valider un email au blur

Créez un <input> email
Au blur, vérifiez que l’email contient “@”
Si invalide, changez la bordure en rouge
Si valide, changez la bordure en vert
Testez

Exercice 9.2 : Sauvegarder au blur

Créez un <textarea>
Au blur, sauvegardez le contenu dans localStorage
Affichez un message “Sauvegardé”
Testez

Exercice 9.3 : Masquer le message d’aide au blur

Créez un <input> texte
Créez un <p> avec un message d’aide
Au focus, affichez le message
Au blur, masquez le message
Testez

Exercice 9.4 : Valider la longueur au blur

Créez un <input> texte avec maxlength="100"
Au blur, vérifiez que la longueur est >= 10
Si trop court, affichez une erreur
Si OK, affichez un message de succès
Testez

TP 10 : Focus + Blur Combinés

Vous devez utiliser focus et blur ensemble.

Exercice 10.1 : Compteur de caractères

Créez un <input> texte avec maxlength="100"
Créez un <p> pour afficher le compteur
Au focus, affichez le compteur
À chaque input, mettez à jour le compteur
Au blur, masquez le compteur
Testez

Exercice 10.2 : Formulaire avec validation

Créez un formulaire avec 3 champs : nom, email, téléphone
Au focus, affichez un message d’aide pour chaque champ
Au blur, validez le champ
Affichez une erreur si invalide
Testez

Exercice 10.3 : Changer le style au focus/blur

Créez 3 <input> textes
Au focus, ajoutez une bordure bleue et une ombre
Au blur, retirez la bordure et l’ombre
Testez

Exercice 10.4 : Brouillon auto-sauvegardé

Créez un <textarea>
À chaque input, sauvegardez dans localStorage
Au focus, chargez le brouillon
Au blur, sauvegardez le brouillon
Testez en rechargeant la page

TP 11 : Projet - Calculatrice de Panier

Créez une calculatrice de panier avec map, filter et reduce.

Fonctionnalités requises :

Tableau de produits :
- Chaque produit a : nom, prix, quantite
Utiliser map :
- Calculer le total pour chaque produit (prix × quantité)
Utiliser filter :
- Filtrer les produits avec quantité > 0
- Filtrer les produits chers (> 100€)
Utiliser reduce :
- Calculer le total du panier
- Calculer le nombre total d’articles
Afficher :
- Liste des produits avec total
- Total du panier
- Nombre d’articles

Bonus :

Ajouter une remise si le total > 500€
Ajouter les frais de port
Afficher le détail des calculs

TP 12 : Projet - Formulaire Interactif

Créez un formulaire avec focus/blur et validation.