{"id":5602,"date":"2024-08-28T23:47:58","date_gmt":"2024-08-28T23:47:58","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-5-afficher-resultat\/"},"modified":"2025-01-09T15:21:39","modified_gmt":"2025-01-09T15:21:39","slug":"calculatrice-javascript-etape-5-afficher-resultat","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-5-afficher-resultat\/","title":{"rendered":"6.7 Calculatrice JavaScript \u00c9tape 5 : Afficher R\u00e9sultat"},"content":{"rendered":"\n\n\n<p><strong>Affineurs de calcul en JavaScript<\/strong> jouent un r\u00f4le essentiel pour cr\u00e9er des interfaces utilisateur fluides et r\u00e9actives. Comprendre comment concevoir et afficher les r\u00e9sultats d&rsquo;une <strong>calculatrice JavaScript<\/strong> peut fortement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. D\u00e9couvrons ensemble la cinqui\u00e8me \u00e9tape : afficher les r\u00e9sultats avec des exemples clairs et pr\u00e9cis.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Affichage des R\u00e9sultats 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\/658884057?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 cette section, nous allons explorer comment afficher le r\u00e9sultat du calcul r\u00e9alis\u00e9 par notre calculatrice JavaScript. Pour cela, nous allons utiliser les fonctionnalit\u00e9s de base de JavaScript et manipuler le DOM (Document Object Model) afin de mettre \u00e0 jour dynamiquement notre interface utilisateur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Structure HTML Initiale<\/h3>\n\n\n\n<p>Pour pouvoir afficher des r\u00e9sultats, commen\u00e7ons par ajuster notre structure HTML. Nous avons besoin d&rsquo;un champ d&rsquo;affichage pour montrer les r\u00e9sultats et d&rsquo;un bouton pour d\u00e9clencher le calcul. Voici un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Calculatrice JavaScript&lt;\/title&gt;\n    &lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n            text-align: center;\n            margin-top: 50px;\n        }\n        .calculator {\n            display: inline-block;\n            text-align: left;\n        }\n        .display {\n            width: 100%;\n            height: 40px;\n            text-align: right;\n            padding: 10px;\n            font-size: 1.5em;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"calculator\"&gt;\n        &lt;input type=\"text\" class=\"display\" id=\"display\" readonly&gt;\n        &lt;br&gt;\n        &lt;button onclick=\"calculate()\"&gt;= (&lt;\/button&gt;\n        &lt;!-- Boutons suppl\u00e9mentaires de la calculatrice ici --&gt;\n    &lt;\/div&gt;\n    \n    &lt;script src=\"script.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">JavaScript pour Afficher le R\u00e9sultat<\/h3>\n\n\n\n<p>\u00c0 pr\u00e9sent, nous allons \u00e9crire la fonction JavaScript qui prendra les valeurs saisies et calculera le r\u00e9sultat. Cette fonction mettra \u00e0 jour le champ d&rsquo;affichage avec le r\u00e9sultat du calcul.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ script.js\nfunction calculate() {\n    \/\/ R\u00e9cup\u00e9rer la valeur contenue dans le champ d'affichage\n    const display = document.getElementById('display');\n    \n    try {\n        \/\/ \u00c9valuer l'expression dans le champ d'affichage\n        const result = eval(display.value);\n        \n        \/\/ Afficher le r\u00e9sultat dans le champ d'affichage\n        display.value = result;\n    } catch (error) {\n        \/\/ En cas d'erreur (par exemple, une expression invalide), afficher une alerte\n        alert('Erreur de saisie');\n        display.value = ''; \/\/ R\u00e9initialiser le champ d'affichage\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Attacher des \u00c9v\u00e9nements pour une Calculatrice Compl\u00e8te<\/h3>\n\n\n\n<p>Pour que notre calculatrice soit fonctionnelle, nous devons \u00e9galement ajouter des boutons pour les chiffres et les op\u00e9rateurs, et attacher des \u00e9v\u00e9nements onclick \u00e0 chaque bouton. Voici un exemple de comment faire cela :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"calculator\"&gt;\n    &lt;input type=\"text\" class=\"display\" id=\"display\" readonly&gt;&lt;br&gt;\n    &lt;!-- Chiffres --&gt;\n    &lt;button onclick=\"appendToDisplay('1')\"&gt;1&lt;\/button&gt;\n    &lt;button onclick=\"appendToDisplay('2')\"&gt;2&lt;\/button&gt;\n    &lt;button onclick=\"appendToDisplay('3')\"&gt;3&lt;\/button&gt;\n    &lt;br&gt;\n    &lt;button onclick=\"appendToDisplay('4')\"&gt;4&lt;\/button&gt;\n    &lt;button onclick=\"appendToDisplay('5')\"&gt;5&lt;\/button&gt;\n    &lt;button onclick=\"appendToDisplay('6')\"&gt;6&lt;\/button&gt;\n    &lt;br&gt;\n    &lt;!-- Op\u00e9rateurs --&gt;\n    &lt;button onclick=\"appendToDisplay('+')\"&gt;+&lt;\/button&gt;\n    &lt;button onclick=\"appendToDisplay('-')\"&gt;-&lt;\/button&gt;\n    &lt;br&gt;\n    &lt;!-- Bouton d'\u00e9galit\u00e9 --&gt;\n    &lt;button onclick=\"calculate()\"&gt;=&lt;\/button&gt;\n    &lt;br&gt;\n    &lt;!-- Bouton de r\u00e9initialisation --&gt;\n    &lt;button onclick=\"clearDisplay()\"&gt;AC&lt;\/button&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Ajouter des fonctions pour manipuler et mettre \u00e0 jour d'affichage\nfunction appendToDisplay(value) {\n    const display = document.getElementById('display');\n    display.value += value;\n}\n\nfunction clearDisplay() {\n    const display = document.getElementById('display');\n    display.value = '';\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Optimisation et Bonnes Pratiques<\/h3>\n\n\n\n<p>Pour assurer une bonne exp\u00e9rience utilisateur, certaines pratiques doivent \u00eatre suivies :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Validation d&rsquo;entr\u00e9e :<\/strong> Toujours valider les entr\u00e9es pour \u00e9viter les erreurs. Par exemple, g\u00e9rer les expressions invalides.<\/li>\n\n\n\n<li><strong>Manipulation DOM :<\/strong> Pr\u00e9f\u00e9rez utiliser des techniques efficaces pour manipuler le DOM et \u00e9viter des recalculs inutiles.<\/li>\n\n\n\n<li><strong>Utilisation de styles CSS :<\/strong> Am\u00e9liorez l&rsquo;interface et l&rsquo;exp\u00e9rience utilisateur en stylisant correctement votre calculatrice.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p><p>Afficher les r\u00e9sultats d&rsquo;une <strong>calculatrice JavaScript<\/strong> n\u00e9cessite une interaction fluide entre HTML, CSS, et JavaScript. En suivant ce tutoriel, vous avez appris comment capturer les entr\u00e9es utilisateur, calculer les r\u00e9sultats et afficher ces derniers dynamiquement. \n\nIl est \u00e9galement important de comprendre comment utiliser diff\u00e9rentes structures et fonctions en JavaScript. Pour approfondir vos comp\u00e9tences, vous pouvez lire notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">comment placer son code JavaScript<\/a>, qui explique comment structurer votre code pour une meilleure gestion. Par ailleurs, notre <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">guide sur les meilleurs outils et logiciels pour JavaScript<\/a> peut vous \u00eatre utile si vous \u00eates \u00e0 la recherche des outils les plus efficaces pour vos projets.<\/p>\n\n<p>De plus, il est avantageux de se familiariser avec <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">les diff\u00e9rents types de variables en JavaScript<\/a> pour \u00e9viter certains pi\u00e8ges courants. Pour des calculs plus complexes, notre tutoriel sur <a href=\"https:\/\/wikiform.fr\/codespace\/operations-mathematiques-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">les op\u00e9rations math\u00e9matiques en JavaScript<\/a> est un bon point de d\u00e9part. Enfin, apprenez \u00e0 manipuler le DOM efficacement en lisant notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-dom-en-javascript\" target=\"_blank\" rel=\"noopener\">comment acc\u00e9der aux \u00e9l\u00e9ments du DOM<\/a>.<\/p>\n\n<p>Prenez le temps d&rsquo;explorer davantage les possibilit\u00e9s et d&rsquo;appliquer les pratiques recommand\u00e9es pour cr\u00e9er une calculatrice optimale et satisfaisante. Pour plus de tutoriels sur JavaScript et l&rsquo;exp\u00e9rience utilisateur, consultez <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">notre cours complet sur les fondamentaux de JavaScript<\/a>.<\/p><\/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","protected":false},"excerpt":{"rendered":"<p>Affineurs de calcul en JavaScript jouent un r\u00f4le essentiel pour cr\u00e9er des interfaces utilisateur fluides et r\u00e9actives. Comprendre comment concevoir et afficher les r\u00e9sultats d&rsquo;une&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2858,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5602","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\/5602","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=5602"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5602\/revisions"}],"predecessor-version":[{"id":6108,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5602\/revisions\/6108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2858"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}