📚 Formation Complète en JavaScript – De Débutant

à Expert
(Avec mise en place de l’environnement, exercices et corrigés pour chaque module)

🟢 MODULE 1 : Introduction à JavaScript et Mise en Place de

l’Environnement

• Historique, utilité et applications de JavaScript

• Installation des outils : VS Code, [Link], Navigateur, NPM
• Premiers scripts : intégration dans une page HTML, exécution avec [Link]
• Découverte de la console et des outils de développement
• Exercices & Corrigés

🟢 MODULE 2 : Les Fondamentaux du Langage

• Déclaration des variables (var, let, const)

• Types de données (string, number, boolean, null, undefined, symbol,
bigint)
• Conversion et coercition des types
• Opérateurs arithmétiques, logiques et de comparaison
• Exercices & Corrigés

🟢 MODULE 3 : Structures de Contrôle et Boucles

• Instructions conditionnelles (if, else, switch)

• Boucles (for, while, do...while)
• Opérateur ternaire
• Gestion des erreurs (try...catch...finally, throw)
• Exercices & Corrigés
🟢 MODULE 4 : Fonctions en JavaScript

• Fonctions déclaratives et expressions de fonctions

• Fonctions fléchées (=>)
• Paramètres, valeurs par défaut et rest parameters
• Scope des variables et closures
• Exercices & Corrigés

🟢 MODULE 5 : Manipulation des Tableaux et Objets

• Création et manipulation de tableaux (push, pop, map, filter, reduce)

• Objets et notation (. vs [])
• Déstructuration d’objets et tableaux
• Boucles sur objets et tableaux (for...in, for...of)
• Exercices & Corrigés

🟢 MODULE 6 : Programmation Orientée Objet (POO) en

JavaScript

• Classes et instances
• Constructeurs et méthodes
• Héritage (extends, super)
• Prototypes et this
• Exercices & Corrigés

🟢 MODULE 7 : Manipulation du DOM

• Sélection d’éléments (getElementById, querySelector)

• Modification du contenu et des styles (innerText, innerHTML, style)
• Gestion des événements (click, mouseover, keydown)
• Création et suppression dynamique d’éléments
• Exercices & Corrigés
🟢 MODULE 8 : JavaScript Asynchrone (Async/Await & Promises)

• Les concepts de synchrone et asynchrone

• Callbacks et gestion des erreurs
• Utilisation des Promises (resolve, reject, then, catch)
• async et await pour une meilleure gestion de l’asynchronicité
• Exercices & Corrigés

🟢 MODULE 9 : Manipulation des API et AJAX

• Introduction aux API REST et format JSON

• Requêtes AJAX avec fetch et XMLHttpRequest
• Consommation d’API avec axios
• Exercice : Création d’une application consommant une API publique
• Exercices & Corrigés

🟢 MODULE 10 : Stockage Local et Gestion des Données

• LocalStorage et SessionStorage
• Manipulation des Cookies
• IndexedDB et Web SQL
• Exercices & Corrigés

🟢 MODULE 11 : Introduction aux Frameworks Frontend (React,

Vue, Angular)

• Présentation des principaux frameworks

• Introduction à [Link] : JSX, composants et état
• Exercice : Création d’un projet simple avec [Link]
• Exercices & Corrigés
🟢 MODULE 12 : Introduction à [Link] et [Link]

• Installation et configuration de [Link]

• Création d’un serveur avec Express
• Gestion des routes et middleware
• Exercices & Corrigés

🟢 MODULE 13 : Bases de Données avec JavaScript (MongoDB &

MySQL)

• Introduction aux bases SQL et NoSQL

• Connexion à une base de données avec [Link]
• CRUD avec MongoDB et Mongoose
• Exercices & Corrigés

🟢 MODULE 14 : WebSockets et Temps Réel

• Introduction aux WebSockets

• Implémentation avec [Link]
• Exercice : Création d’un chat en temps réel
• Exercices & Corrigés

🟢 MODULE 15 : Tests et Debugging en JavaScript

