www.infkoffler.com - Site de cours d'informatique

Accueil

Java Standard Edition

Java EE 5

Visual Basic .Net 2005

Cours Javascript - DOM - DHTML

Nouveautés sur le site

Contacts

Accueil > Cours Javascript - DOM - DHTML > Cours Javascript - DOM - DHTML

____________________________________________________________________________________________________

Connexion

JAVASCRIPT - DOM - DHTML

I)Javascript - Généralités

Le langage javascript est un langage de programmation( un vrai langage de programmation). Il s’exécute sur l’ordinateur du client, c’est-à-dire sur l’ordinateur de l’internaute. C’est le navigateur lui-même qui exécute Javascript( la preuve c’est qu’on peut désactiver l’exécution du javascript sur les navigateurs).

Le javascript a été créé en septembre 95 par Netscape, et s’est appelé « javascript » en décembre 95, après que netscape ait eu l’accord de Sun. On rappelle que Netscape est la société des navigateurs Mozilla.
Le langage javascript n’est pas un langage orienté objet, mais il s’appuie tout de même sur des concepts objets, comme vbscript par exemple. Javascript est un langage fondé sur les objets.

I.2)Erreurs dans l’affichage de la page

Lorsqu’une erreur se produit lorsqu’on demande une page html contenant du javaScript( une erreur dûe à votre code Javascript, bien entendu), il y a possibilité d’avoir des infos sur l’erreur. Par exemple sous internet explorer 6, en cas d’erreur, il affiche un petit triangle jaune avec un point d’exclamation, en bas à gauche, à la gauche de « terminé ». Il suffit alors de double-cliquer à cet endroit pour faire s’afficher une fenêtre donnant une explication sur l’erreur, ainsi que le numéro de la ligne où elle a eu lieu.

II)Inclusion du code Javascript dans la page html

Il y a deux façons d’inclure le Javascript dans la page html. Soit l’inclure directement avec le html, en utilisant des balises <script>, soit vous mettez le javascript dans un fichier externe.

II.a) Inclusion avec la balise <script>

C’est la façon la plus classique d’utiliser Javascript. Le code Javascript est placé entre les balises <script> et </script>.

On précise que le langage est javascript grâce à l’attribut type :
<script type= «text/JavaScript»>
   window.alert( ‘Bonjour à tous‘ ) ; //ATTENTION mettre des simples quotes( des doubles provoquent une erreur)
</script>

Ancienne méthode utilisée : l’attribut ‘language’
<script language= «JavaScript» >
   window.alert( ‘Bonjour à tous‘ ) ;
</script>

On peut faire les deux( c’est ce qu’on retrouve le plus souvent) :
<script language= «JavaScript» type= «text/JavaScript»>
   window.alert( ‘Bonjour à tous’ ) ;
</script>

II.b) Utilisation d’un fichier JavaScript externe

Exemple : fichier testJs.html( qui se trouve sur le serveur web)
«
<script language = "JavaScript" type = "text/JavaScript" src="ficJs.js">
</script>
»

Et fichier ficJs.js( qui se trouve aussi sur le serveur web, dans le même répertoire) :
«
window.alert('On est dans le fichier ficJs');
»

II.c) Pseudo-URL

<a href = "JavaScript: window.alert('Pseudo-URL!');
window.alert('Deuxième ligne js!')">Voici un lien</a>

En exécutant, on voit un lien classique. Quand on clique sur le lien, le code javascript est exécuté( ici deux lignes javascript). L’idée du lien est donc gardée, car il y a bien un lien qui s’affiche, et en cliquant sur le lien, il y a bien exécution de quelque chose( au lieu d’exécuter une page, on exécute du code javascript ici).

Remarque : si vous faites
«
(…)
<script language = "JavaScript" type = "text/JavaScript" >
   function test()
   {
return 5;
   }
</script>
(…)
<a href = "JavaScript: test( );">Voici un lien</a>
»
En cliquant sur le lien, la valeur de retour de la fonction s’affiche. Ce qui a tout de même une logique, car le navigateur ne fait que remplacer « test( ) ; » par ce qu’il vaut, c’est-à-dire 5.

