====== Evenements ====== La gestion des Evenements, telle que décrite dans la [[https://developer.mozilla.org/fr/docs/DOM/event|documentation]] du Mozilla Developper Network permet l'enregistrement des évènements sur les nœuds du DOM. Si vous n'êtes pas familier avec la notion de [[dom_fr|DOM]], faites au moins le début des exercices. Les gestionnaires et "écouteurs" (listeners) d'évènements permettent –entre autres– de déclencher des actions suite à une interaction de l'utilisateur. ===== addEventListener ===== [[https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener|addEventListener]] permet de déclencher une action lorsqu'un événement est lancé sur un élément du DOM, par exemple quand on clique sur un lien. ==== click alert ==== Faites en sorte que quand on clique sur le lien, ça affiche "bonjour" dans un alert. events | click ceci est un lien ==== click console.log ==== ''%%console.log()%%'' permet d'afficher un message dans la console de javascript. console.log("hello"); En utilisant l'exercice précédent, au lieu d'afficher un message en alert, affichez-le dans la console. ==== mousemove ==== L'événement mousemove permet de capturer l'événement de déplacement de souris au-dessus de l'événment choisi. Si l'élément est ''%%document%%'', alors on capture les déplacements de souris au-dessus de la page HTML. A partir de l'exercice suivant, affichez un message en console log à chaque fois que la souris bouge. events | mousemove

Passez la souris au-dessus du document

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute rure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla ariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia eserunt mollit anim id est laborum.

==== mouseover et mouseout ==== L'événement ''%%mouseover%%'' capture les déplacements de la souris quand elle survole l'élément fixé. ''%%mouseout%%'' capture l'événement de déplacement de la souris qui quitte l'élément. Le code ci-dessous ne capture que les événements ''%%mouseover%%'' ajoutez-y un événement ''%%mouseout%%'' qui affiche en ''%%cpnsole.log%%'' quand la souris quitte l'élément. events | mouseover

Survolez le paragraphe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

==== keyup ==== L'événement ''%%keyup%%'' permet de savoir si une touche du clavier a été pressée. Il existe 3 événements pour capturer les touches du clavier : keydown, keypress et keyup. Dans cet exercice, capturez les touches qui ont été pressées lors de la consultation de la page. A chaque fois qu'on appuie sur une touche, faites un ''%%console.log%%'' qui affiche "vous avez pressé une touche". events | keyup

Appuyez sur une touche

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

==== load ==== Il existe aussi des événements qui ne vont pas directement écouter des interactions avec l'utilisateur, parmi ceux-ci, le plus fréquent est l'événement ''%%load%%'' qui permet de savoir si un document est chargé. Ceci permet à javascript de se lancer uniquement quand la age (donc le DOM) est chargé. Par exemple, ce code ne peut pas fonctionner parce que au moment où le javascript est lancé, le paragraphe ''parag'' n'existe pas encore. events | no load

Ca ne marche pas

Il est recommandé de placer le javascript dans le >head<, or, si on déclenche du javascript qui interragit avec le DOM avant que celui-ci soit chargé, ça plante.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vous pouvez solutionner ce problème en déplaçant le ''%%%%'' en bas du document, juste avant le ''%%%%'', essayez. L'événement ''load'' est spécifié dans un ''addEvenetListener'' qui s'applique à ''window'' et non pas à document. window.addEventListener("load", function(){ // ici je met tout le javascript que je veux // parce que ici j'ai accès au DOM // par exemple : document.getElementById("monID").innerHTML = "j'ai accès au dom"; }); events | load

Ca devrait marcher

Il est recommandé de placer le javascript dans le >head<, or, si on déclenche du javascript qui interragit avec le DOM avant que celui-ci soit chargé, ça plante.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

==== submit ==== On peut aussi capturer des événements submit des formulaires HTML. Par exemple, pour un formulaire qui aurait pour id ''newsletter''

On peut capturer un événement de Submit (lorsque le formulaire est envoyé) avec un code du type. document.getElementById("newsletter").addEventListener("submit", function(){ // verification des champs avant envoi du formulaire }); ===== Event ===== On peut capturer des informations sur un événement. Par convention, on appelle l'event ''e''. Sur le wiki de Mozilla Developper Network, vous pouvez consulter [[https://developer.mozilla.org/en-US/docs/DOM/event|la documentation de event]] ==== e ==== Pour capturer un événement, il suffit de spécifier une variable ''e'' dans les parenthèses de la fonction anonyme appelée par le ''addEventListener''. Avant : sans capture d'événement document.addEventListener('click',function(){ // des trucs }); Après : avec capture d'événement document.addEventListener('click',function(e){ // des trucs qui peuvent utiliser e }); Dans l'exemple ci-dessous, observez l'événement capturé par le ''addEventListener'' de ''click''. events | click capture ceci est un lien (oui, je sais, j'aurais pu faire un ''load''). ==== e mouse capture==== On peut capturer plein d'événements, ici on va capturer des événements de souris. On pourra notamment utiliser ''e.pageX'' et ''e.pageY'' pour connaitre les positions en X et Y du curseur. Cet exemple ci-dessous utilise l'événement ''click'', capturez l'événement ''mousemove'' et affichez les coordonnées x et y de la souris. events | xapture xy

Cliquez où vous voulez dans cette page

Faites la même chose pour suivre la position X et la position Y du curseur dans un événement de déplacement de souris

=== Optionnel : curseur suivi === Un div reste collé à la souris. Créez une page avec un div qui a pour id "cursor" et qui reste collée à la souris quand elle se déplace. Pensez à mettre du css pour que votre ''#cursor'' soit en ''position:absolute'' ou ''position:fixed''. document.getElementById("cursor").style.left = e.posX; ==== e key capture==== On peut aussi capturer les événements du clavier, évidemment celles-ci n'ont pas de ''posX'' ni ''posY'' mais d'autres propriétés dont : ''charCode'' qui donne le code de la lettre ''keyCode'' qui donne le code de la touche (si elle n'est pas une lettre, comme les flêches ou ENTER) et ''metaKey'', ''shiftKey'', ''ctrlKey'', ''altKey''... qui permettent de savois s'il s'agit d'une combinaison qui utilise une touche d'option. Meta, c'est le nom de la touche "windows". document.addEventListener('keypress',function(e){ console.log('une touche a été pressée'); console.log(e.charCode); console.log(e.keyCode); }); Dans le code suivant, changez le contenu de ''parag'' quand la touche A est pressée. events | keypress

Surtout n'appuyez pas sur A

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

=== Optionnel : vaisseau spatial === En utilisant les flêches, déplacez votre [[http://kickassapp.com/|vaisseau spatial]] sur le document C'est un peu la même logique que pour le suivi de curseur, à ceci près que la nouvelle position du vaisseau est calculée d'après la position actuelle. var ship = document.getElementById("spaceship"); ship.style.left = ship.style.left + 10; === Optionnel : konami (difficle) === Codez un [[wp>konami code]] : quand la combinaison de touches ↑↑↓↓←→←→ B A est pressée, un [[http://www.zurb.com/playground/jquery-raptorize|vélociraptor]] apparaît à l'écran ! ==== e.preventDefault ==== L'événement ''e'' peut avoir des propriétés, mais aussi des méthodes. La méthode la plus utilisée dans ce cas, c'est ''e.preventDefault()'' qui permet d'annuler le comportement par défaut d'un événement. Par exemple, si j'ai un lien classique, en cliquant dessus, je vais suivre le lien. freelancis Or, je peux désactiver ceci en spécifiant ''e.preventDefault()'' au comportement ''click'' var link = document.getElementById("link"); link.addEventListener("click", function(e){ e.preventDefault(); }) === Désactivez les liens de la page === Pour faire cet exercice, vous devez avoir réussi les exercices du début de la page DOM [[dom_fr#gebcn_et_boucle_for]] et [[dom_fr#gebtn_length]]. Désactivez tous les liens de la page. events | preventdefault

N'allez pas sur les liens

=== Confirmez avant de surfer === La méthode ''window.confirm'' permet de créer une fenêtre (moche) de confirmation. Elle s'utilise ainsi: if( confirm("voulez-vous un bonbon ?") ){ alert("hop, un bonbon"); } else{ alert("un chocolat alors ?"); } En utilisant cette méthode demandez à l'utilisateur de confirmer s'il clique sur un lien. === La disparition === Désactivez l'usage de la lettre e. (bonus : pensez aussi à "é", "è", "ê", "É", "È" et "Ê"). events | la disparition

Écrivez votre livre ici

Vous ne pouvez pas écrire de lettre "e", peut-être écrirez-vous la suite de La Disparition
=== Newsletter === Vérifiez bien que tous les champs soient saisis avant d'envoyer la newsletter. S'il manque un renseignement, affichez un message d'erreur et utilisez ''e.preventDefault()'' pour éviter que le formulaire soit envoyé. Pour récupérer la valeur d'un champ, vous pouvez utiliser document.getElementById('email').value Pour savoir quelle est la longueur du champ, utilisez length document.getElementById('email').value.length events | newsletter

Inscrivez-vous à la newsletter