Programmation événementielle [Les paradigmes de programmation]

Programmation événementielle

Objectif

Se familiariser avec la programmation événementielle.

Mise en situation

Il est courant qu'un programme interagisse avec l'extérieur en échangeant des données en entrée et en sortie. Cependant il peut aussi échanger des événements, et déclencher des actions en fonctions d'autres actions extérieures. C'est le cas des sites Web dynamiques, qui réagissent pour changer l'état ou l'apparence de la page, par exemple lorsque l'on clique sur un bouton. La programmation événementielle se focalise ainsi sur l'exécution de code en fonction d’événements, plutôt qu'une simple exécution séquentielle des instructions.

Définition : Programmation événementielle

Ce paradigme est fondé sur les événements qui se produisent dans le programme. En d'autres termes, l'exécution du programme sera déterminée par ce qui se produit à un instant donné.

On en voit l'intérêt dans des programmes à interface graphique, où l'utilisateur peut utiliser sa souris ou son clavier pour déclencher une action.

De tels programmes ont généralement besoin de détecter ces événements et d'exécuter immédiatement les actions associées.

Définition : Boucle asynchrone

Une boucle asynchrone tourne en arrière-plan du programme, c'est-à-dire que sa présence est non-bloquante, ainsi elle n'empêche pas d'autres parties du programme de tourner.

Exemple : HTML + JavaScript

Soit ce fichier HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="index.js"></script>
  </head>
  <body>
    <button id="button">Click Me</button>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="index.js"></script>
  </head>
  <body>
    <button id="button">Click Me</button>
  </body>
</html>

Et ce fichier JavaScript utilisé dans le fichier HTML :

function eventHandler (event) {
  console.log('Button has been clicked!')
}
const button = document.getElementById('button')
button.addEventListener('click', eventHandler)

function eventHandler (event) {
  console.log('Button has been clicked!')
}

const button = document.getElementById('button')
button.addEventListener('click', eventHandler)

La fonction « événement » eventHandler est appelée lorsque que le bouton est cliqué.

Complément : Multi-paradigme

La plupart des langages sont multi-paradigmes, c'est-à-dire qu'ils supportent simultanément les paradigmes impératif, fonctionnel, événementiel, etc.

La plupart ont néanmoins une dominante forte, par exemple le déclaratif pour la C ou l'objet pour Java.

JavaScript est un langage multi-paradigme. TypeScript est un sur-ensemble de JavaScript encore plus multi-paradigme car il complète les lacunes objet de JavaScript, tout en permettant de continuer à écrire du JavaScript.

À retenir

La programmation événementielle utilise les événements pour déterminer l'exécution d'un programme.
Un événement peut être une action de l'utilisateur.