Atelier Finale 1 : JavaScript - POO
TP : Application Web de Gestion des
Salaires (POO & DOM)
Objectif
Réaliser une application web interactive permettant de gérer les employés d'une
entreprise. L'objectif technique est de traduire une conception UML classique
(orientée objet) en JavaScript moderne (ES6) et de manipuler le DOM pour afficher les
résultats.
1. Le Modèle Objet (Logique Métier)
En vous basant sur le diagramme de classes fourni (initialement prévu pour Java),
vous devez implémenter les classes JavaScript suivantes.
A. Classe Mère : Personne
Cette classe représente un employé générique.
● Constructeur : Doit initialiser nom, prenom, anneeNaissance, rue, ville.
● Méthode calculerAge() : Retourne l'âge de la personne en fonction de
l'année en cours (utiliser l'objet Date de JS).
● Méthode calculerSalaire() : Méthode abstraite (elle doit lancer une erreur
si elle est appelée directement depuis Personne, car on ne connaît pas le
salaire d'une personne générique).
● Méthode toString() : Retourne le nom et le prénom concaténés.
B. Les Classes Filles (Héritage)
Chaque classe ci-dessous doit hériter de Personne (mot-clé extends) et appeler le
constructeur parent (mot-clé super).
1. Classe Agent :
○ Attributs supplémentaires : heuresTravaillees (int), tauxHoraire
(float).
○ Règle de salaire : Salaire = Heures * Taux.
2. Classe Commercial :
○ Attributs supplémentaires : salaireFixe (float), chiffreAffaire
(float), commission (float, ex: 0.05 pour 5%).
○ Règle de salaire : Salaire = Fixe + (ChiffreAffaire *
Commission).
3. Classe Cadre :
○ Attributs supplémentaires : salaireFixe (float), bonus (float).
○ Règle de salaire : Salaire = Fixe + Bonus.
2. L'Interface Utilisateur (HTML/CSS)
Vous devez créer une page index.html propre et stylisée (style.css) contenant :
1. Un Formulaire de Saisie :
○ Champs communs : Nom, Prénom, Année de naissance, Rue, Ville.
○ Un sélecteur de type (<select>) : Pour choisir entre "Agent",
"Commercial" ou "Cadre".
○ Zone dynamique : Des champs de saisie qui changent selon le type
choisi (ex: Si je choisis "Agent", je dois voir "Heures" et "Taux". Si je
choisis "Cadre", je dois voir "Salaire Fixe" et "Bonus").
2. Un Bouton "Ajouter" : Déclenche la création de l'objet et l'ajout dans le tableau.
3. Un Tableau d'Affichage (<table>) :
○ Colonnes : Type, Nom Complet, Âge (calculé), Adresse, Salaire (calculé).
3. La Logique Applicative (Script.js)
Le fichier script.js doit faire le lien entre vos classes et votre HTML.
1. Gestion du Formulaire Dynamique :
○ Écoutez l'événement change sur le menu déroulant (select).
○ Modifiez les placeholder ou la visibilité des champs inputs
spécifiques en fonction du rôle sélectionné (ex: cacher le champ
"Commission" si ce n'est pas un Commercial).
2. Gestion de l'Ajout (Polymorphisme) :
○ Au clic sur "Ajouter", récupérez toutes les valeurs du formulaire.
○ Instanciez la bonne classe (new Agent, new Commercial ou new
Cadre) selon le choix de l'utilisateur.
○ Stockez cet objet dans un tableau global listeEmployes.
3. Affichage :
○ Créez une fonction afficherTableau() qui parcourt le tableau
listeEmployes.
○ Pour chaque employé, générez une ligne HTML (<tr>).
○ Important : Appelez la méthode .calculerSalaire() sur l'objet. Grâce
au polymorphisme, JS utilisera automatiquement la bonne formule de
calcul selon que l'objet est un Agent ou un Cadre.
4. Critères de Réussite
● [ ] L'héritage est correctement utilisé (extends).
● [ ] Le tableau affiche l'âge correct (calcul dynamique).
● [ ] Le salaire affiché correspond bien à la formule de chaque métier.
● [ ] L'interface s'adapte quand on change le type d'employé dans le menu
déroulant.
Exemple de Scénario de Test
1. Ajouter un Agent : "Moha", né en 1985. 35 heures, taux 50.
○ Résultat attendu : Salaire = 1750.
2. Ajouter un Commercial : "Manolo", né en 1990. Fixe 5000, CA 75000, Comm
0.05.
○ Résultat attendu : Salaire = 5000 + (75000 * 0.05) = 8750.
3. Ajouter un Cadre : "Toto", né en 1970. Fixe 20000, Bonus 5000.
○ Résultat attendu : Salaire = 25000.
1
/
4
100%
