Programmation événementielle

Fonction anonyme

Objets de premier niveau

• En Javascript, les fonctions sont des objets de premier niveau, ce qui signifie qu'ils peuvent être manipulés au même titre que, par exemple, les entiers, les tableaux ou les objets.

• On peut par exemple

  • affecter une fonction à une variable ;

  • la passer en paramètre d'une autre fonction (par exemple addEventListener) ;

  • l'affecter comme attribut à un objet (ce qui est une manière de doter un objet de méthodes, comme en Java).

Fonctions anonymes

• Javascript autorise la création de fonctions anonymes :

  function (param1, param2) { /* instructions here */ }
  

• Contrairement à une déclaration de fonction, une fonction anonyme peut apparaître partout où une fonction est acceptée.

• C'est utile dans les cas où cette fonction n'a pas vocation à être réutilisée ailleurs, en particulier pour les abonnements.

Exemple d'utilisation des fonctions anonymes

window.addEventListener("load", function() {
  document.getElementsByTagName('span')[0]
    .addEventListener("mouseover", function() {
      console.log("haha, tickles");
    }
  );
  document.getElementById('b1')
    .addEventListener("click", function() {
      console.log("click");
    }
  );
});

Voir et modifier cet exemple.

Autre exemple d'utilisation de fonction anonyme

window.addEventListener("load", function() {
  const b1 = document.getElementById('b1');

  b1.addEventListener("click", function() {
    b1.textContent = "(en attente)";
    b1.disabled = true;
    setTimeout(function() {
      alert("message");
      b1.disabled = false;
      b1.textContent = "Afficher un message dans 2s";
    }, 2000);
  });
});

Voir et modifier cet exemple.

Exécution asynchrone

Motivation

Dans l'exemple précédent, pourquoi utiliser la fonction setTimeout et non une fonction qui bloquerait l'exécution pendant 2s, comme dans l'exemple ci-dessous ?

// ⚠ MAUVAIS EXEMPLE ⚠
b1.textContent = "(en attente)";
b1.disabled = true;
sleep(2000); // fonction imaginaire (n'existe pas en JS)
alert("message");
b1.disabled = false;
b1.textContent = "Afficher un message dans 2s";

Avertissement

La fonction sleep n'existe pas réellement en Javascript, et pour cause puisque ce n'est pas la bonne manière de faire.

• Réponse : parce que le navigateur n'utilise qu'un seul thread par page, dédié à la fois à l'affichage du HTML et à l'exécution du code Javascript.

• Pendant qu'une fonction Javascript s'exécute, la page est donc totalement "gelée" (saisie, défilement...).

• Si la fonction garde la main pendant une durée trop longue, ce phénomène sera perceptible, et dégradera l'expérience utilisateur.

Portée et fermeture

Portée (scope)

• La portée d'une variable est la partie du code sur laquelle cette variable est définie.

• Pour les variables globales, c'est l'ensemble des scripts exécutés par la page (y compris les scripts écrits par d'autres).

• Pour une variable locale, avec les mots-clefs let ou const, c'est le bloc dans lequel elle est déclarée.

• Pour une variable locale avec le mot-clef var, c'est la fonction dans laquelle elle est déclarée.

• Une variable locale d'un bloc est donc accessible par les fonctions (anonymes ou non) définies à l'intérieur de ce bloc.

Fermeture (closure)

• Une fonction porte avec elle le contexte dans lequel elle a été créée, c'est-à-dire l'état des variables locales qui lui sont accessibles.

• Une telle fonction assortie d'un contexte est appelée une fermeture.

• Dans l'exemple précédent, la variable b1 est définie au chargement de la page, mais « survit » à cette fonction, puisqu'elle est réutilisée au clic sur ce bouton, et encore deux secondes plus tard, dans le callback de la fonction setTimeout.

• Visualisez l'exécution pas à pas d'un autre exemple de fermeture sur pythontutor.

Vocabulaire

Une fonction de callback est utilisée en paramètre d’une méthode ou d’une fonction qui l'exécute le moment voulu.

L'arbre DOM

Rappel

Les balises HTML décrivent une structure d'arbre.

Terminologie

• Cet arbre s'appelle l'arbre DOM (pour Document Object Model).

• Les nœuds correspondant aux balises sont appelés des éléments.

• Les nœuds contenant le contenu textuel sont simplement appelés des « nœuds texte ».

Remarque

Il existe d'autres types de nœuds (par exemple les nœuds commentaire), mais ils sont plus rarement utiles.

Consultation du DOM

Récupérer des éléments depuis l'objet document :

getElementById, getElementsByTagName, getElementsByClassName, querySelector, querySelectorAll

Récupérer des éléments depuis un autre élément e :

e.getElementsByTagName, e.getElementsByClassName, e.querySelector, e.querySelectorAll, e.childNodes, e.children, e.parentNode,

Propriétés d'un nœud :

nodeName, nodeType, nodeValue, textContent

Modification du DOM

Création d'un nœud :

document.createElement, document.createTextNode, elt.cloneNode

Une fois créé, le nœud est encore hors de l'arborescence du document (et donc, non affiché). Il est nécessaire de le rattacher à un nœud parent par l'une des méthodes suivantes :

insertBefore, replaceChild, removeChild, appendChild,

Cheminement d'un événement

Source : http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Paramètre d'un listener

• Par défaut, les listeners dont déclenchés à la remontée de l'événement.

• Il est donc possible de s'abonner à tous les événements se produisant à l'intérieur d'un élément (et pas uniquement sur cet élément).

• Le listener reçoit en paramètre un événement, dont l'attribut target contient l'élément cible.

Indication

On peut également forcer un listener à se déclencher à la descente (capture d'un événement) plutôt qu'à sa remontée (bubbling). Pour cela on passera true en troisième paramètre de addEventListener.

document.body
  .addEventListener("click", function(evt) {
    const msg = document.getElementById("msg");
    if (evt.target.tagName === "BUTTON") {
        msg.textContent = "Vous avez cliqué sur " +
           evt.target.textContent;
    } else {
        console.log(evt.target);
        msg.textContent = "Vous avez raté les boutons...";
    }
});

Voir et modifier cet exemple

Indication

L'objet événement passé en paramètre aux listeners a également une méthode preventDefault qui permet d'inhiber le comportement par défaut de l'événement.

Note sur les arguments des fonctions et Javascript

Comme on vient de le voir pour les listeners, Javascript est très tolérant avec le nombre de paramètres des fonctions.

• Si on appelle une fonction avec trop de paramètres, les paramètres supplémentaires sont disponibles dans une variable spéciale nommée arguments (comparable à un tableau).

• Si on appelle une fonction avec pas assez de paramètres, les paramètres oubliés reçoivent comme valeur undefined.

TP: Horloge avec alarme

Sujet

• Créez une horloge digitale qui rafraîchit son affichage automatiquement. Vous aurez besoin pour cela de la classe Date et de la fonction setTimeout.

• Vous ajouterez ensuite une fonctionnalité permettant d'ajouter, de modifier et de supprimer des alarmes. Pour faire sonner votre alarme, vous pourrez notamment créer un élément <audio>.

Pour aller plus loin

Loupe

http://latentflip.com/loupe/

Loupe vous permet de visualiser la manière dont les événements sont gérés en Javascript.

La vidéo qui sert d'introduction est également une bonne introduction aux mécanismes mis en œuvre.