Tableaux et objets

Introduction

Dans ce laboratoire, nous suivons Alex dans leur parcours en tant que développeur web dans une startup technologique. La scène se déroule dans l'espace de travail de l'équipe de développement, où Alex est chargé d'améliorer le suivi des finances personnelles en incorporant la capacité de gérer plusieurs enregistrements financiers. Cette fonctionnalité cruciale nécessite que Alex plonge dans les tableaux et les objets de JavaScript, en stockant chaque enregistrement financier sous forme d'un objet dans un tableau. L'objectif est de créer une application dynamique et interactive qui ne seulement suit mais également organise efficacement les données financières des utilisateurs. Grâce à cet effort, Alex vise à fournir aux utilisateurs une vue claire de leurs activités financières, rendant ainsi l'application plus utile et attrayante.

Dans ce laboratoire, nous devons stocker les enregistrements comptables en manipulant les tableaux et les objets. L'accent est mis sur la compréhension de la manière d'utiliser les tableaux pour stocker des objets et d'ajouter de nouveaux éléments à un tableau.

Points de connaissance:

• Manipulation de tableaux (création, parcours, ajout d'éléments)
• Objets (création d'objets, accès et définition de propriétés)

Fonctions

Ce laboratoire inclura quelques extraits de code JavaScript de base pour vous aider à comprendre les concepts. Vous pouvez exécuter ces extraits dans la console du navigateur ou dans l'environnement Node.js.

1. Ouvrez la console du navigateur en cliquant droit sur la page web et en sélectionnant "Inspecter" ou en appuyant sur F12.
2. Ouvrez l'environnement Node.js en exécutant la commande node dans le terminal.

Fonction

Une fonction en JavaScript est un bloc de code conçu pour effectuer une tâche ou calculer des valeurs. Les fonctions sont définies à l'aide du mot clé function:

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Alice")); // sortie: "Hello, Alice!"

Ici, la fonction greet prend un paramètre name et renvoie un message de salutation.

Fonction fléchée

Les fonctions fléchées, introduites en ES6, offrent une manière plus concise d'écrire des fonctions. Elles sont particulièrement utiles pour les expressions de fonction anonyme:

const greet = (name) => "Hello, " + name + "!";
console.log(greet("Bob")); // sortie: "Hello, Bob!"

Les fonctions fléchées lient automatiquement la valeur de this du contexte actuel, ce qui est utile pour les fonctions de rappel et la chaîne de méthodes.

Opérations sur les tableaux

Un tableau en JavaScript est un objet utilisé pour stocker plusieurs valeurs.

Création d'un tableau

let fruits = ["Apple", "Orange", "Cherry"];

Les tableaux JavaScript sont indexés à partir de 0 : le premier élément d'un tableau se trouve à l'index 0, le second à l'index 1, et ainsi de suite - et le dernier élément se trouve à la valeur de la propriété length du tableau diminuée de 1.

Chaque index correspond à un élément unique du tableau.

Alors, comment lisons-nous les éléments du tableau?

Parcours d'un tableau

Utilisez la méthode forEach pour parcourir un tableau.

La méthode forEach prend une fonction de rappel qui prend deux paramètres : value et index.

Par exemple, pour afficher chaque élément du tableau fruits :

fruits.forEach(function (value, index) {
  console.log(index, value);
});

Ajout d'éléments

Utilisez la méthode push pour ajouter un élément à la fin d'un tableau.

Par exemple, ajoutons une grappe de raisin au tableau fruits.

fruits.push("Grape");
console.log(fruits);

Objets

Les objets sont des briques fondamentales en JavaScript, utilisés pour stocker des paires clé-valeur.

Création d'un objet

let person = {
  name: "Alice",
  age: 30
};

Accès et définition de propriétés

Vous pouvez accéder aux propriétés d'un objet en utilisant la notation point (.) ou la notation crochets ([]) :

console.log(person.name); // Utilisation de la notation point

person["age"] = 31; // Utilisation de la notation crochets pour définir une propriété
console.log(person.age);

Comprenant l'utilisation de base des tableaux et des objets, commençons à affiner le code du projet.

Création et stockage des enregistrements financiers

Dans cette étape, vous allez travailler avec Alex pour créer une structure pour stocker les enregistrements financiers sous forme d'objets dans un tableau. Cette configuration constituera le pilier du système de gestion des données du suivi des finances, permettant des mises à jour dynamiques et des manipulations des enregistrements financiers.

Tout d'abord, définissons à quoi ressemble un enregistrement financier. Chaque enregistrement aura une description, un montant et un type (revenu ou dépense). Ouvrez votre script.js et commençons par créer un tableau pour stocker ces enregistrements :

let records = [];

Ensuite, créez une fonction pour ajouter de nouveaux enregistrements à ce tableau. Chaque enregistrement sera un objet :

const addRecord = (description, amount, type) => {
  records.push({ description, amount, type });
};

Vous ne voyez rien sur la page pour le moment, car nous n'avons pas terminé la fonction qui écoute la soumission.

Définissez form.addEventListener("submit", (e) => {}) dans ~/project/script.js pour écouter les interactions lorsqu'on clique sur le bouton Ajouter.

// Écouteur d'événement pour la soumission du formulaire pour ajouter un nouvel enregistrement
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const description = document.getElementById("description").value;
  const amount = document.getElementById("amount").value;
  const type = document.getElementById("type").value;
  addRecord(description, amount, type);
});