• Debugging avec les DevTools

• Introduction aux tests unitaires (Jest, Mocha)
• Exercice : Test d’une application
• Exercices & Corrigés
🟢 MODULE 16 : Sécurité en JavaScript

• Protection contre les failles XSS et CSRF

• Sécurisation des entrées utilisateur
• Utilisation de JWT pour l’authentification
• Exercices & Corrigés

🟢 MODULE 17 : Optimisation des Performances

• Minification et compression du code

• Lazy loading et code splitting
• Optimisation des requêtes API
• Exercices & Corrigés

🟢 MODULE 18 : WebAssembly et JavaScript Moderne

• Introduction à WebAssembly
• ES6+ et nouvelles fonctionnalités de JavaScript
• Exercices & Corrigés

🟢 MODULE 19 : Déploiement et CI/CD

• Hébergement d’un projet JavaScript (Vercel, Netlify, Heroku)

• Introduction à Docker et Kubernetes
• CI/CD avec GitHub Actions
• Exercices & Corrigés

🟢 MODULE 20 : Projet Final – Création d’une Application

Complète

• Définition du projet
 • Développement frontend et backend
• Intégration d’une base de données
• Déploiement et mise en production
• Projet & Corrigés détaillés

💡 Conclusion et Certification

• Récapitulatif de la formation
• Conseils pour devenir un développeur JavaScript expert
• Certification de fin de formation

Ce programme couvre TOUT ce qu’il faut pour maîtriser JavaScript de A à Z !

Tu pourras non seulement apprendre JavaScript en profondeur, mais aussi développer
des projets concrets et te préparer à une carrière de développeur fullstack
JavaScript.

Formation Complète en JavaScript

Module 1 : Introduction à JavaScript et Mise en Place de l'Environnement

1. Introduction à JavaScript

JavaScript est l'un des langages de programmation les plus populaires au monde. Il
permet de créer des sites interactifs, de développer des applications web et mobiles, et
même de coder des applications côté serveur avec [Link].

Pourquoi apprendre JavaScript ?

• C'est un langage essentiel pour le développement web.

• Il permet de créer des applications dynamiques et interactives.
• Il est compatible avec tous les navigateurs modernes.
• Il est utilisé aussi bien en frontend (interface utilisateur) qu'en backend (serveur)
avec [Link].
2. Installation et Configuration de l'Environnement

2.1. Installer un Editeur de Code

L'outil recommandé pour coder en JavaScript est Visual Studio Code (VS Code).

• Installation de VS Code :
o Rendez-vous sur [Link]
o Téléchargez et installez VS Code selon votre système d'exploitation.

2.2. Installer [Link] et npm

[Link] est un environnement qui permet d'exécuter du JavaScript côté serveur et

inclut npm (Node Package Manager) pour gérer les bibliothèques JavaScript.

• Installation de [Link] :
o Rendez-vous sur [Link]
o Téléchargez la version recommandée.
o Installez [Link].
• Vérifier l'installation : Ouvrez un terminal et tapez :

node -v # Affiche la version de [Link]

npm -v # Affiche la version de npm

2.3. Configuration de l'Environnement dans VS Code

• Ouvrez VS Code.
• Installez l'extension ESLint pour aider à détecter les erreurs de syntaxe.
• Installez l'extension Live Server pour tester vos fichiers HTML+JS en direct.

3. Premier Script en JavaScript

3.1. Exécuter du JavaScript dans une Page HTML
Créons un fichier [Link] et insérons un script JavaScript :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Premier Script JS</title>
</head>
<body>
<h1>Bonjour, JavaScript !</h1>
<script>
alert("Bienvenue dans le monde de JavaScript !");
</script>
</body>
</html>

3.2. Exécuter du JavaScript avec [Link]

Créez un fichier [Link] :

[Link]("Bonjour, JavaScript depuis [Link] !");

Dans le terminal, exécutez :

node [Link]

Vous verrez le message s'afficher dans la console.

Module 2 : Les Bases de JavaScript

