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

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