Module 1 : Introduction à JavaScript
1.1 — Premiers pas en JavaScript Aperçu
Module 2 : Opérateurs et conditions
2.1 — Conditions et logique Aperçu
Module 3 : Fonctions et portée
3.1 — Écrire et utiliser des fonctions Aperçu
Module 4 : Boucles et tableaux
4.1 — Tableaux et boucles Aperçu
Module 5 : Objets et JSON
5.1 — Objets JavaScript Aperçu
Module 6 : DOM — Sélectionner des éléments
6.1 — Le DOM et les sélecteurs Aperçu
Module 7 : DOM — Modifier le contenu et le style
7.1 — Modifier la page Aperçu
Module 8 : Événements
8.1 — Écouter les événements Aperçu
Module 9 : Formulaires dynamiques et validation
9.1 — Validation avancée Aperçu
Module 10 : API Fetch — Requêtes HTTP
10.1 — Fetch et async/await Aperçu
Module 11 : Manipulation de données — filter, map, reduce
11.1 — Filter, Map, Reduce Aperçu
Module 12 : Stockage local — localStorage
12.1 — Persister des données Aperçu
Module 13 : Modules et organisation du code
13.1 — Modules ES6 Aperçu
Module 14 : Projet final — Site interactif complet
14.1 — Application web interactive Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement
Module 13 : Modules et organisation du code Aperçu gratuit

13.1 — Modules ES6

📋 Objectifs d'apprentissage

  • Utiliser export et import
  • Séparer le code en modules
  • Organiser un projet JavaScript
  • Comprendre defer et type="module"

Exporter depuis un fichier

// utils.js
export function addition(a, b) { return a + b; }
export const PI = 3.14159;
export default class Calculator { }

Importer dans un autre fichier

// main.js
import { addition, PI } from "./utils.js";
import Calculator from "./utils.js"; // import default

console.log(addition(2, 3)); // 5

Activer les modules dans HTML

<script type="module" src="main.js"></script>

type="module" active les imports/exports. Sans ça, import provoque une erreur. Les modules sont automatiquement en mode strict et defer (chargés après le HTML).

💡 Structure de projet

js/
├── main.js          (point d'entrée)
├── components/
│   ├── header.js
│   └── footer.js
├── utils/
│   ├── validation.js
│   └── storage.js
└── data/
    └── products.js
Ceci est un aperçu gratuit.
Voir la formation complète