SELFHTML: JavaScript / Éléments du langage / Objets, propriétés et méthodes

SELFHTML/Quickbar JavaScript Éléments du langage

	Objets, propriétés et méthodes
	Objets JavaScript prédéfinis Utiliser des objets JavaScript prédéfinis Définir ses propres objets Propriétés d'objets Méthodes d'objet Demandes sur l'existence d'un objet Exécuter plusieurs instructions avec un objet (with) Se référer à l'objet actuel (this)

Objets JavaScript prédéfinis

Les objets sont des éléments fixement délimités avec des propriétés et souvent aussi avec des fonctions liées à l'objet (méthodes).

Que JavaScript représente une extension de HTML tient avant tout aux objets prédéfinis qui sont à votre disposition en JavaScript. Grâce à ces objets prédéfinis vous pouvez questionner ou modifier les éléments distincts d'un formulaire HTML.

Un objet peut être une fraction de l'objet hiérarchiquement supérieur. C'est pour cette raison que les objets JavaScript sont hiérarchisés. L'objet le plus élevé dans la hiérarchie en JavaScript est l'objet-fenêtre (window). Les fenêtres ont des propriétés comme un titre, une taille etc... Le contenu d'une fenêtre est le deuxième objet le plus élevé, à savoir le document affiché dans la fenêtre (en JavaScript l'objet document). En règle générale, il s'agit d'un fichier HTML. Un tel fichier peut contenir certains éléments définis par des repères HTML, comme par exemple des formulaires, des liens, des références de graphiques etc... Pour de tels élément subalternes il y a à nouveau des objets spécifiques à JavaScript, par exemple l'objet forms pour des formulaires. Un formulaire, de son côté, est constitué de différents éléments, par exemple des champs de saisie, des listes de choix ou des boutons pour envoyer ou interrompre. En JavaScript, il y a pour cela un objet elements, avec lequel vous pouvez adresser des champs distincts et d'autres éléments dans le formulaire.

À côté des objets de JavaScript rangés hiérarchiquement, il y en a qui ne passent pas directement dans la hiérarchie. Ce sont par exemple les objets pour le calcul de la date et de l'heure, pour des tâches mathématiques et pour le traitement de chaînes de caractères.

Vous trouverez une vue d'ensemble des objets JavaScript prédéfinis dans la référence objet JavaScript. Là sont présentées pour chaque objet les propriétés et les méthodes disponibles.

Utiliser des objets JavaScript prédéfinis

Exemple d'affichage: aperçu

À tout moment, vous pouvez utiliser des objets JavaScript.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
<!--
  function disdateetheure()
   {
    var maintenant = new Date();
    var jour = maintenant.getDate();
    var mois = maintenant.getMonth() + 1;
    var an = maintenant.getYear();
    if(an < 999) an+=1900;    
    var heures = maintenant.getHours();
    var minutes = maintenant.getMinutes();
    var pleine = ((minutes < 10) ? ":0" : ":");
    alert("Bonjour!\naujourd'hui on est le "
    + jour + "." + mois + "." + an + "\nil est maintenant "
    + heures + pleine + minutes + " heures");
   }
// -->
</script>
</head>
<body onload="disdateetheure()">
</body></html>

Explication:

Dans l'exemple, dans un passage JavaScript la date et l'heure actuelle sont communiquées à l'aide de l'objet JavaScript prédéfini Date. Lors de la lecture du fichier, le résultat est formaté proprement avec un texte de bienvenue dans une fenêtre de dialogue.

À cette fin une nouvelle variable doit d'abord être créée. Dans l'exemple c'est la variable maintenant. Cette variable doit pouvoir accéder aux données de l'objet Date. Cela est obtenu grâce au signe égal derrière le nom de la variable. Derrière suit le mot réservé JavaScript new et derrière encore, séparé par un espace, l'appel de Date() pour créer une nouvelle instance de l'objet Date.

Pour adresser les différentes données de l'instance objet de Date, à savoir jour, mois, année etc. sont à disposition des méthodes correspondantes. Ces méthodes, par exemple getDate() ou getHours(), ont comme valeur restituée une partie de la date ou de l'heure. Ainsi getDate() par exemple renvoie le jour actuel du mois et getHours() le nombre actuel d'heures dans le jour. Dans l'exemple on a défini une variable pour chacune des parties constituantes de la date nécessaires. Dans la variable jour, on a en appelant maintenant.getDate() sauvegardé le jour actuel du mois.

