doclà (10Ko)
download 
Plainte 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.
