{"id":5652,"date":"2024-08-29T01:28:04","date_gmt":"2024-08-29T01:28:04","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utilisation-des-objets-en-javascript-guide\/"},"modified":"2025-01-09T15:43:53","modified_gmt":"2025-01-09T15:43:53","slug":"utilisation-des-objets-en-javascript-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utilisation-des-objets-en-javascript-guide\/","title":{"rendered":"10.4 Utilisation des Objets en JavaScript : Guide"},"content":{"rendered":"\n\n\n<p><strong>Utilisation des Objets en JavaScript<\/strong> est un aspect fondamental pour la gestion de donn\u00e9es et de comportements dans vos applications web. Comprendre comment cr\u00e9er et manipuler des objets peut consid\u00e9rablement am\u00e9liorer la souplesse et l&rsquo;efficacit\u00e9 de votre code. Apprenons \u00e0 exploiter les objets en JavaScript \u00e0 travers des explications d\u00e9taill\u00e9es et des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Utilisation des Objets en JavaScript<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658888005?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>En JavaScript, un objet est une collection de paires cl\u00e9-valeur ou une entit\u00e9 ayant des propri\u00e9t\u00e9s et des m\u00e9thodes. Les objets vous permettent de regrouper des informations connexes et des fonctionnalit\u00e9s dans une structure coh\u00e9rente. Ce guide vous montrera comment cr\u00e9er, utiliser et manipuler des objets en JavaScript gr\u00e2ce \u00e0 des exemples pratiques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Initialiser des Objets<\/h3>\n\n\n\n<p>En JavaScript, vous pouvez cr\u00e9er des objets de diff\u00e9rentes fa\u00e7ons. Les deux plus courantes sont la syntaxe de litt\u00e9raux d&rsquo;objets et l&rsquo;utilisation du constructeur <code>Object<\/code>. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utilisation d'un litt\u00e9ral d'objet\nconst personne = {\n    prenom: 'Alice',\n    nom: 'Durand',\n    age: 30,\n    saluer: function() {\n        console.log(`Bonjour, je m'appelle ${this.prenom} ${this.nom}.`);\n    }\n};\n\n\/\/ Utilisation du constructeur Object\nconst voiture = new Object();\nvoiture.marque = 'Tesla';\nvoiture.modele = 'Model S';\nvoiture.annee = 2020;\nvoiture.details = function() {\n    return `${this.marque} ${this.modele} (${this.annee})`;\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux Propri\u00e9t\u00e9s et M\u00e9thodes des Objets<\/h3>\n\n\n\n<p>Vous pouvez acc\u00e9der aux propri\u00e9t\u00e9s et m\u00e9thodes d&rsquo;un objet en utilisant la notation par point ou la notation par crochets :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Notation par point\nconsole.log(personne.prenom); \/\/ Alice\npersonne.saluer(); \/\/ Bonjour, je m'appelle Alice Durand.\n\n\/\/ Notation par crochets\nconsole.log(voiture&#91;'marque']); \/\/ Tesla\nconsole.log(voiture.details()); \/\/ Tesla Model S (2020)\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Modifier et Supprimer des Propri\u00e9t\u00e9s des Objets<\/h3>\n\n\n\n<p>Les objets JavaScript sont dynamiques, ce qui signifie que vous pouvez ajouter, modifier ou supprimer des propri\u00e9t\u00e9s et des m\u00e9thodes apr\u00e8s leur cr\u00e9ation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Ajouter une nouvelle propri\u00e9t\u00e9\npersonne.profession = 'D\u00e9veloppeur';\nconsole.log(personne.profession); \/\/ D\u00e9veloppeur\n\n\/\/ Modifier une propri\u00e9t\u00e9 existante\nvoiture.annee = 2021;\nconsole.log(voiture.details()); \/\/ Tesla Model S (2021)\n\n\/\/ Supprimer une propri\u00e9t\u00e9\ndelete personne.age;\nconsole.log(personne.age); \/\/ undefined\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Parcourir les Propri\u00e9t\u00e9s d&rsquo;un Objet<\/h3>\n\n\n\n<p>Il est souvent utile de parcourir les propri\u00e9t\u00e9s d&rsquo;un objet, notamment pour le d\u00e9bogage ou pour effectuer des op\u00e9rations sur chaque paire cl\u00e9-valeur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utilisation de for...in pour parcourir les propri\u00e9t\u00e9s\nfor (const propriete in personne) {\n    if (personne.hasOwnProperty(propriete)) {\n        console.log(`${propriete}: ${personne&#91;propriete]}`);\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Objets et Programmation Orient\u00e9e Objet (POO)<\/h3>\n\n\n\n<p>JavaScript supporte la programmation orient\u00e9e objet \u00e0 travers l&rsquo;utilisation de prototypes et de classes (introduites avec ES6). Cela permet de structurer votre code de mani\u00e8re modulaire et r\u00e9utilisable :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ D\u00e9finir une classe\nclass Animal {\n    constructor(nom, espece) {\n        this.nom = nom;\n        this.espece = espece;\n    }\n\n    decrire() {\n        return `${this.nom} est un ${this.espece}.`;\n    }\n}\n\n\/\/ Cr\u00e9er des instances de la classe\nconst lion = new Animal('Simba', 'lion');\nconst dauphin = new Animal('Flipper', 'dauphin');\n\nconsole.log(lion.decrire()); \/\/ Simba est un lion.\nconsole.log(dauphin.decrire()); \/\/ Flipper est un dauphin.\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Objets pour Construire des Applications Complexes<\/h3>\n\n\n\n<p>Les objets jouent un r\u00f4le crucial dans la cr\u00e9ation de structures de donn\u00e9es complexes et la gestion de l&rsquo;\u00e9tat de vos applications. Par exemple, vous pouvez les utiliser pour impl\u00e9menter des mod\u00e8les de donn\u00e9es dans un cadre de d\u00e9veloppement tel que <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"dofollow noopener\">React.js<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class Utilisateur {\n    constructor(nom, email) {\n        this.nom = nom;\n        this.email = email;\n        this.connexion();\n    }\n\n    connexion() {\n        console.log(`${this.nom} est connect\u00e9.`);\n    }\n\n    deconnexion() {\n        console.log(`${this.nom} est d\u00e9connect\u00e9.`);\n    }\n}\n\n\/\/ Utilisation de l'objet Utilisateur dans une application React\nimport React, { useState } from 'react';\n\nfunction Application() {\n    const &#91;user, setUser] = useState(new Utilisateur('Alice', 'alice@example.com'));\n\n    function handleLogout() {\n        user.deconnexion();\n        setUser(null);\n    }\n\n    return (\n        <div>\n            <h1>Bienvenue, {user.nom}<\/h1>\n            <button onclick=\"{handleLogout}\">D\u00e9connexion<\/button>\n        <\/div>\n    );\n}\n\nexport default Application;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur l&rsquo;Utilisation des Objets en JavaScript<\/h2>\n\n\n\n<p>Les <strong>objets en JavaScript<\/strong> sont des structures puissantes qui vous permettent d&rsquo;organiser et de structurer votre code de mani\u00e8re efficace. En les comprenant et en les utilisant correctement, vous pouvez am\u00e9liorer la flexibilit\u00e9, la r\u00e9usabilit\u00e9, et la maintenabilit\u00e9 de vos applications. Continuez \u00e0 explorer les objets en JavaScript pour d\u00e9couvrir <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-objet-en-javascript\" target=\"_blank\" rel=\"noopener\">plus de fonctionnalit\u00e9s avanc\u00e9es<\/a> et d&rsquo;applications pratiques.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-expert-en-javascript\/150\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVA_SCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>En continuant \u00e0 apprendre sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\" target=\"_blank\" rel=\"noopener\">utilisation du d\u00e9bogueur en JavaScript<\/a> et en explorant divers aspects comme <a href=\"https:\/\/wikiform.fr\/codespace\/operation-mathematiques-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">les op\u00e9rations math\u00e9matiques en JavaScript<\/a>, vous augmenterez vos comp\u00e9tences globales. N&rsquo;oubliez pas de vous familiariser avec <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">les meilleurs outils et logiciels pour JavaScript<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Liens Utiles<\/h4>\n\n\n\n<p>Pour plus d&rsquo;informations, consultez ces articles connexes :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-objet-en-javascript\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce qu&rsquo;un objet en JavaScript ?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-objet-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">Cr\u00e9er un objet en JavaScript &#8211; Tutoriel<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/decomposition-objet-en-javascript-destructuring\" target=\"_blank\" rel=\"noopener\">D\u00e9composition des objets en JavaScript<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/objet-map-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">Objet Map en JavaScript &#8211; Tutoriel<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce qu&rsquo;une fonction en JavaScript ?<\/a><\/li>\n<\/ul>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVA_SCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Utilisation des Objets en JavaScript est un aspect fondamental pour la gestion de donn\u00e9es et de comportements dans vos applications web. Comprendre comment cr\u00e9er et&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5652","post","type-post","status-publish","format-standard","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5652"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5652\/revisions"}],"predecessor-version":[{"id":6111,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5652\/revisions\/6111"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}