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

mise à jour javascript
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 13:23:14 +02:00
parent cdb2a26d92
commit 9c849a5eac
1 changed files with 27 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
docs/cours/js/javascript.md
View File

@ -1,5 +1,5 @@
# 🎓 Support de cours de JavaScript # 🎓 Cours de JavaScript
## 📘 Théorie de base ## 📘 Théorie de base
@ -65,7 +65,7 @@ JavaScript a été créé en 1995 par **Brendan Eich** chez Netscape. Il ne faut
### Exemple d’utilisation de mots-clés ### Exemple d’utilisation de mots-clés
```js ``` { .js .copy }
const nom = prompt("Quel est votre nom ?"); const nom = prompt("Quel est votre nom ?");
if (nom) { if (nom) {
@ -78,12 +78,12 @@ if (nom) {
## 1. 🌱 Les bases de JavaScript ## 1. 🌱 Les bases de JavaScript
### 1.1 Intégration dans une page HTML ### 1.1 Intégration dans une page HTML
```html ``` { .html .copy }
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Mon script</title> <title>Mon script</title>
<script src="script.js" defer></script> <script src="script. { .js .copy }" defer></script>
</head> </head>
<body> <body>
<h1>Hello World</h1> <h1>Hello World</h1>
@ -99,7 +99,7 @@ Ou directement dans une balise `<script>` :
``` ```
### 1.2 Variables ### 1.2 Variables
```js ``` { .js .copy }
let nom = "Alice"; // variable modifiable let nom = "Alice"; // variable modifiable
const PI = 3.14; // constante const PI = 3.14; // constante
var age = 30; // ancienne syntaxe, à éviter var age = 30; // ancienne syntaxe, à éviter
@ -132,7 +132,8 @@ var age = 30; // ancienne syntaxe, à éviter
> ✅ `==` convertit les types avant comparaison. > ✅ `==` convertit les types avant comparaison.
> ✅ `===` compare valeur **et** type sans conversion. > ✅ `===` compare valeur **et** type sans conversion.
🎯 **Bonne pratique :** utiliser `===` pour éviter les surprises liées à la coercition de type. !!! tips
utiliser `===` pour éviter les surprises liées à la coercition de type.
--- ---
@ -140,7 +141,7 @@ var age = 30; // ancienne syntaxe, à éviter
## 2. Contrôle de flux ## 2. Contrôle de flux
### 2.1 Conditions ### 2.1 Conditions
```js ``` { .js .copy }
if (age > 18) { if (age > 18) {
console.log("Majeur"); console.log("Majeur");
} else { } else {
@ -149,12 +150,12 @@ if (age > 18) {
``` ```
Opérateur ternaire : Opérateur ternaire :
```js ``` { .js .copy }
let message = (age > 18) ? "Majeur" : "Mineur"; let message = (age > 18) ? "Majeur" : "Mineur";
``` ```
### 2.2 Boucles ### 2.2 Boucles
```js ``` { .js .copy }
for (let i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {
console.log(i); console.log(i);
} }
@ -169,7 +170,7 @@ while (i < 5) {
--- ---
## 3. Fonctions ## 3. Fonctions
```js ``` { .js .copy }
function saluer(nom) { function saluer(nom) {
return `Bonjour ${nom}`; return `Bonjour ${nom}`;
} }
@ -182,14 +183,14 @@ const direBonjour = (nom) => `Bonjour ${nom}`;
## 4. Tableaux et objets ## 4. Tableaux et objets
### 4.1 Tableaux ### 4.1 Tableaux
```js ``` { .js .copy }
let fruits = ["pomme", "banane"]; let fruits = ["pomme", "banane"];
fruits.push("kiwi"); fruits.push("kiwi");
console.log(fruits[0]); // pomme console.log(fruits[0]); // pomme
``` ```
### 4.2 Objets ### 4.2 Objets
```js ``` { .js .copy }
let personne = { let personne = {
nom: "Alice", nom: "Alice",
age: 30, age: 30,
@ -207,17 +208,17 @@ personne.parler();
## 5. DOM (Document Object Model) ## 5. DOM (Document Object Model)
### 5.1 Sélection des éléments ### 5.1 Sélection des éléments
```js ``` { .js .copy }
const titre = document.querySelector("h1"); const titre = document.querySelector("h1");
``` ```
### 5.2 Modification du contenu ### 5.2 Modification du contenu
```js ``` { .js .copy }
titre.textContent = "Nouveau Titre"; titre.textContent = "Nouveau Titre";
``` ```
### 5.3 Événements ### 5.3 Événements
```js ``` { .js .copy }
document.querySelector("button").addEventListener("click", () => { document.querySelector("button").addEventListener("click", () => {
alert("Clic !"); alert("Clic !");
}); });
@ -231,7 +232,7 @@ HTML :
``` ```
JavaScript : JavaScript :
```js ``` { .js .copy }
let compteur = 0; let compteur = 0;
document.getElementById("incrementer").addEventListener("click", () => { document.getElementById("incrementer").addEventListener("click", () => {
compteur++; compteur++;
@ -244,16 +245,16 @@ document.getElementById("incrementer").addEventListener("click", () => {
## 6. Asynchrone et AJAX ## 6. Asynchrone et AJAX
### 6.1 setTimeout / setInterval ### 6.1 setTimeout / setInterval
```js ``` { .js .copy }
setTimeout(() => { setTimeout(() => {
console.log("1 seconde"); console.log("1 seconde");
}, 1000); }, 1000);
``` ```
### 6.2 Promesses ### 6.2 Promesses
```js ``` { .js .copy }
fetch("https://api.example.com/data") fetch("https://api.example.com/data")
.then(response => response.json()) .then(response => response. { .js .copy }on())
.then(data => console.log(data)) .then(data => console.log(data))
.catch(error => console.error(error)); .catch(error => console.error(error));
``` ```
@ -263,7 +264,7 @@ fetch("https://api.example.com/data")
## 7. Concepts avancés ## 7. Concepts avancés
### 7.1 Closures ### 7.1 Closures
```js ``` { .js .copy }
function createCounter() { function createCounter() {
let count = 0; let count = 0;
return () => ++count; return () => ++count;
@ -274,7 +275,7 @@ console.log(counter()); // 1
``` ```
### 7.2 Classes ### 7.2 Classes
```js ``` { .js .copy }
class Animal { class Animal {
constructor(nom) { constructor(nom) {
this.nom = nom; this.nom = nom;
@ -287,22 +288,22 @@ class Animal {
``` ```
### 7.3 Modules (ES6) ### 7.3 Modules (ES6)
```js ``` { .js .copy }
// fichier.js // fichier.js
export function addition(a, b) { export function addition(a, b) {
return a + b; return a + b;
} }
// main.js // main.js
import { addition } from "./fichier.js"; import { addition } from "./fichier. { .js .copy }";
``` ```
### 7.4 Async / Await ### 7.4 Async / Await
```js ``` { .js .copy }
async function getData() { async function getData() {
try { try {
const response = await fetch("https://api.example.com/data"); const response = await fetch("https://api.example.com/data");
const data = await response.json(); const data = await response. { .js .copy }on();
console.log(data); console.log(data);
} catch (err) { } catch (err) {
console.error(err); console.error(err);
@ -316,5 +317,5 @@ async function getData() {
- [MDN JavaScript Guide](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide) - [MDN JavaScript Guide](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide)
- [JavaScript.info](https://javascript.info/) - [JavaScript.info](https://javascript.info/)
- [W3Schools JavaScript](https://www.w3schools.com/js/) - [W3Schools JavaScript](https://www.w3schools.com/ { .js .copy }/)