Retour au portfolio

JavaSript

Les objets :

Un Object (objet, en français) est un conteneur qui permet de stocker plusieurs valeurs en une seule fois, plutôt que de devoir stocker séparément nos valeurs dans plusieurs variables différentes.

Un object se déclare comme pour une variable, sauf qu'après le signe égal, on ne met pas une valeur, mais on ouvre les accolades et on y insère les propriétés, les propriétés sont représentées par leurs noms et leurs valeurs.
Les propriétés d’un objet ont donc un nom et une valeur qui sont assignés avec deux points (:) et sont séparées entre elles par des virgules (,).

Exemple :

let obj = {
prenom: "Éric",
lieu: "Arcachon",
age: 25,
fatigue: true,};

On peut y ajouter une nouvelle propriété dans l'object, pour cela, vous devez écrire le nom de votre object, séparé par un point (.) avec le nom et la valeur de votre nouvelle propriété, exemple :

obj.véhicule = "voiture"; 
// vous pouvez aller vérifier dans la console, la nouvelle propriété a été ajoutée dans l'object

On peut aussi modifier une valeur dans l'object comme ceci :

obj.prenom = "Marcel"; // "Éric" prendra la valeur "Marcel"

Pour accéder à l'object, on sélectionne l'oject en indiquant son nom dans le console.log :

console.log(obj); //affiche les propriétés de l'object 

Pour accéder à une seule propriété d’un object, on indique le nom de l'object suivi d'un point et le nom de la propriété.

console.log(obj.lieu); // affiche Arcachon

on peut stocker une propriété d'un objet dans une nouvelle variable, on créer la variable et on lui indique la propriété qu'elle doit prendre, exemple :

let nouvelleVariable = obj.prenom;

Vérification de la propriété "prenom" dans l'objet et dans la nouvelle variable :

console.log(obj.prenom); // affiche "Jérôme"
console.log(nouvelleVariable); // affiche aussi "Jérôme"

Les tableaux :

Un array (tableau, en français) peut également être considéré comme un "objets de type liste" qui permet de lister plusieurs valeurs, à différence que dans un "object" la valeur est associée à son nom, dans un tableau, la valeur sera associée à un simple index (numéro de clé).

Un array se déclare comme pour une variable sauf qu'après le signe égal, on ne met pas une valeur, mais on ouvre les crochets droits et l'on y insère les valeurs qui sont séparées par des virgules (,).

Voici un exemple ci-dessous :

let user1 = ['Éric', 34, true, "Arcachon"];

Pour accéder à une propriété d’un array, on lui indique le nom du array suivi du numéro d'index, exemple :

console.log(user1[0]); // affiche "Éric", sachez que les "index" commence toujours à zéro.

Un array peut également être multidimensionnel, c'est-à-dire être composé de plusieurs tableaux dans un même tableau, exemple :

let user2 = ['Marcel', 43, true, "Archon", [5, 3, 4]];

On va vérifier dans un console.log la valeur que nous indique la deuxième valeur du deuxième tableau comme ceci:

console.log(user2[4][1]); // affiche "3"

Plus précisément, on lui demande l'index 4 dans le premier array, sachant que les array commencent à l'index 0, celui-ci nous emmène donc dans le second array, ensuite on lui demande l'index 1, si on décompose le array, cela nous donne :

[0 = "marcel",
 1 = 43,
 2 = true,
 3 = "Arcachon",
 4 = [ 0 = 5,
      1 = 3,
      2 = 4 ]] // donc l'index 4 correspond au second array et l'index 1 correspond à la valeur 3 

On peut également stocker des variables dans notre tableau, voici un exemple :

let firstVariable = "je suis le n°1";
let secondVariable = "je suis le n°2";
let thirdVariable = "je suis le n°3";

let listValues = [firstVariable, secondVariable, thirdVariable];
console.log(listValues); // affiche "je suis le n°1", "je suis le n°2", "je suis le n°3"

Pour connaître le nombre d’éléments que contient notre tableau, on doit accéder à la propriété length, en utilisant le point (.) après le nom de la varriable , cette propriété est préétablie par JavaScript, elle est donc automatiquement disponible pour tous les tableaux, voici un exemple :

let sequence = [1, 1, 2, 3, 5, 8, 13, 7];
console.log(sequence.length); // affiche "8", le nombre d'élément que contient le tableau

Les tableaux sont des conteneurs, comme les objets, pour effectuer des actions sur les données stockées dans notre tableau (ajouter, supprimer des données…), on utilisera des méthodes.
Les méthodes s’utilisent avec des parenthèses ( ), à l’intérieur de ces parenthèses on peut passer des valeurs, c'est-à-dire des données, qui serviront à la méthode pour modifier les données de notre tableau.

Pour ajouter des données à un array, on doit utiliser la méthode push en lui indiquant la valeur qu'on souhaite lui ajouter, on va utiliser l'astuce pour mieux se repérer dans cet exemple :

let listName1 = ["Laurent", "Jérome", "Christophe"];
console.log(listName1); // affiche "Laurent", "Jérome", "Christophe" 

listName1.push("Benoit") // on rajoute une nouvelle valeur
console.log("test1", listName1); // affiche "Laurent", "Jérome", "Christophe", "Benoit"

listName1.push("Jaques", "Marcel") // on peut rajouter plusieurs valeurs
console.log("test2", listName1); 
// affiche "Laurent", "Jérome", "Christophe", "Benoit", "Jaques", "Marcel"

Par défault, javascript rajoute les éléments à la fin du tableau, pour le rajouté au début du tableau, on utilise la méthode unshift, voici un exemple :

let listName2 = ["Laurent", "Jérome", "Christophe"];
console.log(listName2); // affiche "Laurent", "Jérome", "Christophe" 

listName2.unshift("Patrice") // on rajoute une nouvelle valeur
console.log("test3", listName2); // affiche "Patrice", "Laurent", "Jérome", "Christophe"

Pour supprimer des données d'un tableau, on doit utiliser la méthode pop, voici un exemple :

let listName3 = ["Laurent", "Jérome", "Christophe", "Benoit"];
console.log(listName3); // affiche "Laurent", "Jérome", "Christophe", "Benoit"

listName3.pop();
console.log("test4", listName3); // affiche "Laurent", "Jérome", "Christophe"

Par défault, javascript supprime l'élément à la fin du tableau, pour le supprimé au début du tableau, on utilise la méthode shift, voici un exemple :

let listName4 = ["Laurent", "Jérome", "Christophe"];
console.log(listName4); // affiche "Laurent", "Jérome", "Christophe" 
                
listName4.shift() // 
console.log(listName4); // affiche "Jérome", "Christophe"

~~ Fin ~~