1. Variables et Types de Données

JavaScript propose plusieurs types de données :

• string (chaîne de caractères)

• number (nombres)
• boolean (true ou false)
• null (valeur vide)
• undefined (valeur non définie)
Exemple :
let nom = "Alice";
const age = 25;
var estEtudiant = true;
[Link](nom, age, estEtudiant);

2. Différences entre var, let et const

• var : Déclaration ancienne, portée fonctionnelle.
• let : Recommandé, portée bloc.
 • const : Valeur constante, ne peut être réassignée.
Exemple :
let x = 10;
const y = 20;
x = 15; // OK
// y = 25; // Erreur : y est une constante

3. Opérateurs et Expressions
• Opérateurs arithmétiques (+, -, *, /, %)
• Opérateurs de comparaison (==, ===, !=, <, >, <=, >=)
• Opérateurs logiques (&&, ||, !)
Exemple :
let a = 10;
let b = 5;
[Link](a + b); // 15
[Link](a > b); // true
[Link](a === "10"); // false

4. Structures Conditionnelles
• if, else if, else
• switch
Exemple :
let heure = 14;
if (heure < 12) {
[Link]("Bonjour");
} else if (heure < 18) {
[Link]("Bon après-midi");
} else {
[Link]("Bonsoir");
}

5. Boucles en JavaScript
• for
• while
• do...while
Exemple :
for (let i = 0; i < 5; i++) {
[Link]("Itération :", i);
}

💡 Exercices & Corrigés

Exercice 1 : Afficher un message selon l'âge
Demandez l'âge d'un utilisateur et affichez un message selon son âge.

Correction :

let age = prompt("Entrez votre âge :");

if (age >= 18) {
[Link]("Vous êtes majeur.");
} else {
[Link]("Vous êtes mineur.");
}

Exercice 2 : Somme des nombres de 1 à N

Écrivez un programme qui demande un nombre N et affiche la somme des nombres de
1 à N.

Correction :

let N = prompt("Entrez un nombre :");

let somme = 0;
for (let i = 1; i <= N; i++) {
somme += i;
}
[Link]("Somme :", somme);

Fin du Module 2 ! Prochain module : Les Fonctions en JavaScript.

Module 3 : Les Fonctions en JavaScript

1. Définition et Utilisation des Fonctions

Une fonction en JavaScript est un bloc de code réutilisable, qui peut être exécuté
plusieurs fois en fonction des besoins. Elle permet de diviser un programme en petites
unités, facilitant ainsi sa gestion et sa lisibilité.

Syntaxe d'une fonction :

js
CopierModifier
function nomDeLaFonction() {
// Corps de la fonction
}

Exemple :

js
CopierModifier
function direBonjour() {
[Link]("Bonjour !");
}

Appel de la fonction :

js
CopierModifier
direBonjour(); // Affiche "Bonjour !" dans la console

Les fonctions permettent de mieux organiser le code en effectuant des tâches

spécifiques.

2. Paramètres et Valeurs de Retour

Les fonctions peuvent accepter des paramètres (ou arguments) et renvoyer des
valeurs avec le mot-clé return.

Syntaxe d'une fonction avec paramètres :

js
CopierModifier
function addition(a, b) {
return a + b;
}

Exemple :

js
CopierModifier
let resultat = addition(5, 3);
[Link](resultat); // Affiche 8

Ici, a et b sont des paramètres qui sont utilisés dans le corps de la fonction pour
effectuer l'addition.

Remarque : Une fonction peut aussi ne pas retourner de valeur, ce qui la rend "void"
(sans retour).

3. Fonctions Anonymes et Fléchées

Fonction anonyme

Une fonction anonyme est une fonction qui n'a pas de nom. Elle est généralement
assignée à une variable.

Exemple :

js
CopierModifier
const multiplier = function(x, y) {
return x * y;
};

[Link](multiplier(4, 2)); // Affiche 8

Fonctions fléchées

