{"id":5646,"date":"2024-08-29T01:16:09","date_gmt":"2024-08-29T01:16:09","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-objet-en-javascript\/"},"modified":"2024-08-29T01:16:12","modified_gmt":"2024-08-29T01:16:12","slug":"qu-est-ce-qu-un-objet-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-objet-en-javascript\/","title":{"rendered":"10.1 Qu&rsquo;est-ce qu&rsquo;un Objet en JavaScript ?"},"content":{"rendered":"\n<p><strong>Les Objets en JavaScript<\/strong> sont des structures de donn\u00e9es essentielles pour d\u00e9velopper des applications web interactives. Comprendre comment cr\u00e9er et manipuler des <strong>objets en JavaScript<\/strong> peut consid\u00e9rablement am\u00e9liorer la qualit\u00e9 et l&rsquo;efficacit\u00e9 de votre code. Explorons ensemble ce qu&rsquo;est un <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-objet-en-javascript\" target=\"_blank\" rel=\"noopener\">Objet JavaScript<\/a> et comment l&rsquo;utiliser, illustr\u00e9 par des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Objets en JavaScript<\/strong><\/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\/658887461?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>Un <a href=\"https:\/\/wikiform.fr\/codespace\/objet-javascript-en-details\" target=\"_blank\" rel=\"noopener\">objet en JavaScript<\/a> est une collection de propri\u00e9t\u00e9s, o\u00f9 chaque propri\u00e9t\u00e9 est d\u00e9finie par un nom (cl\u00e9) et une valeur. Ces valeurs peuvent \u00eatre de divers types : primitives comme les cha\u00eenes de caract\u00e8res ou les nombres, ou plus complexes comme d&rsquo;autres objets ou <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\" target=\"_blank\" rel=\"noopener\">fonctions<\/a>. Les objets sont particuli\u00e8rement utiles pour structurer des donn\u00e9es et regrouper des fonctionnalit\u00e9s logiquement li\u00e9es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Objet en JavaScript<\/h3>\n\n\n\n<p>La cr\u00e9ation d&rsquo;un <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-objet-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">objet en JavaScript<\/a> peut se faire de plusieurs mani\u00e8res. La m\u00e9thode la plus courante consiste \u00e0 utiliser la notation par accolades, \u00e9galement appel\u00e9e notation litt\u00e9rale. Voici comment cr\u00e9er un objet repr\u00e9sentant une personne :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const person = {\n  firstName: \"John\",\n  lastName: \"Doe\",\n  age: 30,\n  isStudent: false\n};\n\nconsole.log(person); \/\/ Affiche l'objet person dans la console\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der et Modifier les Propri\u00e9t\u00e9s d&rsquo;un Objet<\/h3>\n\n\n\n<p>Une fois que vous avez cr\u00e9\u00e9 un objet, vous pouvez acc\u00e9der \u00e0 ses propri\u00e9t\u00e9s en utilisant la notation par point ou par crochet. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>console.log(person.firstName); \/\/ Acc\u00e9der \u00e0 la propri\u00e9t\u00e9 firstName\nconsole.log(person[\"lastName\"]); \/\/ Acc\u00e9der \u00e0 la propri\u00e9t\u00e9 lastName\n\n\/\/ Modifier une propri\u00e9t\u00e9 existante\nperson.age = 31;\nconsole.log(person.age); \/\/ Affiche 31\n\n\/\/ Ajouter une nouvelle propri\u00e9t\u00e9\nperson.occupation = \"Developer\";\nconsole.log(person.occupation); \/\/ Affiche Developer\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9thodes d&rsquo;Objet en JavaScript<\/h3>\n\n\n\n<p>Les objets peuvent \u00e9galement contenir des m\u00e9thodes qui sont essentiellement des fonctions stock\u00e9es en tant que propri\u00e9t\u00e9s de l&rsquo;objet. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const person = {\n  firstName: \"John\",\n  lastName: \"Doe\",\n  age: 30,\n  isStudent: false,\n  greet: function() {\n    console.log(`Hello, my name is ${this.firstName} ${this.lastName}`);\n  }\n};\n\nperson.greet(); \/\/ Appelle la m\u00e9thode greet, affiche \"Hello, my name is John Doe\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le Constructeur d&rsquo;Objets<\/h3>\n\n\n\n<p>En plus de la notation litt\u00e9rale, vous pouvez cr\u00e9er des objets en <a href=\"https:\/\/wikiform.fr\/codespace\/les-meilleurs-logiciels-pour-javascript\" target=\"_blank\" rel=\"noopener\">JavaScript<\/a> \u00e0 l&rsquo;aide d&rsquo;une fonction constructeur. Cette m\u00e9thode est utile pour cr\u00e9er plusieurs instances d&rsquo;un type d&rsquo;objet. Voici un exemple avec une fonction constructeur pour cr\u00e9er des objets Person :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function Person(firstName, lastName, age) {\n  this.firstName = firstName;\n  this.lastName = lastName;\n  this.age = age;\n}\n\nconst john = new Person(\"John\", \"Doe\", 30);\nconst jane = new Person(\"Jane\", \"Doe\", 25);\n\nconsole.log(john.firstName); \/\/ Affiche \"John\"\nconsole.log(jane.age); \/\/ Affiche 25\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Prototypes et H\u00e9ritage en JavaScript<\/h3>\n\n\n\n<p>En <a href=\"https:\/\/wikiform.fr\/codespace\/quest-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">JavaScript<\/a>, chaque fonction objet a une propri\u00e9t\u00e9 prototype qui permet de d\u00e9finir des propri\u00e9t\u00e9s et des m\u00e9thodes qui seront h\u00e9rit\u00e9es par toutes ses instances. Cela forme la base de l&rsquo;h\u00e9ritage bas\u00e9 sur les prototypes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>Person.prototype.greet = function() {\n  console.log(`Hello, my name is ${this.firstName} ${this.lastName}`);\n};\n\njohn.greet(); \/\/ Affiche \"Hello, my name is John Doe\"\njane.greet(); \/\/ Affiche \"Hello, my name is Jane Doe\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Pratique des Objets<\/h3>\n\n\n\n<p>Les objets en <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\" target=\"_blank\" rel=\"noopener\">JavaScript<\/a> sont extr\u00eamement utiles pour structurer les donn\u00e9es et les fonctionnalit\u00e9s de vos applications. Par exemple, consid\u00e9rez l&rsquo;utilisation des objets pour stocker des informations de produits dans un panier d&rsquo;achat :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const cart = {\n  items: [],\n  addItem: function(item) {\n    this.items.push(item);\n  },\n  getTotal: function() {\n    return this.items.reduce((total, item) => total + item.price, 0);\n  }\n};\n\nconst product1 = { name: \"Shirt\", price: 20 };\nconst product2 = { name: \"Pants\", price: 40 };\n\ncart.addItem(product1);\ncart.addItem(product2);\n\nconsole.log(cart.getTotal()); \/\/ Affiche 60\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Profitez de l&rsquo;Offre Sp\u00e9ciale<\/h3>\n\n\n\n<div id=\"popupContainer\" style=\"display: block; position: relative; width: 100%; padding: 10px; border: 1px solid #ccc; margin: 20px 0; text-align: center;\">\n  <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\">Apprenez JavaScript avec Notre Cours Complet<\/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: inline-block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em;\" rel=\"noopener\">Commencer maintenant<\/a>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>objets en JavaScript<\/strong> sont une base incontournable pour le d\u00e9veloppement d&rsquo;applications complexes et interactives. En les ma\u00eetrisant, vous pouvez cr\u00e9er des structures de donn\u00e9es robustes et r\u00e9utilisables. Continuez d\u2019explorer et de pratiquer avec les objets pour am\u00e9liorer vos comp\u00e9tences en <strong>JavaScript<\/strong>. Pour aller plus loin, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre cours complet et d\u00e9taill\u00e9 sur les fondamentaux et avanc\u00e9es de JavaScript, disponible \u00e0 un prix r\u00e9duit pendant une dur\u00e9e limit\u00e9e.<\/p>\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-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Liens internes -->\n<p>Pour en savoir plus sur les objets en JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\" target=\"_blank\" rel=\"noopener\">article sur les fonctions en JavaScript<\/a>. Si vous explorez d&rsquo;autres aspects de JavaScript, vous pourriez \u00eatre int\u00e9ress\u00e9 par notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">les meilleurs outils pour JavaScript<\/a>. Soyez \u00e9galement attentif aux <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\" target=\"_blank\" rel=\"noopener\">extensions utiles pour JavaScript<\/a> ou d\u00e9couvrez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/queteils javascript pour les d\u00e9butants<\/\" target=\"_blank\" rel=\"noopener\">les bases du JavaScript<\/a>.<\/p>\n\n<!-- Liens externes -->\n<p>Pour approfondir encore plus vos connaissances en JavaScript, nous vous recommandons de visiter des ressources externes comme <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\" target=\"_blank\" rel=\"dofollow noopener\">MDN Web Docs<\/a> pour une riche documentation sur JavaScript. Par ailleurs, le site <a href=\"https:\/\/javascript.info\/\" target=\"_blank\" rel=\"dofollow noopener\">javascript.info<\/a> offre une multitude de tutoriels et de guides d\u00e9taill\u00e9s. Enfin, Stack Overflow est une excellente plateforme pour obtenir des r\u00e9ponses \u00e0 vos questions via <a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/javascript\" target=\"_blank\" rel=\"dofollow noopener\">leur section JavaScript<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Les Objets en JavaScript sont des structures de donn\u00e9es essentielles pour d\u00e9velopper des applications web interactives. Comprendre comment cr\u00e9er et manipuler des objets en JavaScript&#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-5646","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\/5646","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=5646"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5646\/revisions"}],"predecessor-version":[{"id":5647,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5646\/revisions\/5647"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}