Guide détaillé pour créer une liste dynamique en JavaScript
Les listes dynamiques sont des éléments essentiels dans le développement web moderne. Elles permettent d’afficher et de manipuler des ensembles de données de manière interactive, offrant ainsi une expérience utilisateur fluide et réactive. Dans ce guide détaillé, nous allons explorer comment créer une liste dynamique en utilisant JavaScript.
Étape 1 : Structure HTML de base
Tout d’abord, nous avons besoin d’une structure HTML de base pour notre liste dynamique. Créez un fichier HTML et ajoutez-y un conteneur pour la liste, ainsi qu’un formulaire pour ajouter de nouveaux éléments à la liste.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste Dynamique en JavaScript</title>
</head>
<body>
<div id="liste">
<!-- La liste dynamique sera affichée ici -->
</div>
<form id="formulaire">
<input type="text" id="nouvelElement" placeholder="Ajouter un nouvel élément">
<button type="submit">Ajouter</button>
</form>
<script src="script.js"></script>
</body>
</html>Étape 2 : JavaScript pour gérer la liste dynamique
Créez un fichier JavaScript nommé script.js et ajoutons le code nécessaire pour rendre notre liste dynamique fonctionnelle.
document.addEventListener('DOMContentLoaded', function() {
const liste = document.getElementById('liste');
const formulaire = document.getElementById('formulaire');
const nouvelElementInput = document.getElementById('nouvelElement');
formulaire.addEventListener('submit', function(e) {
e.preventDefault();
const valeur = nouvelElementInput.value.trim();
if (valeur !== '') {
ajouterElementListe(valeur);
nouvelElementInput.value = '';
}
});
function ajouterElementListe(valeur) {
const nouvelElement = document.createElement('div');
nouvelElement.textContent = valeur;
liste.appendChild(nouvelElement);
}
});Explication du code
- Nous commençons par sélectionner les éléments HTML pertinents à l’aide de
document.getElementById. - Ensuite, nous ajoutons un écouteur d’événements sur le formulaire pour capturer la soumission et ajouter un nouvel élément à la liste.
- La fonction
ajouterElementListecrée un nouvel élémentdivcontenant la valeur saisie et l’ajoute à la liste.
Étape 3 : Style CSS (optionnel)
Pour rendre notre liste dynamique plus attrayante, vous pouvez ajouter un peu de style CSS pour la mise en forme. Voici un exemple simple :
#liste {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
#liste div {
margin-bottom: 5px;
}
form {
margin-top: 10px;
}
input[type="text"] {
padding: 5px;
margin-right: 5px;
}
button {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}Voici chaque exemple accompagné d’un extrait de code illustrant comment implémenter une liste dynamique en JavaScript :
1. Liste de tâches
Extrait de code :
// Fonction pour ajouter une tâche à la liste
function ajouterTache() {
const nouvelleTache = document.getElementById('nouvelleTache').value;
const liste = document.getElementById('listeTaches');
const nouvelleTacheElement = document.createElement('li');
nouvelleTacheElement.textContent = nouvelleTache;
liste.appendChild(nouvelleTacheElement);
}
// Écouteur d'événement pour le bouton d'ajout de tâche
document.getElementById('ajouterTache').addEventListener('click', ajouterTache);2. Système de commentaires
Extrait de code :
// Fonction pour ajouter un commentaire à la liste
function ajouterCommentaire() {
const nouveauCommentaire = document.getElementById('nouveauCommentaire').value;
const liste = document.getElementById('listeCommentaires');
const nouveauCommentaireElement = document.createElement('li');
nouveauCommentaireElement.textContent = nouveauCommentaire;
liste.appendChild(nouveauCommentaireElement);
}
// Écouteur d'événement pour le bouton d'ajout de commentaire
document.getElementById('ajouterCommentaire').addEventListener('click', ajouterCommentaire);3. Sélecteur de produits
Extrait de code :
// Fonction pour ajouter un produit au panier
function ajouterAuPanier() {
const nouveauProduit = document.getElementById('nouveauProduit').value;
const panier = document.getElementById('panier');
const nouveauProduitElement = document.createElement('li');
nouveauProduitElement.textContent = nouveauProduit;
panier.appendChild(nouveauProduitElement);
}
// Écouteur d'événement pour le bouton d'ajout au panier
document.getElementById('ajouterAuPanier').addEventListener('click', ajouterAuPanier);4. Liste de contacts
Extrait de code :
// Fonction pour ajouter un contact à la liste
function ajouterContact() {
const nouveauContact = document.getElementById('nouveauContact').value;
const liste = document.getElementById('listeContacts');
const nouveauContactElement = document.createElement('li');
nouveauContactElement.textContent = nouveauContact;
liste.appendChild(nouveauContactElement);
}
// Écouteur d'événement pour le bouton d'ajout de contact
document.getElementById('ajouterContact').addEventListener('click', ajouterContact);5. Système de notation
Extrait de code :
// Fonction pour ajouter une note à la liste
function ajouterNote() {
const nouvelleNote = document.getElementById('nouvelleNote').value;
const liste = document.getElementById('listeNotes');
const nouvelleNoteElement = document.createElement('li');
nouvelleNoteElement.textContent = nouvelleNote;
liste.appendChild(nouvelleNoteElement);
}
// Écouteur d'événement pour le bouton d'ajout de note
document.getElementById('ajouterNote').addEventListener('click', ajouterNote);Et ainsi de suite. Ces extraits de code illustrent comment créer une liste dynamique en JavaScript pour chaque exemple donné.
Un cas particulier intéressant d’un point de vue technique serait la mise en œuvre d’une liste dynamique avec des éléments réorganisables par glisser-déposer. Cette fonctionnalité permettrait aux utilisateurs de modifier l’ordre des éléments de la liste en les faisant glisser et en les déposant à l’endroit souhaité.
Voici comment vous pourriez implémenter cette fonctionnalité :
Cas d’une liste réorganisable par glisser-déposer
HTML :
<ul id="maListe">
<li draggable="true">Élément 1</li>
<li draggable="true">Élément 2</li>
<li draggable="true">Élément 3</li>
</ul>JavaScript :
// Fonction pour gérer le glisser-déposer
function gererDragDrop(e) {
e.preventDefault();
if (e.type === 'dragstart') {
e.dataTransfer.setData('text/plain', e.target.textContent);
}
if (e.type === 'drop') {
const donnee = e.dataTransfer.getData('text/plain');
const liste = document.getElementById('maListe');
const nouvelElement = document.createElement('li');
nouvelElement.textContent = donnee;
nouvelElement.draggable = true;
liste.insertBefore(nouvelElement, e.target);
}
}
// Écouteurs d'événements pour le glisser-déposer
const elementsListe = document.querySelectorAll('#maListe li');
elementsListe.forEach(element => {
element.addEventListener('dragstart', gererDragDrop);
element.addEventListener('dragover', gererDragDrop);
element.addEventListener('drop', gererDragDrop);
});Dans ce cas particulier, chaque élément de la liste est rendu glissable grâce à l’attribut draggable="true". Ensuite, des écouteurs d’événements sont ajoutés pour gérer les événements de glisser (dragstart), de survol (dragover) et de déposer (drop). Lorsqu’un élément est déposé à un nouvel emplacement dans la liste, un nouvel élément est inséré à cet emplacement et l’élément déplacé est supprimé.
Cette fonctionnalité offre une expérience utilisateur améliorée en permettant une personnalisation de l’ordre des éléments dans la liste, ce qui peut être particulièrement utile dans des applications de gestion de tâches, de planification d’événements ou d’organisation de contenu.
Un autre cas particulier intéressant d’un point de vue technique serait la mise en œuvre d’une liste dynamique avec un système de pagination. Dans ce scénario, la liste contient un grand nombre d’éléments, et pour des raisons de performances et d’ergonomie, elle est divisée en pages, avec un nombre limité d’éléments affichés à la fois. Les utilisateurs peuvent naviguer entre les pages pour consulter les éléments de la liste.
Cas d’une liste dynamique avec pagination
HTML :
<div id="liste">
<!-- Les éléments de la liste seront affichés ici -->
</div>
<div id="pagination">
<!-- Les liens de pagination seront affichés ici -->
</div>JavaScript :
const elementsParPage = 10; // Nombre d'éléments affichés par page
const listeDonnees = [...]; // Votre liste de données
// Fonction pour afficher les éléments de la liste pour une page donnée
function afficherPage(page) {
const debut = (page - 1) * elementsParPage;
const fin = debut + elementsParPage;
const elementsPage = listeDonnees.slice(debut, fin);
const listeElement = document.getElementById('liste');
listeElement.innerHTML = ''; // Efface les éléments précédents
elementsPage.forEach(element => {
const nouvelElement = document.createElement('div');
nouvelElement.textContent = element;
listeElement.appendChild(nouvelElement);
});
}
// Fonction pour créer les liens de pagination
function creerLiensPagination() {
const nombrePages = Math.ceil(listeDonnees.length / elementsParPage);
const paginationElement = document.getElementById('pagination');
paginationElement.innerHTML = ''; // Efface les liens précédents
for (let i = 1; i <= nombrePages; i++) {
const lien = document.createElement('a');
lien.href = '#';
lien.textContent = i;
lien.addEventListener('click', function() {
afficherPage(i);
});
paginationElement.appendChild(lien);
}
}
// Afficher la première page au chargement
afficherPage(1);
creerLiensPagination();Dans ce cas particulier, la liste est divisée en pages, chaque page affichant un nombre limité d’éléments. Lorsque l’utilisateur clique sur un lien de pagination, la fonction afficherPage est appelée pour afficher les éléments de la page correspondante. La fonction creerLiensPagination génère les liens de pagination en fonction du nombre total de pages nécessaires pour afficher tous les éléments de la liste.
Ce cas particulier montre comment gérer efficacement de grandes quantités de données tout en offrant une expérience utilisateur fluide grâce à la pagination. Il est particulièrement utile lorsque vous travaillez avec des ensembles de données volumineux qui ne peuvent pas être tous affichés simultanément à l’écran.
Conclusion
Félicitations ! Vous venez de créer une liste dynamique en utilisant JavaScript. Cette liste peut être étendue et personnalisée davantage selon les besoins de votre projet. N’hésitez pas à explorer et à expérimenter avec d’autres fonctionnalités, telles que la suppression d’éléments, la recherche, ou le tri. Avec ces bases, vous êtes prêt à créer des interfaces web interactives et dynamiques.
Autres articles
