path: root/files/fr/learn/javascript/first_steps/what_is_javascript/index.html

---
title: Qu'est-ce que le JavaScript ?
slug: Learn/JavaScript/First_steps/What_is_JavaScript
translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>

<p>Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier article nous donnons une description générale de JavaScript en présentant le «&nbsp;pourquoi&nbsp;» et le «&nbsp;comment&nbsp;» du JavaScript. L'objectif est que vous compreniez bien son but.</p>

<table>
 <tbody>
  <tr>
   <th scope="row">Prérequis&nbsp;:</th>
   <td>
    <p>Une culture informatique basique et une compréhension élémentaire de HTML et CSS.</p>
   </td>
  </tr>
  <tr>
   <th scope="row">Objectif&nbsp;:</th>
   <td>Se familiariser avec JavaScript, ce qu'il peut faire et comment il s'intègre dans un site web.</td>
  </tr>
 </tbody>
</table>

<h2 id="Une_définition_générale">Une définition générale</h2>

<p>JavaScript est un langage de programmation qui permet d'implémenter des mécanismes complexes sur une page web. À chaque fois qu'une page web fait plus que simplement afficher du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, ou autre, JavaScript a de bonnes chances d'être impliqué. C'est la troisième couche des technologies standards du web, les deux premières (<a href="/fr/docs/Learn/HTML">HTML</a> et <a href="/fr/docs/Learn/CSS">CSS</a>) étant couvertes bien plus en détail dans d'autres tutoriels sur MDN.</p>

<p><img alt="" src="cake.png"></p>

<ul>
 <li>{{glossary("HTML")}} est un langage de balises utilisé pour structurer et donner du sens au contenu web. Par exemple : définir des paragraphes, titres et tables de données ou encore intégrer des images ou des vidéos dans une page.</li>
 <li>{{glossary("CSS")}} est un langage de règles de style utilisé pour mettre en forme le contenu HTML. Par exemple : en modifiant la couleur d'arrière-plan ou les polices, ou en disposant le contenu en plusieurs colonnes.</li>
 <li>{{glossary("JavaScript")}} est un langage de programmation qui permet de créer du contenu mis à jour de façon dynamique, de contrôler le contenu multimédia, d'animer des images, et tout ce à quoi on peut penser. Bon, peut-être pas tout, mais vous pouvez faire bien des choses avec quelques lignes de JavaScript.</li>
</ul>

<p>Les trois couches se superposent naturellement. Prenons pour exemple une simple étiquette texte. Les balises HTML lui donnent une structure et un but&nbsp;:</p>

<pre class="brush: html">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>

<p><img alt="" src="just-html.png"></p>

<p>Nous pouvons ensuite ajouter du CSS pour rendre cela plus joli&nbsp;:</p>

<pre class="brush: css">p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor:pointer;
}</pre>

<p><img alt="" src="html-and-css.png"></p>

<p>Et enfin utiliser JavaScript pour ajouter un comportement dynamique&nbsp;:</p>

<pre class="brush: js">let para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}
</pre>

<p>{{ EmbedLiveSample('Une_définition_générale', '100%', 80) }}</p>

<p>Essayez de cliquer sur l'étiquette texte pour voir ce qui se passe. Notez que vous pouvez également retrouver cet exemple sur GitHub — voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">code source</a>, ou l'<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">exécuter</a>.</p>

<p>JavaScript peut faire bien plus. Voyons cela plus en détail.</p>

<h2 id="Que_peut-il_vraiment_faire">Que peut-il <em>vraiment</em> faire&nbsp;?</h2>

<p>Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de&nbsp;:</p>

<ul>
 <li>stocker des valeurs utiles dans des variables. Dans l'exemple plus haut, nous demandons un nouveau nom à l'utilisateur puis le stockons dans une variable appelée <code>name</code>.</li>
 <li>faire des opérations sur des morceaux de texte (appelés en programmation «&nbsp;chaînes de caractères&nbsp;» ou «&nbsp;strings&nbsp;» en anglais). Dans l'exemple plus haut, nous prenons la chaîne de caractères "Player 1: " et lui adjoignons la variable <code>name</code> pour créer l'étiquette ''Player 1: Chris".</li>
 <li>exécuter du code en réponse à certains événements se produisant sur une page web. Dans l'exemple, nous avons utilisé un événement («&nbsp;event&nbsp;») {{Event("click")}} pour détecter quand l'utilisateur clique sur le bouton ; on exécute alors le code qui met à jour l'étiquette.</li>
 <li>Et bien plus encore&nbsp;!</li>