Les fonctions fléchées (arrow functions) sont une manière plus concise d'écrire des
fonctions, surtout lorsqu'elles sont petites.

Syntaxe d'une fonction fléchée :

js
CopierModifier
const soustraire = (a, b) => a - b;

Exemple :
js
CopierModifier
const multiplier = (x, y) => x * y;
[Link](multiplier(4, 2)); // Affiche 8

4. Exercices et Corrigés

Exercice 1 : Créer une fonction qui calcule l'aire d'un rectangle

Écris une fonction aireRectangle qui prend la longueur et la largeur d'un rectangle et
retourne son aire.

Correction :

js
CopierModifier
function aireRectangle(longueur, largeur) {
return longueur * largeur;
}
[Link](aireRectangle(5, 3)); // Affiche 15

Exercice 2 : Créer une fonction qui vérifie si un nombre est pair ou impair

Écris une fonction estPair qui prend un nombre en paramètre et renvoie "Pair" si le
nombre est pair et "Impair" sinon.

Correction :

js
CopierModifier
function estPair(nombre) {
return nombre % 2 === 0 ? "Pair" : "Impair";
}
[Link](estPair(7)); // Affiche "Impair"
Module 4 : Les Tableaux et les Objets en JavaScript

1. Les Tableaux en JavaScript

Un tableau est une collection ordonnée d'éléments. Chaque élément peut être de
n'importe quel type de donnée (string, number, object, etc.). Les tableaux en JavaScript
sont indexés par des entiers, et les indices commencent à 0.

Syntaxe de création d'un tableau :

js
CopierModifier
let fruits = ["pomme", "banane", "orange"];

Accéder à un élément d'un tableau :

js
CopierModifier
let premierFruit = fruits[0]; // "pomme"
[Link](premierFruit);

Ajouter un élément à un tableau :

• Méthode push() : Ajoute un élément à la fin du tableau.

js
CopierModifier
[Link]("mangue");
[Link](fruits); // ["pomme", "banane", "orange", "mangue"]

• Méthode unshift() : Ajoute un élément au début du tableau.

js
CopierModifier
[Link]("fraise");
[Link](fruits); // ["fraise", "pomme", "banane", "orange",
"mangue"]
Supprimer un élément d'un tableau :

• Méthode pop() : Supprime le dernier élément du tableau.

js
CopierModifier
[Link]();
[Link](fruits); // ["fraise", "pomme", "banane", "orange"]

• Méthode shift() : Supprime le premier élément du tableau.

js
CopierModifier
[Link]();
[Link](fruits); // ["pomme", "banane", "orange"]

2. Les Objets en JavaScript

Un objet est une collection de paires clé-valeur. Les objets sont utilisés pour regrouper
des informations sous une même entité.

Syntaxe de création d'un objet :

js
CopierModifier
let personne = {
nom: "Alice",
age: 25,
ville: "Paris"
};

Accéder aux valeurs d'un objet :

js
CopierModifier
let nomPersonne = [Link]; // "Alice"
let agePersonne = personne["age"]; // 25
[Link](nomPersonne, agePersonne);
Ajouter ou modifier des propriétés dans un objet :

js
CopierModifier
[Link] = "alice@[Link]"; // Ajouter une nouvelle
propriété
[Link] = 26; // Modifier une propriété existante
[Link](personne);

Supprimer une propriété d'un objet :

js
CopierModifier
delete [Link];
[Link](personne); // { nom: "Alice", age: 26, email:
"alice@[Link]" }

3. Méthodes de Manipulation des Tableaux et Objets

Méthodes de tableaux :

• forEach() : Exécute une fonction sur chaque élément du tableau.

js
CopierModifier
[Link](function(fruit) {
[Link](fruit);
});

• map() : Crée un nouveau tableau avec les résultats de l'appel d'une fonction
pour chaque élément.

js
CopierModifier
let fruitsMajuscule = [Link](function(fruit) {
return [Link]();
});
[Link](fruitsMajuscule); // ["POMME", "BANANE", "ORANGE"]
 • filter() : Crée un tableau avec les éléments qui satisfont à une condition.

