Programmation événementielle§

&

Département Informatique, IUT Lyon 1

Creative Commons License

Ce travail est sous licence Creative Commons Attribution-ShareAlike 3.0 France.

1

Fonction anonyme§

2

Objets de premier niveau§

3

Fonctions anonymes§

4

Exemple d'utilisation des fonctions anonymes§

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
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.

5

Autre exemple d'utilisation de fonction anonyme§

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
window.addEventListener("load", function() {
  var 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.

6

Exécution asynchrone§

7

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";

Note

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

8

Motivation§

9

Portée et fermeture§

10

Portée (scope)§

11

Fermeture (closure)§

12

L'arbre DOM§

13

Rappel§

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

graph  {

  node [ shape=box, style=rounded]

  html -- head
   head -- title -- title_txt
  html -- body
   body -- h1 -- h1_txt
   body -- p
    p -- p_txt
    p -- a -- a_txt
   body -- img

  a         [ label="a\nhref='./link'" ]
  img       [ label="img\nsrc='./pic'" ]
  title_txt [ shape=box, style=filled, label="Le document" ]
  h1_txt    [ shape=box, style=filled, label="Message important" ]
  p_txt     [ shape=box, style=filled, label="Bonjour le " ]
  a_txt     [ shape=box, style=filled, label="monde" ]

}
14

Terminologie§

Note

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

15

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éts d'un nœud :

nodeName, nodeType, nodeValue, textContent

16

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 suivante :

insertBefore, replaceChild, removeChild, appendChild,

17

Cheminement d'un événement§

18

Paramètre d'un listener§

Note

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 troisème paramètre de addEventListener.

19

Paramètre d'un listener§

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
document.body
  .addEventListener("click", function(evt) {
    var 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

Note

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.

20

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.

21

TP: Horloge avec alarme§

22

Sujet§

_images/tp-alarme.png
23

Pour aller plus loin§

24

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 introductions aux mécanismes mis en œuvre.

25