</ul>

<p>Là où ça devient excitant, c'est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les «&nbsp;interfaces de programmation applicatives&nbsp;» (API pour «&nbsp;Application Programming Interfaces&nbsp;») donnent accès à des fonctionnalités presqu'illimitées dans votre code JavaScript.</p>

<p>Les API sont des blocs de code déjà prêts qui permettent à un développeur d'implémenter des programmes qui seraient difficiles voire impossibles à implémenter sans elles. C'est comme du code "en kit" pour la programmation, très pratiques à assembler et à combiner. Les API sont au code ce que les meubles en kits sont aux fournitures de maison — il est beaucoup plus facile de prendre des panneaux prêts à l'emploi et de les visser ensemble pour faire une étagère que de travailler vous-même sur le design, d'aller chercher le bon bois, de couper tous les panneaux à la bonne taille et la bonne forme, de trouver les vis de la bonne taille, puis les assembler pour faire une étagère.</p>

<p>Elles se divisent généralement en deux catégories&nbsp;:</p>

<p><img alt="" src="browser.png"></p>

<p><strong>Les API de navigateur</strong> font partie intégrante de votre navigateur web, et peuvent accéder à des données de l'environnement informatique (l'ordinateur), ou faire d'autres choses complexes. Par exemple&nbsp;:</p>

<ul>
 <li>l'<a href="/fr/docs/Web/API/Document_Object_Model">API DOM (Document Object Model)</a> permet de manipuler du HTML et du CSS&nbsp;(créer, supprimer et modifier du HTML, appliquer de nouveaux styles à la page de façon dynamique, etc.). Chaque fois que vous voyez une fenêtre popup sur une page ou du nouveau contenu apparaître (comme dans notre démonstration plus haut), il s'agit d'une action du DOM.</li>
 <li>l'<a href="/fr/docs/Web/API/Geolocation">API de géolocalisation</a> récupère des informations géographiques. C'est ainsi que <a href="https://www.google.com/maps">Google Maps</a> peut trouver votre position et la situer sur une carte.</li>
 <li>les API <a href="/fr/docs/Web/API/Canvas_API">Canvas</a> et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> permettent de créer des animations 2D et 3D. On fait des choses incroyables avec ces technologies, voyez <a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> et <a href="https://webglsamples.org/">webglsamples</a>.</li>
 <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">les API Audio et Video</a>, comme {{domxref("HTMLMediaElement")}} et <a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a> permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo </a>pour vous faire une idée).</li>
</ul>

<div class="note">
<p><strong>Note :</strong> Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs.</p>
</div>

<p>Les<strong> APIs tierces</strong> ne font par défaut pas partie de votre navigateur, et vous devrez en général récupérer le code et les informations les concernant quelque part sur le web. Par exemple&nbsp;:</p>

<ul>
 <li>l'<a href="https://dev.twitter.com/overview/documentation">API Twitter</a> vous permet par exemple d'afficher vos derniers tweets sur votre site.</li>
 <li>l'<a href="https://developers.google.com/maps/">API Google Maps</a> permet d'intégrer à votre site des cartes personnalisées et d'autres fonctionnalités de ce type.</li>
</ul>

<div class="note">
<p><strong>Note :</strong> ces APIs sont d'un niveau avancé et nous ne couvrirons aucune d'entre elles dans ce cours, mais les liens ci-dessus fournissent une large documentation si vous voulez en savoir davantage.</p>
</div>

<p>Et il y a bien plus encore&nbsp;! Pas de précipitation cependant. Vous ne serez pas en mesure de créer le nouveau Facebook, Google Maps ou Instagram après une journée de travail sur JavaScript, il y a d'abord beaucoup de bases à assimiler. Et c'est pourquoi vous êtes ici. Allons-y&nbsp;!</p>

<h2 id="Que_fait_JavaScript_sur_votre_page">Que fait JavaScript sur votre page&nbsp;?</h2>

<p>Ici nous allons commencer à réellement nous intéresser au code, et, ce faisant, à explorer ce qui se passe quand vous exécutez du JavaScript dans votre page.</p>

