{"id":5505,"date":"2024-08-28T09:18:05","date_gmt":"2024-08-28T09:18:05","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition-2\/"},"modified":"2024-08-28T09:18:05","modified_gmt":"2024-08-28T09:18:05","slug":"qu-est-ce-que-javascript-explications-definition-2","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition-2\/","title":{"rendered":"1.1 Qu&rsquo;est-ce que JavaScript ? Explications et D\u00e9finition"},"content":{"rendered":"Pour optimiser cet article en termes de SEO, nous allons int\u00e9grer les recommandations suivantes. Nous ajouterons du contenu pertinent pour atteindre les 1200 mots, incorporerons des liens internes et externes, et optimiserons les balises HTML, ainsi que le placement de la vid\u00e9o Vimeo. Voici comment l&rsquo;article sera modifi\u00e9 :\n\n\u00ab\u00a0`html\n\n<p><strong>Introduction \u00e0 JavaScript<\/strong> est une \u00e9tape cruciale pour quiconque souhaite devenir d\u00e9veloppeur web. JavaScript est l&rsquo;un des langages de programmation les plus populaires, utilis\u00e9 pour rendre les pages web interactives. Dans ce tutoriel, nous allons explorer en profondeur ce qu&rsquo;est JavaScript D\u00e9finition, son histoire, son importance, et comment il fonctionne.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qu&rsquo;est-ce que JavaScript ? Explications et D\u00e9finition<\/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<\/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<div id=\"introVideo\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/www.youtube.com\/embed\/PkZNo7MFNFg\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay; fullscreen\" id=\"introVideoPlayer\"><\/iframe>\n<\/div>\n\n\n\n<p>JavaScript D\u00e9finition : JavaScript est un langage de programmation de haut niveau, interpr\u00e9t\u00e9, et orient\u00e9 objet. Cr\u00e9\u00e9 en 1995 par Brendan Eich alors qu&rsquo;il travaillait chez Netscape, il \u00e9tait initialement destin\u00e9 \u00e0 ajouter des \u00e9l\u00e9ments dynamiques et interactifs aux pages web. En 1997, il a \u00e9t\u00e9 standardis\u00e9 sous le nom ECMAScript par l&rsquo;ECMA (European Computer Manufacturers Association), ce qui a permis \u00e0 diff\u00e9rentes versions de JavaScript de se conformer au m\u00eame standard. Aujourd&rsquo;hui, JavaScript est l&rsquo;un des trois langages essentiels du d\u00e9veloppement web, aux c\u00f4t\u00e9s de HTML et CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Fonctionnalit\u00e9s Cl\u00e9s de JavaScript<\/h3>\n\n\n\n<p>JavaScript est largement appr\u00e9ci\u00e9 pour sa flexibilit\u00e9 et ses fonctionnalit\u00e9s puissantes. Voici quelques-unes des fonctionnalit\u00e9s cl\u00e9s de JavaScript :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li><strong>Manipulation du DOM<\/strong> &#8211; Dom pour Document Object Model, permet de modifier la structure, le contenu, et le style des pages web en temps r\u00e9el. Pour plus de d\u00e9tails, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-elements-dom-js-textcontent-innerhtml\" target=\"_blank\" rel=\"noopener\">manipulation des \u00e9l\u00e9ments du DOM<\/a>.<\/li>\n  <li><strong>Programmation \u00e9v\u00e9nementielle<\/strong> &#8211; JavaScript peut \u00e9couter et r\u00e9agir \u00e0 des \u00e9v\u00e9nements utilisateur tels que les clics de souris, les entr\u00e9es de clavier, etc. Apprenez \u00e0 utiliser les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-ecouteurs-evenements-en-javascript-onclick\" target=\"_blank\" rel=\"noopener\">\u00e9couteurs d&rsquo;\u00e9v\u00e9nements en JavaScript<\/a>.<\/li>\n  <li><strong>Asynchrone<\/strong> &#8211; Gr\u00e2ce aux fonctionnalit\u00e9s comme les callbacks, Promises, et async\/await, JavaScript permet de g\u00e9rer des op\u00e9rations asynchrones telles que les requ\u00eates HTTP. Pour un tutoriel d\u00e9taill\u00e9, visitez notre section sur <a href=\"https:\/\/wikiform.fr\/codespace\/programmation-asynchrone-en-javascript\" target=\"_blank\" rel=\"noopener\">la programmation asynchrone en JavaScript<\/a>.<\/li>\n  <li><strong>Compatibilit\u00e9 multiplateforme<\/strong> &#8211; JavaScript fonctionne sur presque tous les navigateurs modernes et syst\u00e8mes d&rsquo;exploitation sans modification. D\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">choisir les meilleurs outils logiciels pour JavaScript<\/a>.<\/li>\n  <li><strong>Interop\u00e9rabilit\u00e9<\/strong> &#8211; JavaScript peut facilement interagir avec d&rsquo;autres langages et technologies web telles que HTML, CSS, et les API. Pour mieux comprendre, lisez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/que-est-ce-que-le-dom-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce que le DOM en JavaScript<\/a>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Premiers Pas avec JavaScript<\/h3>\n\n\n\n<p>Pour d\u00e9marrer avec JavaScript, vous n&rsquo;avez besoin que d&rsquo;un navigateur web et d&rsquo;un \u00e9diteur de texte. Vous pouvez ouvrir le DevTools de votre navigateur (souvent accessible en appuyant sur F12) et naviguer jusqu&rsquo;\u00e0 la console pour ex\u00e9cuter du code JavaScript D\u00e9finition en temps r\u00e9el. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Affiche une alerte avec \"Bonjour le monde!\"\nalert('Bonjour le monde!');\n\n\/\/ Affiche un message dans la console\nconsole.log('Bienvenue dans le monde de JavaScript.');\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser JavaScript pour Interagir avec le DOM<\/h3>\n\n\n\n<p>Un des usages les plus courants de JavaScript est la manipulation du DOM. Le DOM est une interface de programmation qui repr\u00e9sente les documents HTML et XML. Voici un exemple o\u00f9 nous allons modifier le contenu d&rsquo;un \u00e9l\u00e9ment HTML avec JavaScript :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Exemple JavaScript&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1 id=\"titre\"&gt;Titre Original&lt;\/h1&gt;\n    &lt;button onclick=\"changeTitre()\"&gt;Changer le Titre&lt;\/button&gt;\n\n    &lt;script&gt;\n        function changeTitre() {\n            document.getElementById('titre').innerText = 'Titre Modifi\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\">Les Bases de la Programmation Asynchrone avec JavaScript<\/h3>\n\n\n\n<p>La programmation asynchrone est un aspect essentiel de JavaScript. Elle permet d&rsquo;ex\u00e9cuter des op\u00e9rations sans bloquer l&rsquo;ex\u00e9cution du code. Un exemple classique est l&rsquo;utilisation de <code>setTimeout<\/code> pour retarder l&rsquo;ex\u00e9cution d&rsquo;une fonction :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>console.log('D\u00e9but');\n\nsetTimeout(() => {\n    console.log('Cette ligne est affich\u00e9e apr\u00e8s 2 secondes');\n}, 2000);\n\nconsole.log('Fin');\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Fonctions de Callbacks, Promises et Async\/Await<\/h3>\n\n\n\n<p>En plus de <code>setTimeout<\/code>, JavaScript offre des fonctionnalit\u00e9s plus avanc\u00e9es pour g\u00e9rer l&rsquo;asynchronie, telles que les callbacks, les Promises, et les fonctions <code>async\/await<\/code>. Voici comment une Promise peut \u00eatre utilis\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const maPromise = new Promise((resolve, reject) => {\n    const success = true; \/\/ Vous pouvez changer cette valeur pour simuler une erreur\n    if (success) {\n        resolve('Op\u00e9ration r\u00e9ussie!');\n    } else {\n        reject('Op\u00e9ration \u00e9chou\u00e9e.');\n    }\n});\n\nmaPromise.then((message) => {\n    console.log(message);\n}).catch((error) => {\n    console.error(error);\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation de JavaScript<\/h3>\n\n\n\n<p>Pour une compr\u00e9hension plus approfondie, explorons des exemples avanc\u00e9s o\u00f9 JavaScript D\u00e9finition est utilis\u00e9 de mani\u00e8re sophistiqu\u00e9e.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Manipulation Complexe du DOM<\/h4>\n\n\n\n<p>Imaginez une situation o\u00f9 vous devez cr\u00e9er et ins\u00e9rer plusieurs \u00e9l\u00e9ments dynamiquement dans la page :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const liste = document.getElementById('maListe');\n\nconst fruits = ['Pomme', 'Banane', 'Cerise'];\nfruits.forEach(fruit => {\n    const li = document.createElement('li');\n    li.innerText = fruit;\n    liste.appendChild(li);\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Requ\u00eates HTTP Asynchrones<\/h4>\n\n\n\n<p>Les requ\u00eates HTTP asynchrones permettent de r\u00e9cup\u00e9rer des donn\u00e9es depuis des serveurs et de mettre \u00e0 jour la page sans la recharger :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>fetch('https:\/\/jsonplaceholder.typicode.com\/posts')\n  .then(response => response.json())\n  .then(data => {\n    console.log(data);\n  })\n  .catch(error => {\n    console.error('Erreur:', error);\n  });\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Projets R\u00e9els avec JavaScript<\/h4>\n\n\n\n<p>JavaScript est largement utilis\u00e9 dans des projets r\u00e9els, des petites applications front-end aux grandes applications web comme des SPA (Single Page Applications) utilisant des frameworks comme React, Angular, et Vue.js.<\/p>\n\n\n\n<p>En conclusion, comprendre JavaScript D\u00e9finition et sa puissance vous permet de cr\u00e9er des pages web dynamiques et interactives. Continuez \u00e0 pratiquer et \u00e0 exp\u00e9rimenter avec diff\u00e9rents concepts pour ma\u00eetriser ce langage. Si vous souhaitez approfondir vos connaissances, consultez des cours en ligne et de la documentation officielle comme sur <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\/assets\/images\/javascript.png\" loading=\"lazy\" alt=\"Learnify JavaScript Course\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" 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=\"Formation JavaScript sur Learnify\" title=\"\"><\/a>\n\n\u00ab\u00a0`\n\nEn suivant ces instructions, l&rsquo;article est enrichi avec plus de contenu, les mots-cl\u00e9s sont int\u00e9gr\u00e9s de mani\u00e8re naturelle, et des liens internes et externes sont ajout\u00e9s pour am\u00e9liorer le SEO. Nous avons aussi inclus la vid\u00e9o Vimeo sous le premier H2, respectant ainsi les recommandations donn\u00e9es.","protected":false},"excerpt":{"rendered":"<p>Pour optimiser cet article en termes de SEO, nous allons int\u00e9grer les recommandations suivantes. Nous ajouterons du contenu pertinent pour atteindre les 1200 mots, incorporerons&#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":[3,8],"tags":[18],"class_list":["post-5505","post","type-post","status-publish","format-standard","hentry","category-3-css","category-2-html","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\/5505","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=5505"}],"version-history":[{"count":0,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5505\/revisions"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}