Dans ce laboratoire, situé dans la dynamique scène des startups du "FinTech Valley", vous allez prendre la place d'Alex, un jeune ingénieur logiciel chargé d'améliorer le système de suivi financier d'une société de technologies en rapide croissance. L'équipe financière de l'entreprise a besoin d'un moyen dynamique de visualiser l'état financier global de l'organisation. Votre objectif est d'implémenter une fonctionnalité dans leur application de comptabilité basée sur le web existante qui calcule et affiche le revenu total, les dépenses totales et le solde net, fournissant des informations financières en temps réel.
Points de connaissance:
Array.prototype.filter()
Array.prototype.reduce()
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"])
javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"])
javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"])
javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"])
javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods")
javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions")
javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation")
javascript/ToolsandEnvironmentGroup -.-> javascript/web_storage("Web Storage")
subgraph Lab Skills
javascript/array_methods -.-> lab-290732{{"Mise en œuvre du bilan"}}
javascript/higher_funcs -.-> lab-290732{{"Mise en œuvre du bilan"}}
javascript/dom_manip -.-> lab-290732{{"Mise en œuvre du bilan"}}
javascript/web_storage -.-> lab-290732{{"Mise en œuvre du bilan"}}
end
Filter and Reduce
Les méthodes Array.prototype.filter() et Array.prototype.reduce() de JavaScript sont des outils puissants pour la manipulation d'ensembles, rendant le traitement des données plus efficace et concise. Ces méthodes sont respectivement utilisées pour filtrer les éléments d'un ensemble et pour accumuler les valeurs des éléments d'un ensemble.
Filter
La méthode filter() crée un nouvel ensemble avec tous les éléments qui passent le test implémenté par la fonction fournie. Elle ne modifie pas l'ensemble original mais renvoie un nouvel ensemble.
Syntaxe :
let result = array.filter(function (element, index, array) {
// Condition de test
return true; // ou false
});
element : L'élément actuel en cours de traitement dans l'ensemble.
index (optionnel) : L'index de l'élément actuel.
array (optionnel) : L'ensemble sur lequel filter est appelé.
Par exemple, filtrer les nombres supérieurs à 10.
let numbers = [5, 12, 8, 130, 44];
let filtered = numbers.filter(function (number) {
return number > 10;
});
console.log(filtered); // Sortie : [12, 130, 44]
Reduce
La méthode reduce() exécute une fonction réductrice (que vous fournissez) sur chaque élément de l'ensemble, donnant en résultat une seule valeur de sortie.
Syntaxe :
let result = array.reduce(function (
accumulator,
currentValue,
currentIndex,
array
) {
// Retourner le résultat accumulé
return accumulator + currentValue;
}, initialValue);
accumulator : Accumule les valeurs de retour de la fonction de rappel ; c'est la valeur accumulée précédemment renvoyée dans la dernière invocation de la fonction de rappel, ou initialValue, si elle est fournie.
currentValue : L'élément actuel en cours de traitement dans l'ensemble.
currentIndex (optionnel) : L'index de l'élément actuel en cours de traitement.
array (optionnel) : L'ensemble sur lequel reduce a été appelé.
Par exemple, calculer la somme de tous les nombres d'un ensemble.
let numbers = [5, 12, 8, 130, 44];
let total = numbers.reduce(function (accumulator, number) {
return accumulator + number;
}, 0);
console.log(total); // Sortie : 199
Ayant à l'esprit l'utilisation de ces deux méthodes, l'étape suivante consiste à calculer le total de vos revenus et dépenses.
Implémenter la logique de calcul du bilan
Dans cette étape, vous allez implémenter la logique pour calculer le revenu total, les dépenses totales et le solde. Cela implique d'ajouter des fonctions JavaScript qui parcourent les enregistrements des transactions, additionnent les revenus et les dépenses et calculent le solde net.
Écrivez ce qui suit dans script.js :
document.addEventListener("DOMContentLoaded", function () {
const updateSummary = () => {
const totalIncome = records
.filter((record) => record.type === "income")
.reduce((acc, record) => acc + parseFloat(record.amount), 0);
const totalExpense = records
.filter((record) => record.type === "expense")
.reduce((acc, record) => acc + parseFloat(record.amount), 0);
const balance = totalIncome - totalExpense;
totalIncomeEl.textContent = `Total Income: ${totalIncome}`;
totalExpenseEl.textContent = `Total Expense: ${totalExpense}`;
balanceEl.textContent = `Balance: ${balance}`;
};
// Function to save records to localStorage and update the UI
const saveRecords = () => {
localStorage.setItem("records", JSON.stringify(records));
renderRecords();
updateSummary();
};
renderRecords();
updateSummary();
});
Cette fonction JavaScript, updateSummary, calcule le revenu total et les dépenses à partir du tableau records et met à jour le solde. Elle met ensuite à jour le contenu textuel des éléments HTML respectifs dans la section de synthèse.
Dans ce laboratoire, vous avez entrepris un voyage dans le paysage financier d'une startup du "FinTech Valley". Vous avez joué le rôle d'Alex, améliorant un outil de comptabilité basé sur le web pour fournir des synthèses financières en temps réel. En intégrant une fonction de synthèse dynamique, vous avez permis à l'équipe financière de prendre immédiatement connaissance de l'état financier de l'entreprise, illustrant le pouvoir de la combinaison de HTML, CSS et JavaScript pour créer des applications web interactives et informatives. Grâce à cette expérience, vous avez appris à manipuler le DOM à l'aide de JavaScript et amélioré votre compréhension du développement d'applications dans le monde réel.
We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy