Quiz

Chapitre 11 : ES6+ : Le JavaScript moderne

Écouter la leçon Lecture audio assistée par IA

1. Qu'est-ce qu'un module ?

Un module est un fichier JavaScript qui exporte du code (fonctions, classes, variables) pour être utilisé dans d'autres fichiers. Cela permet d'organiser et de réutiliser le code.

2. Export et Import

Export nommé (Named Export)

mathUtils.js :

// Exporter des fonctions
export function additionner(a, b) {
    return a + b;
}

export function multiplier(a, b) {
    return a * b;
}

// Exporter une constante
export const PI = 3.14159;

main.js :

// Importer des exports nommés
import { additionner, multiplier, PI } from './mathUtils.js';

console.log(additionner(5, 3));  // 8
console.log(multiplier(4, 2));   // 8
console.log(PI);                 // 3.14159

3. Export par défaut (Default Export)

Un module peut avoir un seul export par défaut :

Personne.js :

export default class Personne {
    constructor(nom, age) {
        this.nom = nom;
        this.age = age;
    }

    sePresenter() {
        console.log(`Je suis ${this.nom}`);
    }
}

main.js :

// Import par défaut (nom libre)
import Personne from './Personne.js';

let alice = new Personne("Alice", 25);
alice.sePresenter();

4. Mélanger exports nommés et par défaut

utils.js :

// Export par défaut
export default function saluer(nom) {
    console.log(`Bonjour ${nom}`);
}

// Exports nommés
export const VERSION = "1.0.0";

export function capitaliser(texte) {
    return texte.charAt(0).toUpperCase() + texte.slice(1);
}

main.js :

import saluer, { VERSION, capitaliser } from './utils.js';

saluer("Alice");              // "Bonjour Alice"
console.log(VERSION);         // "1.0.0"
console.log(capitaliser("hello")); // "Hello"

5. Renommer les imports

import { additionner as add, multiplier as mult } from './mathUtils.js';

console.log(add(5, 3));  // 8
console.log(mult(4, 2)); // 8

6. Importer tout

import * as Math from './mathUtils.js';

console.log(Math.additionner(5, 3));  // 8
console.log(Math.PI);                 // 3.14159

7. Utiliser les modules dans HTML

<!DOCTYPE html>
<html>
<head>
    <title>Modules ES6</title>
</head>
<body>
    <h1>Application avec modules</h1>

    <!-- Important: type="module" -->
    <script type="module" src="main.js"></script>
</body>
</html>

8. Organisation d'un projet

mon-projet/
├── index.html
├── js/
│   ├── main.js
│   ├── utils/
│   │   ├── mathUtils.js
│   │   └── stringUtils.js
│   └── classes/
│       ├── Personne.js
│       └── Voiture.js

main.js :

import Personne from './classes/Personne.js';
import { additionner } from './utils/mathUtils.js';
import { capitaliser } from './utils/stringUtils.js';

let alice = new Personne("alice", 25);
console.log(capitaliser(alice.nom)); // "Alice"
console.log(additionner(10, 5));     // 15

9. Exercice pratique

calculator.js :

export class Calculator {
    add(a, b) {
        return a + b;
    }

    subtract(a, b) {
        return a - b;
    }

    multiply(a, b) {
        return a * b;
    }

    divide(a, b) {
        if (b === 0) {
            throw new Error("Division par zéro");
        }
        return a / b;
    }
}

export const OPERATIONS = {
    ADD: '+',
    SUBTRACT: '-',
    MULTIPLY: '*',
    DIVIDE: '/'
};

main.js :

import { Calculator, OPERATIONS } from './calculator.js';

let calc = new Calculator();

console.log(calc.add(10, 5));       // 15
console.log(calc.multiply(4, 3));   // 12
console.log(OPERATIONS.ADD);        // "+"

try {
    calc.divide(10, 0);
} catch (error) {
    console.error(error.message);   // "Division par zéro"
}

Conclusion

🎉 Félicitations ! Vous avez terminé le module JavaScript !

Vous maîtrisez maintenant :

  • ✅ Les bases de JavaScript
  • ✅ Les variables et types de données
  • ✅ Les structures de contrôle
  • ✅ Les fonctions
  • ✅ Les objets et la POO
  • ✅ Les événements
  • ✅ L'asynchronisme
  • ✅ La gestion des erreurs
  • ✅ Les modules

Vous êtes maintenant prêt à créer des applications web interactives et modernes !

Évaluation des acquis

Quiz du chapitre 11

Correction immédiate
Q1 Quel mot-clé est utilisé pour exporter une fonction ou une variable d'un module en JavaScript ?
Q2 Quel mot-clé est utilisé pour importer des éléments d'un module en JavaScript ?
Ateliers pratiques & Projets

Testez vos compétences avec nos exercices guidés et le tuteur IA.

Ateliers pratiques & Corrigés détaillés

Ateliers pratiques & Corrigés

#1 — Template Literals
Atelier #1

Utilise les backticks pour concaténer 'Bonjour' et une variable 'nom'.

Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
const message = `Bonjour ${nom}`;
#2 — Destructuring d'objet
Atelier #2

Extrais les propriétés 'prenom' et 'age' de l'objet 'user' en une seule ligne.

Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
const { prenom, age } = user;
#3 — Spread Operator
Atelier #3

Fusionne deux tableaux 'tab1' et 'tab2' dans un nouveau tableau 'tab3'.

Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
const tab3 = [...tab1, ...tab2];
#4 — Array Map
Atelier #4

Utilise .map() pour créer un nouveau tableau contenant le double de chaque nombre de 'nombres'.

Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
const doubles = nombres.map(n => n * 2);
#5 — Paramètres par défaut
Atelier #5

Crée une fonction qui prend un paramètre 'message' avec la valeur par défaut 'Hello'.

Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
function saluer(message = "Hello") { console.log(message); }
Chapitre précédent
Précédent
Besoin d'aide ?
Tuteur Virtuel
Bonjour ! Je suis votre tuteur virtuel. Comment puis-je vous aider avec ce cours aujourd'hui ?
Historique des conversations
Chargement...