docThierry Lecroq
download 
Plainte Transcription
Thierry Lecroq
DHTML
Thierry Lecroq
Université de Rouen
FRANCE
Thierry Lecroq (Univ. Rouen)
DHTML
1 / 10
Dynamic HTML
En HTML seul, une page chargée ne peut plus être modifiée
Solution
Combinaison de
javascript
modification d’attributs d’éléments HTML
gestion des événements
accès au DOM HTML (arbre des éléments HTML de la page)
Thierry Lecroq (Univ. Rouen)
DHTML
2 / 10
Les calques du DHTML
Le DHTML exploite la notion de calque ou couche ou layer : principal et
indispensable objet d’affichage d’un contenu.
Ils peuvent être manipulés : déplacés, cachés, modifiés, redessinés,
changés...
Thierry Lecroq (Univ. Rouen)
DHTML
3 / 10
Les balises de calque
layer
ilayer (Netscape)
iframe (IE)
div
Exemple
<div id="monCalque"
style="background:#00AA11;width:100px;height:100px">
contenu
</div>
Thierry Lecroq (Univ. Rouen)
DHTML
4 / 10
Modifier les calques avec Javascript
Exemple
<html>
<head>
<script type="text/javascript">
function init() {
setTimeout("change()",3000);
}
function change() {
document.getElementById("monCalque").style.backgroundColor="red";
document.getElementById("monCalque").style.left="150px";
}
</script>
</head>
<body onLoad="init()">
<p>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla<br/>
<div id="monCalque"
style="position:absolute;background:#00AA11;
left:100px;top:50px;
width:100px;height:100px">calque
</div>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla
</p>
</body>
</html>
Thierry Lecroq (Univ. Rouen)
DHTML
5 / 10
Modifier les calques avec Javascript
Quand le document est totalement chargé, l’événement onLoad est
déclenché.
Il lance la fonction init, qui lance un timeOut de 3 secondes, qui
déclenchera la fonction change
Thierry Lecroq (Univ. Rouen)
DHTML
6 / 10
Le calque qui se déplace
<html>
<head>
<script type="text/javascript">
function init() {
setTimeout("change()",1000);
}
function change() {
var gauche;
gauche=parseInt(document.getElementById("monCalque").style.left);
document.getElementById("monCalque").style.left=(gauche+10)+"px";
setTimeout("change()",1000);
}
</script>
</head>
<body onLoad="init()">
<p>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla<br/>
<div id="monCalque"
style="position:absolute;background:#00AA11;
left:100px;top:50px;
width:100px;height:100px">calque
</div>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla
</p>
</body>
</html>
Thierry Lecroq (Univ. Rouen)
DHTML
7 / 10
Le calque qui disparait
<html>
<head>
<script type="text/javascript">
function init() {
setTimeout("change()",2000);
}
function change() {
document.getElementById("monCalque").style.visibility="hidden";
}
</script>
</head>
<body onLoad="init()">
<p>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla<br/>
<div id="monCalque"
style="position:absolute;background:#00AA11;
left:100px;top:50px;width:100px;height:100px;
visibility:visible">calque
</div>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla<br/>
blabla blabla blabla blabla blabla blabla
</p>
</body>
</html>
Thierry Lecroq (Univ. Rouen)
DHTML
8 / 10
<html>
<head>
<title>DHTML : technique de mouvement de l’élément div</title>
<script type="text/javascript">
var x=10, y=10, dx=2, dy=4, dim=100;
var delai=20;
function startBallon() {
window.setInterval("bougeBallon()", delai);
}
function bougeBallon() {
if ((x+dx >(window.innerWidth-dim)) || (x+dx<0))
dx= -dx;
if( (y+dy >(window.innerHeight-dim)) || (y+dy<0))
dy= -dy;
x += dx; y += dy;
document.getElementById("monBallon").style.left=x;
document.getElementById("monBallon").style.top=y;
}
</script>
</head>
<body onload="startBallon();">
<h2>DHTML : technique de mouvement de l’élément div</h2>
<p>
<script language="JavaScript">
for(var i=0; i<20; ++i)
document.writeln("blabla blabla balabla<br/>");
</script>
</p>
<div id="monBallon" style="position: absolute;
left: 10px; top: 10px; visibility: visible">
<img src="ballon.jpg" width="100" height="100" border="0">
</div>
</body>
</html>
Thierry Lecroq (Univ. Rouen)
DHTML
9 / 10
Sources
Didier Ferment
Supports de cours
http://www.u-picardie.fr/~ferment/indexcours.html
Thierry Lecroq (Univ. Rouen)
DHTML
10 / 10