js
CopierModifier
let fruitsLongs = [Link](function(fruit) {
return [Link] > 5;
});
[Link](fruitsLongs); // ["banane", "orange"]

Méthodes des objets :

• [Link]() : Retourne un tableau avec les clés d'un objet.

js
CopierModifier
let clefs = [Link](personne);
[Link](clefs); // ["nom", "age", "email"]

• [Link]() : Retourne un tableau avec les valeurs d'un objet.

js
CopierModifier
let valeurs = [Link](personne);
[Link](valeurs); // ["Alice", 26, "alice@[Link]"]

4. Exercices et Corrigés

Exercice 1 : Manipuler un tableau

Crée un tableau contenant les nombres de 1 à 10. Utilise la méthode forEach pour
afficher chaque nombre multiplié par 2.

Correction :

js
CopierModifier
let nombres = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
[Link](function(nombre) {
[Link](nombre * 2);
});

Exercice 2 : Ajouter et supprimer des éléments dans un tableau

Crée un tableau avec les fruits "pomme", "banane", et "orange". Ajoute un fruit au
début du tableau et supprime un fruit à la fin.

Correction :

js
CopierModifier
let fruits = ["pomme", "banane", "orange"];
[Link]("fraise"); // Ajouter au début
[Link](); // Supprimer à la fin
[Link](fruits); // ["fraise", "pomme", "banane"]

Exercice 3 : Travailler avec un objet

Crée un objet voiture avec les propriétés marque, modèle et année. Ajoute une
propriété couleur et supprime la propriété modèle.

Correction :

js
CopierModifier
let voiture = {
marque: "Toyota",
modèle: "Corolla",
année: 2020
};
[Link] = "bleu"; // Ajouter une propriété
delete [Link]èle; // Supprimer une propriété
[Link](voiture); // { marque: "Toyota", année: 2020, couleur:
"bleu" }

Cela conclut le Module 4 : Les Tableaux et les Objets en JavaScript.

Module 5 : Les Fonctions Asynchrones et les Promesses en JavaScript

1. Introduction à l'Asynchrone

JavaScript est un langage à exécution synchrone, ce qui signifie que les instructions
sont exécutées l'une après l'autre. Cependant, dans certains cas, comme les requêtes
réseau, les opérations de lecture de fichiers ou les timers, il est nécessaire de travailler
de manière asynchrone pour éviter de bloquer le reste du programme.

L'asynchronisme permet d'exécuter des tâches de manière non bloquante, ce qui

améliore les performances de l'application, notamment pour les interactions avec des
API ou le traitement de grandes quantités de données.

2. Les Promesses (Promises)

Une promesse (Promise) est un objet qui représente la valeur d'un résultat futur, qui
peut être soit un succès, soit un échec. Elle permet de gérer des opérations
asynchrones de manière plus lisible et de faciliter la gestion des erreurs.

Syntaxe d'une promesse :

js
CopierModifier
let promesse = new Promise(function(resolve, reject) {
// Code asynchrone
let success = true;

if (success) {
resolve("Opération réussie");
} else {
reject("Erreur dans l'opération");
}
});

Consommer une promesse :

• Méthode then() : Exécutée si la promesse est résolue (succès).

• Méthode catch() : Exécutée si la promesse est rejetée (erreur).

js
CopierModifier
promesse
.then(function(resultat) {
[Link](resultat); // "Opération réussie"
})
.catch(function(erreur) {
[Link](erreur); // "Erreur dans l'opération"
});

3. Fonctions Asynchrones avec async et await

Les mots-clés async et await permettent d'écrire du code asynchrone de manière

plus simple et lisible, en évitant les chaînes de then() et catch().

Syntaxe de base :

• async : Indique qu'une fonction est asynchrone et retournera toujours une

promesse.
• await : Utilisé dans une fonction async pour attendre la résolution d'une
promesse.

Exemple avec async et await :