On peut résoudre le problème en utilisant une astuce : on utilise la fonction void( ) qui ne fait rien !

«
<a href = "JavaScript: void(test( ));">Voici un lien</a>
»

On appelle donc la fonction void avec, comme paramètre, la valeur 5 ! Comme cette fonction ne retourne rien, il n’y a aucun affichage. Cette fonction, bien entendu, ne fait aucun travail.

II.d) Exécution évènementielle de JavaScript

On peut faire exécuter du code Javascript lorsqu’un événement se produit. Prenons par exemple l’événement onload, qui est déclenché juste après que le chargement de la page s’est terminé, donc au début.

Exemple :
«
<body onload = "test();">
(…)
</body>
» exécute au tout début la fonction test( ).

Remarque : le code javascript est directement placé entre les guillemets, on ne met pas «Javascript : » comme pour les pseudo-url( car ici, il ne peut pas y avoir d’ambiguïté, il ne peut s’agir que de code javascript, alors que pour le cas de la pseudo-url, il aurait pu s’agir d'une vrai url.

III)Les navigateurs sans javascript

Il existe des navigateurs qui ne savent pas exécuter javascript, comme Lynx par exemple, navigateur en mode console le plus populaire sous Linux. C’est un navigateur en mode texte, et qui ne sait pas exécuter du Javascript.
Il y a aussi des personnes dont le javascript a été désactivé dans le navigateur, car ce sont des ordinateurs d’entreprises, par exemple.

Il y a donc nécessité que le site puisse fonctionner également sur ces navigateurs qui sont sans javascript.

III.A) La balise <noscript>

La balise <noscript>> est exécutée uniquement si le navigateur n’a pas javascript. Elle contient du html.

Les navigateurs qui ne possèdent pas javascript comprennent tout-de-même la balise <script>, et ils ignorent ce qu’il y a dedans. Les balises <script> pour le langage javascript ne gênent donc pas pour ces navigateurs.

Exemple :

<script language = "JavaScript" type = "text/JavaScript" >
document.write(‘Vous avez un navigateur qui execute javascript’);
</script>
<noscript>
Votre navigateur n’exécute pas javascript
</noscript>

Bien entendu, dans le cas d’un navigateur qui exécute javascript, il n’exécutera pas le html de la balise <noscript>

IV)La programmation orientée objet en javascript

Comme nous l’avons dit précédemment, Javascript est un langage fondé sur les objets, mais n’est pas un langage orienté objet.

IV.A) Les classes

   En javascript, une classe se présente sous la forme d’une fonction. La différence est que la « fonction » ne sera pas appelée comme une fonction classique, mais sera utilisée avec un new.
   La syntaxe des fonctions, et le mot-clé « function » sont donc utilisés ici dans un sens complètement différent. On profite d’un mot-clé et d’une syntaxe déjà existants et on sait qu’il n’y aura pas d’ambiguïté avec une fonction car l’appel sera différent( au moment de l’appel, on saura que ce qui est appelé est une classe ou une fonction, d’après la manière dont l’appel est fait).

   Une autre façon de voir les choses, et certainement la plus juste, est de dire que cette fonction est le constructeur de la classe, et d’ailleurs elle est appelée comme un constructeur, lorqu’un new est fait. Donc on déclare juste le constructeur d’une classe. Les attributs et les méthodes de la classe ne sont pas déclarés, mais sont déduits automatiquement d’après leur utilisation dans le constructeur. Et pour les méthodes, il faut ajouter dans le constructeur : this.nomMethode = nomFonction, c’est la manière de déclarer que nomFonction est la méthode nomMethode de la classe. Pour les attributs, si vous voulez les déclarer et que ce système vous force à mettre une valeur dedans, mettez une valeur d’initialisation, profitez-en pour les initialiser.

Les déclarations de classes peuvent être mis, par exemple, dans une balise script se trouvant dans la partie <head> de la page html.

