Les bases de JavaScript

JavaScript (« JS » en abrégé) est un langage de programmation dynamique complet qui, appliqué à un document HTML, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation.

JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore !

JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a :

• des Interfaces de Programmation d'Applications pour navigateurs (API) — API intégrées aux navigateurs web permettant de créer dynamiquement du HTML, de définir des styles de CSS, de collecter et manipuler un flux vidéo depuis la webcam de l'utilisateur ou de créer des graphiques 3D et des échantillonnages audio.
• des API tierces‑parties permettant aux développeurs d'incorporer dans leurs sites des fonctionnalités issues d'autres fournisseurs de contenu, comme Twitter ou Facebook.
• des modèles et bibliothèques tierces‑parties applicables à votre HTML permettant de mettre en œuvre rapidement des sites et des applications.

Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre centre d'apprentissage JavaScript, et le reste du MDN.

Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous !

Le paragraphe précédent laisse entrevoir quelque chose de passionnant, et cela l'est vraiment — JavaScript est une technologie web parmi les plus dynamiques. Une fois que vous commencerez à être autonome en JavaScript, vous entrerez dans une nouvelle dimension de puissance et créativité.

Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world ! » (la norme en matière d'exemples de programmation de base).

1. Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé « scripts » (sans guillemets). Ensuite, dans le nouveau dossier scripts que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts.

2. Ensuite, dans votre fichier index.html, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante </body> :

   html

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

3. Cet élément a le même rôle que l'élément <link> pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page).

4. Maintenant ajoutez le code suivant dans main.js :

   js

   let myHeading = document.querySelector("h1");
   myHeading.textContent = "Bonjour, monde !";
   

5. Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez index.html dans votre navigateur. Vous devriez obtenir quelque chose comme :

Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée querySelector() pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée myHeading. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner.

Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété textContent de la variable myHeading (elle représente le contenu du titre).

Nous allons explorer les fonctionnalités de base de JavaScript pour que vous puissiez mieux comprendre comment il fonctionne. Ces fonctionnalités sont communes à la plupart des langages de programmation, si vous comprenez ces éléments en JavaScript, vous êtes en bonne voie de pouvoir programmer à peu près n'importe quoi !

Les variables sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé let en le faisant suivre de son nom :

let myVariable;

Une fois une variable déclarée, vous pouvez lui donner une valeur :

myVariable = "Bob";

Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez :

let myVariable = "Bob";

Vous retrouvez la valeur en appelant simplement la variable par son nom :

myVariable;

Une fois qu'on a donné une valeur à une variable, on peut la changer plus loin :

let myVariable = "Bob";
myVariable = "Étienne";

Notez que les variables peuvent contenir des types différents de données :

Pourquoi a-t-on besoin de variables ? Et bien parce qu'elles sont essentielles à la programmation. Si les valeurs ne pouvaient pas changer, on ne pourrait rien faire de dynamique, comme personnaliser un message de bienvenue ou changer l'image affichée dans une galerie.

Il est possible d'intégrer des commentaires dans du code JavaScript, de la même manière que dans les CSS :

/*
Tout ce qui est écrit ici est entre commentaires.
*/

Si votre commentaire tient sur une ligne, vous pouvez utiliser deux barres obliques pour indiquer un commentaire :

// Voici un commentaire

Un opérateur est un symbole mathématique qui produit un résultat en fonction de deux valeurs (ou variables). Le tableau suivant liste certains des opérateurs les plus simples ainsi que des exemples que vous pouvez tester dans votre console JavaScript.

Il y a nombre d'autres opérateurs à explorer, mais nous nous en tiendrons à ceux-là pour le moment. Voir Expressions et opérateurs pour la liste complète.

Les structures conditionnelles sont des éléments du code qui permettent de tester si une expression est vraie ou non et d'exécuter des instructions différentes selon le résultat. La structure conditionnelle utilisée la plus fréquemment est if ... else. Par exemple :

let iceCream = "chocolat";
if (iceCream === "chocolat") {
  alert("J'adore la glace au chocolat !");
} else {
  alert("Ooooh, mais j'aurais préféré au chocolat.");
}

L'expression contenue dans if ( ... ) correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères chocolat pour voir si elles sont égales. Si cette comparaison renvoie true, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et c'est le code du second bloc, celui présent après else, qui est exécuté.

Les fonctions sont un moyen de compacter des fonctionnalités en vue de leur réutilisation. Quand vous avez besoin de la procédure, vous pouvez appeler une fonction, par son nom, au lieu de ré‑écrire la totalité du code chaque fois. Nous avons déjà utilisé des fonctions plus haut, par exemple :

let myVariable = document.querySelector("h1");

alert("Bonjour !");

Ces fonctions (querySelector et alert) sont disponibles dans le navigateur et vous pouvez les utiliser où bon vous semble.

Si vous voyez quelque chose qui ressemble à un nom de variable et qui est suivi de parenthèses — () —, c'est probablement une fonction. Les fonctions prennent souvent des arguments — bouts de données dont elles ont besoin pour faire leur travail. Ils sont placés entre parenthèses, séparés par des virgules s'il y en a plusieurs.

Par exemple, la fonction alert() fait apparaître une fenêtre de pop-up dans la fenêtre du navigateur, mais vous devez donner une chaîne comme argument pour indiquer à la fonction ce que l'on souhaite écrire dans cette fenêtre.

La bonne nouvelle est que vous pouvez définir vos propres fonctions — par exemple, vous pouvez écrire une fonction toute simple qui prend deux arguments et les multiplie :

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

Vous pouvez déclarer cette fonction dans la console avant de l'utiliser plusieurs fois :

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

Pour qu'un site web soit vraiment interactif, vous aurez besoin d'événements. Les événements sont des structures de code qui « écoutent » ce qui se passe dans le navigateur et déclenchent du code en réponse. Le meilleur exemple est l'événement cliquer, déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours :

document.querySelector("html").addEventListener("click", function () {
  alert("Aïe, arrêtez de cliquer !!");
});

Il existe plein de méthodes pour « attacher » un événement à un élément. Dans cet exemple, nous avons sélectionné l'élément HTML concerné et nous avons défini un gestionnaire onclick qui est une propriété qui est égale à une fonction anonyme (sans nom) qui contient le code à exécuter quand l'utilisateur clique.

On pourra noter que :

document.querySelector("html").addEventListener("click", function () {});

est équivalent à :

let myHTML = document.querySelector("html");
myHTML.addEventListener("click", function () {});

La première syntaxe est simplement plus courte.

Maintenant que nous avons vu quelques bases en JavaScript, nous allons ajouter quelques fonctionnalités intéressantes à notre site pour voir ce qu'il est possible de faire.

Dans cette section, nous allons incorporer une autre image au site en utilisant quelques fonctionnalités de l'API DOM et un peu de JavaScript pour alterner entre les deux images lorsqu'on clique sur l'image affichée.

1. Tout d'abord, trouvez une autre image à afficher sur le site. Assurez‑vous qu'elle soit de même taille que la première, ou le plus possible approchante.

2. Enregistrez cette image dans votre dossier images.

3. Renommez cette image « firefox2.png » (sans les guillemets).

4. Dans le fichier main.js, entrez ce code JavaScript (si votre code « Bonjour, monde » est toujours là, supprimez‑le) :

   js

   let myImage = document.querySelector("img");
   
   myImage.addEventListener("click", function () {
     let mySrc = myImage.getAttribute("src");
     if (mySrc === "images/firefox-icon.png") {
       myImage.setAttribute("src", "images/firefox2.png");
     } else {
       myImage.setAttribute("src", "images/firefox-icon.png");
     }
   });
   

5. Sauvegardez tous les fichiers puis chargez index.html dans le navigateur. Maintenant, si vous cliquez sur l'image, elle doit changer pour l'autre !

Dans cet exemple, nous utilisons une référence vers l'élement <img> grâce à la variable myImage. Ensuite, nous égalons la propriété du gestionnaire d'événement onclick de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué :

1. nous récupèrons la valeur de l'attribut src de l'image.

2. nous utilisons une structure conditionnelle pour voir si la valeur de src est égale au chemin de l'image originale :

   1. si c'est le cas, nous changeons la valeur de src et indiquons le chemin vers la seconde image, forçant le chargement de cette image dans l'élément <img>.
   2. si ce n'est pas le cas (ce qui signifie que l'image a déjà été changée), la valeur de src revient à sa valeur initiale.

