Partie 1:

Manipulez des données avec JavaScript

Partie 2:

Écrivez votre premier fichier JavaScript

Partie 3:

Faites interagir JavaScript avec une page web

Partie 4:

Créez un formulaire de saisie de données

Dans le chapitre précédent, vous avez appris à reconnaître différents types de variables qui permettent d’identifier une valeur à la fois. Mais comment faire pour identifier un élément avec plusieurs valeurs ? C’est le moment d’utiliser les objets !

Découvrez les objets en JavaScript

Déclarez un objet en JavaScript

Pour déclarer un objet en JavaScript, vous devez utiliser les accolades  { }  . Les propriétés d’un objet ont un nom et une valeur qui sont assignées avec deux points:. Les propriétés sont séparées entre elles par des virgules,.

Par exemple, pour déclarer l’objet monPersonnage qui représente le personnage fictif Bruce Wayne, 35 ans, dont la couleur préférée est le noir et qui adore sortir la nuit, vous écrirez :

let monPersonnage = {
nom: "Wayne",
prenom: "Bruce",
age: 35,
couleurPreferee: "noir",
hobbies: "sortir la nuit"
}

Ajoutez une propriété à un objet JavaScript

Un objet JavaScript peut être mis à jour au fur et à mesure de son évolution dans le code.

Par exemple, si vous vous rendez compte que l’objet monPersonnage a désormais un véhicule préféré, il vous faudra lui ajouter cette nouvelle propriété.

Pour ajouter une propriété, vous devez écrire le nom de votre objet, séparé par un point  .  avec le nom de votre nouvelle propriété :

monPersonnage.vehiculePrefere = "Batmobile"

Accédez à une propriété d’un objet JavaScript

Lorsque vous manipulez des objets JavaScript, vous avez également besoin d’accéder à leurs propriétés pour les stocker dans des variables, et les utiliser dans la suite de votre code ou dans un autre contexte.

Vous pouvez accéder à la valeur d’une propriété en utilisant le point  .  et par exemple, la stocker dans une variable.

Dans le cadre de l’objet monPersonnage, vous écrirez :

const nomDeMonPersonnage = monPersonnage.nom

// Vérification
console.log(nomDeMonPersonnage)
console.log(monPersonnage.nom)

Récapitulons en vidéo

Retrouvez les démonstrations de ce chapitre dans la vidéo ci-dessous :

À vous de jouer !

Et maintenant, entraînez-vous à manipuler des variables avec cet exercice CodePen.

Déclarez le nouveau ticket de cinéma

Un ticket de cinéma a plusieurs propriétés : un nom de film, un prix, un numéro de salle.

• Déclarez un objet ticket avec les propriétés suivantes :

  • nomFilm ;

  • prix ;

  • numeroSalle.

• Déclarez une variable nom avec votre nom. 

Affichez les informations sur la borne

• Affichez un message sur la borne : “Bonjour NOM, votre film NOMDEFILM est en salle NUMERODELASALLE”.

• Créez une variable texteAffichage qui contient cette phrase, avec NOM, NOMDEFILM et NUMERODELASALLE remplacés par leur vraie valeur.

• Vérifiez le résultat avec un console.log. 

Corrigé

Vous pouvez vérifier votre travail en consultant le corrigé et la vidéo ci-dessous : 

En résumé

• Un objet en JavaScript peut posséder plusieurs propriétés qui auront pour chacune d’elles une valeur.

• Pour déclarer un objet en JavaScript, vous devez utiliser les accolades  { }  .

• Pour ajouter ou récupérer une propriété, vous devez utiliser le point  .  .

Vous savez maintenant comment structurer des données grâce aux objets. Suivez-moi dans le chapitre suivant pour découvrir comment créer des tableaux.