Exercices de Javascript : DOM et objets

On désire proposer à un utilisateur la possibilité de commander des produits dans un catalogue. Pour cela, on va, d'une part, créer deux tableaux javascript : le premier sera le "catalogue", et le second sera le "panier" des commandes.

Le catalogue et le panier contiendront tous deux des objets représentant les produits.

Le catalogue sera affiché par une liste HTML. Pour repérer à quel objet du tableau correspond une entrée de la liste, la valeur associée à chaque élément de liste sera sa position dans le tableau.

Quand on appuirera sur le bouton "ajouter", le produit sera ajouté au panier, et une représentation de celui-ci, sous forme de tableau HTML, sera mise à jour en utilisant le DOM. Le prix total de la commande sera lui aussi mis à jour et affiché dans la page.

désignationprix

Total 0

Question 1

Écrire le code HTML qui servira de base à cette page.

Question 2

Comment va-t-on représenter nos produits en javascript, sachant qu'un produit a un prix (HT) et une désignation. Proposez un système pour ajouter le calcul du prix TTC (avec une TVA fixe de 20%).

Question 3

On suppose qu'on initialise et remplit un tableau (au sens javascript/Array) de produits, appelé "catalogue", dans l'en-tête de la page. Écrivez le code de la fonction remplirCatalogue() qui remplira la liste déroulante des produits à partir du contenu du tableau catalogue. Sur chaque ligne de la liste devra apparaître la désignation du produit.

On utilisera le DOM

Question 4

Écrivez la fonction ajouter(), qui sera appelée quand on pressera le bouton "ajouter". Cette fonction aura les effets suivants :

On utilisera le DOM (sauf éventuellement pour le total)

Question 5

Modifiez pour afficher pour chaque produit son prix TTC et son prix HT.

Question 6

On veut que le total soit la dernière ligne du tableau. Modifiez votre code en conséquence (plusieurs solutions possibles).

On utilisera le DOM