Ajoute JS - Activité et cours (WIP)

src/slides/B1/web/03_javascript.md

@@ -0,0 +1,451 @@
+---
+marp: true
+theme: catppuccin
+paginate: true
+size: 4:3
+transition: coverflow
+footer: ''
+math: katex
+lang: "fr"
+---
+
+<style>
+section {
+  font-size: 28px;
+  text-align: left
+}
+</style>
+
+# JavaScript
+
+---
+## Généralités
+
+- Organisme de normalisation : Ecma International
+- Définissent les normes ECMA : 
+    - ECMAScript (Abrégé en ES)
+    - JavaScript = implémentation de la norme
+
+- Versions ont un numéro et un nom par rapport à l'année 
+    - ES15 = ES2024 (version actuelle)
+    - ESNext en cours de dev, 1 norme par an environ
+
+---
+
+## Documentation
+- [Guide JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide)
+- [Référence JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference)
+
+---
+
+## Premier programme
+
+Pour écrire un programme en JavaScript il suffit d'un navigateur web
+- Ouvrir la console :
+
+| Navigateur | Raccourci                                     |
+| ---------- | --------------------------------------------- |
+| Firefox    | <kbd>F12</kbd>                                |
+| Chromium   | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>J</kbd> |
+| Edge       | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>J</kbd> |
+
+---
+
+Firefox a un mode multiligne très pratique pour tester
+
+![Multiligne width:800px](images/multiligne.png)
+
+---
+
+### Hello world
+```js
+console.log("Hello, World!");
+```
+
+- `console.log` fonction qui vient écrire en console
+  - Un peu comme `print` en Python
+- Il faut toujours ajouter `;` à la fin des lignes
+  - Pas obligatoire mais source d'erreurs
+
+---
+### Mode strict
+
+- Toujours écrire `"use strict";` en haut de votre programme (première ligne)
+- Évite erreurs silencieuses et ambiguïtés du langage
+
+---
+
+## Variables et types
+
+---
+
+### Variables
+
+- `var` = variable globale au programme ou à une fonction
+- `let` = variable locale (à privilégier)
+  - n'existe que dans bloc entouré d'accolades
+- `const` = constante
+  - Ne peut plus être modifiée
+  - locale également
+  - Si variable ne change pas, préférer `const`
+- On ne déclare pas le **type** de la variable
+---
+
+#### Nommage
+
+- Sensible à la casse (`Nom` différent de `nom`)
+- Caractères autorisés = lettres, chiffres et `_` 
+  - ne peut pas commencer par chiffre
+- Convention `camelCase`
+
+---
+
+#### Différence entre `var` et `let`
+
+```js
+if (true) {
+  var x = 5;
+}
+console.log(x); // x vaut 5
+```
+
+```js
+if (true) {
+  let y = 5;
+}
+console.log(y); // ReferenceError: y is not defined
+```
+---
+
+### Types
+
+| Type      | Description              | Exemple                       |
+| --------- | ------------------------ | ----------------------------- |
+| `boolean` | booléens                 | `true` et `false`             |
+| `number`  | entiers ou décimaux      | `42` `3.1415` `0x3F` `0b1001` |
+| `bigint`  | grands nombres           | `9007199254740992n`           |
+| `string`  | Chaînes de caractères    | `"Hello"` ou `'Hello'`        |
+| `Object`  | Objets (types complexes) |                               |
+
+---
+
+#### Valeurs spéciales
+
+- `undefined` : valeur non définie, la variable n'existe pas
+- `null` : pas de valeur pour l'objet
+  - se comporte comme un `0` en contexte numérique
+- `NaN` : n'est pas un nombre ("Not a Number") 
+  - se comporte comme `undefined` en contexte numérique
+
+---
+
+#### Tableaux
+- Les tableaux sont des listes de valeurs
+- On les écrit avec des crochets et on sépare avec des virgules
+
+```js
+var cafés = ["Brésilien", "Colombien", "Kona"];
+
+console.log(cafés[1]); // Affiche : Colombien
+```
+
+---
+
+### Opérateurs
+
+#### Opérateurs arithmétiques
+
+| Opérateur | Description                      |
+| --------- | -------------------------------- |
+| `+`       | Addition                         |
+| `-`       | Soustraction                     |
+| `*`       | Multiplication                   |
+| `/`       | Division                         |
+| `%`       | Reste de la division euclidienne |
+| `++`      | Incrément (ajoute 1)             |
+| `--`      | Décrément (Retire 1)             |
+| `**`      | Puissance                        |
+
+---
+
+#### Opérateurs binaires
+
+| Opérateur | Description |
+| --------- | ----------- |
+| `&&`      | ET logique  |
+| `\|\|`    | OU logique  |
+| `!`       | NON logique |
+
+---
+
+## Structures de contrôle
+
+- Conditions
+- Boucles
+
+---
+
+### Conditions
+
+- Permettent de choisir quel code exécuter en fonction d'une condition
+
+- Structure `if...else`
+```js
+if (condition) {
+    // Faire qqch
+} else {
+    // Faire autre chose
+}
+```
+* On peut utiliser aussi `else if`
+    ```js
+    if (condition_1) {
+        instruction_1;
+    } else if (condition_2) {
+        instruction_2;
+    } else if (condition_n) {
+        instruction_n;
+    } else {
+        dernière_instruction;
+    }
+    ```
+* Ne pas oublier les accolades `{}`
+---
+<style scoped>
+table {
+  font-size: 24px;
+}
+section {
+  font-size: 24px;
+}
+</style>
+
+#### Opérateurs de comparaison
+
+| Opérateur | Description                                     |
+| --------- | ----------------------------------------------- |
+| `==`      | Egalité faible (  conversion implicite)        |
+| `!=`      | Inégalité faible (  conversion implicite)      |
+| **`===`** | **Égalité stricte (compare aussi les types)**   |
+| **`!==`** | **Inégalité stricte (compare aussi les types)** |
+| `>`       | Strictement supérieur                           |
+| `>=`      | Supérieur ou égal                               |
+| `<`       | Strictement inférieur                           |
+| `<=`      | Inférieur ou égal                               |
+
+!!! warning Attention
+**Privilégier l'égalité stricte** : l'égalité faible est source d'erreurs
+
+Ex: `3 == "3"` renvoie `true` car la conversion est implicite (mais dangereuse)
+!!!
+---
+
+#### Valeurs fausses
+
+- `false`
+- `undefined`
+- `null`
+- `0`
+- `NaN`
+- la chaîne de caractères vide (`""`)
+
+---
+
+### Boucles
+
+Viennent répéter un bout de code un certain nombre de fois
+
+---
+
+#### Boucle `for`
+
+- Ressemble à la boucle `for` en C++
+
+```js
+for (let pas = 0; pas < 5; pas++) {
+  // Ceci sera exécuté 5 fois
+  // À chaque éxécution, la variable "pas" augmentera de 1
+  // Lorsque'elle sera arrivée à 5, le boucle se terminera.
+  console.log("Faire " + pas + " pas");
+}
+```
+
+---
+
+- On donne trois informations à la boucle séparées par des `;`:
+  - L'**expression initiale** (`let pas = 0`)
+  - La **condition** pour qu'elle continue (`pas < 5`)
+  - L'**expression d'incrément** (`pas++`)
+
+```js
+for ([expressionInitiale]; [condition]; [expressionIncrément]){
+    instruction
+}
+```
+
+- L'expression initiale sert à initialiser une variable (qui pourra compter les itérations)
+- La condition est évaluée : si c'est `true`, alors la boucle est exécutée, sinon elle se termine
+- L'expression d'incrément est utilisée (pour incrémenter le compteur par exemple)
+- Les instructions de la boucle sont entre `{}`
+
+---
+
+#### Boucle `while`
+
+- Exécute une instruction tant que la condition est vraie
+
+```js
+while (condition) {
+    // instructions
+}
+```
+
+---
+
+Exemple :
+```js
+const multiplicateur = 7;
+var n = 0;
+while (n <= 10) {
+    console.log(`${n} * ${multiplicateur} = ${n*multiplicateur}`);
+    n++;
+}
+```
+
+---
+
+#### `break` et `continue`
+
+- `break` : provoque la fin de la boucle dans laquelle il est utilisé
+    ```js
+    // On cherche `valeurTest` dans un tableau `a`
+    for (i = 0; i < a.length; i++) {
+        if (a[i] === valeurTest) {
+            break;
+        }
+    }
+    ```
+- `continue` : provoque le passage à la prochaine itération de la boucle dans laquelle il est imbriqué
+```js
+// Affiche les nombres pairs
+for(let i = 0; i < 10; i++){
+    if (i % 2){
+        continue;
+    }
+    console.log(`${i} est pair`)
+}
+```
+
+---
+
+### Switch
+
+- Permet de sélectionner une instruction en fonction de la valeur d'une variable
+- Syntaxe similaire à celle du C++
+- Attention de ne pas oublier le `break`
+
+```js
+switch (fruit) {
+  case "Orange":
+    console.log("Les oranges sont à 60 centimes le kilo.");
+    break;
+  case "Pomme":
+    console.log("Les pommes sont à 32 centimes le kilo.");
+    break;
+  case "Banane":
+    console.log("Les bananes sont à 48 centimes le kilo.");
+    break;
+  default:
+    console.log("Désolé, nous n'avons pas de " + fruittype + ".");
+}
+console.log("Souhaitez-vous autre chose ?");
+```
+
+---
+
+## Fonctions
+
+---
+
+### Définir une fonction
+
+Les fonctions représentent une suite d'instructions qui effectue une tâche ou calcule une valeur
+Pour **appeler** (= utiliser) une fonction il faut d'abord la **définir**
+```js
+function carré(nombre) {
+  return nombre * nombre;
+}
+```
+- Elles sont définies avec le mot-clé `function` et un **nom** suivi de **parenthèses** `()`
+- On peut leur passer des **paramètres** séparés par des virgules
+- Elles peuvent **retourner** une valeur avec `return`
+- Les instructions sont entre des accolades `{}`
+
+---
+
+### Appeler une fonction
+
+- Pour appeler une fonction, on utilisera des **parenthèses**
+
+- Exemple avec la fonction `carré` définie à la slide précédente
+```js
+carré(5); // 25
+
+// On peut utiliser le résultat :
+console.log(carré(5)) // Affiche : 25
+let maVariable = carré(5) // maVariable vaut 25
+```
+
+---
+
+### Paramètres par défaut
+
+- Si on ne fournit pas un paramètre à une fonction il vaut `undefined`
+- Si on veut une autre valeur, on peut le préciser dans la déclaration
+
+```js
+// Si on ne précise pas b, b vaut 1
+function multiplier(a, b = 1) {
+  return a * b;
+}
+
+multiplier(5); // 5
+```
+
+---
+
+## Ajouter du JavaScript dans une page web
+
+---
+
+### Code interne à la page
+
+!!! warning Attention
+Comme pour le CSS, il est préférable de séparer les problèmes et d'avoir le code JavaScript séparé du code HTML.
+Cette méthode est présentée ici pour que vous sachiez qu'elle est possible mais est fortement déconseillée.
+Utilisez la seconde méthode, qui inclut un fichier externe.
+!!!
+
+- On ajoute une balise `<script></script>` à la page HTML
+- On met le code javascript à l'intérieur de cette balise.
+- Dans ce cas pensez à entourer votre code JS avec le bloc suivant, qui permet d'attendre le chargement complet avant l'exécution :
+  - Mais inconvénient, la page est bloquée le temps du chargement
+    ```js
+    document.addEventListener("DOMContentLoaded", function() {
+    // Votre code ici
+    });
+    ```
+
+---
+
+### Fichier externe à la page
+
+- Préférez cette méthode.
+- On ajoute la balise suivante dans le HTML:
+```html
+<script src="monfichier.js" defer></script>
+```
+
+- On utilise également la balise script, mais vide cette fois, en précisant le fichier en attribut avec `src`
+- Votre fichier doit avoir l'extension `.js`
+- le mot clé `defer` permet de charger le JS dans l'ordre dans lequel les fichiers apparaissent