Les bases de JavaScript

Qu'est-ce que JavaScript ?

JavaScript (souvent abrégé en « JS ») est un langage de programmation qui peut interagir avec un document HTML pour le rendre dynamique. Ce langage a été inventé par Brendan Eich qui est le co-fondateur du projet Mozilla, de la fondation Mozilla et de la corporation Mozilla.

JavaScript peut être utilisé pour créer de nombreuses fonctionnalités. Pour commencer, il peut être utilisé pour réaliser des galleries d'images, des transformations pour l'affichage de la page, des réactions à des clics des utilisateurs. Utilisé de façon avancée, JavaScript vous permettra même de créer des jeux vidéo, des graphiques animés en 2D ou en 3D, des applications qui utilisent des bases de données et plus encore !

JavaScript est plutôt compact et très flexible. Les développeurs ont écrit de nombreux outils qui reposent sur JavaScript afin de pouvoir exploiter des fonctionnalités supplémentaires  très simplement. Parmi ces outils, on retrouve :

• Les Application Programming Interfaces (plus communément appelées API) sont intégrées aux navigateurs web et permettent de manipuler le HTML, de définir les styles CSS, de manipuler un flux vidéo depuis la webcam de l'utilisateur, de générer des graphiques en 3D, etc.
• Les API « tierces » développées en dehors des navigateurs permettent aux développeurs d'intégrer des fonctionnalités d'autres sites dans leur site (par exemple de Twitter ou Facebook).
• Les frameworks et bibliothèques tierces qui peuvent être utilisées avec votre code permettent de rapidement mettre en œuvre des sites et des applications.

L'exemple du « hello world »

La section précédente semble vraiment excitante, JavaScript est l'une des technologies web les plus puissantes et créatives. Une fois que vous commencerez à être autonome en JavaScript, vous verrez une nouvelle dimension s'ouvrir pour vos sites web.

Cependant, JavaScript est plus complexe et moins accessible que HTML ou CSS. Il faudra progresser, étape par étape, en commençant par des petits projets. Pour commencer, nous allons utiliser JavaScript de façon vraiment basique pour affiche « Hello world!», pouvant se traduire par « Coucou le monde ! » (c'est une « tradition » que de commencer à développer avec un langage en écrivant un programme qui affiche « Hello world », voir d'autres exemples sur Wikipédia).

1. Pour commencer, dans le dossier scripts, créez un fichier appelé main.js.
2. Ensuite, dans votre fichier index.html, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante </body> :

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

3. Cet élément a le même rôle que l'élément <link> pour CSS : il permet d'utiliser le fichier qui contient le code JavaScript pour l'appliquer sur la page afin qu'il puisse interagir avec le HTML, le CSS et le reste de la page.
4. Dans le fichier main.js, ajoutez les lignes suivantes :

   var monTitre = document.querySelector('h1');
   monTitre.textContent = 'Hello world!';

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 :

Que s'est-il passé ?

Le texte de votre titre a été changé en « Hello world! » en utilisant JavaScript. Pour cela, on a utilise une fonction appelée querySelector() qui fait référence à l'élément de titre et qui le stocke dans une variable appelée monTitre. C'est assez proche de ce qu'on a fait en CSS avec les sélecteurs. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner.

Après, on modifie la valeur de la propriété textContent de la variable monTitre, cette propriété représente le contenu de l'élément. Dans notre exemple, on modifie le contenu de l'élément avec "Hello world!".

Rapide introduction aux bases de JavaScript

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 serez plus à l'aise pour découvrir un autre langage et développer avec.

Variables

Les variables sont des conteneurs dans lesquels on peut stocker des variables. Pour commencer, il faut déclarer une variable avec le mot-clé var suivi du nom qu'on souhaite utiliser pour la variable :

var maVariable;

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

maVariable = 'Bob';

Pour utiliser la valeur plus loin dans le code, il suffit de faire appel à la variable en utilisant son nom :

maVariable;

Lorsque vous créez une variable et que vous lui donnez une valeur, vous pouvez le faire sur une seule ligne :

var maVariable = 'Bob';

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

var maVariable = 'Bob';
maVariable = 'Patrick';

Les variables sont réparties en différents types 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. Par exemple, on ne pourrait pas personnaliser un message de bienvenue ou changer l'image affichée dans une galerie.

Les commentaires

De la même façon qu'en CSS, il est possible d'intégrer des commentaires dans du code JavaScript :

/*
Voici un commentaire qui peut être sur plusieurs lignes
*/

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

// Voici un commentaire

Les opérateurs

Un opérateur est un symbole mathématique qui produit un résultat en fonction de plusieurs valeurs (la plupart du temps on utilise deux valeurs et un opérateur). 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 plein d'autres opérateurs mais nous nous en tiendrons à ceux-là pour le moment. Si vous voulez avoir la liste complète, vous pouvez vous rendre sur la page qui détaille les expressions et les opérateurs.

Les structures conditionnelles

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 :

var parfumGlace = 'chocolat';
if (parfumGlace === 'chocolat') {
  alert("J'adore la glace au chocolat !");    
} else {
  alert("J'aurai préféré du chocolat.");    
}

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

Les fonctions

