III Les notions de langages objets

Pour líinstant, le javascript ne paraît pas très différent díautres langages et ne donne pas líimpression díoffrir de fonctionnalités plus intéressantes.

La gestion des événements et des objets en est une principale.

III.1 Les événements

La gestion des événements est une particularité de ce langage, il va permettre díajouter du dynamisme à vos pages.

a. Intérêt

Dans des langages comme le PHP, la ´ seule Ş interaction possible avec líutilisateur est le clic de souris qui permet de soumettre un formulaire. Jíomets volontairement des interactions à líenvironnement de líutilisateur (langue, navigateur Ö).

Grâce aux événements, vous allez pouvoir activer des programmes, effectuer des actions et ceci en fonction díune gamme díinteractions engendrée par le comportement de líutilisateur sur votre site beaucoup plus large.

b. Définition et syntaxes

Selon le dictionnaire ´ Petit Robert Ş, un événement est :

´ un fait auquel vient díaboutir une situation Ş.

Líutilisateur effectue une action qui est interceptée par le navigateur client et qui engendre le déclenchement díune partie de code díun programme.

Le plus souvent, les événements sont des actions engendrées par la manipulation de la souris (survol, clic Ö). Ils peuvent aussi être liés au clavier, au chargement díune page Ö

Les événements sont rattachés aux objets de votre page HTML et lorsque ces objets sont manipulés, líinterpréteur javascript intercepte cet événement pour effectuer líaction définie par le programme.

La syntaxe des événements en javascript est précise.

Syntaxe

onEvenement="fonction() ou code javascript"

Les guillemets peuvent être remplacés par les simples cotes (ë sous le chiffre 4 du clavier).

Les événements síinsèrent dans le code html de vos pages web.

La gestion des événements est quelque chose díassez complexe. Le navigateur possède un gestionnaire díévénements qui va travailler sur un objet nommé event. Cet objet propose différents types díévénements qui ont chacun des propriétés particulières. Il existe des ´ raccourcis Ş qui évitent díutiliser cet objet et ces méthodes en les nommant explicitement, ce qui est assez lourd. Par exemple onClick est plus pratique à utiliser.

Attention

Il existe une liste normalisée des événements gérés par les navigateurs. Cette normalisation nía pas été utilisée par Microsoft sur son navigateur Internet Explorer. Certains événements normalisés sont gérés díautres non, díautres sont propres à Microsoft Ö Ceci níest pas fait pour faciliter les choses. Il est malgré tout conseillé de níutiliser que ce qui est général et normalisé sauf si vous décidez de faire des codes différents pour IE et les autres navigateurs.

Il existe 4 grands types díévénements. Ils vont êtres étudiés dans les 4 paragraphes suivants.

c. Les événements liés à la souris

La liste de ces événements est présentée dans le tableau qui suit.

Evénement	Comportement
onClick	Un clic sur un des boutons de la souris
onDblClick	Un double clic sur un des boutons de la souris
onMouseDown	Un bouton de la souris reste enfoncé
onMouseUp	Un bouton de la souris est relaché
onMouseOver	Le curseur de la souris survole une zone
onMouseOut	Le curseur de la souris quitte la zone survolée
onMouseMove	Le curseur de la souris est en mouvement

Ces événements sont associés à un ou plusieurs objets qui sont représentés par une balise HTML (bouton, lien hypertexte Ö). Le tableau suivant indique avec quel type díobjet líévénement peut être associé. Tout cela sera présenté de manière pratique plus loin avec les multiples exemples de codes.

Evénement	Association objet	Correspondance html
onClick	Link, document, formulaire	a, body, input
onDblClick	Link, document, area	a, body, input
onMouseDown	Link, document, formulaire	a, body, input
onMouseUp	Link, document, formulaire	a, body, input
onMouseOver	Link, area	a, area
onMouseOut	Link, area, formulaire	a, area, input
onMouseMove	Pas díobjet particulier

Attention

Une fois de plus Microsoft ne fait pas comme tout le monde. La numérotation des boutons de la souris ne suit pas la norme ce qui est très ennuyeux lors des tests pour déterminer sur quel bouton líutilisateur a appuyé.

