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] 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} />,
+};