Exercices - JavaScript Moderne
Mettez en pratique ce que vous avez appris ! Ces exercices couvrent tous les concepts essentiels de JavaScript moderne.
Comment travailler
- Essayez de résoudre chaque exercice sans regarder la solution
- Testez votre code dans la console du navigateur (F12)
- Comparez ensuite avec la solution proposée
- L'important est de comprendre, pas juste de copier !
Exercice 1 : Variables et types
Exercice : Types et variables
-
Créez les variables suivantes avec `const` :
- `name` : votre prénom (string)
- `age` : votre âge (number)
- `isStudent` : true (boolean)
- `courses` : un tableau avec 3 cours que vous suivez
-
Utilisez `typeof` pour afficher le type de chaque variable
-
Créez une variable `score` avec `let`, initialisée à 0, puis modifiez-la à 10, puis ajoutez 5
-
Essayez de réassigner `name` - que se passe-t-il ?
Exercice 2 : Arrow Functions
Exercice : Convertir en arrow functions
Convertissez ces fonctions classiques en arrow functions :
function greet(name) {
return `Bonjour ${name}!`;
}
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
function square(n) {
return n * n;
}Bonus : Utilisez le return implicite quand c'est possible !
Exercice 3 : Méthodes de tableaux
Exercice : Manipulation de tableaux
Avec ce tableau :
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];- Créez un nouveau tableau `evens` contenant seulement les nombres pairs
- Créez un tableau `squares` contenant le carré de chaque nombre
- Calculez la somme de tous les nombres (utilisez `.reduce()`)
- Trouvez le premier nombre supérieur à 5
- Vérifiez s'il y a au moins un nombre supérieur à 8
- Vérifiez si tous les nombres sont inférieurs à 20
Méthodes à utiliser : `.filter()`, `.map()`, `.reduce()`, `.find()`, `.some()`, `.every()`
💻 🎯 Testez les méthodes de tableaux
💡 Astuce : Modifiez le code ci-dessus et cliquez sur "Exécuter" pour voir le résultat
Exercice 4 : Objets et méthodes
Exercice : Manipulation d'objets
Avec ce tableau d'étudiants :
const students = [
{ id: 1, name: 'Alice', grade: 15 },
{ id: 2, name: 'Bob', grade: 12 },
{ id: 3, name: 'Charlie', grade: 18 },
{ id: 4, name: 'Diana', grade: 9 }
];- Extraire tous les noms dans un tableau
- Créer un tableau avec seulement les étudiants ayant une note ≥ 12
- Calculer la moyenne des notes
- Trouver l'étudiant avec l'ID 3
- Vérifier s'il y a au moins un étudiant avec une note inférieure à 10
Exercice 5 : Destructuration
Exercice : Destructuration d'objets et tableaux
Avec cet objet et ce tableau :
const user = {
name: 'Thomas',
age: 30,
city: 'Paris',
country: 'France'
};
const colors = ['red', 'green', 'blue', 'yellow'];- Utilisez la destructuration pour extraire `name` et `age` de `user`
- Extrayez `name` en le renommant `userName` et `city` en `userCity`
- Extrayez les deux premiers éléments de `colors` dans `first` et `second`
- Extrayez le troisième élément de `colors` (ignorez les deux premiers)
- Créez une fonction `displayUser` qui prend un objet et utilise la destructuration dans les paramètres pour afficher "Thomas a 30 ans"
Exercice 6 : Spread Operator
Exercice : Spread operator et immutabilité
- Fusionnez
[1, 2, 3]et[4, 5, 6]avec le spread operator - Copiez
[1, 2, 3]et ajoutez 4 et 5 (sans modifier l'original) - Copiez l'objet
{'{ name: "Alice", age: 25 }'}et changez l'âge à 26 - Fusionnez
{'{ name: "Bob", age: 30 }'}avec{'{ city: "Paris", country: "France" }'} - Ajoutez une propriété
discount: 10à{'{ name: "Laptop", price: 1000 }'}
Attention
Important : Vérifiez que les originaux ne sont pas modifiés !
Exercice 7 : Template Literals
Exercice : Template literals et interpolation
Utilisez les template literals (backticks `) pour :
- Créer un message : "Bonjour, je m'appelle [nom] et j'ai [age] ans."
- Calculer et afficher : "Total: [prix × quantité]€"
- Afficher "Résultat: Réussi" si score ≥ 10, sinon "Résultat: Échoué"
- Créer un email multi-lignes avec interpolation
Astuce : Utilisez ${expression} pour l'interpolation
Exercice 8 : Combinaison de concepts
Exercice : Projet : Gestion d'une liste de tâches
Avec cette liste de tâches :
const tasks = [
{ id: 1, title: 'Apprendre React', completed: false, priority: 'high' },
{ id: 2, title: 'Faire les courses', completed: true, priority: 'low' },
{ id: 3, title: 'Réviser JavaScript', completed: false, priority: 'high' },
{ id: 4, title: 'Appeler maman', completed: false, priority: 'medium' }
];- Extraire tous les titres dans un tableau
- Filtrer les tâches non terminées (
completed: false) - Filtrer les tâches prioritaires (
priority: 'high') ET non terminées - Marquer la tâche avec
id: 1comme terminée sans modifier l'original (immutabilité) - Ajouter une nouvelle tâche
{'{ id: 5, title: "Faire du sport", completed: false, priority: "medium" }'}sans modifier l'original - Compter le nombre de tâches terminées
- Créer un message avec template literal : "Vous avez X tâches, dont Y terminée(s)."
Astuce
Cet exercice combine : `.map()`, `.filter()`, spread operator, et template literals !
💻 🎯 Projet : Gestion de tâches interactive
💡 Astuce : Modifiez le code ci-dessus et cliquez sur "Exécuter" pour voir le résultat
TP à rendre
Travail à rendre sur Moodle
Date limite : Fin de la séance
Créez un fichier `seance1.js` contenant vos solutions aux exercices 3, 4, 5 et 8.
Testez votre code dans la console du navigateur avant de soumettre !