<p>Commençons par un bref récapitulatif de ce qui se passe lorsqu'une page web se charge dans le navigateur (voir <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#Comment_fonctionnent_vraiment_les_CSS">Comment fonctionnent vraiment les CSS</a>). Quand la page se charge, les codes HTML, CSS et JavaScript s'exécutent dans un environnement (l'onglet du navigateur). C'est un peu comme une usine qui prend des matières premières (le code) et sort un produit (la page web).</p>

<p><img alt="" src="execution.png"></p>

<p>Le JavaScript est exécuté par le moteur JavaScript du navigateur, après que le HTML et le CSS ont été assemblés et combinés en une page web. Cet enchaînement est nécessaire pour être sûr que la structure et le style de la page sont déjà en place quand le JavaScript commence son exécution.</p>

<p>C'est une bonne chose, étant donné qu'un usage fréquent de JavaScript est de modifier dynamiquement le HTML et le CSS pour mettre à jour l'interface utilisateur, via l'API DOM comme évoqué plus tôt. Charger le JavaScript et essayer de l'exécuter avant que le HTML et le CSS ne soient en place mènerait à des erreurs.</p>

<h3 id="Sécurité_du_navigateur">Sécurité du navigateur</h3>

<p>Chaque onglet du navigateur constitue un périmètre séparé dans lequel s'exécute le code (en termes techniques ces périmètres sont des «&nbsp;environnements d'exécution&nbsp;») ce qui signifie que, dans la plupart des cas, le code de chaque onglet est exécuté complètement séparément, et le code d'un onglet ne peut affecter directement le code d'un autre onglet ou d'un autre site. C'est une bonne mesure de sécurité. Si ce n'était pas le cas, des pirates pourraient par exemple écrire du code pour voler des informations sur d'autres sites web.</p>

<div class="note">
<p><strong>Note :</strong> il existe des moyens d'envoyer du code et des données entre différents sites/onglets de façon sécurisée, mais ce sont des techniques avancées que ne nous couvrirons pas dans ce cours.</p>
</div>

<h3 id="Ordre_d'exécution_du_JavaScript">Ordre d'exécution du JavaScript</h3>

<p>Quand le navigateur rencontre un bloc de JavaScript, il l'exécute généralement dans l'ordre, de haut en bas. Vous devrez donc faire attention à l'ordre dans lequel vous écrivez les choses. Reprenons le bloc de JavaScript vu dans notre premier exemple&nbsp;:</p>

<pre class="brush: js">let para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}</pre>

<p>Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un «&nbsp;gestionnaire d'évènement&nbsp;» &nbsp;(<i lang="en">event listener</i>)&nbsp; ligne 3, pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de code <code>updateName()</code> (lignes 5-8) s'exécute. Le bloc de code <code>updateName()</code> (ces blocs de code réutilisables sont appelés «&nbsp;fonctions&nbsp;») demande à l'utilisateur un nouveau nom, et l'insère dans le paragraphe pour mettre à jour l'affichage.</p>

<p>Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus, vous obtiendriez une erreur dans la console développeur du navigateur&nbsp;: <code>TypeError: para is undefined</code>. Cela signifie que l'objet <code>para</code> n'existe pas encore, donc nous ne pouvons pas y ajouter de gestionnaire d'évènement.</p>

<div class="note">
<p><strong>Note :</strong> c'est une erreur très fréquente. Il faut veiller à ce que les objets référencés dans votre code existent avant d'essayer de les utiliser.</p>
</div>

<h3 id="Code_interprété_contre_code_compilé">Code interprété contre code compilé</h3>

<p>En informatique, on parle de code <strong>interprété</strong> ou <strong>compilé</strong>. JavaScript est un langage interprété : le code est exécuté de haut en bas et le résultat du code exécuté est envoyé immédiatement. Vous n'avez pas à transformer le code en une autre forme avant que le navigateur ne l'exécute.</p>

<p>Les langages compilés quant à eux sont transformés (compilés) en une autre forme avant d'être exécutés par l'ordinateur. Par exemple le C et le C++ sont compilés en langage assembleur qui est ensuite exécuté par l'ordinateur.</p>

<p>Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instant.</p>

<h3 id="Code_côté_client_contre_côté_serveur">Code côté client contre côté serveur</h3>

