518 lines
12 KiB
Markdown
518 lines
12 KiB
Markdown
# 📚 Cours JavaScript pour DevOps - Les Fondamentaux
|
||
|
||
> **⚠️ Important** : JavaScript ≠ Java ! Ce sont deux langages complètement différents. JavaScript est un langage de scripting moderne utilisé pour le web, le backend (Node.js), et l'automatisation DevOps.
|
||
|
||
---
|
||
|
||
## 📖 Table des matières
|
||
|
||
1. Les bases de JavaScript
|
||
2. Les tableaux et leurs méthodes
|
||
3. Les objets JavaScript
|
||
4. Les fonctions
|
||
5. Les boucles
|
||
6. Les expressions régulières (Regex)
|
||
7. Exécuter du code avec Docker
|
||
|
||
---
|
||
|
||
## 1️⃣ Les Bases de JavaScript
|
||
|
||
### Variables : let, const
|
||
|
||
En JavaScript, on déclare des variables avec `let` ou `const` :
|
||
|
||
```javascript
|
||
let compteur = 0; // Variable modifiable
|
||
const MAX_LOGS = 100; // Constante (non modifiable)
|
||
```
|
||
|
||
**Règle d'or** : Utilise `const` par défaut, et `let` seulement si tu dois modifier la valeur.
|
||
|
||
### Types de données
|
||
|
||
```javascript
|
||
// Nombres
|
||
const cpu = 85;
|
||
const ram = 90.5;
|
||
|
||
// Chaînes de caractères (strings)
|
||
const serveur = "srv-01";
|
||
const status = 'online';
|
||
|
||
// Booléens
|
||
const estEnLigne = true;
|
||
const estHorsDeLigne = false;
|
||
|
||
// Tableaux
|
||
const serveurs = ["srv-01", "srv-02", "srv-03"];
|
||
|
||
// Objets
|
||
const serveur1 = {
|
||
id: "srv-01",
|
||
cpu: 45,
|
||
ram: 60
|
||
};
|
||
```
|
||
|
||
### Opérateurs de comparaison
|
||
|
||
```javascript
|
||
45 === 45 // true (égal strictement)
|
||
45 == "45" // true (égal avec conversion)
|
||
45 === "45" // false (types différents)
|
||
45 !== 50 // true (différent de)
|
||
cpu > 80 // true si cpu vaut 85
|
||
ram <= 90 // true si ram vaut 90 ou moins
|
||
```
|
||
|
||
**Conseil** : Utilise toujours `===` et `!==` (comparaison stricte).
|
||
|
||
### Opérateurs logiques
|
||
|
||
```javascript
|
||
// ET logique (&&) : les DEUX conditions doivent être vraies
|
||
if (cpu > 80 && ram > 80) {
|
||
console.log("Alerte critique !");
|
||
}
|
||
|
||
// OU logique (||) : AU MOINS UNE condition doit être vraie
|
||
if (cpu > 80 || ram > 80) {
|
||
console.log("Serveur en alerte");
|
||
}
|
||
|
||
// NON logique (!) : inverse le booléen
|
||
if (!estEnLigne) {
|
||
console.log("Serveur hors ligne");
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 2️⃣ Les Tableaux (Arrays)
|
||
|
||
Un tableau est une liste ordonnée d'éléments.
|
||
|
||
### Créer et accéder aux éléments
|
||
|
||
```javascript
|
||
const logs = ["Error 404", "Warning", "Info"];
|
||
|
||
console.log(logs[0]); // "Error 404" (premier élément, index 0)
|
||
console.log(logs[1]); // "Warning"
|
||
console.log(logs.length); // 3 (nombre d'éléments)
|
||
```
|
||
|
||
**Important** : Les index commencent à 0, pas à 1 !
|
||
|
||
### Méthodes de base (mutation du tableau)
|
||
|
||
Ces méthodes **modifient** le tableau directement :
|
||
|
||
```javascript
|
||
const messages = [];
|
||
|
||
// Ajouter à la fin
|
||
messages.push("Nouveau log");
|
||
// Résultat : ["Nouveau log"]
|
||
|
||
// Ajouter au début
|
||
messages.unshift("Log prioritaire");
|
||
// Résultat : ["Log prioritaire", "Nouveau log"]
|
||
|
||
// Retirer le dernier élément
|
||
const dernier = messages.pop();
|
||
// Résultat : messages = ["Log prioritaire"]
|
||
|
||
// Retirer le premier élément
|
||
const premier = messages.shift();
|
||
// Résultat : messages = []
|
||
```
|
||
|
||
### Méthode .filter() - Filtrer des éléments
|
||
|
||
**Objectif** : Créer un nouveau tableau contenant uniquement les éléments qui respectent une condition.
|
||
|
||
```javascript
|
||
const serveurs = [
|
||
{ id: "srv-01", cpu: 45, status: "online" },
|
||
{ id: "srv-02", cpu: 85, status: "online" },
|
||
{ id: "srv-03", cpu: 12, status: "offline" }
|
||
];
|
||
|
||
// Garder seulement les serveurs online
|
||
const serveursOnline = serveurs.filter(serveur => serveur.status === "online");
|
||
// Résultat : [srv-01, srv-02]
|
||
|
||
// Garder seulement ceux avec CPU > 80%
|
||
const alertes = serveurs.filter(serveur => serveur.cpu > 80);
|
||
// Résultat : [srv-02]
|
||
```
|
||
|
||
**Syntaxe décortiquée** :
|
||
```javascript
|
||
// serveur => serveur.status === "online"
|
||
// ↑ paramètre ↑ condition qui retourne true ou false
|
||
```
|
||
|
||
### Méthode .map() - Transformer des éléments
|
||
|
||
**Objectif** : Créer un nouveau tableau en transformant chaque élément.
|
||
|
||
```javascript
|
||
const serveurs = [
|
||
{ id: "srv-01", cpu: 45 },
|
||
{ id: "srv-02", cpu: 85 }
|
||
];
|
||
|
||
// Extraire juste les IDs
|
||
const ids = serveurs.map(serveur => serveur.id);
|
||
// Résultat : ["srv-01", "srv-02"]
|
||
|
||
// Doubler toutes les valeurs CPU
|
||
const cpuDoubles = serveurs.map(serveur => serveur.cpu * 2);
|
||
// Résultat : [90, 170]
|
||
```
|
||
|
||
### Méthode .reduce() - Réduire à une seule valeur
|
||
|
||
**Objectif** : Condenser un tableau en une seule valeur (somme, moyenne, etc.).
|
||
|
||
```javascript
|
||
const valeurs = [10, 20, 30, 40];
|
||
|
||
// Calculer la somme
|
||
const somme = valeurs.reduce((accumulateur, valeur) => {
|
||
return accumulateur + valeur;
|
||
}, 0); // 0 = valeur initiale de l'accumulateur
|
||
// Résultat : 100
|
||
|
||
// Étape par étape :
|
||
// 1. accumulateur = 0, valeur = 10 → retourne 0 + 10 = 10
|
||
// 2. accumulateur = 10, valeur = 20 → retourne 10 + 20 = 30
|
||
// 3. accumulateur = 30, valeur = 30 → retourne 30 + 30 = 60
|
||
// 4. accumulateur = 60, valeur = 40 → retourne 60 + 40 = 100
|
||
```
|
||
|
||
**Calcul de moyenne** :
|
||
```javascript
|
||
const cpuValues = [45, 85, 95];
|
||
const moyenne = cpuValues.reduce((acc, val) => acc + val, 0) / cpuValues.length;
|
||
// Résultat : 75
|
||
```
|
||
|
||
---
|
||
|
||
## 3️⃣ Les Objets JavaScript
|
||
|
||
Un objet est une collection de propriétés (clé-valeur).
|
||
|
||
```javascript
|
||
const serveur = {
|
||
id: "srv-01",
|
||
cpu: 45,
|
||
ram: 60,
|
||
status: "online"
|
||
};
|
||
|
||
// Accéder aux propriétés
|
||
console.log(serveur.id); // "srv-01"
|
||
console.log(serveur["cpu"]); // 45 (notation alternative)
|
||
|
||
// Modifier une propriété
|
||
serveur.cpu = 50;
|
||
|
||
// Ajouter une nouvelle propriété
|
||
serveur.region = "eu-west-1";
|
||
```
|
||
|
||
---
|
||
|
||
## 4️⃣ Les Fonctions
|
||
|
||
Une fonction est un bloc de code réutilisable.
|
||
|
||
### Déclaration classique
|
||
|
||
```javascript
|
||
function calculerMoyenne(valeurs) {
|
||
const somme = valeurs.reduce((acc, val) => acc + val, 0);
|
||
return somme / valeurs.length;
|
||
}
|
||
|
||
const moyenne = calculerMoyenne([10, 20, 30]);
|
||
console.log(moyenne); // 20
|
||
```
|
||
|
||
### Fonction fléchée (Arrow function)
|
||
|
||
Syntaxe plus courte, très utilisée avec `.map()`, `.filter()`, `.reduce()` :
|
||
|
||
```javascript
|
||
// Fonction classique
|
||
function doubler(x) {
|
||
return x * 2;
|
||
}
|
||
|
||
// Fonction fléchée équivalente
|
||
const doubler = (x) => {
|
||
return x * 2;
|
||
};
|
||
|
||
// Version ultra-courte (si une seule instruction)
|
||
const doubler = x => x * 2;
|
||
```
|
||
|
||
---
|
||
|
||
## 5️⃣ Les Boucles
|
||
|
||
### Boucle for classique
|
||
|
||
```javascript
|
||
for (let i = 0; i < 5; i++) {
|
||
console.log("Itération numéro " + i);
|
||
}
|
||
// Affiche : 0, 1, 2, 3, 4
|
||
```
|
||
|
||
**Décortiqué** :
|
||
- `let i = 0` : Initialisation
|
||
- `i < 5` : Condition de continuation
|
||
- `i++` : Incrémentation (ajoute 1 à i)
|
||
|
||
### Boucle for...of (parcourir un tableau)
|
||
|
||
```javascript
|
||
const serveurs = ["srv-01", "srv-02", "srv-03"];
|
||
|
||
for (const serveur of serveurs) {
|
||
console.log(serveur);
|
||
}
|
||
// Affiche : srv-01, srv-02, srv-03
|
||
```
|
||
|
||
---
|
||
|
||
## 6️⃣ Les Expressions Régulières (Regex)
|
||
|
||
Les regex permettent de chercher et extraire des motifs dans du texte.
|
||
|
||
### Syntaxe de base
|
||
|
||
```javascript
|
||
const regex = /motif/;
|
||
```
|
||
|
||
### Symboles importants
|
||
|
||
| Symbole | Signification | Exemple |
|
||
|---------|--------------|---------|
|
||
| `\d` | Un chiffre (0-9) | `\d+` = un ou plusieurs chiffres |
|
||
| `\w` | Lettre, chiffre ou _ | `\w+` = un ou plusieurs caractères |
|
||
| `\s` | Espace blanc | `\s` = un espace |
|
||
| `+` | 1 ou plusieurs fois | `\d+` = au moins un chiffre |
|
||
| `*` | 0 ou plusieurs fois | `\d*` = zéro ou plus chiffres |
|
||
| `( )` | Groupe de capture | `(\d+)` = capture les chiffres |
|
||
|
||
### Méthode .test() - Vérifier une présence
|
||
|
||
```javascript
|
||
const log = "ERROR: Connection failed";
|
||
const contientErreur = /ERROR/.test(log);
|
||
console.log(contientErreur); // true
|
||
```
|
||
|
||
### Méthode .match() - Extraire des valeurs
|
||
|
||
```javascript
|
||
const config = "DB_PORT=5432";
|
||
const regex = /DB_PORT=(\d+)/;
|
||
const match = config.match(regex);
|
||
|
||
if (match) {
|
||
console.log(match[0]); // "DB_PORT=5432" (toute la correspondance)
|
||
console.log(match[1]); // "5432" (premier groupe capturé)
|
||
|
||
const port = Number(match[1]); // Convertir en nombre
|
||
console.log(port); // 5432
|
||
}
|
||
```
|
||
|
||
**Exemple pratique** :
|
||
```javascript
|
||
const texte = "L'utilisateur ID:12345 s'est connecté";
|
||
const regex = /ID:(\d+)/;
|
||
const resultat = texte.match(regex);
|
||
|
||
if (resultat) {
|
||
const userId = resultat[1]; // "12345"
|
||
console.log("User ID trouvé :", userId);
|
||
}
|
||
```
|
||
|
||
### Méthode .split() - Découper une chaîne
|
||
|
||
```javascript
|
||
const config = "DB_HOST=localhost;DB_PORT=5432;DB_USER=admin";
|
||
|
||
// Découper par ";"
|
||
const parties = config.split(";");
|
||
// Résultat : ["DB_HOST=localhost", "DB_PORT=5432", "DB_USER=admin"]
|
||
```
|
||
|
||
---
|
||
|
||
## 7️⃣ Exécuter du Code avec Docker
|
||
|
||
### Pourquoi Docker ?
|
||
|
||
Docker garantit que ton code s'exécute dans le **même environnement** partout (sur ton PC, celui du prof, en production).
|
||
|
||
### Structure d'un projet
|
||
|
||
```
|
||
mon-tp/
|
||
├── exercice1.js
|
||
├── exercice2.js
|
||
└── exercice3.js
|
||
```
|
||
|
||
### Commande d'exécution
|
||
|
||
Ouvre un terminal dans le dossier de ton projet et tape :
|
||
|
||
```bash
|
||
docker container run -it --rm -v $(pwd):/home/node/app -w /home/node/app node:current-alpine3.23 node exercice1.js
|
||
```
|
||
|
||
**Décortiqué** :
|
||
- `docker container run` : Lance un conteneur
|
||
- `-it` : Mode interactif
|
||
- `--rm` : Supprime le conteneur après exécution
|
||
- `-v $(pwd):/home/node/app` : Monte le dossier courant dans le conteneur
|
||
- `-w /home/node/app` : Définit le dossier de travail
|
||
- `node:current-alpine3.23` : Image Docker (Node.js)
|
||
- `node exercice1.js` : Commande à exécuter
|
||
|
||
**Version simplifiée pour Windows PowerShell** :
|
||
```powershell
|
||
docker container run -it --rm -v ${PWD}:/home/node/app -w /home/node/app node:current-alpine3.23 node exercice1.js
|
||
```
|
||
|
||
---
|
||
|
||
## 🎓 Concepts Essentiels à Retenir
|
||
|
||
### 1. Chaînage de méthodes
|
||
|
||
Tu peux combiner plusieurs méthodes :
|
||
|
||
```javascript
|
||
const serveurs = [
|
||
{ id: "srv-01", cpu: 45, status: "online" },
|
||
{ id: "srv-02", cpu: 85, status: "online" },
|
||
{ id: "srv-03", cpu: 12, status: "offline" }
|
||
];
|
||
|
||
const cpuMoyen = serveurs
|
||
.filter(s => s.status === "online") // Garde les online
|
||
.map(s => s.cpu) // Extrait les CPU
|
||
.reduce((acc, cpu) => acc + cpu, 0) // Somme
|
||
/ serveurs.filter(s => s.status === "online").length; // Divise par le nombre
|
||
|
||
console.log(cpuMoyen); // 65
|
||
```
|
||
|
||
### 2. Conditions ternaires (raccourci if/else)
|
||
|
||
```javascript
|
||
const status = cpu > 80 ? "Alerte" : "OK";
|
||
|
||
// Équivalent à :
|
||
let status;
|
||
if (cpu > 80) {
|
||
status = "Alerte";
|
||
} else {
|
||
status = "OK";
|
||
}
|
||
```
|
||
|
||
### 3. Template strings (interpolation)
|
||
|
||
```javascript
|
||
const serveur = "srv-01";
|
||
const cpu = 85;
|
||
|
||
// Ancien style
|
||
console.log("Serveur " + serveur + " a un CPU de " + cpu + "%");
|
||
|
||
// Nouveau style (avec backticks ` `)
|
||
console.log(`Serveur ${serveur} a un CPU de ${cpu}%`);
|
||
```
|
||
|
||
### 4. Déstructuration
|
||
|
||
```javascript
|
||
const serveur = { id: "srv-01", cpu: 45, ram: 60 };
|
||
|
||
// Extraire des propriétés
|
||
const { id, cpu } = serveur;
|
||
console.log(id); // "srv-01"
|
||
console.log(cpu); // 45
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 Exemples Pratiques DevOps
|
||
|
||
### Exemple 1 : Filtrer les alertes
|
||
|
||
```javascript
|
||
const serveurs = [
|
||
{ id: "srv-01", cpu: 45, ram: 60 },
|
||
{ id: "srv-02", cpu: 85, ram: 90 },
|
||
{ id: "srv-03", cpu: 95, ram: 88 }
|
||
];
|
||
|
||
// Trouver tous les serveurs en alerte (CPU > 80 OU RAM > 80)
|
||
const alertes = serveurs.filter(s => s.cpu > 80 || s.ram > 80);
|
||
console.log(alertes);
|
||
// Résultat : [srv-02, srv-03]
|
||
```
|
||
|
||
### Exemple 2 : Calculer la moyenne CPU
|
||
|
||
```javascript
|
||
const serveurs = [
|
||
{ id: "srv-01", cpu: 45 },
|
||
{ id: "srv-02", cpu: 85 },
|
||
{ id: "srv-03", cpu: 95 }
|
||
];
|
||
|
||
const totalCpu = serveurs.reduce((acc, s) => acc + s.cpu, 0);
|
||
const moyenne = totalCpu / serveurs.length;
|
||
console.log(`CPU moyen : ${moyenne}%`);
|
||
// Résultat : CPU moyen : 75%
|
||
```
|
||
|
||
### Exemple 3 : Parser une configuration
|
||
|
||
```javascript
|
||
const config = "DB_HOST=localhost;DB_PORT=5432;DB_USER=admin";
|
||
|
||
const pairs = config.split(";"); // ["DB_HOST=localhost", ...]
|
||
|
||
const configObj = {};
|
||
for (const pair of pairs) {
|
||
const [key, value] = pair.split("="); // Sépare par "="
|
||
|
||
// Si c'est un nombre, le convertir
|
||
configObj[key] = isNaN(value) ? value : Number(value);
|
||
}
|
||
|
||
console.log(configObj);
|
||
// { DB_HOST: "localhost", DB_PORT: 5432, DB_USER: "admin" }
|
||
```
|
||
|
||
--- |
