{"id":5706,"date":"2024-08-29T03:15:53","date_gmt":"2024-08-29T03:15:53","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ecouteurs-par-proprietes-en-javascript-guide\/"},"modified":"2025-01-16T12:35:39","modified_gmt":"2025-01-16T12:35:39","slug":"ecouteurs-par-proprietes-en-javascript-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ecouteurs-par-proprietes-en-javascript-guide\/","title":{"rendered":"14.3 \u00c9couteurs par Propri\u00e9t\u00e9s en JavaScript : Guide"},"content":{"rendered":"\n\n\n<p><strong>Les \u00e9couteurs par propri\u00e9t\u00e9s en JavaScript<\/strong> sont des outils essentiels pour cr\u00e9er des applications web interactives et dynamiques. Comprendre comment les utiliser et les mettre en place peut consid\u00e9rablement am\u00e9liorer l&rsquo;exp\u00e9rience de vos utilisateurs et rendre votre code plus r\u00e9actif. Dans cet article, nous allons explorer les \u00e9couteurs par propri\u00e9t\u00e9s en JavaScript, leur fonctionnement et comment les impl\u00e9menter dans vos projets gr\u00e2ce \u00e0 des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>\u00c9couteurs par Propri\u00e9t\u00e9s 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\/658893977?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>Les \u00e9couteurs par propri\u00e9t\u00e9s en JavaScript permettent de d\u00e9tecter et de r\u00e9agir aux changements de valeurs des propri\u00e9t\u00e9s d&rsquo;objets. Cela est particuli\u00e8rement utile pour les applications r\u00e9actives et les interfaces utilisateur dynamiques, o\u00f9 le changement d&rsquo;une propri\u00e9t\u00e9 peut d\u00e9clencher des mises \u00e0 jour ou des actions sp\u00e9cifiques.<br>\nVoyons maintenant comment les impl\u00e9menter avec la m\u00e9thode <code>Object.defineProperty()<\/code> et le proxy JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>Object.defineProperty()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>Object.defineProperty()<\/code> permet de d\u00e9finir une nouvelle propri\u00e9t\u00e9 sur un objet ou de modifier une propri\u00e9t\u00e9 existante. Voici comment vous pouvez l&rsquo;utiliser pour ajouter un \u00e9couteur \u00e0 une propri\u00e9t\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let person = {\n  name: 'John'\n};\n\nObject.defineProperty(person, 'name', {\n  get() {\n    return this._name;\n  },\n  set(value) {\n    this._name = value;\n    console.log(`La propri\u00e9t\u00e9 name a \u00e9t\u00e9 chang\u00e9e en : ${value}`);\n  }\n});\n\n\/\/ Modifier la propri\u00e9t\u00e9 pour voir l'effet\nperson.name = 'Doe';  \/\/ Console: La propri\u00e9t\u00e9 name a \u00e9t\u00e9 chang\u00e9e en : Doe\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Proxies<\/h3>\n\n\n\n<p>Les proxies en JavaScript offrent une mani\u00e8re plus flexible et puissante de surveiller et d&rsquo;intercepter les op\u00e9rations sur des objets. Voici un exemple d&rsquo;utilisation des proxies pour ajouter un \u00e9couteur \u00e0 une propri\u00e9t\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const handler = {\n  set(target, property, value) {\n    console.log(`La propri\u00e9t\u00e9 ${property} a \u00e9t\u00e9 chang\u00e9e en : ${value}`);\n    target&#91;property] = value;\n    return true; \/\/ Indique que la valeur a \u00e9t\u00e9 assign\u00e9e avec succ\u00e8s\n  }\n};\n\nconst person = new Proxy({}, handler);\n\n\/\/ Modifier la propri\u00e9t\u00e9 pour voir l'effet\nperson.name = 'Smith';  \/\/ Console: La propri\u00e9t\u00e9 name a \u00e9t\u00e9 chang\u00e9e en : Smith\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des \u00c9couteurs Complexes<\/h3>\n\n\n\n<p>En utilisant des proxies, vous pouvez cr\u00e9er des \u00e9couteurs plus complexes qui r\u00e9agissent \u00e0 des conditions sp\u00e9cifiques ou qui d\u00e9clenchent plusieurs actions. Voici un exemple avanc\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const handler = {\n  set(target, property, value) {\n    if (property === 'age' && typeof value !== 'number') {\n      throw new TypeError('La propri\u00e9t\u00e9 age doit \u00eatre un nombre');\n    }\n    console.log(`La propri\u00e9t\u00e9 ${property} a \u00e9t\u00e9 chang\u00e9e en : ${value}`);\n    if (property === 'age' && value < 18) {\n      console.log('Attention : l\\'\u00e2ge doit \u00eatre sup\u00e9rieur ou \u00e9gal \u00e0 18');\n    }\n    target[property] = value;\n    return true;\n  }\n};\nconst person = new Proxy({}, handler);\ntry {\n  person.age = 17;  \/\/ Console: La propri\u00e9t\u00e9 age a \u00e9t\u00e9 chang\u00e9e en : 17 et Attention : l'\u00e2ge doit \u00eatre sup\u00e9rieur ou \u00e9gal \u00e0 18\n} catch (err) {\n  console.error(err.message);\n}\ntry {\n  person.age = 'not a number';  \/\/ Console: Uncaught TypeError: La propri\u00e9t\u00e9 age doit \u00eatre un nombre\n} catch (err) {\n  console.error(err.message);\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>\u00e9couteurs par propri\u00e9t\u00e9s en JavaScript<\/strong> sont des outils puissants pour rendre vos applications plus r\u00e9actives et dynamiques. En utilisant les m\u00e9thodes <code>Object.defineProperty()<\/code> et <code>Proxy<\/code>, vous pouvez facilement surveiller et r\u00e9agir aux changements de propri\u00e9t\u00e9s. Ces techniques sont essentielles pour cr\u00e9er des interfaces utilisateur modernes et efficaces.<br>\nPour aller plus loin et approfondir vos connaissances, consultez les ressources disponibles en ligne et exp\u00e9rimentez avec vos propres projets. Pour plus de tutoriels et de cours sur JavaScript, visitez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\">page de formation JavaScript<\/a>.<\/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-fundamentals-course-banner.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Les Fondamentaux\" title=\"\"><\/a>\n\n\n\n<p>Pour vraiment comprendre les propri\u00e9t\u00e9s JavaScript, il est \u00e9galement utile d'apprendre des concepts connexes tels que <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">qu'est-ce qu'une variable en JavaScript<\/a> et comment <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\" target=\"_blank\" rel=\"noopener\">d\u00e9clarer des variables en JavaScript<\/a>. Ces bases vous permettront de mieux ma\u00eetriser la manipulation des donn\u00e9es dans vos applications.<\/p>\n\n\n\n<p>Coder en JavaScript ne se limite pas seulement \u00e0 la gestion des propri\u00e9t\u00e9s. Il est \u00e9galement important de savoir <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-une-information-en-javascript\" target=\"_blank\" rel=\"noopener\">afficher des informations en JavaScript<\/a> et d'apprendre la <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-ecouteurs-evenements-en-javascript-onclick\" target=\"_blank\" rel=\"noopener\">gestion des \u00e9v\u00e9nements<\/a> pour rendre vos applications plus interactives.<\/p>\n\n\n\n<p>Pour ceux d\u00e9sireux d'aller plus loin, l'apprentissage des <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\" target=\"_blank\" rel=\"noopener\">techniques de gestion des exceptions en JavaScript<\/a> ainsi que l'usage des balises HTML appropri\u00e9es optimiseront votre code.<\/p>\n\n\n\n<p>Comprendre les propri\u00e9t\u00e9s JavaScript ouvre la porte \u00e0 tant de possibilit\u00e9s dans le d\u00e9veloppement web. Pour ceux qui souhaitent explorer davantage, il est conseill\u00e9 de se pencher sur <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\" target=\"_blank\" rel=\"noopener\">l'utilisation du d\u00e9bogueur en JavaScript<\/a> pour perfectionner leurs comp\u00e9tences.<\/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","protected":false},"excerpt":{"rendered":"<p>Les \u00e9couteurs par propri\u00e9t\u00e9s en JavaScript sont des outils essentiels pour cr\u00e9er des applications web interactives et dynamiques. Comprendre comment les utiliser et les mettre&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2875,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5706","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\/5706","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=5706"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5706\/revisions"}],"predecessor-version":[{"id":6121,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5706\/revisions\/6121"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2875"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}