Les fonctions permettent d'organiser des fonctionnalités qu'on souhaite pouvoir réutiliser. Par exemple, si on veut exécuter deux fois la même action, plutôt que de recopier le code, on pourra écrire une fonction une fois puis l'utiliser aux deux endroits souhaités. Nous avons déjà utilisé des fonctions :

1. var maVariable = document.querySelector('h1');

2. alert('Coucou !');

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 peuvent utiliser des arguments pour effectuer leurs calculs. Les arguments sont placés entre les 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 et on peut utiliser un argument pour indiquer à la fonction ce qu'on souhaite écrire dans cette fenêtre.

En plus des fonctions déjà existantes, vous pouvez définir vos propres fonctions ! Par exemple, vous pouvez écrire une fonction toute simple qui prend deux arguments et qui renvoie le résultat de la multiplication :

function multiplier(num1,num2) {
  var résultat = num1 * num2;
  return résultat;
}

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

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

Les événements

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 passent dans le navigateur et qui permettent de déclencher des actions lorsque quelque chose de particulier se passe. Le meilleur exemple est l'événement de clic, qui est déclenché lorsque l'utilisateur clique sur quelque chose dans le navigateur. Pour voir ce que ça donne en pratique, saisissez ces quelques lignes dans la console puis cliquez sur la page sur laquelle vous êtes :

document.querySelector('html').onclick = 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 (elle n'a pas de nom) qui contient le code à exécuter quand l'utilisateur clique.

On pourra noter que :

document.querySelector('html').onclick = function() {};

est équivalent à :

var maHTML = document.querySelector('html');
maHTML.onclick = function() {};

La première syntaxe est simplement plus courte.

Booster notre site web

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.

Pouvoir changer l'image en cliquant dessus

Dans cette section, nous allons ajouter une autre image au site et ajouter un peu de JavaScript pour alterner entre les images lorsqu'on clique sur l'image affichée.

1. Tout d'abord, trouvez une deuxième image que vous souhaiteriez afficher sur votre site. Essayez de prendre une image de même taille.
2. Enregistrez cette image dans votre dossier images.
3. Dans le fichier main.js, entrez ce code JavaScript (si votre code « Coucou le monde » est toujours là, vous pouvez le supprimer) :

   var monImage = document.querySelector('img');
   
   monImage.onclick = function() {
       var maSrc = monImage.getAttribute('src');
       if(maSrc === 'images/firefox-icon.png') {
         monImage.setAttribute ('src','images/firefox2.png');
       } else {
         monImage.setAttribute ('src','images/firefox-icon.png');
       }
   }

4. Sauvegardez les différents fichiers puis chargez index.html dans votre navigateurs. Quand vous cliquez sur l'image, cela devrait désormais passer à la deuxième !

Dans cet exemple, nous utilisons une référence vers l'élement img grâce à la variable monImage. Ensuite, on définit une fonction anonyme qui doit être utilisée comme gestionnaire d'événement onclick. Cette fonction définit ce qui se passe à chaque fois qu'on clique sur l'élément de l'image :

1. On récupère la valeur de l'attribut src de l'image.
2. On utilise une structure conditionnelle pour voir si la valeur de src est égale au chemin de l'image originale :
   1. Si le chemin est égal, on change la valeur de src pour utiliser le chemin de la deuxième image, ce qui force cette image à être chargée dans l'élément <image>.
   2. Si le chemin est différent (ce qui signifie que l'image a déjà été changée), on modifie la valeur de src pour aller chercher la première image et l'afficher.

Ajouter un message d'accueil personnalisé

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 ajouterons également une option pour pouvoir changer l'utilisateur et le message d'accueil si besoin.

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

   <button>Change user</button>

2. Dans le fichier main.js, ajoutez le code suivant à la fin du fichier. Cela fait référence au nouveau bouton qu'on vient d'ajouter et à l'élément de titre puis enregistre ces références dans des variables :

   var monBouton = document.querySelector('button');
   var monTitre = document.querySelector('h1');

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

   function définirNomUtilisateur() {
     var monNom = prompt('Veuillez saisir votre nom.');
     localStorage.setItem('nom', monNom);
     monTitre.textContent = 'Mozilla est cool, ' + monNom;
   }

   Cette fonction utilise la fonction prompt() qui permet d'afficher une boîte de dialogue. Elle fonctionne de façon semblable à alert() sauf qu'elle permet à l'utilisateur de saisir des données et d'enregistrer ces données dans une variable lorsque 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 monNom 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 :

   if(!localStorage.getItem('nom')) {
     définirNomUtilisateur();
   } else {
     var nomEnregistré = localStorage.getItem('nom');
     monTitre.textContent = 'Mozilla est cool, ' + nomEnregistré;
   }

   Ce bloc utilise l'opérateur de négation (NON logique) pour vérifier si le navigateur possède une donnée enregistrée appelée nom. Si non (ce qui correspond au cas où c'est la première visite de l'utilisateur), la fonction définirNomUtilisateur() est appelée pour créer cette donnée. Si cette donnée est déjà enregistrée (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 (c'est équivalent à ce qu'on fait dans  définirNomUtilisateur()).
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 définirNomUtilisateur(). Ce bouton permettra à l'utilisateur de modifier la valeur s'il le souhaite:

   monBouton.onclick = function() {
     définirNomUtilisateur();
   }
   

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 utiliser 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 !

Conclusion

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.