{"id":5546,"date":"2024-08-28T21:56:33","date_gmt":"2024-08-28T21:56:33","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ecrire-une-fonction-en-javascript-tutoriel\/"},"modified":"2024-08-28T21:56:36","modified_gmt":"2024-08-28T21:56:36","slug":"ecrire-une-fonction-en-javascript-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ecrire-une-fonction-en-javascript-tutoriel\/","title":{"rendered":"4.2 \u00c9crire une Fonction en JavaScript : Tutoriel"},"content":{"rendered":"\n<p><strong>\u00c9crire une Fonction en JavaScript<\/strong> constitue une comp\u00e9tence fondamentale pour tout d\u00e9veloppeur web. Une compr\u00e9hension claire et pr\u00e9cise de la mani\u00e8re de cr\u00e9er et d&#8217;employer des fonctions en JavaScript peut significativement am\u00e9liorer la qualit\u00e9 de votre code et la maintenabilit\u00e9 de vos projets. Plongeons dans l\u2019apprentissage de cette comp\u00e9tence essentielle avec un tutoriel bien d\u00e9taill\u00e9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;\u00c9criture 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\/658878737?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>Une fonction en JavaScript est un bloc de code con\u00e7u pour accomplir une t\u00e2che particuli\u00e8re. Vous pouvez d\u00e9finir une fonction une fois et l\u2019appeler autant de fois que n\u00e9cessaire. Ce concept est essentiel pour produire du code efficace, r\u00e9utilisable et bien organis\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir des Fonctions en JavaScript<\/h3>\n\n\n\n<p>Il existe plusieurs mani\u00e8res de d\u00e9finir des fonctions en JavaScript. La m\u00e9thode la plus courante est d&rsquo;utiliser la d\u00e9claration de fonction. Voyons comment d\u00e9clarer une fonction simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function saluer() {\n    console.log(\"Bonjour tout le monde !\");\n}\n\n\/\/ Appeler la fonction\nsaluer();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions avec Param\u00e8tres<\/h3>\n\n\n\n<p>Les fonctions peuvent \u00e9galement accepter des param\u00e8tres, qui fournissent des informations suppl\u00e9mentaires n\u00e9cessaires \u00e0 leur ex\u00e9cution. Voici comment d\u00e9finir une fonction avec des param\u00e8tres :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function saluerPersonne(pr\u00e9nom) {\n    console.log(\"Bonjour, \" + pr\u00e9nom + \" !\");\n}\n\n\/\/ Appeler la fonction avec un argument\nsaluerPersonne(\"Alice\");\nsaluerPersonne(\"Bob\");\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions avec Valeur de Retour<\/h3>\n\n\n\n<p>Les fonctions peuvent renvoyer une valeur en utilisant le mot-cl\u00e9 <code>return<\/code>. Cela permet de r\u00e9cup\u00e9rer le r\u00e9sultat d\u2019une fonction pour un usage ult\u00e9rieur. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function ajouter(a, b) {\n    return a + b;\n}\n\nvar r\u00e9sultat = ajouter(3, 4);\nconsole.log(\"Le r\u00e9sultat est : \" + r\u00e9sultat);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions Anonymes et Expressions de Fonction<\/h3>\n\n\n\n<p>Au-del\u00e0 des d\u00e9clarations de fonctions classiques, JavaScript permet \u00e9galement de d\u00e9finir des fonctions anonymes, souvent utilis\u00e9es comme expressions de fonction ou arguments de fonctions de haut niveau. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>var saluer = function(pr\u00e9nom) {\n    console.log(\"Salut, \" + pr\u00e9nom + \" !\");\n};\n\nsaluer(\"Chloe\");\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions Fl\u00e9ch\u00e9es (Arrow Functions)<\/h3>\n\n\n\n<p>ECMAScript 2015 (ES6) a introduit les fonctions fl\u00e9ch\u00e9es (arrow functions), qui offrent une syntaxe plus courte pour d\u00e9finir des fonctions anonymes. Voyons comment les utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const saluer = (pr\u00e9nom) => {\n    console.log(\"Salut, \" + pr\u00e9nom + \" !\");\n};\n\nsaluer(\"David\");\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions Callback et Asynchrones<\/h3>\n\n\n\n<p>Les fonctions callback sont utilis\u00e9es pour g\u00e9rer les t\u00e2ches asynchrones en JavaScript. Elles sont souvent pass\u00e9es en argument \u00e0 d\u2019autres fonctions et sont ex\u00e9cut\u00e9es apr\u00e8s la fin d\u2019une t\u00e2che. Voici un exemple de fonction callback :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function t\u00e9l\u00e9chargerFichier(url, callback) {\n    console.log(\"T\u00e9l\u00e9chargement du fichier depuis \" + url);\n    \/\/ Simuler un t\u00e9l\u00e9chargement avec setTimeout\n    setTimeout(function() {\n        console.log(\"T\u00e9l\u00e9chargement termin\u00e9.\");\n        callback();\n    }, 3000);\n}\n\nfunction apr\u00e8sT\u00e9l\u00e9chargement() {\n    console.log(\"Ex\u00e9cution apr\u00e8s le t\u00e9l\u00e9chargement.\");\n}\n\n\/\/ Appel de la fonction avec un callback\nt\u00e9l\u00e9chargerFichier(\"https:\/\/example.com\/fichier\", apr\u00e8sT\u00e9l\u00e9chargement);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Fonctions en JavaScript<\/h3>\n\n\n\n<p>Explorons quelques exemples plus avanc\u00e9s pour mieux comprendre la puissance des fonctions en JavaScript.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Fonctions \u00e0 Usage Multiple<\/h4>\n\n\n\n<p>Les fonctions peuvent \u00eatre utilis\u00e9es pour cr\u00e9er des outils r\u00e9utilisables qui simplifient votre code. Par exemple, une fonction pour additionner tous les \u00e9l\u00e9ments d\u2019un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function additionnerTableau(tableau) {\n    return tableau.reduce((acc, val) => acc + val, 0);\n}\n\nconsole.log(additionnerTableau([1, 2, 3, 4])); \/\/ R\u00e9sultat : 10\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Fonctions de Gestion d&rsquo;\u00c9v\u00e9nements<\/h4>\n\n\n\n<p>Les fonctions jouent un r\u00f4le central dans la gestion des \u00e9v\u00e9nements utilisateur dans les applications web. Voici comment attacher une fonction \u00e0 un \u00e9v\u00e9nement de clic :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.getElementById('bouton').addEventListener('click', function() {\n    alert('Bouton cliqu\u00e9 !');\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation dans les Promises<\/h4>\n\n\n\n<p>Les Promises sont une autre application courante des fonctions en JavaScript, notamment pour g\u00e9rer les op\u00e9rations asynchrones. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function attendre(ms) {\n    return new Promise(resolve => setTimeout(resolve, ms));\n}\n\nattendre(2000).then(() => {\n    console.log(\"2 secondes se sont \u00e9coul\u00e9es.\");\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Projet R\u00e9el : Application de Conversion de Devises<\/h4>\n\n\n\n<p>Pour un exemple concret d&rsquo;application, imaginez que nous voulons cr\u00e9er une application simple de conversion de devises. Voici comment structurer le projet en utilisant des fonctions :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>async function obtenirTauxDeChange(monnaieDe, monnaieVers) {\n    const response = await fetch(`https:\/\/api.exchangerate-api.com\/v4\/latest\/${monnaieDe}`);\n    const data = await response.json();\n    return data.rates[monnaieVers];\n}\n\nasync function convertirMontant(montant, monnaieDe, monnaieVers) {\n    const taux = await obtenirTauxDeChange(monnaieDe, monnaieVers);\n    return montant * taux;\n}\n\ndocument.getElementById('convertirButton').addEventListener('click', async () => {\n    const montant = parseFloat(document.getElementById('montant').value);\n    const monnaieDe = document.getElementById('monnaieDe').value;\n    const monnaieVers = document.getElementById('monnaieVers').value;\n    \n    const r\u00e9sultat = await convertirMontant(montant, monnaieDe, monnaieVers);\n    document.getElementById('r\u00e9sultat').textContent = `${montant} ${monnaieDe} = ${r\u00e9sultat} ${monnaieVers}`;\n});\n<\/code><\/pre>\n\n\n\n<p>Nous esp\u00e9rons que ce tutoriel vous a aid\u00e9 \u00e0 comprendre comment \u00e9crire et utiliser des fonctions en JavaScript. Continuez \u00e0 pratiquer et \u00e0 explorer pour renforcer vos comp\u00e9tences en JavaScript. Pour aller plus loin, d\u00e9couvrez notre <a href=\"https:\/\/example.com\/course\/javascript-advanced\" target=\"_blank\" rel=\"noopener\">cours avanc\u00e9 de JavaScript<\/a> et devenez un expert en d\u00e9veloppement web.<\/p>\n\n\n\n<a href=\"https:\/\/learnify.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=\"JavaScript Avanc\u00e9\" title=\"\"><\/a>\n.\n\n\n<h3 class=\"wp-block-heading\">Ressources Compl\u00e9mentaires pour \u00c9crire Fonction JavaScript<\/h3>\n\n\n\n<p>Pour enrichir votre compr\u00e9hension des fonctions JavaScript, nous vous recommandons de consulter certaines de nos autres ressources utiles :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce que JavaScript ? Explications et d\u00e9finition<\/a><\/li>\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/logciiels-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">Logiciels pour JavaScript: Les Meilleurs Outils<\/a><\/li>\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\" target=\"_blank\" rel=\"noopener\">Extensions pour JavaScript: Guide Complet<\/a><\/li>\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/planifier-script-en-javascript-settimeout-setinterval\" target=\"_blank\" rel=\"noopener\">Planifier Script en JavaScript: setTimeout et setInterval<\/a><\/li>\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-parametres-a-une-fonction-javascript\" target=\"_blank\" rel=\"noopener\">Ajouter des Param\u00e8tres \u00e0 une Fonction JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">Port\u00e9e des Variables en JavaScript: Explications<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Approfondir les Concepts des Fonctions en JavaScript<\/h3>\n\n\n\n<p>Les <a href=\"https:\/\/wikiform.fr\/codespace\/lois-du-code-javascript-principes-fondamentaux\" target=\"_blank\" rel=\"noopener\">fonctions en JavaScript<\/a> ne sont qu&rsquo;une partie des nombreuses fonctionnalit\u00e9s puissantes de ce langage. En approfondissant","protected":false},"excerpt":{"rendered":"<p>\u00c9crire une Fonction en JavaScript constitue une comp\u00e9tence fondamentale pour tout d\u00e9veloppeur web. Une compr\u00e9hension claire et pr\u00e9cise de la mani\u00e8re de cr\u00e9er et d&#8217;employer&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2876,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5546","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\/5546","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=5546"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5546\/revisions"}],"predecessor-version":[{"id":5547,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5546\/revisions\/5547"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2876"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}