Apprendre à coder en JavaScript | Cours complet

(2020)
Objectifs du cours JavaScript et prérequis
Bienvenue dans ce cours complet traitant du langage de programmation JavaScript.

Ce tutoriel aborde l’ensemble des fonctionnalités de base et utiles du JavaScript.

L’objectif principal de celui-ci est de faire de vous des développeurs autonomes pour
que vous puissiez résoudre par vous même la majorité des problématiques liées au
JavaScript et que vous soyez capables de terminer des projets plus ou moins
complexes.

L’idée derrière ce cours n’est donc pas simplement de vous présenter les différentes
notions liées au JavaScript une à une mais bien que vous les compreniez et que vous
sachiez quand et comment utiliser chacune d’entre elles dans le futur.

Pour cela, le cours est progressif dans sa difficulté au sein de chaque partie et entre
les parties : nous allons commencer par définir les notions de base du JavaScript avec
les variables, fonctions et autres structures de contrôle comme les boucles et les
conditions et irons progressivement vers du plus complexe et du plus structuré avec
l’orienté objet et l’utilisation d’APIs (Interfaces de Programmation) par exemple.

Cette progressivité rend le cours ouvert et accessible à tous : que vous ayez déjà des
bases ou non en JavaScript, vous trouverez forcément quelque chose à en retirer.

Cependant, pour suivre ce cours dans de bonnes conditions, il est essentiel que vous
possédiez des bases en HTML et en CSS. Si vous ne connaissez pas du tout ces deux
langages, je vous invite à consulter mon cours complet traitant de ce sujet en
cliquant ici

Pédagogie et méthodologie du cours JavaScript

Pour ce cours JavaScript, nous allons déjà commencer par définir le rôle du JavaScript
et par vous créer un socle de connaissances solide pour vous permettre d’avoir une
vue d’ensemble du langage.

Ensuite, nous irons le plus rapidement vers des exemples et exercices concrets pour
valider l’acquisition de ces premières connaissances et pour être sûr de bien
comprendre quand et comment utiliser chacune d’entre elles.
Chaque notion du cours est illustré par des exemples les plus concrets possibles. En
effet, pour rendre le cours le plus digérable, intéressant, pédagogique et pratique
possible, un fort accent a été mis sur la pratique.

Dans un but pédagogique, et afin de vous fournir la meilleure expérience

d’apprentissage possible, ce cours a été divisé en de multiples sous-chapitres eux
mêmes regroupés en sections.

Vous pouvez à tout moment voir le sommaire du cours sur votre gauche pour vous
repérer et naviguer entre les différentes leçons du cours.

Les codes des différents exemples vous seront fournis. Cependant, je vous conseille
d’adopter une attitude active et de vous exercer sur chacun d’entre eux plutôt que de
simplement les copier-coller si vous souhaitez véritablement progresser : je vous
rappelle ici qu’on n’apprend vraiment à coder qu’en pratiquant.
Introduction au JavaScript
Dans cette première leçon d’introduction, nous allons définir ce qu’est le JavaScript ainsi que
les principes fondateurs de ce langage et allons comprendre la place du JavaScript parmi les
autres langages et ses usages.

Une première définition du JavaScript

Le JavaScript est un langage de programmation créé en 1995. Le JavaScript est
aujourd’hui l’un des langages de programmation les plus populaires et il fait partie
des langages web dits « standards » avec le HTML et le CSS. Son évolution est gérée
par le groupe ECMA International qui se charge de publier les standards de ce
langage.

On dit que le HTML, le CSS et le JavaScript sont des standards du web car les
principaux navigateurs web (Google Chrome, Safari, Firefox, etc.) savent tous « lire »
(ou « comprendre » ou « interpréter ») ces langages et les interprètent généralement
de la même façon ce qui signifie qu’un même code va généralement produire le
même résultat dans chaque navigateur.

Pour définir ce qu’est le JavaScript et le situer par rapport aux autres langages, et
donc pour comprendre les intérêts et usages du JavaScript il faut savoir que :

 Le JavaScript est un langage dynamique ;

 Le JavaScript est un langage (principalement) côté client ;
 Le JavaScript est un langage interprété ;
 Le JavaScript est un langage orienté objet.

