{"id":5598,"date":"2024-08-28T23:40:14","date_gmt":"2024-08-28T23:40:14","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-3-creer-fonctions\/"},"modified":"2025-01-09T15:23:06","modified_gmt":"2025-01-09T15:23:06","slug":"calculatrice-javascript-etape-3-creer-fonctions","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-3-creer-fonctions\/","title":{"rendered":"6.5 Calculatrice JavaScript \u00c9tape 3 : Cr\u00e9er Fonctions"},"content":{"rendered":"\n\n\n<p><strong>Cr\u00e9ation de fonctions pour une calculatrice en JavaScript<\/strong> est une \u00e9tape cruciale dans le d\u00e9veloppement de votre application. Comprendre comment cr\u00e9er et structurer ces fonctions permet non seulement de r\u00e9aliser une calculatrice fonctionnelle, mais aussi d&rsquo;am\u00e9liorer vos comp\u00e9tences en programmation JavaScript. \u00c0 travers cet article, nous apprendrons \u00e0 cr\u00e9er des fonctions de calcul dans une calculatrice en JavaScript avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation de Fonctions pour une Calculatrice 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\/658883827?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>Pour cr\u00e9er des fonctions de base pour une calculatrice en JavaScript, nous aurons besoin d&rsquo;impl\u00e9menter des fonctions pour l&rsquo;addition, la soustraction, la multiplication et la division. Ces fonctions vous permettront d&rsquo;effectuer des op\u00e9rations math\u00e9matiques de base en toute simplicit\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er les Fonctions de Base<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er des fonctions JavaScript qui effectueront les op\u00e9rations math\u00e9matiques. Ces fonctions recevront deux param\u00e8tres repr\u00e9sentant les valeurs sur lesquelles l&rsquo;op\u00e9ration sera effectu\u00e9e. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Fonction d'addition\nfunction addition(a, b) {\n    return a + b;\n}\n\n\/\/ Fonction de soustraction\nfunction soustraction(a, b) {\n    return a - b;\n}\n\n\/\/ Fonction de multiplication\nfunction multiplication(a, b) {\n    return a * b;\n}\n\n\/\/ Fonction de division\nfunction division(a, b) {\n    if (b === 0) {\n        return 'Erreur: Division par z\u00e9ro';\n    }\n    return a \/ b;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Fonctions dans une Interface de Calculatrice<\/h3>\n\n\n\n<p>Maintenant que nous avons nos fonctions de base, nous devons les int\u00e9grer dans une interface de calculatrice. Pour simplifier, utilisons du HTML et du JavaScript pour cr\u00e9er une interface basique o\u00f9 nous pourrons tester nos fonctions de calcul.<\/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        .calculator {\n            width: 200px;\n            margin: 0 auto;\n            padding: 20px;\n            border: 1px solid #333;\n            border-radius: 10px;\n            text-align: center;\n        }\n        .calculator input,\n        .calculator button {\n            display: block;\n            width: 100%;\n            margin: 5px 0;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"calculator\"&gt;\n        &lt;h2&gt;Calculatrice&lt;\/h2&gt;\n        &lt;input type=\"number\" id=\"valeur1\" placeholder=\"Entrez un nombre\"&gt;\n        &lt;input type=\"number\" id=\"valeur2\" placeholder=\"Entrez un nombre\"&gt;\n        &lt;button onclick=\"calculer('addition')\"&gt;Addition&lt;\/button&gt;\n        &lt;button onclick=\"calculer('soustraction')\"&gt;Soustraction&lt;\/button&gt;\n        &lt;button onclick=\"calculer('multiplication')\"&gt;Multiplication&lt;\/button&gt;\n        &lt;button onclick=\"calculer('division')\"&gt;Division&lt;\/button&gt;\n        &lt;p id=\"result\"&gt;&lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;script&gt;\n        function calculer(operation) {\n            var valeur1 = parseFloat(document.getElementById('valeur1').value);\n            var valeur2 = parseFloat(document.getElementById('valeur2').value);\n            var result;\n\n            switch (operation) {\n                case 'addition':\n                    result = addition(valeur1, valeur2);\n                    break;\n                case 'soustraction':\n                    result = soustraction(valeur1, valeur2);\n                    break;\n                case 'multiplication':\n                    result = multiplication(valeur1, valeur2);\n                    break;\n                case 'division':\n                    result = division(valeur1, valeur2);\n                    break;\n            }\n\n            document.getElementById('result').innerText = 'R\u00e9sultat: ' + result;\n        }\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Fonctions Avanc\u00e9es<\/h3>\n\n\n\n<p>Pour rendre notre calculatrice plus utile, nous pouvions ajouter des fonctionnalit\u00e9s plus avanc\u00e9es comme la possibilit\u00e9 d&rsquo;effectuer des op\u00e9rations continues ou de manipuler l&rsquo;historique des op\u00e9rations. Par exemple, nous pourrions cr\u00e9er une fonction qui permet de stocker les r\u00e9sultats pr\u00e9c\u00e9dents pour les utiliser dans des calculs futurs :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let historique = &#91;];\n\nfunction addition(a, b) {\n    let resultat = a + b;\n    historique.push(`${a} + ${b} = ${resultat}`);\n    return resultat;\n}\n\nfunction consulterHistorique() {\n    return historique.join('\\n');\n}\n\n\/\/ Appel de la fonction pour v\u00e9rifier\nconsole.log(addition(2, 3));\nconsole.log(consulterHistorique());<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer les Erreurs et les Valeurs Sp\u00e9ciales<\/h3>\n\n\n\n<p>Il est \u00e9galement important de g\u00e9rer correctement les erreurs et les valeurs sp\u00e9ciales dans les calculs. Par exemple, nous devons nous assurer que la division par z\u00e9ro est correctement g\u00e9r\u00e9e pour \u00e9viter des erreurs de calculs ou des retours inattendus :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function division(a, b) {\n    if (b === 0) {\n        return 'Erreur: Division par z\u00e9ro';\n    }\n    if (!Number.isFinite(a) || !Number.isFinite(b)) {\n        return 'Erreur: Valeur non finie';\n    }\n    return a \/ b;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La cr\u00e9ation de fonctions pour une calculatrice en JavaScript permet d&rsquo;am\u00e9liorer vos comp\u00e9tences en programmation et de comprendre les concepts de base des op\u00e9rations math\u00e9matiques en programmation. En int\u00e9grant des fonctionnalit\u00e9s avanc\u00e9es et en g\u00e9rant correctement les erreurs, vous pouvez d\u00e9velopper une calculatrice robuste et fonctionnelle. Continuez \u00e0 explorer et \u00e0 am\u00e9liorer votre calculatrice pour ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires et rendre votre application encore plus intuitive et utile. Pour plus de tutoriels JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-avanc\u00e9\/145\">les fonctionnalit\u00e9s avanc\u00e9es de JavaScript<\/a>.<\/p>\n\n\n\n<p><p>Si vous \u00eates curieux d&rsquo;en savoir plus sur la manipulation des variables en JavaScript, n&rsquo;h\u00e9sitez pas \u00e0 lire notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\" target=\"_blank\" rel=\"noopener\">la d\u00e9claration de variables en JavaScript<\/a>. Vous pouvez \u00e9galement d\u00e9couvrir comment <a href=\"https:\/\/wikiform.fr\/codespace\/concatenation-en-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">concat\u00e9ner des cha\u00eenes de caract\u00e8res en JavaScript<\/a>, ou apprendre \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/operations-mathematiques-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">effectuer des op\u00e9rations math\u00e9matiques<\/a>.<\/p>\n\n<p>Pour ceux qui s&rsquo;int\u00e9ressent aux aspects plus pragmatiques du d\u00e9veloppement, notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">la meilleure mani\u00e8re de placer du code JavaScript<\/a> peut \u00eatre une lecture utile. Et pour une compr\u00e9hension approfondie de la programmation fonctionnelle, explorez notre section sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\" target=\"_blank\" rel=\"noopener\">ce qu&rsquo;est une fonction en JavaScript<\/a>.<\/p><\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-javascript\/143\" 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\n<p>Pour augmenter vos comp\u00e9tences et profiter d&rsquo;une formation compl\u00e8te, nous vous recommandons de suivre notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\">formation fondamentale sur JavaScript<\/a> qui vous guidera pas \u00e0 pas dans votre apprentissage du langage.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9ation de fonctions pour une calculatrice en JavaScript est une \u00e9tape cruciale dans le d\u00e9veloppement de votre application. Comprendre comment cr\u00e9er et structurer ces fonctions&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5598","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\/5598","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=5598"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5598\/revisions"}],"predecessor-version":[{"id":6109,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5598\/revisions\/6109"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2856"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}