ajout de 2 pages d'exemple

docs/astuces.md

+# Astuces et Conseils pour JavaScript
+
+Bienvenue dans ce guide d'astuces et de conseils pour JavaScript ! Vous découvrirez ici quelques techniques pour écrire
+un code JavaScript plus efficace et propre.
+
+## Table des Matières
+
+1. [Introduction](#introduction)
+2. [Conseils Généraux](#conseils-généraux)
+3. [Trucs Pratiques](#trucs-pratiques)
+4. [Tableau des Méthodes Utiles](#tableau-des-méthodes-utiles)
+5. [Références](#références)
+
+---
+
+## Introduction
+
+**JavaScript** est un langage flexible et puissant. Cependant, cette flexibilité peut aussi conduire à des erreurs ou à
+un code difficile à maintenir si vous n'êtes pas vigilant.
+
+---
+
+## Conseils Généraux
+
+- Utilisez `let` et `const` au lieu de `var` pour déclarer des variables.
+
+```javascript
+// Utilisation de let et const
+let variable = "temporaire";
+const CONSTANTE = "fixe";
+
+// Fonction fléchée
+const saluer = nom => "Bonjour, " + nom;
+```
+
+---
+
+## Trucs Pratiques
+
+### Décomposition (Destructuring)
+
+Vous pouvez facilement extraire des propriétés d'un objet ou des éléments d'un tableau.
+
+```javascript
+const {nom, age} = {nom: 'Alice', age: 25};  // Décomposition d'objet
+const [premier, deuxieme] = [1, 2];  // Décomposition de tableau
+```
+
+### Opérateur de Propagation (Spread Operator)
+
+```javascript
+const arr1 = [1, 2, 3];
+const arr2 = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]
+```
+
+---
+
+## Tableau des Méthodes Utiles
+
+| Méthode   | Exemple                            | Description                                             |
+|-----------|------------------------------------|---------------------------------------------------------|
+| `map`     | `arr.map(x => x * 2)`              | Transforme chaque élément du tableau.                   |
+| `filter`  | `arr.filter(x => x > 0)`           | Filtrer les éléments du tableau.                        |
+| `find`    | `arr.find(x => x > 0)`             | Trouver le premier élément qui satisfait une condition. |
+| `reduce`  | `arr.reduce((a, b) => a + b, 0)`   | Réduire le tableau à une seule valeur.                  |
+| `forEach` | `arr.forEach(x => console.log(x))` | Exécuter une fonction sur chaque élément.               |
+
+---
+
+## Références
+
+- [JavaScript.info](https://javascript.info/)
+- [MDN Web Docs - JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript)
+
+---

docs/communication.md

-## Text Formatting, Blockquotes, Horizontal Line
-
-**This is bold text**
-
-__This is also bold text__
-
-*This is italic text*
-
-_This is also italic text_
-
-***This is bold and italic text***
-
-___This is also bold and italic text___
-
-> This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lorem vel nibh lacinia maximus nec quis mauris.
-
-> This is another blockquote. Duis accumsan nunc in ligula cursus, in posuere risus maximus.
-
----
-
-Horizontal line above.
-
-Text with `inline code`.
-

docs/getari.md

-# Sommaire
-[//]: # (Navigation not working with mkdocs)
-
-1. [Le fonctionnement théorique](#Le-fonctionnement-théorique)
-2. [Le fonctionnement du code](#Le-fonctionnement-du-code)
-3. [Le fonctionnement des menus déroulants (MenuItems)](#Le-fonctionnement-des-menus)
-4. [Le rechargement d'un état sauvegardé](#Le-rechargement)
-5. [Les problèmes connus](#Les-problèmes-connus)
-6. [Les méthodes](#Les-méthodes)
-
-# Fonctions Annuler / Récupérer
-
-## Le fonctionnement théorique
-
-![forthebadge](https://forthebadge.com/images/badges/powered-by-coffee.svg)![forthebadge](https://forthebadge.com/images/badges/made-with-java.svg)
-
-Un point de sauvegarde se crée et vous pouvez ainsi annuler ou récupérer les événements passés lorsque vous effectuez
-une action:
-
-- Modifier le nom de l'évaluation.
-- Ajouter/supprimer/modifier un indicateur.
-- Ajouter/supprimer/modifier un processus.
-- Modifier le paramètrage d'une agrégation.
-
-Bouton annuler (Undo):
-
-- Annule l'état actuel et recharge l'état précédent (CTRL + Z ou en cliquant sur la flèche retour).
-- Annule l'état sélectionné dans le menu déroulant et recharge l'état précédent.
-  Tous les éléments situés entre l'état actuel et l'état sélectionné dans le menu déroulant seront récupérable par ordre
-  d’exécution dans la liste **Récupérer**.
-
-Bouton récupérer (Redo):
-
-- Récupère l'état qui vient d'être annulé et le recharge (CTRL + Y ou en cliquant sur la flèche avant).
-- Récupère l'état sélectionné dans le menu déroulant et le recharge.
-  Tous les éléments situés entre l'état actuel et l'état sélectionné dans le menu déroulant seront de nouveau annulable
-  par ordre d'exécution dans la liste **Annuler**.
-
-> [Sommaire](#Sommaire)
-
-## Le fonctionnement du code
-
-La sauvegarde de l'état actuel se fait grâce à la classe Memento.
-On crée un objet Memento qui prend l'évaluation actuelle en paramètre, ainsi que son état et un ID.
-[//]: # (block code design can be upgraded)
-
-    final Evaluation e = GetariApp.get().getCurrentEval().clone();
-    int newID = history.getMemento().getId() + 1;
-    Memento m = new Memento(e, Messages.getString("msg", indicator.getName()), newID);
-    history.addMemento(m);
-
-Chaque action crée un objet Memento et le stock en première position dans une liste observable de la classe History: la
-liste undo. Chaque ajout vide la deuxième liste (redo) .
-Cette classe History possède deux liste observable qui géreront les éléments à annuler, et ceux à récupérer.
-
-Lors du clique sur le bouton **Annuler**, la méthode undo() de la classe History est appelée.
-Cette méthode transfert le premier élément de la liste undo vers la liste redo et recharge le nouveau premier élément de
-la liste undo (qui est en fait l'état précédent).
-
-Lors du clique sur le bouton **Récupérer**, la méthode redo() de la classe History est appelée.
-Cette méthode transfert le premier élément de la liste redo vers la liste undo en première position et recharge le
-premier élément de la liste undo.
-
-Lors du clique sur un des éléments du menu déroulant du bouton **Annuler**, la méthode undoByID(int id) de la classe
-History est appelée.
-Cette méthode prend un argument un Integer et cherche dans la liste undo le mémento qui possède cet ID grâce à la
-méthode findByID(int id).
-Puis, à partir du premier élément jusqu’à celui possédant l'ID, transfert tous les éléments de la liste undo vers la
-liste redo par ordre d'exécution.
-Enfin, recharge le premier élément de la liste undo.
-
-Lors du clique sur un des éléments du menu déroulant du bouton **Récupérer**, la méthode redoByID(int id) de la classe
-History est appelée.
-Cette méthode prend un argument un Integer et cherche dans la liste redo le mémento qui possède cet ID grâce à la
-méthode findByID(int id).
-Puis, à partir du premier élément jusqu’à celui possédant l'ID, transfert tous les éléments de la liste redo vers la
-liste undo par ordre d'exécution.
-Enfin, recharge le premier élément de la liste undo.
-
-> [Sommaire](#Sommaire)
-
-## Le fonctionnement des menus
-
-![forthebadge](https://forthebadge.com/images/badges/powered-by-black-magic.svg)
-
-Les listes observables de la classe History ont chacune un EventListener qui se déclenche quand la taille de la liste
-change.
-Plusieurs événements se déclenchent.
-Quand la taille de la liste undo history **augmente** mais que la redo history est toujours **vide**:
-
-- Un MenuItem 'item' se crée en prenant le nom du mémento (son "état").
-- Un listener est ajouté sur cet item qui déclenchera la méthode undoByID(int id) si il est cliqué.
-- Cet item est ajouté dans une ArrayList nommée 'undoList'.
-- Cette liste est ajoutée au bouton undoBtn pour l'affichage du menu déroulant.
-
-Quand la taille de la liste undo history **diminue**:
-
-- Un MenuItem 'item' se crée en prenant le nom du mémento (son "état").
-- Un listener est ajouté sur cet item qui déclenchera la méthode redoByID(int id) si il est cliqué.
-- Cet item est ajouté dans une ArrayList nommée 'redoList'.
-- Cette liste est ajoutée au bouton redoBtn pour l'affichage du menu déroulant.
-- Le premier item de la undoList est supprimé.
-
-Quand la taille de la liste redo history **diminue**:
-
-- Un MenuItem 'item' se crée en prenant le nom du mémento (son "état").
-- Un listener est ajouté sur cet item qui déclenchera la méthode undoByID(int id) si il est cliqué.
-- Cet item est ajouté dans la undoList en première position.
-- Cette liste est ajoutée au bouton redoBtn pour l'affichage du menu déroulant.
-- Le premier item de la redoList est supprimé.
-- Si la liste redo history est vide, clear() également la redoList.
--
-
-> [Sommaire](#Sommaire)
-
-## Le rechargement
-
-Lors de l'utilisation des boutons annuler/récupérer, la méthode reloadGraph() de la classe GraphView est appelée. Cette
-méthode vide les panneaux, récupère le dernier mémento de la liste undo history.
-L’évaluation associée à ce mémento est extraite, clonée, puis rechargée.
-
-> [Sommaire](#Sommaire)
-
-## Les problèmes connus
-
-Lors d'un trop grand nombre d'annulations, récupérations, ajouts/suppressions d'indicateurs, Getari crash.
-
-`#1 Exception in thread "JavaFX Application Thread" java.lang.OutOfMemoryError: Required array length too large`
-`#2 Exception in thread "JavaFX Application Thread" java.lang.OutOfMemoryError: Java heap space`
-Ce problème est certainement dû au clonage de l'évaluation.
-
-L'ajout d'une fonction d'agrégation déclenche bien le point de sauvegarde, mais le rechargement n'annule pas cet ajout.
-
-Incapacité à localiser l'endroit où placer certains points de sauvegarde pour la modification de certains indicateurs (
-Normalisation, Seuil, Linéaires).
-Incapacité à sauvegarder après avoir cliquer sur le bouton "Tout effacer" car ce bouton appelle la méthode clearGraph()
-de GraphView qui est elle même appelée à chaque rechargement d'un événement passé.
-
-> [Sommaire](#Sommaire)
-
-## Les méthodes
-
-***Classe ToolbarController***
-
-| Nom                 | Fonctionnement                                  |
-|---------------------|-------------------------------------------------|
-| setHistory(history) | Ajoute un listener sur les listes undo et redo  |
-| onUndoAction(event) | Déclenche les méthode undo() et reloadCmd.run() |
-| onRedoAction(event) | Déclenche les méthode redo() et reloadCmd.run() |
-| initialize()        | Ajoute le tooltip et le hover sur les boutons   |
-
----
-***Classe History***
-
-| Nom                 | Fonctionnement                                                                                           |
-|---------------------|----------------------------------------------------------------------------------------------------------|
-| addMemento(memento) | Ajoute un memento dans la liste undoHistory                                                              |
-| undo()              | Transfert le premier élément de la liste undo vers la liste redo                                         |
-| redo()              | Transfert le premier élément de la liste redo vers la liste undo                                         |
-| undoById(int)       | Transfert tous les éléments depuis le premier jusqu'au mémento voulu de la liste undo vers la liste redo |
-| redoById(int)       | Transfert tous les éléments depuis le premier jusqu'au mémento voulu de la liste redo vers la liste undo |
-| findById(int)       | Retourne le mémento correspondant à l'ID dans la liste undo                                              |
-| findRedoById(int)   | Retourne le mémento correspondant à l'ID dans la liste redo                                              |
-| getUndoMemento()    | Retourne le mémento en première position de la liste undo                                                |
-| getRedoMemento()    | Retourne le mémento en première position de la liste redo                                                |
-
----
-***Classe GraphView***
-
-| Nom                             | Fonctionnement                                                                                                |
-|---------------------------------|---------------------------------------------------------------------------------------------------------------|
-| reloadGraph()                   | Nettoie les panneaux et les rechargent avec l'évaluation voulue.                                              |
-| configureUndoRedoButtons(stage) | Ajoute un listener sur le stage pour écouter la combinaison de touche CTRL+Z et CTRL+Y pour undo() et redo(). |
-
-> [Sommaire](#Sommaire) 
-
-
-
-

docs/index.md

-## Headers, Lists, Links, and Images
+# Exemple d'utilisation de mkdocs-dsfr
+## Cours de JavaScript pour Débutants
 
-# Header 1
+Bienvenue dans ce cours de JavaScript pour débutants ! Vous allez découvrir les bases de ce langage de programmation
+très utilisé.
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+## Table des Matières
 
-## Header 2
+1. [Introduction](#introduction)
+2. [Variables et Types de Données](#variables-et-types-de-donnees)
+3. [Opérateurs](#operateurs)
+4. [Structures de Contrôle](#structures-de-controle)
+5. [Fonctions](#fonctions)
+6. [Références](#references)
 
-* Curabitur aliquam lacus vitae est aliquet, in volutpat lorem cursus.
-* Aenean cursus mauris vel diam feugiat rutrum.
+---
 
-### Header 3
+## Introduction
 
-1. Suspendisse sem lorem
-2. Vestibulum ante ipsum primis
-3. Fusce pulvinar semper magna
+**JavaScript** est un langage de programmation qui permet de créer des contenus interactifs sur le web. Il est souvent
+utilisé en combinaison avec HTML et CSS.
 
-#### Header 4
+```javascript
+// Ceci est un commentaire en JavaScript
+console.log("Bonjour, monde!");
+```
 
-This is a link to [Google](https://www.google.com)
+---
 
-##### Header 5
+## Variables et Types de Données
 
-This is an inline image: ![Markdown Logo](https://markdown-here.com/img/icon256.png)
+En JavaScript, vous pouvez utiliser différents types de données, comme les nombres, les chaînes de caractères et les
+objets.
 
-###### Header 6
 
-* An unordered list:
-    * First item
-    * Second item
-        * Sub-item 1
-        * Sub-item 2
-* Third item
+| Type de Donnée | Exemple         | Description                               |
+|----------------|-----------------|-------------------------------------------|
+| Number         | `42`, `3.14`    | Nombres, entiers ou flottants.            |
+| String         | `"Bonjour"`     | Chaînes de caractères.                    |
+| Boolean        | `true`, `false` | Valeurs booléennes, vrai ou faux.         |
+| Object         | `{}`            | Objets, collections de paires clé-valeur. |
+| Array          | `[]`            | Tableaux, listes ordonnées d'éléments.    |
+| Undefined      | `undefined`     | Valeur non définie.                       |
+| Null           | `null`          | Valeur nulle.                             |
 
-A list within a list:  
+---
 
-1. First item
-2. Second item
-    1. Sub-item 1
-    2. Sub-item 2
-3. Third item
+## Opérateurs
+
+JavaScript propose de nombreux opérateurs pour effectuer des opérations mathématiques, de comparaison, etc.
+
+**Exemple:**
+
+```javascript
+var a = 5;
+var b = 2;
+var c = a + b;  // c sera égal à 7
+```
+
+---
+
+## Structures de Contrôle
+
+Vous pouvez utiliser des structures de contrôle comme les boucles et les conditions.
+
+**Exemple de boucle `for`:**
+
+```javascript
+for (var i = 0; i < 5; i++) {
+    console.log(i);
+}
+```
+
+---
+
+## Fonctions
+
+Les fonctions sont des blocs de code réutilisables. Voici comment déclarer une fonction:
+
+```javascript
+function saluer(nom) {
+    return "Bonjour, " + nom + "!";
+}
+```
+
+---
+
+## Références
+
+- [Site officiel de JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript)
+- [W3Schools - JavaScript](https://www.w3schools.com/js/)
+
+---

docs/navigation.md

-## Code blocks, Tables, Strikethrough, Task Lists
-
-# Code Blocks
-
-You can use triple backticks to create a code block. You can also specify the language for syntax highlighting.
-
-Here is an example using Python:
-
-```python
-def hello_world():
-    print("Hello, world!")
-
-hello_world()
-```
-
-# Tables
-
-Creating tables in Markdown requires using the pipe symbol (|) to separate columns and dashes (-) to separate headers from rows.
-
-Here's a simple table:
-
-| Name      | Age | Country   |
-|-----------|-----|-----------|
-| John Doe  | 28  | USA       |
-| Jane Doe  | 32  | Canada    |
-| Jim Smith | 45  | Australia |
-
-# Strikethrough
-
-The strikethrough effect can be achieved by wrapping your text with two tilde (~~) symbols.
-
-[//]: # (not rendered properly by mkdocs)
-Like this: ~~Strikethrough text~~
-
-# Task Lists
-
-Task lists allow you to create a checklist of items with checkboxes.
-
-Uncompleted tasks:
-[//]: # (not rendered properly by mkdocs)
-- [ ] Task 1
-- [ ] Task 2
-- [ ] Task 3
-
-Completed task:
-[//]: # (not rendered properly by mkdocs)
-- [x] Task 1
-
-Nested task list:
-[//]: # (not rendered properly by mkdocs)
-- [ ] Task 1
-    - [ ] Subtask 1.1
-    - [x] Subtask 1.2
-- [x] Task 2

mkdocs.yml

@@ -4,10 +4,7 @@ extra_css:
 
 nav:
   - Accueil: index.md
-  - Communication: communication.md
-  - Navigation: navigation.md
-  - Getari: getari.md
-  - Reactive Programming: reactive-programming.md
+  - Astuces: astuces.md
 
 site_name: Portail Forge