mirror of
https://github.com/buchtioof/notes.git
synced 2026-05-02 17:43:28 +02:00
add 09/02
This commit is contained in:
squick
parent
9fbaa625ad
commit
97554712f1
@ -4,3 +4,4 @@
|
||||
|
||||
- [Cours 1 : ](javascript/2026-01-30.md)
|
||||
- [Cours 2 : Asynchrone et Manip de fichiers](javascript/2026-02-06.md)
|
||||
- [Cours 3 : fetch des APIs et serveur HTTP](javascript/2026-02-09.md)
|
||||
49
docs/learn/javascript/2026-02-09.md
Normal file
49
docs/learn/javascript/2026-02-09.md
Normal file
@ -0,0 +1,49 @@
|
||||
<img src="https://pbs.twimg.com/media/HAtgMOZXUAAH0kD?format=jpg&name=medium" alt="tasty crousty goumin 67 doro">
|
||||
|
||||
# JS en gros pt.3 : fetch des APIs et serveur HTTP (09/02/26)
|
||||
|
||||
## Fetch et APIs
|
||||
|
||||
Dans le cadre d'un TP, on a fait des appels à des APIs externes comme celle du CNAM ou encore openweathermap pour intégrer les données actuelles dans un script JS.
|
||||
|
||||
Pour faire des appels, on utlise la méthode Asynchrone du cours précédent qui nous permettra de faire des appels des APIs sans arrêter le programme en attendant la réponse. Une fonction nous permet de faire cet appel : `fetch()`
|
||||
|
||||
### `fetch()` (Le coursier)
|
||||
fetch à le rôle de coursier, c'est lui qui effectuera la requête HTTP (GET par défaut).
|
||||
|
||||
* **Ce que ça fait :** Ça envoie un ping à une URL pour aller chercher des data.
|
||||
|
||||
* Et ça renvoie une promesse en attendant la réponse de l'API
|
||||
|
||||
Pour traiter nos réponses proprement, on combine nos fetch avec le module json()
|
||||
|
||||
### `json()` (Le traducteur)
|
||||
Quand `fetch` revient, il te ramène un gros paquet brut (un `Response object`).
|
||||
|
||||
* **Ce que ça fait :** Ça prend ce paquet et ça le transforme en **Objet JavaScript** utilisable (avec des accolades `{}` et tout).
|
||||
|
||||
* **Note :** C'est aussi asynchrone, donc il faut un `await` devant aussi.
|
||||
|
||||
### Exemple du TP
|
||||
|
||||
Dans une fonction async `fetchCityInfo()`, on essayera de fetch via cette fonction :
|
||||
```javascript
|
||||
// Attend de fetch les données d'une ville donnée par l'utilisateur via la variable cityName
|
||||
const geoRes = await fetch(`https://geoservice.cnam.fr/api/cities?name=${encodeURIComponent(cityName)}`);
|
||||
```
|
||||
|
||||
Puis on encode les données brutes reçues dans un joli tableau JSON :
|
||||
```javascript
|
||||
// La constante cities récupère le résultat geoRes et le range en JSON
|
||||
const cities = await geoRes.json();
|
||||
```
|
||||
|
||||
Plus tard, on refait un fetch de données avec une clé API pour openweathermap (cas concret en gros) :
|
||||
```javascript
|
||||
//Comme tout à l'heure, on fetch les données de l'API et on attend la réponse via await
|
||||
const weatherRes = await fetch(`http://api.weatherapi.com/v1/current.json?q=${encodeURIComponent(cityName)}&key=****`);
|
||||
```
|
||||
|
||||
Bravo, tu as fait un appel d'API et l'a rangé dans un beau tableau JSON.
|
||||
|
||||
## Serveur HTTP
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
|
||||
|
||||
<title>Les incroyables notes de ramzouille</title>
|
||||
<title>Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -153,7 +153,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href="/" title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="/" title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -167,7 +167,7 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
@ -272,13 +272,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="/" title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="/" title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
|
||||
|
||||
<title>Commandes *sh pour les idiots (28/11/25) - Les incroyables notes de ramzouille</title>
|
||||
<title>Commandes *sh pour les idiots (28/11/25) - Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -176,7 +176,7 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
@ -281,13 +281,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
|
||||
|
||||
<title>Git pour les neuilles (12/12/25) - Les incroyables notes de ramzouille</title>
|
||||
<title>Git pour les neuilles (12/12/25) - Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -176,7 +176,7 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
@ -281,13 +281,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
|
||||
|
||||
<title>pip et environnements virtuels pour les caca (16/01/26) - Les incroyables notes de ramzouille</title>
|
||||
<title>pip et environnements virtuels pour les caca (16/01/26) - Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -176,7 +176,7 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
@ -281,13 +281,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
|
||||
|
||||
<title>SQL pour les tung tung tung sahur (22/01/26) - Les incroyables notes de ramzouille</title>
|
||||
<title>SQL pour les tung tung tung sahur (22/01/26) - Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -176,7 +176,7 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
@ -281,13 +281,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
|
||||
|
||||
<title>Bienvenue dans les notes de ramzouille - Les incroyables notes de ramzouille</title>
|
||||
<title>Bienvenue dans mes notes de devops - Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -144,7 +144,7 @@
|
||||
<div data-md-component="skip">
|
||||
|
||||
|
||||
<a href="#bienvenue-dans-les-notes-de-ramzouille" class="md-skip">
|
||||
<a href="#bienvenue-dans-mes-notes-de-devops" class="md-skip">
|
||||
Skip to content
|
||||
</a>
|
||||
|
||||
@ -160,7 +160,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href="" title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="" title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -174,13 +174,13 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
<span class="md-ellipsis">
|
||||
|
||||
Bienvenue dans les notes de ramzouille
|
||||
Bienvenue dans mes notes de devops
|
||||
|
||||
</span>
|
||||
</div>
|
||||
@ -279,13 +279,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="" title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="" title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
@ -859,7 +859,7 @@
|
||||
|
||||
<p><img src="https://media1.tenor.com/m/ZTT94KgxLEUAAAAd/bassem-rire.gif" alt="tk completement sous frozen">
|
||||
<em>avant le 28/11 y'a rien a gratter, j'installais linux pour la 9387e fois</em></p>
|
||||
<h1 id="bienvenue-dans-les-notes-de-ramzouille">Bienvenue dans les notes de ramzouille</h1>
|
||||
<h1 id="bienvenue-dans-mes-notes-de-devops">Bienvenue dans mes notes de devops</h1>
|
||||
<h2 id="structure">Structure</h2>
|
||||
<p>-> cheatsheets (Notes sur les outils dev du quotidien)</p>
|
||||
<p>-> cours (Notes sur les cours)</p>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
|
||||
|
||||
<title>C koi linux ? (30/10/25) - Les incroyables notes de ramzouille</title>
|
||||
<title>C koi linux ? (30/10/25) - Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -176,7 +176,7 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
@ -281,13 +281,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
|
||||
|
||||
<title>Javascript en gros pt.1 (30/01/26) - Les incroyables notes de ramzouille</title>
|
||||
<title>Javascript en gros pt.1 (30/01/26) - Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -158,7 +158,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href="../../.." title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../../.." title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -172,7 +172,7 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
@ -277,13 +277,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="../../.." title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../../.." title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
|
||||
|
||||
<title>JS en gros pt.2 : Asynchrone et promesses, Manip de fichiers (06/02/26) - Les incroyables notes de ramzouille</title>
|
||||
<title>JS en gros pt.2 : Asynchrone et promesses, Manip de fichiers (06/02/26) - Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -158,7 +158,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href="../../.." title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../../.." title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -172,7 +172,7 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
@ -277,13 +277,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="../../.." title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../../.." title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
@ -871,106 +871,6 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#manipulation-de-fichiers" class="md-nav__link">
|
||||
<span class="md-ellipsis">
|
||||
|
||||
Manipulation de fichiers
|
||||
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#lecture-de-fichiers-fsreadfile" class="md-nav__link">
|
||||
<span class="md-ellipsis">
|
||||
|
||||
Lecture de fichiers (fs.readFile)
|
||||
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<nav class="md-nav" aria-label="Lecture de fichiers (fs.readFile)">
|
||||
<ul class="md-nav__list">
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#2-la-resolution-le-callback" class="md-nav__link">
|
||||
<span class="md-ellipsis">
|
||||
|
||||
2. La Résolution (Le Callback)
|
||||
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#partie-2-le-traitement-sequentiel-le-modele-asyncawait" class="md-nav__link">
|
||||
<span class="md-ellipsis">
|
||||
|
||||
PARTIE 2 : Le Traitement Séquentiel (Le modèle async/await)
|
||||
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<nav class="md-nav" aria-label="PARTIE 2 : Le Traitement Séquentiel (Le modèle async/await)">
|
||||
<ul class="md-nav__list">
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#1-la-suspension-de-lexecution-await" class="md-nav__link">
|
||||
<span class="md-ellipsis">
|
||||
|
||||
1. La Suspension de l'Exécution (await)
|
||||
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#2-le-mode-decriture-appendfile-vs-writefile" class="md-nav__link">
|
||||
<span class="md-ellipsis">
|
||||
|
||||
2. Le Mode d'Écriture (appendFile vs writeFile)
|
||||
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#3-literation-la-boucle" class="md-nav__link">
|
||||
<span class="md-ellipsis">
|
||||
|
||||
3. L'Itération (La boucle)
|
||||
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#en-resume-technique" class="md-nav__link">
|
||||
<span class="md-ellipsis">
|
||||
|
||||
📝 En Résumé Technique
|
||||
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
@ -1055,59 +955,6 @@
|
||||
<li><strong>La Promise</strong> : On te promet un résultat dans <code>stats</code></li>
|
||||
<li><code>**await**</code> : Tant que l'on a pas de résultat, on "fige" à cette ligne jusqu'à ce que la promesse est reçue.</li>
|
||||
</ul>
|
||||
<h2 id="manipulation-de-fichiers">Manipulation de fichiers</h2>
|
||||
<p>Pour manipuler des fichiers avec Node.JS, il existe un module appelé <em>Node.JS fs</em>, fs pour fiché S. Avec cette librairie on peut manipuler de plusieurs manière nos fichiers, les lire, écrire ou réécrire, demander les infos d'un fichier, copier et pleinnn de choses encore !</p>
|
||||
<p><strong>Ici on se concentrera sur les fonctions qu'on utilise dans le TP 2 de JS</strong></p>
|
||||
<p>Avant tout, pour utiliser ce module, il faut l'appeler via une constante :
|
||||
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">fs</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="s1">'fs'</span><span class="p">).</span><span class="nx">promises</span><span class="p">;</span><span class="w"> </span><span class="c1">// fs prendra l'appel du module en utilisant les promesses de tout à l'heure</span>
|
||||
</code></pre></div></p>
|
||||
<h2 id="lecture-de-fichiers-fsreadfile">Lecture de fichiers (<em>fs.readFile</em>)</h2>
|
||||
<p>Pour lire des fichiers, on utilise la fonction <code>fs.readFile</code>. Lorsque cette commande est exécutée, le moteur JavaScript ne lit pas le fichier lui-même. Il envoie une requête au système d'exploitation (l'OS) pour qu'il s'en charge.</p>
|
||||
<ul>
|
||||
<li><strong>Concrètement :</strong> Le programme libère immédiatement la main. Il ne reste pas bloqué sur cette ligne et continue d'exécuter le code qui suit.</li>
|
||||
</ul>
|
||||
<h3 id="2-la-resolution-le-callback">2. La Résolution (Le Callback)</h3>
|
||||
<p>Une fois que le système d'exploitation a fini de lire le fichier, il notifie le programme. La Promesse change d'état et déclenche l'une des deux fonctions suivantes :</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><strong>Le Succès (<code>.then</code>)</strong> :
|
||||
Déclenché si l'opération a réussi. Le système injecte les données lues (le contenu du fichier) dans la fonction définie ici. C'est ici que le traitement des données commence.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>L'Erreur (<code>.catch</code>)</strong> :
|
||||
Déclenché si l'opération a échoué (fichier introuvable, permissions refusées). Le système injecte un objet <code>Error</code> contenant les détails du problème. Cela permet de capturer l'exception sans faire planter l'application.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<h2 id="partie-2-le-traitement-sequentiel-le-modele-asyncawait">PARTIE 2 : Le Traitement Séquentiel (Le modèle <code>async/await</code>)</h2>
|
||||
<p>Parfois, l'asynchronisme pur est difficile à gérer (besoin d'ordre précis). La syntaxe <code>async/await</code> permet de forcer un comportement séquentiel au sein d'une fonction asynchrone.</p>
|
||||
<h3 id="1-la-suspension-de-lexecution-await">1. La Suspension de l'Exécution (<code>await</code>)</h3>
|
||||
<p>Le mot-clé <code>await</code> placé devant une Promesse (comme <code>fs.readFile</code>) modifie le flux d'exécution.
|
||||
* <strong>Concrètement :</strong> L'interpréteur met en <strong>pause</strong> uniquement l'exécution de la fonction actuelle. Il attend que la Promesse soit résolue (terminée) avant de passer à la ligne suivante.
|
||||
* <strong>L'encodage (<code>utf8</code>)</strong> : Spécifie au système de convertir directement le flux binaire (Buffer) en chaîne de caractères lisible (String) avant de renvoyer le résultat.</p>
|
||||
<h3 id="2-le-mode-decriture-appendfile-vs-writefile">2. Le Mode d'Écriture (<code>appendFile</code> vs <code>writeFile</code>)</h3>
|
||||
<p>Lorsqu'il s'agit d'écrire des données sur le disque, le choix de la méthode détermine comment le fichier est manipulé au niveau basique :</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><strong><code>fs.writeFile</code> (Écrasement)</strong> :
|
||||
Cette méthode ouvre le fichier et place le curseur au tout début (index 0). Si le fichier contient déjà des données, elles sont <strong>tronquées</strong> (supprimées) et remplacées par le nouveau contenu.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong><code>fs.appendFile</code> (Ajout)</strong> :
|
||||
Cette méthode ouvre le fichier et place le curseur directement à la <strong>fin</strong> du fichier (EOF - End Of File). Les nouvelles données sont écrites à la suite des existantes, préservant ainsi l'historique.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 id="3-literation-la-boucle">3. L'Itération (La boucle)</h3>
|
||||
<p>Dans un contexte <code>async/await</code>, une boucle permet de traiter une liste d'éléments un par un.
|
||||
* <strong>Concrètement :</strong> Le système traite le premier fichier, attend la fin complète de l'opération (lecture + écriture), et seulement ensuite passe à l'itération suivante. Cela garantit l'ordre des opérations.</p>
|
||||
<hr />
|
||||
<h2 id="en-resume-technique">📝 En Résumé Technique</h2>
|
||||
<ol>
|
||||
<li><strong>I/O Asynchrone</strong> : Permet de déléguer les opérations lentes (disque, réseau) au système pour ne pas bloquer le processeur.</li>
|
||||
<li><strong>Promise</strong> : Objet représentant l'état futur d'une opération (En attente -> Résolu ou Rejeté).</li>
|
||||
<li><strong>Flux Séquentiel (<code>await</code>)</strong> : Force le code à attendre la résolution d'une promesse avant de continuer, simulant un code synchrone pour plus de lisibilité et de contrôle.</li>
|
||||
<li><strong>Gestion d'erreur</strong> : Indispensable pour intercepter les exceptions systèmes (I/O) et éviter l'arrêt brutal du processus node.</li>
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
|
||||
949
site/learn/javascript/2026-02-09/index.html
Normal file
949
site/learn/javascript/2026-02-09/index.html
Normal file
File diff suppressed because one or more lines are too long
@ -23,7 +23,7 @@
|
||||
|
||||
|
||||
|
||||
<title>Javascript en gros - Les incroyables notes de ramzouille</title>
|
||||
<title>Javascript en gros - Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -176,7 +176,7 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
@ -281,13 +281,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
@ -866,6 +866,7 @@
|
||||
<ul>
|
||||
<li><a href="../javascript/2026-01-30/">Cours 1 : </a></li>
|
||||
<li><a href="../javascript/2026-02-06/">Cours 2 : Asynchrone et Manip de fichiers</a></li>
|
||||
<li><a href="../javascript/2026-02-09/">Cours 3 : fetch des APIs et serveur HTTP</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
|
||||
|
||||
<title>Liens cools de ma poche - Les incroyables notes de ramzouille</title>
|
||||
<title>Liens cools de ma poche - Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -160,7 +160,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href=".." title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href=".." title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -174,7 +174,7 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
@ -279,13 +279,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href=".." title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href=".." title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
|
||||
|
||||
<title>Grabber pt.1 (05/12/25) - Les incroyables notes de ramzouille</title>
|
||||
<title>Grabber pt.1 (05/12/25) - Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -176,7 +176,7 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
@ -281,13 +281,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
|
||||
|
||||
<title>Site de notes avec Zensical (23/01/26) - Les incroyables notes de ramzouille</title>
|
||||
<title>Site de notes avec Zensical (23/01/26) - Les incroyables notes de devops</title>
|
||||
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@
|
||||
|
||||
<header class="md-header md-header--shadow" data-md-component="header">
|
||||
<nav class="md-header__inner md-grid" aria-label="Header">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-header__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-header__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
@ -176,7 +176,7 @@
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
@ -281,13 +281,13 @@
|
||||
|
||||
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="../.." title="Les incroyables notes de ramzouille" class="md-nav__button md-logo" aria-label="Les incroyables notes de ramzouille" data-md-component="logo">
|
||||
<a href="../.." title="Les incroyables notes de devops" class="md-nav__button md-logo" aria-label="Les incroyables notes de devops" data-md-component="logo">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-book-open" viewBox="0 0 24 24"><path d="M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
|
||||
|
||||
</a>
|
||||
Les incroyables notes de ramzouille
|
||||
Les incroyables notes de devops
|
||||
</label>
|
||||
|
||||
<div class="md-nav__source">
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user
