{"id":5648,"date":"2024-08-29T01:20:11","date_gmt":"2024-08-29T01:20:11","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-un-objet-en-javascript-tutoriel\/"},"modified":"2024-08-29T01:20:14","modified_gmt":"2024-08-29T01:20:14","slug":"creer-un-objet-en-javascript-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-un-objet-en-javascript-tutoriel\/","title":{"rendered":"10.2 Cr\u00e9er un Objet en JavaScript : Tutoriel"},"content":{"rendered":"\n<p><strong>Cr\u00e9er des objets en JavaScript<\/strong> est une comp\u00e9tence essentielle pour le d\u00e9veloppement web c\u00f4t\u00e9 client. Comprendre comment cr\u00e9er, manipuler et utiliser correctement des objets en JavaScript peut grandement am\u00e9liorer vos capacit\u00e9s de codage et rendre votre code plus organis\u00e9 et maintenable. Apprenons comment ils fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Cr\u00e9ation d&rsquo;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\/658887726?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>Dans ce tutoriel, nous allons explorer comment <strong>cr\u00e9er des objets en JavaScript<\/strong>, les manipuler et comprendre leurs diff\u00e9rentes utilisations. Nous commencerons par les bases et avancerons vers des concepts plus complexes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Objet en JavaScript<\/h3>\n\n\n\n<p>En JavaScript, les objets sont des collections de propri\u00e9t\u00e9s, et une propri\u00e9t\u00e9 est une association entre un nom (ou cl\u00e9) et une valeur. La cr\u00e9ation d&rsquo;un objet en JavaScript peut se faire de plusieurs mani\u00e8res.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9er un Objet Litt\u00e9ral<\/h4>\n\n\n\n<p>La m\u00e9thode la plus simple pour cr\u00e9er un objet est d&rsquo;utiliser la notation litt\u00e9rale, comme ceci :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const person = {\n  name: \"John\",\n  age: 30,\n  isStudent: true\n};\nconsole.log(person.name); \/\/ John\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser le Constructeur Object<\/h4>\n\n\n\n<p>Une autre mani\u00e8re de cr\u00e9er un objet est d&rsquo;utiliser le constructeur <code>Object<\/code>. Cette m\u00e9thode est moins courante, mais peut \u00eatre utile dans certains cas :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const car = new Object();\ncar.make = \"Toyota\";\ncar.model = \"Corolla\";\ncar.year = 2020;\nconsole.log(car.model); \/\/ Corolla\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser des Fonctions Constructeurs<\/h4>\n\n\n\n<p>Les fonctions constructeurs sont une mani\u00e8re puissante et flexible de cr\u00e9er des objets. Elles permettent de cr\u00e9er plusieurs instances d&rsquo;objets qui partagent la m\u00eame structure et les m\u00eames m\u00e9thodes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function Person(name, age, isStudent) {\n  this.name = name;\n  this.age = age;\n  this.isStudent = isStudent;\n}\n\nconst alice = new Person(\"Alice\", 28, false);\nconst bob = new Person(\"Bob\", 24, true);\nconsole.log(bob.name); \/\/ Bob\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter et Modifier des Propri\u00e9t\u00e9s<\/h3>\n\n\n\n<p>Vous pouvez facilement ajouter de nouvelles propri\u00e9t\u00e9s \u00e0 un objet existant ou modifier les propri\u00e9t\u00e9s existantes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const book = {\n  title: \"JavaScript: The Good Parts\",\n  author: \"Douglas Crockford\"\n};\n\n\/\/ Ajouter une nouvelle propri\u00e9t\u00e9\nbook.year = 2008;\n\n\/\/ Modifier une propri\u00e9t\u00e9 existante\nbook.title = \"JavaScript: The Definitive Guide\";\n\nconsole.log(book.year); \/\/ 2008\nconsole.log(book.title); \/\/ JavaScript: The Definitive Guide\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des M\u00e9thodes d&rsquo;Objet<\/h3>\n\n\n\n<p>Les objets peuvent \u00e9galement contenir des fonctions appel\u00e9es m\u00e9thodes. Les m\u00e9thodes sont d\u00e9finies de la m\u00eame mani\u00e8re que les propri\u00e9t\u00e9s, mais sont des fonctions :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const cat = {\n  name: \"Whiskers\",\n  age: 2,\n  meow: function() {\n    console.log(\"Meow!\");\n  }\n};\n\ncat.meow(); \/\/ Meow!\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser Object.create<\/h3>\n\n\n\n<p>La m\u00e9thode <code>Object.create<\/code> permet de cr\u00e9er un nouvel objet en utilisant un prototype existant. Cela est utile pour l&rsquo;h\u00e9ritage entre objets :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const animal = {\n  isAlive: true,\n  breathe: function() {\n    console.log(\"Breathing...\");\n  }\n};\n\nconst dog = Object.create(animal);\ndog.bark = function() {\n  console.log(\"Bark!\");\n};\n\ndog.bark(); \/\/ Bark!\ndog.breathe(); \/\/ Breathing...\nconsole.log(dog.isAlive); \/\/ true\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Classes en JavaScript<\/h3>\n\n\n\n<p>Avec ES6, JavaScript introduit une syntaxe de classe qui permet de cr\u00e9er des objets de mani\u00e8re plus structur\u00e9e et orient\u00e9e objet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class Rectangle {\n  constructor(width, height) {\n    this.width = width;\n    this.height = height;\n  }\n\n  area() {\n    return this.width * this.height;\n  }\n}\n\nconst myRect = new Rectangle(10, 20);\nconsole.log(myRect.area()); \/\/ 200\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">H\u00e9ritage avec les Classes<\/h3>\n\n\n\n<p>En utilisant les classes, vous pouvez \u00e9galement cr\u00e9er des hi\u00e9rarchies d&rsquo;objets et impl\u00e9menter l&rsquo;h\u00e9ritage en JavaScript :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class Animal {\n  constructor(name) {\n    this.name = name;\n  }\n\n  speak() {\n    console.log(`${this.name} makes a sound.`);\n  }\n}\n\nclass Dog extends Animal {\n  speak() {\n    console.log(`${this.name} barks.`);\n  }\n}\n\nconst myDog = new Dog(\"Rex\");\nmyDog.speak(); \/\/ Rex barks.\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation des Objets<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation d&rsquo;Objet pour Structurer une Application<\/h4>\n\n\n\n<p>Les objets sont extr\u00eamement utiles pour organiser le code dans une application. Par exemple, vous pouvez structurer une application de gestion de contacts en utilisant des objets pour repr\u00e9senter chaque contact :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class Contact {\n  constructor(name, phone, email) {\n    this.name = name;\n    this.phone = phone;\n    this.email = email;\n  }\n\n  display() {\n    console.log(`${this.name} - ${this.phone} - ${this.email}`);\n  }\n}\n\nconst contacts = [\n  new Contact(\"Alice\", \"123-456-7890\", \"alice@example.com\"),\n  new Contact(\"Bob\", \"234-567-8901\", \"bob@example.com\")\n];\n\ncontacts.forEach(contact => contact.display());\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Objets et Collections<\/h4>\n\n\n\n<p>Les objets peuvent \u00e9galement \u00eatre utilis\u00e9s pour g\u00e9rer des collections de donn\u00e9es. Par exemple, un panier d&rsquo;achats dans un site de commerce en ligne peut \u00eatre repr\u00e9sent\u00e9 par un simple objet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const shoppingCart = {\n  items: [],\n  addItem(item) {\n    this.items.push(item);\n  },\n  getTotal() {\n    return this.items.reduce((total, item) => total + item.price, 0);\n  }\n};\n\nshoppingCart.addItem({name: \"Apple\", price: 1.00});\nshoppingCart.addItem({name: \"Banana\", price: 0.50});\nconsole.log(shoppingCart.getTotal()); \/\/ 1.50\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La cr\u00e9ation et l&rsquo;utilisation des objets en JavaScript jouent un r\u00f4le fondamental dans la programmation web. En ma\u00eetrisant les diff\u00e9rentes m\u00e9thodes de cr\u00e9ation et de manipulation d&rsquo;objets, vous serez en mesure d&rsquo;\u00e9crire du code plus riche et flexible. Continuez \u00e0 explorer et \u00e0 pratiquer pour approfondir vos comp\u00e9tences. Pour plus de tutoriels sur JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">formation JavaScript<\/a> sur Wikiform. En outre, explorer d&rsquo;autres aspects tels que <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\/\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce qu&rsquo;une variable en JavaScript<\/a>, et <a href=\"https:\/\/wikiform.fr\/codespace\/ecrire-une-fonction-en-javascript-tutoriel\/\" target=\"_blank\" rel=\"noopener\">\u00e9crire une fonction en JavaScript<\/a> peut \u00e9galement enrichir vos comp\u00e9tences. Vous pouvez \u00e9galement consulter notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/operateurs-de-comparaison-en-javascript\/\" target=\"_blank\" rel=\"noopener\">les op\u00e9rateurs de comparaison en JavaScript<\/a> pour plus de d\u00e9tails.<\/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\/javascript-offer.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre Sp\u00e9ciale\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er des objets en JavaScript est une comp\u00e9tence essentielle pour le d\u00e9veloppement web c\u00f4t\u00e9 client. Comprendre comment cr\u00e9er, manipuler et utiliser correctement des objets en&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5648","post","type-post","status-publish","format-standard","has-post-thumbnail","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\/5648","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=5648"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5648\/revisions"}],"predecessor-version":[{"id":5649,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5648\/revisions\/5649"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2866"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}