docs/js (#26)

Reviewed-on: #26
Co-authored-by: GauthierWebDev <gauthier@gauthierdaniels.fr>
Co-committed-by: GauthierWebDev <gauthier@gauthierdaniels.fr>

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")}

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" />

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 });
 	});
 

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,24 @@ export const navigation: NavigationSection[] = [
 					{ title: "Formulaires", href: "/docs/html/formulaires" },
 				],
 			},
+			{
+				title: "JavaScript",
+				href: "/docs/javascript",
+				subitems: [
+					{ 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" },
+					{
+						title: "Fonctions et portée",
+						href: "/docs/javascript/fonctions-et-portee",
+					},
+					// {
+					// 	title: "Le DOM",
+					// 	href: "/docs/javascript/dom",
+					// },
+				],
+			},
 			{
 				title: "React",
 				href: "/docs/react",

app/pages/+data.ts

@@ -25,7 +25,6 @@ export async function data(pageContext: PageContext) {
 	if (cachePathname === "") cachePathname = "index";
 
 	const doc = docCache.get(cachePathname);
-  console.log(doc);
 
 	if (!doc) {
 		console.error(

app/pages/docs/frontend/+Page.mdx

@@ -1,8 +0,0 @@
----
-title: "Introduction au Frontend : Langages et technologies"
-description: 
-tags: []
----
-
-import Callout from "@/components/Callout";
-

app/pages/docs/javascript/+Page.mdx

@@ -0,0 +1,82 @@
+---
+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 instructions
+- Les types de données
+- Les fonctions et la portée
+- La compréhension et manipulation du DOM
+- 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.
+
+<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>

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)`.

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

app/pages/docs/javascript/fonctions-et-portee/+Page.mdx

@@ -0,0 +1,157 @@
+---
+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`)_.
+
+## 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 !

app/pages/docs/javascript/fonctions-et-portee/tabs.tsx

@@ -0,0 +1,294 @@
+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;
+	let y = "Bonjour !";
+
+	if (true) {
+		let x = 30;
+		console.log(x); // 30
+	}
+
+	console.log(x); // 20
+}
+
+example();
+console.log(x); // 10
+console.log(y); // ReferenceError: y is not defined`,
+	},
+	{
+		name: "Exemple avec const",
+		withLineNumbers: true,
+		codeLanguage: "js",
+		code: `const x = 10;
+
+function example() {
+	const x = 20;
+	const y = "Bonjour !";
+
+	if (true) {
+		const x = 30;
+		console.log(x); // 30
+	}
+
+	console.log(x); // 20
+	console.log(y); // Bonjour !
+}
+
+example();
+console.log(x); // 10
+console.log(y); // ReferenceError: y is not defined`,
+	},
+	{
+		name: "Exemple avec var",
+		withLineNumbers: true,
+		codeLanguage: "js",
+		code: `var x = 10;
+
+function example() {
+	var x = 20;
+	var y = "Bonjour !";
+
+	if (true) {
+		var x = 30;
+		console.log(x); // 30
+	}
+
+	console.log(x); // 30
+}
+
+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`,
+	},
+];
+
+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} />,
+	jsHoisting: () => <Snippet snippets={jsHoistingSnippets} />,
+};

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 !

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

app/pages/docs/javascript/syntaxe/+Page.mdx

@@ -0,0 +1,198 @@
+---
+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";
+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 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`.
+
+  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.

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

app/pages/docs/javascript/types/+Page.mdx

@@ -0,0 +1,214 @@
+---
+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 `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 !  
+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 ! 💪

app/pages/docs/javascript/types/tabs.tsx

@@ -0,0 +1,102 @@
+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 constante JavaScript",
+		codeLanguage: "js",
+		code: "const a = 5; // Type implicite : number",
+	},
+	{
+		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 {
+	jsObjectExample: () => <Snippet snippets={jsObjectExampleSnippets} />,
+	jsArrayExample: () => <Snippet snippets={jsArrayExampleSnippets} />,
+	jsWrongTypesAddition: () => (
+		<Snippet snippets={jsWrongTypesAdditionSnippets} />
+	),
+	jsWrongTypesBoolean: () => <Snippet snippets={jsWrongTypesBooleanSnippets} />,
+	jsTypescriptExample: () => <Snippet snippets={jsTypescriptExample} />,
+};

app/vite.config.ts

@@ -36,6 +36,7 @@ export default defineConfig({
 				"nginx",
 				"sql",
 				"json",
+				"php",
 			],
 		}),
 		vike(),