Qu’est-ce que le JavaScript?

Bienvenue dans le cours de JavaScript pour débutants du MDN. Dans ce premier article nous ferons une description générale de Javascript, en abordant le « pourquoi » et le « comment » du JavaScript et en s’assurant que vous cerniez bien son but.

Une définition générale

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, etc. — JavaScript a de bonnes chances d’être impliqué. C’est la troisième couche des technologies standards du web, les deux premières (HTML et CSS) étant couvertes bien plus en détail dans d’autres parties de la Learning Area.

• HTML est un langage de balisage utilisé pour structurer et donner sens au contenu web, par exemple définir des paragraphes, entêtes et table de données ou encore intégrer des images ou des vidéos dans la page.
• CSS est un langage de règles de style utilisé pour applquer un style au contenu HTML, par exemple en modifiant la couleur d’arrière-plan ou les polices, ou en disposant le contenu en plusieurs colonnes.
• 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, à peu près tout. Bon, peut-être pas tout, mais vous pouvez faire bien des choses avec quelques lignes de JavaScript.

Les trois couches viennent s’empiler naturellement. Prenons pour exemple une simple étiquette texte . Nous pouvons le baliser en HTML pour définir sa structure et son but :

<p>Player 1: Chris</p>

Nous pouvons ensuite ajouter du CSS pour rendre ça plus joli :

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;
}

Et enfin utiliser JavaScript pour ajouter un comportement dynamique :

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

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 code source, ou l’exécuter.

JavaScript peut faire bien plus — voyons cela plus en détail.

Que peut-il vraiment faire ?

Le cœur de JavaScript est constitué de fonctionnalités communes de programmation, permettant de :

• 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 appellée name.
• Faire des opérations sur des bouts de texte (appelés en programmation « chaînes de caractères » ou « strings »). Dans l’exemple plus haut, nous prenons la chaîne de caractères "Player 1: " et lui adjoinions la variable name pour créer l’étiquette texte complète ''Player 1: Chris".
• Exécuter du code en réponse à certains évènements se produisant sur une page web. Nous avons utilisé un évènement (« event ») click dans l’exemple plus haut pour détecter quand l’utilisateur clique sur le bouton et alors exécuter le code qui met à jour l’étiquette texte.
• Et bien plus encore !

Là où ça devient excitant, c’est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les « interfaces de programmation applicatives » (APIs pour « Application Programming Interfaces ») donnent accès à des quasi-superpouvoirs dans votre code JavaScript. Elles se divisent généralement en deux catégories :

Les APIs de navigateur font partie intégrante de votre navigateur web, et peuvent accéder à des données de l’environnement informatique (l’ordinateur), ou autres choses complexes. Par exemple :

• L’API DOM (Document Object Model) permet de manipuler du HTML et du CSS — 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 de l’action du DOM.
• L’API de géolocalisation récupère des informations géographiques. C’est ainsi que Google Maps peut trouver votre position et la situer sur une carte.
• Les APIs Canvas et WebGL permettent de créer des animations 2D et 3D. On fait des choses incroyables avec ces technologies — voyez Chrome Experiments et webglsamples.
• Les APis Audio et Video, comme HTMLMediaElement et WebRTC 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 Snapshot demo pour vous faire une idée).

Les APIs tierces 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 :

• L’API Twitter vous permet de faire des choses telles qu’afficher vos derniers tweets sur votre site.
• L’API Google Maps vous permet d’intégrer à votre site des cartes personnalisées, et d’autres fonctionnalités de ce type.

Et il y a encore bien plus ! 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 à apprendre le JavaScript — il y a d’abord beaucoup de bases à couvrir. Et c’est pourquoi vous êtes ici — allons-y !

Que fait JavaScript sur votre page ?

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.

Un bref récapitulatif de ce qui se passe lorsque vous chargez une page web dans un navigateur (évoqué pour la première fois dans notre article How CSS works). Quand vous chargez une page, vous exécutez votre code (HTML, CSS et JavaScript) dans un environnement d’exécution (l’onglet de navigateur). C’est un peu comme une usine qui prend des matières premières (le code) et sort un produit (la page web).

Le JavaScript est exécuté par le moteur JavaScript du navigateur, après que le HTML et le CSS aient été assemblés et combinés en une page web. Il est ainsi sûr que la structure et le style de la page seront déjà en place quand le JavaScript commencera son exécution.

C’est une bonne chose, étant donné qu’un usage fréquent de JavaScript est de modifier dynamiquement du HTML et du 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 soient là mènerait à des erreurs.

Sécurité du navigateur

Chaque onglet du navigateur est son propre « seau » séparé dans lequel s’exécute le code (en termes techniques ces seaux sont des « environnements d’exécution ») — cela 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 alors écrire du code pour voler des informations sur d’autres sites web, entre autres problèmes.

Ordre d’exécution du JavaScript

