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 courantes | window | document |
---|---|---|
Alertes | alert("...") | - |
Navigation | location.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
etdocument
sont fondamentaux pour interagir avec le navigateur et le DOM.