JavaScript : données, DOM et asynchronisme
JavaScript : données, DOM et opérations asynchrones
Au S2, JavaScript servait à écouter des événements et à afficher les données d’une API. Au S3, le même langage s’exécutait aussi dans Node. Ce parcours consolide les valeurs et les fonctions avant d’aborder les collections, le DOM, les promesses et la persistance dans le navigateur.
| Étape | Supports | Application |
|---|---|---|
| Valeurs et décisions | Variables, types, conditions | Calculer et vérifier une saisie |
| Traitements réutilisables | Fonctions, boucles | Transformer plusieurs valeurs |
| Collections | Tableaux, méthodes, objets, Object | Représenter des fiches |
| Interface | Événements, FormData | Relier saisie et état |
| Asynchronisme | Promesses, async/await, fetch | Charger une API et traiter ses erreurs |
| Persistance | Stockage | Retrouver une sélection |
Dans le navigateur, document donne accès au DOM. Dans Node, cette variable n’existe pas par défaut. Les exemples html live de ce parcours utilisent le navigateur ; les sorties de console sont indiquées après les extraits JavaScript.
Un événement modifie le DOM
<button type="button">Afficher le message</button>
<p role="status"></p>
<script>
const bouton = document.querySelector('button');
bouton.addEventListener('click', () => {
document.querySelector('p').textContent = 'Bonjour MMI !';
});
</script>Le bouton existe avant l’exécution du script. querySelector récupère l’élément ; addEventListener enregistre une fonction qui sera appelée au clic. textContent écrit du texte dans le paragraphe. Après un clic, « Bonjour MMI ! » apparaît sans rechargement.
Dans un projet, placez le JavaScript dans app.js, chargé par <script type="module" src="app.js"></script>. Un script de module attend l’analyse du document et possède sa propre portée.