Liste des exercices - Cours 122
Vue d'ensemble
| Module | Titre | Exercices | Objectif |
|---|---|---|---|
| 1 | Bases JavaScript | 7 | Stocker des données |
| 2 | Conditions | 4 | Prendre des décisions |
| 3 | Tableaux | 5 | Gérer des listes |
| 4 | Objets + fetch GET | 5 | Structurer et récupérer des données |
| 5 | Fonctions | 4 | Organiser ton code |
| 6 | DOM - Sélection | 5 | Manipuler la page |
| 7 | DOM - Événements | 4 | Réagir aux actions |
| 8 | Formulaires | 4 | Récupérer les saisies |
| 9 | Projet intégrateur | 8 | Créer une vraie app ! |
| Total | 46 |
→ Accéder à Nuxy pour faire les exercices
Module 1 : Bases JavaScript
Tu vas apprendre à : stocker et manipuler des données
| # | Exercice | Concept |
|---|---|---|
| 1.1 | Hello JavaScript ! | console.log(), commentaires |
| 1.2 | Variables avec let | let, réassignation |
| 1.3 | Constantes avec const | const, convention MAJUSCULES |
| 1.4 | Types de données | String, Number, Boolean, null, undefined |
| 1.5 | Opérations mathématiques | +, -, *, /, % |
| 1.6 | Concaténation de texte | + pour joindre des chaînes |
| 1.7 | Manipuler du texte | .length, .toUpperCase(), .trim(), .includes() |
Ressources : Variables • Types • Chaînes
Module 2 : Conditions
Tu vas apprendre à : prendre des décisions dans ton code
| # | Exercice | Concept |
|---|---|---|
| 2.1 | Ma première condition | if / else |
| 2.2 | Comparaisons | ==, ===, != |
| 2.3 | Opérateurs logiques | &&, ` |
| 2.4 | Conditions imbriquées | else if |
Ressources : Conditions
Module 3 : Tableaux
Tu vas apprendre à : gérer des listes de données
| # | Exercice | Concept |
|---|---|---|
| 3.1 | Créer un tableau | Déclaration, accès par index |
| 3.2 | Modifier un tableau | push, pop |
| 3.3 | Parcourir un tableau | for, forEach |
| 3.4 | Filtrer un tableau | filter() |
| 3.5 | Trier un tableau | sort() |
Ressources : Tableaux
Module 4 : Objets + fetch GET
Tu vas apprendre à : structurer tes données et les récupérer depuis une API
| # | Exercice | Concept |
|---|---|---|
| 4.1 | Mon premier objet | Création, accès aux propriétés |
| 4.2 | Modifier un objet | Ajout, modification |
| 4.3 | Tableau d'objets | Combiner tableaux et objets |
| 4.4 | Filtrer des objets | filter() sur objets |
| 4.5 | Récupérer des données | fetch() GET |
Ressources : Objets • API JSONPlaceholder
Module 5 : Fonctions
Tu vas apprendre à : organiser ton code en blocs réutilisables
| # | Exercice | Concept |
|---|---|---|
| 5.1 | Ma première fonction | Déclaration, appel |
| 5.2 | Paramètres | Passer des valeurs |
| 5.3 | Retourner une valeur | return |
| 5.4 | Fonctions fléchées | () => {} |
Ressources : Fonctions • Fonctions fléchées
Module 6 : DOM - Sélection
Tu vas apprendre à : manipuler les éléments de la page
| # | Exercice | Concept |
|---|---|---|
| 6.1 | Sélectionner un élément | querySelector |
| 6.2 | Modifier le contenu | textContent |
| 6.3 | Modifier les styles | style, classList |
| 6.4 | Sélectionner plusieurs éléments | querySelectorAll |
| 6.5 | Modifier les attributs | setAttribute, src, href |
Ressources : Accéder aux éléments • Modifier le contenu
Module 7 : DOM - Événements
Tu vas apprendre à : réagir aux actions de l'utilisateur
| # | Exercice | Concept |
|---|---|---|
| 7.1 | Premier événement click | addEventListener |
| 7.2 | L'objet event | event.target |
| 7.3 | Événement input | Saisie en temps réel |
| 7.4 | Compteur interactif | Combiner événements et DOM |
Ressources : Événements
Module 8 : Formulaires
Tu vas apprendre à : récupérer et valider les saisies utilisateur
| # | Exercice | Concept |
|---|---|---|
| 8.1 | Récupérer les valeurs | .value |
| 8.2 | Validation simple | Champs obligatoires |
| 8.3 | Validation de type | Vérifier le format |
| 8.4 | Messages d'erreur visuels | Afficher les erreurs |
Ressources : Formulaires • Validation
Module 9 : Projet intégrateur
Tu vas créer : une application "Gestionnaire de ressources" complète !
| # | Exercice | Fonctionnalité |
|---|---|---|
| 9.1 | Structure HTML et API | Charger depuis l'API |
| 9.2 | Afficher la liste | Génération dynamique |
| 9.3 | Filtrer par recherche | Recherche en temps réel |
| 9.4 | Trier la liste | Tri par critères |
| 9.5 | Formulaire d'ajout | Ajout avec validation |
| 9.6 | Supprimer une ressource | Bouton supprimer |
| 9.7 | Sauvegarder avec localStorage | Persistance locale |
| 9.8 | Finalisation | Styles et améliorations |
Ressources : localStorage • Créer des éléments
Progression visuelle
NIVEAU 1 - Fondamentaux (Modules 1-4)
══════════════════════════════════════
[■■■■] Variables → Tu sais stocker des données
[■■■■] Conditions → Tu sais prendre des décisions
[■■■■] Tableaux → Tu sais gérer des listes
[■■■■] Objets + API → Tu sais récupérer des données
NIVEAU 2 - Interaction (Modules 5-7)
══════════════════════════════════════
[■■■■] Fonctions → Tu sais organiser ton code
[■■■■] DOM Sélection → Tu sais manipuler la page
[■■■■] Événements → Tu sais réagir aux actions
NIVEAU 3 - Application (Modules 8-9)
══════════════════════════════════════
[■■■■] Formulaires → Tu sais récupérer les saisies
[■■■■] Projet → Tu sais créer une vraie app !Conseil
Faites les exercices dans l'ordre ! Chaque module s'appuie sur les précédents.