{"id":6110,"date":"2018-09-02T12:41:32","date_gmt":"2018-09-02T12:41:32","guid":{"rendered":"https:\/\/blog.hostinger.io\/fr-tutoriels\/?p=6110"},"modified":"2025-02-21T15:31:55","modified_gmt":"2025-02-21T15:31:55","slug":"qu-est-ce-que-javascript","status":"publish","type":"post","link":"\/fr\/tutoriels\/qu-est-ce-que-javascript","title":{"rendered":"Qu&rsquo;est-ce que JavaScript ? Introduction basique pour les d\u00e9butants"},"content":{"rendered":"<p>JavaScript est un langage de programmation l&eacute;ger couramment utilis&eacute; par les d&eacute;veloppeurs web pour ajouter des interactions dynamiques aux pages web, aux applications, aux serveurs et m&ecirc;me aux jeux.<\/p><p>Il fonctionne de mani&egrave;re transparente avec HTML et CSS, compl&eacute;tant CSS dans le formatage des &eacute;l&eacute;ments HTML tout en fournissant une interaction avec l&rsquo;utilisateur, une capacit&eacute; que CSS seul n&rsquo;a pas.<\/p><p>Les applications tr&egrave;s r&eacute;pandues du langage JavaScript dans le d&eacute;veloppement de sites web, d&rsquo;applications mobiles et de jeux en font un langage qu&rsquo;il est important d&rsquo;apprendre.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/FR-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noopener\">Obtenez le glossaire complet du d&eacute;veloppement web<\/a><\/p><p>\n\n\n\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">Qu'est-ce que JavaScript ?<\/h2>\n                    <p>JavaScript est un langage de script permettant de cr&eacute;er des pages web dynamiques. Il cr&eacute;e des &eacute;l&eacute;ments qui am&eacute;liorent l&rsquo;interaction des visiteurs avec les pages web, tels que des menus d&eacute;roulants, des graphiques anim&eacute;s et des couleurs d&rsquo;arri&egrave;re-plan dynamiques.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-a-quoi-sert-javascript\"><strong>&Agrave; quoi sert JavaScript ?<\/strong><\/h2><p>Les premi&egrave;res versions du langage de script &eacute;taient r&eacute;serv&eacute;es &agrave; un usage interne. Apr&egrave;s que Netscape l&rsquo;a soumis &agrave; <a href=\"https:\/\/www.ecma-international.org\/\" target=\"_blank\" rel=\"noopener\"><strong>ECMA International<\/strong><\/a><strong> <\/strong>en tant que sp&eacute;cification standard pour les navigateurs web, JavaScript a ouvert la voie &agrave; la publication d&rsquo;ECMAScript.<\/p><p>Il s&rsquo;agissait d&rsquo;un langage de script &agrave; usage g&eacute;n&eacute;ral destin&eacute; &agrave; assurer l&rsquo;interop&eacute;rabilit&eacute; des pages web entre les diff&eacute;rents navigateurs et appareils.<\/p><p>Depuis lors, JavaScript a continu&eacute; &agrave; se d&eacute;velopper parall&egrave;lement aux nouveaux navigateurs tels que <strong>Mozilla Firefox <\/strong>et <strong>Google Chrome. <\/strong>Ce dernier a m&ecirc;me commenc&eacute; &agrave; d&eacute;velopper le premier moteur JavaScript moderne, appel&eacute; <strong>V8<\/strong>, qui compile le bytecode en code machine natif.<\/p><p>Aujourd&rsquo;hui, JavaScript dispose de nombreux frameworks et biblioth&egrave;ques pour simplifier les projets complexes, comme AngularJS, jQuery et <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/quest-ce-que-react\"><strong>ReactJS<\/strong><\/a>.<\/p><p>Ex&eacute;cut&eacute;e &agrave; l&rsquo;origine c&ocirc;t&eacute; client, l&rsquo;impl&eacute;mentation JavaScript s&rsquo;est &eacute;tendue au c&ocirc;t&eacute; serveur apr&egrave;s le d&eacute;veloppement de <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/quest-ce-que-node-js\"><strong>Node.js<\/strong><\/a> &ndash; un environnement serveur multiplateforme construit sur le moteur JavaScript V8 de Google Chrome.<\/p><p>Bien qu&rsquo;il soit surtout destin&eacute; aux programmes bas&eacute;s sur le web, les fonctions de programmation JavaScript ont d&rsquo;autres applications dans diff&eacute;rents domaines. Voici quelques utilisations de base de JavaScript.<\/p><h3 class=\"wp-block-heading\"><strong>1. Applications Web et mobiles<\/strong><\/h3><p>Le d&eacute;veloppement de cadres JavaScript, constitu&eacute;s de biblioth&egrave;ques de code JavaScript, permet aux d&eacute;veloppeurs d&rsquo;utiliser du code JavaScript pr&eacute;-&eacute;crit dans leurs projets. Cela leur permet d&rsquo;&eacute;conomiser du temps et des efforts en &eacute;vitant d&rsquo;avoir &agrave; coder des fonctions de programmation &agrave; partir de z&eacute;ro.<\/p><p>Chaque cadre JavaScript poss&egrave;de des caract&eacute;ristiques qui visent &agrave; simplifier le processus de d&eacute;veloppement et de d&eacute;bogage.<\/p><p>Par exemple, les cadres JavaScript frontaux tels que jQuery et ReactJS am&eacute;liorent l&rsquo;efficacit&eacute; de la conception. Ils permettent aux d&eacute;veloppeurs de r&eacute;utiliser et de mettre &agrave; jour les composants du code sans qu&rsquo;ils ne s&rsquo;affectent les uns les autres, que ce soit en termes de fonction ou de valeur.<\/p><p>Par ailleurs, les cadres de d&eacute;veloppement d&rsquo;applications mobiles, tels que <a href=\"https:\/\/cordova.apache.org\/\" target=\"_blank\" rel=\"noopener\"><strong>Cordova<\/strong><\/a><strong>, <\/strong>permettent de cr&eacute;er des applications natives ou hybrides.<\/p><p>La mise en &oelig;uvre du code JavaScript dans Node.js joue &eacute;galement un r&ocirc;le important dans le d&eacute;veloppement web. Node.js peut r&eacute;duire le temps de r&eacute;ponse du serveur gr&acirc;ce &agrave; sa nature mono-t&acirc;che et &agrave; son architecture non bloquante, et &eacute;viter les retards.<\/p><p>Node.js est &eacute;galement suffisamment l&eacute;ger pour servir d&rsquo;outil &eacute;volutif pour les microservices, ce qui vous permet de d&eacute;velopper une application unique compos&eacute;e de petits services avec des processus individuels.<\/p><h3 class=\"wp-block-heading\"><strong>2. Cr&eacute;ation de serveurs Web et d&rsquo;applications serveur<\/strong><\/h3><p>Gr&acirc;ce &agrave; Node.js, JavaScript permet aux d&eacute;veloppeurs de construire des serveurs web et des infrastructures dorsales, ce qui leur permet d&rsquo;&eacute;conomiser du temps et des efforts dans la cr&eacute;ation de serveurs web.<\/p><p>Le module HTTP int&eacute;gr&eacute; vous permet de d&eacute;velopper un serveur HTTP de base qui affiche du texte en clair lorsque les utilisateurs acc&egrave;dent &agrave; une page web. Vous pouvez utiliser le propre serveur web de Node.js, <a href=\"https:\/\/node-os.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Node-OS<\/strong><\/a>, ou des serveurs tiers comme Microsoft Internet Information Services (IIS) et <a href=\"https:\/\/httpd.apache.org\/\" target=\"_blank\" rel=\"noopener\"><strong>Apache<\/strong><\/a><strong> <\/strong>pour g&eacute;rer les requ&ecirc;tes HTTP.<\/p><p>Gardez &agrave; l&rsquo;esprit que Node-OS fonctionne mieux sur les syst&egrave;mes d&rsquo;exploitation Linux, car il est construit sur le noyau Linux.<\/p><h3 class=\"wp-block-heading\"><strong>3. Comportement interactif sur les sites web<\/strong><\/h3><p>L&rsquo;une des principales fonctions de JavaScript est d&rsquo;ajouter du dynamisme aux pages web. Cela comprend l&rsquo;affichage d&rsquo;animations, la modification de la visibilit&eacute; du texte et la cr&eacute;ation de menus d&eacute;roulants.<\/p><p>Si vous pouvez utiliser uniquement les codes HTML et CSS pour cr&eacute;er un site web, celui-ci n&rsquo;aura qu&rsquo;un affichage statique. Avec JavaScript, l&rsquo;utilisateur peut interagir avec les pages web et b&eacute;n&eacute;ficier d&rsquo;une meilleure exp&eacute;rience de navigation.<\/p><p>En outre, JavaScript vous permet de modifier le contenu HTML et les valeurs des attributs sans avoir &agrave; recharger la page web. En effet, JavaScript prend en charge les types de donn&eacute;es suivants :<\/p><ul class=\"wp-block-list\">\n<li><strong>Cha&icirc;ne <\/strong>&ndash; consiste en des donn&eacute;es textuelles &eacute;crites entre guillemets. Par exemple, <strong>&laquo;&nbsp;Hello world&nbsp;&raquo;<\/strong>, <strong>&laquo;&nbsp;Hello world&nbsp;&raquo; <\/strong>et <strong>&laquo;&nbsp;Afficher le texte &lsquo;Hello world'&nbsp;&raquo;<\/strong>.<\/li>\n\n\n\n<li><strong>Nombre <\/strong>&ndash; couvre les nombres entiers et flottants compris entre (2^53 &ndash; 1) et -(2^53 &ndash; 1).<\/li>\n\n\n\n<li><strong>Bool&eacute;en <\/strong>&ndash; un type de donn&eacute;es logiques avec des valeurs <strong>vraies <\/strong>et <strong>fausses<\/strong>.<\/li>\n\n\n\n<li><strong>BigInt <\/strong>&ndash; repr&eacute;sente des donn&eacute;es enti&egrave;res de longueur arbitraire.<\/li>\n\n\n\n<li><strong>Null <\/strong>&ndash; contient une valeur nulle.<\/li>\n\n\n\n<li><strong>Non d&eacute;fini <\/strong>&ndash; comprend les variables d&eacute;clar&eacute;es mais non affect&eacute;es.<\/li>\n\n\n\n<li><strong>Symbole <\/strong>&ndash; fournit des identifiants uniques pour les objets.<\/li>\n\n\n\n<li><strong>Objet <\/strong>&ndash; pour les structures de donn&eacute;es complexes &eacute;crites avec des accolades. Par exemple, <strong>{item : &laquo;&nbsp;Book&nbsp;&raquo;, information : &laquo;&nbsp;biography&nbsp;&raquo;}<\/strong>.<\/li>\n<\/ul><p>Les types de donn&eacute;es primitifs, qui comprennent tous les types de donn&eacute;es &agrave; l&rsquo;exception des <strong>objets<\/strong>, ne peuvent stocker qu&rsquo;une seule donn&eacute;e. Le type de donn&eacute;es <strong>objet <\/strong>peut quant &agrave; lui contenir une collection de valeurs.<\/p><p>Avec JavaScript, vous pouvez &eacute;galement am&eacute;liorer l&rsquo;exp&eacute;rience de navigation des utilisateurs en utilisant des cookies. La cr&eacute;ation, la lecture et la suppression des cookies en JavaScript n&eacute;cessitent la propri&eacute;t&eacute; <strong>document.cookie<\/strong>, qui fonctionne comme un getter et un setter des valeurs des cookies.<\/p><h3 class=\"wp-block-heading\"><strong>4. D&eacute;veloppement de jeux<\/strong><\/h3><p>JavaScript peut vous aider &agrave; cr&eacute;er un jeu s&rsquo;il est utilis&eacute; avec HTML5 et une interface de programmation d&rsquo;application (API) comme <a href=\"https:\/\/get.webgl.org\/\" target=\"_blank\" rel=\"noopener\"><strong>WebGL<\/strong><\/a>. De nombreux moteurs de jeu bas&eacute;s sur JavaScript, tels que <a href=\"https:\/\/phaser.io\/\" target=\"_blank\" rel=\"noopener\"><strong>Phaser<\/strong><\/a> et <a href=\"https:\/\/docs.gdevelop-app.com\/\" target=\"_blank\" rel=\"noopener\"><strong>GDevelop<\/strong><\/a>, sont disponibles pour le rendu des graphiques, le recyclage du code et les applications multiplateformes.<\/p><p>Parmi les jeux r&eacute;alis&eacute;s avec des moteurs de jeu JavaScript, on peut citer <strong>Angry Birds<\/strong>, <strong>The Wizard <\/strong>et <strong>2048<\/strong>.<\/p><figure data-wp-context='{\"imageId\":\"69f98ee3cb214\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"480\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/angry-birds.png\/public\" alt=\"La page d'accueil de Angry Birds.\" class=\"wp-image-38303\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/angry-birds.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/angry-birds.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/angry-birds.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/angry-birds.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><h2 class=\"wp-block-heading\" id=\"h-quest-ce-qui-fait-la-qualite-de-javascript\"><strong>Qu&rsquo;est-ce qui fait la qualit&eacute; de JavaScript ?<\/strong><\/h2><p>JavaScript pr&eacute;sente un certain nombre d&rsquo;avantages qui en font un meilleur choix que ses concurrents. Voici quelques avantages de l&rsquo;utilisation de JavaScript :<\/p><ul class=\"wp-block-list\">\n<li><strong>Simplicit&eacute; <\/strong>&ndash; la structure simple de JavaScript facilite son apprentissage et sa mise en &oelig;uvre, et il s&rsquo;ex&eacute;cute plus rapidement que certains autres langages. Les erreurs sont &eacute;galement faciles &agrave; rep&eacute;rer et &agrave; corriger.<\/li>\n\n\n\n<li><strong>Rapidit&eacute; <\/strong>&ndash; JavaScript ex&eacute;cute des scripts directement dans le navigateur web sans se connecter &agrave; un serveur au pr&eacute;alable ni avoir besoin d&rsquo;un compilateur. En outre, la plupart des grands navigateurs permettent &agrave; JavaScript de compiler le code pendant l&rsquo;ex&eacute;cution du programme.<\/li>\n\n\n\n<li><strong>Polyvalence <\/strong>&ndash; JavaScript est compatible avec d&rsquo;autres langages comme PHP, Perl et Java. Il rend &eacute;galement la science des donn&eacute;es et l&rsquo;apprentissage automatique accessibles aux d&eacute;veloppeurs.<\/li>\n\n\n\n<li><strong>Popularit&eacute; <\/strong>&ndash; de nombreuses ressources et forums sont disponibles pour aider les d&eacute;butants dont les comp&eacute;tences techniques et les connaissances en JavaScript sont limit&eacute;es.<\/li>\n\n\n\n<li><strong>Charge du serveur <\/strong>&ndash; un autre avantage du fonctionnement c&ocirc;t&eacute; client est que JavaScript r&eacute;duit les requ&ecirc;tes envoy&eacute;es au serveur. La validation des donn&eacute;es peut &ecirc;tre effectu&eacute;e via le navigateur web et les mises &agrave; jour ne s&rsquo;appliquent qu&rsquo;&agrave; certaines sections de la page web.<\/li>\n\n\n\n<li><strong>Mises &agrave; jour <\/strong>&ndash; L&rsquo;&eacute;quipe de d&eacute;veloppement JavaScript et ECMA International mettent continuellement &agrave; jour et cr&eacute;ent de nouveaux cadres et biblioth&egrave;ques, garantissant ainsi leur pertinence au sein de l&rsquo;industrie.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-quelles-sont-les-faiblesses-de-javascript\"><strong>Quelles sont les faiblesses de JavaScript ?<\/strong><\/h2><p>Comme tout autre langage de programmation, JavaScript pr&eacute;sente plusieurs limites dont il faut tenir compte. Voici quelques-uns des inconv&eacute;nients de l&rsquo;utilisation de JavaScript :<\/p><ul class=\"wp-block-list\">\n<li><strong>Compatibilit&eacute; avec les navigateurs <\/strong>&ndash; les diff&eacute;rents navigateurs interpr&egrave;tent le code JavaScript diff&eacute;remment, ce qui entra&icirc;ne des incoh&eacute;rences. Vous devez donc tester votre script JavaScript dans tous les navigateurs web courants, y compris leurs anciennes versions, afin de ne pas nuire &agrave; l&rsquo;exp&eacute;rience de l&rsquo;utilisateur.<\/li>\n\n\n\n<li><strong>S&eacute;curit&eacute; <\/strong>&ndash; Le code JavaScript qui s&rsquo;ex&eacute;cute c&ocirc;t&eacute; client est susceptible d&rsquo;&ecirc;tre exploit&eacute; par des utilisateurs irresponsables.<\/li>\n\n\n\n<li><strong>D&eacute;bogage <\/strong>&ndash; bien que certains &eacute;diteurs HTML permettent le d&eacute;bogage, ils sont moins efficaces que d&rsquo;autres &eacute;diteurs. &Eacute;tant donn&eacute; que les navigateurs n&rsquo;affichent aucun avertissement en cas d&rsquo;erreur, il peut s&rsquo;av&eacute;rer difficile de trouver le probl&egrave;me.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-comment-le-code-javascript-fonctionne-t-il-sur-votre-page-web\"><strong>Comment le code JavaScript fonctionne-t-il sur votre page web ?<\/strong><\/h2><p>JavaScript est soit int&eacute;gr&eacute; directement dans une page web, soit r&eacute;f&eacute;renc&eacute; via un fichier .js s&eacute;par&eacute;. Lorsqu&rsquo;un utilisateur visite cette page web, son navigateur ex&eacute;cute le script avec le code HTML et CSS &ndash; cr&eacute;ant ainsi une page fonctionnelle affich&eacute;e via l&rsquo;onglet du navigateur.<\/p><p>Le script est t&eacute;l&eacute;charg&eacute; sur les machines des visiteurs et y est trait&eacute;. Cela diff&egrave;re d&rsquo;un langage c&ocirc;t&eacute; serveur, dans lequel le serveur traite le script avant de l&rsquo;envoyer au navigateur.<\/p><p>Lorsqu&rsquo;il rencontre un bloc de code JavaScript, un navigateur web le traite de haut en bas. Comme il est sensible &agrave; l&rsquo;ordre, veillez &agrave; r&eacute;f&eacute;rencer d&rsquo;abord les objets ou les variables du bloc avant de les modifier. L&rsquo;absence de valeurs dans les variables entra&icirc;ne une erreur &laquo;&nbsp;undefined&nbsp;&raquo;.<\/p><h2 class=\"wp-block-heading\" id=\"h-en-quoi-javascript-differe-t-il-des-autres-langages-de-programmation\"><strong>En quoi JavaScript diff&egrave;re-t-il des autres langages de programmation ?<\/strong><\/h2><p>La raison pour laquelle JavaScript est l&rsquo;un des langages de programmation les plus populaires est qu&rsquo;il est tr&egrave;s polyvalent. De nombreux d&eacute;veloppeurs le consid&egrave;rent comme leur premier choix, &agrave; moins qu&rsquo;ils n&rsquo;aient besoin d&rsquo;une fonction sp&eacute;cifique que JavaScript ne fournit pas.<\/p><p>Examinons quelques-uns des langages de programmation les plus populaires :<\/p><p><strong>C# <\/strong>&ndash; un langage orient&eacute; objet pour la cr&eacute;ation d&rsquo;applications fonctionnant dans l&rsquo;&eacute;cosyst&egrave;me .NET. Il est statiquement typ&eacute;, ce qui signifie que ses variables sont identifiables au moment de la compilation. Contrairement &agrave; JavaScript, C# dispose d&rsquo;une surcharge d&rsquo;op&eacute;rateurs et de conversions, ce qui permet de modifier les types de donn&eacute;es.<\/p><p><strong>Java <\/strong>&ndash; un langage de programmation orient&eacute; objet con&ccedil;u pour prendre en charge des programmes et des applications de grande envergure. Contrairement &agrave; JavaScript, Java est fortement typ&eacute;, ce qui signifie que ses variables doivent &ecirc;tre li&eacute;es &agrave; des types de donn&eacute;es sp&eacute;cifiques. Java n&eacute;cessite un compilateur juste &agrave; temps (JIT) pour ex&eacute;cuter son script.<\/p><p><strong>PHP <\/strong>&ndash; langage c&ocirc;t&eacute; serveur couramment utilis&eacute; dans les syst&egrave;mes de gestion de contenu bas&eacute;s sur PHP tels que WordPress. Ses principaux objectifs sont de transf&eacute;rer des informations vers et depuis une base de donn&eacute;es, d&rsquo;assembler des fichiers HTML et de suivre les sessions. Contrairement &agrave; JavaScript, PHP peut acc&eacute;der directement aux bases de donn&eacute;es et accepte les variables en minuscules et en majuscules.<\/p><p><strong>Ruby <\/strong>est un langage de programmation &agrave; usage g&eacute;n&eacute;ral qui prend en charge la m&eacute;taprogrammation, ce qui signifie qu&rsquo;il peut analyser et modifier d&rsquo;autres programmes et lui-m&ecirc;me. Son cadre le plus populaire, Ruby on Rails, vous permet de cr&eacute;er de grandes applications web de mani&egrave;re rentable et rapide. L&rsquo;impl&eacute;mentation de JavaScript sur Node.js s&rsquo;inspire du cadre Ruby on Rails.<\/p><h2 class=\"wp-block-heading\" id=\"h-comment-ajouter-du-code-javascript-a-un-site-web\"><strong>Comment ajouter du code JavaScript &agrave; un site web ?<\/strong><\/h2><p>Il existe deux fa&ccedil;ons d&rsquo;ajouter du code JavaScript &agrave; une page web HTML : en interne et en externe.<br>Le code JavaScript interne utilise la balise <strong>&lt;script&gt; <\/strong>dans le corps du script HTML pour encapsuler tout le code JavaScript.&nbsp;<\/p><p>Voici un exemple de JavaScript interne avec la balise <strong>&lt;script&gt; :<\/strong><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html&gt;\n&lt;head&gt;\n  &lt;title&gt;Inline JavaScript&lt;\/title&gt;\n  &lt;script type=\"text\/javascript\"&gt;\n    alert(\"Hello World\");\n  &lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Vous pouvez &eacute;galement int&eacute;grer son script dans les attributs d&rsquo;&eacute;v&eacute;nement HTML, en invitant le navigateur &agrave; l&rsquo;ex&eacute;cuter lorsqu&rsquo;un &eacute;v&eacute;nement est d&eacute;clench&eacute; &ndash; ce type de script est appel&eacute; &laquo;&nbsp;<strong>inline JavaScript&nbsp;&raquo; <\/strong>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;button onclick=\"alert('Click for more details')\"&gt;Click&lt;\/button&gt;<\/pre><p>D&rsquo;autre part, <strong>le JavaScript externe <\/strong>consiste &agrave; stocker le code dans un fichier <strong>.js <\/strong>s&eacute;par&eacute;, puis &agrave; le rappeler dans la page HTML. Les d&eacute;veloppeurs utilisent souvent cette m&eacute;thode lorsqu&rsquo;ils travaillent sur de grands projets, car elle permet d&rsquo;organiser le script.<\/p><p>De plus, il vous permet de r&eacute;utiliser le script dans plusieurs pages HTML, ce qui est tr&egrave;s appr&eacute;ci&eacute; par de nombreux d&eacute;veloppeurs.<\/p><p>Par exemple, l&rsquo;ajout du script suivant &agrave; une page HTML permet de rappeler un fichier JavaScript externe nomm&eacute; <strong>script.js :<\/strong><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"script.js\" defer&gt;&lt;\/script&gt;<\/pre><p>Voici un exemple de r&eacute;f&eacute;rence &agrave; un fichier JavaScript externe :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n&lt;title&gt;Time right now:&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;button type=\"button\" onclick=\"myFunction()\"&gt;Select&lt;\/button&gt;\n&lt;\/body&gt;\n&lt;script src=\"js\/script.js\"&gt;&lt;\/script&gt;\n&lt;\/html&gt;<\/pre><p>Si vous utilisez un syst&egrave;me de gestion de contenu (CMS), les &eacute;tapes pour ajouter le code peuvent &ecirc;tre diff&eacute;rentes. <\/p><p>Vous pouvez cr&eacute;er et modifier du code JavaScript &agrave; l&rsquo;aide d&rsquo;un &eacute;diteur de texte. Nous avons compil&eacute; les <strong><a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/editeur-html\">meilleurs &eacute;diteurs de texte<\/a> <\/strong>pour r&eacute;duire votre recherche.<\/p><p>Gardez &agrave; l&rsquo;esprit qu&rsquo;il existe deux types d&rsquo;&eacute;diteurs de texte : les &eacute;diteurs <strong><a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wysiwyg\">WYSIWYG<\/a> (what-you-see-is-what-you-get<\/strong>) et les &eacute;diteurs textuels. Un &eacute;diteur de texte WYSIWYG convient mieux aux d&eacute;butants, car il affiche l&rsquo;aspect des blocs de code sur une page.<\/p><p>Par exemple, <a href=\"https:\/\/www.tiny.cloud\/\" target=\"_blank\" rel=\"noopener\"><strong>TinyMCE<\/strong><\/a><strong> <\/strong>est un &eacute;diteur de texte WYSIWYG populaire utilis&eacute; dans WordPress.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f98ee3cc4f5\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"482\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/tiny-content-solutions.png\/public\" alt=\"TinyMCE, un &eacute;diteur de texte WYSIWYG populaire.\" class=\"wp-image-38304\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/tiny-content-solutions.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/tiny-content-solutions.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/tiny-content-solutions.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/tiny-content-solutions.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>D&rsquo;autre part, un &eacute;diteur de texte offre une plus grande libert&eacute; dans la personnalisation du code, mais n&eacute;cessite des comp&eacute;tences en HTML pour fonctionner. Parmi les &eacute;diteurs de texte les plus populaires, citons <a href=\"https:\/\/www.sublimetext.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Sublime Text<\/strong><\/a> et <a href=\"https:\/\/notepad-plus-plus.org\/\" target=\"_blank\" rel=\"noopener\"><strong>Notepad++<\/strong><\/a>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f98ee3ccdb9\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"482\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/sublime-text.png\/public\" alt=\"Sublime Text, un &eacute;diteur de texte.\" class=\"wp-image-38305\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/sublime-text.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/sublime-text.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/sublime-text.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2018\/09\/sublime-text.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Le <a href=\"https:\/\/www.javascript.com\/\" target=\"_blank\" rel=\"noopener\">site officiel<\/a> de JavaScript propose de nombreux tutoriels de d&eacute;monstration pour les d&eacute;butants et les passionn&eacute;s.<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/public\" alt=\"\" class=\"wp-image-41467\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2><p>JavaScript est souvent utilis&eacute; avec HTML et CSS pour ajouter de l&rsquo;interactivit&eacute; aux sites web. Dans certains cas, le langage JavaScript peut faire appel &agrave; des biblioth&egrave;ques tierces pour fournir des fonctionnalit&eacute;s avanc&eacute;es sans que le d&eacute;veloppeur n&rsquo;ait &agrave; les coder &agrave; partir de z&eacute;ro &agrave; chaque fois.<\/p><p>En termes de valeur, les d&eacute;butants en JavaScript peuvent s&rsquo;attendre &agrave; b&eacute;n&eacute;ficier des avantages suivants :<\/p><ul class=\"wp-block-list\">\n<li>Facile &agrave; apprendre et &agrave; mettre en &oelig;uvre dans certains &eacute;l&eacute;ments ou &eacute;v&eacute;nements de la page web<\/li>\n\n\n\n<li>Soutenu par une solide communaut&eacute; de d&eacute;veloppeurs<\/li>\n\n\n\n<li>R&eacute;duit les demandes envoy&eacute;es au serveur<\/li>\n\n\n\n<li>Compatible avec de nombreuses autres langues<\/li>\n\n\n\n<li>Plus rapide et plus l&eacute;ger que les autres langages de programmation<\/li>\n<\/ul><p>Nous esp&eacute;rons que cet article vous a aid&eacute; &agrave; comprendre ce qu&rsquo;est le JavaScript et sa fonction dans les sites web et les applications. Si vous souhaitez apprendre &agrave; coder en JavaScript, consultez notre guide pour <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/apprendre-a-coder-gratuitement\"><strong>apprendre &agrave; coder<\/strong><\/a>.<\/p><p>Si vous avez d&rsquo;autres questions ou suggestions, n&rsquo;h&eacute;sitez pas &agrave; nous laisser un commentaire.<\/p><h2 class=\"wp-block-heading\" id=\"h-qu-est-ce-que-javascript-faq\"><strong>Qu&rsquo;est-ce que JavaScript <\/strong>&ndash; FAQ<\/h2><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1740149489248\"><h3 class=\"schema-faq-question\"><strong>Qu&rsquo;est-ce que JavaScript et pourquoi est-il utilis&eacute; ?<\/strong><\/h3> <p class=\"schema-faq-answer\">JavaScript est un langage de programmation utilis&eacute; pour cr&eacute;er du contenu dynamique et interactif sur les applications web et les navigateurs.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1740149501580\"><h3 class=\"schema-faq-question\"><strong>Quelle est la diff&eacute;rence entre Java et JavaScript ?<\/strong><\/h3> <p class=\"schema-faq-answer\">Java est un langage de programmation OOP utilis&eacute; pour cr&eacute;er des applications qui s&rsquo;ex&eacute;cutent dans des machines virtuelles ou des navigateurs, tandis que JavaScript est un langage de script OOP utilis&eacute; pour ex&eacute;cuter du code dans des navigateurs web. Le code Java doit &ecirc;tre compil&eacute;, tandis que le JavaScript est au format texte.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript est un langage de programmation l&eacute;ger couramment utilis&eacute; par les d&eacute;veloppeurs web pour ajouter des interactions dynamiques aux pages web, aux applications, aux serveurs et m&ecirc;me aux jeux. Il fonctionne de mani&egrave;re transparente avec HTML et CSS, compl&eacute;tant CSS dans le formatage des &eacute;l&eacute;ments HTML tout en fournissant une interaction avec l&rsquo;utilisateur, une capacit&eacute; [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/qu-est-ce-que-javascript\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":142,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Qu\u2019est-ce que JavaScript ? Introduction de base pour d\u00e9butants","rank_math_description":"D\u00e9couvrez ce qu'est JavaScript et comment il fonctionne. Comparaison avec d'autres langages de d\u00e9veloppement web incluse !","rank_math_focus_keyword":"qu'est ce que javascript","footnotes":""},"categories":[5259],"tags":[5271,5269,5272],"class_list":["post-6110","post","type-post","status-publish","format-standard","hentry","category-glossaire","tag-avantages-javascript","tag-comment-fonctionne-javascript","tag-faiblesses-javascript"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-javascript","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-javascript","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/qu-est-ce-que-javascript","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-javascript-introduccion-basica","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-javascript","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-javascript","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-javascript","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-javascript","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-javascript","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-javascript","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-javascript","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-javascript","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-javascript","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-javascript","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-javascript","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-javascript","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/6110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/142"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=6110"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/6110\/revisions"}],"predecessor-version":[{"id":38306,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/6110\/revisions\/38306"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=6110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=6110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=6110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}