Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > Javascript > Apprenez le Javascript ! > Les objets > Les objets > Lecture du tutoriel

Les objets

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avatar
Auteur : ZoZor
Note : 14 / 20 (3 votes)
Visualisations : 17 011

Plus d'informations Plus d'informations
Les objets, vous y voilà enfin !
Pourquoi enfin ? Car le javascript est un langage objet, ce qui signifie que pratiquement tout "passe" par les objets. C'est donc une notion très importante du javascript.
Tout "passe" par les objets ? Ca signifie qu'on en a déjà vu ?

En effet, et pas qu'un peu. Dans le chapitre sur les formulaires, on a manipulés plein d'objets. Mais lesquels ?
Je tiens quand même à vous dire que la notion d'objet peut être difficile à acquérir. Aussi, si vous ne comprenez pas à quoi celle-ci sert je vous conseille de travailler votre javascript. En effet, il faut avoir atteint une certaine maturité avec le javascript qui n'est pas forcément acquise si vous avez lu tout le tuto.
Pour ma part j'ai réussi à l'acquérir il y a peu de temps de ça, et je peux vous jurer qu'avant je ne comprenais rien à quoi pouvait servir un objet. Puis, au fil du temps ( et à force de pratiquer fréquemment du JS ), j'ai commencé à comprendre une multitude de choses et parmi celles-ci la notion d'objet.
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant

Qu'est-ce qu'un objet ?

Comme je vous l'ai dit dans l'introduction, des objets, vous en avez déjà vu et même utilisé.
Le javascript est fondé sur cette notion d'objet, et il est inutile de vous dire que si vous ne savez pas la manipuler un minimum, vous n'irez pas loin dans vos scripts. Même ceux qui n'arrivent pas à acquérir cette notion la comprennent, inconsciemment certes, mais ils la comprennent (en tout cas, si vous avez réussi à passer le chapitre sur les formulaires). J'ai préféré ne rien vous dévoiler sur les objets de peur que ça soit le bazar dans votre tête, et j'espère que j'ai fait le bon choix. Allez, fini la parlotte, je vous explique ce que sont ces fameux objets.

Vous rappelez-vous du chapitre sur les formulaires ? Vous savez, tout au début, je vous avais expliqué un truc avec comme exemple un personnage, et il fallait accéder à ses cheveux. Je vous remontre l'image.

Image utilisateur

Si vous avez compris ça, alors vous avez déjà acquis 70 % de la notion d'objet :p .

Imaginons que vous avez un groupe de 10 personnes devant vous. Chacune de ces personnes est différente et a des caractéristiques bien particulières. Celle qui est sur l'image en a plein. La couleur de la peau, la couleur des yeux, des cheveux, du tee-shirt, la taille des bras, des jambes, de la tête, du buste, ...

Eh bien en javascript, ce personnage est un objet. Et vous pouvez même le contrôler ! On peut d'abord faire les trucs classiques que vous avez déjà partiellement étudiés. Par exemple, pour savoir la couleur des cheveux de la personne, on devrait faire corps.tête.cheveux.couleur. Mais on peut aussi s'amuser à le faire bouger ! Eh oui, si je voulais qu'il tourne l'oeil gauche vers la droite, on devrait faire corps.tête.oeil_gauche.tourner_vers_la_droite(). Ça signifie que dans un objet, on peut utiliser des fonctions.

Et voilà : vous avez maintenant acquis 90 % de la notion d'objet ! :)

Un objet, c'est donc une sorte de variable qui contient plusieurs autres variables, et même des fonctions. Ceci étant dit, je vais essayer de vous faire comprendre les 10 % restants de la notion d'objet dans le sous-chapitre suivant : on va construire des objets.

Créer ses objets

Pour créer un objet, il suffit de déclarer une variable, et dans son contenu de mettre new Object(). Vous allez voir, c'est très simple.
Code : JavaScript
1
2
var mon_objet = new Object();
/* On crée l'objet mon_objet */

Et on fait quoi, une fois qu'on a créé l'objet ? Car on ne lui a pas attribué de valeur, non ?

Effectivement, on ne lui a pas attribué de valeur. Pour les curieux, dès qu'un objet est créé, il contient [object Object], et c'est un string (la valeur n'est donc pas [object Object], mais '[object Object]' ).

Où en étions-nous ? Ah oui, vous vouliez attribuer une valeur à un objet. Nous avons créé un objet, cela veut dire que ça fonctionne comme dans le chapitre sur les formulaires : il faut rajouter un point et le "sous-nom" de l'objet, et enfin indiquer sa valeur. Regardez bien : ça fonctionne comme une variable.
Code : JavaScript
1
2
3
4
5
/* Je me suis basé sur l'exemple du personnage */
var personnage = new Object();
personnage.vetement = 'tee-shirt';

document.write('Le personnage est habillé d\'un '+personnage.vetement);

Alors, c'est simple, non ? Et puis si vous avez envie de mettre plusieurs valeurs à un objet, vous pouvez le faire : il suffit juste de mettre un autre "sous-nom" à l'objet, et de lui attribuer une valeur.
Code : JavaScript
1
2
3
4
5
6
var personnage = new Object();
personnage.vetement = 'tee-shirt';
personnage.chaussures = 'tongs';

document.write('Le personnage est habillé d\'un '+personnage.vetement);
document.write('Au pied il porte des '+personnage.chaussures);

C'est bien beau ton truc, mais pourquoi créer un objet alors que l'on peut mettre des variables à la place ?

Ça, c'était la grosse question que je me posais avant d'avoir compris à quoi sert de créer un objet soi-même. C'est tout simplement une question de méthodologie. Ce chapitre, qui est porté sur la création d'un objet, vous pouvez vous en passer, car les objets que l'on crée nous-mêmes ne sont pas indispensables. Ce chapitre est surtout là pour vous aider à être méthodique, et aussi pour que vous compreniez de vous-mêmes des fonctionnalités que comporte un objet.

Le chaînage d'objets

Je ne sais pas si vous m'avez compris pour l'histoire de la méthodologie, mais c'était relativement important. Le message que je voulais faire passer était le suivant : les objets que l'on crée soi-même ne sont pas indispensables en javascript ; en revanche, ils sont pratiques dans certains cas.

Bon, je ferme la parenthèse, on retourne aux objets ) :p .
Pour l'instant, on a juste vu comment en créer un. Et si on en plaçait un dans un autre ? Comme ça, au lieu de personnage.couleur_des_yeux, vous pourrez faire un truc un peu plus logique (en tout cas en JS) du genre : personnage.tete.yeux.couleur. Regardez, c'est très simple.
Code : JavaScript
1
2
3
4
5
6
var personnage = new Object();
personnage.tete = new Object();
personnage.tete.yeux = new Object();
personnage.tete.yeux.couleur = 'bleu';

