Fiche Pratique : Objets en JavaScript

Construire et Déconstruire un Objet JavaScript

a) Création d’un Objet

Un objet en JavaScript est une collection de paires clé-valeur. Voici quelques manières de créer un objet :

Littéral d’objet


const personne = {
  nom: "Alice",
  age: 25,
  parler: function() {
    console.log("Bonjour !");
  }
};

Avec un constructeur


const voiture = new Object();
voiture.marque = "Toyota";
voiture.modele = "Corolla";
voiture.demarrer = function() {
  console.log("Vroom !");
};

Avec une classe (ES6+)


class Animal {
  constructor(nom, espece) {
    this.nom = nom;
    this.espece = espece;
  }
}
const chat = new Animal("Mimi", "Chat");

b) Déconstruction d’un Objet

Accéder aux propriétés


console.log(personne.nom);  // "Alice"
console.log(personne["age"]);  // 25

Destructuration


const { nom, age } = personne;
console.log(nom);  // "Alice"
console.log(age);  // 25

Attribuer de nouvelles variables


const { nom: prenom, age: annee } = personne;
console.log(prenom);  // "Alice"
console.log(annee);  // 25

Une autre approche si l’objet manipuler est stable (toujours le même format, et le même ordre.)


const { nom, age } = personne;
const [ prenom, annee ] = personne;
console.log(prenom);  // "Alice"
console.log(annee);  // 25

Objets Globaux : `window` et `document`

a) L’objet `window`

L’objet window est l’objet global dans les navigateurs. Toutes les variables globales et fonctions sont ses propriétés.

Exemples de propriétés et méthodes


console.log(window.innerWidth);  // Largeur de la fenêtre
console.log(window.location.href);  // URL de la page actuelle
 
window.alert("Bonjour !");  // Boîte d'alerte

Quelques méthodes importantes

window.open(url, nom, options) : Ouvrir une nouvelle fenêtre.
window.setTimeout(fonction, délai) : Exécuter une fonction après un délai.
window.localStorage : Stockage persistant.

Consultez la documentation complète ici .

b) L’objet `document`

L’objet document représente la structure HTML de la page. Il permet de manipuler le DOM.

Exemples courants

Accéder à un élément HTML :


const titre = document.getElementById("mon-titre");
const boutons = document.querySelectorAll(".bouton");

Modifier un élément :


titre.textContent = "Nouveau Titre";
titre.style.color = "blue";

Créer et ajouter un élément :


const nouveauParagraphe = document.createElement("p");
nouveauParagraphe.textContent = "Bonjour tout le monde !";
document.body.appendChild(nouveauParagraphe);

Quelques méthodes utiles

document.getElementById(id) : Sélection par ID.
document.querySelector(sel) : Premier élément correspondant au sélecteur.
document.createElement(tag) : Création d’un nouvel élément.