diff --git a/docs/cours/index.md b/docs/cours/index.md index ceb4aeb4..397a8d6b 100644 --- a/docs/cours/index.md +++ b/docs/cours/index.md @@ -5,5 +5,6 @@ Les cours du Garage contiennent: - [Un cours de scripting Bash](scripting/syntax.md) - [Un cours de découverte de Python](python) - [Les guides utilisateurs des outils du Garage Numérique](outils-garage) +- [Un cours explicatif de Javascript](js/javascript.md) Pour plus de ressources, cliquez sur la rubrique Divers dans la barre de navigation en haut diff --git a/docs/cours/js/javascript.md b/docs/cours/js/javascript.md new file mode 100644 index 00000000..3283a859 --- /dev/null +++ b/docs/cours/js/javascript.md @@ -0,0 +1,320 @@ + +# 🎓 Support de cours de 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 +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 + + + + Mon script + + + +

Hello World

+ + +``` + +Ou directement dans une balise ` +``` + +### 1.2 Variables +```js +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. + +🎯 **Bonne pratique :** utiliser `===` pour éviter les surprises liées à la coercition de type. + + +--- + +## 2. Contrôle de flux + +### 2.1 Conditions +```js +if (age > 18) { + console.log("Majeur"); +} else { + console.log("Mineur"); +} +``` + +Opérateur ternaire : +```js +let message = (age > 18) ? "Majeur" : "Mineur"; +``` + +### 2.2 Boucles +```js +for (let i = 0; i < 5; i++) { + console.log(i); +} + +let i = 0; +while (i < 5) { + console.log(i); + i++; +} +``` + +--- + +## 3. Fonctions +```js +function saluer(nom) { + return `Bonjour ${nom}`; +} + +const direBonjour = (nom) => `Bonjour ${nom}`; +``` + +--- + +## 4. Tableaux et objets + +### 4.1 Tableaux +```js +let fruits = ["pomme", "banane"]; +fruits.push("kiwi"); +console.log(fruits[0]); // pomme +``` + +### 4.2 Objets +```js +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 +const titre = document.querySelector("h1"); +``` + +### 5.2 Modification du contenu +```js +titre.textContent = "Nouveau Titre"; +``` + +### 5.3 Événements +```js +document.querySelector("button").addEventListener("click", () => { + alert("Clic !"); +}); +``` + +### 💡 Exemple : compteur qui s'incrémente au clic +HTML : +```html + +

Compteur : 0

+``` + +JavaScript : +```js +let compteur = 0; +document.getElementById("incrementer").addEventListener("click", () => { + compteur++; + document.getElementById("compteur").textContent = compteur; +}); +``` + +--- + +## 6. Asynchrone et AJAX + +### 6.1 setTimeout / setInterval +```js +setTimeout(() => { + console.log("1 seconde"); +}, 1000); +``` + +### 6.2 Promesses +```js +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 +function createCounter() { + let count = 0; + return () => ++count; +} + +const counter = createCounter(); +console.log(counter()); // 1 +``` + +### 7.2 Classes +```js +class Animal { + constructor(nom) { + this.nom = nom; + } + + parler() { + console.log(`${this.nom} fait du bruit`); + } +} +``` + +### 7.3 Modules (ES6) +```js +// fichier.js +export function addition(a, b) { + return a + b; +} + +// main.js +import { addition } from "./fichier.js"; +``` + +### 7.4 Async / Await +```js +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/) + diff --git a/mkdocs.yml b/mkdocs.yml index f55d3172..a0718fe7 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -94,6 +94,8 @@ nav: - cours/outils-garage/index.md - cours/outils-garage/element.md - "Environnement de développement": cours/outils-garage/devenv/index.md + - Web: + - cours/js/javascript.md - Divers: - divers/index.md - "Les mémos Linux":