
# 🎓 JavaScript

## 📘 Théorie de base

### Qu'est-ce que JavaScript ?
JavaScript est un langage de programmation **interprété** principalement utilisé pour ajouter de l'interactivité aux pages web. Il fonctionne côté **client (navigateur)**, mais peut aussi être utilisé côté **serveur** (Node.js).

### Histoire rapide
JavaScript a été créé en 1995 par **Brendan Eich** chez Netscape. Il ne faut pas le confondre avec Java, malgré son nom.

### Caractéristiques principales
- **Langage interprété** : Pas besoin de compilation.
- **Langage orienté objet** : Utilise des objets et des classes.
- **Langage dynamique** : Les types de variables sont définis à l'exécution.
- **Langage multi-paradigme** : Supporte la programmation impérative, fonctionnelle et orientée objet.
- **Événementiel** : Réagit aux actions de l'utilisateur (clics, mouvements de souris, etc.).
- **Asynchrone** : Grâce aux callbacks, promesses et `async/await`, il peut gérer les opérations longues sans bloquer le reste du code.

### Utilisations typiques
- **Côté client** : Manipulation du DOM, gestion des événements, animations.
- **Côté serveur** : Avec Node.js, JavaScript est aussi utilisé pour créer des serveurs web.

---

## Fonctions importantes et mots-clés en JavaScript

### 🔑 Mots-clés courants

| Mot-clé     | Description |
|-------------|-------------|
| `var`       | Déclare une variable (ancienne méthode, portée fonctionnelle) |
| `let`       | Déclare une variable à portée de bloc |
| `const`     | Déclare une constante à portée de bloc |
| `function`  | Déclare une fonction |
| `return`    | Retourne une valeur depuis une fonction |
| `if`, `else`, `switch` | Contrôle de flux conditionnel |
| `for`, `while`, `do...while` | Boucles |
| `break`     | Interrompt une boucle ou un switch |
| `continue`  | Passe à l’itération suivante d’une boucle |
| `try`, `catch`, `finally` | Gestion des erreurs |
| `throw`     | Lance une erreur personnalisée |
| `class`, `extends`, `super` | Programmation orientée objet |
| `import`, `export` | Modules JavaScript (ES6) |
| `async`, `await` | Programmation asynchrone |

---

### 🔧 Fonctions intégrées utiles

| Fonction         | Description |
|------------------|-------------|
| `alert()`        | Affiche une boîte de dialogue d’alerte |
| `console.log()`  | Affiche un message dans la console |
| `prompt()`       | Demande une saisie utilisateur |
| `parseInt()`     | Convertit une chaîne en entier |
| `parseFloat()`   | Convertit une chaîne en nombre flottant |
| `isNaN()`        | Vérifie si une valeur n’est pas un nombre |
| `typeof`         | Renvoie le type d’une variable |
| `Array.isArray()`| Vérifie si une valeur est un tableau |
| `setTimeout()`   | Exécute une fonction après un délai |
| `setInterval()`  | Exécute une fonction de manière répétée à intervalle régulier |

---

### Exemple d’utilisation de mots-clés

``` { .js .copy }
const nom = prompt("Quel est votre nom ?");

if (nom) {
  console.log("Bonjour " + nom);
} else {
  console.log("Nom inconnu");
}
```

## 1. 🌱 Les bases de JavaScript

### 1.1 Intégration dans une page HTML
``` { .html .copy }
<!DOCTYPE html>
<html>
<head>
  <title>Mon script</title>
  <script src="script. { .js .copy }" defer></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>
```

Ou directement dans une balise `<script>` :
```html
<script>
  alert('Bonjour !');
</script>
```

### 1.2 Variables
``` { .js .copy }
let nom = "Alice";    // variable modifiable
const PI = 3.14;      // constante
var age = 30;         // ancienne syntaxe, à éviter
```

### 1.3 Types de données
- `string` : `"Bonjour"`
- `number` : `42`, `3.14`
- `boolean` : `true`, `false`
- `undefined`
- `null`
- `object`, `array`, `function`

