▼ 7. Objets ▼

• Propriétés /
  méthodes
• This
• Créer un objet
• Créer une classe
• Voir propriétés objets
• Objets link
  et anchor
• Objet history
• Objet image

     ◄ Retour accueil

Il n'existe pas de propriétés ou méthodes communes à tous les objets.

L'ensemble des objets Javascript faisant référence aux éléments d'une page Web se nomme DOM (Document Object Model).

window est l'objet parent du DOM, c'est-à-dire celui qui contient des sous-objets et est au-dessus des autres. window contient tout ce qui a rapport à la fenêtre du navigateur, par exemple l'historique, l'adresse de la page, etc. window contient aussi l'objet document. Ce dernier contient les éléments qui constituent la page web : images, formulaires, liens, etc.

Le formulaire possède son objet form qui renferme d'autres sous-objets comme text, texarea, button, checkbox, combo, password, radio et select.

Tout ceci part donc de window et s'enchaîne les uns à la suite de l'autre. Ainsi pour faire référence à un bouton dans le formulaire d'une page, il faut s'y prendre ainsi :  window.document.form.button
window est habituellement implicite et il n'est pas nécessaire de l'écrire pour que le code fonctionne à l'intérieur de la page où se trouve l'objet référencé.
Cependant, lorsqu'on traite d'un objet hors du document où il se situe, comme dans location et history ou dans le cas de frames, il faut alors absolument écrire window.

Ainsi, les objets sont organisés de façon hiérarchique, où les objets contiennent des sous-objets toujours plus précis et accessibles par des points. Lorsqu'on référe à un sous-objet, la référence doit toujours s'achever par le nom d'un propriété ou d'une méthode d'un objet. Sinon, une erreur sera affichée à l'effet que l'objet est indéterminé.

This

This est un mot clé courant dans la plupart des langages. Théoriquement, il s'agit d'un pointeur sur l'objet en cours d'utilisation. En plus simple, il s'agit d'un synonyme universel pour faire référence à un objet qu'on est entrain de modifier à l'intérieur d'une fonction de sa classe.

this vient remplacer la référence au parent de l'objet, mais il n'est exploitable qu'à l'intérieur de la fonction en cours.

Si vous écrivez le code d'une fonction qui manipule un objet, vous pouvez faire référence à l'objet en question à l'intérieur de la fonction , et ainsi accéder à ses propriétés et méthodes, en faisant this.methode() ou this.propriété.

En plus, il est possible d'employer this pour faire référence à un élément Web en cours. Par exemple, si on passe en paramètre à une fonction la valeur d'un champ de texte, il est ensuite possible de faire référence à la valeur en faisant this.value.

Il est aussi intéressant de passer this en paramètre à une fonction lorsqu'on est à l'intérieur d'une balise ( ce qui permet de préciser ce que this remplace ).

Création d'un nouvel objet

Tout d'abord, il faut garder en tête que objet peut être considéré comme un synonyme de variable.

Plusieurs objets sont créés implicitement lors de la déclaration d'une variable. Cependant, dans le cas d'objets comme Date, il est nécessaire d'utiliser le mot clé new pour déclarer les objets et appeler le constructeur de date. Ce constructeur s'inscrit : Date()

Exemple :

var dateJeudi= new Date();

Il est aussi possible de créer de nouveaux objets qui sont personnalisés en codant nos propres classes. La définition d'une classe sera traitée en 7.4.
Cependant, il faut savoir que Date, String, Image, Date, etc. sont des classes standards de JavaScript. Ce qui veut dire qu'il est possible d'en instancier des objets (en obtenir des variables) prédéfinis.
 

Création d'une classe

Afin de créer son propre objet (pour l'instancier), certains l'auront deviné, il vous faudra créer une classe. Qu'est-ce que c'est qu'une classe?
Une classe d'objets est un ensemble d'informations regroupés sous un même nom, qui décrivent la structure et le comportement commun de ces objets. Pour définir une classe, il faut préciser :
    * Les propriétés (ou attributs) qui décrivent ses caractéristiques.
        Une propriété est une variable qui est attachée à un type d'objets, et qui est contient une de ses
        caractéristiques.
    * Les méthodes (ou fonctions membres) qui décrivent ses comportements et ses actions
        Une méthode est une fonction qui ne s'applique qu'à une classe d'objet.

Le JavaScript n'est pas un vrai langage orienté objet puisque certains concepts primordiaux ne sont pas implémentés comme l'héritage, le polymorphisme, etc.
Les classes en Javascript sont surtout utilisés pour créer des structures de données plus complexes et plus souples que les tableaux de variables.

Grâce à ce système, il devient possible de réunir plusieurs informations ayant un lien entre elles sous le couvert d'un seul mot beaucoup plus rapide à utiliser que de devoir répéter à chaque fois l'ensemble des informations. Donc on peut faire une classe qui regroupe toutes les informations qu'on désire conserver à propos d'un disque compact de musique et ainsi regrouper toutes ces informations dans une seule variable.

Une classe doit contenir un constructeur. Il s'agit d'une fonction qui crée l'objet et lui donne, si nécessaire, ses valeurs à la création. (en c++, le constructeur possède une liste d'initialisation). Puis dans la classe il faut donner à l'objet ses propriétés et ses méthodes.