Exemple complet :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Ma page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language = "JavaScript" type = "text/JavaScript" >
   function voiture()
   {
window.alert(‘Vous êtes dans le constructeur’);
this.marque = "";
this.modele = "";
this.nomPropri = "";
this.age = 0;

//déclaration des méthodes
this.affAttributs = affAttr ;

function affAttr() {
   window.alert( 'Marque: ' + this.marque + '\n' + // \n: séquence d'échappement pour fin de ligne. \r retour chariot
'Modele: ' + this.modele + '\n' +
      'nom Propriétaire: ' + this.nomPropri + '\n' +
'Age: ' + this.age
   );
   }
}
</script>
</head>
<body>
<script language = "JavaScript" type = "text/JavaScript" >
   voit_jean = new voiture();
   voit_jean.marque = 'Renault';
   voit_jean.modele = 'Megane';
   voit_jean.nomPropri = 'Durant';
   voit_jean.age = 2;
   voit_jean.affAttributs();
</script>

</body>
</html>

FIN EXEMPLE

Dans cet exemple, dans la déclaration de la « classe », pour la déclaration de méthode, on constate qu’on a fait :

this.affAttributs = affAttr;

On ne met pas de parenthèses( affAttr( ) ), sinon ca marche pas. C'est logique, car il ne s'agit pas d'un appel! Sinon, il y aurait ambiguïté, et on croit que vous voulez appeler affAttr, et mettre le résultat de la fonction( ici une fonction qui ne retourne rien), dans this.affAttributs(eh oui, à ce moment-là, on ne peut pas savoir qu'il s'agit forcément d'une méthode).

Remarque : on accède aux propriétés et méthodes de l’objet avec le point « . » ( exemple voit_jean.marque), comme en java ou en c# .net, ce n’est pas une -> comme en c++ ou php. Javascript porte ici bien son nom !(java-script).

IV.A.2) Une deuxième façon de créer un objet : sans avoir de classe

La première façon de créer un objet, que nous venons de voir, est de créer l’équivalent d’une classe. Il existe une autre manière de créer un objet, sans posséder de classe.

Exemple, ajout dans notre script précédent :

<script language = "JavaScript" type = "text/JavaScript" >
   voit_jean = new voiture();
   voit_jean.marque = 'Renault';
   voit_jean.modele = 'Megane';
   voit_jean.nomPropri = 'Durant';
   voit_jean.age = 2;
   voit_jean.affAttributs();

   //déclaration d'un objet pierre, sans utiliser la "classe" voiture
   voit_pierre = new Object();
   voit_pierre.marque = 'Peugeot';
   voit_pierre.modele = '206';
   voit_pierre.nomPropri = 'Dupont';
   voit_pierre.age = 4;
   voit_pierre.affAttributs = function affAttr() {
window.alert( 'Marque: ' + this.marque + '\n' +
   'Modele: ' + this.modele + '\n' +
   'nom Propriétaire: ' + this.nomPropri + '\n' +
   'Age: ' + this.age
);
   }

//on utilise l'objet voit_pierre
   voit_pierre.affAttributs();
</script>

On crée une instance de la classe Object. Cette instance est voit_pierre ici. On initialise directement les propriétés, et de là, Javascript va déduire que cet objet possède ces propriétés ! Pour déclarer une méthode, c’est intuitif. Il suffit de faire voit_pierre.affAttributs = function affAttr() { (... la méthode, qui utilise, comme d’habitude, des this.qqchose) }

Cette deuxième façon ne déclare pas de classe. Elle ne permet donc pas de réutiliser la classe de l’objet( ici l’objet voit_pierre).

IV.A.2.a) Remarque sur la syntaxe simplifiée pour cet objet créé sans classe, et sur les syntaxes simplifiées en général( y compris dans les autres langages à syntaxe simplifiée).