Continuons en ajoutant encore un peu de code pour changer le titre de la page afin d'inclure un message d'accueil personnalisé pour le visiteur du site. Ce message d'accueil sera conservé quand l'utilisateur quittera le site et s'il y revient — nous le sauvegarderons avec l'API Web Storage. Nous ajouterons également une option pour pouvoir changer l'utilisateur et le message d'accueil si besoin.

1. Dans le fichier index.html, ajoutons la ligne suivante avant l'élément <script> :

   html

   <button>Changer d'utilisateur</button>
   

2. Dans le fichier main.js, ajoutons le code suivant à la fin du fichier. Cela fait référence au nouveau bouton ajouté et à l'élément de titre puis enregistrons ces références dans des variables :

   js

   let myButton = document.querySelector("button");
   let myHeading = document.querySelector("h1");
   

3. Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) :

   js

   function setUserName() {
     let myName = prompt("Veuillez saisir votre nom.");
     localStorage.setItem("nom", myName);
     myHeading.textContent = "Mozilla est cool, " + myName;
   }
   

   Cette fonction utilise la fonction prompt() qui affiche une boîte de dialogue, un peu comme alert() sauf qu'elle permet à l'utilisateur de saisir des données et de les enregistrer dans une variable quand l'utilisateur clique sur OK. Dans notre exemple, nous demandons à l'utilisateur de saisir son nom. Ensuite, nous appelons une API appelée localStorage. Cette API permet de stocker des données dans le navigateur pour pouvoir les réutiliser ultérieurement. Nous utilisons la fonction setItem() de cette API pour stocker la donnée qui nous intéresse dans un conteneur appelé 'nom'. La valeur stockée ici est la valeur de la variable myName qui contient le nom saisi par l'utilisateur. Enfin, on utilise la propriété textContent du titre pour lui affecter un nouveau contenu.

