Dans le "À faire vous-même 2.2", un clic de souris sur n'importe quel endroit de la fenêtre du navigateur entraine une augmentation du "compteur". Il est possible de créer des "événements" qui seront déclanchés uniquement en cas de clic sur certains éléments particuliers (comme les boutons par exemple).
Modifiez le fichier "script.js" comme suit (les fichiers "index.html" et "style.css" restent inchangés) :
script.js
var para;
var btn;
var compt=0;
function setup(){
noCanvas();
para=createP("Vous avez cliqué "+compt+" fois.");
btn=createButton("Cliquez ici!");
btn.mousePressed(changeTexte);
}
function draw(){
}
function changeTexte(){
compt=compt+1;
para.html("Vous avez cliqué "+compt+" fois.");
}
Comme vous pouvez le constater, un clic ailleurs que sur le bouton ne modifie plus le texte. En revanche, un clic sur le bouton, entraîne un changement.
Le principe est relativement simple. Le "btn.mousePressed(changeTexte);" permet de définir un "détecteur d'événement" (on parle de listener) qui sera lié à l'élément de type "button" btn. Ce listener prend un paramètre qui correspond au nom de la fonction à exécuter en cas de clic sur le bouton. Cette fonction qui sera exécutée seulement si l'événement défini au niveau du listener à lieu, s'appelle une fonction de "callback". Dans notre exemple, c'est la fonction "changeTexte" qui joue le rôle de fonction de "callback" pour l'événement "mousePressed" sur l'élément "btn".
Il existe beaucoup d'autres "listeners" ("mouseReleased", "mouseClicked", "mouseMoved", "mouseOver") que vous pourrez associer aux différents éléments de votre choix (bouton, div...). Pour en savoir plus sur ces "listeners", n'hésitez pas à consulter la documentation officielle.
Il est possible d'utiliser une balise "input" (fonction "createInput") pour que l'utilisateur puisse saisir un mot ou un nombre. La fonction "value" permet de récupérer la valeur qui a été saisie par l'utilisateur.
Modifiez le fichier "script.js" comme suit (les fichiers "index.html" et "style.css" restent inchangés) :
script.js
var inp;
var btn;
function setup(){
noCanvas();
createP("Entrez un mot et validez avec le bouton");
inp=createInput("");
btn=createButton("Valider");
btn.mousePressed(validation);
para=createP("");
}
function draw(){
}
function validation(){
para.html("Vous avez écrit le mot : "+inp.value());
inp.value("");
}
La ligne "inp.value("");" permet d'effacer le champ de saisie (la fonction "value" sans paramètre permet de récupérer la valeur, avec paramètre, elle permet d'imposer une valeur. Avec un paramètre qui correspond à une chaîne de caractères vide (""), cela permet d'effacer le champ de saisie).
Modifiez le code ci-dessus pour que les mots saisis par l'utilisateur s'affichent les uns en dessous des autres.
Il existe aussi des "listeners" qui ne sont pas liés à une action de la souris : "changed" et "input"
Si vous utilisez le listener "changed" sur une balise de type "input" (à ne pas confondre avec le listener "input"), la fonction associée au listener sera éxecutée au moment où vous appuyerez sur la touche "Entrée"
Modifiez le fichier "script.js" comme suit (les fichiers "index.html" et "style.css" restent inchangés) :
script.js
var inp;
var aff;
function setup(){
noCanvas();
createP("Entrez un mot et validez en appuyant sur la touche Entrée");
inp=createInput("");
inp.changed(afficheMot)
aff=createP("");
}
function draw(){
}
function afficheMot(){
aff.html(inp.value());
}
Voici un exemple d'utilisation du listener "input" :
Modifiez le fichier "script.js" comme suit (les fichiers "index.html" et "style.css" restent inchangés) :
script.js
var inp;
var aff;
function setup(){
noCanvas();
createP("Entrez un mot");
inp=createInput("");
inp.input(afficheMot)
aff=createP("");
}
function draw(){
}
function afficheMot(){
aff.html(inp.value());
}
La fonction "createSlider" permet de créer un "curseur de contrôle". Cette fonction "createSlider" prend 3 paramètres :
Il est possible de récupérer la valeur indiquée par le curseur à n'importe quel moment, toujours à l'aide de la fonction "value".
Modifiez le fichier "script.js" comme suit (les fichiers "index.html" et "style.css" restent inchangés) :
script.js
var para;
var curs;
function setup(){
noCanvas();
createP("Bougez le curseur");
curs=createSlider(0,100,50);
para=createP("Valeur affichée : "+curs.value());
}
function draw(){
para.html("Valeur affichée : "+curs.value());
}
Il est évidemment possible de combiner les éléments "html" que nous venons de voir avec un "canvas" (surface de dessin) et même de "piloter" ce qu'affiche le "canvas" à l'aide d'éléments "html".
Créez un programme permettant d'afficher un disque. Le rayon de ce disque devra être "piloté" par un curseur. Le rayon minimum sera de 10 pixels, le rayon maximum sera de 100 pixels.
Créez un programme qui reprend l'exemple du "À faire vous-même 3.7" mais qui permet en plus de choisir la couleur du disque. Vous pourrez utiliser la fonction "createSelect". Vous trouverez des informations sur l'utilisation de cette fonction dans la documentation officielle ici (dans cette documentation, ne tenez pas compte du "sel.position(10, 10);", nous aborderons cette question dans la prochaine activité).