{"id":5596,"date":"2024-08-28T23:36:18","date_gmt":"2024-08-28T23:36:18","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-2-demander-nombres\/"},"modified":"2024-08-28T23:36:21","modified_gmt":"2024-08-28T23:36:21","slug":"calculatrice-javascript-etape-2-demander-nombres","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-2-demander-nombres\/","title":{"rendered":"6.4 Calculatrice JavaScript \u00c9tape 2 : Demander Nombres"},"content":{"rendered":"\n<p><strong>Calculatrice JavaScript &#8211; Demander Nombres<\/strong> est une \u00e9tape essentielle pour commencer \u00e0 cr\u00e9er une application de calculatrice interactive en JavaScript. Comprendre comment demander et r\u00e9cup\u00e9rer des valeurs num\u00e9riques aupr\u00e8s de l&rsquo;utilisateur vous permet de concevoir des fonctionnalit\u00e9s interactives et dynamiques. Apprenons comment mettre en place cette \u00e9tape \u00e0 travers des exemples de code clairs et concis.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Demande de Nombres 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\/658882883?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<div id=\"codeExampleContainer\" style=\"position: relative; margin-bottom: 20px;\">\n  <iframe src=\"https:\/\/jsfiddle.net\/une_simple_calculatrice_embedded_code\/\" loading=\"lazy\" loading=\"lazy\" style=\"width: 100%; height: 400px; border: 1px solid #ccc;\" frameborder=\"0\"><\/iframe>\n<\/div>\n\n\n\n<p>Demander des nombres en JavaScript implique l&rsquo;utilisation de diff\u00e9rents \u00e9l\u00e9ments HTML pour capturer les entr\u00e9es utilisateur et des m\u00e9thodes JavaScript pour traiter et valider ces entr\u00e9es. En utilisant les fonctions de manipulation DOM en JavaScript, vous pouvez r\u00e9agir aux actions utilisateur et mettre \u00e0 jour l&rsquo;interface en temps r\u00e9el. Pour plus d&rsquo;informations sur le <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-dom-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">DOM en JavaScript<\/a>, consultez notre article d\u00e9taill\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter les \u00c9l\u00e9ments de Formulaire HTML<\/h3>\n\n\n\n<p>Pour commencer, nous devons cr\u00e9er un formulaire simple en HTML contenant les champs n\u00e9cessaires pour demander des nombres \u00e0 l&rsquo;utilisateur. Voici un exemple de code HTML :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Calculatrice JavaScript&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;form id=&quot;calculator&quot;&gt;\n        &lt;label for=&quot;number1&quot;&gt;Nombre 1:&lt;\/label&gt;\n        &lt;input type=&quot;text&quot; id=&quot;number1&quot; name=&quot;number1&quot;&gt;\n        &lt;br&gt;\n        &lt;label for=&quot;number2&quot;&gt;Nombre 2:&lt;\/label&gt;\n        &lt;input type=&quot;text&quot; id=&quot;number2&quot; name=&quot;number2&quot;&gt;\n        &lt;br&gt;\n        &lt;input type=&quot;button&quot; value=&quot;Calculer&quot; onclick=&quot;calculate()&quot;&gt;\n    &lt;\/form&gt;\n    &lt;div id=&quot;result&quot;&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter le Code JavaScript pour R\u00e9cup\u00e9rer les Nombres<\/h3>\n\n\n\n<p>Ensuite, nous allons ajouter un script JavaScript pour r\u00e9cup\u00e9rer les valeurs des champs de texte et les traiter lorsque l&rsquo;utilisateur clique sur le bouton de calcul. Le script suivant montre comment obtenir les valeurs des champs et les afficher :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>&lt;script&gt;\nfunction calculate() {\n    \/\/ R\u00e9cup\u00e9rer les valeurs des champs de texte\n    var num1 = document.getElementById('number1').value;\n    var num2 = document.getElementById('number2').value;\n\n    \/\/ Convertir les valeurs en nombres\n    num1 = parseFloat(num1);\n    num2 = parseFloat(num2);\n\n    \/\/ V\u00e9rifier si les valeurs sont des nombres\n    if (isNaN(num1) || isNaN(num2)) {\n        alert('Veuillez entrer des nombres valides.');\n        return;\n    }\n\n    \/\/ Calculer la somme\n    var sum = num1 + num2;\n\n    \/\/ Afficher le r\u00e9sultat\n    document.getElementById('result').innerText = 'Le r\u00e9sultat est : ' + sum;\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Valider les Entr\u00e9es de l&rsquo;Utilisateur<\/h3>\n\n\n\n<p>Pour am\u00e9liorer notre calculatrice, nous devons nous assurer que les entr\u00e9es utilisateur sont valides. Le script JavaScript ci-dessus inclut d\u00e9j\u00e0 une v\u00e9rification simple pour v\u00e9rifier si les valeurs saisies sont des nombres. Mais, afin de garantir une meilleure exp\u00e9rience utilisateur, nous pourrions utiliser des techniques de validation plus avanc\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>&lt;script&gt;\nfunction calculate() {\n    var num1 = document.getElementById('number1').value;\n    var num2 = document.getElementById('number2').value;\n\n    if (!num1 || !num2) {\n        alert('Veuillez remplir les deux champs.');\n        return;\n    }\n\n    num1 = parseFloat(num1);\n    num2 = parseFloat(num2);\n\n    if (isNaN(num1) || isNaN(num2)) {\n        alert('Veuillez entrer des nombres valides.');\n        return;\n    }\n\n    var sum = num1 + num2;\n    document.getElementById('result').innerText = 'Le r\u00e9sultat est : ' + sum;\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mettre \u00e0 Jour l&rsquo;Interface Utilisateur en Temps R\u00e9el<\/h3>\n\n\n\n<p>Pour une meilleure interactivit\u00e9, nous pouvons mettre \u00e0 jour l&rsquo;interface utilisateur en temps r\u00e9el, par exemple, en affichant le r\u00e9sultat d\u00e8s que l&rsquo;utilisateur entre des valeurs. Voici comment am\u00e9liorer notre script pour qu&rsquo;il calcule automatiquement la somme \u00e0 chaque changement de valeur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>&lt;script&gt;\ndocument.getElementById('number1').addEventListener('input', calculate);\ndocument.getElementById('number2').addEventListener('input', calculate);\n\nfunction calculate() {\n    var num1 = document.getElementById('number1').value;\n    var num2 = document.getElementById('number2').value;\n\n    if (!num1 || !num2) {\n        document.getElementById('result').innerText = '';\n        return;\n    }\n\n    num1 = parseFloat(num1);\n    num2 = parseFloat(num2);\n\n    if (isNaN(num1) || isNaN(num2)) {\n        document.getElementById('result').innerText = 'Veuillez entrer des nombres valides.';\n        return;\n    }\n\n    var sum = num1 + num2;\n    document.getElementById('result').innerText = 'Le r\u00e9sultat est : ' + sum;\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation d&rsquo;une Fonction pour le Calcul<\/h3>\n\n\n\n<p>En plus de la somme, il est souvent utile de pouvoir effectuer d&rsquo;autres types de calculs. Pour cela, nous pouvons cr\u00e9er une fonction JavaScript d\u00e9di\u00e9e \u00e0 chaque op\u00e9ration math\u00e9matique. Par exemple, nous pouvons cr\u00e9er des fonctions pour l&rsquo;addition, la soustraction, la multiplication et la division :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>&lt;script&gt;\nfunction add(num1, num2) {\n    return num1 + num2;\n}\n\nfunction subtract(num1, num2) {\n    return num1 - num2;\n}\n\nfunction multiply(num1, num2) {\n    return num1 * num2;\n}\n\nfunction divide(num1, num2) {\n    if (num2 === 0) {\n        alert('La division par z\u00e9ro est interdite.');\n        return null;\n    }\n    return num1 \/ num2;\n}\n\nfunction calculate() {\n    var num1 = parseFloat(document.getElementById('number1').value);\n    var num2 = parseFloat(document.getElementById('number2').value);\n    var operation = document.getElementById('operation').value;\n\n    if (isNaN(num1) || isNaN(num2)) {\n        alert('Veuillez entrer des nombres valides.');\n        return;\n    }\n\n    var result;\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            alert('Op\u00e9ration inconnue');\n            return;\n    }\n\n    document.getElementById('result').innerText = 'Le r\u00e9sultat est : ' + result;\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter une S\u00e9lection pour les Op\u00e9rations<\/h3>\n\n\n\n<p>Pour int\u00e9grer les fonctions cr\u00e9\u00e9es pour les diff\u00e9rentes op\u00e9rations, nous devons ajouter un s\u00e9lecteur dans notre formulaire HTML. Voici comment mettre \u00e0 jour notre formulaire pour inclure le choix de l&rsquo;op\u00e9ration :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;form id=&quot;calculator&quot;&gt;\n    &lt;label for=&quot;number1&quot;&gt;Nombre 1:&lt;\/label&gt;\n    &lt;input type=&quot;text&quot; id=&quot;number1&quot; name=&quot;number1&quot;&gt;\n    &lt;br&gt;\n    &lt;label for=&quot;number2&quot;&gt;Nombre 2:&lt;\/label&gt;\n    &lt;input type=&quot;text&quot; id=&quot;number2&quot; name=&quot;number2&quot;&gt;\n    &lt;br&gt;\n    &lt;label for=&quot;operation&quot;&gt;Op\u00e9ration:&lt;\/label&gt;\n    &lt;select id=&quot;operation&quot; name=&quot;operation&quot;&gt;\n        &lt;option value=&quot;add&quot;&gt;Addition&lt;\/option&gt;\n        &lt;option value=&quot;subtract&quot;&gt;Soustraction&lt;\/option&gt;\n        &lt;option value=&quot;multiply&quot;&gt;Multiplication&lt;\/option&gt;\n        &lt;option value=&quot;divide&quot;&gt;Division&lt;\/option&gt;\n    &lt;\/select&gt;\n    &lt;br&gt;\n    &lt;input type=&quot;button&quot; value=&quot;Calculer&quot; onclick=&quot;calculate()&quot;&gt;\n&lt;\/form&gt;\n&lt;div id=&quot;result&quot;&gt;&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Bo\u00eetes de Dialogue en JavaScript<\/h3>\n\n\n\n<p>Il est souvent utile de <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-boite-de-dialogue-en-javascript\" target=\"_blank\" rel=\"noopener\">utiliser des bo\u00eetes de dialogue en JavaScript<\/a> pour interagir avec l&rsquo;utilisateur. Les bo\u00eetes de dialogue telles que alert(), confirm() et prompt() permettent de communiquer des informations, recueillir des r\u00e9ponses ou confirmer des actions.<\/p>\n\n\n\n<p","protected":false},"excerpt":{"rendered":"<p>Calculatrice JavaScript &#8211; Demander Nombres est une \u00e9tape essentielle pour commencer \u00e0 cr\u00e9er une application de calculatrice interactive en JavaScript. Comprendre comment demander et r\u00e9cup\u00e9rer&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2855,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5596","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\/5596","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=5596"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5596\/revisions"}],"predecessor-version":[{"id":5597,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5596\/revisions\/5597"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2855"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}