This commit is contained in:
parent
f06934dd22
commit
cdb2a26d92
@ -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
|
||||
|
||||
320
docs/cours/js/javascript.md
Normal file
320
docs/cours/js/javascript.md
Normal 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/)
|
||||
|
||||
@ -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":
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user
