Dans ce laboratoire (Lab), vous plongerez dans le monde du développement web du point de vue d'Alex, un jeune développeur web chargé de créer un outil de suivi financier personnel dynamique. L'objectif est de construire une application conviviale permettant aux utilisateurs d'entrer et de suivre leurs dépenses et revenus quotidiens. Le but est clair - développer une interface à la fois intuitive et attrayante, afin que les utilisateurs puissent facilement gérer leurs finances sans aucun problème. Ce projet vise non seulement à simplifier la gestion des finances personnelles, mais aussi à vous initier aux concepts fondamentaux de JavaScript et de la manipulation du DOM (Document Object Model).
Nous travaillerons sur 5 laboratoires pour terminer le projet EconoMe.
Points de connaissances:
Déclarations de variables (let, const)
Principes de base de la manipulation du DOM (récupération d'éléments, modification du contenu des éléments)
Écoute d'événements (addEventListener)
Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau intermédiaire avec un taux de réussite de 65%. Il a reçu un taux d'avis positifs de 97% de la part des apprenants.
JavaScript de base
JavaScript est un langage simple, orienté objet et piloté par les événements. Il est téléchargé du serveur vers le client et exécuté par le navigateur.
Il peut être utilisé avec HTML et sur le Web, et plus largement sur les serveurs, les PC, les ordinateurs portables, les tablettes et les smartphones.
Ses caractéristiques incluent :
Généralement utilisé pour écrire des scripts côté client.
Principalement utilisé pour ajouter des comportements interactifs dans les pages HTML.
C'est un langage interprété, exécuté au fur et à mesure de son interprétation.
Alors, comment inclure JavaScript dans HTML?
La méthode d'inclusion est similaire à celle de CSS et peut se faire de trois manières :
Directement dans les balises HTML, pour des codes JavaScript particulièrement courts.
En utilisant la balise <script>, le code JavaScript peut être intégré dans la section <head> et <body> du document HTML.
En utilisant un fichier JavaScript externe, écrire le code de script JavaScript dans un fichier avec l'extension .js et l'inclure en définissant l'attribut src de la balise <script>.
Par exemple, si nous appuyons sur F12, nous pouvons voir que de nombreux fichiers JavaScript externes sont inclus dans cette page, et en cliquant sur Event Listeners (Écouteurs d'événements), nous pouvons observer qu'il y a de nombreux types d'événements dans la page.
Maintenant, ajoutons la balise <script> à ~/project/index.html pour inclure le fichier script.js.
Les variables peuvent être considérées comme des conteneurs pour stocker des informations. En programmation, nous utilisons les variables pour stocker des valeurs de données. JavaScript est un langage à typage dynamique, ce qui signifie que vous n'avez pas besoin de déclarer le type d'une variable. Le type sera déterminé automatiquement lors de l'exécution du programme.
Déclaration de variables
En JavaScript, vous pouvez utiliser les mots-clés var, let ou const pour déclarer des variables :
var : Avant ES6, var était le principal moyen de déclarer des variables, et il a une portée de fonction (function scope).
let : Introduit dans ES6, let vous permet de déclarer des variables locales à portée de bloc (block-scoped).
const : Également introduit dans ES6, utilisé pour déclarer une constante qui ne peut pas être modifiée une fois déclarée.
Par exemple :
var name = "Alice"; // Utilisation de var pour déclarer une variable
let age = 30; // Utilisation de let pour déclarer une variable
const city = "London"; // Utilisation de const pour déclarer une constante
Types de variables
En JavaScript, il existe plusieurs types de données différents :
Chaîne de caractères (String) : Données textuelles, comme "Hello, World!".
Nombre (Number) : Entiers ou nombres à virgule flottante, comme 42 ou 3.14.
Booléen (Boolean) : true ou false.
Objet (Object) : Peut stocker plusieurs valeurs ou des structures de données complexes.
null et undefined : Types spéciaux représentant respectivement "aucune valeur" et "valeur non définie".
Utilisation des variables
Une fois les variables déclarées, vous pouvez les utiliser dans votre programme :
console.log(name); // Affiche : Alice
console.log("Age: " + age); // Affiche : Age: 30
console.log(city + " is a beautiful city"); // Affiche : London is a beautiful city
La méthode statique console.log() affiche un message dans la console.
Le DOM (Document Object Model - Modèle Objet du Document) est une interface multiplateforme et indépendante du langage qui considère les documents HTML et XML comme une structure d'arbre, où chaque nœud est une partie du document, comme les éléments, les attributs et le contenu textuel.
Accès aux éléments du DOM
Pour manipuler le contenu d'une page web, vous devez d'abord accéder aux éléments de l'arbre DOM. Vous pouvez utiliser diverses méthodes pour accéder aux éléments, par exemple par leur identifiant (ID), leur nom de classe ou leur nom de balise :
let elementById = document.getElementById("elementId"); // Accéder à un élément par son ID
let elementsByClassName = document.getElementsByClassName("className"); // Accéder à une collection d'éléments par leur nom de classe
let elementsByTagName = document.getElementsByTagName("tagName"); // Accéder à une collection d'éléments par leur nom de balise
Ajoutez le code suivant au fichier ~/project/script.js du projet EconoMe :
Une fois que vous avez une référence à un élément, vous pouvez modifier son contenu. Les propriétés innerHTML et textContent sont couramment utilisées à cet effet.
Par exemple, pour insérer <p>New HTML content</p> dans un élément div avec id=content et remplacer "Hello" par "New text content" dans un élément span avec id=info, vous utiliseriez le code JavaScript suivant :
Ajout et suppression d'éléments
Vous pouvez ajouter ou supprimer dynamiquement des éléments sur la page en utilisant JavaScript.
Par exemple :
// Créer un nouvel élément
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // Ajouter le nouvel élément au corps du document
document.body.removeChild(newElement); // Supprimer l'élément du corps du document
Dans un document HTML, la méthode document.createElement() crée l'élément HTML.
La méthode document.body.appendChild() ajoute le nouvel élément à la fin de l'élément <body>.
La méthode document.body.removeChild() supprime l'élément de l'élément <body>.
Les écouteurs d'événements (event listeners) vous permettent de répondre aux actions des utilisateurs.
addEventListener("event", function () {});
Par exemple, aux clics, aux survols ou aux appuis sur les touches :
elementById.addEventListener("click", function () {
console.log("Element was clicked!");
});
Après avoir appris les opérations de base sur le DOM, vous pouvez ajouter le code suivant au fichier ~/project/script.js du projet EconoMe :
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("record-form");
const recordsList = document.getElementById("records-list");
const totalIncomeEl = document.getElementById("total-income");
const totalExpenseEl = document.getElementById("total-expense");
const balanceEl = document.getElementById("balance");
let draggedIndex = null; // Index de l'élément déplacé
});
L'événement DOMContentLoaded en JavaScript est déclenché lorsque le document HTML initial a été entièrement chargé et analysé, sans attendre que les feuilles de style, les images et les sous - cadres aient terminé de charger. Cela en fait un événement important pour exécuter le code JavaScript dès que le DOM est prêt, garantissant que le script interagit avec les éléments HTML entièrement analysés.
Ce laboratoire ne nécessite pas de prévisualiser l'effet à ce stade. Nous le reviendrons après avoir terminé le code dans les étapes suivantes.
Dans ce laboratoire, vous avez entrepris la construction d'une partie de base mais essentielle d'un outil de suivi des finances personnelles avec Alex. Vous avez préparé le terrain pour une application web dynamique en configurant l'environnement de projet et en utilisant JavaScript pour manipuler le DOM, affichant ainsi les états financiers initiaux. Le point clé est de comprendre comment JavaScript interagit avec les éléments HTML pour modifier dynamiquement le contenu d'une page web, posant ainsi les bases pour des fonctionnalités plus interactives dans les étapes suivantes.
Cette approche pratique non seulement consolide votre compréhension de JavaScript et de la manipulation du DOM, mais elle simule également des scénarios de développement web réels, vous préparant ainsi à des projets plus complexes à venir.
