là (10Ko)
Transcription
là (10Ko)
TP DOM Exercice 1 : menu généré automatiquement Ecrire une fonction javascript qui construit dynamiquement un menu (sous la forme d’une liste de liens) dans une balise <nav></nav> à partir des éléments de type h1 présents dans le document courant. Il faudra positionner correctement les ancres afin de naviguer dans le document et ajouter des liens de retour vers le début du document avant chaque nouveau titre. Exercice 2 : gestion des évènements en javascript Recopiez le code suivant afin de comprendre la propagation des évènements dans une page html : <html onclick="alert('Propagation dans l\'élément html')"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Event Bubbles</title> <script type="text/javascript"> function init() { window.onclick = winEvent document.onclick = docEvent; document.body.onclick = docBodEvent; } function winEvent() { alert("Propagation dans l\'objet window"); } function docEvent() { alert("Propagation dans l\'objet document"); } function docBodEvent() { alert("La propagation se fait dans le BODY."); } </script> </head> <body onload="init()"> <h1>Propagation des évènements</h1> <hr /> <form onclick="alert('Il se propage au formulaire.');"> <input type="button" value="Button ‘main1’" name="main1" évènement commence au boutton: ' + this.name)" /> </form> </body> </html> onclick="alert('L Pour stopper la propagation il faut ajouter une instruction de type : event.cancelBubble = true ; Essayer cette instruction à n’importe quel niveau dans l’exemple précédent. Exercice 3 : utilisation de la méthode addEventListener Un noeud du DOM, usuellement un élément HTML, peut s'inscrire pour traiter un événement à l'aide de sa méthode addEventListener() : ref_noeud.addEventListener(typeEvent, fctEvent, useCapture); où : • • • • ref_noeud est une variable JS qui désigne le noeud de type Element qui se porte candidat pour traiter l'événement. typeEvent : nom de l'événement (le même qu'en DOM 0 sans "on", click au lieu de onclick) fctEvent : nom de la fonction de traitement qui sera déclenchée à l'interception de l'événement useCapture : veut-on capturer l'événement ou seulement le déceler, l'intercepter ? Ecrire une page html dont la structure du document sera un div identifié par l’id conteneur. Cet élément possèdera un ensemble d’éléments de type div (représentant des boites (cf. précédent exercice)). Ecrire une fonction init() en javascript qui sera lancée à la fin du chargement de la page afin d’ajouter l’événement click sur chacune des boites. La fonction lancée aux différents clicks devra faire en sorte d’afficher le numéro de la boite dans la méthode alert(‘’) ; Exercice 4 : HTML 5 drag and drop natif, les tours de hanoi Vous trouverez à l’adresse www.html5rocks.com/en/tutorials/dnd/basics une explication sur le drag and drop natif en html5. La plupart des navigateurs la supportent nativement. Le principe est qu’il est possible de sélectionner de nombreux éléments html afin de les déplacer dans la page. Le but de l’exercice est d’écrire une page html (et du javascript) afin de pouvoir jouer au jeu des tours de hanoi. Pour plus d’explications concernant les règles vous pouvez visiter ce site : http://jeux.prise2tete.fr/tour-de-hanoi/tour-de-hanoi.php C’est une implémentation en javascript du problème mais qui n’est pas la solution attendue.