Pas d’inquiétude, on va définir le plus simplement possible ce que ces qualificatifs

signifient !

Le JavaScript, un langage dynamique

Le JavaScript est un langage dynamique, c’est-à-dire un langage qui va nous
permettre de générer du contenu dynamique pour nos pages web.

Un contenu « dynamique » est un contenu qui va se mettre à jour dynamiquement,

c’est-à-dire changer sans qu’on ait besoin de modifier le code manuellement mais
plutôt en fonction de différents facteurs externes.
On oppose généralement les langages « dynamiques » aux langages « statiques »
comme le HTML et le CSS. Illustrons les différences d’utilisation entre ces types de
langage en discutant des possibilités du HTML, du CSS et du JavaScript.

Pour rappel, le HTML est un langage de balisage (langage qui utilise des balises) qui
est utilisé pour structurer et donner du sens aux différents contenus d’une page. Le
HTML nous permet de communiquer avec un navigateur en lui indiquant que tel
contenu est un titre, tel contenu est un simple paragraphe, tel autre est une liste, une
image, etc.

Le navigateur comprend les différentes balises HTML et va alors afficher notre page à
nos visiteurs en tenant compte de celles-ci.

Le contenu HTML ne va jamais être affiché tel quel, brut, mais des règles de mises en
forme vont lui être appliquées. Ces règles de styles vont être définies en CSS. Le CSS
va ainsi nous permettre d’arranger les différents contenus HTML de la page en les
positionnant les uns par rapport aux autres, en modifiant la couleur des textes, la
couleur de fond des éléments HTML, etc.

Le CSS va ainsi se charger de l’aspect visuel de notre page tandis que le HTML se
charge de la structure (définir les contenus) de celle-ci.

Le HTML et le CSS forment ainsi un premier couple très puissant. Cependant, nous
allons être limités si nous n’utilisons que ces deux langages tout simplement car ce
sont des langages qui ne permettent que de créer des pages « statiques ».

Une page statique est une page dont le contenu est le même pour tout le monde, à
tout moment. En effet ni le HTML ni le CSS ne nous permettent de créer des contenus
qui vont se mettre à jour par eux-mêmes. Le CSS, avec les animations, nous permet
de créer des styles pseudo-dynamiques mais tout de même prédéfinis.

C’est là où le JavaScript entre en jeu : ce langage va nous permettre de manipuler des

contenus HTML ou des styles CSS et de les modifier en fonction de divers
évènements ou variables. Un évènement peut être par exemple un clic d’un utilisateur
à un certain endroit de la page tandis qu’une variable peut être l’heure de la journée.
Regardez par exemple le code suivant :
L’idée n’est bien sûr pas ici de vous expliquer comment fonctionne ce code qui est
déjà relativement complexe mais de vous donner une idée de ce qu’on va pouvoir
réaliser avec quelques lignes de JavaScript.

Mon code JavaScript est ici placé dans l’élément head de mon fichier HTML à
l’intérieur d’un élément script. Ce code récupère l’heure actuelle et l’actualise toutes
les secondes d’une part, et nous permet de cacher / d’afficher l’heure via un bouton
d’autre part.

Ces deux fonctionnalités sont des fonctionnalités dynamiques qu’on n’aurait pas pu
réaliser en HTML ni en CSS.

Le JavaScript, un langage (principalement) côté client

La catégorisation langages statiques / langage dynamique est une première façon de
classer les différents langages de programmation.

On peut également classer les différents langages selon l’endroit où ils vont
s’exécuter : soit côté client, soit côté serveur.

Pour comprendre ce que sont les langages « côté client » et « côté serveur », il
convient avant tout de comprendre ce qu’est un client et ce qu’est un serveur et pour
cela il faut savoir ce qu’est un site.

