GARAGENUM/docs
GARAGENUM/docs
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout cours JS
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Grégory Lebreton 2025-07-02 09:34:55 +02:00
parent f06934dd22
commit cdb2a26d92
3 changed files with 323 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/cours/index.md
View File

@ -5,5 +5,6 @@ Les cours du Garage contiennent:
- [Un cours de scripting Bash](scripting/syntax.md) - [Un cours de scripting Bash](scripting/syntax.md)
- [Un cours de découverte de Python](python) - [Un cours de découverte de Python](python)
- [Les guides utilisateurs des outils du Garage Numérique](outils-garage) - [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 Pour plus de ressources, cliquez sur la rubrique Divers dans la barre de navigation en haut

320
docs/cours/js/javascript.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<title>Mon script</title>
<script src="script.js" 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
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
<button id="incrementer">Incrémenter</button>
<p>Compteur : <span id="compteur">0</span></p>
```
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/)

2
mkdocs.yml
View File

@ -94,6 +94,8 @@ nav:
- cours/outils-garage/index.md - cours/outils-garage/index.md
- cours/outils-garage/element.md - cours/outils-garage/element.md
- "Environnement de développement": cours/outils-garage/devenv/index.md - "Environnement de développement": cours/outils-garage/devenv/index.md
- Web:
- cours/js/javascript.md
- Divers: - Divers:
- divers/index.md - divers/index.md
- "Les mémos Linux": - "Les mémos Linux":