{"id":5600,"date":"2024-08-28T23:44:32","date_gmt":"2024-08-28T23:44:32","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-4-appeler-fonction\/"},"modified":"2024-08-28T23:44:36","modified_gmt":"2024-08-28T23:44:36","slug":"calculatrice-javascript-etape-4-appeler-fonction","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-4-appeler-fonction\/","title":{"rendered":"6.6 Calculatrice JavaScript \u00c9tape 4 : Appeler Fonction"},"content":{"rendered":"\n<p><strong>6.6 Calculatrice JavaScript \u00c9tape 4 : Appeler Fonction<\/strong> est une \u00e9tape cruciale pour rendre votre calculatrice fonctionnelle en JavaScript. Dans ce tutoriel, nous allons apprendre \u00e0 appeler des fonctions pour effectuer des op\u00e9rations math\u00e9matiques \u00e0 partir des boutons de notre interface utilisateur. Suivez ce guide pas \u00e0 pas pour transformer ce projet simple en une calculatrice enti\u00e8rement op\u00e9rationnelle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Appel de Fonctions 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\/658883954?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\/javascript-les-fondamentaux\/142')\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 appeler des fonctions en JavaScript, vous avez besoin de d\u00e9finir ces fonctions et de les lier aux \u00e9v\u00e9nements des boutons de votre calculatrice. Voyons cela en d\u00e9tail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir les Fonctions de Calcul<\/h3>\n\n\n\n<p>Commen\u00e7ons par d\u00e9finir les fonctions qui vont ex\u00e9cuter les op\u00e9rations math\u00e9matiques. Nous cr\u00e9erons des fonctions pour additionner, soustraire, multiplier et diviser deux nombres.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function add(a, b) {\n    return a + b;\n}\n\nfunction subtract(a, b) {\n    return a - b;\n}\n\nfunction multiply(a, b) {\n    return a * b;\n}\n\nfunction divide(a, b) {\n    if (b === 0) {\n        return \"Error: Division by zero\";\n    }\n    return a \/ b;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Attacher les Fonctions aux \u00c9v\u00e9nements des Boutons<\/h3>\n\n\n\n<p>Ensuite, nous allons attacher ces fonctions aux \u00e9v\u00e9nements de clic des boutons de notre calculatrice. Voici comment cela peut \u00eatre fait en utilisant JavaScript.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;button onclick=\"handleButtonClick('add')\">+<\/button&gt;\n&lt;button onclick=\"handleButtonClick('subtract')\">-<\/button&gt;\n&lt;button onclick=\"handleButtonClick('multiply')\">\u00d7<\/button&gt;\n&lt;button onclick=\"handleButtonClick('divide')\">\u00f7<\/button&gt;\n\n&lt;script&gt;\nfunction handleButtonClick(operation) {\n    const num1 = parseFloat(document.getElementById('num1').value);\n    const num2 = parseFloat(document.getElementById('num2').value);\n    let result;\n    \n    switch(operation) {\n        case 'add':\n            result = add(num1, num2);\n            break;\n        case 'subtract':\n            result = subtract(num1, num2);\n            break;\n        case 'multiply':\n            result = multiply(num1, num2);\n            break;\n        case 'divide':\n            result = divide(num1, num2);\n            break;\n        default:\n            result = 'Invalid operation';\n    }\n    \n    document.getElementById('result').textContent = result;\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Tester la Calculatrice<\/h3>\n\n\n\n<p>Pour v\u00e9rifier que votre calculatrice fonctionne correctement, entrez des nombres dans les champs de saisie et cliquez sur les diff\u00e9rents boutons pour voir les r\u00e9sultats s'afficher. Voici un exemple simple d'interface HTML :<\/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;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Calculatrice JavaScript&lt;\/h1&gt;\n\n    &lt;input type=\"number\" id=\"num1\" placeholder=\"Premier nombre\"&gt;\n    &lt;input type=\"number\" id=\"num2\" placeholder=\"Second nombre\"&gt;\n\n    &lt;button onclick=\"handleButtonClick('add')\">+<\/button&gt;\n    &lt;button onclick=\"handleButtonClick('subtract')\">-<\/button&gt;\n    &lt;button onclick=\"handleButtonClick('multiply')\">\u00d7<\/button&gt;\n    &lt;button onclick=\"handleButtonClick('divide')\">\u00f7<\/button&gt;\n    \n    &lt;h2&gt;R\u00e9sultat: &lt;span id=\"result\"&gt;&lt;\/span&gt;&lt;\/h2&gt;\n    \n    &lt;script&gt;\n        \/\/ Les fonctions de calcul et l'\u00e9v\u00e9nement onclick sont inclus ici\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Fonctionnalit\u00e9s Avanc\u00e9es<\/h3>\n\n\n\n<p>Pour rendre votre calculatrice encore plus utile, vous pouvez ajouter des fonctionnalit\u00e9s avanc\u00e9es telles que les pourcentages, les racines carr\u00e9es, et l'historique des calculs. Voici comment ajouter une fonction de racine carr\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function sqrt(a) {\n    return Math.sqrt(a);\n}\n\n\/\/ Ajouter un bouton pour la racine carr\u00e9e\ndocument.write('&lt;button onclick=\"handleButtonClick(\\'sqrt\\')\">\u221a<\/button&gt;');\n\n\/\/ Ajouter un cas pour la racine carr\u00e9e dans la fonction handleButtonClick\nfunction handleButtonClick(operation) {\n    const num1 = parseFloat(document.getElementById('num1').value);\n    const num2 = parseFloat(document.getElementById('num2').value);\n    let result;\n    \n    switch(operation) {\n        case 'add':\n            result = add(num1, num2);\n            break;\n        case 'subtract':\n            result = subtract(num1, num2);\n            break;\n        case 'multiply':\n            result = multiply(num1, num2);\n            break;\n        case 'divide':\n            result = divide(num1, num2);\n            break;\n        case 'sqrt':\n            result = sqrt(num1);\n            break;\n        default:\n            result = 'Invalid operation';\n    }\n    \n    document.getElementById('result').textContent = result;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Am\u00e9liorer l'Interface Utilisateur<\/h3>\n\n<p>Pour rendre votre calculatrice plus intuitive, vous pouvez \u00e9galement am\u00e9liorer l'interface utilisateur en ajoutant des \u00e9l\u00e9ments de style CSS. Par exemple, vous pouvez ajouter des couleurs aux boutons, des marges, et des polices personnalis\u00e9es pour am\u00e9liorer l'apparence visuelle et l'exp\u00e9rience utilisateur globale.<\/p>\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    font-family: Arial, sans-serif;\n}\n\nh1 {\n    text-align: center;\n}\n\ninput, button {\n    display: block;\n    width: 80%;\n    margin: 10px auto;\n    padding: 10px;\n    font-size: 1.2em;\n}\n\nbutton {\n    background-color: #701CF5;\n    color: white;\n    border: none;\n    cursor: pointer;\n}\n\nbutton:hover {\n    background-color: #520BCF;\n}\n\n#result {\n    text-align: center;\n    font-size: 1.5em;\n    margin-top: 20px;\n}<\/code><\/pre>\n\n<h3 class=\"wp-block-heading\">S'assurer de la Port\u00e9e des Variables<\/h3>\n\n<p>Lors de la cr\u00e9ation d'un projet de calculatrice, il est essentiel de comprendre la port\u00e9e des variables utilis\u00e9es dans le script. La port\u00e9e des variables d\u00e9termine l'endroit o\u00f9 ces variables sont accessibles dans votre code. Pour plus d'informations sur ce sujet, consultez l'article sur la <a href=\"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">port\u00e9e des variables en JavaScript<\/a>.<\/p>\n\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur Appeler Fonction JavaScript<\/h2>\n\n\n\n<p>En suivant ce tutoriel sur <em>Appeler Fonction JavaScript<\/em>, vous avez appris les techniques de base pour appeler des fonctions avec JavaScript dans le cadre d'une calculatrice web. Continuez \u00e0 explorer les fonctionnalit\u00e9s plus avanc\u00e9es pour rendre votre application encore plus puissante et intuitive. Pour plus d'informations et de tutoriels sur JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours complet sur les fondamentaux de JavaScript<\/a>. Bon codage! Pour des d\u00e9tails suppl\u00e9mentaires sur les calculatrices JavaScript, vous pouvez \u00e9galement lire nos articles sur <a href=\"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-1-mode-calcul\" target=\"_blank\" rel=\"noopener\">Calculatrice JavaScript \u00c9tape 1 : Mode de Calcul<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-2-demander-nombres\" target=\"_blank\" rel=\"noopener\">Calculatrice JavaScript \u00c9tape 2 : Demander les Nombres<\/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\/learnify-formation-Javascript-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n<address>\n    Pour plus d'informations sur JavaScript ou d'autres langages de programmation, consultez nos articles sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-objet-en-javascript\" target=\"_blank\" rel=\"noopener\">ce qu'est un objet en JavaScript<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/notes-sur-fonctions-flechees-en-javascript\" target=\"_blank\" rel=\"noopener\">notes sur les fonctions fl\u00e9ch\u00e9es en JavaScript<\/a> ou encore <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-if-else-en-javascript-guide\" target=\"_blank\" rel=\"noopener\">conditions if else en JavaScript<\/a>. Pour des outils pratiques pour d\u00e9velopper en JavaScript, vous pouvez lire notre guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\" target=\"_blank\" rel=\"noopener\">meilleures extensions pour JavaScript<\/a>, ou encore notre guide pour <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">les logiciels pour JavaScript<\/a>.\n<\/address>\n\n<!-- Plus de contenu pour atteindre les 1200 mots -->\n\n<h3>D\u00e9bogage et Test de votre Calculatrice<\/h3>\n\n<p>Tester et d\u00e9boguer votre calculatrice JavaScript est une \u00e9tape cruciale pour s'assurer qu'elle fonctionne correctement. Utilisez les outils de d\u00e9bogage int\u00e9gr\u00e9s dans les navigateurs comme Google Chrome pour suivre et corriger les erreurs de votre script.<\/p>\n\n<p>Pour plus de conseils sur l'utilisation efficace des outils de d\u00e9bogage JavaScript, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\" target=\"_blank\" rel=\"noopener\">l'utilisation du d\u00e9bogueur en JavaScript<\/a>. Assurez-vous \u00e9galement de v\u00e9rifier les conditions aux diff\u00e9rents sc\u00e9narios d'utilisation pour voir comment votre calculatrice r\u00e9agit sous diff\u00e9rentes circonstances.<\/p>\n\n<h3>Fonctions Anonymes dans le Contexte de la Calculatrice<\/h3>\n\n<p>Vous pouvez \u00e9galement utiliser des fonctions anonymes pour attacher des comportements sp\u00e9cifiques aux boutons. Une fonction anonyme est une fonction sans nom qui peut \u00eatre d\u00e9finie directement dans le contexte o\u00f9 elle est utilis\u00e9e. Cela peut rendre votre code plus concis et facile \u00e0 lire. D\u00e9couvrez comment utiliser les fonctions anonymes dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/fonctions-anonymes-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">article sur les fonctions anonymes en JavaScript<\/a>.<\/","protected":false},"excerpt":{"rendered":"<p>6.6 Calculatrice JavaScript \u00c9tape 4 : Appeler Fonction est une \u00e9tape cruciale pour rendre votre calculatrice fonctionnelle en JavaScript. Dans ce tutoriel, nous allons apprendre&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2857,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5600","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\/5600","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=5600"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5600\/revisions"}],"predecessor-version":[{"id":5601,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5600\/revisions\/5601"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2857"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}