js
CopierModifier
async function fetchData() {
let promesse = new Promise((resolve, reject) => {
setTimeout(() => resolve("Données récupérées"), 2000);
});

let result = await promesse; // Attend que la promesse soit

résolue
[Link](result); // "Données récupérées"
}

fetchData();

Dans cet exemple, la fonction fetchData attend que la promesse soit résolue avant de
continuer l'exécution.
4. Exercices et Corrigés

Exercice 1 : Créer une promesse avec un délai

Crée une promesse qui se résout après 3 secondes avec le message "Opération
terminée". Utilise then() pour afficher ce message une fois la promesse résolue.

Correction :

js
CopierModifier
let promesse = new Promise(function(resolve) {
setTimeout(() => resolve("Opération terminée"), 3000);
});

[Link](function(resultat) {
[Link](resultat); // "Opération terminée"
});

Exercice 2 : Utiliser async et await avec une promesse

Crée une fonction fetchDataAsync qui attend une promesse (comme dans l'exemple
précédent) et affiche le résultat à l'aide de await.

Correction :

js
CopierModifier
async function fetchDataAsync() {
let promesse = new Promise((resolve) => {
setTimeout(() => resolve("Données récupérées"), 2000);
});

let result = await promesse; // Attendre la résolution de la

promesse
[Link](result); // "Données récupérées"
}

fetchDataAsync();
Exercice 3 : Gérer les erreurs avec catch()

Crée une promesse qui se rejette avec un message d'erreur, puis utilise catch() pour
afficher cette erreur.

Correction :

js
CopierModifier
let promesse = new Promise(function(resolve, reject) {
let success = false;

if (success) {
resolve("Succès");
} else {
reject("Erreur");
}
});

promesse
.then(function(resultat) {
[Link](resultat); // "Succès"
})
.catch(function(erreur) {
[Link](erreur); // "Erreur"
});

5. Conclusion

Les promesses et les fonctions asynchrones (avec async et await) sont des outils
puissants pour gérer des opérations asynchrones de manière plus lisible et efficace. Ils
sont essentiels pour travailler avec des API, des bases de données, ou des opérations
longues sans bloquer l'exécution de l'application.
Module 6 : Manipulation du DOM (Document Object Model) en JavaScript

1. Introduction au DOM

Le DOM (Document Object Model) est une interface de programmation qui permet
d'interagir avec le contenu HTML et XML d'une page web. Il représente la structure du
document sous forme d'un arbre, où chaque élément HTML est un nœud.

JavaScript permet de manipuler le DOM pour modifier dynamiquement le contenu

d'une page web, ajouter des événements, et changer la structure des éléments HTML.

2. Sélectionner des éléments du DOM

En JavaScript, on utilise plusieurs méthodes pour sélectionner des éléments HTML à

manipuler.

Méthodes de sélection :

• getElementById() : Sélectionne un élément par son identifiant.

js
CopierModifier
let element = [Link]('monId');

• getElementsByClassName() : Sélectionne tous les éléments ayant une classe

donnée.

js
CopierModifier
let elements = [Link]('maClasse');

• getElementsByTagName() : Sélectionne tous les éléments d'un type

spécifique.

js
CopierModifier
let paragraphs = [Link]('p');
 • querySelector() : Sélectionne le premier élément correspondant à un
sélecteur CSS.

js
CopierModifier
let element = [Link]('.maClasse');

• querySelectorAll() : Sélectionne tous les éléments correspondant à un

sélecteur CSS.

js
CopierModifier
let elements = [Link]('.maClasse');

3. Modifier le DOM

Une fois un élément sélectionné, il est possible de modifier ses propriétés, son
contenu ou ses styles.

Modifier le contenu d'un élément :

js
CopierModifier
let element = [Link]('monId');
[Link] = 'Nouveau contenu';

Modifier les attributs d'un élément :

js
CopierModifier
let img = [Link]('img');
[Link]('src', 'nouvelle_image.jpg');

Modifier les styles d'un élément :

js
CopierModifier
let element = [Link]('monId');
[Link] = 'red'; // Change la couleur du texte

