---
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
