Contenu principal
Cours : Apprendre à coder > Chapitre 1
Leçon 15: Les objetsRésumé : les objets
Voici un résumé de ce que nous avons couvert dans ce module sur les objets.
De nombreux types de valeurs peuvent être stockés dans des variables JavaScript, et parfois, on voudrait regrouper un ensemble de valeurs apparentées : c'est là qu'interviennent les objets !
Un objet est un type de donnée qui permet d'enregistrer un groupe de propriétés dans une seule variable. Pour créer un objet, nous déclarons une variable, comme habituellement, puis, nous utilisons des accolades pour entourer des paires de propriétés clé-valeur (nom-valeur) :
var nomObjet = {
nomPropriété: valeurPropriété,
nomPropriété: valeurPropriété,
...
};Voici un objet qui décrit Winston. Cet objet a deux propriétés :
ville et cheveux. Et chaque valeur de propriété est une chaîne de caractères :var winston = {
ville: "Mountain View, CA",
cheveux: "rasés"
};Voici un objet plus complexe qui décrit un chat, avec quatre propriétés :
age, couleurFourrure, aime, et dateAnniversaire.var lizzieLeChat = {
age: 18,
couleurFourrure: "gris",
aime: ["herbe-aux-chats", "lait"],
dateAnniversaire: {"mois": 7, "jour": 17, annee: 1994}
};Remarquez que les propriétés enregistrent des types de données différents :
age enregistre un nombre, couleurFourrure enregistre une chaîne de caractères, aime enregistre un tableau, et dateAnniversaire enregistre un autre objet. C'est l'aspect sympathique des objets (enfin... un des aspects sympathiques) : ils peuvent stocker d'autres objets en eux-mêmes ! Vous pouvez donc avoir des objets imbriqués pour décrire des données complexes.Vous pourriez aussi tomber sur des déclarations d'objets qui utilisent des guillemets autour des noms des propriétés, comme :
var winston = {
"ville": "Mountain View, CA",
"cheveux": "rasés"
};C'est équivalent à ce qu'on a vu avant sans les guillemets, mais c'est plus long à taper. La seule fois où vous aurez absolument besoin d'utiliser des guillemets, c'est lorsque vos noms de propriétés contiendront des espaces, comme :
var winston = {
"ses cheveux": "rasés"
};On doit utiliser des guillemets ici, car sinon, l'interpréteur JavaScript s'embrouillerait. Mon conseil : pour commencer, ne mettez pas d'espaces dans vos noms de propriétés ! Ainsi, vous n'aurez jamais à mettre de guillemets autour des noms de propriétés.
Accéder à des propriétés d'objet
Un objet est inutile si on ne peut pas regarder à l'intérieur pour récupérer les valeurs des différentes propriétés. On peut faire ça de deux façons : premièrement, en utilisant ce qu'on appelle la " notation pointée", qui consiste à écrire le nom de la variable, qu'on fait suivre d'un ".", puis, le nom de la propriété :
var winston = {
ville: "Mountain View, CA",
cheveux: "rasés"
};
text("Winston est de " + winston.hometown, 100, 100);
text("Winston a les cheveux " + winston.hair, 100, 150);On peut aussi utiliser la "notation avec crochets", qui est similaire à celle qu'on utilise pour accéder aux éléments de tableaux, consistant à écrire le nom de la variable, puis des crochets qui encadrent le nom de la propriété entre guillemets :
var saVille = winston["ville"];
var sesCheveux = winston["cheveux"];Si on essaie d'accéder à une propriété qui n'existe pas, on obtiendra "undefined" (indéfini en français) :
text("Le but dans la vie de Winston est de " + winston.butDansLaVie, 100, 150);Modifier des propriétés d'objet
De la même façon qu'on peut stocker d'autres types de données dans une variable, on peut modifier les valeurs des propriétés des objets à n'importe quel moment dans notre programme, en utilisant les notations pointée ou avec crochets :
winston.cheveux = "bouclés"; // Winston a une perruque !On peut aussi ajouter de nouvelles propriétés !
winston.butDansLaVie = "comprendre le JavaScript";Si nous en avons terminé avec une propriété, on peut la supprimer (même si la plupart du temps, on modifiera juste sa valeur) :
delete winston.cheveux;Les tableaux d'objets
Maintenant que vous connaissez et les tableaux et les objets, vous pouvez les combiner pour créer des tableaux d'objets, qui offrent un moyen vraiment pratique de stocker des données dans un programme. Par exemple, un tableau de chats :
var mesChats = [
{nom: "Lizzie", age: 18},
{name: "Démon", age: 1}
];
for (var i = 0; i < mesChats.length; i++) {
var monChat = mesChats[i];
println(monChat.nom + ' a ' + monChat.age + ' an(s).');
}Remarquez qu'on parcourt un tableau d'objets de la même façon qu'on parcourt un tableau de nombres ou un tableau de chaînes de caractères, en utilisant une boucle for. À chaque itération, on accède à l'élément courant en utilisant la notation avec crochets, puis, on accède aux propriétés de cet élément de tableau (un objet) avec la notation pointée.
Voici un autre exemple pratique que vous pourriez utiliser dans vos programmes, un tableau de coordonnées :
var positions = [
{x: 200, y: 100},
{x: 200, y: 200},
{x: 200, y: 300}
];
for (var i = 0; i < positions.length; i++) {
var position = positions[i];
ellipse(position.x, position.y, 100, 100);
}C'est plutôt joli, n'est-ce pas ? Les objets peuvent être déroutant au début, mais utilisez-les, car finalement vous en deviendrez accro et transformerez tout en objet !
Vous souhaitez rejoindre la discussion ?
Attention,en traduisant les noms des variables (dans les encarts bleu) en français, certaines ont été oublié.
var winston = {
ville: "Mountain View, CA", (ici ville)
cheveux: "rasés"
};
(et là hometown)
text("Winston est de " + winston.hometown, 100, 100);
text("Winston a les cheveux " + winston.hair, 100, 150);
Plus bas même problème avec le nom du chat, une fois "nom" (pour Lizzi), et une autre "name" (pour Démon)(8 votes)
j'aimerais savoir si on veut faire apparaitre un élement en boucle de haut en bas... quelle procedure on doit faire pour que cela arrive toujours d'un meme sens: haut vers le bas!! et quelle boucle utiliser?(2 votes)
Il faut que tu suives le cours: "Instructions conditionnelles"
lien: https://fr.khanacademy.org/computing/computer-programming/programming/logic-if-statements/p/if-statements(2 votes)