4. Ajouter et Supprimer des éléments du DOM

Ajouter un élément :

js
CopierModifier
let newElement = [Link]('p');
[Link] = 'Ceci est un nouveau paragraphe.';
[Link](newElement); // Ajoute le paragraphe à la
fin du body

Supprimer un élément :

js
CopierModifier
let element = [Link]('monId');
[Link](element); // Supprime l'élément

5. Ajouter des Événements au DOM

Les événements permettent de réagir aux actions de l'utilisateur, comme un clic, une
saisie clavier, ou un survol de la souris.

Ajouter un événement click :

js
CopierModifier
let button = [Link]('monBouton');
[Link]('click', function() {
alert('Bouton cliqué!');
});
Ajouter un événement mouseover (au survol de la souris) :

js
CopierModifier
let element = [Link]('monId');
[Link]('mouseover', function() {
[Link] = 'yellow';
});

6. Exercices et Corrigés

Exercice 1 : Modifier le contenu d'un élément

Crée un bouton et un paragraphe. Lorsque le bouton est cliqué, le contenu du

paragraphe doit changer.

Correction :

html
CopierModifier
<button id="changeContent">Changer le contenu</button>
<p id="monParagraphe">Ancien contenu</p>

<script>
let button = [Link]('changeContent');
let paragraph = [Link]('monParagraphe');

[Link]('click', function() {
[Link] = 'Nouveau contenu';
});
</script>

Exercice 2 : Ajouter un élément au DOM

Crée un bouton qui, lorsqu'il est cliqué, ajoute un nouveau paragraphe à la fin du body.

Correction :

html
CopierModifier
<button id="addParagraph">Ajouter un paragraphe</button>

<script>
let button = [Link]('addParagraph');

[Link]('click', function() {
let newParagraph = [Link]('p');
[Link] = 'Nouveau paragraphe ajouté.';
[Link](newParagraph);
});
</script>

Exercice 3 : Modifier le style d'un élément au survol

Ajoute un événement qui change la couleur de fond d'un élément lorsqu'il est survolé.

Correction :

html
CopierModifier
<div id="monDiv" style="width: 100px; height: 100px; background-
color: blue;"></div>

<script>
let div = [Link]('monDiv');

[Link]('mouseover', function() {
[Link] = 'green';
});
</script>

7. Conclusion

La manipulation du DOM en JavaScript permet de créer des pages web dynamiques et

interactives. Avec ces techniques, tu peux modifier le contenu des éléments, réagir aux
actions des utilisateurs, et ajouter ou supprimer des éléments à la volée.
Module 7 : Les Tableaux en JavaScript

1. Introduction aux Tableaux

Un tableau est une structure de données qui permet de stocker plusieurs valeurs sous
un même nom. Chaque valeur dans un tableau a un indice unique, à partir de 0. Les
tableaux sont utilisés pour regrouper des éléments similaires ou différents dans une
seule variable.

Syntaxe de création d'un tableau :

js
CopierModifier
let fruits = ['pomme', 'banane', 'orange'];

Ici, le tableau fruits contient trois éléments : 'pomme', 'banane' et 'orange'.

Chaque élément a un indice qui commence à 0.

2. Accéder aux Éléments d'un Tableau

Pour accéder à un élément spécifique d'un tableau, on utilise son indice :

js
CopierModifier
let fruits = ['pomme', 'banane', 'orange'];
[Link](fruits[0]); // Affiche 'pomme'
[Link](fruits[1]); // Affiche 'banane'

3. Ajouter et Supprimer des Éléments dans un Tableau

Ajouter des éléments :

• push() : Ajoute un ou plusieurs éléments à la fin du tableau.

js
CopierModifier
let fruits = ['pomme', 'banane'];
[Link]('orange'); // Ajoute 'orange' à la fin
[Link](fruits); // Affiche ['pomme', 'banane', 'orange']

• unshift() : Ajoute un ou plusieurs éléments au début du tableau.