Un site est un ensemble de ressources et de fichiers liés entre eux. Pour que notre site
soit accessible sur le web pour tous, on va l’héberger sur un serveur, c’est-à-dire
envoyer l’ensemble de nos fichiers sur le serveur et on va également acheter un nom
de domaine qui va servir à identifier notre site.

Un « serveur » est une sorte de super ordinateur, constamment accessible et

connectés aux autres serveurs (formant ainsi un réseau qu’on appelle le web) et qui
va héberger les fichiers constituant un (ou plusieurs) site(s) web et le(s) « servir » sur
demande du client.

Lorsqu’on demande à accéder à une page web en tapant une URL dans notre
navigateur, nous sommes le client ou plus exactement notre navigateur est le logiciel
client qui effectue une demande ou « requête » au serveur qui est la suivante : « sers-
moi le fichier correspondant à l’adresse que je t’ai envoyée ».

Les fichiers ou pages d’un site web vont pouvoir être constituées de deux types de
codes différents : du code côté serveur et du code côté client. Lorsqu’on demande à
un serveur de nous servir une page, celui-ci se charge d’exécuter le code côté client
s’il y en a et ne va renvoyer que du code côté client en résultat.

Un langage « côté client » ou « client side » est un langage qui va être exécuté dans
le navigateur des utilisateurs qui demandent la page. On peut également appeler ces
langages des langages « web » puisqu’ils sont principalement utilisés dans un
contexte web.

Il existe aujourd’hui 3 langages côté client incontournables qui sont le HTML, le CSS
et le JavaScript.

Les langages côté serveur sont des langages qui vont s’exécuter sur le serveur. Les
navigateurs ne sont dans la grande majorité des cas pas capables de comprendre les
langages serveur.

Ces langages permettent notamment d’effectuer de manipuler les données pour

renvoyer des résultats. Les résultats renvoyés le sont sous forme de code
compréhensible par le navigateur (c’est-à-dire du HTML principalement) pour que le
navigateur puisse afficher le résultat final.

La chose importante à retenir ici est que le JavaScript est un langage principalement
utilisé côté client, mais qui va également pouvoir s’utiliser côté serveur à condition
qu’on mette en place un environnement favorable (en utilisant Node.js par exemple).

Dans ce cours, nous allons exclusivement nous concentrer sur un usage du JavaScript
côté client.

Le JavaScript, un langage interprété

On peut encore séparer les langages selon qu’ils puissent être exécutés directement
(on parlera alors de langages interprétés) ou qu’il faille les transformer en une autre
forme pour pouvoir les exécuter (on parlera alors le langages compilés).

Le JavaScript est un langage interprété. Cela signifie qu’il va pouvoir être exécuté
directement sous réserve qu’on possède le logiciel interpréteur. Pas de panique ici :
tous les navigateurs connus possèdent leur interpréteur JavaScript.

Le JavaScript, un langage orienté objet

Finalement, le JavaScript est un langage orienté objet. Il est trop tôt selon moi pour
vous expliquer ce que ça signifie ; nous reparlerons de cela dans la partie consacrée
aux objets.
 

JavaScript, API, librairies et framework

Le JavaScript en tant que langage correspond à un ensemble de structures de codes
ou un ensemble d’éléments qu’on va pouvoir utiliser pour implémenter des
fonctionnalités sur nos pages web.

Les API et les librairies JavaScript sont construites à partir de ces éléments de base du
JavaScript et vont nous permettre d’utiliser des structures plus complexes déjà prêtes
à l’emploi qui vont in-fine nous permettre de réaliser simplement des opérations qu’il
aurait été très difficile de réaliser si on avait dû les coder entièrement à la main.

Une API (« Application Programming Interface » ou « Interface de Programmation »)

est une interface qui nous permet d’utiliser facilement une application. Une
application est un programme, c’est-à-dire un ensemble cohérent de code qui
permet de réaliser certaines actions.

On utilise les API pour demander au programme d’effectuer certaines actions pour
nous, comme par exemple afficher une carte d’une certaine ville à une certaine
échelle (Google Maps API) ou pour afficher la liste de nos derniers Tweets (Twitter
API) ou encore pour manipuler le contenu HTML d’une page web (DOM API).