Exemple :

<head>
<script language="javascript">
// Constructeur de la classe
function InfosCD(p_titre, p_artiste, p_anneeParution)
    {
    // Déclaration des variables membres (propriétés)
    this.titre= p_titre;
    this.artiste= p_artiste;
    this.anneeParution= p_anneeParution;

    // Déclaration d'une fonction membre (méthode)
     this.Artiste= ObtenirArtiste;
     }

// Implantation du code de la fonction membre
function ObtenirArtiste()
 {
 return this.artiste
 }
</script>
</head>

<body>
<script language="javascript">
// La variable cd est une instance de la classe InfosCD
// Lors de cette déclaration avec le mot clé new, this est "remplacé" par cd
var cd= new InfosCD("Hollywood", "Marilyn Manson", 2000);

document.write(cd.Artiste());
</script>
</body>

Pour obtenir un objet, appelé aussi instance de la classe, on utilise une fonction spéciale appelée constructeur et qui porte le nom de la classe. Un objet est alors créé par l'instruction :

var objet = new Classe();

Les valeurs passées en paramètre vont affecter les propriétés de l'instance (et ainsi les initialiser), conformément au code du constructeur : ils doivent donc correspondre exactement, en place et en nombre, aux paramètres formels du constructeur.
Mais on peut alternativement appeler le constructeur par défaut, sans paramètre, reportant à plus tard l'initialisation des propriétés.

Utiliser des fichiers de codes de classes externes .js
Il est très utile d'insérer le code de nos classes dans des fichiers externes puisqu'elles peuvent resservir ! N'oubliez pas qu'un script externe .js ne contient pas de balises HTML. Pour importer le code, il suffira d'écrire par exemple : <script src="classe_InfosCD.js"> </script>
Faites un fichier externe par classe, c'est beaucoup mieux. Il est possible d'écrire dans le code d'une page en plus des définitions locales de fonctions en lien avec les classes importées de fichiers externes.

La propriété prototype
Cette propriété spéciale s'applique à une classe déjà construite et permet de lui ajouter de nouvelles propriétés et méthodes. On peut effectuer ces ajouts sur des classes prédéfinies ou définies par le programmeur. Il faudra ensuite attribuer une valeur à cette propriété, car on ne dispose pas d'un constructeur d'objet qui l'intègre. Voici la syntaxe :
nomClasse.prototype.nomPropriété= valeurInitiale;

Exemple :

Ajout d'une propriété style à la classe InfosCD
InfosCS.prototype.style= "metal" ;

Visionner toutes les propriétés d'un objet

Il arrive lorsqu'on travaille avec un objet qu'on soit tenter de connaître rapidement toutes ses propriétés. Ainsi, disposer d'une manière rapide en Javascript vous simplifiera la tâche.

Il s'agit de demander à Javascript d'afficher une liste de toutes les propriétés de l'objet ciblé. Pour ce faire, il existe une boucle for spéciale qui parcours les définitions de propriétés des objets prédéfinis de Javascript. Ainsi, ce truc ne fonctionne pas pour des classes que vous auriez définies vous-même.

Cette boucle utilise le mot clé in ainsi qu'au nom de l'objet. [in signifie effectivement "dans ce qui va suivre" comme dans les langages de bases de données tels que SQL.]
 

for (prop in document)	Cette instruction permet de boucler dans le constructeur de l'objet document.
prop	Variable qui à chaque itération vient contenir le nom de la propriété.
document[prop]	Cette instruction permet d'afficher la valeur courante d'une propriété.

Ensuite il est pratique de mettre dans la boucle une instruction d'écriture, document.write(), afin d'afficher les noms des propriétés et peut-être même leur valeur.

