L'essentiel de JavaScript

Travailler avec des objets

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Créez une variable complexe capable de contenir plusieurs informations. Vous allez utiliser un objet de JavaScript.

Transcription

Dans ce chapitre nous allons continuer l'exploration des variables en JavaScript par l'étude de différents types de données, que vous pouvez regarder comme étant différentes sortes de variables. Je vous propose de commencer par l'étude des objets. Pour faire simple, un objet est fait une variable unique qui est capable de contenir plusieurs données différentes. J'ai ici trois variables. La variable « playerName » qui est égale à « Fred », la variable « playerScore » qui est égale à 10.000 et la variable « playerRank » qui est égale à « 1 ». A y regarder de plus près, ces trois variables sont, en fait, trois propriétés d'une même entité que je pourrai appeler « player » et donc, plutôt que de créer trois variables différentes, je vais créer une variable unique que je vais appeler « player 1 » et que je vais rendre égale à un nouvel objet, comme ceci. Remarquez le « O » majuscule à « Object ». Je crée cet objet et puis je vais mettre des données dans cet objet. Je vais dire que « player1.name » est égal à « Fred », que « player1.Score » est égal à 10.000 et que « player1.Rank » est égal à « 1 ». J'ai maintenant une seule variable, un seul objet qui s'appelle « player1 » et qui contient toutes ces informations. La preuve, si je fais un « console.log » de mon objet « player1 », vous allez voir dans la console que mes trois pièces d'informations apparaissent ici. Remarquez la manière dont la console affiche cet objet. J'ai les accolades qui s'ouvrent et qui se ferment et puis j'ai les trois propriétés de cet objet qui sont séparées par des virgules. Ce que vous avez devant les yeux, c'est une notation raccourcie pour créer des objets. Plutôt que de faire quatre lignes de code pour créer cet objet et puis pour mettre des informations dedans, je peux tout faire en une seule ligne de code, avec une notation raccourcie. Pour ça je vais utiliser les accolades et, dans les accolades, je vais définir la première variable donc la première propriété de cet objet qui s'appelle « Name » et qui est égal à « Fred ». Remarquez que j'utilise « deux points » pour séparer le nom de la propriété de sa valeur, ensuite « virgule » pour créer la deuxième propriété donc c'est « Score », qui sera égal à 10.000, « Virgule » pour la troisième propriété, c'est « Rank » qui sera égal à un, dans ce cas-ci. Donc en une seule ligne de code-- si je rafraîchis ma page, voyez que j'ai exactement la même chose dans la console. --en une seule ligne de code, j'ai réussi à créer l'objet et à mettre des données dedans. Au niveau de la fonctionnalité, c'est exactement la même chose que les quatre lignes de code que j'avais avant. Donc ça, c'est pour un objet. Pour atteindre les différentes propriétés de cet objet, je peux faire «player1.Name» comme ceci donc dans la console j’obtiens « Fred » ou « player1.Rank » et dans la console j’obtiens « 1 ». Je vais à l'intérieur de cette variable « player1 » et j'accède à la propriété « Rank » de cet objet. Je vais créer maintenant un deuxième joueur. Je vais l'appeler tout simplement « player2 », je vais l'appeler « Sam », ce sera son prénom, il a un score un petit peu inférieur, de 5.000, et son « Ranking » on va dire que c'est 5 par exemple. Au niveau de ma console, je peux maintenant faire « player2.Rank », j’obtiens « 5 » ou « player2.Name » et, dans ce cas-là, vous voyez dans la console que j’obtiens « Sam ». C'est comme cela que je peux accéder à ses différentes propriétés. Alors, un objet peut avoir des propriétés et remarquez que je parle de propriétés, je ne parle plus de variables. En effet, la variable c'est l'objet « player1 ». Quand les différentes pièces d'information sont à l'intérieur d'un objet, on ne les appelle plus des variables mais des propriétés : « Name » n'est pas une variable, c'est une propriété de l'objet « player 1 ». C'est juste une question de vocabulaire mais c'est un peu la même chose. Donc plutôt que d'appeler ça des variables j'appelle ça des propriétés parce que c'est à l'intérieur d'un objet. En plus d'avoir des propriétés, ces objets peuvent également avoir des fonctions donc je peux associer des fonctions à un objet. Les propriétés de l'objet vont servir à décrire l'objet : le nom c'est « Fred », le score c'est « 10.000 ». Les fonctions que j'associe à un objet vont permettre de donner des comportements à cet objet. Je vais créer une fonction ici, avec le mot-clé « function », je vais l'appeler par exemple, « player Details », voilà. La signature de la fonction, je la développerai un petit peu plus tard, parce que ce que je vais faire, c'est associer cette fonction à mes objets. Je vais dire que « player1.logDetails » est égal à la fonction « player Details », comme ceci. Je vais faire la même chose avec mon joueur 2, avec mon « player2 », « player2.logDetails » est égal à « player Details » Maintenant si je fais un « console.log » de mon « player 2 », regardez, je retrouve toutes mes informations. J'ai oublié le « s » ici, donc je vais mettre un « s » à ma fonction, je sauvegarde, je rafraîchis. Et voilà mon objet qui est bel et bien dans ma console. « Sam », « 5000 » et « Ranks » sont les trois propriétés de cet objet. Vous voyez que j'ai un petit triangle qui apparaît ici. Le petit triangle m'indique que j'ai également une fonction qui est associée à cet objet, qui s'appelle donc « logDetails » à l'intérieur de cet objet. Quand une fonction est associée à un objet, on ne l'appelle plus « fonction », on l'appelle « méthode ». « logDetails » est une méthode de l'objet « player 1 » et également de l'objet « player 2 ». Je vais maintenant développer ma fonction, ma méthode. J'ai envie qu'elle fasse un « console.log » et j'ai envie qu'elle fasse un « console.log » du nom du joueur. Le nom du joueur ce sera soit « Fred », soit « Sam » selon que j'appelle cette fonction à partir de l'objet « player1 », ou à partir de l'objet « player2 ». Pour éviter toute confusion, j'ai un mot-clé dans JavaScript qui est le mot-clé « 10 ». Le mot-clé « 10 » va faire référence à l'objet actuellement en cours d'utilisation. Je vais mettre ici « 10.name », et puis je vais établir une concaténation. (On reviendra sur la concaténation un petit peu plus tard). Donc « A » a un score de 2 points et puis je vais mettre ici « +10.Score » comme ceci. « 10.Score », ce sera soit de 10.000, soit de 5.000, cela dépend si j'appelle cette fonction à partir du « player 1 » ou à partir du « player 2 ». On va tout de suite faire une petite expérience. Je vais retirer ce « console.log » ici et je vais appeler mes fonctions. Je vais mettre « player1.logDetails » et maintenant je vais utiliser mes parenthèses, pour bien dire au JavaScript que je veux exécuter cette fonction. Tout à l'heure vous voyez, que je n'avais pas mis les parenthèses parce qu'à ce moment-là, je ne voulais pas exécuter la fonction mais simplement associer cette fonction à mon objet. Maintenant j'exécute ces fonctions à partir de « player 1 » et regardez ce que ça donne au niveau de la console : « Fred » a un score de 10.000, puisque 10 fait référence à « player 1 ». « 10 point name » c'est « Fred », « 10 point score » c'est « 10.000 ». Par contre, si je fais maintenant « player2.logDetails », dans ma console j'ai « Sam » a un score de 5.000, puisque maintenant, « 10 » fait référence à « player2 » et donc « 10.Name » c'est « Sam » et « 10.Score » c'est 5.000. Voilà comment ça fonctionne en JavaScript. Si vous venez d'un langage de programmation orienté objet, ça vous paraît un petit peu bizarre, tout ce qu'on fait ici. Vous voyez qu'il n'y a pas beaucoup de règles en JavaScript, c'est beaucoup moins formel que ce que vous faites dans des langages véritablement orientés objet. JavaScript n'est pas un langage véritablement orienté objet, même s'il hérite de certaines de ses caractéristiques. Voilà donc pour les objets. Ce qu'il faut retenir c'est qu'un objet est une variable unique qui peut contenir plusieurs propriétés et plusieurs méthodes différentes.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !