Apprendre Javascript pour rendre vos pages Web interactives
Leçon 8: Objets, méthodes et attributs
Toutes les leçons 
Apprendre Javascript pour rendre vos pages Web interactives
Leçon 8
Objets, méthodes et attributs
Objets, méthodes et attributs
Javascript: langage de programmation orienté prototype
Au début de ce cours, j'ai mentionné que Javascript est un langage de programmation orienté prototype. Il s'agit d'un concept proche de celui de la programmation orienté objet (POO), mais qui n'utilise pas les classes. En effet, Javascript renferme une panoplie d'objets prédéfinies (appelés prototypes) qui peuvent donner naissance à d'autres objets que l'on souhaite créer.Puisque Javascript est considéré comme une extension du langage HTML, alors la plupart de ses objets sont en réalité des objets HTML présents dans le document, comme les images, les champs de formulaire... Par contre, il existe des objets propres au Javascript qui permettent d’exécuter des traitement comme le calcul, la manipulation de la date, le traitement des chaines de caractères...
Hiérarchie des objets
Les objets Javascript qui dépendent du contenu d'un document HTML sont structurés hiérarchiquement. C'est à dire que des objets s’emboîtent dans d'autres jusqu'à atteindre l'objet le plus élevé à l’échelle de la hiérarchie.L'objet le plus élevé est la fenêtre du navigateur, il est identifié par le nom window. Cet objet peut être manipulé directement à travers des fonctions qui lui sont prédéfinies. On appelle ces fonctions des méthodes. A titre d'exemple alert() qui affiche les messages des exemples précédents est une méthode de l'objet window, on aurait pu donc l'écrire comme ceci: window.alert(). Le point (.) permet de passer d'un objet à une de ces méthodes ou d'un objet parent à un autre objet enfant, ou encore d'un objet à une variable qui lui est propre. On appelle cette variable un attribut.
Pour récapituler:
- Un objet peut représenter un élément HTML (image, texte, formulaire...) ou un élément propre au Javascript qui sert à exécuter des traitements spéciaux.
- Une méthode est une fonction prédéfinie appartenant à l'objet et qui permet de faire les traitement sur celui-ci (on peut dire qu'elle décrit le comportement de l'objet).
- Un attribut est une variable qui appartient à l'objet . Elle représente une propriétés ou caractéristique de celui-ci. On peut le manipuler grâce aux méthodes ou directement.
L'objet window contient un sous-objet (ou un objet subalterne), c'est le document HTML lui même. Cet objet est identifié par le nom document. Cet objet peut contenir les éléments HTML conventionnels comme du texte, les images, les formulaires... Tous ces éléments constituent des sous-objets de l'objet document. Par exemple l'objet forms désigne les formulaires contenus dans le document, et l'objet images englobe toutes les images intégrées...
L'objet formulaire par exemple contient à son tour des sous-objets, ce sont les champs de formulaire etc etc...
Pour mieux comprendre le concept, on va faire un exemple qu'on va expliquer après:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<form name="fo">
<input type="text" name="login" />
<input type="button" value="Action" />
</form>
</body>
</html>
Comme vous l'avez constaté, il s'agit uniquement du code HTML. L'objectif est de distinguer les objet et leur hiérarchie.
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<form name="fo">
<input type="text" name="login" />
<input type="button" value="Action" />
</form>
</body>
</html>
Pour commencer, le navigateur est inclus dans sa fenêtre du nom de window, c'est l'objet en tête de la hiérarchie. Puis il y a le document HTML du nom de document qui vient après. Donc le nom complet de l'objet document est window.document.
L'objet document contient un formulaire dont l'attribut name vaut fo. Alors, ce formulaire est identifié en Javascript par son nom fo ou plutôt par son nom complet window.document.fo.
Le formulaire fo renferme deux champs de formulaire. Intéressons nous au premier champs qui est une zone de texte du nom de login. Javascript identifiera donc cet objet par son non. Mais pour que l'identifiant soit correct il faut qu'il soit complet, l'objet "zone de texte" sera donc identifié par window.document.fo.login.
Cependant, la déclaration de l'objet window n'est pas obligatoire. D'ailleurs, dans les exemple précédents, nous avons appelé la méthode alert() sans le préfixe window. Donc, l'identifiant de la "zone de texte" peut s’exprimer comme ceci: document.fo.login.
Il existe d'autres façons pour identifier un objet sans passer par la présentation hiérarchique. Nous aurons l'occasion de les voir dans la partie DOM (Document Object Model).
Maintenant que nous avons identifié notre objet on va faire appel à ses attributs et ses méthodes pour pouvoir l'exploiter. Pour faire simple, on va s’intéresser seulement aux attributs dans un premier temps, car nous verrons les méthodes en détails dans les prochaines pages.
Les attributs de l'objet "zone de texte" que nous avons identifié par document.fo.login sont les mêmes attributs dont l'élément HTML correspondant dispose. Par exemple:
- value: qui désigne la valeur que contient la zone de texte.
- size: qui désigne se taille.
- tabindex: qui désigne son ordre de tabulation.
- etc...
En général c'est l'attribut value qui est souvent utilisé. Pour accéder à la valeur de la zone de texte on fait document.fo.login.value.
Pour mettre en pratique ce que nous avons vu. Imaginons que nous voulons améliorer le code HTML de tout à l'heure en y intégrant du code Javascript qui permet d'afficher dans une boite alert() le texte que l'internaute a saisi dans la zone de texte après avoir cliqué sur le bouton.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function f(){
alert(document.fo.login.value);
}
</script>
</head>
<body>
<form name="fo">
<input type="text" name="login" />
<input type="button" value="Action" onClick="f()" />
</form>
</body>
</html>
Le fait de cliquer sur le bouton appelle la fonction f() (onClick="f()"). La fonction f() déclarée plus haut, affiche le contenu de la zone de texte login dans une boite de dialogue alert() (alert(document.fo.login.value);).
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function f(){
alert(document.fo.login.value);
}
</script>
</head>
<body>
<form name="fo">
<input type="text" name="login" />
<input type="button" value="Action" onClick="f()" />
</form>
</body>
</html>
L'attribut value d'un champ de formulaire est accessible en lecture et en écriture, c'est à dire qu'on peut l'afficher ou lui affecter une nouvelle valeur. Par exemple: document.fo.login.value="ABC"; aurait écrit dans la zone de texte le mot "ABC".
Les objets et leur hiérarchie en Javascript en vidéo
Leçon 8
Objets, méthodes et attributs
Objets, méthodes et attributs