Pour utiliser une API et donc l’application correspondante, il faudra généralement

demander au propriétaire de l’application une clef qui va nous permettre de nous
identifier.

Une librairie ou « bibliothèque » JavaScript est un ensemble de fichiers de code

JavaScript homogènes (= qui se concentrent sur un aspect particulier du langage)
qu’on va devoir télécharger pour les utiliser. Ces fichiers de code contiennent des
structures de code prêtes à l’emploi qu’on va pouvoir utiliser immédiatement pour
gagner du temps en développement. Parmi les librairies les plus célèbres, on peut
notamment citer jQuery.

Il convient donc de ne pas confondre API et librairies : une librairie est un ensemble
de fichiers qu’on va télécharger et contient un ensemble de structures de codes
prêtes à l’emploi. Nous allons pouvoir choisir celles qui nous intéressent pour les
intégrer dans nos propres scripts et ainsi gagner du temps de développement. Une
API, de l’autre côté, va nous permettre d’utiliser une application qu’on n’a pas le droit
de manipuler directement.
Finalement, un framework ou « cadre de travail » est relativement similaire dans son
but à une « super librairie ». Les framework vont également nous fournir un ensemble
de codes tout prêts pour nous faire gagner du temps en développement. La grande
différence entre un framework et une librairie réside dans l’inversion du contrôle :
lorsqu’on télécharge une librairie, on peut l’utiliser comme on le souhaite en
intégrant ses éléments à nos scripts tandis que pour utiliser un framework il faut
respecter son cadre (ses règles). Les framework JavaScript les plus connus aujourd’hui
sont Angular.js et React.js.

Dans le début de ce cours, nous n’utiliserons bien évidemment pas d’API ni de

librairie et encore moins de framework. Cependant, il reste intéressant de déjà définir
ces différents termes pour vous donner une première « vue d’ensemble » des outils
JavaScript.

JavaScript vs Java : attention aux confusions !

Encore aujourd’hui, certaines personnes ont tendance à confondre les deux langages
« Java » et « JavaScript ».

Retenez ici que ces deux langages, bien que syntaxiquement assez proches à la base,
reposent sur des concepts fondamentaux complètement différents et servent à
effectuer des tâches totalement différentes.

Pourquoi des noms aussi proches ? Java est une technologie créée originellement par
Sun Microsystems tandis que JavaScript est un langage créé par la société Netscape.

Avant sa sortie officielle, le nom original du JavaScript était « LiveScript ». Quelques

jours avant la sortie du LiveScript, le langage est renommé JavaScript.

A l’époque, Sun et Netscape étaient partenaires et le Java était de plus en plus

populaire. Il est donc communément admis que le nom « JavaScript » a été choisi
pour des raisons marketing et pour créer une association dans la tête des gens avec
le Java afin que les deux langages se servent mutuellement.

Le créateur du JavaScript a également expliqué que l’idée de base derrière le

développement du JavaScript était d’en faire un langage complémentaire au Java.
L’environnement de travail pour ce
cours JavaScript
Pour coder en JavaScript, nous n’allons avoir besoin que d’un éditeur de texte. Il
existe de nombreux éditeurs de texte sur le web et la majorité d’entre eux sont
gratuits.
Si vous suivez ce cours, vous devriez déjà avoir des bases en HTML et en CSS et donc
non seulement savoir ce qu’est un éditeur de texte mais en avoir déjà un installé sur
votre ordinateur et prêt à l’utilisation.

Si jamais ce n’était pas le cas, je ne saurais que trop vous conseiller de suivre le cours
HTML et CSS avant d’aller plus loin dans celui-ci.

Pour rappel, voici une courte liste d’éditeurs reconnus et qui vous permettront de
coder en JavaScript sans problème (j’utilise à titre personnel la version gratuite de
Komodo).

 Komodo Edit : version gratuite de Komodo, éditeur multiplateformes (il

fonctionne aussi bien sous Windows que Mac ou encore Ubuntu). L’éditeur est
complet, performant et relativement intuitif.
 Atom : Atom est doté d’une excellente ergonomie qui facilite grandement la
