Java Script
Java Script
(2020)
Objectifs du cours JavaScript et prérequis
Bienvenue dans ce cours complet traitant du langage de programmation JavaScript.
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
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.
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.
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 :
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.
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.
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.
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.
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 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.
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.
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).
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.
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.
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).
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.
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.