Au sujet de cette deuxième façon de créer notre objet, il est clair qu’on est ici dans une syntaxe simplifiée, qui est faite pour allèger le développement( aussi bien en création qu’en maintenance).
La syntaxe est simplifiée de manière générale en Javascript. On ne déclare pas les types dans les déclarations de variables( var), et on n’est pas obligé de déclarer les variables. De plus, on ne déclare pas le type des paramètres dans les déclarations de fonctions, juste le nom des paramètres( de même pour le type de la valeur de retour de la fonction, qui n’est pas déclaré).
Les types des variables sont déduits à la première utilisation de ces variables. Et s’il n’y a pas de déclaration d’une variable, à la première utilisation, javascript déduit qu’on déclare en même temps cette variable.
Tout est fait pour ne pas « polluer », compliquer le programme avec des types dans le programme, aussi bien pour les variables, que pour les paramètres des fonctions. Le programme est censé devenir plus facile à écrire, et plus lisible.
D’un point de vue théorique, essayons de prouver que le système tient pour les variables. Il est clair que, de toutes les manières, une variable est faite pour être utilisée. Donc le système d’induire les déclarations de variables, de la première utilisation de cette variable, est correct. Car on ne risque pas de louper des déclarations de variables, car toute variable est utilisée au moins une fois.
Une autre question se pose : peut-on déduire systématiquement le type d’une variable ? La réponse est oui. En effet, toute variable d’un programme doit être initialisée avant d’être utilisée, d’ailleurs les récents compilateurs des langages orientés objets considèrent le manquement à cette règle comme une erreur de compilation. Comme on est certain d’avoir une initialisation, on peut déduire le type de la variable à partir de la valeur qui a été mise dans la variable. Il est par exemple aisé de reconnaître que le type est une string, si on met une valeur littérale entre guillemets dans cette variable. On ne va pas aller dans le détails des interrogations sur l’ambiguïté éventuelle d’une déduction d’un type en fonction de la valeur, par exemple pour les valeurs numériques. Mais dans ce cas, il y a des solutions pour s’en sortir, qui sont utilisées dans d’autres langages, comme préfixer la valeur numérique avec un indicateur pour préciser le type, par exemple un flottant simple ou un entier, ou encore un entier long. On vient donc de prouver que ce système de non déclaration des types des variables, et de non déclaration( éventuelle) des variables est un système qui tient la route.
Une question peut encore se poser : un type « interne » est-il réellement rattaché à chaque variable( et à chaque paramètre) ? La réponse est oui. En effet, toute variable est stockée en mémoire. Or javascript doit savoir quelle taille prend la variable en mémoire( en octets), or cette taille n’est pas la même suivant le type de la variable. D’autres raisons viennent s’ajouter à cela, dont nous ne parlerons pas ici. On peut noter qu’en VBscript( qui est un langage à syntaxe simplifiée), il y a une notion de sous-type qui existe, et qui correspond au type interne de la variable. Tout ceci nous prouve qu’un langage à syntaxe simplifiée rattache forcément un type interne à toute variable et à tout paramètre.

Bien sûr, le développement est d'avantage sujet à des risques d’erreurs, il est moins sûr. Mais étant donné le contexte de la programmation, qui est de la programmation web, c’est acceptable. C’est un choix qui est fait. Ce choix de syntaxe simplifiée est fait dans d’autres langages de programmation web, comme php ou vbscript. Ce sont ce que j’appelle des langages de programmation à syntaxe simplifiée.
Un autre inconvénient est que le langage, étant souple du point de vue déclaratif, il est plus difficile de retrouver, de manière logique, les syntaxes autorisées par le langage ou pas. Car la syntaxe est moins prévisible et logique que les syntaxes traditionnelles complètement déclaratives( comme en java, etc). Ceci nuit, au final, à la simplicité du langage et de la syntaxe, ce qui était, pourtant, l’objectif recherché !

IV.B) Qu’en est-il des modificateurs d’accès ?

Les modificateurs d’accès( private, public, etc) n’existent pas en javascript. Cependant, il existe un équivalent à private, qui permet d’avoir des propriétés et méthodes privées.
D’abord remarquons que la classe que nous avons écrite ci-dessus, possède toutes ses propriétés et méthodes en public.
Pour obtenir l’équivalent de private, il ne faut pas utiliser «this.», dans le constructeur de la classe, pour parler des attributs et méthodes. C’est-à-dire, par exemple écrire attribPrive = 1 ; ou var attribPrive = 1, dans le constructeur. Ces attributs seront alors inaccessibles de l’extérieur de la classe. Attention, je parle uniquement ici de lignes du constructeur de la classe. Bien entendu, une ligne attribPrive = 1( ou var attribPrive = 1) qui se trouverait dans une méthode, ne serait pas pris comme un attribut, mais comme une variable locale à cette méthode.

