{"id":5548,"date":"2024-08-28T21:59:58","date_gmt":"2024-08-28T21:59:58","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-parametres-a-une-fonction-javascript\/"},"modified":"2024-08-28T22:00:03","modified_gmt":"2024-08-28T22:00:03","slug":"ajouter-parametres-a-une-fonction-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-parametres-a-une-fonction-javascript\/","title":{"rendered":"4.3 Ajouter Param\u00e8tres \u00e0 une Fonction JavaScript"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Ajouter des Param\u00e8tres \u00e0 une Fonction JavaScript<\/strong> est une technique essentielle pour cr\u00e9er des fonctions dynamiques et r\u00e9utilisables dans vos projets de d\u00e9veloppement web. Comprendre comment passer des param\u00e8tres \u00e0 une fonction vous permettra de personnaliser son comportement en fonction des besoins et d&rsquo;am\u00e9liorer la modularit\u00e9 de votre code. Apprenons comment ajouter des param\u00e8tres \u00e0 une fonction JavaScript gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Param\u00e8tres de Fonction 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\/658878988?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 param\u00e8tres fonction JavaScript sont essentiels pour cr\u00e9er des scripts dynamiques. Les fonctions en JavaScript peuvent accepter des arguments, qui sont des valeurs pass\u00e9es \u00e0 la fonction lors de son appel. Ces arguments servent de param\u00e8tres \u00e0 la fonction et peuvent modifier son comportement. Voyons comment cela fonctionne en pratique.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finition de Fonctions avec des Param\u00e8tres<\/h3>\n\n\n\n<p>Pour d\u00e9finir une fonction avec des param\u00e8tres, vous devez sp\u00e9cifier les noms des param\u00e8tres entre parenth\u00e8ses dans la d\u00e9claration de la fonction. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function greet(name) {\n    console.log(\"Bonjour, \" + name + \"!\");\n}\n\n\/\/ Appeler la fonction avec un argument\ngreet(\"Alice\"); \/\/ Affiche \"Bonjour, Alice!\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser Plusieurs Param\u00e8tres<\/h3>\n\n\n\n<p>Une fonction peut accepter plusieurs param\u00e8tres. S\u00e9parez simplement les noms des param\u00e8tres par des virgules. Voici un exemple de fonction qui calcule la somme de 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\n\/\/ Appeler la fonction avec deux arguments\nconsole.log(add(3, 4)); \/\/ Affiche 7\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Valeurs de Param\u00e8tres par D\u00e9faut<\/h3>\n\n\n\n<p>En JavaScript, vous pouvez \u00e9galement d\u00e9finir des valeurs par d\u00e9faut pour les param\u00e8tres. Cela permet de s&rsquo;assurer que la fonction fonctionne correctement m\u00eame si certains arguments ne sont pas fournis lors de l&rsquo;appel. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function multiply(a, b = 1) {\n    return a * b;\n}\n\n\/\/ Appeler la fonction avec un seul argument\nconsole.log(multiply(5)); \/\/ Affiche 5 (car b a une valeur par d\u00e9faut de 1)\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions avec des Param\u00e8tres Rest<\/h3>\n\n\n\n<p>Le param\u00e8tre rest permet \u00e0 une fonction de prendre un nombre variable d&rsquo;arguments sous la forme d&rsquo;un tableau. Cela peut \u00eatre tr\u00e8s utile lorsque vous ne savez pas combien d&rsquo;arguments seront pass\u00e9s \u00e0 la fonction. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function sum(...numbers) {\n    return numbers.reduce((total, num) => total + num, 0);\n}\n\n\/\/ Appeler la fonction avec plusieurs arguments\nconsole.log(sum(1, 2, 3, 4)); \/\/ Affiche 10\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Fonctions Anonymes avec des Param\u00e8tres<\/h3>\n\n\n\n<p>Outre les fonctions nomm\u00e9es, vous pouvez \u00e9galement cr\u00e9er des fonctions anonymes avec des param\u00e8tres. Les fonctions anonymes sont souvent utilis\u00e9es comme arguments de fonction, par exemple dans les m\u00e9thodes d&rsquo;ordre sup\u00e9rieur. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const numbers = [1, 2, 3];\n\n\/\/ Utiliser une fonction anonyme avec map\nconst doubled = numbers.map(function(num) {\n    return num * 2;\n});\n\nconsole.log(doubled); \/\/ Affiche [2, 4, 6]\n<\/code><\/pre>\n\n\n\n<p>Les fonctions anonymes peuvent \u00e9galement \u00eatre d\u00e9finies avec la syntaxe ES6 des fonctions fl\u00e9ch\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const doubled = numbers.map(num => num * 2);\n\nconsole.log(doubled); \/\/ Affiche [2, 4, 6]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Combin\u00e9s d&rsquo;Utilisation des Param\u00e8tres de Fonction<\/h3>\n\n\n\n<p>Pour int\u00e9grer tous ces concepts, cr\u00e9ons une fonction plus complexe qui utilise plusieurs param\u00e8tres, des valeurs par d\u00e9faut et des param\u00e8tres rest :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function createGreeting(greeting = \"Hello\", ...names) {\n    return names.map(name => `${greeting}, ${name}!`).join(\" \");\n}\n\n\/\/ Appeler la fonction avec plusieurs arguments\nconsole.log(createGreeting(\"Salut\", \"Alice\", \"Bob\")); \/\/ Affiche \"Salut, Alice! Salut, Bob!\"\nconsole.log(createGreeting(\"Bonjour\", \"Clara\")); \/\/ Affiche \"Bonjour, Clara!\"\n<\/code><\/pre>\n\n\n\n<p>Pour aller plus loin sur les <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-arguments-avec-rest-parameter-en-javascript\" target=\"_blank\" rel=\"nofollow noopener\">param\u00e8tres rest<\/a>, vous pouvez consulter notre guide. Par ailleurs, il est \u00e9galement important de bien comprendre les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"nofollow noopener\">variables en JavaScript<\/a> pour optimiser votre code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En comprenant comment <strong>ajouter des param\u00e8tres \u00e0 une fonction JavaScript<\/strong>, vous pouvez faire en sorte que vos fonctions soient plus flexibles et puissantes. Que ce soit par l&rsquo;utilisation de valeurs par d\u00e9faut, de param\u00e8tres rest, ou de fonctions anonymes, ma\u00eetrisez ces techniques pour \u00e9crire du code JavaScript plus efficace et maintenable. Continuez \u00e0 explorer et \u00e0 exp\u00e9rimenter ces concepts dans vos projets pour en tirer le meilleur parti.<\/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\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","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Ajouter des Param\u00e8tres \u00e0 une Fonction JavaScript est une technique essentielle pour cr\u00e9er des fonctions dynamiques et r\u00e9utilisables dans vos projets de d\u00e9veloppement web&#8230;.<\/p>\n","protected":false},"author":3,"featured_media":2845,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5548","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\/5548","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=5548"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5548\/revisions"}],"predecessor-version":[{"id":5549,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5548\/revisions\/5549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2845"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}