{"id":5558,"date":"2024-08-28T22:20:09","date_gmt":"2024-08-28T22:20:09","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-existantes-en-javascript\/"},"modified":"2024-12-17T20:14:15","modified_gmt":"2024-12-17T20:14:15","slug":"utiliser-fonctions-existantes-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-existantes-en-javascript\/","title":{"rendered":"4.8 Utiliser Fonctions Existantes en JavaScript"},"content":{"rendered":"\n\n\n<p><strong>Utiliser les Fonctions Existantes en JavaScript<\/strong> est un aspect essentiel pour tout d\u00e9veloppeur d\u00e9sirant optimiser son code et utiliser au mieux les fonctionnalit\u00e9s offertes par le langage. En assimilant les diff\u00e9rentes fonctions existantes, vous pouvez simplifier votre travail, \u00e9viter les redondances et \u00e9crire un code plus propre et maintenable. D\u00e9couvrons ensemble comment tirer parti de ces fonctions au travers d&rsquo;exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Fonctions Existantes 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\/658879383?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 fonctions existantes en JavaScript sont des outils puissants qui peuvent transformer la mani\u00e8re dont vous \u00e9crivez du code. Ces fonctions incluent des op\u00e9rations sur les cha\u00eenes de caract\u00e8res, les tableaux, les nombres, et bien plus encore. Voici quelques-unes des fonctions les plus courantes et comment elles peuvent \u00eatre utilis\u00e9es dans vos projets. Pour en savoir plus sur l&rsquo;utilisation de certaines de ces fonctions dans vos projets, vous pouvez consulter notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\">d\u00e9claration des variables en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler les Cha\u00eenes de Caract\u00e8res<\/h3>\n\n\n\n<p>JavaScript offre une s\u00e9rie de m\u00e9thodes pour manipuler les cha\u00eenes de caract\u00e8res de mani\u00e8re efficace. Voici quelques exemples de ces m\u00e9thodes et comment elles peuvent \u00eatre utilis\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ longueur d'une cha\u00eene\nlet str = \"Bonjour, Monde!\";\nconsole.log(str.length); \/\/ 14\n\n\/\/ convertir en majuscules\nlet upperStr = str.toUpperCase();\nconsole.log(upperStr); \/\/ \"BONJOUR, MONDE!\"\n\n\/\/ trouver un sous-strng\nlet position = str.indexOf(\"Monde\");\nconsole.log(position); \/\/ 8\n\n\/\/ remplacer une sous-cha\u00eene\nlet newStr = str.replace(\"Monde\", \"JavaScript\");\nconsole.log(newStr); \/\/ \"Bonjour, JavaScript!\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler les Tableaux<\/h3>\n\n\n\n<p>Les fonctions de manipulation des tableaux permettent de transformer, trier et filtrer les donn\u00e9es de mani\u00e8re efficace. Voici quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un tableau\nlet fruits = &#91;\"Pomme\", \"Banane\", \"Orange\"];\n\n\/\/ Ajouter un \u00e9l\u00e9ment\nfruits.push(\"Mangue\");\nconsole.log(fruits); \/\/ &#91;\"Pomme\", \"Banane\", \"Orange\", \"Mangue\"]\n\n\/\/ Supprimer le dernier \u00e9l\u00e9ment\nfruits.pop();\nconsole.log(fruits); \/\/ &#91;\"Pomme\", \"Banane\", \"Orange\"]\n\n\/\/ Trouver l'index d'un \u00e9l\u00e9ment\nlet index = fruits.indexOf(\"Banane\");\nconsole.log(index); \/\/ 1\n\n\/\/ Trier le tableau\nlet sortedFruits = fruits.sort();\nconsole.log(sortedFruits); \/\/ &#91;\"Banane\", \"Orange\", \"Pomme\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler les Nombres<\/h3>\n\n\n\n<p>JavaScript inclut \u00e9galement de nombreuses fonctions pour manipuler les nombres, effectuer des calculs math\u00e9matiques ou simplement formater des valeurs num\u00e9riques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ \u00c9lever un nombre \u00e0 la puissance\nlet base = 2;\nlet exponent = 3;\nconsole.log(Math.pow(base, exponent)); \/\/ 8\n\n\/\/ Arrondir un nombre\nlet num = 3.567;\nconsole.log(Math.round(num)); \/\/ 4\n\n\/\/ G\u00e9n\u00e9rer un nombre al\u00e9atoire entre 0 et 1\nconsole.log(Math.random());\n\n\/\/ Convertir une cha\u00eene en nombre\nlet strNum = \"42\";\nconsole.log(Number(strNum)); \/\/ 42\nconsole.log(parseInt(strNum)); \/\/ 42\nconsole.log(parseFloat(strNum)); \/\/ 42\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions Utilitaires pour les Objets<\/h3>\n\n\n\n<p>Les objets sont au coeur de JavaScript, et il existe plusieurs m\u00e9thodes int\u00e9gr\u00e9es pour les manipuler. Voici quelques-unes des plus utilis\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un objet\nlet personne = {\n    nom: \"John\",\n    age: 30,\n    ville: \"Paris\"\n};\n\n\/\/ Parcourir les propri\u00e9t\u00e9s d'un objet\nfor (let prop in personne) {\n    console.log(prop, personne&#91;prop]);\n}\n\n\/\/ Acc\u00e9der aux clefs et valeurs\nlet keys = Object.keys(personne);\nlet values = Object.values(personne);\nconsole.log(keys); \/\/ &#91;\"nom\", \"age\", \"ville\"]\nconsole.log(values); \/\/ &#91;\"John\", 30, \"Paris\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Promises pour Gestion Asynchrone<\/h3>\n\n\n\n<p>Les Promises sont extr\u00eamement utiles dans JavaScript pour g\u00e9rer les op\u00e9rations asynchrones. Voici un exemple de base pour comprendre leur utilisation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let promesse = new Promise((resolve, reject) =&gt; {\n    \/\/ Effectuer une t\u00e2che asynchrone\n    setTimeout(() =&gt; {\n        resolve(\"T\u00e2che termin\u00e9e avec succ\u00e8s!\");\n    }, 2000);\n});\n\npromesse.then((result) =&gt; {\n    console.log(result); \/\/ \"T\u00e2che termin\u00e9e avec succ\u00e8s!\"\n}).catch((error) =&gt; {\n    console.error(error);\n});\n<\/code><\/pre>\n\n\n\n<p>Pour approfondir vos connaissances sur l&rsquo;utilisation des Promises, visitez notre article d\u00e9di\u00e9 aux <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\">exceptions en JavaScript<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>fonctions existantes en JavaScript<\/strong> offrent un \u00e9ventail de possibilit\u00e9s pour rendre votre code plus efficace et plus lisible. En apprenant \u00e0 utiliser ces fonctions de mani\u00e8re optimale, vous pouvez r\u00e9duire la complexit\u00e9 de votre code tout en augmentant sa performance. Continuez \u00e0 explorer les diff\u00e9rentes m\u00e9thodes et fonctions disponibles en JavaScript pour am\u00e9liorer vos comp\u00e9tences de d\u00e9veloppement. Pour plus de conseils et tutoriels, consultez notre autre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\">les fondamentaux du JavaScript<\/a>.<\/p>\n\n\n\n<p>Pour am\u00e9liorer vos comp\u00e9tences en JavaScript, vous pouvez \u00e9galement consulter des ressources externes r\u00e9put\u00e9es comme le <a href=\"https:\/\/developer.mozilla.org\/\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> ou suivre des cours en ligne sur des plateformes comme <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> ou <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a>.<\/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<p><script><br \/>\ndocument.addEventListener('DOMContentLoaded', function() {<br \/>\n    var iframe = document.getElementById('vimeoPlayer');<br \/>\n    var player = new Vimeo.Player(iframe);<br \/>\n    var isPopupDisplayed = false;<\/p>\n<p>    player.on('play', function() {<br \/>\n        if (!isPopupDisplayed) {<br \/>\n            player.on('timeupdate', function(data) {<br \/>\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes<br \/>\n                    \/\/ Pause the video and display the popup<br \/>\n                    player.pause().then(function() {<br \/>\n                        if (window.innerWidth > 768) {<br \/>\n                            document.querySelector('.desktop-popup').style.display = 'block';<br \/>\n                        } else {<br \/>\n                            document.querySelector('.mobile-popup').style.display = 'block';<br \/>\n                        }<br \/>\n                        fetchPriceAndUpdatePopup();<br \/>\n                        isPopupDisplayed = true;<br \/>\n                    });<br \/>\n                }<br \/>\n            });<br \/>\n        }<br \/>\n    });<\/p>\n<p>    function fetchPriceAndUpdatePopup() {<br \/>\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')<br \/>\n            .then(response => response.text())<br \/>\n            .then(html => {<br \/>\n                var parser = new DOMParser();<br \/>\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');<br \/>\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');<br \/>\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');<br \/>\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';<br \/>\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';<\/p>\n<p>                document.getElementById('price').textContent = price;<br \/>\n                document.getElementById('priceMobile').textContent = price;<br \/>\n                document.querySelector('.desktop-popup del').textContent = originalPrice;<br \/>\n                document.querySelector('.mobile-popup del').textContent = originalPrice;<br \/>\n            })<br \/>\n            .catch(error => console.error('Error fetching the price:', error));<br \/>\n    }<\/p>\n<p>    function closePopup() {<br \/>\n        document.querySelector('.desktop-popup').style.display = 'none';<br \/>\n        document.querySelector('.mobile-popup').style.display = 'none';<br \/>\n        player.play(); \/\/ Allows resuming the video only after closing the popup<br \/>\n    }<br \/>\n});<br \/>\n<\/script><\/p>\n<p><!-- Ajout de contenu pour atteindre les 1200 mots --><\/p>\n\n\n<h3 class=\"wp-block-heading\">Fonctions pour Manipuler les Dates<\/h3>\n\n\n\n<p>Les fonctions de manipulation des dates en JavaScript permettent de travailler efficacement avec les dates et les heures. Voici quelques exemples de ces fonctions :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un objet Date\nlet date = new Date();\nconsole.log(date); \/\/ Affiche la date et l'heure actuelles\n\n\/\/ Obtenir l'ann\u00e9e, le mois et le jour\nlet year = date.getFullYear();\nlet month = date.getMonth() + 1; \/\/ Les mois sont index\u00e9s \u00e0 partir de 0\nlet day = date.getDate();\nconsole.log(year, month, day); \/\/ Affiche l'ann\u00e9e, le mois et le jour\n\n\/\/ Formater une date\nlet formattedDate = `${day}\/${month}\/${year}`;\nconsole.log(formattedDate); \/\/ Affiche la date au format JJ\/MM\/AAAA\n\n\/\/ Comparer deux dates\nlet futureDate = new Date(date.getTime() + 7 * 24 * 60 * 60 * 1000); \/\/ Ajouter 7 jours\nlet isFuture = futureDate &gt; date;\nconsole.log(isFuture); \/\/ true\n<\/code><\/pre>\n\n\n\n<p>La manipulation des dates est une comp\u00e9tence importante pour toute application web. Pour en savoir plus sur ce sujet, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-simple-en-javascript-tutoriel\">comment cr\u00e9er un tableau en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions pour Travailler avec le DOM<\/h3>\n\n\n\n<p>La manipulation du DOM (Document Object Model) est cruciale pour rendre\n","protected":false},"excerpt":{"rendered":"<p>Utiliser les Fonctions Existantes en JavaScript est un aspect essentiel pour tout d\u00e9veloppeur d\u00e9sirant optimiser son code et utiliser au mieux les fonctionnalit\u00e9s offertes par&#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-5558","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\/5558","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=5558"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5558\/revisions"}],"predecessor-version":[{"id":6095,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5558\/revisions\/6095"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}