<p>Vous pouvez aussi rencontrer les termes de code <strong>côté serveur</strong> et <strong>côté client</strong>, notamment dans le contexte du développement web. Le code <strong>côté client</strong> est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de <strong>JavaScript côté client</strong>.</p>

<p>Le code <strong>côté serveur</strong> quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript&nbsp;! JavaScript peut aussi s'utiliser comme un langage <strong>côté serveur</strong>, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article<a href="/fr/docs/Learn/Server-side"> Programmation de Sites Web côté serveur</a>.</p>

<h3 id="Code_dynamique_contre_code_statique">Code dynamique contre code statique</h3>

<p>Le mot <strong>dynamique</strong> est utilisé tant pour qualifier le JavaScript côté client que les langages côté serveur. Il se réfère à la capacité de mettre à jour l'affichage d'une page/application web pour montrer des choses différentes en des circonstances différentes, en générant un nouveau contenu quand nécessaire. Le code côté serveur génère dynamiquement du nouveau contenu sur le serveur, par exemple en lisant une base de données, tandis que le JavaScript côté client peut générer dynamiquement un contenu nouveau dans le navigateur, par exemple en créant une nouvelle table HTML, en y insérant les données demandées au serveur, puis en affichant la table dans une page web. Selon le contexte, le terme <em>dynamique</em> prend un sens un peu différent, mais les deux sont très liés, et les deux approches (côté serveur et client) vont souvent de pair.</p>

<p>Une page web sans contenu mis à jour dynamiquement est appelé <strong>statique</strong> : elle montre simplement toujours le même contenu.</p>

<h2 id="Comment_ajouter_du_JavaScript_à_votre_page">Comment ajouter du JavaScript à votre page&nbsp;?</h2>

<p>Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les éléments {{htmlelement("link")}} permettent d'appliquer des feuilles de style externes au HTML alors que les feuilles de style internes utilisent les éléments {{htmlelement("style")}}. Pour ajouter du JavaScript à un document HTML, il n'y a qu'une seule façon&nbsp;: avec l'élément {{htmlelement("script")}}. Voyons cela sur un exemple.</p>

<h3 id="JavaScript_interne">JavaScript interne</h3>

<ol>
 <li>Faites d'abord une copie locale de notre fichier d'exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Enregistrez-le dans un répertoire approprié.</li>
 <li>Ouvrez le fichier dans votre navigateur web et dans un éditeur de texte. Vous verrez que le HTML crée une page web simple contenant un bouton cliquable.</li>
 <li>Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste avant la balise fermante <code>&lt;/head&gt;</code>&nbsp;:
  <pre class="brush: html">&lt;script&gt;

  // JavaScript goes here

&lt;/script&gt;</pre>
 </li>
 <li>Ajoutons maintenant du JavaScript dans notre élément {{htmlelement("script")}} pour rendre la page plus dynamique. Ajoutez le code suivant juste en dessous de la ligne "// JavaScript goes here"&nbsp;:
  <pre class="brush: js">  document.addEventListener("DOMContentLoaded", function() {
  function createParagraph() {
    let para = document.createElement('p');
    para.textContent = 'Vous avez cliqué sur le bouton!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for(let i = 0; i &lt; buttons.length ; i++) {
    buttons[i].addEventListener('click', createParagraph);
  }
});</pre>
 </li>
 <li>Enregistrez le fichier et actualisez le navigateur. Vous pouvez maintenant voir que, lorsque vous cliquez sur le bouton, un nouveau paragraphe est généré et placé en dessous.</li>
</ol>

<div class="note">
<p><strong>Note :</strong> si l'exemple ne semble pas marcher, reprenez pas à pas chaque étape. Avez-vous bien enregistré le code de départ comme un fichier <code>.html</code>&nbsp;? Avez-vous bien ajouté l'élément {{htmlelement("script")}} juste après la balise <code>&lt;/head&gt;</code>&nbsp;? Avez-vous collé le bon code JavaScript au bon endroit&nbsp;? <strong>JavaScript est sensible à la casse, et assez tatillon, il faut donc respecter scrupuleusement la syntaxe indiquée, sans quoi il peut ne pas fonctionner.</strong></p>
</div>

<div class="note">
<p><strong>Note :</strong> vous pouvez voir cette version sur GitHub avec <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">et aussi en live</a>).</p>
</div>

