|
|
 |
 |
 |
|
 |
|
 |
|
|
|
|
|
1.
Qu'est ce que le DHTML ?
Le Dynamic HTML est une extension du HTML
qui, associée au javascript et aux
feuilles de styles, permet de manipuler dynamiquement
des éléments HTML sur une page.
Le DHTML sans javascript ne sera jamais dynamique.
C'est bien l'association avec le javascript
qui lui donne vie.
La manipulation de ces éléments
porte sur leur position, leur dimension, leur
visibilité et leur style d'affichage
(police, attributs de police, couleurs).
Le mot dynamique de dynamic HTML signifie
que les modifications peuvent se faire une
fois que la page a fini de se charger, ce
que ne permet pas le HTML classique.
En HTML pur, une fois la page chargée
et affichée, il n'est plus possible
d'afficher de nouveaux éléments
ou de les déplacer. |
 |
2.
La combinaison de 3 technologies
On peut affirmer que le DHTML est une combinaison
de feuilles de styles (CSS),
de scripts (JavaScript
pour la plupart) et d'objets
(Le Document Object Model).
a ) Les Feuilles de Styles
Appelées aussi CSS (Cascading Style
Sheets). Intégrées par Microsoft
avec I.Explorer 3.0 et Netscape depuis la
version 4.0 de son navigateur, celles-ci
permettent de modifier dynamiquement les
informations de mise en forme du contenu
d'un document HTML par l'intermédiaire,
en autre, de Javascript.
b ) Les Scripts
Introduit par Netscape avec la version 2.0
de son navigateur, JavaScript (appelé
LiveScript au début) est devenu incontournable
lors de la création d'un site Web
interactif. Ce langage de script permet
d'étendre les possibilités
du HTML. De plus, il n'est pas exigeant
en ressources serveur (contrairement aux
cgi par exemple).
VBScript est également un langage
de script mais il appartient à Microsoft
: comme il ne fonctionne qu'avec Internet
Explorer, il est donc très peu utilisé
!
c ) Le DOM
Document Object Model.
Le DOM interprète chaque élément
que constitue votre page Web. Cet élément
est considéré comme un objet.
Ce procédé a été
mis au point par le W3C, afin d'établir
une norme pour assurer une compatibilité
(lors de la lecture d'une page HTML Dynamique)
parfaite entre les deux principaux navigateurs
du marché (I.Explorer et Netscape).
|
|
3.
Problèmes de compatibilité
Le DHTML serait très intéressant
à utiliser si il existait une norme
officielle et suivie par les navigateurs.
A l'heure actuelle, chaque navigateur gère
le DHTML à sa façon.
Ainsi, un script écrit pour un navigateur
ne fonctionnera pas sur un autre sans un travail
d'adaptation.
Au final, 3 versions sont nécessaires
pour assurer la compatibilité avec
tous les navigateurs possibles :
Une version pour Internet Explorer 4,
Une pour Netscape 4,
Et une qui respecte la norme pour Netscape
6 et Internet Explorer 5. |
|
4.
Reconnaissance des navigateurs
A cause de toutes les incompatibilités,
il est indispensable de savoir reconnaître
le navigateur du visiteur pour qu'il exécute
la bonne partie de script, celle qui va fonctionner
et qui ne va pas retourner d'erreur.
Pour reconnaître les navigateurs qui
respectent la norme officielle HTML, il suffit
de tester si la fonction getElementById
est reconnue :
if (document.getElementById)
{
// Navigateur qui supporte
DHTML officiel
}
Ici, si la fonction existe, le test est
vrai.
De la même manière, pour tester
Netscape de version 4.X, on utilise ce code
:
if (document.layers)
{
// Navigateur Netscape
4.X
}
Ici l'objet layers est propre à
Netscape 4.X. Ce test est vrai uniquement
avec ce navigateur.
Pour reconnaître Internet Explorer
4, on utilise ce test :
if ((document.all)&&(!document.getElementById))
{
// Navigateur IE 4
uniquement
}
Ici, all est un objet propre à Internet
Explorer. Pour être sûr de ne
pas détecter IE5 aussi, on vérifie
en plus que la fonction getElementById n'est
pas supportée.
Il peut être aussi utile de reconnaître
les navigateurs qui ne supportent aucune
des versions du DHTML.
Le plus simple est d'écrire :
if ((!document.layers)&&(!document.all)&&(!document.getElementById))
{
// Navigateur trop
ancien !
}
|
|
|
| |
   |
| |
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
