Travaux Pratiques JavaScript : Manipulation de Tableaux, Fonctions et Objets Orientés Données

Cette série d’exercices permet d’introduire les bases intermédiaires de JavaScript à travers des applications console. Les étudiants apprennent à manipuler les tableaux, à créer et utiliser des fonctions, ainsi qu’à structurer les données sous forme d’objets. Les scénarios sont inspirés de cas pratiques comme la gestion d’articles ou de bibliothèques.

1. Y. EL ALLIOUI – [email protected] 1 / 15
2025

Module : Programmation Web 2 (Javascript)

Filière : TC MIP INFO
Semestre : S4


Travaux Pratiques (TP)

Exercices (Énoncé)

Youssouf EL ALLIOUI
FPK - USMS

[email protected]

2. Y. EL ALLIOUI – [email protected] 2 / 15
2025
Série 1
Fondamentaux JavaScript - Des structures de données aux
applications console interactives
Exercice 1 : Gestion d'une liste d’articles
Objectif :
Travailler avec les tableaux, les boucles et les fonctions.
Consignes :
1. Créez un tableau listeArticles contenant au moins 5 articles (par exemple : "pain",
"lait", "œufs", "fruits", "légumes" ).
2. Écrivez une fonction ajouterArticle qui prend un article (chaîne de caractères) en
paramètre et l’ajoute au tableau uniquement s’il n’est pas déjà présent. Affichez un
message approprié dans la console (ex. : "pain a été ajouté" ou "pain est déjà
dans la liste").
3. Écrivez une fonction supprimerArticle qui prend un article en paramètre et le
supprime du tableau s’il existe. Affichez un message pour indiquer si la suppression a
réussi ou non.
4. Écrivez une fonction afficherListe qui affiche tous les articles dans la console,
chacun précédé de son numéro (commençant à 1), après avoir trié la liste par ordre
alphabétique.
5. Testez vos fonctions en ajoutant un article, en supprimant un autre, puis en affichant la
liste après chaque modification.
Exercice 2 : Calculatrice avancée
Objectif :
Utiliser les opérateurs, les structures conditionnelles et gérer un historique avec un tableau.
Consignes :
1. Créez une fonction calculer qui prend trois paramètres : deux nombres (a et b) et une
opération (chaîne : "+", "-", "*", "/", ou "%}). Elle doit retourner le résultat de
l’opération ou un message d’erreur si la division ou le modulo par zéro est tenté.
2. Créez un tableau historique pour stocker chaque calcul sous forme de chaîne (ex. : "5
+ 3 = 8"). Ajoutez chaque calcul réussi au tableau dans la fonction calculer.
3. Écrivez une fonction afficherHistorique qui affiche toutes les entrées de l’historique
dans la console.
4. Ajoutez une fonction effacerHistorique qui vide le tableau historique et affiche
un message de confirmation.
5. Testez avec plusieurs calculs, y compris une division par zéro, et affichez l’historique.

3. Y. EL ALLIOUI – [email protected] 3 / 15
2025
Exercice 3 : Gestion d'une bibliothèque
Objectif :
Manipuler des objets, des tableaux et des boucles.
Consignes :
Créez un tableau bibliotheque contenant au moins 3 objets, chaque objet représentant un
livre avec les propriétés titre, auteur et année.
1. Écrivez une fonction ajouterLivre qui prend un titre, un auteur et une année,
puis ajoute un nouvel objet au tableau.
2. Écrivez une fonction rechercherLivre qui prend un titre et affiche les détails du
livre correspondant (ou un message s’il n’est pas trouvé).
3. Écrivez une fonction listerLivres qui affiche tous les livres avec leurs détails.
4. Ajoutez une fonction supprimerLivre qui supprime un livre par son titre et affiche
un message pour confirmer ou signaler une erreur.
Testez vos fonctions en ajoutant un livre, en recherchant un titre, et en supprimant un
livre.
Exercice 4 : Gestion d'une bibliothèque interactive (Extension de l’Ex 3)
Objectif :
L’objectif de cet exercice est d’étendre l’Exercice 3 en ajoutant une interface utilisateur
textuelle sous forme de menu interactif. L’étudiant devra intégrer les fonctions déjà créées
(ajouterLivre, rechercherLivre, listerLivres, supprimerLivre) dans une boucle qui affiche un
menu et exécute l’action choisie par l’utilisateur.
Consignes :
1. Préparation du contexte :
o À partir de l’Exercice 3, vous disposez d’un tableau bibliotheque contenant
au moins trois objets livres. Chaque objet possède les propriétés suivantes
: titre, auteur, et annee.
o Vous avez également défini les fonctions suivantes :
§ ajouterLivre(titre, auteur, annee)
§ rechercherLivre(titre)
§ listerLivres()
§ supprimerLivre(titre)
2. Création du menu interactif :
o Au démarrage du programme, affichez le menu suivant :
---------- Menu ----------
1 : Ajouter un nouveau livre
2 : Rechercher un livre
3 : Lister tous les livres
4 : Supprimer un livre
0 : Quitter

4. Y. EL ALLIOUI – [email protected] 4 / 15
2025
---------------------------
o Demandez ensuite à l’utilisateur de saisir son choix.
3. Gestion des choix utilisateur : En fonction du choix de l’utilisateur, procédez comme
suit :
o Choix 1 (Ajouter un nouveau livre) :
§ Demandez à l’utilisateur de saisir le titre, l’auteur et l’année du livre.
§ Appelez la fonction ajouterLivre(titre, auteur, annee) pour
ajouter le livre au tableau.
§ Affichez un message de confirmation, par exemple :
"Un nouveau livre est ajouté."
o Choix 2 (Rechercher un livre) :
§ Demandez à l’utilisateur de saisir le titre du livre recherché.
§ Appelez la fonction rechercherLivre(titre) qui doit afficher les
détails du livre si trouvé, ou un message indiquant que le livre n’a pas
été trouvé.
o Choix 3 (Lister tous les livres) :
§ Appelez la fonction listerLivres().
§ Avant d’afficher la liste, vous pouvez afficher un en-tête tel que :
---------- Liste des livres ----------
suivi de la liste des livres et enfin un pied de page, par exemple :
------------------------------------ --
o Choix 4 (Supprimer un livre) :
§ Demandez à l’utilisateur de saisir le titre du livre à supprimer.
§ Appelez la fonction supprimerLivre(titre) qui doit supprimer le
livre du tableau et afficher un message de confirmation ou un message
d’erreur si le livre n’est pas trouvé.
o Choix 0 (Quitter) :
§ Affichez un message de fin (par exemple : "Fin du programme.") et
terminez l’exécution du programme.
o Choix invalide :
§ Si l’utilisateur saisit une option qui n’est pas valide, affichez un message
indiquant que le choix est invalide et invitez-le à réessayer.
4. Structure de la boucle principale :
o Mettez en place une boucle (par exemple, une boucle do...while ou while)
qui permettra de réafficher le menu après chaque action, jusqu’à ce que
l’utilisateur choisisse de quitter en entrant 0.
5. Conseils pédagogiques :
o Validation des entrées : Veillez à valider les saisies utilisateur. Par exemple,
vérifiez que l’année est bien un nombre.

5. Y. EL ALLIOUI – [email protected] 5 / 15
2025
o Modularité : Organisez votre code en fonctions distinctes pour chaque
opération afin d’améliorer la lisibilité et la maintenabilité.
o Commentaires : Commentez votre code de manière claire afin que chaque
étape soit compréhensible pour un lecteur qui n’aurait pas participé à la
réalisation.
o Tests : Testez chaque option du menu pour vous assurer que toutes les
fonctionnalités se comportent comme prévu.
Exercice 5 : Gestion d'une Liste d'Étudiants
Objectif :
Mettre en pratique la création et la manipulation d’objets et de tableaux, ainsi que l’écriture de
fonctions pour le traitement de données.
Consignes :
1. Création des données :
o Déclarez un tableau contenant plusieurs objets « étudiant ».
o Chaque objet doit comporter au minimum les propriétés suivantes :
§ prenom (chaîne de caractères)
§ nom (chaîne de caractères)
§ age (nombre)
§ note (nombre, représentant la moyenne ou une note sur 20)
2. Fonctions à implémenter :
o Une fonction pour afficher la liste complète des étudiants dans la console.
o Une fonction pour calculer et retourner la moyenne des notes de tous les
étudiants.
o Une fonction qui, étant donné un seuil de note (passé en paramètre), filtre et
retourne la liste des étudiants ayant une note supérieure ou égale à ce seuil.
o Une fonction pour trier les étudiants par ordre alphabétique (sur le nom) ou par
note décroissante, selon un paramètre de tri.
3. Exécution :
o À l’exécution du programme, appelez successivement ces fonctions et affichez
leurs résultats dans la console pour valider le bon fonctionnement de chaque
fonctionnalité.
Exercice 6 : Analyse et Transformation d'une Phrase
Objectif :
Exploiter les méthodes de manipulation des chaînes de caractères pour analyser et transformer
un texte donné.
Consignes :

6. Y. EL ALLIOUI – [email protected] 6 / 15
2025
1. Entrée de la phrase :
o Déclarez une variable contenant une phrase (par exemple, « JavaScript est un
langage polyvalent qui permet de manipuler des données de manière flexible »).
2. Analyse de la phrase :
o Affichez dans la console :
§ Le nombre total de caractères (avec la propriété length).
§ Le nombre de mots (en utilisant la méthode split() avec l’espace
comme séparateur).
§ La première et la dernière lettre de la phrase (en utilisant charAt() ou
l’accès par indice).
3. Transformations :
o Convertissez la phrase en majuscules puis en minuscules, et affichez les
résultats.
o Créez une fonction qui inverse la phrase (sans utiliser directement une méthode
de conversion en tableau suivie de reverse(), mais en parcourant la chaîne avec
une boucle) et affichez la phrase inversée.
o Utilisez la méthode replace() ou replaceAll() pour remplacer un mot
spécifique de la phrase par un autre (par exemple, remplacer « polyvalent » par
« puissant ») et affichez le résultat.
Exercice 7 : Système de Gestion de Produits
Objectif :
Développer une application console de gestion d’inventaire qui combine la manipulation
d’objets et de tableaux, l’utilisation de fonctions et l’application d’opérations arithmétiques et
conditionnelles.
Consignes :
1. Modélisation des produits :
o Créez un tableau d’objets, chaque objet représentant un produit avec les
propriétés suivantes :
§ id (identifiant unique, nombre ou chaîne)
§ nom (chaîne de caractères)
§ prix (nombre)
§ quantite (nombre représentant le stock)
2. Fonctionnalités à implémenter :
o Ajout d’un produit : Créez une fonction qui prend en paramètres les
informations d’un produit et l’ajoute au tableau d’inventaire.
o Mise à jour du stock : Créez une fonction qui, à partir d’un identifiant de
produit et d’un nombre (positif pour ajouter ou négatif pour retirer), met à jour
la quantité en stock.

7. Y. EL ALLIOUI – [email protected] 7 / 15
2025
o Affichage de l’inventaire : Créez une fonction pour afficher la liste de tous les
produits avec leurs détails dans la console.
o Calcul de la valeur totale de l’inventaire : Écrivez une fonction qui calcule la
somme du produit du prix et de la quantite pour chaque produit et affiche la
valeur totale.
o Recherche du produit le plus cher : Implémentez une fonction qui parcourt le
tableau et retourne le produit ayant le prix le plus élevé.
3. Exécution :
o Initialisez le tableau avec quelques produits exemples.
o Faites appel aux différentes fonctions et affichez les résultats dans la console
afin de vérifier le bon fonctionnement du système de gestion.

8. Y. EL ALLIOUI – [email protected] 8 / 15
2025
Série 2
Maîtrise du DOM JavaScript - De la manipulation
élémentaire aux applications interactives
Exercice 1 : Sélection et modification de contenu
Objectif
Appliquer les méthodes de sélection et modifier le contenu et les attributs d’éléments existants.
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="UTF-8"><title>Exercice 1</title></head>
<body>
<h1 id="titre-principal">Titre initial</h1>
<p class="intro">Texte d’introduction à remplacer. </p>
<ul id="liste">
<li data-index="1">Item 1</li>
<li data-index="2">Item 2</li>
<li data-index="3">Item 3</li>
</ul>
<a href="https://example.com" id="mon-lien">Lien vers example.com </a>
</body>
</html>
Consignes
1. Sélectionner et remplacer le texte du <h1> par « Bienvenue au TP DOM ».
2. Récupérer tous les <li> de la liste et préfixer leur contenu par « Élément – ».
3. Modifier dynamiquement l’attribut href du lien pour qu’il pointe vers
« https://www.usms.ac.ma ».
4. À l’aide de querySelector, changer la classe de <p
class="intro"> en paragraph-intro et ajouter un title (attribut) décrivant son
rôle.
Méthodes clés :
document.getElementById() , getElementsByTagName(), querySelector(), element.te
xtContent, element.setAttribute() .
Exercice 2 : Création et insertion d’éléments
Objectif
Maîtriser la création, l’assignation d’attributs, puis l’insertion de nouveaux nœuds dans l’arbre
DOM.
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="UTF-8"><title>Exercice 2</title></head>
<body>

9. Y. EL ALLIOUI – [email protected] 9 / 15
2025
<div id="container">
<h2>Liste des fruits</h2>
<ul id="fruit-list"></ul>
</div>
</body>
</html>
Consignes
1. Créer en JavaScript un tableau :
const fruits = ['Pomme','Banane','Cerise','Orange']; .
2. Pour chaque élément du tableau, générer un <li> :
o utiliser document.createElement('li') ,
o renseigner le texte via textContent,
o ajouter un attribut data-fruit égal au nom du fruit,
o et enfin insérer l’<li> dans <ul id="fruit-list"> avec appendChild().
3. Avant le dernier <li>, insérer un nouvel <li> « Kiwi » en utilisant insertBefore().
4. Ajouter un paragraphe <p> sous la liste indiquant « Total : X fruits », où X est la
longueur du tableau (après insertion), en utilisant createElement et appendChild.
Méthodes clés :
createElement(), setAttribute(), appendChild(), insertBefore() .
Exercice 3 : Clonage, remplacement et suppression de nœuds
Objectif
S’exercer au clonage profond, au remplacement et à la suppression de nœuds, ainsi qu’à la
navigation (parent/child).
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="UTF-8"><title>Exercice 3</title></head>
<body>
<div id="cartes">
<div class="carte">
<h3>Carte Prototype</h3>
<p>Description prototype. </p>
</div>
</div>
<button id="dupliquer">Dupliquer la carte</button>
<button id="remplacer">Remplacer la carte</button>
<button id="supprimer">Supprimer la dernière carte </button>
</body>
</html>
Consignes
1. Duplication : au clic sur « Dupliquer la carte », cloner la <div class="carte"> (y
compris ses enfants) et l’ajouter à la fin de <div id="cartes">.
2. Remplacement : au clic sur « Remplacer la carte », créer une nouvelle <div
class="carte"> avec un titre « Carte Remplaçante » et un paragraphe « Cette carte a
remplacé la première », puis remplacer la première carte existante.

10. Y. EL ALLIOUI – [email protected] 10 / 15
2025
3. Suppression : au clic sur « Supprimer la dernière carte », supprimer le dernier nœud
enfant de #cartes.
4. Vérifier avant chaque action que #cartes possède au moins un enfant, et afficher une
alerte si la collection est vide (par exemple, « Aucune carte à supprimer »).
Méthodes clés :
cloneNode(), replaceChild(), removeChild(), hasChildNodes() .
Exercice 4 : Événements et styles dynamiques
Objectif
Apprendre à gérer les événements utilisateur et à modifier dynamiquement les styles via le
DOM.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exercice 4</title>
<style>
.surbrillance { background-color: yellow; }
</style>
</head>
<body>
<ul id="liste-colors">
<li data-color="red">Rouge</li>
<li data-color="green">Vert</li>
<li data-color="blue">Bleu</li>
</ul>
<button id="toggle-highlight">Activer/Désactiver surbrillance </button>
</body>
</html>
Consignes
1. Sélectionner chaque <li> de la liste et, au survol (mouseover / mouseout), changer la
couleur de fond du <body>pour la valeur de data-color.
2. Au clic sur le bouton « Activer/Désactiver surbrillance », activer ou désactiver
(toggle) la classe surbrillancesur tous les <li> avec classList.toggle().
3. Utiliser addEventListener et removeEventListener pour pouvoir désactiver
totalement le comportement au survol lorsque la surbrillance est désactivée (vérifier
un flag boolean).
Méthodes clés :
element.addEventListener() , element.removeEventListener() , element.classList.
toggle(), event.currentTarget.dataset .
Exercice 5 : Formulaire interactif et validation
Objectif
Mettre en œuvre la gestion d’événements sur les formulaires pour créer un formulaire
interactif avec contrôles dynamiques.

11. Y. EL ALLIOUI – [email protected] 11 / 15
2025
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="UTF-8"><title>Exercice 5</title></head>
<body>
<form id="inscription">
<label>Email : <input type="email" id="email" required></label><br>
<label>
<input type="checkbox" id="newsletter"> S’abonner à la newsletter
</label><br>
<div id="options-newsletter" style="display:none;">
<label>Fréquence :
<select id="freq">
<option>Hebdomadaire</option>
<option>Mensuel</option>
</select>
</label>
</div>
<button type="submit">Envoyer</button>
</form>
Consignes
1. Sur le change de la checkbox #newsletter, afficher ou masquer la <div
id="options-newsletter"> (propriétés style.display).
2. Sur la soumission du formulaire (submit), vérifier que l’email contient « @univ »
(simple test includes). Si non valide, bloquer l’envoi (event.preventDefault()) et
afficher une remarque dans un <p> ajouté sous le formulaire.
3. Une fois validé, réinitialiser le formulaire (form.reset()).
Méthodes clés :
form.addEventListener('submit', …) , event.preventDefault(),
element.style.display, form.reset().
Exercice 6 : Filtrage dynamique et délégation d’événements
Objectif
Utiliser l’événement input et la délégation d’événements pour filtrer en temps réel une liste,
et comprendre la propagation (bubbling).
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="UTF-8"><title>Exercice 6</title></head>
<body>
<input type="text" id="filtre" placeholder="Rechercher…">
<ul id="taches">
<li>Faire les courses</li>
<li>Rendre le TP</li>
<li>Appeler le professeur </li>
<li>Préparer le quiz</li>
</ul>
</body>
</html>
Consignes

12. Y. EL ALLIOUI – [email protected] 12 / 15
2025
1. Sur chaque input de #filtre, récupérer la valeur saisie et masquer (style.display
= 'none') tous les <li>dont le texte ne contient pas la chaîne
(méthode textContent.toLowerCase().includes() ).
2. Mettre en place un seul gestionnaire click sur le <ul id="taches"> pour détecter le
clic sur un <li> (délégation) et, lors du clic, barrer le texte de l’élément
(style.textDecoration = 'line -through').
3. Sur double-clic (dblclick) sur un <li>, supprimer directement cet item du DOM
avec removeChild().
Méthodes clés :
element.addEventListener('input', …) , element.addEventListener('click', …) ,
propagation d’événements, element.textContent, parent.removeChild(child) .
Exercice 7 : Gestionnaire de tâches simple
Objectif : Créer une application simple de gestion de tâches qui permet d'ajouter, supprimer
et marquer les tâches comme terminées.
Consignes :
1. Créer une interface HTML avec:
o Un champ de saisie (input)
o Un bouton "Ajouter"
o Une liste non ordonnée (ul) vide pour afficher les tâches
2. Implémenter les fonctionnalités suivantes en JavaScript:
o Ajouter une nouvelle tâche à la liste quand l'utilisateur clique sur le bouton
"Ajouter"
o Chaque tâche doit avoir un bouton "Supprimer" qui permet de la retirer de la
liste
o Un clic sur la tâche doit la marquer comme "terminée" (ajouter une classe CSS
qui barre le texte)
o Empêcher l'ajout de tâches vides
o Effacer le champ de saisie après l'ajout d'une tâche
Compétences testées : Sélection d'éléments, création et insertion de nœuds, gestion des
événements, modification d'attributs et de classes CSS.
Exercice 8 : Formulaire dynamique avec validation
Objectif : Créer un formulaire d'inscription avec validation dynamique des champs.
Consignes :
1. Créer un formulaire HTML contenant:
o Nom (minimum 3 caractères)
o Email (format valide)
o Mot de passe (minimum 8 caractères, doit contenir au moins un chiffre)
o Confirmation de mot de passe
o Liste déroulante pour le pays

13. Y. EL ALLIOUI – [email protected] 13 / 15
2025
o Case à cocher pour accepter les conditions d'utilisation
o Bouton d'envoi
2. Implémenter les fonctionnalités suivantes en JavaScript:
o Valider chaque champ en temps réel (pendant que l'utilisateur tape)
o Afficher des messages d'erreur à côté des champs invalides
o Changer la couleur de bordure des champs (rouge pour invalide, vert pour
valide)
o Empêcher l'envoi du formulaire si tous les champs ne sont pas valides
o Afficher un résumé des informations saisies dans une div après validation
réussie (sans envoyer réellement le formulaire)
Compétences testées : Manipulation de formulaires, validation avec expressions régulières,
gestion avancée des événements (focus, blur, input), modification du DOM en fonction des
actions utilisateur.
Exercice 9 : Générateur de tableau dynamique
Objectif : Créer une application qui génère un tableau HTML dynamique à partir de données
et permet des opérations sur celui-ci.
Consignes :
1. Créer une interface HTML avec:
o Un tableau vide avec en-tête préparé (ID, Nom, Email, Actions)
o Des boutons pour: ajouter une ligne, trier par nom, filtrer
2. Implémenter les fonctionnalités suivantes en JavaScript:
o Charger des données initiales dans le tableau (depuis un tableau JavaScript)
o Permettre l'ajout de nouvelles lignes via un formulaire qui apparaît au clic sur
"Ajouter"
o Implémenter la fonctionnalité de tri du tableau (croissant/décroissant) en
cliquant sur l'en-tête
o Ajouter un champ de recherche qui filtre le tableau en temps réel
o Pour chaque ligne, ajouter:
§ Un bouton "Modifier" qui transforme la ligne en champs éditables
§ Un bouton "Supprimer" qui retire la ligne après confirmation
o Sauvegarder les modifications dans le tableau de données JavaScript
Données initiales suggérées :
const utilisateurs = [
{ id: 1, nom: "Dupont Jean", email: "[email protected]" },
{ id: 2, nom: "Martin Sophie", email: "[email protected]" },
{ id: 3, nom: "Dubois Pierre", email: "[email protected]" }
];
Compétences testées : Manipulation avancée du DOM, création dynamique de tables HTML,
tri et filtrage de données, gestion d'événements complexes, transformation d'éléments (cellules
de tableau en champs de formulaire), utilisation de méthodes de tableau JavaScript.

14. Y. EL ALLIOUI – [email protected] 14 / 15
2025
Exercice 10 : Système de navigation par onglets
Objectif : Créer un système de navigation par onglets qui permet d'afficher différents
contenus sans recharger la page.
Consignes :
1. Créer une structure HTML avec :
o Une barre d'onglets (au moins 3 onglets)
o Des sections de contenu correspondant à chaque onglet
2. Implémenter les fonctionnalités suivantes en JavaScript :
o Au chargement de la page, seul le contenu du premier onglet est visible
o Cliquer sur un onglet affiche le contenu correspondant et masque les autres
o Mettre en évidence l'onglet actif (changer sa classe CSS)
o Permettre de passer d'un onglet à l'autre avec les touches de clavier (flèches
gauche/droite)
o Ajouter une animation simple lors du changement d'onglet
Compétences testées : Gestion des événements, manipulation de classes CSS, modifications
dynamiques de l'affichage, navigation au clavier, délégation d'événements.
Exercice 11 : Éditeur de texte enrichi simple
Objectif : Créer un éditeur de texte minimal avec des contrôles de formatage.
Consignes :
1. Créer une interface HTML avec :
o Une barre d'outils avec des boutons pour les fonctions : gras, italique, souligné,
liste à puces, liste numérotée, alignement (gauche, centre, droite)
o Une zone d'édition (conteneur div avec attribut contenteditable)
o Un bouton pour afficher le code HTML généré
2. Implémenter les fonctionnalités suivantes en JavaScript :
o Utiliser les commandes document.execCommand() pour appliquer le
formatage au texte sélectionné
o Mettre en évidence les boutons actifs (par exemple, le bouton "gras" est en
surbrillance lorsque le texte sélectionné est en gras)
o Permettre l'utilisation de raccourcis clavier (Ctrl+B pour gras, Ctrl+I pour
italique, etc.)
o Ajouter un bouton qui affiche dans une fenêtre modale le code HTML généré
par l'éditeur
Compétences testées : Manipulation avancée du DOM, gestion des sélections de texte,
utilisation de document.execCommand(), détection des états de formatage, gestion des
raccourcis clavier.
Exercice 12 : Système de glisser-déposer (drag and drop)
Objectif : Créer une interface permettant de déplacer des éléments par glisser-déposer.

15. Y. EL ALLIOUI – [email protected] 15 / 15
2025
Consignes :
1. Créer une interface HTML avec :
o Une zone contenant plusieurs éléments déplaçables (cartes, blocs, etc.)
o Une ou plusieurs zones de destination où déposer ces éléments
o Un compteur indiquant le nombre d'éléments dans chaque zone
2. Implémenter les fonctionnalités suivantes en JavaScript :
o Permettre de déplacer les éléments d'une zone à l'autre par glisser-déposer
o Afficher un indicateur visuel pendant le déplacement (par exemple, changer la
couleur de la zone de destination)
o Mettre à jour le compteur d'éléments dans chaque zone après chaque
déplacement
o Ajouter la possibilité de trier les éléments dans une même zone par glisser-
déposer
o Permettre de dupliquer un élément en maintenant une touche spécifique
enfoncée (par exemple, Ctrl ou Alt) pendant le glisser-déposer
Bonus :
• Implémenter une fonctionnalité pour sauvegarder la configuration actuelle (dans
localStorage)
• Ajouter un bouton pour réinitialiser la disposition initiale
Compétences testées : Utilisation de l'API Drag and Drop, gestion avancée des événements,
modification dynamique du DOM, manipulation des styles CSS, stockage local, gestion des
modificateurs de clavier.