Download
1 / 25
250 likes | 441 Views
les concepts et applications du Dynamic HTML. DHTML. Préambule. On peut considérer le DHTML comme du JavaScript appliqué aux feuilles de styles (CSS) Ce n'est pas un langage à proprement parler, mais plutôt une forme d'écriture mettant en oeuvre plusieurs technologies.
E N D
Préambule • On peut considérer le DHTML comme du JavaScript appliqué aux feuilles de styles (CSS) • Ce n'est pas un langage à proprement parler, mais plutôt une forme d'écriture mettant en oeuvre plusieurs technologies. • DHTML est très rigoureux syntaxiquement parlant. • DHTML ne réclame aucun plugin supplémentaire • Consultez http://www.w3.org/DOM/ • Plus que jamais, les tests sur différents navigateurs, dont l'incontournable IE, sont indispensables.
Document Object Model • Le DOM définit : • La structure logique des objets • L'accès aux objets • La manipulation des objets • Tout ce qui se trouve dans un document html ou xhtml peut être modifié, créé ou supprimé en utilisant le DOM • Le DOM fournit aussi la gestion des événements, pour intercepter les « actions » du navigateur ou de l'utilisateur • En fait, le DOM constitue une extension des notations vues dans les cours JavaScript. • window.document.formu1.champs1.value : c'est du DOM ! • D'autres objets de la page HTML on été rendus accessibles
Premier exercice • Tapez le code suivant : • <html> • <head> • <title></title> • </head> • <body> • <script type="text/javascript"> • if (document.getElementById && document.createElement) { • document.write("Il semblerait que nous puissions tester le DHTML !"); • } • </script> • </body> • </html> • Si les instructions DHTML fonctionnent ... donc on passe à la suite ...
Accéder à un objet par son ID • Vous savez que tout objet XHTML peut être identifié par un id. • <div id= "lebouton"> • La CSS permet d'y ajouter des attributs • #lebouton { ......... } • La méthode DHTM getElementById va nous permettre d'accéder à un objet par son id et le modifier. • Imaginons une div incluant un formulaire et un boutton. L'appui sur le bouton va changer la couleur de fond de la DIV. • Le code se trouve page suivante :
Accéder à un objet : le code • <script type="text/javascript"> • function cc(chose) • { • var boite=document.getElementById(chose); • boite.style.backgroundColor="#ff0000"; • } • </script> • <div id="toto"> • debut de la div • <form><input type="button" onClick="cc('toto')" value="Change de couleur" /></form> • fin de la div • </div>
Accéder à un objet par son nom • Vous savez que tout objet XHTML peut être identifié par un nom • <div name="lebouton"> • Comme personne n'est parfait, il est possible de trouver sur une même page plusieurs objets ayant le même nom. • Ainsi la méthode s'appelle getElementsByName. Elements avec un s. • Mais il faudra fournir un indice correspondant à l'objet que l'on veut atteindre : • getElementsByName("toto")[1] • Accède au deuxième objet nommé toto. (le premier a l'indice 0, comme d'hab ... • Reprenez votre code, et faites un test.
Le code • A copier coller plusieurs fois • <div name="toto"> debut de la div • <form><input type="button" onClick="cc('toto')" value="Change de couleur" /></form> • fin de la div</div> • Et la fonction JS • <script type="text/javascript"> • function cc(chose) • { • var boite=document.getElementsByName(chose)[1]; • boite.style.backgroundColor="#ff0000"; • }
Accéder à un objet par son type • Vous savez aussi ce qu'est une balise. (celui qui répond non sera jeté aux lions) • La méthode getElementsByTagName permet d'accéder à tous les objets créé par la balise passée en arguments. • La aussi Elements avec un s, c'est mieux. • Et la aussi, il faudra fournir un indice correspondant à l'objet que l'on veut atteindre : • getElementsByTagName("div")[4] • Accède à la 5 eme DIV.. • Même cause, même punition : Reprenez votre code, et faites un test.
Le code • A copier coller plusieurs fois • <div> debut de la div • <form><input type="button" onClick="cc()" value="Change de couleur" /></form> • fin de la div</div> • Et la fonction JS • <script type="text/javascript"> • function cc() • { • var boite=document.getElementsByTagName("div")[1]; • boite.style.backgroundColor="#ff0000"; • }
Accéder à un événement • Vous savez aussi ce que sont les événements. Pour ce premier exemple, interessons nous aux clics de la souris sur un objet. • L'événement est donc onClick • Prenons une boite DIV est faisons la se déplacer lorsque l'on clique dessus. • Nous utiliserons getElementById • #boite1 { position:absolute; background-color:#0f0;width:100px;height:80px; top:0px; left:0px} • <div id="boite1" onClick="bougedela()">cliques moi</div> • function bougedela() { • var boite=document.getElementById("boite1"); • boite.style.top=150+"px"; • boite.style.left=350+"px"; • } • A vos claviers ...
Passer un événement à une fonction • Tous les événements du navigateur produisent des informations que l'on peut récupérer et passer en arguments • Reprenons l''exemple précédent : Cette fois ci, le clic de la souris indiquera la nouvelle position de la boite. • Nous utiliserons le paramètre event et nous utiliserons dans celui-ci clientX et clientY • Attachez l'événement onClick au body • function bougedela() { • var boite=document.getElementById("boite1"); • boite.style.top=event.clientY+"px"; • boite.style.left=event.clientX+"px"; • } • A vos claviers ...
L'objet Event • Avec l'objet event vous pouvez rechercher et traiter des informations distinctes sur les évènements utilisateur comme des clics de souris ou des entrées clavier. • altKey, ctrlKey, shiftKey • clientX, clientY • keyCode • layerX, layerY • modifiers • offsetX, offsetY • pageX, pageY • screenX, screenY • which • type • x,y
Peut mieux faire • Avant de mieux faire dans l'esprit des exercices précédents, il faudrait connaître les limites d'évolution de nos objets. • Pour cela, il faut pouvoir récupérer les paramètres d'environnement du client. • Quelques objets sont à notre disposition : • Navigator • version, os, langue • Screen • taille et résolution • Window • taille • Document • titre
Détecter l'objet cliqué • Nous avons vu qu'il était possible de passer en paramètre event. • Apartir de cet élément, nous pouvons aussi récupérer l'id de l'objet cliqué. • On peut reprendre l'exemple précédent : • function bougedela(event) • { • idobjet = event.srcElement.id; • var boite=document.getElementById(idobjet); • boite.style.top=event.clientY+"px"; • boite.style.left=event.clientX+"px"; • } • A vos claviers ... • Attention srcElement est spécifique à IE .... utilisez target sous Firefox
Détecter l'objet cliqué sous IE et Firefox • Pour rendre compatible ce script il faut donc prévoir les deux cas en utilisant une syntaxe telle que • function bougedela(event) • { • var idobjet = (event.target) ? event.target.id : ((event.srcElement) ? event.srcElement.id : null); • var boite=document.getElementById(idobjet); • boite.style.top=event.clientY+"px"; • boite.style.left=event.clientX+"px"; • }
Détecter l'objet cliqué sous IE et Firefox et obtenir ses dimensions • Reprenez le script précédent, puisqu'il fonctionne partout et modifiez le pour récupérez la taille de la div • function bougedela(event) • { • var idobjet = (event.target) ? event.target.id : ((event.srcElement) ? event.srcElement.id : null); • var boite=document.getElementById(idobjet); • var x=boite.offsetWidth; • var y=boite.offsetHeight; • alert("x:"+x+"y:"+y); • boite.style.top=event.clientY+"px"; • boite.style.left=event.clientX+"px"; • }
Détecter l'objet cliqué sous IE et Firefox et obtenir sa position • Reprenez le script précédent, puisqu'il fronctionne partout et modifiez le pour récupérez la position de la div • function bougedela(event) • { • var idobjet = (event.target) ? event.target.id : ((event.srcElement) ? event.srcElement.id : null); • var boite=document.getElementById(idobjet); • var x=boite.offsetLeft; • var y=boite.offsetTop; • alert("x:"+x+"y:"+y); • boite.style.top=event.clientY+"px"; • boite.style.left=event.clientX+"px"; • } • Il n'existe pas de offsetRight/offsetBottom ; faites un calcul
Détecter la visibilité d'un objet • La encore même principe. Nous illustrons ici l'interaction avec les feuilles de styles, puisqu'il s'agit ici de la propriété visibility qui peut prendre comme valeur visible ou hidden. • Rappel : on cache l'élément, mais sa place est toujours occupée • function bougedela(event) • { • var idobjet = (event.target) ? event.target.id : ((event.srcElement) ? event.srcElement.id : null); • var boite=document.getElementById(idobjet); • var x=boite.style.visibility; • alert(x); • } • On peut bien sur modifier l'état • boite.style.visiblity="hidden"
Détecter les évènements de la souris • event.type et event.button vont nous permettre de détecter l'activité de la souris. • function bougedela(event) • { • var idobjet = (event.target) ? event.target.id : ((event.srcElement) ? event.srcElement.id : null); • var boite=document.getElementById(idobjet); • var toto=window.event; • if (event.type) alert(event.type); • if (typeof event.button != 'undefined') alert("boutton : "+ event.button); • }
Détecter les coordonnées du pointeur de la souris • Au chargement, on initialise l'événement à détecter, puis sur cet événement, on affiche les coordonnées : • <body onLoad="initier('boite1')"> • <div id="boite1"> • <p>Lorem ipsum dolor sit amet, ...</p> • <form name="aff"><input type="text" size="200" name="mess"></input></form> • </div> • </body> • function initier(idobjet) { • var objet=document.getElementById(idobjet); • objet.onmousedown = trouver; } • function trouver() { • var event=window.event; • window.document.aff.mess.value="navigateur x/y : "+event.clientX+"/"+event.clientY+" ecran : "+event.screenX+"/"+event.screenY; } • Attention : IE Only event.clientX, event.clientY, event.x, event.y
Mouvements fluides • Puisqu'il est possible d'agir sur tous ces paramètres, il va être possible de faire bouger un objet en plusieurs étapes, pour ajouter une impression de fluidité. • Placer un objet div sur le bord gauche de l'écran. • Au clic sur ce dernier, faites le glisser progressivement jusqu'au bord droit. • setTimeout / setInterval risquent de vous servir ... • A vos claviers ...
