├── CONTRIBUTIONS.md
├── LICENSE
├── README.md
└── cours
    └── javascript
        ├── 01-introduction-a-javascript-et-a-lenvironnement-web.md
        ├── 02-les-bases-de-la-programmation-en-javascript.md
        ├── 03-les-fonctions-en-javascript-et-la-portee-des-variables.md
        ├── 04-structures-de-donnees-–-tableaux-et-objets-en-javascript.md
        └── README.md


/CONTRIBUTIONS.md:
--------------------------------------------------------------------------------
 1 | # 📥 CONTRIBUTIONS
 2 | 
 3 | Merci de votre intérêt pour contribuer à **NoteForgeDev** !
 4 | Ce projet open source a pour objectif de devenir une bibliothèque riche en **notes de cours** pour apprendre le software engineering par la lecture.
 5 | 
 6 | ## 💡 Comment contribuer
 7 | 
 8 | Vous pouvez contribuer de plusieurs façons :
 9 | 
10 | ### ✏️ Proposer une nouvelle leçon
11 | 
12 | 1. Choisissez le dossier approprié (`/cours/javascript`, `/cours/php`, etc.).
13 | 2. Créez un fichier Markdown au format `XX-titre.md` (par ex. `03-boucles.md`), où `XX` est le numéro de l’ordre.
14 | 3. Respectez le squelette de leçon fourni (voir le modèle dans chaque dossier).
15 | 4. Vérifiez l’orthographe et la clarté.
16 | 5. Faites une **pull request (PR)** sur GitHub.
17 | 
18 | ---
19 | 
20 | ### 🛠️ Améliorer une leçon existante
21 | 
22 | - Corrigez des fautes d’orthographe ou de grammaire.
23 | - Ajoutez des explications plus claires.
24 | - Proposez des exercices ou des liens complémentaires.
25 | 
26 | ---
27 | 
28 | ### 🌍 Traduire des leçons
29 | 
30 | 1. Allez dans le dossier `/traductions/en` pour l’anglais.
31 | 2. Traduisez le fichier correspondant en respectant le style et la structure.
32 | 3. Faites une pull request.
33 | 
34 | ---
35 | 
36 | ### 💬 Signaler un problème
37 | 
38 | - Ouvrez une **issue** sur GitHub si vous trouvez :
39 |   - une erreur,
40 |   - un contenu peu clair,
41 |   - une section manquante.
42 | 
43 | ---
44 | 
45 | ## 📐 Bonnes pratiques
46 | 
47 | ✅ Respectez la langue principale du projet (français) pour les contributions principales.
48 | ✅ Utilisez un langage simple, clair et pédagogique.
49 | ✅ Citez vos sources si vous ajoutez des contenus externes.
50 | ✅ Testez les exemples de code avant de les soumettre.
51 | 
52 | ---
53 | 
54 | ## 📜 Licence
55 | 
56 | En contribuant, vous acceptez que vos ajouts soient publiés sous la licence MIT de ce projet.
57 | 
58 | ---
59 | 
60 | ## 👤 Auteur principal
61 | 
62 | **Moustapha Ibrahima Ba**
63 | 
64 | - GitHub → [mr-mib](https://github.com/mr-mib)
65 | - LinkedIn → [Moustapha Ibrahima Ba](https://www.linkedin.com/in/eng-moustapha-ibrahima-ba-194bb2194/)
66 | 
67 | ---
68 | 
69 | 🙏 Merci de faire partie de cette aventure d’apprentissage collaboratif !
70 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Moustapha Ibrahima Ba
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NoteForgeDev 📚🔥
 2 | 
 3 | Bienvenue sur **NoteForgeDev**, un projet open source dédié à l’apprentissage du **"Software Engineering"** à travers des notes de cours claires, accessibles et bien structurées.
 4 | Ce repository s’adresse à tous ceux qui aiment apprendre par la lecture, qu’ils soient débutants ou expérimentés, francophones ou anglophones.
 5 | 
 6 | ## 🌍 À propos
 7 | 
 8 | **NoteForgeDev** propose des cours rédigés en Markdown couvrant des sujets variés :
 9 | 
10 | - Programmation (HTML, CSS, PHP, JavaScript, Python, etc.)
11 | - Algorithmes
12 | - Soft skills (a gestion du temps, la communication, etc.)
13 | - Et bien plus encore…
14 | 
15 | Chaque cours est conçu comme une **note de cours** claire et progressive, accompagnée de projets pratiques pour consolider l’apprentissage.
16 | 
17 | La langue principale est le **français**, mais des traductions en anglais sont prévues progressivement (voir le dossier `/traductions`).
18 | 
19 | ## 💡 Pourquoi ce projet ?
20 | 
21 | Tout le monde n’apprend pas via des vidéos ou des tutoriels interactifs.
22 | **NoteForgeDev** vise à offrir une ressource unique et enrichissante pour ceux qui préfèrent lire, relire, expérimenter, et approfondir à leur propre rythme.
23 | 
24 | ## 💻 Structure du repository
25 | 
26 | - [/cours](/cours) → Tous les cours classés par langage/thème
27 | - [/projets](/projets) → Projets pratiques associés aux cours
28 | - [/traductions](/traductions) → Versions traduites (par ex. anglais)
29 | - [CONTRIBUTIONS](/CONTRIBUTIONS.md) → Guide pour contribuer
30 | - [LICENSE](/LICENSE) → Détails de la licence open source
31 | - [README](/README.md) → Présentation générale
32 | 
33 | ## 👥 Contribuer
34 | 
35 | Ce projet est ouvert à toutes les contributions !Vous pouvez :
36 | 
37 | - Proposer de nouveaux cours
38 | - Corriger ou enrichir les leçons existantes
39 | - Traduire les contenus
40 | 
41 | Consultez le fichier [CONTRIBUTIONS.md](/CONTRIBUTIONS.md) pour savoir comment participer.
42 | 
43 | ## 📜 Licence
44 | 
45 | Ce projet est publié sous licence **[MIT](/LICENSE)**.
46 | Vous êtes libres de l’utiliser, de le modifier et de le partager.
47 | 
48 | ## 👤 Auteur principal
49 | 
50 | Ce projet est maintenu par [Moustapha Ibrahima Ba](https://github.com/mr-mib), ingénieur en informatique passionné par le partage de connaissances et l'apprentissage continu.
51 | 
52 | Vous pouvez me contacter sur [LinkedIn](https://www.linkedin.com/in/eng-moustapha-ibrahima-ba-194bb2194/).
53 | 
54 | 🔥 Ensemble, forgeons des connaissances accessibles à tous !
55 | 


--------------------------------------------------------------------------------
/cours/javascript/01-introduction-a-javascript-et-a-lenvironnement-web.md:
--------------------------------------------------------------------------------
  1 | # Module 1 : Introduction à JavaScript et à l’Environnement Web
  2 | 
  3 | Dans ce premier module, nous allons répondre aux questions de base :
  4 | 
  5 | ✅ **Qu’est-ce que JavaScript ?**  
  6 | ✅ **À quoi sert-il et comment l’exécuter ?**
  7 | 
  8 | JavaScript est un **langage de programmation** qui permet d’ajouter de l’**interactivité aux pages web** au-delà du **HTML/CSS statique**.
  9 | 
 10 | Par exemple, JavaScript est utilisé pour :
 11 | - 🔄 **des mises à jour de contenu en temps réel**,
 12 | - 📝 **des formulaires interactifs**,
 13 | - 🎞️ **des animations**,
 14 | - 🕹️ **des jeux**, etc.
 15 | 
 16 | > Dès qu’une page web réagit aux actions de l’utilisateur ou affiche du contenu dynamique, il y a de fortes chances que **JavaScript soit impliqué** ([developer.mozilla.org](https://developer.mozilla.org/fr/docs/Web/JavaScript)).
 17 | 
 18 | ## 1. JavaScript, HTML et CSS
 19 | 
 20 | JavaScript est l’un des **trois langages fondamentaux du web**, aux côtés de :
 21 | - **HTML** (structure du contenu)
 22 | - **CSS** (mise en style)
 23 | 
 24 | 👉 **HTML** crée la structure de la page  
 25 | 👉 **CSS** la présente visuellement  
 26 | 👉 **JavaScript** rend la page **vivante** en manipulant cette structure et en réagissant aux actions
 27 | 
 28 | Il est donc **fortement conseillé d’avoir des bases en HTML/CSS**.  
 29 | Mais pas d’inquiétude : nous introduirons progressivement le HTML/CSS nécessaire dans nos projets.
 30 | 
 31 | Vous pouvez aussi en parallèle suivre des tutoriels HTML/CSS de base, comme le cours MDN “[Introduction au HTML/CSS](https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/HTML_basics)”.
 32 | 
 33 | ## 2. Où s’exécute JavaScript ?
 34 | 
 35 | - JavaScript s’exécute **principalement côté navigateur web** (Firefox, Chrome, etc.) pour le **développement front-end**.
 36 | 
 37 | - Chaque navigateur intègre un **moteur JavaScript** qui exécute le code **sur la machine de l’utilisateur**.
 38 | 
 39 | - ⚠️ JavaScript peut également s’exécuter **côté serveur (avec Node.js)**, mais **ce cours se concentrera sur le front-end** (interaction avec la page web dans le navigateur).
 40 | 
 41 | 
 42 | ## 3. Préparer son environnement
 43 | 
 44 | Pour coder en JavaScript, vous aurez besoin :
 45 | 
 46 | - d’un **navigateur moderne**
 47 | - d’un **éditeur de code**
 48 | 
 49 | Nous vous conseillons un éditeur moderne comme :
 50 | - **Visual Studio Code**
 51 | - **Atom**
 52 | - **WebStorm**
 53 | 
 54 | Ces éditeurs offrent :
 55 | - ✅ coloration syntaxique  
 56 | - ✅ auto-complétion  
 57 | - ✅ débogage intégré
 58 | 
 59 | Vous écrirez le code JavaScript :
 60 | - dans des fichiers texte avec l’extension **.js**
 61 | - ou directement dans des pages HTML via la balise `<script>`
 62 | 
 63 | Vous utiliserez aussi la **console de développement du navigateur** (accessible via `F12` ou `Ctrl+Shift+I`) pour tester rapidement du code et voir les messages d’erreur ou les résultats de `console.log`.
 64 | 
 65 | > 💡 **Astuce** : dans la console de Chrome/Firefox, l’onglet **Console** permet d’exécuter des instructions JavaScript **à la volée** et d’inspecter les éléments de la page.
 66 | 
 67 | ## 4. Premier script
 68 | 
 69 | Créons un premier fichier **HTML minimal** et un **script JavaScript** pour vérifier que tout fonctionne.
 70 | 
 71 | - Créez un fichier **index.html** avec le contenu suivant :  :
 72 | 
 73 | ```html
 74 | <!DOCTYPE html>
 75 | <html lang="fr">
 76 | <head>
 77 |   <meta charset="UTF-8">
 78 |   <title>Hello JS</title>
 79 | </head>
 80 | <body>
 81 |   <h1>Bienvenue</h1>
 82 |   <p id="demo"></p>
 83 | 
 84 |   <script src="script.js"></script>
 85 | </body>
 86 | </html>
 87 | ```
 88 | 
 89 | Ce fichier HTML charge un script externe `script.js` (grâce à la balise `<script src="...">` placée juste avant la fin de `<body>`).  
 90 | 
 91 | - Créons maintenant `script.js` dans le même dossier :
 92 | 
 93 | ```javascript
 94 | // script.js
 95 | console.log("Hello, JavaScript !");
 96 | document.getElementById("demo").textContent = "Hello depuis JS !";
 97 | ```
 98 | 
 99 | Ici, `console.log` affiche un message dans la **console du navigateur**, et la deuxième ligne utilise `document.getElementById` pour sélectionner l’élément `<p id="demo">` dans la page et **changer son texte**.
100 | 
101 | Ouvrez **index.html** dans votre navigateur :  
102 | ✅ Vous devriez voir le message apparaître sur la page  
103 | ✅ et dans la **console de développement** le log correspondant.
104 | 
105 | 🎉 **Félicitations, vous avez exécuté votre premier code JavaScript dans une page web !**
106 | 
107 | > 💡 **Astuce** :  
108 | > Si le texte n’apparaît pas ou que vous voyez une erreur, assurez-vous que votre fichier `script.js` est bien référencé et que la balise `<script>` est placée **en bas du `<body>`**.  
109 | > Placer le script à la fin du body garantit que le **HTML est chargé avant que JS ne s’exécute**.  
110 | > **Alternativement**, vous pouvez inclure la balise `<script>` dans le `<head>` en ajoutant l’attribut `defer` (ce qui reporte l’exécution du script après le chargement du HTML).
111 | 
112 | ## 5. Structure d’un programme JavaScript
113 | 
114 | JavaScript est un **langage interprété**, à **syntaxe libre inspirée du C et de Java**.
115 | 
116 | - ✅ **Chaque instruction se termine par un point-virgule** (facultatif mais **recommandé** pour éviter les ambiguïtés).
117 | 
118 | ### ✍️ **Commentaires en JavaScript**
119 | 
120 | Vous pouvez écrire des **commentaires** de deux façons :
121 | 
122 | ```javascript
123 | // commentaire sur une ligne
124 | 
125 | /* commentaire
126 |    sur plusieurs lignes */
127 | ```
128 | La majorité du code consistera à :
129 | 
130 | - 📝 **manipuler des variables**
131 | - 🔄 **utiliser des contrôles conditionnels** (if, else, switch…)
132 | - 🏗️ **définir des fonctions**
133 | - 🌐 **interagir avec le DOM** (*Document Object Model*, c’est-à-dire **la représentation de la page web dans le navigateur**)
134 | 
135 | 👉 **Nous verrons tout cela en détail dans les modules suivants.**
136 | 
137 | ## 6. Bonnes pratiques dès le départ
138 | 
139 | Il est fortement conseillé d’**activer le mode strict de JavaScript** en ajoutant :
140 | 
141 | ```javascript
142 | "use strict";
143 | ```
144 | 📌 **Placez cette directive en haut de vos fichiers JavaScript ou à l’intérieur de vos fonctions.**
145 | 
146 | Le **"strict mode"** rend le comportement de JavaScript **plus sûr** car il :
147 | 
148 | - ❌ **empêche l’utilisation de variables non déclarées**
149 | - ⚠️ **détecte plus d’erreurs au moment de l’exécution**
150 | - 🐛 **facilite le débogage**
151 | 
152 | 👉 **Nous reviendrons plus en détail sur ce mode et ses effets dans les modules suivants.**
153 | 
154 | > ### ✅ Bonnes pratiques
155 | >
156 | > Dès vos premiers scripts, **habituez-vous à :**
157 | > 
158 | > 🗂️ **Organiser votre code**  
159 | > - Indentez correctement
160 | > - Séparez les sections logiques par des **lignes vides**
161 | > - **Commentez** les parties complexes
162 | > 
163 | > 🏷️ **Nommer clairement vos variables et fonctions**  
164 | > Par exemple:
165 | > 
166 | > ```js
167 | > let nombreArticles = 5; // ✅ clair
168 | > let x = 5;              // ❌ peu explicite
169 | > ```
170 | > Un nom explicite rend le code plus lisible.
171 | > 
172 | > 🧪 **Tester régulièrement dans la console ou le navigateur**
173 | > 
174 | > - Ne **n’attendez pas d’écrire 200 lignes** avant de vérifier > que ça fonctionne.
175 | > 
176 | > 
177 | > ✅ **Construisez et testez par petites étapes** pour identifier > les erreurs plus facilement.
178 | > 
179 | > - 🐞 **Utiliser la console pour déboguer**
180 | > 
181 | > La commande suivante est votre **meilleure alliée** :
182 | > 
183 | > ```javascript
184 | > console.log(votreVariable);
185 | > ```
186 | > Elle vous permet :
187 | > - d’afficher la valeur d’une variable
188 | > - de comprendre ce qui se passe dans votre code


--------------------------------------------------------------------------------
/cours/javascript/02-les-bases-de-la-programmation-en-javascript.md:
--------------------------------------------------------------------------------
  1 | # 🚀 Module 2 : Les Bases de la Programmation en JavaScript
  2 | 
  3 | Ce module couvre les fondations du langage : comment déclarer des variables, les différents types de données, utiliser les opérateurs et les structures de contrôle (conditions et boucles). Même si vous n’avez jamais programmé, ces concepts de base seront expliqués pas à pas. 🎉
  4 | 
  5 | ## 2.1. Variables et Types de Données 💡
  6 | 
  7 | Une variable est un conteneur qui porte un nom et stocke une valeur (nombre, texte, etc.). En JavaScript moderne, on déclare une variable avec les mots-clés **let** ou **const** (et dans certains cas **var**, plus ancien) :
  8 | 
  9 | - **let** sert à déclarer une variable dont la valeur peut changer.  
 10 | - **const** sert à déclarer une constante dont la valeur ne sera pas réassignée (constante en écriture, pas immuable pour autant si c’est un objet, mais on y reviendra).  
 11 | - **var** est l’ancienne façon de déclarer, qu’on évite généralement en raison de ses particularités de portée (scope) et d’un mécanisme appelé hoisting.  
 12 | 
 13 | > **Astuce** : retenez pour l’instant : utilisez `let` pour les variables ordinaires et `const` pour les constantes. 😉
 14 | 
 15 | ### Exemple :
 16 | 
 17 | ```js
 18 | let age = 25;         // une variable âge qui peut changer
 19 | const PI = 3.14159;   // une constante, conventionnellement en majuscules
 20 | var nom = "Moustapha Ibrahima Ba";    // ancienne syntaxe var, à éviter
 21 | ```
 22 | 
 23 | JavaScript est faiblement typé : une variable peut contenir différents types de valeurs au cours du programme, mais chaque valeur a un type. Les principaux types primitifs sont :
 24 | 
 25 | 1. **Number** (nombre)  
 26 | 2. **String** (chaîne de caractères)  
 27 | 3. **Boolean** (booléen vrai/faux)  
 28 | 4. **Undefined** (valeur non définie)  
 29 | 5. **Null** (absence de valeur)  
 30 | 6. **BigInt** (grands entiers)  
 31 | 7. **Symbol** (valeurs uniques)  
 32 | 
 33 | Les objets et tableaux sont des types complexes (voir Module 4).  
 34 | 
 35 | Exemples de valeurs : 
 36 | - **42** est un `Number`, 
 37 | - **"Bonjour"** est un `String`, 
 38 | - **true** est un `Boolean`, 
 39 | - **undefined** est le `type d’une variable déclarée sans valeur.` 
 40 | 
 41 | Vous pouvez vérifier le type d’une variable avec l’opérateur `typeof`
 42 | 
 43 | ```js
 44 | let x;
 45 | console.log(typeof x);      // "undefined"
 46 | x = "Hello";
 47 | console.log(typeof x);      // "string"
 48 | x = 7;
 49 | console.log(typeof x);      // "number"
 50 | x = true;
 51 | console.log(typeof x);      // "boolean"
 52 | ```
 53 | 
 54 | > **ATTENTION** aux problèmes d’arithmétique en virgule flottante classiques : 
 55 | >
 56 | > par exemple **0.1 + 0.2** ne donne pas exactement **0.3** pour des raisons de **représentation binaire des nombres**.  
 57 | > ```js
 58 | > console.log(0.1 + 0.2); // ≠ 0.3 exactement
 59 | > ```  
 60 | 
 61 | ## 2.2. Opérateurs de base 🔧
 62 | 
 63 | JavaScript fournit les **opérateurs arithmétiques** usuels :
 64 | - **Arithmétiques** : `+`, `-`, `*`, `/` (add, sub, mul, div).  
 65 | - **Exponentiation** : `**` (ex : `2 ** 3 === 8`).  
 66 | - **Modulo** : `%` (reste de division, ex : `7 % 3 === 1`).  
 67 | - **Incrément / décrément** : `++`, `--`. 
 68 | 
 69 | Les **opérateurs d’affectation** permettent de modifier une variable 
 70 | - `=` affecte une valeur (`x = 5`)
 71 | - et on a des **raccourcis**: `+=`, `-=`, `*=`, `/=`, etc. Par exemple **`x += 3` équivaut à `x = x + 3`**.
 72 | 
 73 | Pour les **chaînes de caractères (String)**, l’opérateur `+` sert à les **concaténer** (assembler) : `"Hello " + "World" === "Hello World"`.
 74 | 
 75 | ## 2.3. Comparaisons et Logique en JavaScript 🤔
 76 | 
 77 | En programmation, on a souvent besoin de comparer des valeurs :
 78 | 
 79 | - **Égalité faible** `==`  
 80 |   - Convertit les types au besoin  
 81 |   - Exemple : `0 == "0"` est `true` (la chaîne `"0"` est convertie en nombre `0`)
 82 | - **Égalité stricte** `===`  
 83 |   - Exige la même valeur **et** le même type  
 84 |   - Exemple : `0 === "0"` est `false` (types différents)  
 85 | - **Différence stricte** `!==` vs différence faible `!=`  
 86 | 
 87 | > ✅ **Bonne pratique** :  
 88 | > Utilisez toujours `===` et `!==` pour éviter les surprises des conversions implicites.
 89 | >
 90 | >```js
 91 | >console.log(0 == "0");   // true
 92 | >console.log(0 === "0");  // false
 93 | >```
 94 | 
 95 | ### 🔢 Opérateurs de comparaison usuels
 96 | Les **opérateurs de comparaison** usuels sont :
 97 | - `<`  (moins que)  
 98 | - `>`  (plus que)  
 99 | - `<=` (inférieur ou égal)  
100 | - `>=` (supérieur ou égal)  
101 | 
102 | Ils fonctionnent pour les nombres et pour les chaînes de caractères (ordre lexicographique).
103 | 
104 | ---
105 | 
106 | ### 🔗 Opérateurs logiques
107 | 
108 | - `&&` (ET logique)  
109 | - `||` (OU logique)  
110 | - `!`  (NON logique)  
111 | 
112 | Ces opérateurs permettent de combiner plusieurs conditions.
113 | 
114 | #### Exemple :
115 | 
116 | ```js
117 | let age = 20;
118 | let citoyen = true;
119 | console.log(age >= 18 && citoyen === true); // true
120 | 
121 | let a = 5, b = "5";
122 | console.log(a == b);   // true  (comparaison faible, 5 == "5")
123 | console.log(a === b);  // false (comparaison stricte, number vs string)
124 | console.log(a !== b);  // true  (5 n'est pas du même type ou valeur que "5")
125 | console.log(a < 10);   // true
126 | console.log(a > 10 || a == 5); // true (5 > 10 est faux, mais 5 == 5 est vrai, donc OU donne vrai)
127 | ```
128 | 
129 | > 🤓 **Astuce** :  
130 | > Utilisez des parenthèses pour clarifier les expressions complexes, même si elles ne sont pas strictement nécessaires.
131 | 
132 | > ### ✅ Bonnes pratiques
133 | > 
134 | > - **Évitez l’égalité faible**  
135 | >   Préférez toujours l’égalité stricte `===` (et `!==`) pour éviter les conversions implicites surprenantes.  
136 | >   ```js
137 | >   // Mauvaise pratique (égalité faible)
138 | >   0 == "0"   // true
139 | > 
140 | >   // Bonne pratique (égalité stricte)
141 | >   0 === "0"  // false
142 | >   ```
143 | > 
144 | > **Prudence avec les valeurs *falsy* et *truthy***  
145 | >   En JavaScript, les valeurs suivantes sont *falsy* (considérées comme fausses) :  
146 | >   ```
147 | >   0, "" (chaîne vide), null, undefined, NaN
148 | >   ```  
149 | >   Toute autre valeur non nulle ou non vide est *truthy*.  
150 | >   ```js
151 | >   let variable = 0;
152 | >   if (variable) {
153 | >     // Ne passera pas ici, 0 est falsy
154 | >   }
155 | > 
156 | >   let str = "";
157 | >   if (str) {
158 | >     // Ne passera pas ici, chaîne vide est falsy
159 | >   }
160 | > 
161 | >   let msg = "Bonjour";
162 | >   if (msg) {
163 | >     // Passera ici, "Bonjour" est truthy
164 | >   }
165 | >  ```
166 | >
167 | > - **Utilisez des parenthèses pour la lisibilité**  
168 | >  Même si l’ordre des opérateurs est défini, les parenthèses clarifient les expressions logiques complexes.  
169 | >   ```js
170 | >   if ((x > 0 && x < 10) || conditionAnnexe) {
171 | >     // …
172 | >   }
173 | >   ```
174 | 
175 | 🎉 Voilà, vos règles de comparaison et de logique JavaScript au top de la clarté ! 🚀  
176 | 
177 | ## 2.4. Structures de contrôle : conditions et boucles 🔄
178 | 
179 | ### Conditions `if/else`
180 | 
181 | La condition `if/else` permet d’exécuter du code seulement si une certaine condition est vraie. La syntaxe est :
182 | ```js
183 | if (condition) {
184 |   // bloc si vrai
185 | } else if (autreCondition) {
186 |   // autre bloc
187 | } else {
188 |   // sinon
189 | }
190 | ```
191 | Seul le `if(...) {}` de base est obligatoire. Les `else if` et `else` sont optionnels selon les besoins. Par exemple :
192 | 
193 | ```js
194 | let heure = 14;
195 | if (heure < 12) {
196 |   console.log("Bonjour");
197 | } else if (heure < 18) {
198 |   console.log("Bon après-midi");
199 | } else {
200 |   console.log("Bonsoir");
201 | }
202 | ```
203 | Ici, le programme affiche un message différent selon l’heure. 
204 | 
205 | ### `switch`
206 | 
207 | Une autre structure de condition est `switch`, utile quand on compare la même variable à différentes valeurs :
208 | 
209 | ```js
210 | let couleur = "vert";
211 | switch (couleur) {
212 |   case "rouge":
213 |     console.log("STOP");
214 |     break;
215 |   case "orange":
216 |     console.log("ATTENTION");
217 |     break;
218 |   case "vert":
219 |     console.log("ALLEZ-Y");
220 |     break;
221 |   default:
222 |     console.log("Couleur inconnue");
223 | }
224 | ```
225 | Le `switch` compare `couleur` aux valeurs indiquées dans les `case`. Le mot-clé `break` empêche d’enchaîner sur les cas suivants une fois un cas trouvé (sinon, l’exécution continue dans le prochain case ce qui est rarement le comportement désiré à part cas spécifiques).
226 | 
227 | ### Boucles
228 | 
229 | Les **boucles** permettent de répéter un bloc d’instructions tant que certaines conditions sont remplies. JavaScript offre plusieurs types de boucles :
230 | 
231 | 1. **`while`** : répète tant qu’une condition est vraie. Exemple :
232 | 
233 |    ```js
234 |    let i = 0;
235 |    while (i < 3) {
236 |      console.log("i vaut " + i);
237 |      i++;
238 |    }
239 |    // Affiche : i vaut 0, puis 1, puis 2
240 |    ```
241 | 
242 | 2. **`for`** : boucle avec compteur, très utilisée. Syntaxe : `for(initialisation; condition; incrément) { … }`. Exemple :
243 | 
244 |    ```js
245 |    for (let j = 0; j < 3; j++) {
246 |      console.log(`j = ${j}`);
247 |    }
248 |    // Affiche j = 0, j = 1, j = 2
249 |    ```
250 |    Ici on initialise `j=0`, la boucle tourne tant que `j < 3`, et on exécute `j++` à chaque fin d’itération.
251 | 
252 | 3. **`do ... while`** : similaire à while, sauf que la condition est évaluée **après** la première itération, ce qui garantit qu’on exécute le bloc au moins une fois. Exemple :
253 | 
254 |    ```js
255 |    let x = 5;
256 |    do {
257 |      console.log("x vaut " + x);
258 |      x--;
259 |    } while (x > 0);
260 |    ```
261 | 4. **Avancées** : JavaScript moderne fournit aussi `for...of` pour itérer sur les éléments d’une collection (tableau, etc.) et `for...in` pour itérer sur les propriétés d’un objet. Nous les verrons quand nous aborderons les tableaux et objets. 
262 |    - `for...of` pour tableaux  
263 |    - `for...in` pour objets  
264 |    
265 |    > **Astuce** : Dans les boucles `for`, vous pouvez utiliser le mot-clé `break` pour sortir prématurément de la boucle, et `continue` pour passer directement à l’itération suivante en sautant le reste du bloc courant.
266 |    >
267 |    > Par exemple, pour ignorer certaines valeurs :
268 |    > ``` javascript
269 |    > for(let n=1; n<=5; n++){
270 |    >  if(n === 3) continue;  // sauter l'affichage pour n = 3
271 |    >  console.log(n);
272 |    >  }
273 |    >  // Ce code affichera 1, 2, 4, 5 (3 est sauté)
274 |     > ```
275 |    > À utiliser avec **parcimonie**, car l’abus de `break`/`continue` peut nuire à la lisibilité. Parfois, re-structurer la condition de la boucle évite d’en avoir besoin.
276 | 
277 | 
278 | ## 🎯 Exercices pratiques
279 | 
280 | Pour bien maîtriser ces bases, rien de tel que de pratiquer. Essayez de résoudre ces petits exercices en JavaScript :
281 | 
282 | 1. **Calcul de salaire horaire**  
283 |    Écrivez un script qui déclare une variable `salaireAnnuel` et une variable `heuresParSemaine`. Calculez le salaire horaire en supposant 52 semaines par an, et affichez le résultat dans la console. (Indice : salaire horaire = salaireAnnuel / (heuresParSemaine * 52)).
284 | 
285 | 2. **Parité**  
286 |    Demandez (mentalement) un nombre et stockez-le dans une variable `nombre`. Utilisez une condition pour afficher dans la console "pair" ou "impair" selon la valeur de `nombre`. (Rappel : le test `nombre % 2 === 0` indique la parité).
287 | 
288 | 3. **FizzBuzz basique**  
289 |    Pour les nombres de 1 à 20, affichez "Fizz" s’ils sont multiples de 3, "Buzz" s’ils sont multiples de 5, "FizzBuzz" s’ils sont multiples des deux, ou simplement le nombre sinon. (C’est un classique pour pratiquer les conditions).
290 | 
291 | 4. **Compter les voyelles**  
292 |    Stockez une chaîne de caractères dans une variable (par ex. une phrase) et, à l’aide d’une boucle, comptez le nombre de voyelles (a, e, i, o, u) dans la chaîne. Affichez le résultat.
293 | 
294 | 5. **Deviner un nombre** (exercice libre, nécessitant HTML/interaction donc vous pouvez le garder en tête pour plus tard) – Imaginer un programme qui génère un nombre aléatoire et demande à l’utilisateur de le deviner via une interface, en lui indiquant "plus haut" ou "plus bas". Comment utiliseriez-vous les conditions et boucles pour cela ? 
295 | 
296 | > Ces exercices peuvent être réalisés dans la console du navigateur ou en créant un petit fichier HTML avec un `<script>` contenant votre code, puis en observant le résultat via `console.log` ou en manipulant le DOM (si vous connaissez déjà un peu, sinon ne vous inquiétez pas, on y vient bientôt). 🏆  
297 | 


--------------------------------------------------------------------------------
/cours/javascript/03-les-fonctions-en-javascript-et-la-portee-des-variables.md:
--------------------------------------------------------------------------------
  1 | # Module 3 : Les Fonctions en JavaScript et la Portée des Variables
  2 | 
  3 | Dans ce module, nous allons introduire les fonctions, un concept fondamental en programmation permettant de regrouper des instructions, de les réutiliser et de structurer votre code de manière modulaire. Nous aborderons également la notion de portée (scope) des variables, c’est-à-dire les règles qui déterminent où une variable est accessible.
  4 | 
  5 | ## 3.1. Définir et utiliser des fonctions
  6 | 
  7 | Une fonction est comme une "boîte" de code nommée, qui peut prendre des paramètres en entrée et renvoyer une valeur en sortie. Cela permet de réutiliser ce code facilement. En JavaScript, il existe plusieurs façons de définir une fonction :
  8 | 
  9 | ### **Fonction déclarée (function declaration)** :
 10 | 
 11 | ```javascript
 12 | function saluer(nom) {
 13 |   console.log("Bonjour " + nom + "!");
 14 | 
 15 |   saluer("Fatou"); // Affiche "Bonjour Fatou!"
 16 | }
 17 | ```
 18 | ✨ Ici, nous **déclarons une fonction** nommée `saluer` qui prend un **paramètre `nom`**.  
 19 | ✅ En appelant `saluer("Fatou")`, la console affichera **"Bonjour Fatou!"**.
 20 | 
 21 | > 💡 **Remarque importante** : <br>
 22 | >
 23 | >Les fonctions déclarées de cette manière sont **hoistées** 👉 cela signifie que vous pouvez les **appeler même avant leur définition** dans le code. <br>
 24 | >
 25 | > ➡️ JavaScript **charge leurs définitions dès l’interprétation initiale**, ce qui les rend accessibles partout dans leur portée.
 26 | 
 27 | ### **Fonction exprimée (function expression)** : 
 28 | 
 29 | 📝 On peut aussi **assigner une fonction anonyme à une variable**.  
 30 | Dans ce cas, la fonction n’a pas de nom propre, mais est stockée dans une variable (ici une constante) :
 31 | 
 32 | ```js
 33 | const saluer2 = function(nom) {
 34 |   console.log(`Salut ${nom} !`);
 35 | };
 36 | 
 37 | saluer2("Paul");  // Appel de la fonction via la variable
 38 | ```
 39 | ✨ Ici, `saluer2` est une **constante** qui **référence une fonction anonyme**.
 40 | 
 41 | >💡 **Différence principale** : <br>
 42 | >
 43 | >- Les **function expressions ne sont pas hoistées**. <br>
 44 | >
 45 | >- Cela signifie que **vous devez définir la fonction avant de l’appeler**. <br>
 46 | > - ⚠️ Tenter de l’appeler avant sa définition générera une erreur.
 47 | 
 48 | ### **Fonction fléchée (arrow function)**
 49 | 
 50 | 📝 La **fonction fléchée** est une **syntaxe plus concise** introduite par **ES6**.  
 51 | Elle permet de déclarer des fonctions de manière plus rapide :
 52 | 
 53 | ```js
 54 | const saluer3 = (nom) => {
 55 |   console.log(`Hello ${nom} !`);
 56 | };
 57 | ```
 58 | 
 59 | - ✨ Ici, `saluer3` est une `constante` qui stocke une `arrow function`.
 60 | 
 61 | - 💡 Les `arrow functions` ont des `particularités` (notamment concernant `this`, nous y reviendrons plus tard).
 62 | 
 63 | - Elles sont **souvent utilisées pour les callbacks ou les fonctions courtes**.
 64 | 
 65 | Si l’arrow function se limite à **une seule expression retournée**, on peut encore simplifier la syntaxe :
 66 | 
 67 | ``` javascript
 68 | const carre = x => x * x;
 69 | ```
 70 | ✨ Ici, `carre` est une fonction qui **renvoie `x²`**.
 71 | 
 72 |  ✅ Quelle que soit la méthode, **on appelle une fonction en écrivant son nom suivi de parenthèses** et des arguments éventuels.
 73 | 
 74 | 📝 On peut définir une fonction **sans paramètre** (avec des parenthèses vides) ou **choisir de renvoyer une valeur** grâce au mot-clé `return` :
 75 | 
 76 |  ```js
 77 |  function addition(a, b) {
 78 |   return a + b;
 79 |  }
 80 | 
 81 |  let resultat = addition(2, 3);
 82 |  console.log(resultat); // 5
 83 |  ```
 84 | 
 85 |  - ✨ Ici, la fonction `addition` **prend deux nombres et renvoie leur somme**.
 86 | 
 87 |  - 💡 **Le `return` termine la fonction** :  
 88 |  - ✅ **toute instruction après un `return` ne sera pas exécutée.**
 89 | 
 90 |  - ⚠️ **Sans `return` explicite, une fonction renvoie `undefined` par défaut.**
 91 | 
 92 | ### Portée locale des fonctions
 93 | 
 94 | 📝 Les **variables déclarées à l’intérieur d’une fonction** (avec `let` ou `const`) sont **locales à cette fonction** :  
 95 | ✅ elles **n’existent qu’à l’intérieur** et ne sont **pas accessibles de l’extérieur**.
 96 | 
 97 | Exemple :
 98 | 
 99 | ```js
100 | function demo() {
101 |   let x = 42;
102 | }
103 | console.log(x); // Erreur : x is not defined (car x est local à la fonction demo)
104 | ```
105 | 👉 En revanche, une fonction a **accès aux variables définies dans son contexte englobant (extérieur).**  
106 | C’est ce qu’on appelle la **portée lexicale**.
107 | 
108 | ```javascript
109 | let message = "Coucou";
110 | 
111 | function direMessage() {
112 |   console.log(message);
113 | }
114 | 
115 | direMessage(); // affichera "Coucou"
116 | ```
117 | 
118 | - ✨ Ici, `message` est une **variable globale** (déclarée en dehors de toute fonction).
119 | 
120 | - 👉 La fonction `direMessage` **peut voir la variable `message`** car **`message` est globale dans ce contexte.**
121 | 
122 | - ⚠️ **Les variables globales sont accessibles partout**, ce qui peut être pratique mais **peut poser des problèmes de chevauchement de noms ou d’effets indésirables à grande échelle.**
123 | 
124 | - 💡 **Il est recommandé de limiter l’usage des variables globales pour éviter ces problèmes.**
125 | 
126 | > ## 💡 Bonnes pratiques :
127 | > 
128 | > ✅ **Limitez les variables globales.**  
129 | > Dans la mesure du possible, **utilisez des fonctions pour encapsuler votre logique** et ne laissez en global **que ce qui est intentionnellement partagé**.  
130 | > Trop de variables globales créent un code **moins maintenable**.
131 | > 
132 | > ✅ **Une fonction = une action.**  
133 | > Donnez aux fonctions **une responsabilité claire et un nom explicite**.  
134 | > 👉 Si vous constatez qu’une fonction fait **deux choses sans rapport**, envisagez de **la scinder**.
135 | > 
136 | > ✅ **N’hésitez pas à utiliser des fonctions pour éviter la répétition.**  
137 | > Si vous vous surprenez à **copier-coller du code**, mettez-le **dans une fonction et appelez-la à la place**.
138 | > 
139 | > ✅ **Paramètres par défaut :**  
140 | > Vous pouvez **assigner des valeurs par défaut à vos paramètres**  
141 | > *(exemple : `function f(x = 1) { ... }`)*, ce qui **évite des erreurs si la fonction est appelée sans ce paramètre ou avec `undefined`**.
142 | 
143 | ## 3.2. Portée (scope) et variables locales/globales
144 | 
145 | 👉 Comme introduit, **la portée d’une variable est la zone du code où elle est accessible**.
146 | 
147 | En **JavaScript (ES6)**, on a une **portée de bloc** avec `let` et `const` :  
148 | ✅ **toute paire d’accolades `{ ... }` délimite une portée pour ces variables**.
149 | 
150 | ```javascript
151 | if (true) {
152 |   let temp = 123;
153 |   console.log(temp); // 123, accessible à l’intérieur du bloc
154 | }
155 | console.log(temp); // Erreur, temp n'existe plus en dehors des accolades
156 | ```
157 | 
158 | 👉 Avec `var` (ancienne manière), **la portée est fonctionnelle (ou globale si déclarée hors fonction) et non par bloc**.
159 | 
160 | ✅ Cela signifie qu’un `var` déclaré **dans un bloc `if` sera quand même accessible en dehors du `if`**, ce qui est **contre-intuitif**.
161 | 
162 | 💡 **C’est l’une des raisons principales pour lesquelles on évite d’utiliser `var`.**
163 | 
164 | ### Hoisting (élévation)
165 | 
166 | 📝 **JavaScript possède un mécanisme appelé "hoisting" (élévation)**, où **les déclarations de fonctions et de variables `var` sont traitées en amont**.
167 | 
168 | 👉 Concrètement :
169 | 
170 | ✅ Une **fonction déclarée est utilisable même si elle apparaît plus bas dans le code source**.  
171 | ✅ De même, une **variable `var` est techniquement créée en haut de sa portée**, mais **initialisée à `undefined` jusqu’à l’affectation réelle**.
172 | 
173 | ⚠️ Ce comportement peut **surprendre** et **entraîner des erreurs si mal compris**.
174 | 
175 | Exemple :
176 | 
177 | ```js
178 | console.log(a); // undefined (la variable existe mais pas encore assignée)
179 | var a = 5;
180 | 
181 | saluer("Bob"); // fonctionne, même si la fonction est déclarée plus bas
182 | 
183 | function saluer(nom) {
184 |   console.log("Bonjour " + nom);
185 | }
186 | ```
187 | - 👉 Avec `let` et `const`, **le hoisting existe aussi**, mais d’une manière différente :
188 | 
189 | - ⚠️ **L’accès à la variable avant sa déclaration entraîne une erreur** → c’est ce qu’on appelle la **Temporal Dead Zone (TDZ)**.
190 | 
191 | - ✅ **En pratique, il ne faut pas compter sur le hoisting.**  
192 | 💡 **Déclarez toujours vos variables avant de les utiliser** pour obtenir un **code clair, lisible et sans surprise.**
193 | 
194 | ## 3.3. Différents types de fonctions et comparaisons méthodologiques
195 | 
196 | ### Fonctions classiques vs fléchées
197 | 
198 | 📝 Les **arrow functions** `() => { }` ont une **différence majeure** par rapport aux fonctions classiques :
199 | 
200 | ✅ **Elles ne possèdent pas leur propre `this`** (et **pas d’objet `arguments` implicite**).
201 | 
202 | 👉 Cela signifie que **le `this` à l’intérieur d’une fonction fléchée est celui de son contexte englobant**.
203 | 
204 | En revanche, une **fonction classique** définie avec `function` aura **son propre `this` selon la façon dont elle est appelée**  
205 | *(nous approfondirons `this` dans le module POO).*
206 | 
207 | ---
208 | 
209 | > 🎯 **En résumé** :
210 | >
211 | >✅ Pour **des petites fonctions utilitaires ou des callbacks** où l’on **ne veut pas manipuler `this`**, **les arrow functions sont concises et pratiques**.
212 | >
213 | >✅ Pour **des méthodes d’objets** ou **quand on a besoin de `this`**, **les fonctions classiques sont mieux adaptées**.
214 | 
215 | ### Paramètres vs variables globales
216 | 
217 | 📝 Comparons **deux façons d’utiliser des valeurs dans une fonction** :
218 | 
219 | ✅ Soit on utilise **une variable globale**  
220 | ✅ Soit on **passe la valeur en paramètre**
221 | 
222 | Exemple :
223 | 
224 | ```javascript
225 | // Méthode 1 : variable globale
226 | let tauxTVA = 0.20;
227 | function calculPrixTTC(prixHT) {
228 |   return prixHT * (1 + tauxTVA);
229 | }
230 | 
231 | // Méthode 2 : passer en paramètre
232 | function calculPrixTTCv2(prixHT, taux) {
233 |   return prixHT * (1 + taux);
234 | }
235 | ```
236 | 
237 | ✅ **La première méthode** a l’avantage de la **simplicité** (moins de paramètres à fournir),  
238 | mais elle **rend la fonction dépendante d’une variable externe `tauxTVA`**.
239 | 
240 | 👉 **La seconde méthode** rend la fonction **complètement générique et autonome**,  
241 | car elle **ne dépend d’aucune variable globale** et **prend tout en paramètre**.
242 | 
243 | > ✅ **Bonne pratique** :  
244 | >
245 | >👉 **Privilégiez le passage de paramètres pour rendre les fonctions indépendantes**,  
246 | sauf si la valeur en question est **vraiment globale et constante** dans votre application.
247 | >
248 | >💡 Ainsi, `calculPrixTTCv2` pourra être **réutilisée avec n’importe quel taux**,  
249 | par exemple :
250 | >
251 | > ```js
252 | > calculPrixTTCv2(100, 0.055); // calcul avec un taux réduit
253 | >```
254 | 
255 | ## 3.4. Closures (fermetures) – Notion avancée
256 | 
257 | 📝 Un concept avancé lié aux **fonctions** et à la **portée** est celui de **closure** (*fermeture* en français).
258 | 
259 | 👉 Une **fermeture** se produit lorsqu’une fonction **“embarque” avec elle des références vers son environnement lexical**,  
260 | c’est-à-dire **des variables qui étaient en scope au moment de sa création** ([source : MDN](https://developer.mozilla.org)).
261 | 
262 | ✅ Dit simplement, **une fonction interne peut continuer à accéder aux variables de la fonction englobante, même après que cette dernière ait terminé son exécution**.
263 | 
264 | Exemple classique :
265 | 
266 | ```javascript
267 | function creerCompteur() {
268 |   let count = 0;
269 |   return function() {
270 |     count++;
271 |     console.log(`Compteur : ${count}`);
272 |   };
273 | }
274 | 
275 | const compteur1 = creerCompteur();
276 | compteur1(); // Compteur : 1
277 | compteur1(); // Compteur : 2
278 | 
279 | const compteur2 = creerCompteur();
280 | compteur2(); // Compteur : 1  (un nouveau compteur indépendant)
281 | ``` 
282 | 
283 | - ✨ Ici, `creerCompteur` est une fonction qui **crée une variable locale `count`** et **renvoie une fonction anonyme**.
284 | 
285 | - ✅ Cette fonction retournée **ferme sur (capture) la variable `count` de son parent**.
286 | 
287 | - 💡 Même **après que `creerCompteur` se soit terminée**, la variable `count` **reste accessible à travers la fonction retournée `compteur1`**.
288 | 
289 | - ➡️ **Chaque appel à `compteur1()` incrémente le `count` qui lui est propre.**
290 | 
291 | - ✅ On peut **créer plusieurs compteurs indépendants**, car **chaque invocation de `creerCompteur()` crée sa propre variable `count` capturée dans une closure séparée.**
292 | 
293 | ✅ **Les closures sont très puissantes** :  
294 | 👉 Elles permettent par exemple **d’émuler des variables privées en programmation**  
295 | (une **variable interne à une fonction accessible uniquement via des fonctions internes**).
296 | 
297 | 💡 **C’est un concept qui peut paraître déroutant au début**,  
298 | mais retenez que **chaque fonction “se souvient” des variables autour d’elle au moment de sa création**.
299 | 
300 | 🔍 MDN définit une **fermeture** comme :  
301 | > *“la paire formée d’une fonction et des références à son état environnant (les variables locales en mémoire)”* ([source : MDN](https://developer.mozilla.org))
302 | 
303 | <br>
304 | 
305 | > ## Pour aller plus loin :
306 | >
307 | > 🚩 **Les closures sont omniprésentes en JavaScript**  
308 | > (par exemple **les gestionnaires d’événements** ou **les callbacks asynchrones** utilisent ce mécanisme).
309 | >
310 | > 💬 **Si ce concept n’est pas clair immédiatement**,  
311 | > je vous recommande **la lecture de l’article MDN sur les Fermetures (Closures)**  
312 | > 👉 [MDN - Closures](https://developer.mozilla.org)  
313 | > ou **des tutoriels vidéos sur le sujet**.
314 | >
315 | > 🎯 **Comprendre les closures vous fera passer un cap en JavaScript.**
316 | 
317 | ## Exercices pratiques :
318 | 
319 | 1. Écrivez une fonction `min(a, b)` qui retourne le plus petit des deux nombres `a` et `b`. Testez-la avec différentes valeurs.
320 | 
321 | 2. Écrivez une fonction `factorielle(n)` qui retourne la factorielle de `n` (`n! = 1 * 2 * ... * n`). Faites-le d’abord avec une boucle, puis (pour challenge) en récursif (une fonction qui s’appelle elle-même).
322 | 
323 | 3. Modifiez la fonction `saluer(nom)` vue plus haut pour qu’elle retourne le message au lieu de le `console.log`. Ainsi, on pourra faire `let msg = saluer("Alice"); console.log(msg);`.
324 | 
325 | 4. Écrivez une fonction `compterVoyelles(phrase)` qui retourne le nombre de voyelles dans la chaîne `phrase`. Réutilisez l’exercice du module 2 mais cette fois en encapsulant la logique dans une fonction réutilisable.
326 | 
327 | 5. **Challenge closures :** Écrivez une fonction `createMultiplier(facteur)` qui retourne une nouvelle fonction. Cette nouvelle fonction prend un nombre en argument et renvoie ce nombre multiplié par `facteur`. Par exemple `const doubler = createMultiplier(2);` puis `doubler(5)` devrait donner `10`. Ici, `createMultiplier` utilise une closure pour “se souvenir” du `facteur`.
328 | 
329 | > Ce module vous a **introduit aux fonctions**, un **outil essentiel pour structurer le code et éviter les répétitions**.
330 | > 
331 | > 👉 Dans les prochains chapitres, nous allons **approfondir avec les structures de données** (tableaux, objets),  
332 | puis **revenir sur des aspects avancés des fonctions** (contexte, méthodes) dans la partie **POO**.
333 | 


--------------------------------------------------------------------------------
/cours/javascript/04-structures-de-donnees-–-tableaux-et-objets-en-javascript.md:
--------------------------------------------------------------------------------
  1 | # Module 4 : Structures de Données – Tableaux et Objets en JavaScript
  2 | 
  3 | Maintenant que nous savons utiliser des variables et des fonctions, intéressons-nous aux **structures de données** les plus utilisées en JavaScript : les **tableaux** (arrays) et les **objets**. Ces deux types de structures permettent de regrouper des valeurs, mais de manière différente : un tableau pour une liste ordonnée indexée, un objet pour une collection de propriétés nommées.
  4 | 
  5 | ## 4.1. Les tableaux (Arrays)
  6 | 
  7 | Un **tableau** est une liste ordonnée de valeurs, indexées numériquement à partir de 0. En JavaScript, les tableaux sont très flexibles : on peut changer leur taille, ils peuvent contenir des éléments de différents types (bien que ce soit rarement une bonne idée en pratique de mélanger les types).
  8 | 
  9 | ### Création de tableau :
 10 | 
 11 | On peut créer un tableau avec des littéraux en utilisant des crochets `[]`.
 12 | **Exemple** :
 13 | 
 14 | ```js
 15 | let fruits = ["Pomme", "Banane", "Orange"];
 16 | console.log(fruits[0]); // "Pomme" (les indices commencent à 0)
 17 | console.log(fruits[2]); // "Orange"
 18 | ```
 19 | 
 20 | Ici `fruits` est un tableau de 3 éléments. La propriété `fruits.length` donne la taille (3 dans cet exemple).
 21 | 
 22 | Les tableaux peuvent être modifiés : on peut assigner à un index pour changer une valeur, ou utiliser diverses **méthodes** pour manipuler le tableau :
 23 | 
 24 | - `push(element)` ajoute un élément à la fin du tableau.
 25 | - `pop()` enlève le dernier élément.
 26 | - `unshift(element)` ajoute un élément au début du tableau (décale les autres).
 27 | - `shift()` enlève le premier élément.
 28 | 
 29 | Exemple :
 30 | 
 31 | ```javascript
 32 | fruits.push("Mangue"); // Ajoute "Mangue" à la fin
 33 | console.log(fruits.length); // 4
 34 | let dernier = fruits.pop(); // retire "Mangue"
 35 | let premier = fruits.shift(); // retire "Pomme"
 36 | fruits.unshift("Fraise"); // ajoute "Fraise" au début
 37 | console.log(fruits); // ["Fraise", "Banane", "Orange"]
 38 | ```
 39 | 
 40 | D’autres méthodes utiles :
 41 | 
 42 | - `indexOf(valeur)` pour trouver l’index d’une valeur,
 43 | - `includes(valeur)` pour tester la présence,
 44 | - `slice(debut, fin)` pour extraire une portion de tableau,
 45 | - `splice` pour enlever/insérer en plein milieu
 46 | - etc.
 47 | 
 48 | Pour parcourir un tableau, utilisez la boucle `for` classique avec index, ou plus simplement la boucle `for...of` :
 49 | 
 50 | ```javascript
 51 | for (const fruit of fruits) {
 52 |   console.log(fruit);
 53 | }
 54 | ```
 55 | 
 56 | Cela affichera chaque fruit de la liste sans qu’on se soucie des indices.
 57 | 
 58 | ### Tableaux et méthodes modernes :
 59 | 
 60 | Le JavaScript moderne propose des méthodes de haut niveau très pratiques pour travailler avec les tableaux de manière déclarative :
 61 | 
 62 | - `forEach` : pour exécuter une fonction sur chaque élément.
 63 | - `map` : pour transformer chaque élément et obtenir un nouveau tableau.
 64 | - `filter` : pour filtrer les éléments selon un critère.
 65 | - `find / findIndex` : pour trouver un élément (ou son index) satisfaisant une condition.
 66 | - `reduce` : pour réduire tout le tableau à une seule valeur selon une fonction d’accumulation (somme, produit, agrégation…).
 67 | 
 68 | Par exemple, supposons un tableau de nombres et on veut obtenir leur carré :
 69 | 
 70 | ```javascript
 71 | let nums = [1, 2, 3, 4];
 72 | let carres = nums.map((n) => n * n);
 73 | console.log(carres); // [1, 4, 9, 16]
 74 | ```
 75 | 
 76 | Ou filtrer les nombres pairs :
 77 | 
 78 | ```javascript
 79 | let pairs = nums.filter((n) => n % 2 === 0);
 80 | console.log(pairs); // [2, 4]
 81 | ```
 82 | 
 83 | Ces méthodes prennent en argument une fonction (souvent écrite en arrow function pour être concise). Elles évitent d’écrire des boucles manuelles et rendent le code plus lisible de façon fonctionnelle.
 84 | 
 85 | **Remarque performance** : Les tableaux JS ne sont pas des tableaux statiques comme en C/Java ; ce sont en réalité des objets spéciaux. Ils sont très optimisés en général, mais certaines opérations (comme insérer en début de grand tableau avec `unshift`) sont moins performantes que d’autres (ajouter en fin avec `push` est très efficace). Pour un usage normal, ne vous souciez pas trop de ces détails, mais sachez que la performance peut varier selon l’opération.
 86 | 
 87 | ## 4.2. Les objets (Objects)
 88 | 
 89 | Un **objet** en JavaScript est une collection de **paires clé-valeur** (on parle aussi de propriétés). C’est un peu comme un “dictionnaire” ou une “table de hachage” : à chaque nom de propriété est associée une valeur. Presque tout en JavaScript est objet (les tableaux eux-mêmes sont des objets particuliers, les fonctions sont des objets appelables, etc.). Mais ici on parle des objets JSON classiques.
 90 | 
 91 | ### Création d’objets
 92 | 
 93 | On peut utiliser des littéraux avec `{}`. Exemple :
 94 | 
 95 | ```javascript
 96 | let personne = {
 97 |   nom: "Moustapha",
 98 |   age: 30,
 99 |   ville: "Paris",
100 | };
101 | ```
102 | 
103 | Cet objet `personne` a trois propriétés. Pour accéder à une propriété, deux notations possibles :
104 | 
105 | - **La notation point** : `personne.nom` renvoie `"Moustapha"`.
106 | - **La notation avec crochets** : `personne["age"]` renvoie `30`. Celle-ci est utile si le nom de propriété est dans une variable ou contient des caractères spéciaux.
107 | 
108 | On peut ajouter ou modifier des propriétés :
109 | 
110 | ```javascript
111 | personne.profession = "Dev";
112 | personne["age"] = 29;
113 | ```
114 | 
115 | Pour supprimer une propriété, on utilise l’opérateur `delete : delete personne.ville;`.
116 | 
117 | Si on accède à une propriété qui n’existe pas, on obtient `undefined` (et non une erreur).
118 | 
119 | ### Itération sur les propriétés
120 | 
121 | On peut utiliser la boucle `for...in` pour parcourir les clés d’un objet :
122 | 
123 | ```javascript
124 | for (let cle in personne) {
125 |   console.log(cle + " : " + personne[cle]);
126 | }
127 | // Affiche par ex:
128 | // nom : Moustapha
129 | // age : 31
130 | // profession : Dev
131 | ```
132 | 
133 | Note : l’ordre d’énumération n’est pas garanti pour les objets non structurés, mais en pratique la plupart des moteurs énumèrent dans l’ordre d’insertion (pour les clés non numériques).
134 | 
135 | ### Objets imbriqués et tableaux d’objets :
136 | 
137 | Les valeurs dans un objet peuvent être n’importe quel type, y compris un autre objet ou un tableau. Par exemple :
138 | 
139 | ```javascript
140 | let entreprise = {
141 |   nom: "SuperCorp",
142 |   employes: [
143 |     { nom: "Moustapha", poste: "CEO" },
144 |     { nom: "Bob", poste: "Développeur" },
145 |   ],
146 | };
147 | console.log(entreprise.employes[1].poste); // "Développeur"
148 | ```
149 | 
150 | Ici `entreprise.employes` est un tableau d’objets, on peut enchaîner l’accès : le poste du 2ème employé (index 1) est "Développeur".
151 | 
152 | C’est courant de manipuler des **données au format JSON** qui sont exactement ces structures objets/tableaux combinées. Savoir naviguer dans ces structures est important. Vous pouvez utiliser `console.table(obj)` pour afficher un objet ou un tableau d’objets en table dans la console, ce qui aide à visualiser.
153 | 
154 | ### Copie et référence
155 | 
156 | Attention, en JavaScript, les objets (et tableaux) sont manipulés par **référence**. Si vous faites `let perso2 = personne;`, vous ne copiez pas l’objet, vous créez une nouvelle référence pointant vers le même objet.
157 | 
158 | Modifier `perso2.age` modifiera aussi `personne.age` car c’est le même objet en mémoire.
159 | 
160 | Pour copier un objet superficiellement, on peut utiliser
161 | 
162 | - `Object.assign({}, personne)`
163 | - ou l’opérateur de spread : let `persoCopy = {...personne};`.
164 | - Pour les tableaux, `arrCopy = [...arr];`.
165 | 
166 | Notez que ce sont des copies **superficielles** (shallow copy) : si l’objet a des sous-objets, ils resteront partagés entre copies (il faudrait une copie profonde pour les dupliquer aussi).
167 | 
168 | ## 4.3. Comparaison : Objets vs Tableaux vs Map
169 | 
170 | Il est important de choisir la bonne structure selon le besoin :
171 | 
172 | - On utilise un **tableau** quand on a une collection ordonnée d’éléments, généralement du même type logique, par exemple une liste de produits, une liste de noms, etc., et qu’on accède principalement par indice ou qu’on itère sur l’ensemble.
173 | - On utilise un **objet** pour représenter une entité structurée avec des propriétés nommées, par exemple un utilisateur avec nom, email, âge, etc., ou pour représenter une collection associative (clés/valeurs) quand les clés sont des chaînes peu nombreuses.
174 | - Pour des **données associatives dynamiques** où les clés ne sont pas connues à l’avance ou ne sont pas forcément des chaînes, JavaScript propose aussi la structure **Map** (ES6). Une Map est similaire à un objet mais avec des méthodes dédiées (`map.set(cle, valeur)`, `map.get(cle)`) et accepte n’importe quel type de clé (y compris objets). Pour un usage courant, un objet littéral suffit souvent, mais sachez que Map existe et peut être plus appropriée si vous avez beaucoup de paires clé-valeur à gérer et que la clé n’est pas forcément un string.
175 | 
176 | ## 4.4. Exemples concrets et manipulation de JSON
177 | 
178 | **Exemple 1**: Vous récupérez des données d’un utilisateur en JSON (on verra comment avec fetch plus tard). Par exemple :
179 | 
180 | ```javascript
181 | let user = {
182 | "id": 101,
183 | "name": "John Doe",
184 | "address": {
185 | "city": "Paris",
186 | "zip": 75001
187 | },
188 | "roles": ["admin", "editor"]
189 | };
190 | ```
191 | 
192 | Pour accéder aux informations :
193 | 
194 | - `user.name` est "John Doe",
195 | - `user.address.city` est "Paris",
196 | - `user.roles[0]` est "admin".
197 |   Si vous voulez lister tous les rôles de l’utilisateur :
198 | 
199 | ```js
200 | for (let role of user.roles) {
201 | console.log(role);
202 | }
203 | ```
204 | 
205 | **Exemple 2** : Vous souhaitez stocker plusieurs utilisateurs :
206 | 
207 | ```js
208 | let users = [
209 | { id: 1, name: "Moustapha" },
210 | { id: 2, name: "Bob" },
211 | { id: 3, name: "Charlie" }
212 | ];
213 | ```
214 | 
215 | Ici `users` est un tableau de trois objets utilisateur. Pour trouver l’utilisateur avec id 2 :
216 | 
217 | ```js
218 | let user2 = users.find(u => u.id === 2);
219 | console.log(user2.name); // "Bob"
220 | ```
221 | 
222 | On utilise la méthode `find` avec une fonction fléchée conditionnelle.
223 | 
224 | ## Bonnes pratiques :
225 | 
226 | - Lorsque vos données deviennent complexes (beaucoup d’objets imbriqués), essayez de structurer de manière logique et cohérente. Par exemple, évitez des tableaux trop hétérogènes ou des objets aux propriétés non uniformes entre eux.
227 | - Exploitez les méthodes natives (**map**, **filter**, **etc**.) au lieu de tout coder à la main : c’est généralement optimisé et plus lisible.
228 | - Faites attention aux **mutations** : beaucoup de méthodes de tableau (push, pop, etc.) modifient le tableau original. Parfois on préfère utiliser des méthodes non mutables (par ex, `concat` pour concaténer sans modifier, ou utiliser **... spread operator**) surtout dans un contexte où on veut éviter les effets de bord (pattern de programmation plus fonctionnelle).
229 | - Apprenez à utiliser la console pour examiner vos objets. Par exemple `console.log(JSON.stringify(obj))` peut aider à imprimer un objet entier en JSON (s’il n’a pas de références circulaires), ou utilisez les devtools pour inspecter l’objet.
230 | 
231 | ## 4.5. Exercices pratiques sur tableaux/objets
232 | 
233 | 1. **Manipulation d’un tableau de nombres** : Écrivez un script qui crée un tableau contenant par exemple `[10, 5, 8, 12, 3]`. Calculez la **somme** de ces nombres (en parcourant le tableau), puis la **moyenne**. Affichez-les. Ensuite, trouvez la **valeur maximale** du tableau (sans utiliser de fonction prête à l’emploi type Math.max, faites-le à la main dans une boucle).
234 | 2. **Recherche dans un tableau** : Reprenez le tableau précédent. Demandez-vous comment vérifier la présence d’une valeur, par exemple 8, dans ce tableau. Utilisez soit `includes`, soit parcourez jusqu’à trouver l’élément (et notez l’index trouvé via `indexOf` ou en le stockant).
235 | 3. **Objets simples** : Créez un objet `livre` avec des propriétés `titre`, `auteur`, `annee`. Remplissez-le avec un livre de votre choix. Puis, ajoutez dynamiquement une propriété `genre`. Enfin, affichez un petit texte du style : "*Le livre {titre}, écrit par {auteur}, est un {genre} publié en {annee}."*.
236 | 4. **Tableau d’objets**: Créez un tableau `bibliotheque` qui contient plusieurs objets livres (2 ou 3). Écrivez une fonction `trouverLivreParAuteur(auteur)` qui renvoie le premier livre de la bibliothèque écrit par l’auteur donné (utilisez `find`). Testez-la.
237 | 5. **Transformation de données** : À partir du tableau `bibliotheque`, utilisez `map` pour créer un nouveau tableau contenant uniquement les titres des livres. Puis utilisez `filter` pour ne garder que les livres publiés après l’an 2010 (supposons que l’un de vos livres a une année correspondante).
238 | 
239 | En pratiquant ces opérations, vous vous familiariserez avec la manipulation des données en JavaScript – une compétence cruciale pour le développement d’applications web qui souvent reçoivent, transforment et affichent des données.
240 | 
241 | Dans le prochain module, nous allons plonger dans le **DOM et les événements**, ce qui nous permettra d’appliquer ces bases pour réellement **interagir avec la page web**.
242 | 


--------------------------------------------------------------------------------
/cours/javascript/README.md:
--------------------------------------------------------------------------------
 1 | # Cours Complet JavaScript : De Débutant à Expert en Applications Web Dynamiques
 2 | 
 3 | Bienvenue dans ce **cours complet et progressif** pour apprendre **JavaScript** et le développement d’**applications web dynamiques**.
 4 | 
 5 | Ce cours s’adresse **aux débutants partant de zéro**, et vous emmènera pas à pas vers des **notions avancées** afin de vous donner les **compétences d’un développeur web JavaScript expert**.
 6 | 
 7 | Nous avons organisé le contenu en **modules** avec :
 8 | - des **explications claires**,
 9 | - des **bonnes pratiques de programmation**,
10 | - des **astuces pédagogiques**,
11 | - et des **exercices pratiques**.
12 | 
13 | Tout au long du parcours, nous **comparerons différentes approches de programmation** pour comprendre **pourquoi l’une peut être meilleure que l’autre dans certains cas**.
14 | 
15 | Nous **intégrerons également progressivement du HTML/CSS** dans des **projets concrets** pour mettre en pratique vos connaissances JavaScript en **construisant des pages web interactives complètes**.
16 | 
17 | ---
18 | 
19 | > **Note** : Pour tirer le meilleur parti de ce cours, il est recommandé d’y consacrer du temps régulièrement.  
20 | > Si vous apprenez à temps plein, vous pouvez suivre un rythme d’environ **un module par semaine** (voir la proposition de progression hebdomadaire en fin de document).  
21 | > N’hésitez pas à consulter la **documentation officielle** (par ex. [MDN Web Docs](https://developer.mozilla.org/fr/docs/Web/JavaScript) ou le tutoriel JavaScript moderne [fr.javascript.info](https://fr.javascript.info/)) pour approfondir certains concepts.
22 | 


--------------------------------------------------------------------------------