{"id":5503,"date":"2024-08-28T09:10:50","date_gmt":"2024-08-28T09:10:50","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\/"},"modified":"2024-08-28T09:16:57","modified_gmt":"2024-08-28T09:16:57","slug":"qu-est-ce-que-javascript-explications-definition","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\/","title":{"rendered":"1.1 Qu&rsquo;est-ce que JavaScript ? Explications et D\u00e9finition"},"content":{"rendered":"\n\n<p><strong>Qu&rsquo;est-ce que JavaScript ?<\/strong> est une question essentielle pour quiconque souhaite plonger dans le d\u00e9veloppement web. Comprendre la nature et les fonctions de <strong>JavaScript<\/strong> peut transformer votre approche de la cr\u00e9ation de sites web interactifs et dynamiques. D\u00e9cortiquons ensemble les bases de JavaScript, sa d\u00e9finition, son utilit\u00e9, et comment il fonctionne \u00e0 travers des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>JavaScript D\u00e9finition<\/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\/660853014?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\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>JavaScript est un langage de programmation qui permet de rendre les pages web interactives. Contrairement \u00e0 HTML et CSS, qui sont des langages de balisage et de mise en forme respectivement, JavaScript permet de cr\u00e9er du contenu que les utilisateurs peuvent manipuler en temps r\u00e9el.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finition de <strong>JavaScript<\/strong><\/h3>\n\n\n\n<p>JavaScript, souvent abr\u00e9g\u00e9 en JS, est un langage de script l\u00e9ger, interpr\u00e9t\u00e9 ou compil\u00e9 juste-\u00e0-temps (just-in-time). Principalement connu comme un langage de script pour pages web, il est \u00e9galement utilis\u00e9 dans de nombreux environnements non li\u00e9s au navigateur comme Node.js. Pour en savoir plus, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\">Qu&rsquo;est-ce que JavaScript ? Les explications et la d\u00e9finition.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisations Courantes de JavaScript<\/h3>\n\n\n\n<p>\u00c0 quoi sert JavaScript ? Voici quelques exemples d&rsquo;utilisations courantes :<\/p>\n<ol>\n  <li>Validation des formulaires avant qu&rsquo;ils ne soient soumis.<\/li>\n  <li>Cr\u00e9ation de jeux interactifs sur le web.<\/li>\n  <li>Animation des \u00e9l\u00e9ments de la page comme les images ou les divs.<\/li>\n  <li>Gestion de contenu dynamique tel que les sliders ou les carrousels d&rsquo;images.<\/li>\n  <li>Communiquer avec un serveur sans recharger la page gr\u00e2ce \u00e0 AJAX.<\/li>\n<\/ol>\n<p>Vous pouvez explorer plus en d\u00e9tail les meilleurs <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\">logiciels pour JavaScript<\/a> dans notre guide.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Premiers Pas avec JavaScript<\/h3>\n\n\n\n<p>Pour d\u00e9buter avec JavaScript, il suffit de cr\u00e9er un fichier HTML et d&rsquo;y inclure un script JavaScript. Voici un exemple simple pour afficher une alerte :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Ma Premi\u00e8re Page JavaScript&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Bonjour le monde!&lt;\/h1&gt;\n    &lt;script&gt;\n        alert('Bonjour le monde!');\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipulation du DOM (Document Object Model)<\/h3>\n\n\n\n<p>Un des pouvoirs essentiels de JavaScript r\u00e9side dans sa capacit\u00e9 \u00e0 manipuler le DOM, la structure hi\u00e9rarchique des \u00e9l\u00e9ments HTML. Avec JavaScript, vous pouvez ajouter, supprimer ou modifier des \u00e9l\u00e9ments pour rendre les pages web plus dynamiques. Voici un exemple de manipulation du DOM :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Manipulation du DOM&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Changer le Texte&lt;\/h1&gt;\n    &lt;button onclick=\"changeText()\"&gt;Cliquez-moi&lt;\/button&gt;\n    &lt;script&gt;\n        function changeText() {\n            document.querySelector('h1').textContent = 'Texte Changer!';\n        }\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des \u00c9v\u00e9nements avec JavaScript<\/h3>\n\n\n\n<p>Les \u00e9v\u00e8nements en JavaScript permettent de r\u00e9agir aux actions de l&rsquo;utilisateur, comme les clics de souris ou les frappes au clavier. Voici un exemple simple d&rsquo;ajout d&rsquo;un \u00e9v\u00e9nement de clic :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;\u00c9v\u00e9nements JavaScript&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Bonjour&lt;\/h1&gt;\n    &lt;button id=\"myButton\"&gt;Cliquez-moi&lt;\/button&gt;\n    &lt;script&gt;\n        document.getElementById('myButton').addEventListener('click', function() {\n            alert('Bouton Cliqu\u00e9!');\n        });\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">JavaScript dans l&rsquo;\u00c9cosyst\u00e8me du D\u00e9veloppement Web<\/h3>\n\n\n\n<p>JavaScript ne se limite pas aux simples interactions sur les pages web. Il fait partie int\u00e9grante de l&rsquo;\u00e9cosyst\u00e8me du d\u00e9veloppement moderne, utilis\u00e9 aussi bien c\u00f4t\u00e9 client (frontend) avec des frameworks comme React, Vue.js ou Angular, que c\u00f4t\u00e9 serveur (backend) avec Node.js. Voici quelques r\u00f4les que JavaScript joue dans l&rsquo;\u00e9cosyst\u00e8me de d\u00e9veloppement :<\/p>\n<ul>\n  <li><strong>Front-End Development:<\/strong> Dynamiser les interfaces utilisateur.<\/li>\n  <li><strong>Back-End Development:<\/strong> Cr\u00e9er des serveurs et g\u00e9rer des bases de donn\u00e9es avec Node.js.<\/li>\n  <li><strong>Applications Web Completes:<\/strong> D\u00e9velopper des applications monolithiques avec des frameworks JavaScript.<\/li>\n<\/ul>\n<p>Pour approfondir, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-vs-code-pour-javascript\">le fonctionnement de VS Code pour JavaScript<\/a>.<\/p>\n\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>JavaScript est un outil incontournable pour tout d\u00e9veloppeur web, offrant des possibilit\u00e9s quasi infinies pour rendre les pages web interactives et dynamiques. De la manipulation du DOM \u00e0 la gestion des \u00e9v\u00e9nements, JavaScript est la cl\u00e9 pour d\u00e9bloquer tout le potentiel de vos projets web. Pour approfondir vos connaissances, vous pouvez suivre des cours en ligne comme ceux de <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> ou consulter des ressources comme <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/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 JavaScript Offre 50%\" title=\"\"><\/a>\n\n","protected":false},"excerpt":{"rendered":"<p>Qu&rsquo;est-ce que JavaScript ? est une question essentielle pour quiconque souhaite plonger dans le d\u00e9veloppement web. Comprendre la nature et les fonctions de JavaScript peut&#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-5503","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\/5503","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=5503"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5503\/revisions"}],"predecessor-version":[{"id":5504,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5503\/revisions\/5504"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}