TP JAVASCRIPT
Soit deux tableaux vides : categories et produits
1. Écrire la fonction chargerCategories() qui permet de charger le tableau categories à partir de l’URL :
[Link] en utilisant AJAX sachant que le résultat est un tableau JSON d’objets
{idCategorie, titreCategorie, descriptionCategorie}Puis d’appeler la fonction remplirSelect()
2. Écrire la fonction remplirSelect() qui permet d’afficher les catégories dans le <select> du
formulaire.
Chaque option doit avoir comme texte : titre-description, et comme valeur : id.
3. Écrire la fonction existProduit(code) qui vérifie si un produit avec ce code existe déjà dans la liste et
affiche « Produit déjà existant »
4. Écrire la fonction valider() qui vérifie que tous les champs sont obligatoires, le champ libelle contient
au moins 3 lettres, Le code produit n’existe pas déjà dans le tableau produits
5. Écrire la fonction afficherTable() qui parcourt le tableau produits et remplit dynamiquement le
<tbody> du tableau HTML.
Chaque ligne doit contenir :
codeProduit, libelle, prix, categorieId, categorieTitre, categorieDescription
Le passage de la souris (mouseover) colore le texte en rouge
6. Associer l’événement click du bouton Sauvegarder à la fonction sauvegarder(),
o Valide les données saisies,
o ajoute un objet produit avec les attributs suivants dans la table produit
codeProduit, libelle, prix, categorieId categorieTitre, categorieDescription
o Met à jour l’affichage du tableau.
Corrigé
let categories = [];
let produits = [];
[Link] = () => { chargerCategories();};
function chargerCategories() {
const xhr = new XMLHttpRequest();
[Link]("GET", "[Link] true);
[Link] = function () {
if ([Link] === 200) {
categories = [Link]([Link]);
remplirSelect();
}
};
[Link]();
}
function remplirSelect() {
const select = [Link]("#select");
[Link] = "<option value=''>--Tous les catégories--</option>";
[Link](cat => {
const option = [Link]("option");
[Link] = [Link];
[Link] = `${[Link]} - ${[Link]}`;
[Link](option);
});
}
function existProduit(code) {
const existe = [Link](p => [Link] === code);
if (existe) {
alert("Produit déjà existant");
}
return existe;
}
function valider() {
const code = [Link]("#code").[Link]();
const libelle = [Link]("#libelle").[Link]();
const prix = [Link]("#prix").[Link]();
const categorieId = [Link]("#select").value;
if (!code || !libelle || !prix || !categorieId) { alert("Tous les champs sont obligatoires."); return false; }
if ([Link] < 3) { alert("Le libellé doit contenir au moins 3 lettres."); return false; }
if (existProduit(code)) { return false; }
return true;
}
function afficherTable() {
const tbody = [Link]("table tbody");
[Link] = "";
[Link](prod => {
const tr = [Link]("tr");
["codeProduit", "libelle", "prix", "categorieId", "categorieTitre", "categorieDescription"].forEach(attr => {
const td = [Link]("td");
[Link] = prod["codeProduit"]; [Link](td);
});
[Link]("mouseover", () => { [Link] = "red"; });
[Link]("mouseout", () => { [Link] = ""; });
[Link](tr);
});
}
[Link]("button").addEventListener("click", sauvegarder);
function sauvegarder() {
if (!valider()) return;
const code = [Link]("#code").[Link]();
const libelle = [Link]("#libelle").[Link]();
const prix = [Link]("#prix").[Link]();
const categorieId = [Link]("#select").value;
const categorie = [Link](c => [Link] == categorieId);
const produit = { codeProduit: code, libelle: libelle, prix: prix, categorieId: [Link], categorieTitre:
[Link], categorieDescription: [Link] };
[Link](produit);
afficherTable();
}