SELFHTML/Aides à la navigation JavaScript/DOM Éléments du langage JavaScript| SELFHTML/Aides à la navigation JavaScript/DOM Éléments du langage JavaScript |
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 par exemple 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 méthodes d'objet.
|
Utiliser des objets JavaScript prédéfinisÀ tout moment, vous pouvez utiliser des objets JavaScript.
<html><head><title>Test</title>
</head>
<body>
<script type="text/javascript">
<!--
var maintenant = new Date();
var jour = maintenant.getDate();
var mois = maintenant.getMonth() + 1;
var annee = maintenant.getYear();
var heures = maintenant.getHours();
var minutes = maintenant.getMinutes();
var format = ((minutes < 10) ? ":0" : ":");
if (annee<2000) annee=annee+1900;
document.write("<h2>Bonjour!<\/h2><b>Nous sommes le "
+ jour + "." + mois + "." + annee + ". Il est maintenant "
+ heures + format + minutes + " heures<\/b>");
//-->
</script>
</body></html>
|
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 et sorties poprement formatées en HTML.
À 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, donc le jour, le mois, l'année etc... sont à disposition des méthodes d'objet. Ces méthodes, par exemple getDate() ou bien getHours(), ont comme valeur renvoyé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 par exemple, en appelant maintenant.getDate(), sauvegardé le jour actuel du mois.
L'instruction de l'exemple qui commence avec format ... 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.
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 objetsVous 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.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function couleur(R, G, B) {
this.R = R;
this.G = G;
this.B = B;
this.hex="#";
}
function changer_arriere_plan() {
var arriere_plan = new couleur("E0","FF","E0");
document.bgColor = arriere_plan.hex + arriere_plan.R + arriere_plan.G + arriere_plan.B;
}
//-->
</script>
</head><body bgcolor="#FFFFFF">
<h1>Son propre objet couleur avec JavaScript</h1>
<a href="javascript:changer_arriere_plan()"><b>changer la couleur d'arrière-plan</b></a>
</body>
</html>
|
Pour créer un nouvel objet et ses propriétés, vous devez définir dans un passage JavaScript ou à l'intérieur d'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 R, G et B,car il doit être crée un objet qui puisse sauvegarder les valeurs rouge, verte et bleue. R, G et B sont d'ailleurs des noms attribués. 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.
Vous pouvez bien entendu également définir pour chaque objet des propriétés fixes (qui ne sont pas influencées par des paramètres). Dans l'exemple, la propriété hex est une propriété fixe qui existe pour chaque instance de l'objet. Notez pour cela, derrière le nom de propriété, la valeur respective de la propriété.
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 réservé JavaScript new. Dans l'exemple une deuxième fonction changer_arriere_plan() est définie. Dans celle-ci, on a d'abord créé une variable arriere_plan. 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 des valeurs quelconques utilisables dans l'exemple "33", "99" et "C0" (valeurs de couleurs hexadécimales typiques, comme elles servent en HTML).
Enfin la variable arriere_plan est liée à l'objet-couleur et on peut grâce à elle fixer ou demander les propriétés de l'objet. Dans l'exemple, figure l'instruction:
document.bgColor = arriere_plan.hex + arriere_plan.R + arriere_plan.G + arriere_plan.B;
Grâce à elle, la couleur d'arrière plan de la page actuellement affichée est modifiée. Normalement on pourrait affecter à document.bgColor quelque chose comme "#C0C0EE". Même dans l'exemple, c'est une valeur de couleur de ce genre qui a été affectée, composée toutefois par les différentes propriétés de l'objet couleur qui est sauvegardé dans l'instance arriere_plan. La fonction changer_arriere_plan() est appelée quand l'utilisateur clique sur le lien contenu dans le fichier HTML.
|
|
Propriétés d'objetsLes 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 Matha-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 URI valable. De cette façon, vous obtenez que le navigateur WWW fasse un saut à l'adresse URI affectée, exactement comme si l'utilisateur avait cliqué sur un lien correspondant.
<html><head><title>Test</title></head><body>
<h1>La page qui vous identifie exactement</h1>
<script type="text/javascript">
<!--
var nom_navigateur = navigator.appName;
var version_navigateur = navigator.appVersion;
document.write("<p>Ah bon, vous utilisez donc le <b>" + nom_navigateur +
"<\/b>, à savoir dans la version <b>" + version_navigateur + "<\/b><\/p>");
//-->
</script>
</body></html>
|
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 nommées nom_navigateur et version_navigateur. 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 écrites de façon dynamique dans la fenêtre du navigateur avec document.write().
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!
|
|
Méthodes d'objetLes 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();"><b>Retourne d'où tu viens</b></a> </body> </html> |
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.
Vous aurez plus de détails sur la syntaxe d'appel pour les liens dans la partie sur les gestionnaires d'événements.
|
|
Demandes sur l'existence d'un objetIl 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.7 ou l'Explorer Internet 5.0 conduise à des messages d'erreur avec Netscape 4.0 ou l'Explorer Internet 5.0 parce qu'un objet n'y 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.
<html>
<head><title>Test</title>
</head>
<body>
<h1>Demande d'objet</h1>
<script type="text/javascript">
<!--
if(! document.images)
document.write("<p>Dommage, votre navigateur ne connaît pas l'objet image - Vous manquez quelque chose!<br>");
else
document.write("<p>Hourra, votre navigateur connaît l'objet image!<br>");
if(document.all)
document.write("Ah, votre navigateur est de Microsoft ;-)<\/p>");
else
document.write("Ah, et votre navigateur n'est même pas de Microsoft ;-)<\/p>");
//-->
</script>
</body>
</html>
|
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 que vous voulez demander. Si l'objet est disponible, la valeur true (vrai) est renvoyée en interne. 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, des phrases différentes sont écrites avec document.write dans la fenêtre du navigateur. Pour cela, il est d'abord demandé si le sous-objet document.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 une réaction plus joyeuse.
Dans la deuxième partie de l'exemple il est demandé si le sous-objet document.all qui n'est interprété que par l'Explorer Internet MS, est disponible. Là aussi sont prévues dans l'exemple deux annonces différentes - selon la disponibilité. À cet exemple on remarque que la demande sur la disponibilité d'objets peut aussi servir à la reconnaissance approximative du navigateur - à la condition de s'y connaître dans les objets JavaScripts prédéfinis et de savoir quels objets ne sont interprétés que par certains navigateurs.
|
|
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.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
with(document) {
open();
write("Cette page a pour titre " + title);
close();
}
//-->
</script>
</body></html>
|
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é title. Elles appartiennent toutes à l'objet document. Normalement vous auriez du écrire : document.open() ou bien document.title. Grâce à la syntaxe spéciale with(document)cela n'est pas nécessaire.
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
Veillez aussi à ce que la propriété appelée existe effectivement. Si elle devait manquer, vous auriez un message d'erreur JavaScript.
|
|
Se référer à l'objet actuel (this)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.
<html><head><title>Test</title> </head><body> <form name="saisie"> <input type="text" name="champ"> <input type="button" value="OK" onClick="alert(this.form.champ.value)"> </form> </body></html> |
Avec le mot clé this vous pouvez vous référer à un objet actuel. Dans l'exemple a été défini un formulaire avec un champ de saisie et un bouton. Quand l'utilisateur clique sur le bouton, le gestionnaire d'événement 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 fenêtre de dialogue. Normalement, la commande aurait été notée comme ceci:
alert(document.saisie.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.
|
| |
 |
Fonctions
|
 |
Variables et valeurs
|
| SELFHTML/Aides à la navigation JavaScript/DOM Éléments du langage JavaScript |
© 2001 Stefan Münz / © 2002 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