<h3 id="JavaScript_externe">JavaScript externe</h3>

<p>Ça marche très bien, mais si nous voulons mettre notre JavaScript dans un fichier externe&nbsp;? Voyons cela.</p>

<ol>
 <li>Créez d'abord un nouveau fichier dans le même répertoire que votre fichier HTML. Nommez-le <code>script.js</code> (vérifiez qu'il a bien l'extension de fichier .js, c'est ainsi qu'il est identifié comme fichier JavaScript).</li>
 <li>Ensuite, copiez-collez tout le script contenu dans l'élément {{htmlelement("script")}} vers le fichier .js, et enregistrez le fichier.</li>
 <li>À présent remplacez l'élément {{htmlelement("script")}} par&nbsp;:
  <pre class="brush: html">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
 </li>
 <li>Enregistrez et rechargez la page dans votre navigateur, et vous devriez voir la même chose qu'avant. C'est la même chose, mais nous avons maintenant le JavaScript dans un fichier externe. C'est une bonne chose en général pour organiser le code et le rendre réutilisable pour plusieurs fichiers HTML. Cela rend aussi le code HTML plus lisible en évitant d'y inclure de gros blocs de JavaScript.</li>
</ol>

<p><strong>Note :</strong> vous pouvez voir cette version sur GitHub avec <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">ainsi qu'en live</a>).</p>

<h3 id="Handlers_JavaScript_en_ligne">Handlers JavaScript en ligne</h3>

<p>Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça&nbsp;:</p>

<pre class="brush: js example-bad">function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'Vous avez cliqué !';
  document.body.appendChild(para);
}</pre>

<pre class="brush: html example-bad">&lt;button onclick="createParagraph()"&gt;Cliquez-moi!&lt;/button&gt;</pre>

<p>Vous pouvez essayer cette version dans la démonstration ci-dessous.</p>

<p>{{ EmbedLiveSample('Handlers_JavaScript_en_ligne', '100%', 150) }}</p>

<p>Cet exemple a exactement le même comportement que ceux des deux sections précédentes, sauf que l'élément {{htmlelement("button")}} a un handler <code>onclick</code> en ligne pour déclencher l'exécution de la fonction à la pression du bouton.</p>

<p><strong>Évitez cependant de faire cela.</strong> C'est une mauvaise habitude de polluer le HTML avec du JavaScript, en plus d'être inefficace. Dans cette méthode, on doit inclure l'attribut <code>onclick="createParagraph()"</code> sur chaque bouton où le JavaScript doit s'appliquer.</p>

<h3 id="En_JavaScript_pur">En JavaScript pur</h3>

<p>Une construction en JavaScript pur permet de sélectionner tous les boutons avec une instruction. Dans l'exemple précédent c'est cette partie qui s'en charge&nbsp;:</p>

<pre class="brush: js">let buttons = document.querySelectorAll('button');

for(let i = 0; i &lt; buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}</pre>

<p>Cela peut sembler un peu plus long que l'attribut <code>onclick</code>, mais cela fonctionnera pour tous les boutons peu importe leur nombre sur la page, et peu importe si des boutons sont ajoutés ou retirés, le code JavaScript n'aura pas besoin d'être modifié.</p>

<div class="note">
<p><strong>Note :</strong> essayez de modifier votre version de <code>apply-javascript.html</code> et d'y ajouter quelques boutons dans le fichier. En actualisant la page, tous les boutons devraient créer un paragraphe quand ils sont cliqués.&nbsp;Pas mal, non&nbsp;?</p>
</div>

<h3 id="Stratégies_de_chargement_de_script">Stratégies de chargement de script</h3>

<p>Le chargement des scripts au bon moment pose un certain nombre de problèmes. Rien n'est aussi simple qu'il y paraît ! Un problème courant est que le code HTML d'une page se charge en suivant l'ordre d'apparition dans le code source. Si vous utilisez JavaScript pour manipuler des éléments sur la page (plus précisément, le <a href="/fr/docs/Web/API/Document_Object_Model">DOM</a>), votre code ne fonctionnera pas si le JavaScript est chargé et analysé avant le code HTML sur lequel vous voulez opérer.</p>

<p>Dans les exemples de code interne et externe ci-dessus, le JavaScript est chargé et exécuté dans l'en-tête du document, avant que le corps soit analysé. Cela peut causer une erreur, donc nous avons utilisé des structures pour le contourner.</p>