IV.B.2) Remarque sur la syntaxe simplifiée

On remarque qu’en javascript, attrib = 1 et this.attrib = 1, dans un constructeur, a un sens différent. Ce qui n’est absolument pas le cas d’habitude dans les langages de programmation classiques, comme java ou c# .net. La simplification de la syntaxe, ici, a un effet pervers, car on donne une signification particulière à une syntaxe qui, d’habitude, a une autre signification. Le programmeur habitué à java( par exemple), ne se doutera jamais que attrib = 1 puisse avoir un autre sens que this.attrib = 1, à moins de l’apprendre par quelqu’un. Ceci vient compliquer, à mon avis, le langage, alors que la simplification de la syntaxe est faite à l’origine pour simplifier les choses. Ceci rend le langage spécifique, au lieu d’avoir la syntaxe commune de la majorité des langages. Tout ceci ne va pas du tout dans le sens de la facilité d’apprentissage du langage, donc , encore une fois, ceci va à l’encontre de l’objectif initial de simplification.

IV.C) Qu’en est-il de l’héritage ?

L’héritage n’existe pas en javascript. Cependant il existe un équivalent. Chaque classe possède une propriété nommée « prototype », qui est capable de contenir un objet. Cet objet sert de modèle pour définir à javascript comment est la classe mère de l’objet. En quelques sortes, on lui donne un exemple d’objet de la classe de la classe mère. On peut considérer que cette propriété prototype est un attribut statique, pour diverses raisons. D’abord parce que la valeur est commune à toutes les instances de cette classe. Ensuite parce que pour définir la propriété, on écrit nom_classe.prototype = objet_exemple.

Par exemple, supposons une classe mère Vehicule. Nous voulons une classe voiture qui hérite de cette classe Vehicule, c’est à dire qui ait tous les attributs et méthodes de la classe Vehicule( en plus des siens). Il suffit simplement de déclarer notre classe voiture comme d’habitude, puis d’ajouter this.prototype = new Vehicule( ) ;

Remarque : le constructeur de la classe mère n’est pas hérité.

Exemple complet :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Ma page</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />

<script language = "JavaScript" type = "text/JavaScript" >
   function Vehicule()
   {
window.alert('Vous êtes dans le constructeur');
this.marque = "";
this.modele = "";
this.nomPropri = "";
this.age = 0;

//déclaration des méthodes
this.affAttributs = affAttr; //ne pas mettre de parenthèses( affAttr( ) ), sinon ca marche pas. C'est logique, car il
   //ne s'agit pas d'un appel! Sinon, il y aurait ambiguïté, et on croit que vous voulez appeler affAttr,
   //et mettre le résultat de la fonction( ici une fonction qui ne retourne rien), dans this.affAttributs (eh oui,
   //à ce moment-là, on ne peut pas savoir qu'il s'agit forcément d'une méthode).

function affAttr() {
      window.alert( 'Marque: ' + this.marque + '\n' + // \n: séquence d'échappement pour fin de ligne. \r retour chariot
'Modele: ' + this.modele + '\n' +
'nom Propriétaire: ' + this.nomPropri + '\n' +
'Age: ' + this.age

   );
   }
   }

   function Camion()
   {
this.poids = 0; //spécifique aux camions. Poids en tonnes
this.getPoids = fGetPoids;

function fGetPoids() {
   window.alert( 'Poids camion: ' + this.poids );
}
   }
</script>
</head>
<body>
<script language = "JavaScript" type = "text/JavaScript" >
   Camion.prototype = new Vehicule();
   camion_paul = new Camion();
   camion_paul.marque = 'Renault';
   camion_paul.modele = 'modele machin';
   camion_paul.age = 5;
   camion_paul.nomPropri = 'Martin';
   // propriétés spécifiques à la classe Camion
   camion_paul.poids = 10;
   camion_paul.affAttributs();
   camion_paul.getPoids();
</script>

</body>
</html>

FIN EXEMPLE

   On remarque bien que toutes les instances de la classe Camion auront pour classe mère la classe Vehicule.

