{"id":5544,"date":"2024-08-28T21:52:32","date_gmt":"2024-08-28T21:52:32","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\/"},"modified":"2024-08-28T21:52:35","modified_gmt":"2024-08-28T21:52:35","slug":"qu-est-ce-qu-une-fonction-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\/","title":{"rendered":"4.1 Qu&rsquo;est-ce qu&rsquo;une Fonction en JavaScript ?"},"content":{"rendered":"\n<p><strong>Les Fonction JavaScript<\/strong> sont une pierre angulaire de la programmation en JavaScript. Comprendre comment d\u00e9finir, appeler et manipuler des <strong>fonctions en JavaScript<\/strong> est essentiel pour tout d\u00e9veloppeur d\u00e9sirant ma\u00eetriser ce langage. Apprenons comment elles fonctionnent et comment les utiliser efficacement gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Fonctions 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\/658878688?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>En JavaScript, une fonction est un bloc de code con\u00e7u pour effectuer une t\u00e2che particuli\u00e8re, souvent associ\u00e9e \u00e0 la possibilit\u00e9 de prendre des param\u00e8tres et de retourner des valeurs. Les fonctions peuvent \u00eatre d\u00e9finies de plusieurs mani\u00e8res, notamment avec des d\u00e9clarations de fonction, des expressions de fonction, des fonctions fl\u00e9ch\u00e9es, et bien plus encore.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9clarer une Fonction en JavaScript<\/h3>\n\n\n\n<p>La m\u00e9thode la plus courante pour d\u00e9clarer une fonction JavaScript est d&rsquo;utiliser le mot-cl\u00e9 <code>function<\/code> suivi du nom de la fonction, des parenth\u00e8ses pour les param\u00e8tres, et des accolades pour le corps de la fonction. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function saluer(nom) {\n    return `Bonjour, ${nom}!`;\n}\n\n\/\/ Appeler la fonction\nconsole.log(saluer(\"Alice\")); \/\/ Affiche 'Bonjour, Alice!'\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Expressions de Fonction JavaScript<\/h3>\n\n\n\n<p>Les expressions de fonction permettent de d\u00e9finir des fonctions en les affectant \u00e0 des variables. Cette approche est utile pour cr\u00e9er des fonctions anonymes (sans nom) ou pour passer des fonctions en tant qu&rsquo;arguments \u00e0 d&rsquo;autres fonctions.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const multiplier = function(x, y) {\n    return x * y;\n};\n\n\/\/ Appeler la fonction\nconsole.log(multiplier(5, 3)); \/\/ Affiche 15\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions Fl\u00e9ch\u00e9es en JavaScript<\/h3>\n\n\n\n<p>Les fonctions fl\u00e9ch\u00e9es, introduites dans ES6, offrent une syntaxe plus concise pour \u00e9crire des fonctions anonymes. Elles sont souvent utilis\u00e9es pour des fonctions courtes ou comme arguments de fonctions.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const ajouter = (a, b) => a + b;\n\n\/\/ Appeler la fonction\nconsole.log(ajouter(4, 6)); \/\/ Affiche 10\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Passer des Fonctions en Arguments<\/h3>\n\n\n\n<p>En JavaScript, vous pouvez passer des fonctions en tant qu&rsquo;arguments \u00e0 d&rsquo;autres fonctions. C&rsquo;est une pratique courante pour impl\u00e9menter des fonctions de rappel (callbacks) et des fonctions de traitement asynchrone.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function operation(a, b, callback) {\n    return callback(a, b);\n}\n\nconst somme = (x, y) => x + y;\nconst produit = (x, y) => x * y;\n\nconsole.log(operation(4, 5, somme));  \/\/ Affiche 9\nconsole.log(operation(4, 5, produit)); \/\/ Affiche 20\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions R\u00e9cursives en JavaScript<\/h3>\n\n\n\n<p>Les fonctions r\u00e9cursives sont des fonctions qui s&rsquo;appellent elles-m\u00eames. Elles sont particuli\u00e8rement utiles lorsqu&rsquo;un probl\u00e8me peut \u00eatre divis\u00e9 en sous-probl\u00e8mes de m\u00eame nature.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function factorielle(n) {\n    if (n === 0) {\n        return 1;\n    }\n    return n * factorielle(n - 1);\n}\n\nconsole.log(factorielle(5)); \/\/ Affiche 120\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions Asynchrones en JavaScript<\/h3>\n\n\n\n<p>Avec l&rsquo;av\u00e8nement d&rsquo;ES8, JavaScript a introduit les fonctions asynchrones avec les mots-cl\u00e9s <code>async<\/code> et <code>await<\/code>. Ces fonctions permettent de g\u00e9rer plus facilement les op\u00e9rations asynchrones en rempla\u00e7ant les promesses et les callbacks.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>async function fetchData(url) {\n    try {\n        const response = await fetch(url);\n        const data = await response.json();\n        console.log(data);\n    } catch (error) {\n        console.error('Error:', error);\n    }\n}\n\nfetchData('https:\/\/jsonplaceholder.typicode.com\/posts\/1');\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Fonctions pour Moduler le Code<\/h3>\n\n\n\n<p>Une des bonnes pratiques en programmation est de diviser votre code en fonctions modulaires. Cela am\u00e9liore la lisibilit\u00e9, la r\u00e9utilisabilit\u00e9 et la maintenabilit\u00e9 du code. Par exemple, si vous d\u00e9veloppez une application web, vous pouvez avoir des fonctions s\u00e9par\u00e9es pour manipuler le DOM, g\u00e9rer les \u00e9v\u00e9nements, valider les formulaires, etc.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Fonction de validation de formulaire\nfunction validerFormulaire(formulaire) {\n    const nom = formulaire.nom.value;\n    const email = formulaire.email.value;\n\n    if (nom === \"\" || email === \"\") {\n        alert(\"Tous les champs sont obligatoires.\");\n        return false;\n    }\n    return true;\n}\n\n\/\/ Fonction de gestion d'\u00e9v\u00e9nements\nfunction ajouterEvenements() {\n    const boutonSoumettre = document.getElementById('soumettre');\n    boutonSoumettre.addEventListener('click', function(event) {\n        const formulaire = document.getElementById('formulaire');\n        if (!validerFormulaire(formulaire)) {\n            event.preventDefault();\n        }\n    });\n}\n\n\/\/ Appeler la fonction pour ajouter les \u00e9v\u00e9nements \u00e0 l'initialisation\ndocument.addEventListener('DOMContentLoaded', ajouterEvenements);\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>fonctions en JavaScript<\/strong> sont des outils puissants et polyvalents qui permettent d&rsquo;\u00e9crire du code plus propre, modulaire et r\u00e9utilisable. En ma\u00eetrisant les diff\u00e9rentes techniques pour d\u00e9finir et utiliser des fonctions, vous serez mieux \u00e9quip\u00e9 pour d\u00e9velopper des applications JavaScript robustes. Pour suivre des cours plus approfondis, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours sur les fondamentaux de JavaScript<\/a>. Bon apprentissage!<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" 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<p>Int\u00e9ress\u00e9 par d&rsquo;autres aspects de JavaScript ? Consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce que JavaScript ?<\/a> pour une introduction d\u00e9taill\u00e9e. Vous pouvez \u00e9galement explorer des sujets plus avanc\u00e9s comme les <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\" target=\"_blank\" rel=\"noopener\">extensions pour JavaScript<\/a> et diff\u00e9rents <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">logiciels pour JavaScript<\/a>.<\/p>\n\n\n\n<p>Pour comprendre comment organiser et structurer vos variables, d\u00e9couvrez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">ce qu&rsquo;est une variable en JavaScript<\/a>. Si vous souhaitez approfondir vos connaissances sur les fonctions, lisez notre article d\u00e9taill\u00e9 sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce qu&rsquo;une fonction en JavaScript<\/a> ou apprenez \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/ecrire-une-fonction-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">\u00e9crire une fonction en JavaScript<\/a>.<\/p>\n\n\n\n<p>Pour les d\u00e9veloppeurs souhaitant en apprendre plus sur le d\u00e9bogage, nous avons un guide complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\" target=\"_blank\" rel=\"noopener\">l&rsquo;utilisation du d\u00e9bogueur en JavaScript<\/a>. Et pour ceux int\u00e9ress\u00e9s par les interactions utilisateur, d\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-une-information-en-javascript\" target=\"_blank\" rel=\"noopener\">afficher une information en JavaScript<\/a>.<\/p>\n\n\n\n<p>Enfin, pour une immersion compl\u00e8te, explorez les <a href=\"https:\/\/wikiform.fr\/codespace\/operations-mathematiques-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">op\u00e9rations math\u00e9matiques en JavaScript<\/a> et apprenez comment <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\" target=\"_blank\" rel=\"noopener\">g\u00e9rer les exceptions<\/a> efficacement pour rendre vos applications plus robustes. Vous aurez ainsi une vision globale et compl\u00e8te du potentiel de ce langage fascinant.<\/p>\n\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>","protected":false},"excerpt":{"rendered":"<p>Les Fonction JavaScript sont une pierre angulaire de la programmation en JavaScript. Comprendre comment d\u00e9finir, appeler et manipuler des fonctions en JavaScript est essentiel pour&#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":[9],"tags":[18],"class_list":["post-5544","post","type-post","status-publish","format-standard","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\/5544","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=5544"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5544\/revisions"}],"predecessor-version":[{"id":5545,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5544\/revisions\/5545"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}