### 1.4 Opérateurs
- Arithmétiques : `+`, `-`, `*`, `/`, `%`
- Comparaison : `==`, `===`, `!=`, `!==`, `<`, `>`, `<=`, `>=`
- Logiques : `&&`, `||`, `!`

#### 🔍 `==` vs `===` en JavaScript

| Expression              | `==` (Égalité lâche) | `===` (Égalité stricte) |
|-------------------------|----------------------|--------------------------|
| `'5' == 5`              | ✅ `true`            | ❌ `false`               |
| `0 == false`            | ✅ `true`            | ❌ `false`               |
| `null == undefined`     | ✅ `true`            | ❌ `false`               |
| `'' == false`           | ✅ `true`            | ❌ `false`               |
| `5 == 5`                | ✅ `true`            | ✅ `true`                |
| `'true' == true`        | ❌ `false`           | ❌ `false`               |

> ✅ `==` convertit les types avant comparaison.  
> ✅ `===` compare valeur **et** type sans conversion.

!!! tips 
    utiliser `===` pour éviter les surprises liées à la coercition de type.


---

## 2. Contrôle de flux

### 2.1 Conditions
``` { .js .copy }
if (age > 18) {
  console.log("Majeur");
} else {
  console.log("Mineur");
}
```

Opérateur ternaire :
``` { .js .copy }
let message = (age > 18) ? "Majeur" : "Mineur";
```

### 2.2 Boucles
``` { .js .copy }
for (let i = 0; i < 5; i++) {
  console.log(i);
}

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}
```

---

## 3. Fonctions
``` { .js .copy }
function saluer(nom) {
  return `Bonjour ${nom}`;
}

const direBonjour = (nom) => `Bonjour ${nom}`;
```

---

## 4. Tableaux et objets

### 4.1 Tableaux
``` { .js .copy }
let fruits = ["pomme", "banane"];
fruits.push("kiwi");
console.log(fruits[0]); // pomme
```

### 4.2 Objets
``` { .js .copy }
let personne = {
  nom: "Alice",
  age: 30,
  parler: function () {
    console.log("Bonjour !");
  }
};

console.log(personne.nom);
personne.parler();
```

---

## 5. DOM (Document Object Model)

### 5.1 Sélection des éléments
``` { .js .copy }
const titre = document.querySelector("h1");
```

### 5.2 Modification du contenu
``` { .js .copy }
titre.textContent = "Nouveau Titre";
```

### 5.3 Événements
``` { .js .copy }
document.querySelector("button").addEventListener("click", () => {
  alert("Clic !");
});
```

### 💡 Exemple : compteur qui s'incrémente au clic
HTML :
```html
<button id="incrementer">Incrémenter</button>
<p>Compteur : <span id="compteur">0</span></p>
```

JavaScript :
``` { .js .copy }
let compteur = 0;
document.getElementById("incrementer").addEventListener("click", () => {
  compteur++;
  document.getElementById("compteur").textContent = compteur;
});
```

---

## 6. Asynchrone et AJAX

### 6.1 setTimeout / setInterval
``` { .js .copy }
setTimeout(() => {
  console.log("1 seconde");
}, 1000);
```

### 6.2 Promesses
``` { .js .copy }
fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
```

---

## 7. Concepts avancés

### 7.1 Closures
``` { .js .copy }
function createCounter() {
  let count = 0;
  return () => ++count;
}

const counter = createCounter();
console.log(counter()); // 1
```

### 7.2 Classes
``` { .js .copy }
class Animal {
  constructor(nom) {
    this.nom = nom;
  }

  parler() {
    console.log(`${this.nom} fait du bruit`);
  }
}
```

### 7.3 Modules (ES6)
``` { .js .copy }
// fichier.js
export function addition(a, b) {
  return a + b;
}

// main.js
import { addition } from "./fichier. { .js .copy }";
```

### 7.4 Async / Await
``` { .js .copy }
async function getData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}
```

---

## 📚 Ressources complémentaires

- [MDN JavaScript Guide](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide)
- [JavaScript.info](https://javascript.info/)
- [W3Schools JavaScript](https://www.w3schools.com/js/)