<p>Dans l'exemple interne, vous pouvez voir cette structure autour du code :</p>

<pre class="brush: js">
document.addEventListener("DOMContentLoaded", function() {
  ...
});</pre>

<p>Il s'agit d'un gestionnaire d'évènement associé à l'événement <code>DOMContentLoaded</code> du navigateur, cet événement est déclenché quand le <code>body</code> HTML est complètement chargé et analysé. Le code JavaScript à l'intérieur du bloc est exécuté après le déclenchement de <code>DOMContentLoaded</code>. Par conséquent, l'erreur est évitée (vous en apprendrez plus sur les <a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">événements</a> plus tard dans le cours).</p>

<p>Dans l'exemple externe, nous utilisons une fonctionnalité JavaScript plus moderne pour résoudre le problème, l'attribut <code>async</code>, qui indique au navigateur de continuer à télécharger le contenu HTML une fois que l'élément de balise {{htmlelement("script")}} a été atteint.</p>

<pre class="brush: js">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>

<p>Dans ce cas, le script et le code HTML se chargeront simultanément et le code fonctionnera.</p>

<div class="note">
<p><strong>Note :</strong> Dans le cas externe, nous n'avions pas besoin d'utiliser l'événement <code>DOMContentLoaded</code>, car l'attribut <code>async</code> a résolu le problème pour nous. Nous n'avons pas utilisé la solution <code>async</code> pour l'exemple JavaScript interne, car elle ne fonctionne que pour les scripts externes.</p>
</div>

<p>Auparavant, une solution à ce problème consistait à placer votre élément de script juste au bas du corps (par exemple, juste avant la balise), afin qu'il soit chargé après que tout le code HTML a été analysé. Le problème de cette solution (et de la solution <code>DOMContentLoaded</code> vue ci-dessus) est que le chargement et l'analyse du script sont complètements bloqués jusqu'à ce que le DOM HTML soit chargé. Sur des sites plus importants avec beaucoup de JavaScript, cela peut entraîner un problème de performances majeur, ce qui ralentit votre site. C'est pourquoi <code>async</code> a été ajouté aux navigateurs !</p>

<h4 id="async_et_defer">async et defer</h4>

<p>En fait, il existe deux façons de contourner le problème du script de blocage : <code>async</code> et <code>defer</code>. Regardons la différence entre les deux.</p>

<p>Les scripts asynchrones téléchargeront le script sans bloquer le rendu de la page et l'exécuteront dès que le téléchargement du script sera terminé. Vous n'obtenez aucune garantie que les scripts s'exécutent dans un ordre spécifique, mais seulement qu'ils n'empêcheront pas le reste de la page de s'afficher. Il est préférable d'utiliser <code>async</code> lorsque les scripts de la page s'exécutent indépendamment les uns des autres et ne dépendent d'aucun autre script de la page.</p>

<img src="async-defer.jpg" alt="async vs defer" >

<p>Image de <a href="https://html.spec.whatwg.org/images/asyncdefer.svg" target="_blank" >la spécification HTML</a>, copiée et rognée selon les termes de la licence <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>.
</p>

<p>Par exemple, si vous avez les éléments de script suivants :</p>

<pre class="brush: html">&lt;script async src="js/vendor/jquery.js"&gt;&lt;/script&gt;

&lt;script async src="js/script2.js"&gt;&lt;/script&gt;

&lt;script async src="js/script3.js"&gt;&lt;/script&gt;</pre>

<p>Vous ne pouvez pas compter sur l'ordre dans lequel les scripts seront chargés. <code>Jquery.js</code> peut être chargé avant ou après <code>script2.js</code> et <code>script3.js</code>. Si tel est le cas, toute fonction de ces scripts dépendant de <code>jquery</code> générera une erreur, car <code>jquery</code> ne sera pas défini au moment de l'exécution du script.</p>

<p><code>defer</code> exécute les scripts dans l'ordre dans lequel ils apparaissent dans la page et les exécute dès que le script et le contenu sont téléchargés :</p>

<pre class="brush: html">&lt;script defer src="js/vendor/jquery.js"&gt;&lt;/script&gt;

&lt;script defer src="js/script2.js"&gt;&lt;/script&gt;

&lt;script defer src="js/script3.js"&gt;&lt;/script&gt;</pre>

<p>Tous les scripts dotés de l'attribut de <code>defer</code> seront chargés dans l'ordre dans lequel ils apparaissent sur la page. Ainsi, dans le deuxième exemple, nous pouvons être sûrs que <code>jquery.js</code> se chargera avant <code>script2.js</code> et <code>script3.js</code> et que <code>script2.js</code> se chargera avant <code>script3.js</code>.</p>

<p>Pour résumer :</p>

<ul>
 <li>Si vos scripts n'ont pas besoin d'attendre l'analyse et peuvent s'exécuter indépendamment sans dépendances, utilisez <code>async</code>.</li>
 <li>Si vos scripts doivent attendre l'analyse et dépendent d'autres scripts, chargez-les à l'aide de <code>defer</code> et placez leurs éléments {{htmlelement("script")}} correspondants dans l'ordre dans lequel vous souhaitez que le navigateur les exécute.</li>
</ul>

<h2 id="Commentaires">Commentaires</h2>

<p>Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le code JavaScript qui seront ignorés par le navigateur. Ils ne sont là que pour apporter des précisions aux autres développeurs sur le fonctionnement du code (et vous-même, si vous reprenez votre code après six mois sans pouvoir vous rappeler ce que vous avez fait). Les commentaires sont très utiles, et vous devriez les utiliser fréquemment, surtout pour des applications de grande taille. Il y en a deux types&nbsp;:</p>

<ul>
 <li>Un commentaire sur une ligne s'écrit après un double slash, par exemple&nbsp;:
  <pre class="brush: js">// Ceci est un commentaire</pre>
 </li>
 <li>Un commentaire sur plusieurs lignes s'écrit entre deux balises /* et */, par exemple&nbsp;:
  <pre class="brush: js">/*
  Ceci est un commentaire
  sur deux lignes
*/</pre>
 </li>
</ul>

<p>Ainsi, vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière&nbsp;:</p>

<pre class="brush: js">// Fonction: créer un nouveau paragraphe et l'ajouter en bas du HTML

function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

/*
  1. Regrouper les coordonnées de tous les boutons de la page et les organiser en tableau
  2. Faire une boucle dans ce tableau et ajouter un "click event listener" à chaque bouton

  Quand le bouton est cliqué, la fonction "createParagraph()" sera exécutée
*/

let buttons = document.querySelectorAll('button');

for(let i = 0; i &lt; buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}</pre>

<h2 id="Résumé">Résumé</h2>

<p>Et voilà votre premier pas dans le monde du JavaScript. Nous avons commencé par la théorie seule, pour vous habituer aux raisons d'utiliser JavaScript, et à ses possibilités. Vous avez pu voir quelques exemples de code et appris comment JavaScript s'intègre avec le reste du code sur votre site web, entre autres choses.</p>

<p>Le JavaScript peut sembler un peu impressionnant pour l'instant, mais pas d'inquiétude, ce cours progressera pas à pas. Dans le prochain article <a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">Notre premier code JavaScript,</a> nous entrons au cœur du sujet et vous réaliserez vos propres exemples de JavaScript.</p>

<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>


<h2 id="In_this_module">Dans ce module</h2>

<ul>
 <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Qu'est-ce que JavaScript&nbsp;?</a></li>
 <li><a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">Un premier code JavaScript</a></li>
 <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">Quel est le souci&nbsp;? Analyser un problème avec JavaScript</a></li>
 <li><a href="/fr/docs/Learn/JavaScript/First_steps/Variables">Stocker les informations nécessaires&nbsp;: les variables</a></li>
 <li><a href="/fr/docs/Learn/JavaScript/First_steps/Math">Opérations mathématiques de base en JavaScript&nbsp;: les nombres et les opérateurs</a></li>
 <li><a href="/fr/docs/Learn/JavaScript/First_steps/Strings">Gérer le texte&nbsp;: les chaînes de caractères en JavaScript</a></li>
 <li><a href="/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods">Les méthodes utiles pour les chaînes de caractères</a></li>
 <li><a href="/fr/docs/Learn/JavaScript/First_steps/Arrays">Les tableaux <i lang="en">(arrays)</i></a></li>
 <li><a href="/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator">Évaluation&nbsp;: Générateur d'histoires aléatoires</a></li>
</ul>