Leçon 2 : Dynamique HTML et JavaScript

La Théorie

Par analogie, nous dirons que les applications DHTML que vous aurez à développer se "dérouleront" sur un plan de travail et que les éléments que vous manipulerez (ajouter, enlever, déplacer, griffonner, colorier, etc...) seront des feuillets.

Le plan de travail:

La présentation d'une application ne devrait se faire qu'en fonction du client qui la lance.
Il ne vous viendrait pas à l'idée de faire une mprésentation de la même façon selon que vous disposez d'une ardoise et d'une craie blanche ou d'un tableau géant et d'un jeu de feutres de toutes les couleurs.
Il vous faudra donc prendre en considération les caractéristiques du plan de travail dont dispose le client de l'application pour que chacun y puisse trouver une ergonomie digne de ce que permet le DHTML.

On pourra raisonner aussi bien en termes d'échelle ou de nombre d'éléments à présenter simultanément que d'étapes nécessaires à une présentation claire. Un plan de travail surchargé est aussi néfaste qu'une longue série de diapositives affreusement vides d'éléments. Je ne saurai trop vous recommander de réfléchir à ce type de problèmes avec de commencer à coder quoi que ce soit.

Pour vous, le plan de travail sera la fenêtre du navigateur qui sera utilisée par le client. Comme, en général, vous ne pouvez pas préjuger des caractéristiques de cette fenêtre, il faudra les demander au navigateur client, et les transmettre à l'application afin qu'elle en tienne compte dans son comportement.
Dans ce tutorial, nous utiliserons le mot "CADRE" pour désigner ce plan de travail (Ce nom est purement arbitraire et n'a aucune valeur de référence en dehors de ce cours). Nous en ferons un objet interrogeable et paramétrable qui sera accessible à l'identique tant depuis Netscape que de MSIE.

Contrairement à la pratique du HTML classique, il ne sera pas un espace d'écriture séquentiel où chaque élément vient se positionner à la suite du précédent dans l'ordre où il est écrit, mais comme un réel plan de travail sur lequel on peut poser des éléments n'importe où, les déplacer, les enlever, etc...

Cette vision plus libre du CADRE est rendue possible par l'utilisation des feuillets dont je parle en tête de chapitre.

Un feuillet est comme un bout de papier ou un "post-it" que vous pouvez placer, déplacer, enlever ou remettre à volonté sur votre plan de travail. Sur ce feuillet, vous pouvez inscrire du texte bien sûr, mais aussi des images, du son, et faire varier leur contenu à votre guise. Comme nous avons choisi ("Pardon, j'ai choisi!") le mot CADRE pour le plan de travail, nous utiliserons le mot FEUILLET pour désigner les feuillets.

La Pratique

LE CADRE

Je vous propose de créer un Objet "Cadre" à partir d'une classe "LE_CADRE" qui aura des propriétés et des méthodes que nous pourrons éventuellement enrichir plus tard.
Cet Objet aura la structure suivante:

Nom de la classe : LE_CADRE
Propriétés : largeur, hauteur, haut, gauche (haut sera en pixels la position de CADRE par rapport au bord haut de l'écran, et gauche, sa position par rapport au bord gauche de l'écran.)
Méthodes : etirer, reduire

Pour créer cette classe nous allons utiliser l'objet qui est au sommet de la hiérarchie des objets natifs de JavaScript: Il s'agit de l'objet window.

Justification

Mais pourquoi vouloir créer LE_CADRE alors que l'objet window existe déjà?
- Comme nous l'avons souligné dans les chapitres précédents, l'intérêt d'une bonne application en DHTML est qu'elle fonctionne aussi bien sur tous les navigateurs. Hors, l'objet window ne possède pas les mêmes propriétés, méthodes ou événements selon qu'il s'agit de Netscape ou de MSIE. Avec LE_CADRE, nous pourrons avoir des objets reconnaissables par chacun d'eux.

Pour commencer, voyons les différentes propriétés de l'objet window qu'offrent Netscape et MSIE.
Je vous donne ici un petit programme utile qui vous listera l'ensemble des propriétés d'un objet:


<HTML>
<HEAD>
<SCRIPT language="JavaScript">

function proprietes(nom, objet)
{
  var lobjet="" + nom;
  var propriete="";
  for (var i in objet)
	{
	  propriete=propriete + i + "=" + objet[i] + "\n";
	}
  alert("Propriétés de " + lobjet + ":\n"+ propriete );
}

</SCRIPT>

 <BODY>

  <FORM NAME="Formulaire">
    Nom de l'objet JavaScript :<BR>
    <input type="text"  NAME="NomProp"><BR><BR>
    <INPUT TYPE="button" value="Propriétés"
       onclick='javascript:eval("proprietes(\""+
       window.document.Formulaire.NomProp.value + 
       "\"," + window.document.Formulaire.NomProp.value + ");")'
       >

  </FORM>


 </BODY>

