À retenir : #08 IHM et events À retenir : #08 IHM et events
11) ) Les évènements Les évènements
22) ) Le Canvas Le Canvas
Les éléments de l’interfaceéléments de l’interface (bouton, cases à cocher, listes, etc.) doivent être mis en place dans le fichier HTML
dans le fichier HTML en attribuant à chaque objet (widgetwidget) un idid afin de le retrouver dans le programme JavaScript.
➫
En informatique, un évènementévènement est un signalsignal que peut recevoir le programme.
➫ Ces signaux sont envoyésenvoyés par le logiciel qui a lancé le programmelogiciel qui a lancé le programme, dans notre cas le navigateur
navigateur web. Dans un cas plus général les signaux proviennent du systèmesignaux proviennent du système d’exploitation
d’exploitation qui gère le lancement des applications.
➫
Ces eventsevents sont envoyés au programme quand des actionsactions de l’utilisateur sont détectéesdétectées dans l’interface
dans l’interface : resize, click, mousemove, etc.
➫
Cela évite aux programmes de scruter tous les éléments de l’interfacescruter tous les éléments de l’interface pour détecter des changements.
➫
Une fois un event reçuevent reçu le programme va lancer une fonctionlancer une fonction qu’il a déclarée comme étant la réponse spécifique à un réponse spécifique à un eventevent donné donné. On appelle cette fonction un callbackcallback.
➫
La gestion des eventsevents en JavaScript est très puissantepuissante car on peut scruter les évènements sur n’importe quel objetn’importe quel objet de l’interface : window, button, div, img, etc..
➫
Pour cela on récupère dans une variablevariable l’objet de l’interface à l’aide de son idid grâce à une fonction : myObject = document.getElementById(“myId”)myObject = document.getElementById(“myId”)
➫
Ensuite on peut choisir quel event surveillerevent surveiller sur l’objetobjet en y attachant un callbackcallback à exécuter en cas de signal : myObject.onclick() = function() {…}myObject.onclick() = function() {…}.
➫
window.onload()
window.onload() est un eventevent déclenché à la fin du chargement de la page : le script JavaScript peut commencer car tous les éléments de la page web sont en placecar tous les éléments de la page web sont en place.
➫
On peut récupérer en paramètre du callbackcallback une variable eventevent qui contient des informations : coordonnées de la souris, touche du clavier appuyée, etc.
➫
Les eventsevents les plus utilisés : onclick, onkeydown, onkeyup, onmouseoveronclick, onkeydown, onkeyup, onmouseover…
➫
Quand on souhaite faire des dessins ou des animationsdessins ou des animations, on utilise le widget HTML : canvas
canvas qui est une zone vide possédant des primitives graphiquesprimitives graphiques (fonctions de dessin).
➫
On insère la balise dans le code HTML : <canvas id="monCanvas"></canvas>.
➫
L’idid est obligatoire pour retrouverretrouver le widgetwidget dans le programme JS.
➫ Ensuite, dans le code JS, on doit récupérerrécupérer l’objet dans une variablevariable puis initialiser le contexte graphique
contexte graphique qui permettra de dessinerdessiner dans le canvas :
➫
// déclarations globales pour y accéder dans tout le code var canvas;
var context;
window.onload = function() {
// récupération de l’objet canvas dans une variable canvas=document.getElementById('monCanvas');
// initialisation du context graphique context=canvas.getContext('2d');
// utilisation des fonctions du contexte graphique context.fillRect(10,10,100,100);
}
Toutes les primitives graphiques sont référencées sur w3schools
➫
Valéry Bruniaux 1 / 1
