ROYAUME DU MAROC
Office de la Formation Professionnelle et de la Promotion du Travail Formateur : [Link]
Filière : DEV Niveau :1er Année
Module : Programmation JAVASCRIPT
Année de formation: 2023/2024
TP3_DOM: Ajouter les éléments
On veut réaliser une page web statique contenant un formulaire permettant de gérer les
commandes des clients. L’utilisateur saisit les informations de chaque client en spécifiant son
numéro, nom, email, type du client et aussi sa liste de produits :
1. Programmer le code JAVASCRIPT permettant de calculer la somme totale des prix
des produits lorsque la cellule "Total" est cliquée. Le prix total de produit est obtenu
en multipliant le prix unitaire par la quantité correspondante. (prix total de chaque pro-
duit=prix unitaire* quantité)
2. Programmer le code JAVASCRIPT permettant suite au clic sur le bouton « Ajou-
ter» d’insérer les données saisies dans un tableau HTML en respectant les contraintes
suivantes:
a. Les champs numéro et nom du client sont obligatoires. Sinon, afficher le mes-
sage d’erreur en entourant l’input correspondante en rouge
b. Le numéro du client doit commencer par la lettre C suivi par 4 chiffres (Par
exemple : C3321). Sinon, afficher le message d’erreur en entourant l’input cor-
respondante en rouge
c. Impossible de saisir deux clients avec même numéro
d. La cellule Facture Payée ou Non peut avoir deux valeurs : Payée ou Non Payée
(si la case « checkbox» est couchée Payée, sinon Non Payée).
3. Programmer le code JAVASCRIPT permettant suite au clic sur le bouton « Nombre
de factures payées » d’afficher, dans une boite de dialogue, le nombre de factures
payées.
4. Programmer le code JAVASCRIPT permettant suite au clic sur le bouton « Styliser la
page » de:
a. Changer la police de tout le texte : Comic Sans MS.
1
ROYAUME DU MAROC
Office de la Formation Professionnelle et de la Promotion du Travail Formateur : [Link]
Filière : DEV Niveau :1er Année
Module : Programmation JAVASCRIPT
Année de formation: 2023/2024
TP3_DOM: Ajouter les éléments
b. Changer la couleur de fond de tous les boutons :dimGray.
c. Mettre en couleur les rangées des tableaux alternativement : les rangées pair
ont une couleur de fond gris-clair (gainsboro) et les rangées impair une couleur
de fond gris (gray).