</HTML>

En soumettant l'objet window à ce petit outil, voici ce que nous obtenons avec Netscape Navigator 4.5

Si nous faisons la même chose avec MSIE 5.0, nous obtenons la réponse suivante:

Comme nous pouvons le constater, bien qu'un objet window existe pour les deux navigateurs, nous ne pouvons le considérer comme le même objet. Trop de propriétés sont différentes ou recouvrent des significations sans rapport d'un navigateur à l'autre.

En fait, cette justification d'écriture de notre objet Cadre vaut, dans le principe, pour tous (ou presque) les objets que nous aurons à manipuler. Pour les objets qui suivent dans ce tutorial, je ne ferai plus cette démonstration. Il vous incombera soit d'admettre le bien fondé des objets ainsi créés sur ma bonne foi ou de le vérifier par vous-même avec les outils que je vous ai donnés plus haut.

Réalisation

Mais revenons en à la création de notre Objet Cadre.

Depuis JavaScript 1.2, il existe deux façons de créer un Objet:

La première consiste à déclarer et initialiser un Objet en même temps. Par exemple:
```
      Cadre = {largeur:500, hauteur:300, haut:120, gauche:50};
```
Cette méthode est la plus simple, mais elle comporte un inconvénient majeur. Elle ne permet pas de créer plusieurs instances d'un Objet; c'est-à-dire que si j'ai besoin d'un autre cadre, je devrai tout ressaisir de la façon suivante
```
      autreCadre={largeur:424, hauteur:300, haut:120, gauche:500};
```
Ce qui peut s'avérer vite fastidieux quand on a plusieurs objets.
La deuxième méthode consiste à utiliser un prototype (La notion de CLASSE n'existe pas en JavaScript) et un constructeur. Elle permet la création de plusieurs instances d'un Objet en réutilisant son prototype. Le prototype est une fonction qui aura pour nom, le nom de l'Objet et pour paramètres, les propriétés de l'objet. Par exemple:
```
         function LE_CADRE(n,lg,ht,h,g)
          {
            this.largeur = lg;
            this.hauteur = ht;
            this.haut = h;
            this.gauche = g;
          }
```
Et, pour instancier les objets cadre et autreCadre avec le prototype LE_CADRE, il suffira d'utiliser le constructeur "new" en passant les valeurs des propriétés:
```
         cadre = new LE_CADRE(500,300,120,50);
         autreCadre = new LE_CADRE(424,300,120,500);
```
Pour des objets plus complexes, il est possible de raffiner le prototype en en faisant une somme de plusieurs prototypes. C'est-à-dire que, pour LE_CADRE, nous pourrons avoir deux prototypes : DIMENSIONS et POSITIONS.
```
         function DIMENSIONS(lg,ht)
          {
             this.largeur = lg;
             this.hauteur = ht;
          }

         function POSITIONS(h,g);
          {
             this.haut = h;
             this.gauche = g;
          }

         function LE_CADRE(p_dimension,p_position)
          {
             this.dimension = p_dimension;
             this.position = p_position;
          }
```
Maintenant que nous savons comment créer notre objet cadre, comment trouver les valeurs des propriétés pour les lui donner?
"Et ça commence ! Netscape et MSIE ne fonr pas la même chose !"

Pour les dimensions:
Avec Netscape, nous avons vu plus haut que l'Objet window possédait les propriétés innerWidth et innerHeight.Nous écrirons donc:
```
   lg=window.innerWidth;
   ht=window.innerHeight;
```
Alors qu'avec MSIE, il faut passer par "document.body.clientWidth" et "document.body.clientHeight". Ce qui nous donne:
```
   lg=document.body.clientWidth;
   ht=document.body.clientHeight;
```
Pour Netscape :

Pour MSIE :

Pour Netscape, il faut enlever 15 à la largeur et à la hauteur pour supprimer la valeur des ascenseurs.

Pour la position:
Avec Netscape nous utiliserons les propriétés de window screenX et screenY, alors qu'avec MSIE ce sera screenLeft et screenTop.

Pour Netscape :

Mais comme avec les ascenseurs, Netscape considère toute la fenêtre du client (Menus,barres d'outils, etc...) Il conviendra donc de rajouter 132 pour obtenir les coordonnées de la surface utile.

Pour MSIE :

En faisant la synthèse de ce que nous avons vu jusqu'à présent on peut désormais créer (instancier) un objet "cadre" qui représentera le plan de travail sur le navigateur du client.

Voici une solution générique:


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

         function Dimensions(lg,ht)
          {
             this.largeur = lg;
             this.hauteur = ht;
          }

         function Positions(h,g)
          {
             this.haut = h;
             this.gauche = g;
          }

         function LE_CADRE(dimension,position)
          {
             this.dimension = dimension;
             this.position = position;
          }
 

</script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
  var lg;   //largeur du cadre
  var ht;   //hauteur du cadre
  var h;    //position bord haut
  var g;    //position bord gauche

  Netscape = (document.layers)? true:false;
  MSIE = (document.all)?true:false;

           if(Netscape)
             {
                lg = window.innerWidth - 15;
                ht = window.innerHeight - 132;
                h  = window.screenX;
                g  = window.screenY;
             }
           if(MSIE)
             {
                lg = document.body.clientWidth;
                ht = document.body.clientHeight;
                h  = window.screenLeft;
                g  = window.screenTop;
             }
          
              dimension = new Dimensions(lg,ht);
              position  = new Positions(h,g);
              cadre = new LE_CADRE(dimension,position);


   //pour accéder aux propriétés de cadre
              message0 = "dimensions ="+ cadre.dimension.largeur + 
                        "x" + cadre.dimension.hauteur+"\n et";
              message = message0 + "\nposition = "+ cadre.position.haut 
                         + "x" + cadre.position.gauche;
              alert(message);

</SCRIPT>
</BODY>
</HTML>

Pour le tester ou le télécharger cliquez

LES FEUILLETS

Je vous propose de créer un Objet "feuillet" à partir d'un prototype "LE_FEUILLET" qui aura des propriétés que nous pourrons éventuellement enrichir plus tard.
Cet Objet aura la structure suivante:

Nom du prototype : LE_FEUILLET
Propriétés : NOM,DIMENSIONS,POSITIONS,DECORATION(chaque feuillet aura un NOM, DECORATION sera un objet fixant les couleurs de fond et de caractéres.)
Méthodes : redimensionner,cacher,montrer,déplacer,mouvoir

Nous allons tenter d'écrire LE_FEUILLET comme nous l'avons fait pour LE_CADRE:

         function DIMENSIONS(lg,ht)
          {
             this.largeur = lg;
             this.hauteur = ht;
          }

         function POSITIONS(h,g);
          {
             this.haut = h;
             this.gauche = g;
          }

         function DECORATIONS(fd,ltr);
          {
             this.fond = fd;
             this.lettres = ltr;
          }


         function LE_FEUILLET(p_nom,p_dimension,p_position,p_decoration)
          {
             this.nom = p_nom;
             this.dimension = p_dimension;
             this.position = p_position;
             this.decoration = p_decoration;
          }