4. Ajoutons ensuite ce bloc if ... else. Ce code correspond à l'étape d'initialisation car il sera utilisé la première fois que la page est chargée par l'utilisateur :

   js

   if (!localStorage.getItem("nom")) {
     setUserName();
   } else {
     let storedName = localStorage.getItem("nom");
     myHeading.textContent = "Mozilla est cool, " + storedName;
   }
   

   Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée nom. Si non, la fonction setUserName() est appelée pour créer cette donnée. Si elle existe (ce qui correspond au cas où l'utilisateur est déjà venu sur la page), on la récupère avec la méthode getItem() et on définit le contenu de textContent pour le titre avec une chaîne suivie du nom de l'utilisateur, comme nous le faisons dans setUserName().

5. Enfin, on associe le gestionnaire onclick au bouton. De cette façon, quand on clique sur le bouton, cela déclenchera l'exécution de la fonction setUserName(). Ce bouton permet à l'utilisateur de modifier la valeur s'il le souhaite:

   js

   myButton.addEventListener("click", function () {
     setUserName();
   });
   

Récapitulons : la première fois que l'utilisateur viste le site, il sera invité à saisir un nom d'utilisateur. Ce nom sera utilisé pour afficher un message d'accueil personnalisé. Si l'utilisateur souhaite changer son nom, il peut cliquer sur le bouton. En supplément, le nom est enregistré pour plus tard grâce à l'API localStorage, cela permet à l'utilisateur de retrouver son nom, même s'il a fermé la page et/ou le navigateur et qu'il revient plus tard !

Si vous avez suivi les étapes détaillées sur cette page, vous devriez obtenir un résultat semblable à celui-ci (vous pouvez aussi voir la version que nous avons obtenue ici) :

Si vous êtes bloqué, n'hésitez pas à comparer votre travail et vos fichiers avec ceux disponibles sur GitHub qui correspondent à notre modèle finalisé.

Au fur et à mesure de cet article, nous n'avons fait qu'effleurer la surface de JavaScript. Si vous avez envie d'en savoir plus sur JavaScript, vous pouvez utiliser notre Guide JavaScript.

• Précédent
• Aperçu : Commencer avec le Web
• Suivant