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¶§
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");
}
);
});
|
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);
});
});
|
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";
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.
- 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 (
var
), c’est la fonction dans laquelle elle est déclarée. - Une variable locale d’une fonction
f
est donc accessible par les fonctions (anonymes ou non) définies à l’intérieur def
.
Fermeture (closure)¶§
- Une fonction définie à l’intérieur d’une autre 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 fonctionsetTimeout
. - Visualisez l’exécution pas à pas d’un autre exemple de fermeture sur pythontutor.
L’arbre DOM¶§
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 ».
Note
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 :
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 :
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.
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 troisième paramètre de
addEventListener.
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...";
}
});
|
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.
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>.
