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

Facile
  1. 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
  2. Utilisez `typeof` pour afficher le type de chaque variable

  3. Créez une variable `score` avec `let`, initialisée à 0, puis modifiez-la à 10, puis ajoutez 5

  4. Essayez de réassigner `name` - que se passe-t-il ?

Exercice 2 : Arrow Functions

Exercice : Convertir en arrow functions

Facile

Convertissez ces fonctions classiques en arrow functions :

javascript
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

Moyen

Avec ce tableau :

javascript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  1. Créez un nouveau tableau `evens` contenant seulement les nombres pairs
  2. Créez un tableau `squares` contenant le carré de chaque nombre
  3. Calculez la somme de tous les nombres (utilisez `.reduce()`)
  4. Trouvez le premier nombre supérieur à 5
  5. Vérifiez s'il y a au moins un nombre supérieur à 8
  6. 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

Moyen

Avec ce tableau d'étudiants :

javascript
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 }
];
  1. Extraire tous les noms dans un tableau
  2. Créer un tableau avec seulement les étudiants ayant une note ≥ 12
  3. Calculer la moyenne des notes
  4. Trouver l'étudiant avec l'ID 3
  5. 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

Moyen

Avec cet objet et ce tableau :

javascript
const user = {
name: 'Thomas',
age: 30,
city: 'Paris',
country: 'France'
};

const colors = ['red', 'green', 'blue', 'yellow'];
  1. Utilisez la destructuration pour extraire `name` et `age` de `user`
  2. Extrayez `name` en le renommant `userName` et `city` en `userCity`
  3. Extrayez les deux premiers éléments de `colors` dans `first` et `second`
  4. Extrayez le troisième élément de `colors` (ignorez les deux premiers)
  5. 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é

Moyen
  1. Fusionnez [1, 2, 3] et [4, 5, 6] avec le spread operator
  2. Copiez [1, 2, 3] et ajoutez 4 et 5 (sans modifier l'original)
  3. Copiez l'objet {'{ name: "Alice", age: 25 }'} et changez l'âge à 26
  4. Fusionnez {'{ name: "Bob", age: 30 }'} avec {'{ city: "Paris", country: "France" }'}
  5. 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

Facile

Utilisez les template literals (backticks `) pour :

  1. Créer un message : "Bonjour, je m'appelle [nom] et j'ai [age] ans."
  2. Calculer et afficher : "Total: [prix × quantité]€"
  3. Afficher "Résultat: Réussi" si score ≥ 10, sinon "Résultat: Échoué"
  4. 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

Difficile

Avec cette liste de tâches :

javascript
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' }
];
  1. Extraire tous les titres dans un tableau
  2. Filtrer les tâches non terminées (completed: false)
  3. Filtrer les tâches prioritaires (priority: 'high') ET non terminées
  4. Marquer la tâche avec id: 1 comme terminée sans modifier l'original (immutabilité)
  5. Ajouter une nouvelle tâche {'{ id: 5, title: "Faire du sport", completed: false, priority: "medium" }'} sans modifier l'original
  6. Compter le nombre de tâches terminées
  7. 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 !