Quand le navigateur tombe sur 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 :

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un « event listener » ligne 3, pour que lors d’un clic sur le paragraphe le bloc de code updateName() (lignes 5-8) s’exécute. Le bloc de code updateName() (ces blocs de code réutilisables sont appelés « fonctions ») demande à l’utilisateur un nouveau nom, et l’insère dans le paragraphe pour mettre à jour l’affichage.

Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus — vous obtiendrez une erreur dans la console développeur du navigateur : TypeError: para is undefined. Cela signifie que l’objet para n’existe pas encore, donc nous ne pouvons pas y ajouter d’event listener.

Code interprété et code compilé

Il est possible de rencontrer les termes interprété et compilé dans un contexte informatique. 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.

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.

Chaque approche à ses avantages, ce que nous ne développerons pas pour l’instant.

Code côté client et côté serveur

Vous pouvez aussi rencontrer les termes de code côté serveur et côté client, notamment dans le contexte du développement web. Le code côté client 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 JavaScript côté client.

Le code côté serveur 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 ! JavaScript peut aussi s’utiliser comme un langage côté serveur, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre sujet Dynamic Websites – Server-side programming.

Le mot dynamique 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 le 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 génère dynamiquement du nouveau contenu dans le navigateur chez le client, par exemple en créant une nouvelle table HTML, en insérant les données demandées au serveur dedans, puis en affichant la table dans une page web montrée à l’utilisateur. Les sens sont un peu différents dans les deux contextes, mais liés, et les deux approches (côté serveur et client) vont souvent de pair.

Une page web sans contenu mis à jour dynamiquement est appelé statique — elle montre simplement toujours le même contenu..

Comment ajouter du JavaScript à votre page ?

Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Alors que le CSS utilise des éléments <link>  pour appliquer des feuilles de style internes au HTML, le JavaScript n’a besoin que d’un ami dans le monde du HTML — l’élément <script>. Voyons comment il fonctionne.

JavaScript interne

1. Faites d’abord une copie locale de notre fichier d’exemple apply-javascript.html. Enregistrez-le dans un répertoire qui va bien.
2. 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.
3. Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste après la balise fermante </body> :

   <script>
   
     // JavaScript goes here
   
   </script>

4. Ajoutons maintenant du JavaScript dans notre élément <script> pour rendre la page plus dynamique — ajoutez le code suivant juste en-dessous de la ligne "// JavaScript goes here" :

   function createParagraph() {
     var para = document.createElement('p');
     para.textContent = 'You clicked the button!';
     document.body.appendChild(para);
   }
   
   var buttons = document.querySelectorAll('button');
   
   for(var i = 0; i < buttons.length ; i++) {
     buttons[i].addEventListener('click', createParagraph);
   }

5. 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.

JavaScript externe

Ça marche impec’, mais si nous voulons mettre notre JavaScript dans un fichier externe ? Voyons cela.

1. Créez d’abord un nouveau fichier dans le même répertoire que votre fichier HTML. Nommez-le script.js — vérifiez qu’il a bien l’extension de fichier .js, c’est ainsi qu’il est identifié comme fichier JavaScript.
2. Ensuite, copiez-collez tout le script contenu dans l’élément <script> vers le fichier .js, et enregistrez le fichier.
3. À présent remplacez l’élément <script> par :

   <script src="script.js"></script>

4. 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.

Note : vous pouvez voir cette version sur GitHub avec apply-javascript-external.html et script.js (ainsi qu’en  live).

Inline JavaScript handlers

Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça :

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

<button onclick="createParagraph()">Click me!</button>

Vous pouvez cette version dans notre démonstration ci-dessous.

Cet exemple a exactement le même comportement que ceux des deux sections précédentes, sauf que l’élément <button> a un handler onclick en ligne déclencher l’exécution de la fonction à la pression du bouton.

Évitez cependant de faire ça. C’est une mauvaise habitude de polluer le HTML avec du JavaScript, en plus d’être inefficace — vous devriez inclure l’attribut onclick="createParagraph()" sur chaque bouton où vous voudriez que le JavaScript s’applique.

Une construction en JavaScript pur permet de sélectionner tous les boutons avec une instruction. Le code utilisé plus tôt à cette fin ressemble à ça :

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

for(var i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

Cela peut sembler un peu plus long que l’attribut onclick, 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é.

Commentaires

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, et existent simplement 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 :

• Un commentaire sur une ligne s’écrit après un double slash, par exemple :

  // Ceci est un commentaire

• Un commentaire sur plusieurs lignes s’écrit entre deux balises /* et */, par exemple :

  /*
    Ceci est un commentaire
    sur deux lignes
  */

Ainsi vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière :

// Function: creates a new paragraph and append it to the bottom of the HTML body.

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

/*
  1. Get references to all the buttons on the page and soter them in an array.
  2. Loop through all the buttons and add a click event listener to each one.

  When any button is pressed, the createParagraph() function will be run.
*/

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

for(var i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

Sommaire

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.

Le JavaScript peut sembler un peu impressionnant pour l’instant, mais pas d’inquiétude — ce cours vous mènera pas-à-pas. Dans le prochain article plunge straight into the practical, nous entrons au cœur du sujet et vous réaliserez vos propres exemples de JavaScript.