• La méthode preventDefault() de l'interface Event indique à l'agent utilisateur que si l'événement n'est pas explicitement traité, son action par défaut ne doit pas être effectuée comme elle le ferait normalement.
• La propriété value de l'interface HTMLDataElement renvoie une chaîne de caractères reflétant la valeur de l'attribut HTML.

À ce stade, si vous ajoutez la fonction addRecord et console.log(records);, vous pouvez voir que les données ajoutées à l'enregistrement seront enregistrées dans records.

Si nous voulons afficher les enregistrements ajoutés au registre, nous devons créer la fonction renderRecords, mais avant de le faire, nous devons en apprendre plus sur la chaîne de gabarit.

Chaîne de gabarit

Les chaînes de gabarit sont définies à l'aide de accents graves (`) et peuvent contenir des emplaceholders sous la forme ${expression}, où expression peut être n'importe quelle expression JavaScript valide.

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // Sortie : Hello, Alice!

Interpolation de variables

Les chaînes de gabarit intègrent commodément les valeurs de variables dans la chaîne, simplifiant la construction d'informations de chaîne dynamique.

let age = 25;
let message = `She is ${age} years old.`;
console.log(message); // Sortie : She is 25 years old.

Gestion des chaînes multilignes

En JavaScript traditionnel, la gestion des chaînes multilignes nécessite souvent d'utiliser des antislashes ou la concaténation de chaînes. Les chaînes de gabarit offrent une manière plus concise de gérer le texte multiligne.

let poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;
console.log(poem);

Affichage des enregistrements financiers

Maintenant que Alex a mis en place un moyen de stocker les enregistrements financiers, l'étape suivante est d'afficher dynamiquement ces enregistrements sur la page web. Vous allez apprendre à itérer sur le tableau d'enregistrements financiers et à les afficher chacun comme partie de l'interface utilisateur du suivi des finances.

Ensuite, dans script.js, créez une fonction pour afficher ces enregistrements :

const renderRecords = () => {
  recordsList.innerHTML = "";
  records.forEach((record, index) => {
    const recordElement = document.createElement("div");
    recordElement.classList.add("record-item");
    recordElement.innerHTML = `
                ${record.description} - ${record.amount} (${record.type}) <button onclick="deleteRecord(${index})">Delete</button>
            `;
    recordsList.appendChild(recordElement);
  });
};

Après avoir ajouté vos enregistrements de test, appelez renderRecords pour les voir affichés sur la page :

renderRecords();

Cette fonction itère sur le tableau financialRecords, crée un nouveau paragraphe pour chaque enregistrement et l'ajoute au conteneur désigné sur la page web.

Sommaire

Dans ce laboratoire, vous avez suivi Alex pour faire de grands pas vers la transformation du suivi des finances personnelles en une application robuste. En apprenant à utiliser les tableaux et les objets, vous avez permis à l'application de stocker et d'afficher dynamiquement plusieurs enregistrements financiers. Cela améliore non seulement la fonctionnalité de l'application, mais vous initie également à la gestion de structures de données complexes en JavaScript, une compétence cruciale en développement web.

Grâce à cette expérience pratique, vous avez vu comment les tableaux et les objets peuvent travailler ensemble pour organiser et manipuler les données d'une manière significative. Cette connaissance de base ouvre la voie à des améliorations ultérieures, telles que l'ajout d'interactivité et de persistance des données, dans la phase de développement à venir.