{"id":5534,"date":"2024-08-28T15:03:08","date_gmt":"2024-08-28T15:03:08","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/operations-mathematiques-en-javascript-tutoriel\/"},"modified":"2024-08-28T15:03:10","modified_gmt":"2024-08-28T15:03:10","slug":"operations-mathematiques-en-javascript-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/operations-mathematiques-en-javascript-tutoriel\/","title":{"rendered":"2.5 Op\u00e9rations Math\u00e9matiques en JavaScript : Tutoriel"},"content":{"rendered":"\n<p><strong>Les op\u00e9rations math\u00e9matiques en JavaScript<\/strong> sont essentielles pour tous les niveaux de d\u00e9veloppement web et les applications interactives. Comprendre comment effectuer des op\u00e9rations math\u00e9matiques de base en JavaScript peut consid\u00e9rablement am\u00e9liorer vos comp\u00e9tences en programmation et votre capacit\u00e9 \u00e0 cr\u00e9er des solutions dynamiques. Apprenons comment les utiliser gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Op\u00e9rations Math\u00e9matiques en JavaScript<\/strong><\/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\/658878466?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>Les op\u00e9rations math\u00e9matiques de base en JavaScript incluent l&rsquo;addition, la soustraction, la multiplication, la division et le modulo. Ces op\u00e9rations sont r\u00e9alis\u00e9es \u00e0 l&rsquo;aide des op\u00e9rateurs arithm\u00e9tiques standards de JavaScript. Explorons chacune de ces op\u00e9rations avec des exemples concrets.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Addition en JavaScript<\/h3>\n\n\n\n<p>L&rsquo;addition en JavaScript est r\u00e9alis\u00e9e \u00e0 l&rsquo;aide de l&rsquo;op\u00e9rateur <code>+<\/code>. Il permet de sommer deux nombres ou de concat\u00e9ner des cha\u00eenes de caract\u00e8res.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Addition de deux nombres\nlet a = 5;\nlet b = 10;\nlet result = a + b;\nconsole.log(result); \/\/ Affiche 15\n\n\/\/ Concatenation de cha\u00eenes de caract\u00e8res\nlet firstName = \"John\";\nlet lastName = \"Doe\";\nlet fullName = firstName + \" \" + lastName;\nconsole.log(fullName); \/\/ Affiche \"John Doe\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. Soustraction en JavaScript<\/h3>\n\n\n\n<p>La soustraction en JavaScript est r\u00e9alis\u00e9e \u00e0 l&rsquo;aide de l&rsquo;op\u00e9rateur <code>-<\/code>. Il permet de soustraire un nombre d&rsquo;un autre.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Soustraction de deux nombres\nlet a = 20;\nlet b = 7;\nlet result = a - b;\nconsole.log(result); \/\/ Affiche 13\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Multiplication en JavaScript<\/h3>\n\n\n\n<p>La multiplication en JavaScript est effectu\u00e9e avec l&rsquo;op\u00e9rateur <code>*<\/code>. Cet op\u00e9rateur permet de multiplier deux nombres ensemble.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Multiplication de deux nombres\nlet x = 8;\nlet y = 5;\nlet result = x * y;\nconsole.log(result); \/\/ Affiche 40\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4. Division en JavaScript<\/h3>\n\n\n\n<p>La division en JavaScript utilise l&rsquo;op\u00e9rateur <code>\/<\/code>. Il permet de diviser un nombre par un autre.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Division de deux nombres\nlet dividend = 20;\nlet divisor = 4;\nlet result = dividend \/ divisor;\nconsole.log(result); \/\/ Affiche 5\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">5. Modulo en JavaScript<\/h3>\n\n\n\n<p>L&rsquo;op\u00e9rateur modulo <code>%<\/code> renvoie le reste d&rsquo;une division enti\u00e8re entre deux nombres.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Modulo de deux nombres\nlet dividend = 29;\nlet divisor = 5;\nlet result = dividend % divisor;\nconsole.log(result); \/\/ Affiche 4 (29 divis\u00e9 par 5 donne un reste de 4)\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Op\u00e9rations Math\u00e9matiques Compos\u00e9es en JavaScript<\/h3>\n\n\n\n<p>JavaScript permet aussi d&rsquo;utiliser des op\u00e9rateurs math\u00e9matiques compos\u00e9s pour simplifier le code et effectuer des op\u00e9rations directes sur une variable.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Initialisation\nlet num = 10;\n\n\/\/ Addition compos\u00e9e\nnum += 5;  \/\/ \u00c9quivaut \u00e0 num = num + 5\nconsole.log(num); \/\/ Affiche 15\n\n\/\/ Soustraction compos\u00e9e\nnum -= 3;  \/\/ \u00c9quivaut \u00e0 num = num - 3\nconsole.log(num); \/\/ Affiche 12\n\n\/\/ Multiplication compos\u00e9e\nnum *= 2;  \/\/ \u00c9quivaut \u00e0 num = num * 2\nconsole.log(num); \/\/ Affiche 24\n\n\/\/ Division compos\u00e9e\nnum \/= 4;  \/\/ \u00c9quivaut \u00e0 num = num \/ 4\nconsole.log(num); \/\/ Affiche 6\n\n\/\/ Modulo compos\u00e9\nnum %= 5;  \/\/ \u00c9quivaut \u00e0 num = num % 5\nconsole.log(num); \/\/ Affiche 1\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Pr\u00e9cisions et Astuces<\/h2>\n\n\n\n<p>Bien que les op\u00e9rations math\u00e9matiques soient simples \u00e0 utiliser en JavaScript, il y a quelques astuces et pr\u00e9cautions \u00e0 prendre en compte :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Attention aux Types de Donn\u00e9es<\/h3>\n\n\n\n<p>JavaScript est un langage faiblement typ\u00e9, ce qui signifie que les op\u00e9rations math\u00e9matiques peuvent parfois produire des r\u00e9sultats inattendus si vous manipulez des types de donn\u00e9es m\u00e9lang\u00e9s (par exemple, des nombres et des cha\u00eenes de caract\u00e8res). Il est donc pr\u00e9f\u00e9rable de s&rsquo;assurer que les variables sont du bon type avant d&rsquo;effectuer des op\u00e9rations.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Addition suspecte\nlet a = \"5\";\nlet b = 10;\nlet result = a + b;\nconsole.log(result); \/\/ Affiche \"510\" car a est une cha\u00eene et + fait une concat\u00e9nation\n\n\/\/ Conversion en nombre\na = Number(a);\nresult = a + b;\nconsole.log(result); \/\/ Affiche 15\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">L&rsquo;utilisation de Math<\/h3>\n\n\n\n<p>JavaScript propose une biblioth\u00e8que math\u00e9matique <code>Math<\/code> qui inclut des fonctions pour des op\u00e9rations math\u00e9matiques complexes comme les calculs de sin, cos, tan, et les arrondis.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utilisation de Math.sqrt pour la racine carr\u00e9e\nlet num = 16;\nlet sqrt = Math.sqrt(num);\nconsole.log(sqrt); \/\/ Affiche 4\n\n\/\/ Utilisation de Math.pow pour la puissance\nlet base = 2;\nlet exponent = 3;\nlet power = Math.pow(base, exponent);\nconsole.log(power); \/\/ Affiche 8 (2^3)\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Op\u00e9rations Math\u00e9matiques Trigonom\u00e9triques<\/h3>\n\n\n\n<p>Outre les op\u00e9rations de base, JavaScript supporte \u00e9galement des fonctions trigonom\u00e9triques via l&rsquo;objet <code>Math<\/code>, ce qui peut \u00eatre utile dans des situations de calcul avanc\u00e9, telles que la programmation graphique ou les simulations physiques. Par exemple, Math.sin, Math.cos, Math.tan peuvent \u00eatre utilis\u00e9s pour calculer les valeurs trigonom\u00e9triques d&rsquo;un angle donn\u00e9.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Calculer des valeurs trigonom\u00e9triques\nlet angle = Math.PI \/ 4; \/\/ 45 degr\u00e9s en radians\nlet sinValue = Math.sin(angle);\nlet cosValue = Math.cos(angle);\nlet tanValue = Math.tan(angle);\n\nconsole.log(sinValue); \/\/ Affiche 0.7071067811865475\nconsole.log(cosValue); \/\/ Affiche 0.7071067811865475\nconsole.log(tanValue); \/\/ Affiche 1\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Op\u00e9rations Math\u00e9matiques Combinatoires<\/h3>\n\n\n\n<p>JavaScript propose \u00e9galement des fonctions d\u00e9di\u00e9es pour les calculs combinatoires, comme factoriale et permutation. Bien que la biblioth\u00e8que <code>Math<\/code> n&rsquo;ait pas ces fonctions int\u00e9gr\u00e9es, vous pouvez facilement les impl\u00e9menter.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Calcul de la factorielle\nfunction factorial(n) {\n    if (n === 0 || n === 1) return 1;\n    return n * factorial(n - 1);\n}\n\nconsole.log(factorial(5)); \/\/ Affiche 120 (5! = 5*4*3*2*1)\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Applications Pratiques des Op\u00e9rations Math\u00e9matiques JavaScript<\/h2>\n\n\n\n<p>Les <strong>Op\u00e9rations Math\u00e9matiques JavaScript<\/strong> ne se limitent pas \u00e0 des calculs simples. Elles sont couramment utilis\u00e9es dans des domaines vari\u00e9s, tels que les simulations physiques, les graphiques, les animations et les jeux vid\u00e9o. Comprendre ces op\u00e9rations vous permettra de mieux appr\u00e9hender des concepts complexes comme la manipulation de matrices, les transformations 3D, et les algorithmes de traitement du signal.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2D et 3D Graphics<\/h3>\n\n\n\n<p>Les biblioth\u00e8ques graphiques comme <a href=\"https:\/\/threejs.org\/\" target=\"_blank\" rel=\"noopener\">Three.js<\/a> et <a href=\"https:\/\/p5js.org\/\" target=\"_blank\" rel=\"noopener\">p5.js<\/a> d\u00e9pendent grandement des op\u00e9rations math\u00e9matiques. Que vous souhaitiez dessiner des formes simples ou cr\u00e9er des animations complexes, une compr\u00e9hension des op\u00e9rations math\u00e9matiques est cruciale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Simulations et Mod\u00e9lisation<\/h3>\n\n\n\n<p>Les op\u00e9rations math\u00e9matiques JavaScript sont \u00e9galement utilis\u00e9es dans les simulations physiques et la mod\u00e9lisation. Par exemple, les moteurs physiques comme <a href=\"https:\/\/phaser.io\/\" target=\"_blank\" rel=\"noopener\">Phaser<\/a> ou <a href=\"https:\/\/matter-js.com\/\" target=\"_blank\" rel=\"noopener\">Matter.js<\/a> utilisent des calculs math\u00e9matiques d\u00e9taill\u00e9s pour simuler des mouvements r\u00e9alistes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Manipulation des Donn\u00e9es<\/h3>\n\n\n\n<p>Les manipulations de donn\u00e9es, telles que filtrer des jeux de donn\u00e9es, calculer des statistiques ou r\u00e9aliser des pr\u00e9dictions via des algorithmes de machine learning en JavaScript","protected":false},"excerpt":{"rendered":"<p>Les op\u00e9rations math\u00e9matiques en JavaScript sont essentielles pour tous les niveaux de d\u00e9veloppement web et les applications interactives. Comprendre comment effectuer des op\u00e9rations math\u00e9matiques de&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5534","post","type-post","status-publish","format-standard","hentry","category-3-css","category-2-html","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\/5534","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=5534"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5534\/revisions"}],"predecessor-version":[{"id":5535,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5534\/revisions\/5535"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}