L'instruction de l'exemple qui commence avec pleine ..., ne peut pas être expliquée plus en détail ici. L'instruction est une préparation pour que l'heure soit formatée proprement.

Attention:

Les différentes méthodes de l'objet Date utilisé dans l'exemple comme par exemple getDate(), seront décrites avec la référence de l'objet Date.

Définir ses propres objets

Vous pouvez définir vos propres objets si vous voulez programmer en JavaScript de façon strictement orientée objet.

Pour créer son propre objet, deux étapes sont nécessaires. Il vous faut d'abord "déclarer" l'objet lui-même et ses propriétés. Dans un deuxième temps, vous pouvez définir à la suite une instance de cet objet. Avec cette instance d'objet vous pouvez alors exécuter des procédures de programmes.

Exemple:

<html>
<head>
<title>Exemple avec JavaScript</title>
<script language="JavaScript">
<!--
  function couleur(valeur_R, valeur_G, valeur_B)
   {
    this.valeur_R = valeur_R;
    this.valeur_G = valeur_G;
    this.valeur_B = valeur_B;
   }

  function objettest()
   {
    Test = new couleur("33","99","C0");
    alert("La valeur rouge de ma couleur est en hexadécimal " + Test.valeur_R);
   }
// -->
</script>
</head>
<body onload="objettest()">
</body>
</html>

Explication:

Pour créer un nouvel objet et ses propriétés, vous devez définir dans un passage JavaScript ou dans un fichier JavaScript séparé une fonction qui vous est propre comme dans l'exemple la fonction couleur(...). Le nom que vous donnez à la fonction (dans l'exemple le nom couleur) est en même temps le nom de l'objet que vous créez avec cette fonction. Comme paramètres attendus par la fonction, notez les propriétés que doit avoir votre objet. Les noms de paramètres sont en même temps les noms de propriétés de l'objet. Dans l'exemple, ce sont les propriétés valeur_R, valeur_G et valeur_B, car il doit être crée un objet qui puisse sauvegarder les valeurs rouge, verte et bleue. Dans la fonction, notez toutes les instructions comme dans l'exemple: pour chaque propriété fixée dans les paramètres de la fonction, notez une instruction en commençant par le mot réservé JavaScript this, suivi d'un point et du nom du paramètre. Notez à la suite un signe égal, suivi lui-même du nom du paramètre. À la fin de chaque instruction doit figurer un point virgule.

Après avoir créé l'objet, vous pouvez définir à d'autres endroits dans votre script JavaScript des instances de cet objet. Cela s'obtient à l'aide d'une variable et du mot JavaScript réservé new. Dans l'exemple une deuxième fonction objettest() a été définie comme démonstration. Dans celle-ci, on a d'abord créé une variable Test. Cette variable doit recevoir les données contenues dans l'objet créé couleur. Cela se fait à l'aide d'un signe égal derrière le nom de la variable. Derrière suit le mot réservé JavaScript new et ensuite, séparé par un espace, le nom de la fonction avec laquelle l'objet du même nom a été créé (dans l'exemple couleur). Comme paramètre sont transmises à cette fonction quelconques valeurs utilisables, dans l'exemple "33", "99" et "C0" (valeurs de couleurs hexadécimales typiques, comme elles servent en HTML). La valeur rouge de la couleur sortira dans une boite de dialogue à la lecture du fichier HTML.

Propriétés d'objets

Exemple d'affichage: aperçu

Les objets peuvent avoir des propriétés. Un objet "humain" défini par vous même pourrait par exemple avoir les propriétés nom, âge, sexe et langue maternelle. De la même façon, les objets prédéfinis en JavaScript ont eux aussi des propriétés. Ainsi l'objet Math a-t-il par exemple une propriété "PI" (Math.PI). Il est ainsi possible de calculer avec la constante mathématique PI sans connaître sa valeur exacte.

