Skip to Content
🎉 Utilisez JS efficacement →
JSJavascript

🧩 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.

Consultez la documentation complète ici .


🧱 Schéma de Synthèse

window → Objet global contenant des méthodes/fonctions pour le navigateur. document → Objet qui représente et manipule le contenu de la page.
Méthodes couranteswindowdocument
Alertesalert("...")-
Navigationlocation.href-
Sélecteurs d’éléments-getElementById("id")
Création d’éléments-createElement("tag")

📘 Conclusion

  • La construction d’objets offre de la flexibilité grâce aux littéraux ou aux classes.
  • La déconstruction permet d’accéder facilement aux propriétés.
  • Les objets globaux comme window et document sont fondamentaux pour interagir avec le navigateur et le DOM.
mis à jour le