From faf2d283dd5c1e2df8760d7ece67b6436b1cc229 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Tue, 13 May 2025 15:56:57 +0200
Subject: [PATCH 1/8] docs(navigation): remove introductory documentation
 section

---
 app/libs/navigation.ts                      | 10 +--
 app/pages/docs/frontend/+Page.mdx           |  8 ---
 app/pages/docs/javascript/+Page.mdx         | 71 +++++++++++++++++++++
 app/pages/docs/javascript/syntaxe/+Page.mdx |  7 ++
 4 files changed, 83 insertions(+), 13 deletions(-)
 delete mode 100644 app/pages/docs/frontend/+Page.mdx
 create mode 100644 app/pages/docs/javascript/+Page.mdx
 create mode 100644 app/pages/docs/javascript/syntaxe/+Page.mdx

diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts
index 8e160de..a45624c 100644
--- a/app/libs/navigation.ts
+++ b/app/libs/navigation.ts
@@ -104,11 +104,6 @@ export const navigation: NavigationSection[] = [
 		type: navigationsTypes.DOCUMENTATIONS,
 		position: "auto",
 		links: [
-			{
-				title: "Introduction",
-				href: "/docs/frontend",
-				subitems: [],
-			},
 			{
 				title: "HTML",
 				href: "/docs/html",
@@ -120,6 +115,11 @@ export const navigation: NavigationSection[] = [
 					{ title: "Formulaires", href: "/docs/html/formulaires" },
 				],
 			},
+			{
+				title: "JavaScript",
+				href: "/docs/javascript",
+				subitems: [{ title: "Introduction", href: "/docs/javascript" }],
+			},
 			{
 				title: "React",
 				href: "/docs/react",
diff --git a/app/pages/docs/frontend/+Page.mdx b/app/pages/docs/frontend/+Page.mdx
deleted file mode 100644
index db87694..0000000
--- a/app/pages/docs/frontend/+Page.mdx
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: "Introduction au Frontend : Langages et technologies"
-description: 
-tags: []
----
-
-import Callout from "@/components/Callout";
-
diff --git a/app/pages/docs/javascript/+Page.mdx b/app/pages/docs/javascript/+Page.mdx
new file mode 100644
index 0000000..1672159
--- /dev/null
+++ b/app/pages/docs/javascript/+Page.mdx
@@ -0,0 +1,71 @@
+---
+title: Introduction à JavaScript
+description: Parlons un peu de JavaScript, le langage de programmation incontournable pour le développement web.
+tags: []
+---
+
+import Callout from "@/components/Callout";
+
+**JavaScript** est un langage de programmation populaire qui permet d'ajouter des fonctionnalités interactives aux pages web.
+Contrairement au HTML qui définit la structure et le contenu d'une page, JavaScript peut manipuler ces éléments dynamiquement et créer une expérience utilisateur plus riche.
+
+<Callout type="note" title="Environnement d'exécution">
+  Dans le cadre de cette série d'articles, nous allons principalement nous concentrer sur l'environnement d'exécution du navigateur.
+
+  Cependant, il est important de noter que JavaScript peut également être exécuté côté serveur grâce à des environnements comme **Node.js**.
+</Callout>
+
+## L'histoire de JavaScript
+
+JavaScript a été créé en 1995 par **Brendan Eich** alors qu'il travaillait chez Netscape _(un ancien navigateur web)_.  
+Il a été conçu à l'origine pour ajouter des fonctionnalités interactives aux pages web, mais il a rapidement évolué pour devenir un langage de programmation complet.
+
+Aujourd'hui, JavaScript est utilisé dans presque tous les sites web modernes et est devenu un standard pour le développement web.
+
+## Pourquoi JavaScript est-il si populaire ?
+
+JavaScript est devenu l'un des langages de programmation les plus populaires pour plusieurs raisons :
+
+- **Interactivité** : JavaScript permet d'ajouter des fonctionnalités interactives aux pages web, comme des animations, des formulaires dynamiques, etc.
+- **Compatibilité** : JavaScript est pris en charge par tous les navigateurs modernes, ce qui le rend accessible à un large public.
+- **Écosystème riche** : Il existe de nombreuses bibliothèques et frameworks/bibliothèques JavaScript, comme **React**, **Vue.js** et **Angular**, qui facilitent le développement d'applications web complexes.
+- **Communauté active** : JavaScript a une grande communauté de développeurs qui partagent des ressources, des tutoriels et des outils pour aider les autres à apprendre et à progresser.
+
+Cependant, il est important de noter que JavaScript a également ses inconvénients :
+
+- **Typage faible** : JavaScript est un langage à typage faible, ce qui signifie que le type d'une variable n'est pas défini explicitement et peut changer au cours de l'exécution du programme.
+- **Gestion asynchrone** : La nature asynchrone de JavaScript, peut rendre le code plus ddificile à comprendre et à maintenir.
+- **Support pour la POO** : Bien que JavaScript prenne en charge la programmation orientée objet, il ne le fait pas de la même manière que d'autres langages comme Java ou C#.  
+  Il utilise plutôt un modèle basé sur les prototypes, ce qui peut être déroutant pour les développeurs habitués à d'autres langages.
+- **Performances** : Bien que JavaScript soit généralement rapide, il peut être moins performant que d'autres langages compilés comme C++ ou Rust pour certaines tâches intensives en calcul.
+
+Mais alors, est-ce que JavaScript est un bon choix pour le développement web ?  
+Voyons ça ensemble !
+
+## Pourquoi utiliser JavaScript ?
+
+Déjà, il faut prendre en compte que JavaScript est **l'unique** langage de programmation qui peut être exécuté dans le navigateur.  
+Cela signifie que si vous voulez créer des applications web interactives, JavaScript est le langage à utiliser.
+
+<Callout type="note" title="Le cas des langages compilés">
+  Il existe des langages compilés qui peuvent être utilisés pour créer des applications web, comme **TypeScript** ou **WebAssembly**.  
+  Cependant, ces langages sont généralement transpilés en JavaScript avant d'être exécutés dans le navigateur.
+
+  Ça signifie que même si vous utilisez un autre langage, il y a de fortes chances qu'il soit finalement converti en JavaScript pour être exécuté dans le navigateur.
+</Callout>
+
+À partir de là, le fait d'apprendre JavaScript si l'on veut devenir développeur web est un choix évident.
+
+## Ce qui t'attend dans cette série d'articles
+
+Comme dit précédemment, cette série d'articles va se concentrer sur l'environnement d'exécution du navigateur.  
+On va donc aborder les sujets suivants :
+
+- La syntaxe de base de JavaScript
+- Les types de données
+- La compréhension et manipulation du DOM
+- Les événements
+- Les fonctions et la portée
+- Le principe d'asynchrone
+
+Chaque article de cette série sera conçu pour être facilement compréhensible, avec des exemples pratiques et une explication des concepts.
\ No newline at end of file
diff --git a/app/pages/docs/javascript/syntaxe/+Page.mdx b/app/pages/docs/javascript/syntaxe/+Page.mdx
new file mode 100644
index 0000000..cde28fc
--- /dev/null
+++ b/app/pages/docs/javascript/syntaxe/+Page.mdx
@@ -0,0 +1,7 @@
+---
+title: La syntaxe de base de JavaScript
+description: Découvrons ensemble la syntaxe de base de JavaScript et comment il fonctionne dans le navigateur.
+tags: []
+---
+
+import Callout from "@/components/Callout";
-- 
2.45.2


From 0982e573dba264c7081be5ce60373eb2fd806438 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Tue, 13 May 2025 18:18:22 +0200
Subject: [PATCH 2/8] style(Highlight): improve code readability

---
 app/components/Highlight.tsx                  |   9 +-
 app/components/Snippet.tsx                    |   2 +-
 app/libs/navigation.ts                        |   6 +-
 .../docs/javascript/instructions/+Page.mdx    | 180 +++++++++++++++++
 .../docs/javascript/instructions/tabs.tsx     | 105 ++++++++++
 app/pages/docs/javascript/syntaxe/+Page.mdx   | 191 ++++++++++++++++++
 app/pages/docs/javascript/syntaxe/tabs.tsx    |  95 +++++++++
 7 files changed, 583 insertions(+), 5 deletions(-)
 create mode 100644 app/pages/docs/javascript/instructions/+Page.mdx
 create mode 100644 app/pages/docs/javascript/instructions/tabs.tsx
 create mode 100644 app/pages/docs/javascript/syntaxe/tabs.tsx

diff --git a/app/components/Highlight.tsx b/app/components/Highlight.tsx
index dc6d2a4..59c2485 100644
--- a/app/components/Highlight.tsx
+++ b/app/components/Highlight.tsx
@@ -34,10 +34,10 @@ export const Highlight: ParentComponent<Props> = (_props) => {
 
 	const highlightedCode = createMemo<string | undefined>(() => {
 		const childrenString = props.children?.toString();
-		if (!childrenString) return;
+		if (!childrenString) return "";
 
 		const grammar = Prismjs.languages[props.language];
-		if (!grammar) return;
+		if (!grammar) return "";
 
 		const result = Prismjs.highlight(childrenString, grammar, props.language);
 
@@ -102,7 +102,10 @@ export const Highlight: ParentComponent<Props> = (_props) => {
 			)}
 
 			<pre
-				class={clsx("not-prose h-full w-full prism-code flex", languageClass())}
+				class={clsx(
+					"relative not-prose h-full w-full prism-code flex",
+					languageClass(),
+				)}
 			>
 				<code
 					class={clsx("leading-6", props.withLineNumbers ? "px-4" : "pr-4")}
diff --git a/app/components/Snippet.tsx b/app/components/Snippet.tsx
index 136e09c..d6ecc00 100644
--- a/app/components/Snippet.tsx
+++ b/app/components/Snippet.tsx
@@ -4,7 +4,7 @@ import { For, createSignal } from "solid-js";
 import { Highlight } from "./Highlight";
 import clsx from "clsx";
 
-function TrafficLightsIcon(props: JSX.IntrinsicElements["svg"]) {
+export function TrafficLightsIcon(props: JSX.IntrinsicElements["svg"]) {
 	return (
 		<svg aria-hidden="true" viewBox="0 0 42 10" fill="none" {...props}>
 			<circle cx="5" cy="5" r="4.5" class="fill-red-400" />
diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts
index a45624c..671fae1 100644
--- a/app/libs/navigation.ts
+++ b/app/libs/navigation.ts
@@ -118,7 +118,11 @@ export const navigation: NavigationSection[] = [
 			{
 				title: "JavaScript",
 				href: "/docs/javascript",
-				subitems: [{ title: "Introduction", href: "/docs/javascript" }],
+				subitems: [
+					{ title: "Introduction", href: "/docs/javascript" },
+					{ title: "Syntaxe", href: "/docs/javascript/syntaxe" },
+					{ title: "Instructions", href: "/docs/javascript/instructions" },
+				],
 			},
 			{
 				title: "React",
diff --git a/app/pages/docs/javascript/instructions/+Page.mdx b/app/pages/docs/javascript/instructions/+Page.mdx
new file mode 100644
index 0000000..fc151e4
--- /dev/null
+++ b/app/pages/docs/javascript/instructions/+Page.mdx
@@ -0,0 +1,180 @@
+---
+title: Les instructions avec JavaScript
+description: Voyons comment écrire et comprendre des instructions avec JavaScript.
+tags: []
+---
+
+import Callout from "@/components/Callout";
+import tabs from "./tabs";
+
+Maintenant que nous avons vu la syntaxe de base de JavaScript, il est temps de plonger dans les instructions.
+
+## Qu'est-ce qu'une instruction ?
+
+Une instruction est une ligne de code qui effectue une **action spécifique**.  
+Il s'agit de la **brique de base** de tout programme et JavaScript ne fait pas exception à la règle !
+
+Par exemple, voici quelques instructions simples en JavaScript :
+
+<tabs.jsBasicInstructions />
+
+Dans cet exemple, nous avons trois instructions :
+- La première instruction affiche un message dans la console avec `console.log()`.
+- La deuxième instruction déclare une variable `nom` et lui assigne la valeur `"John Doe"`.
+- La troisième instruction est une condition sur une variable `age` qui affiche un message différent selon la valeur de `age`.
+
+## Les différents types d'instructions
+
+Comme vu plus tôt, il existe plusieurs types d'instructions en JavaScript.
+
+### Instructions de déclaration
+
+Les instructions de déclaration sont utilisées pour déclarer des **variables**, des **fonctions** ou des **classes**.
+
+C'est ce qui était fait dans l'exemple précédent avec la déclaration de la variable `nom`.
+
+### Instructions de contrôle de flux
+
+Les instructions de contrôle de flux sont utilisées pour contrôler le flux d'exécution du programme.  
+Elles permettent de prendre des décisions selon certaines **conditions**.
+
+### Instructions de boucle
+
+Les instructions de boucle sont utilisées pour exécuter un bloc de code plusieurs fois.  
+Elles sont souvent utilisées pour parcourir des tableaux _(un regroupement de données)_.
+
+### Instructions de gestion des erreurs
+
+Pour gérer les erreurs, JavaScript nous met à disposition des instructions comme `try`, `catch` et `finally`.
+
+Ces instructions permettent de gérer les erreurs qui peuvent survenir lors de l'exécution du code.
+
+### Autres instructions
+
+Il existe d'autres instructions comme `return`, `break`, `continue`, `throw` ou encore `debugger` qui sont utilisées pour des cas spécifiques.
+
+On les utilisera au fur et à mesure de notre apprentissage.
+
+## Faisons notre premier programme !
+
+Maintenant que nous avons vu les instructions de base, il est temps de mettre tout cela en pratique.
+
+> Quoi ?! Mais je ne sais pas à quoi ça ressemble !
+
+Pas de panique ! On ne va pas faire du JavaScript pur tout de suite 😉.  
+On va commencer par du **pseudo-code**.
+
+### Qu'est-ce que le pseudo-code ?
+
+Le pseudo-code est une façon de décrire un algorithme ou un programme sans se soucier de la syntaxe d'un langage de programmation particulier.
+
+Il utilise un langage simple et compréhensible par tous, ce qui permet de se concentrer sur la logique du programme plutôt que sur les détails de la syntaxe.
+
+Voici quelques exemples de pseudo-code :
+
+<tabs.pseudoCode />
+
+Tu as évidemment le droit de changer les mots pour les adapter à ton propre style ou à ta propre compréhension. L'idée, c'est juste d'écrire un algorithme qui soit compréhensible par toi-même et par les autres.
+
+### Challenge
+
+Maintenant, c'est à ton tour de jouer !
+
+Tu vas devoir écrire un pseudo-code qui :
+
+- Demande à l'utilisateur son nom.
+- Demande à l'utilisateur son âge.
+- Si l'utilisateur est majeur _(18 ans ou plus)_, affiche un message de bienvenue.
+- Sinon, affiche un message lui disant qu'il n'est pas majeur.
+
+<Callout type="question" title="Comment dois-je m'y prendre ?">
+  Pour ce challenge, tu peux utiliser les instructions suivantes :
+  
+  - `DEBUT` : Indique le début du programme.
+  - `FIN` : Indique la fin du programme.
+  - `VARIABLE x` : Indique la déclaration d'une variable nomée `x`.
+  - `LIRE x` : Indique la lecture d'une valeur pour la variable `x`.
+  - `AFFICHER "..."` : Indique l'affichage du message entre guillemets.
+  - `SI ... ALORS` : Indique une condition.
+  - `SINON` : Indique le cas où la condition n'est pas remplie.
+  - `FIN SI` : Indique la fin de la condition.
+  - `x >= y` : Indique une comparaison entre la variable `x` et la valeur `y`.
+
+  Pour le moment, tu n'as pas besoin de te soucier de la syntaxe JavaScript.
+</Callout>
+
+### Traduire le pseudo-code en JavaScript
+
+Une fois que tu as écrit ton pseudo-code, il est temps de le traduire en JavaScript.
+
+Puisque je ne peux pas lire dans tes pensées, je vais te donner un exemple de pseudo-code final, pour que l'on voit ensuite comment le traduire en JavaScript !
+
+<tabs.pseudoCodeFinal />
+
+Dans cet exemple, on retrouve :
+
+- **Lignes 1 et 15 :** Le début et la fin du programme.
+- **Ligne 2 :** La déclaration de la variable `nom`.
+- **Ligne 3 :** Affichage du message demandant le nom de l'utilisateur.
+- **Ligne 4 :** Lecture et enregistrement de la valeur saisie par l'utilisateur dans la variable `nom`.
+- **Ligne 6 :** La déclaration de la variable `age`.
+- **Ligne 7 :** Affichage du message demandant l'âge de l'utilisateur.
+- **Ligne 8 :** Lecture et enregistrement de la valeur saisie par l'utilisateur dans la variable `age`.
+- **Ligne 10 :** La condition qui vérifie si l'utilisateur est majeur.
+- **Ligne 11 :** Affichage du message de bienvenue si l'utilisateur est majeur.
+- **Ligne 13 :** Affichage du message indiquant que l'utilisateur n'est pas majeur.
+- **Ligne 14 :** Fin de la condition.
+
+Et voilà !  
+Maintenant, il ne te reste plus qu'à traduire ce pseudo-code en JavaScript... 😏
+
+### Challenge 2
+
+Ce que je vais faire, c'est te donner l'équivalent de certaines instructions en JavaScript pour t'aider à traduire ton pseudo-code en JavaScript.
+
+- `DEBUT` : Pas d'équivalent en JavaScript _(ouf !)_
+- `FIN` : Pas d'équivalent en JavaScript _(ouf !)_
+- `VARIABLE x` : `let x;` ou `const x;`
+- `LIRE x` : `x = prompt("...");` _(`"..."` est le message affiché à l'utilisateur)_
+- `AFFICHER "..." + x` : `console.log("... " + x);`
+- `SI ... ALORS` : `if (...) {`
+- `SINON` : `} else {`
+- `FIN SI` : `}`
+- `x >= y` : `x >= y` _(pas de changement, ouf !)_
+
+Prêt à en découdre ? 💪
+
+### Tester ton programme
+
+Une fois que tu as traduit ton pseudo-code en JavaScript, il est temps de tester ton programme !
+
+Pour pouvoir le tester, tu peux tout simplement copier-coller ton code dans la console de ton navigateur ou dans un éditeur de code en ligne comme [CodePen](https://codepen.io/) ou [JSFiddle](https://jsfiddle.net/).
+
+### Correction
+
+Pour l'équivalent de l'exemple de pseudo-code, voici ce que ça donne en JavaScript :
+
+<tabs.jsFinal />
+
+Et voilà ! 🎉  
+Mais faisons un petit tour d'horizon sur ce code pour bien comprendre ce qu'il fait.
+
+- **Ligne 2 :** On déclare une variable `nom` avec le mot-clé `const`, puis on lui assigne la valeur saisie par l'utilisateur avec `prompt()`.
+- **Ligne 5 :** On déclare une variable `age` avec le mot-clé `const`, puis on lui assigne la valeur saisie par l'utilisateur avec `prompt()`.
+- **Ligne 8 :** On vérifie si l'utilisateur est majeur avec une condition `if (age >= 18)`.
+- **Ligne 9 :** Si l'utilisateur est majeur, on affiche un message de bienvenue avec `console.log()`.
+- **Ligne 10 :** Sinon...
+- **Ligne 11 :** On affiche un message indiquant que l'utilisateur n'est pas majeur avec `console.log()`.
+- **Ligne 12 :** Fin de la condition.
+
+## Conclusion
+
+Pfiou, ça fait déjà pas mal de choses à digérer ! 😅
+
+On a vu les instructions de base en JavaScript, comment écrire du pseudo-code et comment le traduire en JavaScript.  
+On a même fait un petit programme ensemble !
+
+Il est temps de faire une pause et de digérer tout ça avant de passer à la suite.  
+C'est important de ne pas vouloir aller trop vite en enchaînant les articles, surtout quand on débute.
+
+Prends le temps de bien comprendre chaque concept avant de passer au suivant, et n'hésite pas à revenir sur les bases si tu as des doutes !
\ No newline at end of file
diff --git a/app/pages/docs/javascript/instructions/tabs.tsx b/app/pages/docs/javascript/instructions/tabs.tsx
new file mode 100644
index 0000000..f051fac
--- /dev/null
+++ b/app/pages/docs/javascript/instructions/tabs.tsx
@@ -0,0 +1,105 @@
+import { Snippet } from "@/components/Snippet";
+
+const jsBasicInstructionsSnippets = [
+	{
+		name: "Instruction d'affichage dans la console",
+		codeLanguage: "js",
+		code: `console.log("Hello, World!");`,
+	},
+	{
+		name: "Instruction de déclaration",
+		codeLanguage: "js",
+		code: `const nom = "John Doe";`,
+	},
+	{
+		name: "Instruction de condition",
+		codeLanguage: "js",
+		code: `if (age >= 18) {
+  console.log("Vous êtes majeur.");
+} else {
+  console.log("Vous êtes mineur.");
+}`,
+	},
+];
+
+const pseudoCodeSnippets = [
+	{
+		name: "Pseudo-code d'affichage",
+		codeLanguage: "pseudocode",
+		code: `AFFICHER "Bonjour, le monde!"`,
+	},
+	{
+		name: "Pseudo-code d'une fonction simple",
+		codeLanguage: "pseudocode",
+		code: `FONCTION somme(a, b)
+	RETOURNER a + b
+FIN FONCTION`,
+	},
+	{
+		name: "Pseudo-code d'une boucle",
+		codeLanguage: "pseudocode",
+		code: `POUR i DE 1 À 10
+	AFFICHER i
+FIN POUR`,
+	},
+	{
+		name: "Pseudo-code d'une condition",
+		codeLanguage: "pseudocode",
+		code: `SI age >= 18 ALORS
+	AFFICHER "Vous êtes majeur."
+SINON
+	AFFICHER "Vous êtes mineur."
+FIN SI`,
+	},
+];
+
+const pseudoCodeFinalSnippets = [
+	{
+		name: "Pseudo-code du challenge",
+		codeLanguage: "pseudocode",
+		withLineNumbers: true,
+		code: `DEBUT
+	VARIABLE nom
+	AFFICHER "Entrez votre nom :"
+	LIRE nom
+
+	VARIABLE age
+	AFFICHER "Entrez votre âge :"
+	LIRE age
+
+	SI age >= 18 ALORS
+		AFFICHER "Bienvenue " + nom + ", vous êtes majeur."
+	SINON
+		AFFICHER "Désolé " + nom + ", vous êtes mineur."
+	FIN SI
+FIN`,
+	},
+];
+
+const jsFinalSnippets = [
+	{
+		name: "Code du challenge",
+		codeLanguage: "js",
+		withLineNumbers: true,
+		code: `// Demander le nom de l'utilisateur
+const nom = prompt("Entrez votre nom :");
+
+// Demander l'âge de l'utilisateur
+const age = prompt("Entrez votre âge :");
+
+// Vérifier si l'utilisateur est majeur ou mineur
+if (age >= 18) {
+	console.log("Bienvenue " + nom + ", vous êtes majeur.");
+} else {
+	console.log("Désolé " + nom + ", vous êtes mineur.");
+}`,
+	},
+	...pseudoCodeFinalSnippets,
+];
+
+export default {
+	jsBasicInstructions: () => <Snippet snippets={jsBasicInstructionsSnippets} />,
+	pseudoCode: () => <Snippet snippets={pseudoCodeSnippets} />,
+	pseudoCodeFinal: () => <Snippet snippets={pseudoCodeFinalSnippets} />,
+	jsFinal: () => <Snippet snippets={jsFinalSnippets} />,
+};
diff --git a/app/pages/docs/javascript/syntaxe/+Page.mdx b/app/pages/docs/javascript/syntaxe/+Page.mdx
index cde28fc..4646793 100644
--- a/app/pages/docs/javascript/syntaxe/+Page.mdx
+++ b/app/pages/docs/javascript/syntaxe/+Page.mdx
@@ -5,3 +5,194 @@ tags: []
 ---
 
 import Callout from "@/components/Callout";
+import tabs from "./tabs";
+
+Pour cet article, nous allons explorer les fondements de la syntaxe de base du langage JavaScript.
+
+Mais déjà, faisons un rappel sur ce qu'est la syntaxe !
+
+## Qu'est-ce que la syntaxe ?
+
+La syntaxe d'un langage de programmation vient définir les règles et les conventions à suivre lors de l'écriture du code. Elle permet de structurer le code de manière cohérente et facilement compréhensible pour les développeurs et les machines.
+
+La syntaxe de JavaScript est inspirée de plusieurs langages, notamment **Java**, **C** et **Python**.  
+Elle est conçue pour être simple et intuitive, ce qui en fait un excellent choix pour les débutants.
+
+## Structure du code JavaScript
+
+La structure de base d'un programme JavaScript est assez simple.  
+Un programme JavaScript est généralement constitué de plusieurs éléments, notamment :
+
+- **Instructions** : Les lignes de code qui effectuent des actions.
+- **Commentaires** : Utilisés pour ajouter des notes explicatives dans le code.
+- **Variables** : Utilisées pour stocker des données.
+- **Fonctions** : Utilisées pour encapsuler des blocs de code réutilisables.
+
+## Instructions
+
+Les instructions sont les lignes de code qui effectuent des actions.  
+Il peut s'agir d'opérations mathématiques, de manipulations de chaînes de caractères, d'appels de fonctions, etc.
+
+Bien que ça ne soit pas obligatoire en JavaScript, une instruction se termine généralement par un **point-virgule** _(`;`)_.
+
+<tabs.jsInstructions />
+
+Parmis les instructions, on trouve :
+
+- **Déclaration de variable** : Utilisée pour déclarer une variable.
+- **Affectation** : Utilisée pour assigner une valeur à une variable.
+- **Appel de fonction/méthode** : Utilisée pour appeler une fonction ou une méthode.
+- **Opérations mathématiques** : Utilisées pour effectuer des calculs.
+- **Manipulation de chaînes de caractères** : Utilisée pour manipuler des chaînes de caractères.
+- **Conditions** : Utilisées pour exécuter du code en fonction de certaines conditions.
+- **Boucles** : Utilisées pour exécuter du code plusieurs fois.
+- **Retour de valeur** : Utilisée pour retourner une valeur d'une fonction.
+
+Mais on se garde tout ça pour plus tard 😉.
+
+## Commentaires
+
+Les commentaires sont des sections de code qui ne sont pas exécutées. Elles sont utilisées pour ajouter des notes ou des explications sur le code.
+
+Il existe trois types de commentaires en JavaScript :
+
+- **Commentaire sur une seule ligne** : Utilise `//` pour commenter une seule ligne.
+- **Commentaire sur plusieurs lignes** : Utilise `/* ... */` pour commenter plusieurs lignes.
+- **Commentaire de documentation** : Utilise `/** ... */` pour documenter des fonctions ou des classes.
+
+<tabs.jsComments />
+
+<Callout type="note" title="Commentaire de documentation">
+  Le commentaire de documentation est souvent utilisé pour générer automatiquement la documentation du code.  
+  Il est généralement utilisé avec des outils comme JSDoc.
+
+  Il permet de décrire les paramètres, le type de retour et d'autres informations utiles sur la fonction ou la classe.
+</Callout>
+
+## Variables
+
+Les variables sont utilisées pour stocker des valeurs qui peuvent être modifiées au cours de l'exécution du programme.  
+En JavaScript, les variables doivent être déclarées avant d'être utilisées.
+
+Il existe trois façons de déclarer une variable :
+
+- `var` : Utilisé pour déclarer une variable globale ou locale.
+- `let` : Utilisé pour déclarer une variable locale avec une portée de bloc.
+- `const` : Utilisé pour déclarer une variable constante dont la valeur ne peut pas être modifiée.
+
+On reparlera de cette histoire de portée dans un prochain article, mais pour l'instant, voici un exemple de déclaration de variable :
+
+<tabs.jsVariables />
+
+Dans cet exemple, nous avons déclaré trois variables : `nom`, `age` et `ville`.
+
+### Variable avec var
+
+La déclaration de variable avec `var` est la plus ancienne, mais elle est moins recommandée aujourd'hui en raison de son comportement particulier.
+
+La valeur d'une variable déclarée avec `var` peut être modifiée à tout moment.
+
+<Callout type="warning" title="Utilisation de var">
+  `var` est une déclaration de variable qui a une portée fonctionnelle ou globale.  
+  On verra dans un prochain article de quoi il s'agit.
+</Callout>
+
+### Variable avec let
+
+La déclaration de variable avec `let` est plus moderne et est recommandée pour la plupart des cas.  
+Elle permet de déclarer une variable avec une portée de bloc _(block scope)_.
+
+La valeur d'une variable déclarée avec `let` peut être modifiée.
+
+### Variable avec const
+
+La déclaration de variable avec `const` est similaire à `let`, mais elle est utilisée pour déclarer une variable constante.  
+Elle profite du même concept de portée de bloc.
+
+La valeur d'une variable déclarée avec `const` ne peut pas être modifiée après sa déclaration.
+
+## Fonctions
+
+Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique.  
+Elles peuvent prendre des **paramètres en entrée** et **retourner une valeur en sortie**.
+
+En JavaScript, une fonction peut être déclarée de plusieurs manières :
+
+- **Fonction déclarée** : Utilise le mot-clé `function` suivi du nom de la fonction.
+- **Fonction anonyme** : N'a pas de nom et est généralement utilisée comme argument pour une autre fonction.
+- **Fonction fléchée** : Une syntaxe plus concise pour déclarer des fonctions.
+
+<tabs.jsFunctions />
+
+### Fonction déclarée
+
+La déclaration de fonction est la méthode la plus simple à utiliser.  
+Elle est déclarée avec le mot-clé `function` suivi du nom de la fonction et des parenthèses.
+
+### Fonction anonyme
+
+Dans certains cas, il peut être utile de déclarer une fonction sans lui donner de nom.  
+C'est ce qu'on appelle une fonction anonyme.
+
+Elle est souvent utilisée comme argument pour une autre fonction ou pour créer des fonctions de rappel _(callback functions)_.
+
+### Fonction fléchée
+
+La fonction fléchée est une syntaxe plus concise et moderne pour déclarer des fonctions.  
+Elle a un comportement particulier dans le contexte de retour de valeur, avec une syntaxe raccourcie pour les fonctions à une seule ligne.
+
+<Callout type="question" title="Comment fonctionne le retour de valeur des fonctions fléchées ?">
+  Dans une fonction classique, on utilise le mot-clé `return` pour retourner une valeur.  
+  Le fonctionnement est identique pour les fonctions fléchées, mais il est possible de profiter d'une syntaxe raccourcie !
+
+  Dans le cas d'une fonction fléchée à une seule ligne, il n'est pas nécessaire d'utiliser le mot-clé `return`.
+
+  C'est d'ailleurs ce qui est fait dans l'exemple donné plus tôt, avec un retour implicite de `a + b`.
+</Callout>
+
+## Bonnes pratiques
+
+### Conventions de nommage
+
+Il est important de suivre certaines conventions pour rendre le code plus lisible et maintenable.
+Voici quelques-unes des conventions les plus courantes :
+
+- Utiliser des noms de variables et de fonctions significatifs.
+- Indenter le code pour améliorer la lisibilité.
+- Utiliser des commentaires pour expliquer le code complexe.
+- Placer un `;` _(point virgule)_ à la fin de chaque instruction.
+
+<Callout type="warning" title="Attention aux commentaires !">
+  Écrire des commentaires : c'est bien ✅.  
+  Écrire trop de commentaires : **c'est pas bien** ❌.
+
+  L'intérêt des commentaires est d'expliquer le code, pas de le répéter.  
+  Si le code est suffisamment clair, il n'est pas nécessaire d'ajouter des commentaires.
+</Callout>
+
+### Outils de développement
+
+Pour faciliter le développement, il existe plusieurs outils et environnements de développement intégrés _(IDE)_ qui peuvent aider à écrire du code JavaScript.
+
+En gratuit, on peut citer :
+
+- **Visual Studio Code** : Un éditeur de code puissant et extensible.
+- **Atom** : Un éditeur de code open-source développé par GitHub.
+- **Sublime Text** : Un éditeur de code léger et rapide.
+
+<Callout type="warning" title="Attention aux éditeurs avec de l'IA !">
+  Ne te méprends pas, l'IA c'est génial ! Mais il faut faire attention à ne pas trop se reposer sur elle.
+
+  Lorsqu'on utilise un éditeur de code avec de l'IA, il est important de garder à l'esprit que l'IA peut parfois faire des erreurs. Et ces erreurs peuvent très bien être des erreurs de sécurité, ce qui n'est pas détectable avant d'avoir été exploité.
+
+  Si demain tu demandes à l'IA de te générer un code pour une API sans être en mesure de le remettre en question, j'espère que tu ne tiens pas aux données de tes utilisateurs ou à la sécurité de ton application !
+
+  Tant que tu es en phase d'apprentissage, je te conseille de ne pas utiliser d'IA de manière générale.
+</Callout>
+
+## Conclusion
+
+Tu l'auras remarqué, même si la syntaxe de JavaScript est relativement simple, il y a beaucoup de choses à apprendre !
+
+Ne va pas trop vite dans ton apprentissage et n'hésite pas à revenir sur les bases si tu as des doutes.  
+Il est important de bien comprendre la syntaxe de base avant de passer à des concepts plus avancés.
\ No newline at end of file
diff --git a/app/pages/docs/javascript/syntaxe/tabs.tsx b/app/pages/docs/javascript/syntaxe/tabs.tsx
new file mode 100644
index 0000000..56ab119
--- /dev/null
+++ b/app/pages/docs/javascript/syntaxe/tabs.tsx
@@ -0,0 +1,95 @@
+import { Snippet } from "@/components/Snippet";
+
+const jsInstructionsSnippets = [
+	{
+		name: "Instruction d'affichage dans la console",
+		codeLanguage: "js",
+		code: `console.log("Hello, World!");`,
+	},
+	{
+		name: "Instruction de déclaration",
+		codeLanguage: "js",
+		code: `const nom = "John Doe";`,
+	},
+	{
+		name: "Instruction de condition",
+		codeLanguage: "js",
+		code: `if (age >= 18) {
+  console.log("Vous êtes majeur.");
+} else {
+  console.log("Vous êtes mineur.");
+}`,
+	},
+];
+
+const jsVariablesSnippets = [
+	{
+		name: "Déclaration de variables",
+		codeLanguage: "js",
+		code: `let nom = "John Doe";
+const age = 30;
+var ville = "Paris";`,
+	},
+];
+
+const jsFunctionsSnippets = [
+	{
+		name: "Fonction classique",
+		codeLanguage: "js",
+		code: `function addition(a, b) {
+  return a + b;
+}`,
+	},
+	{
+		name: "Fonction anonyme",
+		codeLanguage: "js",
+		code: `const addition = function(a, b) {
+  return a + b;
+};`,
+	},
+	{
+		name: "Fonction fléchée avec retour explicite",
+		codeLanguage: "js",
+		code: `const addition = (a, b) => {
+  return a + b;
+};`,
+	},
+	{
+		name: "Fonction fléchée avec retour implicite",
+		codeLanguage: "js",
+		code: "const addition = (a, b) => a + b;",
+	},
+];
+
+const jsCommentsSnippets = [
+	{
+		name: "Commentaire sur une ligne",
+		codeLanguage: "js",
+		code: "// Ceci est un commentaire sur une ligne",
+	},
+	{
+		name: "Commentaire sur plusieurs lignes",
+		codeLanguage: "js",
+		code: `/*
+Ceci est un commentaire
+sur plusieurs lignes
+*/`,
+	},
+	{
+		name: "Commentaire de documentation",
+		codeLanguage: "js",
+		code: `/**
+* Ceci est un commentaire de documentation
+* @param {number} a - Le premier paramètre
+* @param {number} b - Le deuxième paramètre
+* @returns {number} La somme de a et b
+*/`,
+	},
+];
+
+export default {
+	jsInstructions: () => <Snippet snippets={jsInstructionsSnippets} />,
+	jsVariables: () => <Snippet snippets={jsVariablesSnippets} />,
+	jsFunctions: () => <Snippet snippets={jsFunctionsSnippets} />,
+	jsComments: () => <Snippet snippets={jsCommentsSnippets} />,
+};
-- 
2.45.2


From 0ff94b6d0ddc89aadc4b5521179eb9119e77d381 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Tue, 13 May 2025 19:09:23 +0200
Subject: [PATCH 3/8] feat(docs): add types of data documentation

---
 app/libs/navigation.ts                    |   1 +
 app/pages/docs/javascript/+Page.mdx       |   3 +-
 app/pages/docs/javascript/types/+Page.mdx | 205 ++++++++++++++++++++++
 app/pages/docs/javascript/types/tabs.tsx  |  92 ++++++++++
 app/vite.config.ts                        |   1 +
 5 files changed, 301 insertions(+), 1 deletion(-)
 create mode 100644 app/pages/docs/javascript/types/+Page.mdx
 create mode 100644 app/pages/docs/javascript/types/tabs.tsx

diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts
index 671fae1..063804a 100644
--- a/app/libs/navigation.ts
+++ b/app/libs/navigation.ts
@@ -122,6 +122,7 @@ export const navigation: NavigationSection[] = [
 					{ title: "Introduction", href: "/docs/javascript" },
 					{ title: "Syntaxe", href: "/docs/javascript/syntaxe" },
 					{ title: "Instructions", href: "/docs/javascript/instructions" },
+					{ title: "Types de données", href: "/docs/javascript/types" },
 				],
 			},
 			{
diff --git a/app/pages/docs/javascript/+Page.mdx b/app/pages/docs/javascript/+Page.mdx
index 1672159..3067a70 100644
--- a/app/pages/docs/javascript/+Page.mdx
+++ b/app/pages/docs/javascript/+Page.mdx
@@ -62,10 +62,11 @@ Comme dit précédemment, cette série d'articles va se concentrer sur l'environ
 On va donc aborder les sujets suivants :
 
 - La syntaxe de base de JavaScript
+- Les instructions
 - Les types de données
+- Les fonctions et la portée
 - La compréhension et manipulation du DOM
 - Les événements
-- Les fonctions et la portée
 - Le principe d'asynchrone
 
 Chaque article de cette série sera conçu pour être facilement compréhensible, avec des exemples pratiques et une explication des concepts.
\ No newline at end of file
diff --git a/app/pages/docs/javascript/types/+Page.mdx b/app/pages/docs/javascript/types/+Page.mdx
new file mode 100644
index 0000000..34bf1dd
--- /dev/null
+++ b/app/pages/docs/javascript/types/+Page.mdx
@@ -0,0 +1,205 @@
+---
+title: Les types de données de JavaScript
+description: Découvrons ensemble les types de données de JavaScript
+tags: []
+---
+
+import Callout from "@/components/Callout";
+import tabs from "./tabs";
+
+Revenons un peu en arrière et parlons des types de données en JavaScript.
+
+On a déjà eu l'occasion de tester très rapidement un petit algorithme, mais on n'a pas parlé des types de données !
+
+## Qu'est-ce qu'un type de données ?
+
+Un type de données est une classification qui définit le type de valeur qu'une variable peut contenir.
+
+Dans notre code précédent, nous avions utilisé :
+
+- `const nom = prompt("Entrez votre nom :");` pour demander le nom de l'utilisateur.
+- `const age = prompt("Entrez votre âge :");` pour demander l'âge de l'utilisateur.
+
+Pour les variables `nom` et `age`, on a utilisé la fonction `prompt()` qui renvoie une chaîne de caractères.  
+On a donc deux variables de type `string` _(chaîne de caractères)_ !
+
+## Les types de données en JavaScript
+
+JavaScript prend en charge plusieurs types de données, notamment :
+
+- **String** : Représente une chaîne de caractères.
+- **Number** : Représente un nombre _(entier ou décimal)_.
+- **Boolean** : Représente une valeur booléenne _(vrai ou faux)_.
+- **Object** : Représente un objet, qui est une collection de paires clé-valeur.
+- **Array** : Représente un tableau, qui est une collection ordonnée de valeurs.
+- **Null** : Représente une valeur nulle ou absente.
+- **Undefined** : Représente une variable qui n'a pas été initialisée.
+
+On parle ici de **types primitifs** et de **types complexes**.
+
+- Les types primitifs sont les types de données de base, comme `string`, `number`, `boolean`, `null` et `undefined`.
+- Les types complexes sont des types de données plus avancés, comme `object` et `array`.
+
+<Callout type="question" title="OK, et à quoi ça va m'avancer ?">
+  En gros, les types de données sont importants car ils nous permettent de savoir quel type de valeur on manipule dans notre code.
+
+  Ça nous aide à éviter les erreurs et à écrire du code plus propre et plus lisible.
+</Callout>
+
+Avant de passer à des exemples plus concrets, voyons un peu chaque type de données en détail.
+
+### String
+
+Une chaîne de caractères _(alpha-numérique)_ est une séquence de caractères entourée de **guillemets** _("contenu")_, d'**apostrophes** _('contenu')_, ou de **backticks** _(\`contenu\`)_.
+
+### Number
+
+Un nombre peut être un entier ou un nombre à virgule flottante _(décimal)_.  
+Il n'y a pas de distinction entre les deux en JavaScript, tout est considéré comme un nombre.
+
+### Boolean
+
+Un booléen est une valeur qui peut être soit `true` _(vrai)_ soit `false` _(faux)_.  
+Il est souvent utilisé pour représenter des conditions ou des états.
+
+### Null
+
+Le type `null` représente une valeur nulle ou absente.  
+Il est souvent utilisé pour indiquer qu'une variable n'a pas de valeur ou qu'elle a été explicitement définie comme nulle.
+
+### Undefined
+
+Le type `undefined` représente une variable qui n'a pas été initialisée.  
+Il est souvent utilisé pour indiquer qu'une variable n'a pas encore de valeur ou qu'elle n'a pas été définie.
+
+Il est important de noter que `undefined` est différent de `null`.  
+`undefined` signifie qu'une variable n'a pas été initialisée, tandis que `null` signifie qu'une variable a été explicitement définie comme nulle.
+
+### Object
+
+Un objet est une collection de paires clé-valeur.  
+Il est souvent utilisé pour représenter des entités complexes avec plusieurs propriétés.
+
+Pour les personnes qui viennent de PHP, on peut dire que c'est un peu comme un tableau associatif.
+Un objet est défini entre accolades `{}` et chaque paire clé-valeur est séparée par une virgule.
+
+Par exemple :
+
+<tabs.jsObjectExample />
+
+### Array
+
+Un tableau est une collection ordonnée de valeurs.  
+Il est souvent utilisé pour représenter des listes ou des ensembles de données.
+
+Un tableau est défini entre crochets `[]` et chaque valeur est séparée par une virgule.  
+Son fonctionnement est identique à celui d'un tableau en PHP.
+
+Par exemple :
+
+<tabs.jsArrayExample />
+
+### Autres types
+
+Il existe d'autres types de données en JavaScript, comme `symbol` et `bigint`, mais ils sont moins couramment utilisés.
+
+Le type `symbol` est utilisé pour créer des identifiants uniques et immuables, tandis que le type `bigint` est utilisé pour représenter des entiers de grande taille.
+
+## Pourquoi se casser la tête avec les types de données ?
+
+C'est effectivement une très bonne question, surtout quand on se dit que JavaScript est un langage à typage faible.
+
+Mais ce n'est pas parce qu'il est à typage faible qu'il ne faut pas se soucier des types de données !
+
+Par exemple... D'après toi, que va afficher le code suivant ?
+
+<tabs.jsWrongTypesAddition />
+
+Si tu as répondu `15`, laisse-moi te dire que ce n'est pas la bonne réponse !  
+En fait, le code va afficher `510`.
+
+Maintenant, deuxième question :  
+Est-ce que la variable `estVrai` vaut `true` ou `false` ?
+
+<tabs.jsWrongTypesBoolean />
+
+Et là, tu as répondu `false` ? Raté !  
+La variable `estVrai` vaut `true`.
+
+Mais alors, pourquoi ça ne fonctionne pas comme on l'attend ?
+
+### La coercition de type
+
+Dans le premier exemple, on a additionné une chaîne de caractères et un nombre.  
+Plus précisément, on a additionné le nombre `5` et la chaîne de caractères `"10"`.
+
+Dans le cas d'une addition avec une chaîne de caractères, JavaScript va convertir le nombre en chaîne de caractères et faire une **concaténation** au lieu d'une addition.  
+C'est ce qu'on appelle la **coercition de type**.
+
+Mais alors, pourquoi `5 == "5"` vaut `true` et pas `false` ?
+
+La raison derrière ce résultat "étrange" est identique à celle de l'addition.  
+Le nombre `5` est converti en chaîne de caractères `"5"` et la comparaison est effectuée entre deux chaînes de caractères.
+
+### La comparaison stricte
+
+Maintenant, si on veut éviter ce genre de problème, on peut utiliser la comparaison stricte `===` au lieu de la comparaison faible `==`.  
+La comparaison stricte compare à la fois la valeur et le type de données.
+
+Si on utilise la comparaison stricte, le code va afficher `false` pour la variable `estVrai`.
+
+<Callout type="note" title="En résumé">
+  - Utilise `==` pour comparer des valeurs sans tenir compte du type de données.
+  - Utilise `===` pour comparer des valeurs en tenant compte du type de données.
+  - Utilise `!=` pour comparer des valeurs sans tenir compte du type de données.
+  - Utilise `!==` pour comparer des valeurs en tenant compte du type de données.
+</Callout>
+
+### La conversion de type
+
+La comparaison stricte est une excellente pratique pour éviter les erreurs de type, mais il est parfois nécessaire de convertir explicitement un type de données en un autre.
+
+JavaScript propose plusieurs méthodes pour effectuer cette conversion :
+
+- `String()` : Convertit une valeur en chaîne de caractères.
+- `Number()` : Convertit une valeur en nombre.
+- `Boolean()` : Convertit une valeur en booléen.
+- `parseInt()` : Convertit une chaîne de caractères en entier.
+- `parseFloat()` : Convertit une chaîne de caractères en nombre à virgule flottante.
+
+<Callout type="warning" title="Attention aux fausses bonnes idées !">
+  J'ai déjà eu l'occasion de voir des développeurs préfixer le symbole `+` devant une variable ou l'appel d'une fonction pour convertir en nombre.
+
+  Par exemple : `const age = +prompt("Entrez votre âge :");`
+
+  Bien que ça fonctionne, c'est une pratique à éviter car elle peut prêter à confusion.  
+  Il est préférable d'utiliser une méthode explicite, lisible et compréhensible par tous.
+
+  Par exemple : `const age = Number(prompt("Entrez votre âge :"));`  
+  On encore : `const age = parseInt(prompt("Entrez votre âge :"), 10);`
+
+  C'est plus long, mais c'est beaucoup plus clair et compréhensible !
+</Callout>
+
+### Le cas de TypeScript
+
+Puisqu'on parle de JavaScript et de typage, faisons une petite parenthèse sur **TypeScript** !  
+On ne va pas chercher à expliquer ce qu'est TypeScript ici, ce sera pour une autre suite d'articles.
+
+Mais pour faire simple, TypeScript est une version de JavaScript qui ajoute un système de typage.  
+Il permet de définir explicitement le type de chaque variable, ce qui aide à éviter les erreurs de type et à rendre le code plus lisible.
+
+Par exemple, voici comment on pourrait déclarer une variable de type `string` en TypeScript :
+
+<tabs.jsTypescriptExample />
+
+Il est impossible de faire la même chose avec JavaScript, c'est strictement réservé à TypeScript !
+
+## Conclusion
+
+Voilà, on a fait le tour des types de données en JavaScript !  
+On a vu les types primitifs et complexes, ainsi que la coercition de type et la conversion de type.
+
+C'est un énorme point qu'on vient d'aborder, c'est normal de ne pas tout comprendre du premier coup.
+
+Avec du temps et de la pratique, tu vas finir par maîtriser tout ça comme un pro ! 💪
\ No newline at end of file
diff --git a/app/pages/docs/javascript/types/tabs.tsx b/app/pages/docs/javascript/types/tabs.tsx
new file mode 100644
index 0000000..617d83a
--- /dev/null
+++ b/app/pages/docs/javascript/types/tabs.tsx
@@ -0,0 +1,92 @@
+import { Snippet } from "@/components/Snippet";
+
+const jsObjectExampleSnippets = [
+	{
+		name: "Exemple d'objet JavaScript",
+		codeLanguage: "js",
+		code: `const personne = {
+	nom: "John",
+	age: 30,
+};
+
+console.log(personne.nom); // Affiche "John"
+console.log(personne.age); // Affiche 30`,
+	},
+	{
+		name: "Exemple de tableau associatif PHP",
+		codeLanguage: "php",
+		code: `$personne = [
+	"nom" => "John",
+	"age" => 30,
+];
+
+echo $personne["nom"]; // Affiche "John"
+echo $personne["age"]; // Affiche 30`,
+	},
+];
+
+const jsArrayExampleSnippets = [
+	{
+		name: "Exemple de tableau JavaScript",
+		codeLanguage: "js",
+		code: `const fruits = ["pomme", "banane", "orange"];
+
+console.log(fruits[0]); // Affiche "pomme"
+console.log(fruits[1]); // Affiche "banane"
+console.log(fruits[2]); // Affiche "orange"`,
+	},
+	{
+		name: "Exemple de tableau PHP",
+		codeLanguage: "php",
+		code: `$fruits = ["pomme", "banane", "orange"];
+
+echo $fruits[0]; // Affiche "pomme"
+echo $fruits[1]; // Affiche "banane"
+echo $fruits[2]; // Affiche "orange"`,
+	},
+];
+
+const jsWrongTypesAdditionSnippets = [
+	{
+		name: "Addition de types différents",
+		codeLanguage: "js",
+		code: `const a = 5;
+const b = "10";
+
+const resultat = a + b;`,
+	},
+];
+
+const jsWrongTypesBooleanSnippets = [
+	{
+		name: "Addition de types différents",
+		codeLanguage: "js",
+		code: `const a = 5;
+const b = "5";
+
+const estVrai = a == b;`,
+	},
+];
+
+const jsTypescriptExample = [
+	{
+		name: "Exemple de variable JavaScript",
+		codeLanguage: "js",
+		code: "const a = 5; // Type implicite : number",
+	},
+	{
+		name: "Exemple de variable TypeScript",
+		codeLanguage: "ts",
+		code: "const a: number = 5; // Type explicite : number",
+	},
+];
+
+export default {
+	jsObjectExample: () => <Snippet snippets={jsObjectExampleSnippets} />,
+	jsArrayExample: () => <Snippet snippets={jsArrayExampleSnippets} />,
+	jsWrongTypesAddition: () => (
+		<Snippet snippets={jsWrongTypesAdditionSnippets} />
+	),
+	jsWrongTypesBoolean: () => <Snippet snippets={jsWrongTypesBooleanSnippets} />,
+	jsTypescriptExample: () => <Snippet snippets={jsTypescriptExample} />,
+};
diff --git a/app/vite.config.ts b/app/vite.config.ts
index e52e171..fcccf74 100755
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -36,6 +36,7 @@ export default defineConfig({
 				"nginx",
 				"sql",
 				"json",
+				"php",
 			],
 		}),
 		vike(),
-- 
2.45.2


From b5369bc2c5a3cd3feccffdfe7113742b63e0afea Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Tue, 13 May 2025 19:13:15 +0200
Subject: [PATCH 4/8] docs(types): update variable type examples in
 documentation

---
 app/pages/docs/javascript/types/+Page.mdx | 11 ++++++++++-
 app/pages/docs/javascript/types/tabs.tsx  | 14 ++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/pages/docs/javascript/types/+Page.mdx b/app/pages/docs/javascript/types/+Page.mdx
index 34bf1dd..bb91103 100644
--- a/app/pages/docs/javascript/types/+Page.mdx
+++ b/app/pages/docs/javascript/types/+Page.mdx
@@ -189,12 +189,21 @@ On ne va pas chercher à expliquer ce qu'est TypeScript ici, ce sera pour une au
 Mais pour faire simple, TypeScript est une version de JavaScript qui ajoute un système de typage.  
 Il permet de définir explicitement le type de chaque variable, ce qui aide à éviter les erreurs de type et à rendre le code plus lisible.
 
-Par exemple, voici comment on pourrait déclarer une variable de type `string` en TypeScript :
+Par exemple, voici comment on pourrait déclarer une variable de type `number` en TypeScript :
 
 <tabs.jsTypescriptExample />
 
 Il est impossible de faire la même chose avec JavaScript, c'est strictement réservé à TypeScript !
 
+<Callout type="question" title="C'est quoi ce type `any` ?">
+  Le type `any` est un type spécial en TypeScript qui permet de désactiver le typage strict.  
+  Il peut être utilisé pour indiquer qu'une variable peut contenir n'importe quel type de valeur _(string, number, null, undefined, etc.)_.
+
+  Cependant, il est recommandé d'éviter d'utiliser le type `any` autant que possible, car il annule les avantages du typage statique.
+
+  Et puis surtout... pourquoi utiliser TypeScript si c'est pour faire du JavaScript ?
+</Callout>
+
 ## Conclusion
 
 Voilà, on a fait le tour des types de données en JavaScript !  
diff --git a/app/pages/docs/javascript/types/tabs.tsx b/app/pages/docs/javascript/types/tabs.tsx
index 617d83a..db03219 100644
--- a/app/pages/docs/javascript/types/tabs.tsx
+++ b/app/pages/docs/javascript/types/tabs.tsx
@@ -70,15 +70,25 @@ const estVrai = a == b;`,
 
 const jsTypescriptExample = [
 	{
-		name: "Exemple de variable JavaScript",
+		name: "Exemple de constante JavaScript",
 		codeLanguage: "js",
 		code: "const a = 5; // Type implicite : number",
 	},
 	{
-		name: "Exemple de variable TypeScript",
+		name: "Exemple de constante TypeScript",
 		codeLanguage: "ts",
 		code: "const a: number = 5; // Type explicite : number",
 	},
+	{
+		name: "Exemple de variable JavaScript",
+		codeLanguage: "js",
+		code: "let a; // Type implicite : any",
+	},
+	{
+		name: "Exemple de variable TypeScript",
+		codeLanguage: "ts",
+		code: "let a: number; // Type explicite : number",
+	},
 ];
 
 export default {
-- 
2.45.2


From ab2a1a8ac3b06125c57f0505692b34518060587a Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Tue, 13 May 2025 20:15:15 +0200
Subject: [PATCH 5/8] feat(docs): add documentation for JavaScript functions
 and scope

---
 app/libs/navigation.ts                        |   4 +
 .../javascript/fonctions-et-portee/+Page.mdx  | 117 ++++++++
 .../javascript/fonctions-et-portee/tabs.tsx   | 256 ++++++++++++++++++
 app/pages/docs/javascript/syntaxe/+Page.mdx   |   2 +-
 app/pages/docs/javascript/syntaxe/tabs.tsx    |   2 +-
 5 files changed, 379 insertions(+), 2 deletions(-)
 create mode 100644 app/pages/docs/javascript/fonctions-et-portee/+Page.mdx
 create mode 100644 app/pages/docs/javascript/fonctions-et-portee/tabs.tsx

diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts
index 063804a..678e061 100644
--- a/app/libs/navigation.ts
+++ b/app/libs/navigation.ts
@@ -123,6 +123,10 @@ export const navigation: NavigationSection[] = [
 					{ title: "Syntaxe", href: "/docs/javascript/syntaxe" },
 					{ title: "Instructions", href: "/docs/javascript/instructions" },
 					{ title: "Types de données", href: "/docs/javascript/types" },
+					{
+						title: "Fonctions et portée",
+						href: "/docs/javascript/fonctions-et-portee",
+					},
 				],
 			},
 			{
diff --git a/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx b/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx
new file mode 100644
index 0000000..5848e10
--- /dev/null
+++ b/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx
@@ -0,0 +1,117 @@
+---
+title: Les fonctions et la portée
+description: Découvrons ensemble les fonctions et la portée en JavaScript
+tags: []
+---
+
+import Callout from "@/components/Callout";
+import tabs from "./tabs";
+
+Il est maintenant temps de s'attaquer à du sérieux, j'ai nommé : les **fonctions** et la **portée** en JavaScript.
+
+## Les fonctions
+
+Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles permettent d'organiser le code, de le rendre plus lisible et de réduire la duplication.
+Elles peuvent prendre des **paramètres en entrée** et **retourner une valeur en sortie**.
+
+On l'avait déjà vu dans l'article sur la syntaxe, mais il est important de le rappeler :
+
+- **Fonction déclarée** : Utilise le mot-clé `function` suivi du nom de la fonction.
+- **Fonction anonyme** : N'a pas de nom et est généralement utilisée comme argument pour une autre fonction.
+- **Fonction fléchée** : Une syntaxe plus concise pour déclarer des fonctions.
+
+<tabs.jsFunctions />
+
+Si tu relis les premiers mots de cette section _(sur les fonctions)_, tu remarqueras que j'ai dit que les fonctions sont des blocs de code **réutilisables** qui effectuent une **tâche spécifique**.
+
+C'est un peu vague, non ?
+Disons qu'on comprend l'idée générale, mais qu'est-ce que ça veut dire au juste ?
+
+### Utilisation des fonctions
+
+Prenons un exemple simple, avec une fonction qui vérifie si un nombre est pair ou impair.
+
+<tabs.jsIsEven />
+
+Dans cet exemple, nous avons une fonction `isEven` qui prend un nombre en **paramètre** et retourne `true` si le nombre est pair, sinon elle retourne `false`.
+
+On peut ensuite appeler cette fonction avec différents nombres pour vérifier s'ils sont pairs ou impairs.
+
+<tabs.jsCallIsEven />
+
+Dans cet exemple, nous avons appelé la fonction `isEven` avec les nombres 4 et 5 en tant qu'**arguments**.
+
+<Callout type="note" title="Paramètres et arguments">
+  Les **paramètres** sont les variables déclarées dans la définition de la fonction.  
+  Les **arguments** sont les valeurs passées à la fonction lors de son appel.
+</Callout>
+
+## La portée
+
+La portée _(ou **scope** en anglais)_ fait référence à la visibilité des variables et des fonctions dans le code.
+
+Elle détermine où une variable ou une fonction peut être utilisée dans le code.  
+Il existe trois types de portée en JavaScript :
+
+- **Portée globale** _(global scope)_ : La variable est accessible partout dans le code.
+- **Portée de bloc** _(block scope)_ : La variable est accessible uniquement à l'intérieur du bloc où elle a été déclarée.
+- **Portée de fonction** _(function scope)_ : La variable est accessible uniquement à l'intérieur de la fonction où elle a été déclarée.
+
+<Callout type="note" title="Portée de bloc">
+  La portée de bloc est introduite avec les mots-clés `let` et `const`.  
+  Les variables déclarées avec `var` ont une portée fonctionnelle ou globale.
+</Callout>
+
+### Portée globale (global scope)
+
+La portée globale est la portée la plus large.  
+Les variables déclarées en dehors de toute fonction ou bloc de code ont une portée globale.
+
+Une portée globale signifie que la variable est accessible partout dans le code.
+
+<Callout type="warning" title="Déclaration de variable globale">
+  Attention à **ne pas déclarer** de variables globales, sauf si c'est intentionnel et nécessaire !
+
+  Les variables globales peuvent entraîner des conflits de variables/fonctions _(remplacement)_ des variables existantes, notamment des variables de l'objet `window` dans le navigateur.
+</Callout>
+
+### Portée de bloc (block scope)
+
+La portée de bloc est une portée qui est limitée au bloc de code dans lequel la variable a été déclarée.
+
+Seules les variables déclarées avec `let` et `const` peuvent avoir une portée de bloc.
+
+<Callout type="question" title="Limité au bloc de code ?">
+  Par "bloc de code", on parle de tout ce qui est entre accolades `{}` !  
+  Ça peut être une fonction, une boucle, une condition, etc.
+</Callout>
+
+<tabs.jsBlockScope />
+
+Dans cet exemple, nous avons :
+
+- Une déclaration d'une variable `x` en dehors d'un bloc de code
+- Une déclaration d'une variable `x` à l'intérieur d'un bloc de code _(condition)_
+
+Maintenant, regardons ce qui se passe selon le mot-clé utilisé pour déclarer la variable `x` :
+
+<tabs.jsBlockScopeExplanations />
+
+On remarque que si on utilise `let` ou `const`, la variable `x` déclarée à l'intérieur du bloc de code n'est pas "la même" que celle déclarée à l'extérieur.  
+Elle est **locale** au bloc de code, et donc inaccessible en dehors de celui-ci.
+
+En revanche, si on utilise `var`, la variable `x` déclarée à l'intérieur du bloc de code est **globale** et écrase la variable `x` déclarée à l'extérieur.
+
+<Callout type="warning" title="Utilisation de var">
+  Rien que pour ça, il est préférable d'éviter d'utiliser `var` et de lui préférer `let` ou `const`.
+</Callout>
+
+### Portée de fonction (function scope)
+
+Pour la portée de fonction, on parle de la portée des variables déclarées à l'intérieur d'une fonction.
+
+Les trois mots-clés `var`, `let` et `const` peuvent être utilisés pour déclarer des variables avec une portée de fonction.
+
+<tabs.jsFunctionScope />
+
+Le fonctionnement est le même que pour la portée de bloc, avec cette fois-ci une portée limitée à la fonction _(y compris pour les variables déclarées avec `var`)_.
\ No newline at end of file
diff --git a/app/pages/docs/javascript/fonctions-et-portee/tabs.tsx b/app/pages/docs/javascript/fonctions-et-portee/tabs.tsx
new file mode 100644
index 0000000..0ce6522
--- /dev/null
+++ b/app/pages/docs/javascript/fonctions-et-portee/tabs.tsx
@@ -0,0 +1,256 @@
+import { Snippet } from "@/components/Snippet";
+
+const jsFunctionsSnippets = [
+	{
+		name: "Fonction déclarée",
+		codeLanguage: "js",
+		code: `function addition(a, b) {
+  return a + b;
+}`,
+	},
+	{
+		name: "Fonction anonyme",
+		codeLanguage: "js",
+		code: `const addition = function(a, b) {
+  return a + b;
+};`,
+	},
+	{
+		name: "Fonction fléchée avec retour explicite",
+		codeLanguage: "js",
+		code: `const addition = (a, b) => {
+  return a + b;
+};`,
+	},
+	{
+		name: "Fonction fléchée avec retour implicite",
+		codeLanguage: "js",
+		code: "const addition = (a, b) => a + b;",
+	},
+];
+
+const jsIsEvenSnippets = [
+	{
+		name: "Fonction déclarée",
+		codeLanguage: "js",
+		code: `function isEven(number) {
+	return number % 2 === 0;
+}`,
+	},
+	{
+		name: "Fonction anonyme",
+		codeLanguage: "js",
+		code: `const isEven = function(number) {
+	return number % 2 === 0;
+};`,
+	},
+	{
+		name: "Fonction fléchée avec retour explicite",
+		codeLanguage: "js",
+		code: `const isEven = (number) => {
+	return number % 2 === 0;
+};`,
+	},
+	{
+		name: "Fonction fléchée avec retour implicite",
+		codeLanguage: "js",
+		code: "const isEven = (number) => number % 2 === 0;",
+	},
+];
+
+const jsCallIsEvenSnippets = [
+	{
+		name: "Appel de la fonction isEven",
+		codeLanguage: "js",
+		code: `console.log(isEven(4)); // true
+console.log(isEven(5)); // false`,
+	},
+];
+
+const jsBlockScopeSnippets = [
+	{
+		name: "Exemple avec let",
+		withLineNumbers: true,
+		codeLanguage: "js",
+		code: `let x = 10;
+
+if (true) {
+	let x = 20;
+	console.log(x); // 20
+}
+
+console.log(x); // 10`,
+	},
+	{
+		name: "Exemple avec const",
+		withLineNumbers: true,
+		codeLanguage: "js",
+		code: `const x = 10;
+
+if (true) {
+	const x = 20;
+	console.log(x); // 20
+}
+
+console.log(x); // 10`,
+	},
+	{
+		name: "Exemple avec var",
+		withLineNumbers: true,
+		codeLanguage: "js",
+		code: `var x = 10;
+
+if (true) {
+	var x = 20;
+	console.log(x); // 20
+}
+
+console.log(x); // 20`,
+	},
+];
+
+const jsBlockScopeExplanations = [
+	{
+		name: "Utilisation de let",
+		children: (
+			<ul>
+				<li>
+					La variable <code>x</code> est déclarée avec <code>let</code> dans le
+					scope global.
+				</li>
+				<li>
+					Dans le bloc <code>if</code>, une nouvelle variable <code>x</code> est
+					déclarée, masquant la variable globale.
+				</li>
+				<li>
+					Lorsque nous affichons <code>x</code> à l'intérieur du bloc, il
+					renvoie la valeur de la variable locale (20).
+				</li>
+				<li>
+					Lorsque nous affichons <code>x</code> en dehors du bloc, il renvoie la
+					valeur de la variable globale (10).
+				</li>
+			</ul>
+		),
+	},
+	{
+		name: "Utilisation de const",
+		children: (
+			<ul>
+				<li>
+					La variable <code>x</code> est déclarée avec <code>const</code> dans
+					le scope global.
+				</li>
+				<li>
+					Dans le bloc <code>if</code>, une nouvelle variable <code>x</code> est
+					déclarée, masquant la variable globale.
+				</li>
+				<li>
+					Lorsque nous affichons <code>x</code> à l'intérieur du bloc, il
+					renvoie la valeur de la variable locale (20).
+				</li>
+				<li>
+					Lorsque nous affichons <code>x</code> en dehors du bloc, il renvoie la
+					valeur de la variable globale (10).
+				</li>
+			</ul>
+		),
+	},
+	{
+		name: "Utilisation de var",
+		children: (
+			<ul>
+				<li>
+					La variable <code>x</code> est déclarée avec <code>var</code> dans le
+					scope global.
+				</li>
+				<li>
+					Dans le bloc <code>if</code>, une nouvelle variable <code>x</code> est
+					déclarée, remplaçant la variable globale.
+				</li>
+				<li>
+					Lorsque nous affichons <code>x</code> à l'intérieur du bloc, il
+					renvoie la valeur de la variable globale (20).
+				</li>
+				<li>
+					Lorsque nous affichons <code>x</code> en dehors du bloc, il renvoie la
+					valeur de la variable globale (20).
+				</li>
+			</ul>
+		),
+	},
+];
+
+const jsFunctionScopeSnippets = [
+	{
+		name: "Exemple avec let",
+		withLineNumbers: true,
+		codeLanguage: "js",
+		code: `let x = 10;
+		
+function example() {
+	let x = 20;
+
+	if (true) {
+		let x = 30;
+		console.log(x); // 30
+	}
+
+	console.log(x); // 20
+}
+
+example();
+console.log(x); // 10`,
+	},
+	{
+		name: "Exemple avec const",
+		withLineNumbers: true,
+		codeLanguage: "js",
+		code: `const x = 10;
+
+function example() {
+	const x = 20;
+
+	if (true) {
+		const x = 30;
+		console.log(x); // 30
+	}
+
+	console.log(x); // 20
+}
+
+example();
+console.log(x); // 10`,
+	},
+	{
+		name: "Exemple avec var",
+		withLineNumbers: true,
+		codeLanguage: "js",
+		code: `var x = 10;
+
+function example() {
+	var x = 20;
+
+	if (true) {
+		var x = 30;
+		console.log(x); // 30
+	}
+
+	console.log(x); // 30
+}
+
+example();
+console.log(x); // 10`,
+	},
+];
+
+export default {
+	jsFunctions: () => <Snippet snippets={jsFunctionsSnippets} />,
+	jsIsEven: () => <Snippet snippets={jsIsEvenSnippets} />,
+	jsCallIsEven: () => <Snippet snippets={jsCallIsEvenSnippets} />,
+	jsBlockScope: () => <Snippet snippets={jsBlockScopeSnippets} />,
+	jsBlockScopeExplanations: () => (
+		<Snippet snippets={jsBlockScopeExplanations} />
+	),
+	jsFunctionScope: () => <Snippet snippets={jsFunctionScopeSnippets} />,
+};
diff --git a/app/pages/docs/javascript/syntaxe/+Page.mdx b/app/pages/docs/javascript/syntaxe/+Page.mdx
index 4646793..8a70e53 100644
--- a/app/pages/docs/javascript/syntaxe/+Page.mdx
+++ b/app/pages/docs/javascript/syntaxe/+Page.mdx
@@ -142,7 +142,7 @@ La fonction fléchée est une syntaxe plus concise et moderne pour déclarer des
 Elle a un comportement particulier dans le contexte de retour de valeur, avec une syntaxe raccourcie pour les fonctions à une seule ligne.
 
 <Callout type="question" title="Comment fonctionne le retour de valeur des fonctions fléchées ?">
-  Dans une fonction classique, on utilise le mot-clé `return` pour retourner une valeur.  
+  Dans une fonction déclarée, on utilise le mot-clé `return` pour retourner une valeur.  
   Le fonctionnement est identique pour les fonctions fléchées, mais il est possible de profiter d'une syntaxe raccourcie !
 
   Dans le cas d'une fonction fléchée à une seule ligne, il n'est pas nécessaire d'utiliser le mot-clé `return`.
diff --git a/app/pages/docs/javascript/syntaxe/tabs.tsx b/app/pages/docs/javascript/syntaxe/tabs.tsx
index 56ab119..fbafac4 100644
--- a/app/pages/docs/javascript/syntaxe/tabs.tsx
+++ b/app/pages/docs/javascript/syntaxe/tabs.tsx
@@ -34,7 +34,7 @@ var ville = "Paris";`,
 
 const jsFunctionsSnippets = [
 	{
-		name: "Fonction classique",
+		name: "Fonction déclarée",
 		codeLanguage: "js",
 		code: `function addition(a, b) {
   return a + b;
-- 
2.45.2


From 9344fee81b9f967bb1aa95d8fbff879f38369ce6 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Tue, 13 May 2025 20:29:14 +0200
Subject: [PATCH 6/8] docs(javascript): add warning callout about variable
 hoisting

---
 app/pages/docs/javascript/+Page.mdx           | 12 +++++-
 .../javascript/fonctions-et-portee/+Page.mdx  | 42 ++++++++++++++++++-
 .../javascript/fonctions-et-portee/tabs.tsx   | 42 ++++++++++++++++++-
 3 files changed, 92 insertions(+), 4 deletions(-)

diff --git a/app/pages/docs/javascript/+Page.mdx b/app/pages/docs/javascript/+Page.mdx
index 3067a70..3f8817a 100644
--- a/app/pages/docs/javascript/+Page.mdx
+++ b/app/pages/docs/javascript/+Page.mdx
@@ -69,4 +69,14 @@ On va donc aborder les sujets suivants :
 - Les événements
 - Le principe d'asynchrone
 
-Chaque article de cette série sera conçu pour être facilement compréhensible, avec des exemples pratiques et une explication des concepts.
\ No newline at end of file
+Chaque article de cette série sera conçu pour être facilement compréhensible, avec des exemples pratiques et une explication des concepts.
+
+<Callout type="warning" title="Facilement compréhensible !== Facile">
+  Facilement compréhensible ne veut pas dire que c'est facile à comprendre !
+
+  Il y a beaucoup de concepts à assimiler et certains peuvent faire mal au crâne.  
+  Prends ton temps et n'hésite pas à revenir en arrière si tu ne comprends pas quelque chose.
+
+  L'idée est de ne surtout pas se précipiter sur les notions suivantes tant que tu n'as pas compris celles abordées dans l'article.  
+  Expérimente et joue avec le code pour plus facilement assimiler !
+</Callout>
\ No newline at end of file
diff --git a/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx b/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx
index 5848e10..01b56ac 100644
--- a/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx
+++ b/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx
@@ -114,4 +114,44 @@ Les trois mots-clés `var`, `let` et `const` peuvent être utilisés pour décla
 
 <tabs.jsFunctionScope />
 
-Le fonctionnement est le même que pour la portée de bloc, avec cette fois-ci une portée limitée à la fonction _(y compris pour les variables déclarées avec `var`)_.
\ No newline at end of file
+Le fonctionnement est le même que pour la portée de bloc, avec cette fois-ci une portée limitée à la fonction _(y compris pour les variables déclarées avec `var`)_.
+
+## Particularités de var
+
+On a vu que `var` n'a pas la possibilité de déclarer des variables avec une portée de bloc, contrairement à `let` et `const`.
+
+Mais il y a une autre particularité à prendre en compte :
+- Les variables déclarées avec `var` sont **hoistées**.  
+  Ça signifie que la déclaration de la variable est déplacée en haut de la portée dans laquelle elle a été déclarée.
+- Les variables déclarées avec `let` et `const` ne sont pas hoistées.
+
+<Callout type="warning" title="Hoisting">
+  Le hoisting peut entraîner des comportements inattendus si on essaie d'accéder à une variable avant sa déclaration.
+
+  Il est donc préférable de toujours déclarer les variables au début de leur portée.
+</Callout>
+
+Petit exemple pour illustrer ça :
+
+<tabs.jsHoisting />
+
+Dans cet exemple, on voit que la variable `x` est déclarée après son utilisation.  
+Cependant, grâce _(ou à cause, je te laisse choisir !)_ au hoisting, la déclaration de la variable `x` est déplacée en haut de la portée, ce qui permet d'accéder à sa valeur avant sa déclaration.
+
+On peut donc dire que la variable `x` est **undefined** avant sa déclaration, mais elle existe déjà.
+On peut donc l'utiliser avant sa déclaration _(enfin, on aura `undefined` comme valeur)_.
+
+C'est un peu déroutant, non ?
+
+<Callout type="warning" title="Utilisation de var">
+  Promis, c'est la dernière fois que je te dis de ne pas utiliser `var` !
+
+  Mais tu l'auras compris, `var` est vraiment très spécial et peut très vite devenir une source de bugs.
+</Callout>
+
+## Conclusion
+
+Voilà, c'est "tout" pour cet article sur les fonctions et la portée en JavaScript !  
+Comme les articles précédents, ça fait beaucoup d'informations.
+
+Encore une fois, prends le temps d'expérimenter et de jouer avec les notions abordées dans cet article avant de passer à la suite !
\ No newline at end of file
diff --git a/app/pages/docs/javascript/fonctions-et-portee/tabs.tsx b/app/pages/docs/javascript/fonctions-et-portee/tabs.tsx
index 0ce6522..8e7693a 100644
--- a/app/pages/docs/javascript/fonctions-et-portee/tabs.tsx
+++ b/app/pages/docs/javascript/fonctions-et-portee/tabs.tsx
@@ -190,6 +190,7 @@ const jsFunctionScopeSnippets = [
 		
 function example() {
 	let x = 20;
+	let y = "Bonjour !";
 
 	if (true) {
 		let x = 30;
@@ -200,7 +201,8 @@ function example() {
 }
 
 example();
-console.log(x); // 10`,
+console.log(x); // 10
+console.log(y); // ReferenceError: y is not defined`,
 	},
 	{
 		name: "Exemple avec const",
@@ -210,6 +212,7 @@ console.log(x); // 10`,
 
 function example() {
 	const x = 20;
+	const y = "Bonjour !";
 
 	if (true) {
 		const x = 30;
@@ -217,10 +220,12 @@ function example() {
 	}
 
 	console.log(x); // 20
+	console.log(y); // Bonjour !
 }
 
 example();
-console.log(x); // 10`,
+console.log(x); // 10
+console.log(y); // ReferenceError: y is not defined`,
 	},
 	{
 		name: "Exemple avec var",
@@ -230,6 +235,7 @@ console.log(x); // 10`,
 
 function example() {
 	var x = 20;
+	var y = "Bonjour !";
 
 	if (true) {
 		var x = 30;
@@ -240,6 +246,37 @@ function example() {
 }
 
 example();
+console.log(x); // 10
+console.log(y); // ReferenceError: y is not defined`,
+	},
+];
+
+const jsHoistingSnippets = [
+	{
+		name: "Exemple avec let",
+		withLineNumbers: true,
+		codeLanguage: "js",
+		code: `console.log(x); // ReferenceError: Cannot access 'x' before initialization
+
+let x = 10;
+console.log(x); // 10`,
+	},
+	{
+		name: "Exemple avec const",
+		withLineNumbers: true,
+		codeLanguage: "js",
+		code: `console.log(x); // ReferenceError: Cannot access 'x' before initialization
+
+const x = 10;
+console.log(x); // 10`,
+	},
+	{
+		name: "Exemple avec var",
+		withLineNumbers: true,
+		codeLanguage: "js",
+		code: `console.log(x); // undefined
+
+var x = 10;
 console.log(x); // 10`,
 	},
 ];
@@ -253,4 +290,5 @@ export default {
 		<Snippet snippets={jsBlockScopeExplanations} />
 	),
 	jsFunctionScope: () => <Snippet snippets={jsFunctionScopeSnippets} />,
+	jsHoisting: () => <Snippet snippets={jsHoistingSnippets} />,
 };
-- 
2.45.2


From cc9aeae62eb04204e9c261e848559b72eefd5114 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Sat, 31 May 2025 10:41:16 +0200
Subject: [PATCH 7/8] feat(docs): add DOM documentation page

---
 app/libs/navigation.ts                  |   4 +
 app/pages/docs/javascript/dom/+Page.mdx | 119 ++++++++++++++++
 app/pages/docs/javascript/dom/tabs.tsx  | 179 ++++++++++++++++++++++++
 3 files changed, 302 insertions(+)
 create mode 100644 app/pages/docs/javascript/dom/+Page.mdx
 create mode 100644 app/pages/docs/javascript/dom/tabs.tsx

diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts
index 678e061..2f7920b 100644
--- a/app/libs/navigation.ts
+++ b/app/libs/navigation.ts
@@ -127,6 +127,10 @@ export const navigation: NavigationSection[] = [
 						title: "Fonctions et portée",
 						href: "/docs/javascript/fonctions-et-portee",
 					},
+					{
+						title: "Le DOM",
+						href: "/docs/javascript/dom",
+					},
 				],
 			},
 			{
diff --git a/app/pages/docs/javascript/dom/+Page.mdx b/app/pages/docs/javascript/dom/+Page.mdx
new file mode 100644
index 0000000..5f47f9b
--- /dev/null
+++ b/app/pages/docs/javascript/dom/+Page.mdx
@@ -0,0 +1,119 @@
+---
+title: La manipulation du DOM avec JavaScript
+description: Découvrez comment maîtriser le DOM en JavaScript et donnez vie à vos pages web !
+tags: []
+---
+
+import QuickLinks from "@/components/QuickLinks";
+import Callout from "@/components/Callout";
+import tabs from "./tabs";
+
+Maintenant que nous avons vu les grandes lignes du langage JavaScript, tu vas enfin pouvoir entrer dans le vif du sujet : la **manipulation du DOM** avec JavaScript.
+
+## 🤔 Qu'est-ce que le DOM ?
+
+Le **Document Object Model** _(ou **DOM** en anglais)_ est une interface de programmation pour les documents HTML et XML. Il permet de représenter la page web comme un arbre de **nœuds**.
+
+Chaque élément HTML est un nœud dans l'arbre, et les nœuds peuvent contenir d'autres nœuds.  
+Mais un nœud peut aussi être un **texte** ou une **propriété** d'un élément !
+
+Pour que ce soit plus facile à comprendre, voici quelques analogies pour t'aider à comprendre ce qu'est le DOM.
+
+<tabs.jsDomExplanations />
+
+## 🤖 Manipulation du DOM
+
+La manipulation du DOM avec JavaScript permet de modifier la structure et le contenu de la page web.  
+Le grand avantage du DOM est qu'il est **très rapide** à manipuler, et que c'est **très simple** à comprendre.
+
+Mais pour le manipuler, il faut d'abord **sélectionner** les éléments que l'on veut modifier.
+
+### 🔍 Sélectionner un élément
+
+Pour sélectionner un élément, on peut utiliser plusieurs méthodes :
+
+- `document.getElementById(id)` : Sélectionne un élément par son `id` _(propriété HTML `id`)_.
+- `document.getElementsByClassName(className)` : Sélectionne tous les éléments par leur `className` _(propriété HTML `class`)_.
+- `document.getElementsByTagName(tagName)` : Sélectionne tous les éléments par leur `tagName` _(balise HTML)_.
+- `document.querySelector(selector)` : Sélectionne le premier élément qui correspond au `selector` _(sélecteur CSS)_.
+- `document.querySelectorAll(selector)` : Sélectionne tous les éléments qui correspondent au `selector` _(sélecteur CSS)_.
+
+Voici quelques exemples commentés pour visualiser ces méthodes :
+
+<tabs.jsDomSelectionExplanations />
+
+Selon la méthode utilisée, on peut récupérer un élément ou une liste d'éléments.  
+Pour mémoriser ces méthodes, fais attention à la présence du pluriel dans le nom de la méthode :
+
+- `getElementById` _(singulier)_ : Retourne un élément.
+- `getElementsByClassName` _(pluriel)_ : Retourne une liste d'éléments.
+- `getElementsByTagName` _(pluriel)_ : Retourne une liste d'éléments.
+- `querySelector` _(singulier)_ : Retourne un élément.
+- `querySelectorAll` _(pluriel)_ : Retourne une liste d'éléments.
+
+<Callout type="note" title="Aucun élément trouvé">
+  Si aucun élément n'est trouvé, la méthode retourne `null`.  
+
+  Cependant, si on utilise une méthode qui retourne une liste d'éléments, la liste ne sera pas `null`, mais **vide**.
+</Callout>
+
+### ✏️ Modifier le contenu d'un élément
+
+Pour modifier le contenu d'un élément, on retrouve trois propriétés :
+
+- `element.innerHTML` : Modifie le contenu HTML de l'élément.
+- `element.innerText` : Modifie le contenu texte de l'élément.
+- `element.textContent` : Modifie le contenu texte de l'élément.
+
+Voici quelques exemples commentés pour visualiser ces propriétés :
+
+<tabs.jsDomContentModificationExplanations />
+
+<Callout type="question" title="Je ne comprends pas la différence entre innerText et textContent">
+  Si ça te rassure, c'est normal ! Ces deux propriétés sont très similaires, mais n'ont pas les mêmes comportements.
+
+  - `innerText` : Modifie le contenu texte de l'élément, et ignore les balises HTML.
+  - `textContent` : Modifie le contenu texte de l'élément, et prend en compte les balises HTML.
+</Callout>
+
+<Callout type="warning" title="Attention à innerHTML">
+  La propriété `innerHTML` est très puissante, mais elle peut également être dangereuse.
+
+  En l'utilisant, on expose la page à des attaques de type **XSS** _(Cross-Site Scripting)_ !  
+  Il est donc **fortement conseillé** d'utiliser `textContent` ou `innerText` plutôt que `innerHTML`.
+
+  Dans le cas où l'on doit utiliser `innerHTML`, il est **fortement conseillé** de **sanitiser** le contenu avant de l'afficher.
+</Callout>
+  
+Je ne vais pas rentrer dans les détails ici, mais tu peux en savoir plus sur ces deux propriétés dans la documentation de MDN :
+
+<QuickLinks>
+  <QuickLinks.QuickLink
+    title="MDN - innerText"
+    href="https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/innerText"
+    description="Documentation de MDN sur la propriété innerText"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="MDN - textContent"
+    href="https://developer.mozilla.org/fr/docs/Web/API/Node/textContent"
+    description="Documentation de MDN sur la propriété textContent"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="MDN - innerHTML"
+    href="https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML"
+    description="Documentation de MDN sur la propriété innerHTML"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="MDN - Cross-Site Scripting"
+    href="https://developer.mozilla.org/fr/docs/Glossary/Cross-site_scripting"
+    description="Documentation de MDN sur le Cross-Site Scripting"
+    icon="presets"
+  />
+</QuickLinks>
+
+### 🔧 Modifier les attributs d'un élément
+
+Pour modifier les attributs d'un élément, on peut utiliser la propriété `element.setAttribute(attribute, value)`.
\ No newline at end of file
diff --git a/app/pages/docs/javascript/dom/tabs.tsx b/app/pages/docs/javascript/dom/tabs.tsx
new file mode 100644
index 0000000..66e2f0c
--- /dev/null
+++ b/app/pages/docs/javascript/dom/tabs.tsx
@@ -0,0 +1,179 @@
+import { Snippet } from "@/components/Snippet";
+
+const jsDomExplanations = [
+	{
+		name: "Livre et ses chapitres",
+		children: (
+			<ul>
+				<li>
+					<strong>Document</strong> : Le livre entier, qui contient tous les
+					chapitres.
+				</li>
+				<li>
+					<strong>Élément</strong> : Les chapitres du livre, chacun avec son
+					titre et son contenu.
+				</li>
+				<li>
+					<strong>Attribut</strong> : Les notes ou les annotations dans les
+					marges qui décrivent ou mettent en valeur certains passages.
+				</li>
+				<li>
+					<strong>Texte</strong> : Le contenu réel des pages, les mots et les
+					paragraphes qui sont écrits.
+				</li>
+			</ul>
+		),
+	},
+	{
+		name: "Arbre généalogique",
+		children: (
+			<ul>
+				<li>
+					<strong>Document</strong> : L'arbre généalogique complet, représentant
+					toute la famille.
+				</li>
+				<li>
+					<strong>Élément</strong> : Les branches de l'arbre, représentant les
+					différentes générations ou familles.
+				</li>
+				<li>
+					<strong>Attribut</strong> : Les détails sur chaque personne, comme
+					leur date de naissance ou leur métier.
+				</li>
+				<li>
+					<strong>Texte</strong> : Les noms des personnes dans l'arbre, les
+					membres individuels de la famille.
+				</li>
+			</ul>
+		),
+	},
+	{
+		name: "Système solaire",
+		children: (
+			<ul>
+				<li>
+					<strong>Document</strong> : Le système solaire complet, avec toutes
+					ses planètes et étoiles.
+				</li>
+				<li>
+					<strong>Élément</strong> : Les planètes individuelles, chacune avec
+					ses propres caractéristiques et orbites.
+				</li>
+				<li>
+					<strong>Attribut</strong> : Les détails des planètes, comme leur
+					taille, leur composition ou leur distance par rapport au soleil.
+				</li>
+				<li>
+					<strong>Texte</strong> : Les noms des planètes et des étoiles, les
+					éléments individuels du système solaire.
+				</li>
+			</ul>
+		),
+	},
+	{
+		name: "Organisation d'une entreprise",
+		children: (
+			<ul>
+				<li>
+					<strong>Document</strong> : L'entreprise entière, avec tous ses
+					départements et employés.
+				</li>
+				<li>
+					<strong>Élément</strong> : Les différents départements, comme les
+					ressources humaines, la finance ou le marketing.
+				</li>
+				<li>
+					<strong>Attribut</strong> : Les détails des employés, comme leur
+					poste, leur bureau ou leur salaire.
+				</li>
+				<li>
+					<strong>Texte</strong> : Les noms des employés, les personnes qui
+					travaillent dans chaque département.
+				</li>
+			</ul>
+		),
+	},
+];
+
+const jsDomSelectionExplanations = [
+	{
+		name: "document.getElementById(id)",
+		codeLanguage: "js",
+		code: `// Sélectionner un élément par son ID
+// Ici, on sélectionne l'élément qui a l'ID "id"
+
+const element = document.getElementById("id");`,
+	},
+	{
+		name: "document.getElementsByClassName(className)",
+		codeLanguage: "js",
+		code: `// Sélectionner tous les éléments par leur classe
+// Ici, on sélectionne tous les éléments qui ont la classe "css-class"
+
+const elements = document.getElementsByClassName("css-class");`,
+	},
+	{
+		name: "document.getElementsByTagName(tagName)",
+		codeLanguage: "js",
+		code: `// Sélectionner tous les éléments par leur balise
+// Ici, on sélectionne tous les éléments qui sont des paragraphes
+
+const elements = document.getElementsByTagName("p");`,
+	},
+	{
+		name: "document.querySelector(selector)",
+		codeLanguage: "js",
+		code: `// Sélectionner le premier élément qui correspond au sélecteur
+// Ici, on sélectionne le premier élément qui a la classe "css-class"
+
+const element = document.querySelector(".css-class");`,
+	},
+	{
+		name: "document.querySelectorAll(selector)",
+		codeLanguage: "js",
+		code: `// Sélectionner tous les éléments qui correspondent au sélecteur
+// Ici, on sélectionne tous les éléments qui ont la classe "css-class"
+
+const elements = document.querySelectorAll(".css-class");`,
+	},
+];
+
+const jsDomContentModificationExplanations = [
+	{
+		name: "element.innerHTML",
+		codeLanguage: "js",
+		code: `// Modifier le contenu HTML de l'élément
+
+const element = document.getElementById("id");
+
+element.innerHTML = "<p>Nouveau contenu</p>";`,
+	},
+	{
+		name: "element.innerText",
+		codeLanguage: "js",
+		code: `// Modifier le contenu texte de l'élément
+
+const element = document.getElementById("id");
+
+element.innerText = "Nouveau contenu";`,
+	},
+	{
+		name: "element.textContent",
+		codeLanguage: "js",
+		code: `// Modifier le contenu texte de l'élément
+
+const element = document.getElementById("id");
+
+element.textContent = "Nouveau contenu";`,
+	},
+];
+
+export default {
+	jsDomExplanations: () => <Snippet snippets={jsDomExplanations} />,
+	jsDomSelectionExplanations: () => (
+		<Snippet snippets={jsDomSelectionExplanations} />
+	),
+	jsDomContentModificationExplanations: () => (
+		<Snippet snippets={jsDomContentModificationExplanations} />
+	),
+};
-- 
2.45.2


From 308fda97bb75163b6fa998159873734fe8b6cd45 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Mon, 9 Jun 2025 15:14:30 +0200
Subject: [PATCH 8/8] refactor(tabs): remove console logs

---
 app/components/Tabs.tsx |  3 ---
 app/libs/navigation.ts  |  8 +++---
 app/pages/+data.ts      | 59 ++++++++++++++++++++---------------------
 3 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/app/components/Tabs.tsx b/app/components/Tabs.tsx
index 4f072d7..5fe8eb6 100644
--- a/app/components/Tabs.tsx
+++ b/app/components/Tabs.tsx
@@ -39,8 +39,6 @@ export default function Tabs(props: {
 	const [tabs, setTabs] = createSignal<TabType[]>([]);
 
 	const addTab = (tab: TabType) => {
-		console.log("Adding tab", tab);
-
 		setTabs((prevTabs) => {
 			// Append to the end of the array and make sure it's unique
 			if (prevTabs.some((t) => t.value === tab.value)) {
@@ -113,7 +111,6 @@ Tabs.Item = (props: {
 	}
 
 	onMount(() => {
-		console.log("Mounting tab", props.label);
 		tabsContext.addTab({ label: props.label, value: props.value });
 	});
 
diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts
index 2f7920b..f567961 100644
--- a/app/libs/navigation.ts
+++ b/app/libs/navigation.ts
@@ -127,10 +127,10 @@ export const navigation: NavigationSection[] = [
 						title: "Fonctions et portée",
 						href: "/docs/javascript/fonctions-et-portee",
 					},
-					{
-						title: "Le DOM",
-						href: "/docs/javascript/dom",
-					},
+					// {
+					// 	title: "Le DOM",
+					// 	href: "/docs/javascript/dom",
+					// },
 				],
 			},
 			{
diff --git a/app/pages/+data.ts b/app/pages/+data.ts
index 98db99e..873d355 100644
--- a/app/pages/+data.ts
+++ b/app/pages/+data.ts
@@ -7,40 +7,39 @@ import buildTitle from "./buildTitle";
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export async function data(pageContext: PageContext) {
-  const config = useConfig();
-  await docCache.waitingForCache(20000);
+	const config = useConfig();
+	await docCache.waitingForCache(20000);
 
-  const {
-    exports: { frontmatter },
-    urlParsed,
-  } = pageContext;
-  const isRoot = urlParsed.pathname === "/";
+	const {
+		exports: { frontmatter },
+		urlParsed,
+	} = pageContext;
+	const isRoot = urlParsed.pathname === "/";
 
-  config({
-    title: buildTitle(isRoot ? undefined : frontmatter?.title),
-    description: frontmatter?.description,
-  });
+	config({
+		title: buildTitle(isRoot ? undefined : frontmatter?.title),
+		description: frontmatter?.description,
+	});
 
-  let cachePathname = urlParsed.pathname.replace(/\/$/, "").replace(/^\//, "");
-  if (cachePathname === "") cachePathname = "index";
+	let cachePathname = urlParsed.pathname.replace(/\/$/, "").replace(/^\//, "");
+	if (cachePathname === "") cachePathname = "index";
 
-  const doc = docCache.get(cachePathname);
-  console.log(doc);
+	const doc = docCache.get(cachePathname);
 
-  if (!doc) {
-    console.error(
-      `DocCache: No doc found for ${cachePathname}. This is a bug!`,
-      "Please report it to the maintainers.",
-    );
-  }
+	if (!doc) {
+		console.error(
+			`DocCache: No doc found for ${cachePathname}. This is a bug!`,
+			"Please report it to the maintainers.",
+		);
+	}
 
-  return {
-    sections: doc?.sections || [],
-    frontmatter,
-    docs: docCache.orderByLastEdit({
-      limit: 2,
-      includedBasePaths: ["docs", "certifications"],
-      excludedFileNames: [cachePathname, "docs", "certifications"],
-    }),
-  };
+	return {
+		sections: doc?.sections || [],
+		frontmatter,
+		docs: docCache.orderByLastEdit({
+			limit: 2,
+			includedBasePaths: ["docs", "certifications"],
+			excludedFileNames: [cachePathname, "docs", "certifications"],
+		}),
+	};
 }
-- 
2.45.2