{"id":5604,"date":"2024-08-28T23:52:07","date_gmt":"2024-08-28T23:52:07","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-6-gerer-exceptions\/"},"modified":"2025-01-07T16:36:30","modified_gmt":"2025-01-07T16:36:30","slug":"calculatrice-javascript-etape-6-gerer-exceptions","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-6-gerer-exceptions\/","title":{"rendered":"6.8 Calculatrice JavaScript \u00c9tape 6 : G\u00e9rer Exceptions"},"content":{"rendered":"\n\n\n<p><strong>G\u00e9rer les Exceptions dans une Calculatrice JavaScript<\/strong> est une \u00e9tape cruciale pour fiabiliser votre application et am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. En apprenant comment impl\u00e9menter une gestion d&rsquo;erreurs efficace, vos utilisateurs seront prot\u00e9g\u00e9s contre les calculs incorrects et les comportements inattendus. D\u00e9couvrons ensemble comment ajouter cette fonctionnalit\u00e9 gr\u00e2ce \u00e0 des exemples pratiques de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Gestion des Exceptions dans une Calculatrice 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\/658884143?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) {\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();\n    }\n});\n<\/script>\n\n\n\n<p>La gestion des exceptions dans une application de calculatrice JavaScript vous permet de capturer et de g\u00e9rer les erreurs potentielles lors des calculs, offrant ainsi une exp\u00e9rience utilisateur plus robuste. Voyons comment l&rsquo;impl\u00e9menter concr\u00e8tement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter un Bloc Try\/Catch pour g\u00e9rer Exceptions JavaScript<\/h3>\n\n\n\n<p>L&rsquo;utilisation d&rsquo;un bloc <code>try\/catch<\/code> permet de g\u00e9rer les erreurs au moment de l&rsquo;ex\u00e9cution des calculs. Ajoutons cette structure \u00e0 notre code existant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function calculate(expression) {\n    try {\n        \/\/ \u00c9valuer l'expression et renvoyer le r\u00e9sultat\n        const result = eval(expression);\n        if (isNaN(result)) {\n            throw new Error(\"Le r\u00e9sultat n'est pas un nombre.\");\n        }\n        return result;\n    } catch (error) {\n        \/\/ Afficher un message d'erreur \u00e0 l'utilisateur\n        displayError(error.message);\n    }\n}\n\nfunction displayError(message) {\n    const errorElement = document.getElementById('error');\n    errorElement.textContent = message;\n    errorElement.style.display = 'block';\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Validation des Entr\u00e9es Utilisateur<\/h3>\n\n\n\n<p>La validation des entr\u00e9es est essentielle pour \u00e9viter les erreurs avant m\u00eame qu&rsquo;elles ne surviennent. Voici comment valider l&rsquo;entr\u00e9e avant de l&rsquo;\u00e9valuer :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function validateInput(input) {\n    \/\/ V\u00e9rifier que l'entr\u00e9e ne contient que des chiffres et des op\u00e9rateurs de base\n    const validCharacters = \/^&#91;0-9+\\-*\/() ]+$\/;\n    if (!validCharacters.test(input)) {\n        throw new Error(\"Entr\u00e9e invalide : seuls les chiffres et les op\u00e9rateurs +, -, *, \/, et () sont autoris\u00e9s.\");\n    }\n}\n\nfunction calculate(expression) {\n    try {\n        validateInput(expression);\n        const result = eval(expression);\n        if (isNaN(result)) {\n            throw new Error(\"Le r\u00e9sultat n'est pas un nombre.\");\n        }\n        return result;\n    } catch (error) {\n        displayError(error.message);\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Afficher les Messages d&rsquo;Erreur<\/h3>\n\n\n\n<p>Pour une meilleure exp\u00e9rience utilisateur, afficher des messages d&rsquo;erreur clairs et descriptifs est crucial. Voici un exemple de fonction pour afficher ces messages :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function displayError(message) {\n    const errorElement = document.getElementById('error');\n    errorElement.textContent = message;\n    errorElement.style.display = 'block';\n\n    \/\/ Cacher l'erreur apr\u00e8s quelques secondes\n    setTimeout(() =&gt; {\n        errorElement.style.display = 'none';\n    }, 5000);\n}\n\n\/\/ Exemple d'utilisation dans une application de calculatrice\ndocument.getElementById('calculate-btn').addEventListener('click', function() {\n    const expression = document.getElementById('expression-input').value;\n    const result = calculate(expression);\n    if (result !== undefined) {\n        document.getElementById('result').textContent = result;\n    }\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des Expressions Complexes<\/h3>\n\n\n\n<p>Parfois, les utilisateurs peuvent entrer des expressions complexes qui n\u00e9cessitent une gestion plus fine des erreurs. Voici une approche plus avanc\u00e9e pour g\u00e9rer ces cas :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function calculate(expression) {\n    try {\n        validateInput(expression);\n        const result = Function('\"use strict\";return (' + expression + ')')();\n        if (isNaN(result)) {\n            throw new Error(\"Le r\u00e9sultat n'est pas un nombre.\");\n        }\n        return result;\n    } catch (error) {\n        displayError(\"Erreur de calcul : \" + error.message);\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>En impl\u00e9mentant ces techniques de gestion des exceptions, vous pouvez am\u00e9liorer la fiabilit\u00e9 et la robustesse de votre calculatrice JavaScript, garantissant une meilleure exp\u00e9rience utilisateur.<\/p>\n\n\n\n<p>Si vous souhaitez en savoir davantage sur les bases de JavaScript et ses fonctionnalit\u00e9s, consultez les ressources suivantes:<\/p>\n\n\n<p><!-- Internal Links --><\/p>\n<ul>\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-condition-en-javascript\">Qu&rsquo;est-ce qu&rsquo;une condition en JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\">D\u00e9clarer des variables en JavaScript : let, const, var<\/a><\/li>\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-le-debogueur-en-javascript\">Utilisation du d\u00e9bogueur en JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/operations-mathematiques-en-javascript-tutoriel\">Op\u00e9rations math\u00e9matiques en JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\">Ajouter des \u00e9l\u00e9ments au DOM en JavaScript<\/a><\/li>\n<\/ul>\n<p><!-- \/Internal Links --><\/p>\n\n\n<p>Pour en apprendre plus en d\u00e9tails sur l&rsquo;utilisation du <code>try\/catch<\/code> en JavaScript et d&rsquo;autres techniques de gestion des erreurs, consultez <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Instructions\/Try...catch\" target=\"_blank\" rel=\"noopener\">la documentation MDN<\/a> et cette <a href=\"https:\/\/www.freecodecamp.org\/news\/error-handling-in-javascript\/\" target=\"_blank\" rel=\"noopener\">ressource utile sur FreeCodeCamp<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La gestion des exceptions dans une <strong>calculatrice JavaScript<\/strong> est une technique essentielle pour d\u00e9velopper une application robuste et conviviale. En validant les entr\u00e9es, en utilisant des blocs <code>try\/catch<\/code>, et en affichant des messages d&rsquo;erreur clairs, vous am\u00e9liorerez consid\u00e9rablement l&rsquo;exp\u00e9rience utilisateur. Continuez \u00e0 explorer et \u00e0 perfectionner vos comp\u00e9tences en JavaScript pour cr\u00e9er des applications web encore plus sophistiqu\u00e9es et performantes.<\/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>G\u00e9rer les Exceptions dans une Calculatrice JavaScript est une \u00e9tape cruciale pour fiabiliser votre application et am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. En apprenant comment impl\u00e9menter une gestion&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2859,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5604","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\/5604","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=5604"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5604\/revisions"}],"predecessor-version":[{"id":6107,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5604\/revisions\/6107"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2859"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}