Evénement	Norme (netscape, mozilla, opera ...)	Microsoft (Internet Explorer)
Clic gauche	1	1
Clic milieu	2	3
Clic droit	3	2

d. Les événements liés au clavier

La liste de ces événements est présentée dans le tableau qui suit.

Evénement	Comportement
onKeyDown	Une touche du clavier est enfoncée
onKeyUp	Une touche du clavier est relachée
onKeyPress	Une touche du clavier est enfoncée puis relachée

Evénement	Association objet	Correspondance html
onKeyDown	Lien, image, document, form	a, img, body, text, textarea
onKeyUp	Lien, image, document, form	a, img, body, text, textarea
onKeyPress	Lien, image, document, form	a, img, body, text, textarea

e. Les événements liés aux sélections

Il existe des éléments dans vos pages HTML (boutons, frame, Ö) qui peuvent être sélectionnés. Lorsquíils le sont, on parle de focus. La zone active est alors la cible des frappes, clics de souris Ö

A contrario, la zone qui perd le focus se trouve dans un état ´ désélectionné Ş on parle de blur.

La liste de ces événements est présentée dans le tableau qui suit.

Evénement	Comportement
onFocus	La zone rattachée à líévénement est sélectionnée
onBlur	La zone rattachée à líévénement est désélectionnée
onSelect	La zone rattachée à líévénement a été sélectionnée
onDragDrop	Un objet est sélectionné et glissé vers la fenêtre
onMove	La fenêtre active est déplacée
onResize	La fenêtre active est redimensionnée
onSubmit	Le bouton de formulaire de type submit a été pressé
onReset	Le bouton de formulaire de type reset a été pressé

Evénement	Association objet	Correspondance html
onfocus	fenêtre, frame, formulaire	body, frame, input
onBlur	fenêtre, frame, formulaire	body, frame, input
onSelect	formulaire	Input, textarea
onDragDrop	fenêtre, frame	body, frame, frameset
onMove	fenêtre, frame	body, frame, frameset
onResize	fenêtre, frame	body, frame, frameset
onSubmit	formulaire	form
onReset	formulaire	form

Líutilisation de onBlur permet, par exemple, díeffectuer un test après une saisie dans une zone de formulaire.

Remarque

Evitez díutiliser des boîtes de dialogue pour afficher les erreurs car souvent il est difficile de les fermer. Privilégier un affichage dans la zone de saisie par exemple.

f. Les autres événements

Il existe díautres événements liés à un certain nombre díobjet HTML.

La liste de ces événements est présentée dans le tableau qui suit.

Evénement	Comportement
onAbort	Le changement díune image a été arrêtée
onChange	Un élément du formulaire a été modifié
onError	Erreur lors du chargement díune image ou díune fenêtre
onLoad	Le chargement díune image ou díune page est terminé
onUnLoad	La page est remplacée par une autre

Evénement	Association objet	Correspondance html
onAbort	image	img
onChange	formulaire	Input, textarea, select
onError	image, fenêtre, frame	Img, body, frame, frameset
onLoad	image, fenêtre, frame	Img, body, frame, frameset
onUnLoad	fenêtre, frame	body, frame, frameset

g. Exemple

La page HTML suivante permet de tester la validité díun login saisi dans un formulaire. Ce login ne doit pas dépasser la taille de 8 caractères. Il est évidemment possible de limiter la zone de saisie en HTML avec líoption maxlenght mais le javascript va permettre de dynamiser graphiquement cette partie de code HTML.

Code

<HTML>

<HEAD>

function verifie()

