Objets JavaScript

Objectif de la semaine : modéliser les données avec les objets.

Méthode recommandée : décris d'abord les propriétés utiles, puis affiche-les dynamiquement dans la page. Avancez par petites étapes et testez chaque changement immédiatement.

Un objet regroupe des données liées (propriétés) et des comportements (méthodes) sous un seul nom. C'est la structure de données la plus utilisée en JavaScript.

1) Créer un objet

On commence par regrouper des informations liées dans une seule variable. Chaque information est une propriété clé: valeur.

const etudiant = {
  nom: 'Marie Tremblay',
  age: 22,
  actif: true,
  cours: ['Web 1', 'BD', 'Programmation']
};

2) Lire une propriété

Deux syntaxes sont possibles : la notation pointée (la plus courante) et la notation crochet (utile avec des clés dynamiques).

console.log(etudiant.nom);    // notation pointée
console.log(etudiant['age']); // notation crochet

3) Modifier, ajouter et supprimer

Un objet JavaScript est mutable : on peut faire évoluer ses propriétés au fil du programme.

etudiant.age = 23; // modifier
etudiant.courriel = 'marie@cba.qc.ca'; // ajouter

delete etudiant.actif; // supprimer

4) Vérifier et parcourir les propriétés

Avant d'utiliser une propriété, on peut vérifier son existence. Ensuite, on peut parcourir toutes les clés pour générer un affichage dynamique.

console.log('nom' in etudiant);  // true
console.log('note' in etudiant); // false

for (const cle in etudiant) {
  console.log(cle, ':', etudiant[cle]);
}

5) Récupérer clés et valeurs rapidement

Les méthodes Object.keys() et Object.values() sont pratiques pour préparer une liste, un tableau ou des statistiques.

console.log(Object.keys(etudiant));
console.log(Object.values(etudiant));

6) Ajouter des méthodes à un objet

Un objet peut aussi contenir des fonctions. Dans une méthode, this référence l'objet courant.

const rectangle = {
  largeur: 10,
  hauteur: 5,
  aire() {
    return this.largeur * this.hauteur;
  },
  perimetre() {
    return 2 * (this.largeur + this.hauteur);
  }
};

console.log(rectangle.aire());
console.log(rectangle.perimetre());

Le principe ici est de prendre des données JavaScript (objet) et de les projeter dans l'interface HTML. Cette séparation données → affichage rend le code plus maintenable : on modifie les données, puis on regénère la vue.

Les 3 approches ci-dessous sont utiles selon le besoin : mise à jour ciblée d'éléments existants, création complète de nœuds DOM, ou génération rapide avec innerHTML.

const etudiant = {
  nom:     'Marie Tremblay',
  age:     22,
  courriel:'marie@cba.qc.ca',
  cours:   ['Web 1', 'BD', 'Programmation'],
};

// Méthode 1 : modifier du HTML existant
document.querySelector('#nom').textContent     = etudiant.nom;
document.querySelector('#age').textContent     = etudiant.age + ' ans';
document.querySelector('#courriel').textContent = etudiant.courriel;

// Méthode 2 : créer une carte HTML dynamiquement
function creerCarteEtudiant(etu) {
  const div = document.createElement('div');
  div.classList.add('carte');

  const h2 = document.createElement('h2');
  h2.textContent = etu.nom;

  const p = document.createElement('p');
  p.textContent = `${etu.age} ans — ${etu.courriel}`;

  div.appendChild(h2);
  div.appendChild(p);
  return div;
}

const carte = creerCarteEtudiant(etudiant);
document.querySelector('#conteneur').appendChild(carte);

// Méthode 3 : utiliser innerHTML (plus rapide à écrire)
document.querySelector('#conteneur').innerHTML = `
  <div class="carte">
    <h2>${etudiant.nom}</h2>
    <p>${etudiant.age} ans — ${etudiant.courriel}</p>
  </div>
`;

Un tableau d'objets représente souvent une liste réelle (étudiants, produits, tâches). L'objectif est de transformer ce tableau en éléments visuels (liste ou tableau HTML) puis d'appliquer des traitements comme filter, map ou sort.

1) Préparer les données

Commencez par un tableau d'objets clair. Cette structure sert de source unique pour tous les affichages (liste, tableau, résultats filtrés).

const etudiants = [
  { nom: 'Marie Tremblay', note: 88 },
  { nom: 'Jean Dupuis', note: 72 },
  { nom: 'Sophie Bernard', note: 95 },
  { nom: 'Lucas Martin', note: 61 }
];

2) Afficher le tableau d'objets dans une liste <ul>

Cette approche est idéale pour un premier rendu simple. On vide la liste puis on ajoute un <li> par étudiant.

const liste = document.querySelector('#liste');
liste.innerHTML = '';

etudiants.forEach(etu => {
  const li = document.createElement('li');
  li.textContent = `${etu.nom} — ${etu.note}/100`;
  liste.appendChild(li);
});

3) Générer un tableau HTML automatiquement

Quand les données ont plusieurs colonnes, un <table> devient plus lisible. Cette fonction crée l'en-tête et le corps à partir des objets.

function genererTableau(data, conteneurId) {
  const table = document.createElement('table');

  const thead = table.createTHead();
  const headRow = thead.insertRow();
  Object.keys(data[0]).forEach(cle => {
    const th = document.createElement('th');
    th.textContent = cle;
    headRow.appendChild(th);
  });

  const tbody = table.createTBody();
  data.forEach(item => {
    const tr = tbody.insertRow();
    Object.values(item).forEach(val => {
      const td = tr.insertCell();
      td.textContent = val;
    });
  });

  document.querySelector(conteneurId).appendChild(table);
}

genererTableau(etudiants, '#tableau');

4) Filtrer les données et mettre à jour l'affichage

Le filtrage permet de créer des vues ciblées (ex. étudiants en réussite). Ici, on déclenche le rendu avec un bouton.

const btnFiltrer = document.querySelector('#btnFiltrer');

btnFiltrer.addEventListener('click', () => {
  const reussites = etudiants.filter(e => e.note >= 60);
  const listeResultat = document.querySelector('#listeResultat');
  listeResultat.innerHTML = '';

  reussites.forEach(e => {
    const li = document.createElement('li');
    li.textContent = `${e.nom} : ${e.note}`;
    listeResultat.appendChild(li);
  });
});

Modélisez des données avec des objets et affichez-les dans le DOM.

1. Créez un tableau d’au moins 3 objets (ex. étudiants ou produits).
2. Affichez ces objets dans une liste ou un tableau HTML généré en JavaScript.
3. Ajoutez un filtrage simple (ex. note >= 60) et mettez à jour l’affichage.

Les questions sont cachées par défaut. Clique sur « Commencer le quiz » pour débuter.