Introduction

Dans ce laboratoire, vous entrerez dans le monde du développement Web à travers les yeux d'Alex, un développeur Web en herbe chargé de créer un outil de suivi dynamique des finances personnelles. Créer une application conviviale qui permet aux utilisateurs de saisir et de suivre leurs dépenses et revenus quotidiens. L'objectif est clair : développer une interface à la fois intuitive et attrayante, garantissant que les utilisateurs peuvent gérer facilement leurs finances sans aucun problème. Ce projet vise non seulement à simplifier la gestion des finances personnelles mais également à vous présenter les concepts fondamentaux de la manipulation JavaScript et DOM.

Nous travaillerons dans 5 laboratoires pour mener à bien le projet EconoMe.

Points de connaissances :

• Déclarations de variables (let, const)
• Bases de la manipulation DOM (obtention d'éléments, modification du contenu des éléments)
• Écoute d'événements (addEventListener)

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 le Web, et plus largement sur les serveurs, PC, ordinateurs portables, tablettes et smartphones.

Ses caractéristiques comprennent :

• Généralement utilisé pour écrire des scripts côté client.
• Principalement utilisé pour ajouter un comportement interactif dans les pages HTML.
• C'est un langage interprété, exécuté tel qu'il est interprété.

Alors, comment inclure JavaScript dans HTML ?

La méthode d'inclusion est similaire au CSS et peut être effectuée de trois manières :

• Directement dans les balises HTML, pour du code JavaScript particulièrement court.
• À l'aide de la balise
• À l'aide d'un fichier JavaScript externe, écrivez le code du script JavaScript dans un fichier avec un suffixe .js et incluez-le en définissant l'attribut src de la balise

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 Écouteurs d'événements, nous pouvons observer qu'il existe de nombreux types d'événements au sein de la page. page.

Maintenant, ajoutons la balise

Ensuite, apprenons à définir des variables en JavaScript !

Que sont les variables

Les variables peuvent être considérées comme des conteneurs pour stocker des informations. En programmation, nous utilisons des variables pour stocker les valeurs des données. JavaScript est un langage typé dynamiquement, 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 avait une portée de fonction.
• let : Introduit dans ES6, let vous permet de déclarer des variables locales de portée bloc.
• 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"; // Using var to declare a variable
let age = 30; // Using let to declare a variable
const city = "London"; // Using const to declare a constant

Types de variables

En JavaScript, il existe plusieurs types de données différents :

• Chaîne : données texte, comme "Hello, World !".
• Nombre : nombres entiers ou nombres à virgule flottante, comme 42 ou 3,14.
• Booléen : vrai ou faux.
• Objet : peut stocker plusieurs valeurs ou structures de données complexes.
• null et undefined : types spéciaux représentant respectivement "aucune valeur" et "valeur non définie".

Utiliser des variables

Une fois les variables déclarées, vous pouvez les utiliser dans votre programme :

console.log(name); // Outputs: Alice
console.log("Age: "   age); // Outputs: Age: 30
console.log(city   " is a beautiful city"); // Outputs: London is a beautiful city

La méthode statique console.log() génère un message sur la console.

Manipulation du DOM

DOM (Document Object Model) est une interface multiplateforme indépendante du langage qui traite les documents HTML et XML comme une structure arborescente. , où chaque nœud fait partie du document, comme les éléments, les attributs et le contenu du texte.

Accéder aux éléments DOM

Pour manipuler le contenu d'une page Web, vous devez d'abord accéder aux éléments de l'arborescence DOM. Vous pouvez utiliser différentes méthodes pour accéder aux éléments, par exemple par leur ID, leur nom de classe ou leur nom de balise :

let elementById = document.getElementById("elementId"); // Access element by ID
let elementsByClassName = document.getElementsByClassName("className"); // Access a collection of elements by class name
let elementsByTagName = document.getElementsByTagName("tagName"); // Access a collection of elements by tag name

Ajoutez le code suivant dans le fichier ~/project/script.js du projet EconoMe :

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");

Modification du contenu d'un élément

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 à cette fin.

Par exemple, pour insérer un

Nouveau contenu HTML

dans un élément div avec id=content et remplacer "Bonjour" par "Nouveau contenu texte" dans un élément span avec id=info, vous utiliserez le code JavaScript suivant :

Ajout et suppression d'éléments

Vous pouvez ajouter ou supprimer dynamiquement des éléments sur la page à l'aide de JavaScript.

Par exemple:

// Create a new element
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // Add the new element to the document body
document.body.removeChild(newElement); // Remove the element from the document body

• 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 .
• La méthode document.body.removeChild() supprime l'élément de l'élément .

Gestion des événements

Les écouteurs d'événements vous permettent de répondre aux actions des utilisateurs.

addEventListener("event", function () {});

tels que les clics, le survol ou les pressions sur des touches :

elementById.addEventListener("click", function () {
  console.log("Element was clicked!");
});

Après avoir appris les opérations de base du 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 of the dragged item
});

L'événement DOMContentLoaded en JavaScript est déclenché lorsque le document HTML initial a été complètement chargé et analysé, sans attendre la fin du chargement des feuilles de style, des images et des sous-cadres. Cela en fait un événement important pour exécuter du code JavaScript dès que le DOM est prêt, garantissant que le script interagit avec les éléments HTML entièrement analysés.

Cet atelier ne nécessite pas de prévisualisation de l'effet à ce stade. Nous l'examinerons après avoir terminé le code dans les étapes suivantes.

Résumé

Dans cet atelier, vous vous êtes lancé dans la création d'un élément basique mais fondamental 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 du projet et en utilisant JavaScript pour manipuler le DOM, affichant les états financiers initiaux. L'essentiel à retenir est de comprendre comment JavaScript interagit avec les éléments HTML pour modifier dynamiquement le contenu d'une page Web, jetant ainsi les bases de fonctionnalités plus interactives dans les étapes suivantes.

Cette approche pratique renforce non seulement votre compréhension de la manipulation JavaScript et DOM, mais simule également des scénarios de développement Web réels, vous préparant ainsi à des projets plus complexes à venir.

---

 ? Entraînez-vous maintenant : JavaScript et DOM de base

---

Vous voulez en savoir plus ?

•  ? Découvrez les derniers arbres de compétences JavaScript
•  ? Lire plus de didacticiels JavaScript
•  ? Rejoignez notre Discord ou tweetez-nous @WeAreLabEx