Vous pouvez lire à tout moment les propriétés d'objet dans votre code JavaScript et vous pouvez dans de nombreux cas en modifier les valeurs. Ainsi vous pouvez par exemple affecter au document affiché dans la fenêtre de votre navigateur une nouvelle adresse URL valable. De cette façon, vous obtenez que le navigateur WWW fasse un saut à l'adresse URL affectée, exactement comme si l'utilisateur avait cliqué sur un lien correspondant

Exemple:

<html>
<head>
<title>Lire le navigateur de l'utilisateur</title>
<script language="JavaScript">
<!--
var BrowserName = navigator.appName;
var BrowserVersion = navigator.appVersion;
alert("Ah oui, vous utilisez donc le " + BrowserName + 
", à savoir dans sa version " + BrowserVersion);
// -->
</script>
</head>
<body>
</body>
</html>

Explication:

Dans l'exemple ont été sauvegardées à l'intérieur d'un passage JavaScript deux propriétés de l'objet JavaScript prédéfini navigator dans deux variables correspondantes. L'objet navigator met à votre disposition différentes informations sur le navigateur utilisé par l'utilisateur. Dans l'exemple ci-dessus, les propriétés du nom du navigateur (sauvegardée dans la propriété d'objet navigator.appName) et de la version du navigateur (sauvegardée dans la propriété d'objet navigator.appVersion) sont recherchées. Ensuite les données recherchées sont sorties à l'écran dans une boite de dialogue.

Vous adressez les propriétés d'objet en notant d'abord le nom de l'objet suivi d'un point et du nom de la propriété. Aucun espace n'est permis!

Attention:

Étant donné que dans l'exemple ci-dessus aucune fonction n'a été définie, le code JavaScript est simplement exécuté à la lecture du fichier.

Méthodes d'objet

Les objets peuvent avoir des méthodes. Ce sont des fonctions qui exécutent des actions, mais qui, à l'inverse des fonctions isolées, sont liées à un objet déterminé. Beaucoup d'objets prédéfinis en JavaScript ont des méthodes. Ainsi par exemple il existe un objet JavaScript prédéfini history, dans lequel sont sauvegardées les adresses URL d'une fenêtre de navigateur déjà visitées. Pour cet objet, il y a une méthode history.back(), avec laquelle vous pouvez imposer en JavaScript un retour à une adresse URL déjà visitée.

<html>
<head>
<title>Retourne d'où tu viens</title>
</head>
<body>
<a href="javascript:history.back();">Retourne d'où tu viens</a>
</body>
</html>

Explication:

L'exemple contient un lien avec une syntaxe spéciale. Cette syntaxe vous permet, en cliquant sur le lien, d'appeler le code JavaScript. Dans l'exemple il s'agit d'un appel de la méthode back() de l'objet history.

Vous adressez des méthodes d'objet en notant d'abord le nom de l'objet suivi d'un point et du nom de la méthode; suivent enfin une parenthèse qui s'ouvre et une autre qui se ferme. Aucun espace n'est permis! Quelques méthodes peuvent aussi attendre des paramètres lorsqu'elles sont appelées. Vous devez alors transmettre ces paramètres en les plaçant entre les parenthèses.

Attention:

Vous aurez plus de détails sur la syntaxe d'appel pour les liens dans la partie sur les Event-Handler.

Demandes sur l'existence d'un objet

Exemple d'affichage: aperçu

Il existe entre temps un nombre assez important d'objets JavaScript, et il est souvent difficile de savoir quel navigateur interprète quel objet dans quelle version. Les objets qui ne peuvent pas être interprétés conduisent à des messages d'erreur dans le navigateur. Ainsi il peut arriver qu'un Script qui fonctionne parfaitement avec Netscape 4.x conduise à des messages d'erreur avec Netscape 3.x parce qu'un objet n'est pas connu. C'est pourquoi il existe une possibilité de faire précéder l'appel de propriétés et de méthodes d'un objet par une demande pour savoir si l'objet est connu du navigateur.

Exemple:

<html>
<head>
	<title>Demande sur des objets</title>
<script language="JavaScript">
<!--
if(! document.images)
 alert("Dommage, votre navigateur ne connaît pas l'objet image - vous manquez quelque chose!");
else
 alert("Hourra, votre navigateur connaît l'objet image");
if(document.all)
 alert("Ah, Microsoft!"); 
else
 alert("Ah, ce n'est pas Microsoft!"); 
// -->
</script>
</head>
<body>
</body>
</html>

Explication:

Avec une instruction conditionnelle if(...) vous pouvez vérifier si un objet ou une propriété/méthode de l'objet est disponible. Comme expression de la condition, notez simplement à l'intérieur des parenthèses derrière if l'objet ou alors l'objet plus la propriété/méthode que vous voulez demander. Si l'objet est disponible, la valeur true (vrai) est renvoyée. Dans la branche de la demande if-else qui traite ce cas, vous pouvez alors vous en donner à cœur joie et utiliser par exemple des commandes qui emploient cet objet. Dans l'autre branche de la demande if-else, vous pouvez alors par exemple sortir une annonce qui précise que cet objet JavaScript utilise malheureusement des commandes que le navigateur de l'utilisateur n'interprète pas.

Dans l'exemple ci-dessus il est tout d'abord demandé si l'objet images n' est pas disponible (La question négative s'exprime par le point d'exclamation devant l'objet). Si donc l'objet n'est pas disponible, sortira dans l'exemple l' annonce que c'est très dommage etc... Dans l'autre cas, donc si l'objet est disponible, sortira l'annonce Hourra.

Dans la deuxième partie de l'exemple il est demandé après une propriété de l'objet document, à savoir la propriété all (qui est elle-même un objet, mais n'est interprétée que par l'Explorer Internet MS). Là aussi sont prévues dans l'exemple deux annonces différentes - selon la disponibilité.

Exécuter plusieurs instructions avec un objet (with)

De temps en temps, il arrive que vous notiez plusieurs instructions à la suite qui travaillent toutes avec le même objet. Dans ce cas, si vous le voulez, vous pouvez utiliser une forme d'écriture spéciale abrégée.

Exemple:

<html><head><title>Test</title>
</head><body>
<script language="JavaScript">
with(document)
{
 open();
 write("Cette page a la couleur d'arrière plan " + bgColor);
 close(); 
}
</script>
</body></html>

Explication:

Avec with(nomobjet) vous introduisez cette forme d'écriture (with = avec). Étant donné qu'en principe plusieurs instructions suivent qui utilisent cet objet, vous devez enfermer toutes ces instructions dans des parenthèses accolades.

Dans l'exemple ci-dessus, on travaille avec l'objet document. Dans les parenthèses accolades sont employées les méthodes open(), write() et close() ainsi que la propriété bgColor. Elles appartiennent toutes à l'objet document. Normalement vous auriez du écrire : document.open() ou document.bgColor. Grâce à la syntaxe spéciale with(document) cela n'est pas nécessaire.

Attention:

Il est naturellement également possible d'adresser de cette façon des objets hiérarchiquement inférieurs, par exemple:
with(document.mon_formulaire.champ_1)
value = Serge

Se référer à l'objet actuel (this)

Exemple d'affichage: aperçu

Dans certains cas l'objet auquel une commande se réfère est évident. Dans ces cas là, vous pouvez utiliser une forme d'écriture abrégée.

Exemple:

<html><head><title>Test</title>
</head><body>
<form name="entree">
<input type=text name="champ">
<input type=button value="OK" onClick="alert(this.form.champ.value)">
</form>
</body></html>

Explication:

Avec le mot clé this vous pouvez vous référer à un objet actuel. Dan l'exemple a été défini un formulaire avec un champ de saisie et un bouton. Quand l'utilisateur clique sur le bouton l' Event-Handler onClick=, défini dans le repère HTML pour le bouton, entre en action. Dans l'exemple, la valeur entrée par l'utilisateur dans le champ de saisie est sortie dans une boite de dialogue. Normalement, la commande aurait été notée comme ceci:
alert(document.entree.champ.value)
Étant donné que la commande se trouve dans le formulaire auquel elle se réfère, vous pouvez aussi écrire:
alert(this.form.champ.value)
Le mot form est dans ce cas issu de l'objet forms.


après:	Fonctions
avant:	Variables et valeurs

SELFHTML/Quickbar JavaScript Éléments du langage