La fiche d'un livre — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 7)

La fiche d'un livre

Le DOM : lire et modifier la page · niveau 3 (difficile)

Énoncé

Les liens du catalogue mènent à livre.html?isbn=.... Dans une page de fiche, lire le paramètre isbn de l'adresse avec new URLSearchParams(location.search), retrouver le livre dans le module livres.js, et remplir le titre, l'auteur, le prix, la couverture et le titre de l'onglet. Si l'ISBN est absent ou inconnu, la page doit afficher « Livre introuvable ».

Corrigé


import { livres } from "../librairie/livres.js";

const euros = new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" });
const parametres = new URLSearchParams(location.search);
const isbn = parametres.get("isbn");
const livre = livres.find((l) => l.isbn === isbn);
const fiche = document.querySelector("#fiche");

if (livre) {
  document.title = `${livre.titre} — La Librairie du Campus`;
  fiche.querySelector("h1").textContent = livre.titre;
  fiche.querySelector(".auteur").textContent = livre.auteur;
  fiche.querySelector(".prix").textContent = euros.format(livre.prix);
  const image = fiche.querySelector("img");
  image.src = `../librairie/${livre.image}`;
  image.hidden = false;
}
console.log(isbn, "→", fiche.querySelector("h1").textContent, "|", document.title);

Pour les adresses ?isbn=9782956300052, ?isbn=123 puis sans paramètre, la console affiche :


9782956300052 → Le Petit Prince | Le Petit Prince — La Librairie du Campus
123 → Livre introuvable | Fiche d’un livre
null → Livre introuvable | Fiche d’un livre

La dernière ligne ci-dessus correspond à l'adresse sans paramètre : get rend alors null, et find ne trouve aucun livre. Le HTML contient déjà le texte « Livre introuvable » : le script n'a rien à faire dans ce cas.