prise en main et l’approche du code pour les nouveaux développeurs. Cet
éditeur de texte dispose de toutes les fonctions qu’on attend d’un bon
éditeur : bibliothèques intégrées, auto-complétion des balises, etc.
 NotePad++ : Certainement l’éditeur de texte le plus connu de tous les temps,
NotePad++ est également l’un des plus anciens. Il a passé le test du temps et
a su s’adapter au fur et à mesure en ajoutant des fonctionnalités régulièrement
comme l’auto-complétion des balises, le surlignage des erreurs de syntaxe
dans le code etc. Le seul bémol selon moi reste son interface qui est à
peaufiner.
 Brackets : Brackets est un éditeur très particulier puisqu’il est tourné
uniquement vers les langages de développement front-end (c’est-à-dire
HTML, CSS et JavaScript). Cependant, il dispose d’une excellente ergonomie
(UI / UX) et d’un support extensif pour les langages supportés.
 

Logiciel éditeur de texte contre éditeur en

ligne
Certains sites comme codepen.io ou jsbin.com permettent d’écrire du code HTML,
CSS ou JavaScript et de voir le résultat immédiatement.

En cela, ils servent le même rôle qu’un éditeur de texte mais sont encore plus
pratiques, notamment lorsque vous voulez tester rapidement un bout de code ou
pour des démonstrations de cours. J’utiliserai d’ailleurs souvent codepen.io dans mes
leçons pour vous fournir directement un code et pour que vous puissiez le voir
immédiatement en action ou le modifier.

Cependant, retenez bien qu’ils sont aussi limités car il y a plusieurs choses que vous
ne pourrez pas faire en termes de développement avec ces sites. Parmi celles-ci, on
notera que vous ne pourrez par exemple pas exécuter de code PHP ou un
quelconque code utilisant un langage dit server side ou encore que vous ne pourrez
pas à proprement parler créer plusieurs pages et les lier entre elles (comme c’est le
cas lorsque l’on doit créer un site) ou du moins pas gratuitement.

Cette solution n’est donc pas satisfaisante si vous souhaitez véritablement vous lancer
dans le développement et c’est la raison pour laquelle tous les développeurs utilisent
un éditeur de texte.

Je vous conseille donc durant ce cours d’utiliser un maximum votre éditeur pour bien
vous familiariser avec celui-ci et pour assimiler les différentes syntaxes des langages
que l’on va étudier plutôt que de simplement copier et / ou utiliser mes codes que je
mettrai à disposition via CodePen.

Les librairies JavaScript à télécharger

Pour coder en JavaScript, un simple éditeur de texte suffit en théorie. Cependant,
pour exploiter toute la puissance du JavaScript et pour gagner du temps de
développement, nous utiliserons généralement en plus du JavaScript « de base » des
librairies JavaScript.

Pour qu’une librairie JavaScript fonctionne, il va falloir que le navigateur des

personnes qui affichent la page la connaisse. Pour cela, on « forcera » le navigateur
de nos visiteurs à télécharger les librairies qu’on utilise dans nos pages.

Pour commencer, nous n’utiliserons pas de librairie. Nous aurons donc l’occasion de
reparler de cela bien plus tard dans ce cours.
Où écrire le code JavaScript ?
On va pouvoir placer du code JavaScript à trois endroits différents :
 Directement dans la balise ouvrante d’un élément HTML ;
 Dans un élément script, au sein d’une page HTML ;
 Dans un fichier séparé contenant exclusivement du JavaScript et portant
l’extension .js.
Nous allons dans cette leçon voir comment écrire du code JavaScript dans chacun de
ces emplacements et souligner les différents avantages et inconvénients liés à chaque
façon de faire.

Placer le code JavaScript dans la balise

ouvrante d’un élément HTML
Il est possible que vous rencontriez encore aujourd’hui du code JavaScript placé
directement dans la balise ouvrante d’éléments HTML.

Ce type de construction était fréquent à l’époque notamment pour prendre en

charge des évènements comme par exemple un clic.