Exemple :

for (prop in window)
    {
    document.write("Propriété : " + prop + " ---------> " + window[prop] + "<br>");
    }

Exemple du résultat :
Propriété : onbeforeunload------------>null
Propriété : onafterprint------------>null
Propriété : top------------>[object]
Propriété : location------------>file:///C:/Program%20Files/Microsoft%20FrontPage/temp/pvw1A0.htm
Propriété : parent------------>[object]
Propriété : offscreenBuffering------------>auto
....

Il serait intéressant de mettre ce code dans une fonction qui recevrait en paramètre le nom de l'objet dont on veut visionner les propriétés.

Objets link et anchor

Les objets link et anchor sont contenus dans des vecteurs dont il est possible de faire référence par JavaScript. L'ordre des liens dans le tableau correspond à l'ordre de leur apparition dans la page. Les liens et les ancrages (appelés parfois cibles) sont comptabilisés dans des vecteurs différents.
Soit, document.anchors[] et document.links[]

L'objet anchor a une propriété name servant à modifier le nom de la cible.

L'objet link possède plusieurs propriétés. href spécifie l'adresse du lien et target l'endroit où la page doit se charger. host contient le nom du domaine et son port (ex : geocities.com), protocol indique le protocol utilisé (ex : http:), port fournit la valeur de port de la page web et pathname fournit l'endroit de l'emplacement du fichier au format UNC (Uniform Naming Convention). Il reste plus que la propriété hash qui donne le nom d'ancrage de la page.

Tout cela mène à la conclusion qu'il est possible grâce aux propriétés de l'objet link de construire une syntaxe d'adresse URL complète en faisant :

LeLien.protocol + "//" +  LeLien.hostname + "/" + LeLien.pathname

Objet history

Cet objet permet de créer des boutons effectuant les tâches Page précédente et Page suivant des navigateurs. La propriété length de l'objet history sert à connaître la longueur de l'historique actuel enregistré par le navigateur.

L'objet history comporte plusieurs méthodes. back() permet de charger la dernière page précédemment chargée. La méthode forward() affiche la page suivante (il faut tout d'abord que l'usager ait revenu sur ses pas d'une ou plusieurs pages). La méthode go() accepte un paramètre numérique, positif ou négatif, pour se déplacer d'avant en arrière dans la liste de l'historique selon l'index des pages visitées.

Exemple :

<form name="boutonArriere">
  <input type="button" name="prec" value="Page précédente"
  onClick="window.history.back()" />
</form>

Il est possible d'utiliser la méthode go() afin de recharger la page en cours. L'index 0 correspond à la page actuellement chargée. Ainsi pour faire un bouton de rechargement de la page il suffirait de faire :

<form name="boutonRecharger">
  <input type="button" name="recharge" value="Recharger la page"
  onClick="window.history.go(0)" />
</form>

Objet image

L'objet image existe pour toute page Web contenant au moins une image. Les images sont contenus dans un vecteur où l'ordre d'index des images correspond à leur position dans la page web.

Grâce à l'index d'une image, il est possible d'obtenir des informations sur cette dernière telles que ses dimensions, la largeur de sa bordure, son nom, ses attributs d'espacement, sa source. L'objet image ne possède pas de méthode, mais il reste possible de modifier ses propriétés.

Une autre propriété de l'objet image est complete. Il s'agit d'une valeur booléenne qui est à false tant qu'une image n'est pas chargée puis passe à true lorsqu'elle l'est.

Préchargement d'image
À l'aide d'un objet image, il est possible de précharger une image en mémoire pendant le chargement initial de la page. Une fois l'image préchargée, JavaScript peut faire référence à l'objet image et l'afficher immédiatement.

Pour créer un objet image vous devez faire une variable qui recevra l'image et ensuite faire appel au constructeur avec le mot clé new.
Puis il faut modifier les propriétés de l'objet comme src, border et hspace.

Exemple :

<head>
<script language="JavaScript">
// Création d'un objet image
var PhotoDragon= new Image();
// Ajustement des propriétés de l'objet avec celles désirées
PhotoDragon.src= "Dragon.jpg";
PhotoDragon.border= 8;
</script>
</head>

// On dit ici qu'au chargement de la page on doit modifier les sources des images
<body onload="document.Images[0].src= PhotoDragon.src">
// Emplacement de la photo , pour Netscrape il faut préciser à cet endroit la largeur et la hauteur
<img src width="170" height="300">
</body>