{

if(window.document.formu.login.value.length > 8)

{

window.document.formu.login.value="Login limité à 8 caracteres";

window.document.formu.but1.value="Erreur !";

window.document.images[0].src="IMAGE/attention_warning.gif";

}

</script>

</HEAD>

<BODY>

<B>

<BR>

<BR>

</FORM>

</BODY>

</HTML>

Explications

Création díune fonction qui va être associée à líévénement onBlur (désélection) à la ligne 19.

Cette fonction permet lorsque líutilisateur a sélectionné (focus) puis désélectionné (blur) le champ du formulaire de saisi du login de vérifier si ce login ne possède pas plus de 8 caractères.

Ce test síeffectue ligne 6.

Les objets sont le document qui possède un formulaire du nom de formu (voir líattribut name ligne 17). Ce formulaire possède lui même un champ texte du nom de login (voir líattribut name ligne 19). Cet objet possède une propriété value díoù ligne 8 la ligne qui permet de ´ pointer Ş sur la valeur du champ du login.

Les autres objets sont créés suivant le même système.

Ceci est vu plus loin.

Si le login possède plus de 8 caractères, un message díerreur est inséré dans la zone de saisie du login (ligne 8), le bouton (ligne 20) prend pour valeur ´ Erreur ! Ş (ligne 9) et líimage devant la zone de saisie (ligne 18) change et prend la valeur de celle indiquée ligne 10.

Captures écran

III.2 Le monde objet

Líintérêt du langage javascript est de pouvoir travailler sur les objets contenus dans les pages HTML. Ces objets sont associés à des propriétés et à des méthodes qui permettent de les manipuler.

A chaque objet est associé un certains nombres díéléments qui permettent díatteindre et de modifier ces objets.

a. Les objets

Définition

Un objet est une enveloppe, un tiroir dans lequel on va pouvoir ranger un grand nombre de choses qui lui seront liés (variables, structures Ö).

Il existe des objets prédéfinis par les normes javascript, mais il est possible díen créer soit même.

A ces objets sont associés des propriétés et des méthodes nécessaires pour leur manipulation. Líorganisation des objets qui constituent une page Web est appelée DOM (Document Object Model).

Ces objets ont une hiérarchie. Certains sont les pères díautres, certains sont des fils Ö

Líobjet qui se situe au sommet de la hiérarchie est líobjet window. Tous les autres objets sont des fils de cet objet.

Pour bien comprendre la façon dont ce langage est construit et comment vous pouvez atteindre les objets inclus dans vos pages HTML, il est nécessaire de garder en mémoire líorganisation des objets prédéfinis de Javascript (DOM javascript).

Cette organisation est présentée dans le schéma suivant :

b. Les propriétés

Définition

Une propriété est une information ou attribut qui caractérise un objet. Un objet peut posséder plusieurs propriétés.

Les valeurs des propriétés associées à un objet peuvent être modifiées. Par exemple, un document HTML est caractérisé par líobjet document auquel un certain nombre de propriétés sont associées comme la couleur du texte, la couleur du fond díécran Ö

A chaque propriété une valeur est associée. Cette valeur peut être définie (elle existe) ou non définie (elle níexiste pas valeur undefined).

La valeur existe si, dans votre document, la propriété de líobjet est utilisée et est renseignée. Dans le cas contraire, elle est non définie.

Afin de lister les propriétés de ces objets, la boucle for peut être utilisée. Voir líexemple ci-après.

Attention

Toutes les propriétés ne sont pas forcément listable. En effet, un certain nombre díentre elles peuvent être en mode ´ DontEnum Ş, ´ internal Ş Ö

La norme ECMA262 le montre. Voir le tableau ci-dessous.

Exemple

Le programme suivant permet de lister les propriétés visibles de líobjet navigator.

Code

<HTML>

<HEAD>

<TITLE>Les proprietes de l'objet document</TITLE>

for (var i in window.navigator)

{

document.write("navigator" + "." + i + "=" + window.navigator[i] + "<BR>");

}

</script>

</HEAD>

<BODY>

</BODY>

</HTML>

Explications

La ligne 4 à 9 permet díinsérer un code javascript qui est interprété par le client au moment du chargement du programme HTML.

De la ligne 5 à la ligne 8, la boucle ´ for Ş permet de récupérer les propriétés (contenu à chaque passage dans la variable i ligne 5).

La ligne 7 permet díafficher le mot navigator suivi du nom de la propriété récupérée (i) ainsi que la valeur qui lui est associée (window.navigator[i]).

La valeur peut être une chaîne de caractère mais aussi une fonction voir un autre objet.

Captures écran

Attention

Le script fonctionne bien avec mozilla et netscape par contre avec opera ou konqueror, líobjet navigator ne retourne rien.

Ø Autre notation

Vous pouvez aussi atteindre les valeurs associées aux propriétés díun objet directement. Dans líexemple portant sur le login (ci-dessus), la valeur du login sais est récupérée grâce à la ligne window.document.formu.login.value.

Líobjet window possède un objet fils document (voir le DOM) qui possède lui même un objet formu (nom du formulaire). Líobjet formu contient un élément représenté par une balise input qui porte le nom de login. Une des propriétés de cet élément est value qui permet de retourner ou díatteindre la valeur associée à cet élément.

La notation window.document.forms[0].elemenst[0].value est aussi valide. Cette notation est plus générale car, quelque soit le nom du formulaire et de la balise input elle représente le premier formulaire et la première balise de ce formulaire (Voir DOM).

Líobjet forms est une liste. A líindice 0 se situe le premier formulaire du document HTML (représenté par la balise form), à líindice 1 se situe le deuxième formulaire de ce même document Ö

A líintérieur de ces formulaires il existe des éléments représentés par la liste elements. A líindice 0 se situe le premier élément et ainsi de suite.

Remarque

Si vous devez traiter plusieurs propriétés díun même objet, vous pouvez utiliser líinstruction with qui permet de raccourcir la saisie en précisant que ce qui suit concerne líobjet indiqué dans le bloc with.

Exemple

Reprenons líexemple portant sur le login.

Code

<HTML>

<HEAD>

function verifie()

{

with(window.document.forms[0].elements[0])

if(value.length > 8)

{

value="Login limité à 8 caracteres";

window.document.formu.but1.value="Erreur !";

window.document.images[0].src="IMAGE/attention_warning.gif";

}

</script>

</HEAD>

<BODY>

<B>

<BR>

<BR>

</FORM>

</BODY>

</HTML>

c. Les méthodes

Définition

Une méthode est une fonction propre à un objet. La plupart du temps, la méthode est suivie de parenthèses. document.write() permet díafficher du contenu dans votre document. La méthode associée à líobjet document est write().

d. Création díobjets

Javascript utilise les fonctionnalités des langages objets, il permet donc de ne pas se contenter des objets, méthodes et autres éléments prédéfinis dans le langage. En effet vous pouvez très bien en définir de nouveaux.

Lors des paragraphes précédents, cette partie a été évoquée. Deux possibilités sont envisagées :

ß La méthode énumérative

ß Líutilisation de líopérateur this

Ø La méthode énumérative

Il suffit de définir líobjet et de lui associer des propriétés, des valeurs et des méthodes.

Líinconvénient de ce système est de ne pouvoir ensuite, récupérer la définition pour un autre objet du même type, il est alors nécessaire de tout redéfinir pour ce nouvel objet.

Exemple

Code

<HTML>

<HEAD>

</script>

</HEAD>

<BODY>

aliment= {

nom:"cassoulet",

prix:"3",

composition:{ingredient1:"sauce",ingredient2:"saucisses",ingredient3:"haricots"},

origine:"sud-ouest"

};

for(var i in aliment)

{

if(aliment[i] == "[object Object]")

{

for(var j in aliment[i])

{

document.write("aliment." + i + "." + j + " = " + aliment[i][j] + "<BR>");

}

else

{

document.write("aliment." + i + " = " + aliment[i] + "<BR>");

}

</BODY>

</HTML>

Explications

Les lignes 7 à 13 permettent díassocier à líobjet aliment des propriétés et leurs valeurs.

Ligne 10 la propriété composition contient elle aussi des propriétés (ingredient?).

Les lignes 14 à 27 permettent díafficher le contenu de cet objet. Du fait de le présence de sous-propriétés, il est nécessaire de tester le contenu récupérer pour níafficher que les valeurs (ligne 16).

Captures écran

Si nous voulions utiliser à nouveau cette structure díobjet, il serait nécessaire de redéfinir un nouvel objet et toutes les propriétés. Ce qui níest pas très souple.

Ø Líopérateur this

Cet opérateur permet de créer un objet ´ souche Ş qui peut ensuite être réutilisé pour la définition díun objet de même contenu.

Le nouvel objet est une instanciation de celle de líobjet souche.

Exemple

Líexemple précédent devient alors :

Code

<HTML>

<HEAD>

</script>

</HEAD>

<BODY>

function aliment(n,p,c,o)

{

this.nom=n;

this.prix=p;

this.composition=c;

this.origine=o;

}

function contenu(i1,i2,i3)

{

this.ingredient1=i1;

this.ingredient2=i2;

this.ingredient3=i3;

}

cassoulet = new aliment("cassoulet",3,recette,"sud-ouest");

recette = new contenu("sauce","saucisses","haricots");

for(var i in cassoulet)

{

if(cassoulet[i] == "[object Object]")

{

for(var j in cassoulet[i])

{

document.write("cassoulet." + i + "." + j + " = " + cassoulet[i][j] + "<BR>");

}

else

{

document.write("cassoulet." + i + " = " + cassoulet[i] + "<BR>");

}

</script>

</BODY>

</HTML>

Explications

Les lignes 8 à 14 permettent de créer une fonction aliment qui gère les propriétés de ´ niveau 1 Ş. La propriété composition contient à nouveau díautres propriétés qui sont définies dans la fonction contenu (ligne 16 à 21).

Notez bien quíà aucun moment dans ces déclarations nous níavons indiqué de valeur. Ces déclarations fournissent uniquement la structure des objets.

Les lignes 24 à 25 permettent elles, de déclarer et díassocier aux propriétés de ces objets des valeurs.

La ligne 24 permet de définir líobjet cassoulet qui est constitué díun ensemble de propriétés dont les valeurs sont indiqués entre parenthèses. Ces valeurs doivent être dans le même ordre quíindiqué dans la définition de líobjet. Líobjet cassoulet est une instanciation de líobjet aliment.

La ligne 25 permet díassocier aux propriétés de líobjet recette leur valeur. Líobjet recette est une instanciation de líobjet contenu.

Captures écran

Si vous désirez créer un nouveau ´ plat Ş dont la structure est équivalente à celle créée dans líobjet ´ souche Ş, vous níêtes pas obligé de tout redéfinir. Il suffit de reprendre les deux lignes 24 et 25.

Ø Les différentes notations possibles

Il est possible díatteindre les valeurs des objets de plusieurs manières.

Les deux syntaxes suivantes renvoient la valeur sauce :

Syntaxe

document.write(cassoulet.nom);

document.write(cassoulet. ["nom"]);

Si líobjet principal est composé díun autre objet qui possède des propriétés, les syntaxes suivantes sont possibles et renvoeint le même résultat :

Syntaxe

document.write(cassoulet.composition.ingredient1);

document.write(cassoulet.composition.["ingredient1"]);

document.write(cassoulet.["composition"].ingredient1);

document.write(cassoulet.["composition"].["ingredient1"]);

En combinant deux notations cela propose bien quatre possibilités (2^e2=4).

Ø Destruction des valeurs

Il est possible de supprimer la valeur díune propriété en lui associant le mot clé undefined ou en utilisant líopérateur delete.

Syntaxe

cassoulet.nom=undefined;

delete cassoulet.nom;

Attention

Il y a une différence entre les deux méthodes de destruction.

Líutilisation de delete supprime la propriété, elle disparaît de líaffichage (elle níest alors plus associée à líobjet) tandis que líaffectation de la valeur undefined conserve la propriété, líaffichage renvoie alors la valeur undefined.

III Les notions de langages objets

III.1 Les événements

a. Intérêt

Syntaxe

Attention

Evénement

Evénement

Attention

Evénement

Evénement

Evénement

Evénement

Remarque

Evénement

Evénement

Code

III.2 Le monde objet

Líintérêt du langage javascript est de pouvoir travailler sur les objets contenus dans les pages HTML. Ces objets sont associés à des propriétés et à des méthodes qui permettent de les manipuler.

Définition

Attention

Exemple

Code

Attention

Remarque

Exemple

Code

Exemple

Code

Exemple

Code

Explications

Syntaxe

Syntaxe

Syntaxe

Attention