js
CopierModifier
[Link]('kiwi'); // Ajoute 'kiwi' au début
[Link](fruits); // Affiche ['kiwi', 'pomme', 'banane',
'orange']

Supprimer des éléments :

• pop() : Supprime le dernier élément du tableau.

js
CopierModifier
[Link](); // Supprime 'orange'
[Link](fruits); // Affiche ['kiwi', 'pomme', 'banane']

• shift() : Supprime le premier élément du tableau.

js
CopierModifier
[Link](); // Supprime 'kiwi'
[Link](fruits); // Affiche ['pomme', 'banane']

4. Itérer sur un Tableau

Il existe plusieurs méthodes pour parcourir les éléments d'un tableau :

Boucle for :

js
CopierModifier
let fruits = ['pomme', 'banane', 'orange'];

for (let i = 0; i < [Link]; i++) {

[Link](fruits[i]);
}
// Affiche 'pomme', 'banane', 'orange'

forEach() :

js
CopierModifier
[Link](function(fruit) {
[Link](fruit);
});
// Affiche 'pomme', 'banane', 'orange'

map() :

La méthode map() permet de créer un nouveau tableau avec les résultats de l'appel
d'une fonction sur chaque élément du tableau.

js
CopierModifier
let fruits = ['pomme', 'banane', 'orange'];
let upperFruits = [Link](function(fruit) {
return [Link]();
});
[Link](upperFruits); // Affiche ['POMME', 'BANANE', 'ORANGE']

5. Méthodes Utiles des Tableaux

• indexOf() : Retourne l'indice du premier élément trouvé dans le tableau.

js
CopierModifier
let fruits = ['pomme', 'banane', 'orange'];
[Link]([Link]('banane')); // Affiche 1

• includes() : Vérifie si un élément est présent dans le tableau.

js
CopierModifier
let fruits = ['pomme', 'banane', 'orange'];
[Link]([Link]('pomme')); // Affiche true
[Link]([Link]('kiwi')); // Affiche false

• join() : Convertit tous les éléments d'un tableau en une seule chaîne de
caractères.

js
CopierModifier
let fruits = ['pomme', 'banane', 'orange'];
[Link]([Link](', ')); // Affiche 'pomme, banane, orange'

6. Exercices et Corrigés

Exercice 1 : Ajouter et Supprimer des Éléments

Crée un tableau nombres contenant les valeurs [1, 2, 3]. Ajoute le nombre 4 à la fin,
puis supprime le premier élément. Affiche le tableau après chaque opération.

Correction :

js
CopierModifier
let nombres = [1, 2, 3];
[Link](4); // Ajoute 4 à la fin
[Link](nombres); // Affiche [1, 2, 3, 4]

[Link](); // Supprime le premier élément

[Link](nombres); // Affiche [2, 3, 4]

Exercice 2 : Parcourir un Tableau avec forEach()

Crée un tableau de prénoms et utilise la méthode forEach() pour afficher chaque

prénom avec un message de bienvenue.

Correction :

let prenoms = ['Alice', 'Bob', 'Charlie'];

[Link](function(prenom) {
[Link]('Bienvenue, ' + prenom + '!');
});
// Affiche 'Bienvenue, Alice!', 'Bienvenue, Bob!', 'Bienvenue,
Charlie!'

Exercice 3 : Utiliser map() pour Modifier un Tableau

Crée un tableau de nombres et utilise la méthode map() pour créer un nouveau tableau
avec chaque nombre multiplié par 2.

Correction :

js
CopierModifier
let nombres = [1, 2, 3, 4];
let doubles = [Link](function(nombre) {
return nombre * 2;
});
[Link](doubles); // Affiche [2, 4, 6, 8]

7. Conclusion

Les tableaux sont une structure fondamentale en JavaScript pour stocker et manipuler
des données. Ils offrent de nombreuses méthodes pour ajouter, supprimer, et modifier
des éléments. En combinant les différentes méthodes et boucles, on peut effectuer
une grande variété d'opérations sur les tableaux.