document.write('Le personnage a les yeux de couleur '+personnage.tete.yeux.couleur);

C'est super long à faire ! Je suis obligé d'appliquer cette méthode tout le temps ?

Non, et c'est un peu ça que j'aimerais que vous compreniez. Les tableaux, on les a étudiés, et ce n'est pas pour autant que vous les utilisez tout le temps. Les objets, c'est pareil, eux aussi sont une sorte de variable "personnalisée". Vous allez me demander quand on doit les utiliser. Voici la réponse :

Je préfère quand même vous dire que personnellement, les objets que l'on crée soi-même, je ne les utilise pas tous les jours. Pour vous donner une moyenne, j'en utilise environ 1 tous les 50 scripts environ (ce n'est pas beaucoup, comparé aux variables que j'utilise pratiquement à chaque script).

À propos des tableaux...



Je tiens à vous expliquer un point sur les objets. Vous voyez le mot new qu'on utilise avec la fonction Object pour créer un objet. C'est juste ce petit mot là qui sert à dire qu'on va créer un objet. Ensuite, la fonction Object se charge de le créer.

Ce que j'essaye d'expliquer est un peu flou, alors je vais prendre l'exemple des tableaux. Eh oui, un tableau est un objet, puisqu'il y a le mot new juste devant Array() ! Je vous parie que là, vous pensez nager dans du yaourt (ou autre chose), mais en réalité, vous êtes tout proches d'avoir compris.

Créons une fonction pour faciliter la création d'objets



Puisque je considère que vous êtes complètement perdus, je vais vous montrer comment marche le schmilblik via un script que je commenterai par la suite.
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
function creer_personnage(nom,vetement,age)
{
this.nom = nom;
this.vetement = vetement;
this.age = age;
}

var personnage1 = new creer_personnage('Marc','Pull',13);
var personnage2 = new creer_personnage('Pierre','Blouson',15);

document.write('Le premier personnage s\'apelle '+personnage1.nom+'<br/>');
document.write('Le deuxième personnage s\'apelle '+personnage2.nom+'<br/>');
document.write(personnage1.nom+' a '+personnage1.age+' ans<br/>');
document.write(personnage2.nom+' a '+personnage2.age+' ans<br/>');
document.write(personnage1.nom+' porte un '+personnage1.vetement+' tandis que '+personnage2.nom+' porte un '+personnage2.vetement);


Je vous rassure, si vous n'avez pas tout compris du premier coup, c'est normal. Prenez le temps de bien relire à votre rythme la partie que vous trouvez floue, vous comprendrez au bout de 2 ou 3 fois. ;)

Q.C.M.

Dans le script suivant, manipule-t-on un objet ?

Code : JavaScript
1
document.getElementsByTagName('p')[0].innerHTML = 'salut !';
Comment crée-t-on un objet ?
Que vaut mon_objet.sous_objet ? (question niveau débutant)

Code : JavaScript
1
2
var mon_objet = new Object();
mon_objet.sous_objet = 5;
Que vaut jean.panier.achat1 ?

Code : JavaScript
1
2
3
4
5
6
7
8
function achats_d_une_personne(achat1,achat2)
{
this.achat1 = achat1;
this.achat2 = achat2;
}

var jean = new Object();
jean.panier = new achats_d_une_personne('game cube','wii');

Statistiques de réponses au QCM


Ce chapitre avait son lot d'importance mais vous n'étiez pas obligé de le comprendre ni de le lire pour pouvoir avancer dans le tuto. Si vous n'avez pas compris à quoi servent les objets, et comment les exploiter comme je vous l'ai montré dans le dernier exemple, rassurez-vous. Oui, rassurez-vous car je suis sûr que vous pouvez comprendre en 2 ou 3 relectures, alors que moi j'ai dû mettre au moins 200 voir 300 jours avant d'avoir tout assimilé ( 200 jours = 8 mois :-° ). De ce fait, j'espère que j'ai mieux expliqué comment marchent les objets que dans les livres où j'ai voulu apprendre.

Allez c'est bon, vous avez passé le dernier chapitre compliqué du cours, enjoy ! Ah non, l'avant-dernier... j'avais oublié les expressions régulières :p
Chapitre précédent Sommaire Chapitre suivant
Retour en haut Retour en haut


Créé : le 28/06/2006 à 21:30:15
Modifié : le 22/08/2008 à 15:52:25
Avancement : 100%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 420 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0241s (0.0108s)