Ajoute JS - Activité et cours (WIP)

src/cours/CIEL1/05-web-js/activite3-js-bases.md

@@ -0,0 +1,213 @@
+# Web - Activité 3 - Carousel de photos en JavaScript
+
+## Objectifs
+
+- Développement d'un carousel de photos en JavaScript.
+- Le carousel a pour but de faire défiler des photos de bâtiments pour le site de l'entreprise Numérobis afin de montrer aux visiteurs les projets sur lesquels ils ont pu travailler.
+
+## Validation
+### Livrables
+
+- Le code final
+- Le compte-rendu de l'activité
+
+Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM2_Prenom2`.
+- Le compte rendu peut-être livré au format Markdown ou PDF. 
+- Si vous choisissez le Markdown, attention à bien livrer les éventuelles images et à la validité des liens
+
+### Résultats attendus
+
+- [ ] Le carousel est intégré à la page d'accueil du site et fonctionnel.
+- [ ] Le carousel permet de faire défiler 4 photos en boucle grâce à deux boutons
+- [ ] Le carousel fait défiler automatiquement les photos toutes les 2 secondes
+- [ ] Le résultat général (hors animation) ressemble à l'image ci-dessous (options incluses)
+- [ ] (Optionnel) Le carousel permet d'afficher une photo au choix en cliquant sur un indicateur en bas de la photo
+- [ ] (Optionnel) Le carousel affiche en haut à gauche le numéro de la photo, et en en dessous au centre son titre
+- [ ] (Optionnel) L'aspect visuel du site a été modernisé
+
+
+## Ressources fournies
+
+- Documentations:
+  - HTML
+  - CSS
+  - JavaScript
+- Cours de JavaScript
+- 4 images à intégrer dans le projet
+
+## Étapes
+
+### 0 - Préparation
+
+**Objectif :** Préparer le projet 
+
+```admonish travail
+- Repartir du résultat de l'activité précédente (ouvrir le répertoire dans VSCode)
+- Vérifier que votre travail a été correctement commité et qu'il ne reste plus de fichiers modifiés mais non commités
+- Créer un nouveau fichier de compte rendu vierge
+- Lancer un serveur web de développement (`python -m http.server`)
+- Ouvrir un navigateur (Firefox de préférence) et se rendre sur [cette page](https://localhost:8000)
+```
+
+### 1 - Découverte du JS
+
+**Objectif :** Découvrir le JavaScript et afficher du texte dans la console
+
+```admonish travail
+- Dans votre navigateur, ouvrir la console JS (<kbd>F12</kbd> en général, ou voir cours)
+- Démarrer le mode "multiligne" (firefox uniquement), qui permet d'écrire plusieurs lignes de code et les exécuter
+    ![multiligne0](./image.png)
+
+    ![multiligne1](./image-1.png)
+- Écrire dans la console le code suivant, puis l'exécuter :
+    ~~~js
+    console.log("Hello, World!");
+    ~~~
+- Vérfier que le texte `Hello, World!` s'affiche.
+- Écrire dans votre console le code suivant puis l'exécuter :
+    ~~~js
+    function carré(number){
+        return number * number;
+    }
+
+    console.log(carré(5));
+    ~~~
+- Écrire le code suivant puis l'exécuter
+    ~~~js
+    var maVariable = "Hello";
+    function maFonction(){
+        console.log("Dans la fonction");
+        if (true){
+            var autreVariable = "World";
+            let variableInterne = "Bonjour";
+            console.log(`Dans le if : autreVariable = ${autreVariable}`);
+            console.log(`Dans le if : variableInterne = ${variableInterne}`);
+        }
+        console.log(`maVariable = ${maVariable}`);
+        console.log(`Hors du if : autreVariable = ${autreVariable}`);
+        console.log(`Hors du if : variableInterne = ${variableInterne}`);
+    }
+    console.log("Hors de la fonction");
+    console.log(`maVariable = ${maVariable}`);
+    console.log(`autreVariable = ${autreVariable}`);
+    console.log(`variableInterne = ${variableInterne}`);
+    ~~~
+- Modifier le code précédent pour exécuter la fonction `maFonction`
+```
+
+```admonish note title="Dans le compte rendu"
+- Quel est le rôle du javascript dans le navigateur ?
+- Que fait la fonction `console.log` ?
+- Qu'est-ce que `carré` dans le code que vous avez écrit ?
+- Comment déclarer et appeler une fonction en JavaScript ?
+- Comment déclarer une variable en JavaScript ?
+- Quelle est la différence entre var et let ?
+```
+
+### 2 - Choisir quelle image afficher
+
+**Objectif :**  Écrire une fonction en Javascript pour choisir l'image à afficher
+
+```admonish travail
+- Récupérer les 4 images fournies dans un répertoire image dans votre projet
+- Supprimer l'image `home.png` (elle est remplacée par `building_1.png`)
+- Dans le fichier `index.html`, remplacer la balise image qui affcihait `home.png` par le code suivant :
+    ~~~html
+    <div class="slideshow">
+        <div class="slide">
+          <img src="images/building_1.png" alt="Projet démo 1">
+        </div>
+    </div>
+    ~~~
+- Vérifier que tout s'affiche correctement (comme avant). Corriger le CSS si nécessaire.
+- Rajouter les trois autres images dans la div `slideshow`, encapsulées chacune dans une balise `div` de classe `slide`. Vous devriez avoir les 4 images à la suite.
+- Modifier le CSS pour que les éléments de classe `slide` [ne soient plus affichés](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/display)
+- Créer le fichier `slideshow.js` à la racine de votre projet
+- Ajouter la balise suivante, entre les sections `head` et `body` de votre `index.html` :
+    ~~~html
+    <script src="slideshow.js" defer></script>
+    ~~~
+- Écrire une fonction `showSlide` qui prend un paramètre `index` représentant le numéro (de 0 à 3 ) de la photo à afficher.
+    - Récupérer les 4 conteneurs de classe `slide` dans une variable locale `slides`. [Fonction à utiliser.](https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByClassName)
+    - Grâce au code suivant, modifier la propriété de style `display` de l'image d'indice `index` :
+        ~~~js
+        slides[index].style.display = "block";
+        ~~~
+- Modifier votre script `slideshow.js` pour appeler votre nouvelle fonction et affciher l'image d'indice 0
+- Compléter votre compte rendu, puis faire un commit.
+```
+
+```admonish note title="Dans le compte rendu"
+- A quoi servent les div de classe `slideshow` et `slide` ?
+- Pourquoi cache-t-on les images ?
+- Que fait la ligne `<script src="slideshow.js" defer></script>` ?
+- Que fait la fonction `document.getElementByClassName` ?
+- Que fait la ligne suivante : `slides[index].style.display = "block";` ? Aidez-vous du debugger CSS de votre navigateur
+- Expliquez dans les grandes lignes ce que vous avez fait à cette étape. Quelle sera, selon vous, la suite des opérations ?
+```
+
+### 3 - Afficher une seule image à la fois
+
+**Objectif :** Réussir à n'afficher qu'une image
+
+```admonish travail
+- Modifier votre script pour effectuer des appels successifs à `showSlide` avec différentes images. Que constatez-vous ?
+- Il va donc falloir cacher les autres images pour n'afficher que celle qui nous intéresse (celle passée en paramètre). 
+  Pour cela, nous allons utiliser une boucle qui va remettre la propriété `display` de chaque `slide` à `none`. Modifiez 
+  votre code pour faire ça.
+- Vérifiez que cela fonctionne en faisant plusieurs appels successifs à `showSlide` (dans le même script). Seule la dernière image doit être visible.
+- Complétez le compte rendu et faites un nouveau commit.
+```
+
+```admonish note title="Dans le compte rendu"
+Expliquez ce que vous avez fait à cette étape.
+```
+
+### 4 - Changer d'image dynamiquement
+
+**Objectif :** Ajouter des boutons pour passer à l'image suivante dynamiquement
+
+```admonish travail
+- Dans votre `index.html`, dans la `div` `slideshow` ajouter deux éléments `button`:
+    - Le texte sera `&#10094;` qui représente &#10094;, et l'id `prevSlide`
+    - Le texte sera `&#10095;` qui représente &#10095;, et l'id `nextSlide`
+- Ajoutez dans votre script la fonction : `showSlideRelative(relativeIndex)`. 
+  Elle fera appel à `showSlide`. Son paramètre `relativeIndex` indiquera de combien de slides il faudra faire tourner le carousel.
+  Par exemple, si on passe 1 il faudra prendre l'image avec l'index suivant. Si on passe -1 il faudra prendre l'image précédente.
+- Dans votre `index.html` il va falloir dire à vos deux boutons (`prevSlide` et `nextSlide`) d'appeler la fonction que vous venez de créer lorsqu'on clique dessus. Ajoutez l'attribut `onclick` avec un appel à `showSlideRelative` (en passant 1 pour suivant et -1 pour précédent).
+- Vérifiez que votre code fonctionne. 
+- (À ajouter dans le compte rendu :) Si vous cliquez sur suivant alors que vous êtes sur l'image 4, que se passe-t-il ? Idem avec précédent à l'image 1 ? Pourquoi ? 
+- Corrigez votre algorithme.
+- Mettez à jour le compte rendu et faites un nouveau commit.
+```
+
+```admonish help title="Aide"
+- Votre nouvelle fonction doit calculer le nouvel indice et le passer à `showSlide`. 
+- Vous aurez besoin d'une variable globale `slideIndex` pour retenir la slide affichée. Vous pourrez ensuite ajouter `relativeIndex` à `slideIndex`
+- N'oubliez pas de mettre à jour l'index global en mémoire dans `showSlide`
+```
+
+```admonish note title="Dans le compte rendu"
+- Que sont `&#10094;` et `&#10095;` ?
+- Expliquez ce que vous avez fait à cette étape. N'oubliez pas d'expliquer comment vous avez résolu le problème de rotation des indices.
+```
+
+### 5 - Améliorer la lisibilité des boutons de rotation
+
+**Objectif :** Modifier le CSS des boutons pour les afficher sur l'image et aider l'utilisateurice à comprendre qu'ils sont cliquables
+
+```admonish travail
+- Dans le CSS, ajouter un sélecteur sur les deux boutons (via leurs ids) puis :
+    - Modifier la [propriété `position`](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/position) à la valeur `absolute` (attention à ce que vous deux boutons soient bien inclus dans la div `slideshow`)
+    - Modifier la proriété `position` de `slideshow` à `relative`
+    - Modifier les propriétés [`top`](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/top) et [`right`](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/right) des boutons de façon à ce qu'ils soient bien de chaque côté de l'image et centrés verticalement.
+    - Modifier la propriété `cursor` pour changer le curseur de façon à comprendre qu'on a un objet cliquable
+- Compléter le copmpte-rendu et faire un nouveau commit
+```
+
+```admonish note title="Dans le compte rendu"
+- Que fait la propriété CSS `position` ? 
+- Pourquoi avons-nous changé cette propriété dans `slideshow` et les boutons ?
+- Que font `top`, `right` et `left` ? Dans quel cas peut-on les utiliser ?
+- Expliquer ce que vous avez fait à cette étape
+```

src/cours/CIEL1/05-web-js/activite4.md

@@ -0,0 +1,66 @@
+
+### 6 - Effectuer une rotation automatique
+
+**Objectif :** Changer l'image affichée toutes les deux secondes automatiquement
+
+```admonish travail
+- Lire la documentation de la fonction [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/Window/setInterval) et celle de [`setTimeout`](https://developer.mozilla.org/fr/docs/Web/API/Window/setTimeout). Choisir celle qui vous paraît la plus adaptée. Justifier dans le compte rendu.
+- Quelle fonction (déjà écrite par vos soins) allez-vous appeler à intervalles réguliers pour faire tourner votre carousel ? Ecrivez le code correspondant. Utilisez l'aide ci-dessous.
+- Validez que votre code fonctionne.
+- Mettez à jour votre compte rendu et faites un commit.
+```
+
+```admonish help title="Aide"
+- Nous devons passer une **fonction** en paramètre à `setInterval` (ou `setTimeout`). Il s'agit bien d'une fonction, et non pas d'un appel à la fonction (qui ne donnerait qu'un seul résultat) ! C'est `setInterval` qui se chargera d'appeler votre fonction à intervalles réguliers.
+- Mais pourtant, nous avons besoin de passer des paramètres à cette fonction. Il faut donc une solution pour les passer également.
+- Deux possibilités pour ça :
+    - `setInterval` propose de prendre des arguments supplémentaires, qui seront passés à la fonction (voir doc)
+    - on utilise une fonction anonyme qui ne prend pas de paramètre avec la syntaxe suivante :
+    ~~~js
+    () => mafonction(param1, param2, ...)
+    ~~~
+```
+
+```admonish note title="Dans le compte rendu"
+- Justifier le choix entre `setInterval` et `setTimeout` et expliquer l'algorithme que vous avez choisi pour changer d'image toutes les deux secondes.
+- `setInterval` et `setTimeout` permettent de passer une fonction ou un bout de code sous forme de chaîne de caractères comme paramètre. Qu'allez vous préférer et pourquoi ? Pensez à vérifier d'éventuelles problématiques de sécurité.
+```
+
+### 7 - Segmenter le JavaScript et le HTML
+
+**Objectif :** Lier les actions des boutons directement depuis le CSS pour une meilleure maintenabilité du code
+
+```admonish travail
+
+```
+
+```admonish help title="Aide"
+```
+
+```admonish warning title="Attention"
+```
+
+```admonish note title="Dans le compte rendu"
+```
+
+## Pour aller plus loin
+
+### Bonus - Sélectionner l'image à afficher avec un clic
+
+**Objectif :** Ajouter des boutons pour sélectionner une image précise sans cliquer plusieurs fois sur les boutons de rotation
+
+```admonish travail
+- 
+```
+
+```admonish help title="Aide"
+```
+
+```admonish warning title="Attention"
+```
+
+```admonish note title="Dans le compte rendu"
+```
+
+
+### Ressources

src/cours/SUMMARY.md

@@ -28,9 +28,10 @@
         - [Git - Dépôts distants](./CIEL1/03-git/cours2.md)
         - [TP1 - Découvrir Git](./CIEL1/03-git/tp1.md)
         - [TP2 - Les branches et les dépôts distants](./CIEL1/03-git/tp2.md)
-    - [Le web statique](./CIEL1/04-web-statique/web-statique.md)
+    - [Le web](./CIEL1/04-web-statique/web-statique.md)
       - [Activité 1 - Découverte HTML](./CIEL1/04-web-statique/tp/tp01-html-bases.md)
       - [Activité 2 - Découverte CSS](./CIEL1/04-web-statique/tp/tp02-css-bases.md)
+      - [Activité 3 - Carousel en JavaScript](./CIEL1/05-web-js/activite3-js-bases.md)
     - [JavaScript](./CIEL1/05-web-js/web-js.md)
     - [Les conteneurs](./CIEL1/06-conteneurs/conteneurs.md)
     - [Bases de données](./CIEL1/07-bases-de-donnees/bases-de-donnees.md)

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