Remarque : avec ce système de la propriété multiple, on arrive donc à un équivalent de l’héritage simple( on ne peut pas faire de l’héritage multiple car la propriété prototype permet de définir une seule classe mère !). Et ne croyez pas qu’on peut faire de l’héritage à deux niveaux seulement( c’est-à-dire qu’une classe mère et une classe fille, sans grand-mère ni petite-fille). Car la classe mère possède elle-même une propriété prototype. Et on peut aussi déclarer une classe qui a comme propriété prototype un objet de la classe fille, cette classe serait alors une classe petite-fille !

IV.C.2) Un moyen d’étendre les classes javascript prédéfinies

   La propriété prototype ci-dessus peut avoir aussi un autre intérêt. En effet, elle permet également d’enrichir les classes prédéfinies de javascript( par exemple la classe Date de javascript). Il n’est pas possible de faire cela en POO classique (programmation orientée objet), hormis en touchant au code de la classe. Et comme il peut arriver de ne pas disposer du code de la classe ! Il s’agit donc d’une possibilité intéressante, au moins par son originalité.

Attention : ne pas confondre une classe javascript prédéfinie( exemple Date), et un objet javascript prédéfini( exemple Window). Ce qu’il est possible de faire ici l’est, bien entendu, uniquement avec les classes prédéfinies.

EXEMPLE

<script language = "JavaScript" type = "text/JavaScript" >
   function fAlertBonjour( ) {
   //Cette fonction affiche une fenêtre d'alerte avec "Bonjour" comme message
window.alert( 'Bonjour')
   }
</script>

<script language = "JavaScript" type = "text/JavaScript" >

   if (Date.prototype == null) { //on constatera en exécutant que prototype ici n'est pas null( donc il y a une classe mère)
   //N'ARRIVE PAS, CE CODE N'EST JAMAIS EXECUTé
window.alert ( "valeur null");
Date.prototype = new Object();
   }
   Date.prototype.alertBonjour = fAlertBonjour;
   maDate = new Date();
   maDate.alertBonjour();
</script>

FIN EXEMPLE

Cet exemple ajoute une méthode à la classe prédéfinie Date.

V) DOM ( Document Object Model)

V.A) Définition

Qu’est-ce que DOM ? DOM est une interface qui permet à des langages( comme le javascript par exemple) d’accéder à la page html courante, et de la manipuler comme on le souhaite.
La définition de W3C est la suivante :
“The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. (…)”.
DOM nous permet donc, d’après cette définition, d’accéder et de modifier dynamiquement le contenu du document, sa structure et le style.

DOM signifie Document Object Model, c’est-à-dire modèle objet de document. On parle ici de document web, c’est à dire de page html(et de la page html courante, celle dans laquelle vous vous trouvez). DOM est donc une modélisation de votre page html. C’est à dire qu’on vous fournit un objet( qui s’appelle « document ») qui représente votre page html. La page a donc été modélisée, et cet objet « document » possède, par exemple, des méthodes d’accès au contenu de la page html. J’ai dit que DOM est « une » modélisation de votre page html, parce qu’il n’y a pas qu’une seule façon de modéliser un objet. Et bien DOM est une de ces façons!

A noter que DOM est reconnu par W3C( World Wide Web Consortium). W3C est un organisme de standardisation qui définit des standards concernant le web.

Plus concrètement, DOM fournit donc un objet, appelé « document », qui représente la page html courante. De plus, DOM fournit une API( Application Programming Interface), qui permet d’effectuer des actions sur ce document( et notamment lire son contenu).

VI) DHTML( Dynamic HyperText Markup Language)

DHTML n’est pas une norme, c’est un terme marketing. DHTML ne fait pas partie des standards de W3C.
DHTML est un ensemble de technologies internet, et c’est tout, ça n’est pas un langage en lui-même. L’objectif est de permettre d’obtenir des pages web qui aient une interactivité plus grande avec l’internaute.

Les technologies regroupées sont :
- HTML
- CSS
- DOM(Document Objet Model)
- Javascript
- Eventuellement VBScript

RETOUR HAUT