Le JavaScript est un langage de programmation qui permet d'améliorer l'expérience

utilisateur sur les pages web en ajoutant de l'interactivité. En raison de sa simplicité et de son
élégance, le JavaScript est devenu l'un des langages les plus largement utilisés pour le
développement web interactif, et il alimente une grande partie d'internet. Au fil des ans, le
JavaScript est devenu si populaire qu'il n'est plus uniquement utilisé pour le développement
web. Aujourd'hui, il est utilisé par des entreprises et des particuliers dans le monde entier
pour créer toutes sortes de logiciels. En raison de son utilisation mondiale, l'apprentissage du
JavaScript est fondamental pour devenir programmeur et obtenir un premier emploi dans le
secteur de la technologie.

Dans ce parcours d'apprentissage, vous commencerez par les bases du JavaScript et

développerez ensuite vos compétences par un apprentissage pratique. Aucune connaissance
préalable en programmation n'est requise ! Après avoir terminé le cours JavaScript Essentials
1, vous pouvez passer la certification de niveau débutant JSE – Certified Entry-Level
JavaScript Programmer. Poursuivez avec JavaScript Essentials 2 pour être prêt pour l'examen
de certification de niveau associé JSA – Certified Associate JavaScript Programmer.
Si vous êtes intéressé par une carrière de programmeur front-end, il est essentiel
d'apprendre le JavaScript. Ce langage de programmation est très répandu, car il permet
d'intégrer des vidéos, des champs de recherche ou encore d'actualiser votre fil de réseau
social sur votre site web préféré.

Découvrez comment les applications web et mobiles interactives sont créées avec ce langage
de programmation textuel. Vous apprendrez ensuite à programmer vos propres
applications ! Ce cours est idéal pour débuter en programmation, aucune connaissance
préalable n'est requise. Il est aligné sur la certification JSE - Certified Entry-Level JavaScript
Programmer Certification et a été développé en collaboration avec le JS Institute. Une fois
certifié, vous pourrez mettre en avant vos nouvelles compétences auprès des employeurs.

Les compétences en programmation vous ouvrent les portes de carrières dans presque tous
les secteurs et sont indispensables si vous souhaitez accéder à des postes plus avancés et
mieux rémunérés dans le développement web, d'applications mobiles ou de jeux. Lancez-
vous dès aujourd'hui !
1.0.1 À propos du cours

Ce cours a été conçu et développé par l'OpenEDG JS Institute, et mis en œuvre par la Cisco
Networking Academy.

Ce cours est le premier d'une série de 2 cours qui vous prépareront aux examens de
certification JSE – Certified Entry-Level JavaScript Programmer et JSA – Certified Associate
JavaScript Programmer.

L'objectif principal du cours est de vous guider d'un état d'analphabétisme complet en
programmation à un niveau de connaissances en programmation qui vous permettra de
concevoir, écrire, déboguer et exécuter des programmes codés dans le langage JavaScript, et
de comprendre les concepts de base de la technologie de développement logiciel.

Le cours se concentre sur les concepts fondamentaux du langage JavaScript, y compris les
éléments essentiels de la syntaxe et de la sémantique de JavaScript, les meilleures pratiques
de programmation, les outils et ressources JS, et les concepts de codage tels que les
variables, les types de données, le transtypage, les opérateurs, l'interaction utilisateur, le flux
de contrôle, les fonctions, les erreurs, les exceptions, le débogage et le dépannage.

Le cours vous préparera à des emplois et carrières liés au développement de logiciels et de

sites web au sens large, ce qui inclut non seulement la création du code en tant que
développeur junior, mais aussi la conception web, le développement front-end et les tests
d'applications.

1.0.2 Structure du cours

Le cours est divisé en six modules :

Module 1

Introduction à JavaScript et à la programmation informatique ;

Module 2

Variables, types de données, transtypage et commentaires ;

Module 3

Opérateurs et interaction utilisateur ;

Module 4

Flux de contrôle – Exécution conditionnelle et boucles ;

Module 5

Fonctions ;

Module 6

Erreurs, exceptions, débogage et dépannage.

Le cours se termine par un test final composé de 30 questions, évaluant votre

compréhension des concepts abordés.

1.0.3 Programme

Dans ce cours, vous apprendrez :

Module 1

Introduction à JavaScript et à la programmation informatique

À propos de JavaScript (comment communiquer avec l'ordinateur, ce qu'est JS, avantages et

limites de JS, où JS est utilisé aujourd'hui)

Mise en place de l'environnement de programmation (outils de développement,

environnement de développement en ligne, environnement de développement local)
Premier programme JS – Hello, World! (quelques mots sur HTML, comment exécuter votre
code JavaScript, exécution du code directement dans la console)

Module 2

Variables, types de données, transtypage et commentaires

Variables (nommage, déclaration et initialisation des variables, déclarations et mode strict,

modification des valeurs des variables, constantes, portée)

Types de données primitifs (Boolean, Number, BigInt, String, undefined, null, transtypage –
fonctions de construction primitives et conversions primitives, conversions implicites)

Types de données complexes (Object, Array, propriétés et méthodes de base d'Array)

Commentaires (commentaires sur une seule ligne, commentaires sur plusieurs lignes,
documentation)

Module 3

Opérateurs et interaction utilisateur

Opérateurs d'affectation, arithmétiques et logiques (ce que sont les opérateurs, opérateurs
d'affectation, opérateurs arithmétiques, opérateurs logiques, opérateurs d'affectation
composés)

Chaînes de caractères, comparaison et autres opérateurs JS (concaténation de chaînes et

affectations composées, opérateurs de comparaison, opérateurs conditionnels, opérateurs
typeof, instanceof et delete, précédence des opérateurs)

Interaction avec l'utilisateur (boîtes de dialogue – alert, confirm, prompt)

Module 4

Flux de contrôle – Exécution conditionnelle et boucles

Exécution conditionnelle (ce qu'est l'exécution conditionnelle, l'instruction if–else,

l'opérateur conditionnel, l'instruction switch–case)

Boucles (ce que sont les boucles, la boucle while, la boucle do–while, la boucle for, la boucle
for–of, la boucle for–in, les instructions break et continue)

Module 5
Fonctions

Bases des fonctions (ce que sont les fonctions, déclaration des fonctions, appel des fonctions,
variables locales, l'instruction return, paramètres de fonction, masquage)

Les fonctions en tant que membres de première classe (expressions de fonction, passage
d'une fonction en tant que paramètre, rappels)

Fonctions fléchées (déclaration et appel)

Récursion (idée de base)

Module 6

Erreurs, exceptions, débogage et dépannage

Erreurs et exceptions – introduction (langages naturels et erreurs de communication, erreurs

vs exceptions, erreurs sans exceptions, confiance limitée)

Types d'erreurs de base en JS (SyntaxError, ReferenceError, TypeError, RangeError)

Gestion des exceptions (l'instruction try–catch, l'instruction finally, l'instruction throw et les
erreurs personnalisées)

Débogage et dépannage du code (ce qu'est le débogage, exécution pas à pas, affichage et
modification des variables, l'option de sortie, mesure du temps d'exécution du code)

1.0.4 Objectifs

Module 1

Après avoir terminé le module 1, vous :

comprendrez les concepts fondamentaux de la programmation, tels que : l'interprétation et

l'interpréteur, la compilation et le compilateur, la programmation côté client vs côté serveur ;

aurez des connaissances de base sur la façon de configurer et d'utiliser l'environnement de

programmation de base (en ligne ou local) ;

acquerrrez des compétences vous permettant d'exécuter votre premier programme

JavaScript côté client (à la fois en tant qu'élément intégré dans la page HTML et directement
dans la console du navigateur).
Module 2

Après avoir terminé le module 2, vous :

aurez les connaissances et les compétences nécessaires pour travailler avec les variables
(c'est-à-dire les nommer, les déclarer, les initialiser et modifier leurs valeurs) ;

comprendrez des concepts tels que la portée, les blocs de code, le masquage et le hissage
(hoisting) ;

connaîtrez les propriétés de base des types de données primitifs tels que boolean, number,
bigint, undefined, null, et serez capable de les utiliser ;

serez familiarisé avec les propriétés de base du type de données primitif string, y compris les
littéraux de chaîne – guillemets simples ou doubles, le caractère d'échappement,
l'interpolation de chaînes, les propriétés et méthodes de base ;

connaîtrez les propriétés de base des types de données complexes tels que Array et Object
(traités comme un enregistrement) et serez capable de les utiliser en pratique.

Module 3

Après avoir terminé le module 3, vous :

saurez ce que sont les opérateurs et comment les classer (par type d'opérande, par nombre
d'opérandes, etc.) ;

serez capable d'utiliser en pratique les opérateurs d'affectation, arithmétiques, logiques et

de comparaison ;

comprendrez le fonctionnement de l'opérateur conditionnel et des opérateurs typeof,

instanceof et delete ;

comprendrez la précédence et l'associativité des opérateurs de base et serez capable de les

influencer au moyen du regroupement par parenthèses ;

serez capable d'effectuer une communication bidirectionnelle de base avec l'utilisateur du

programme à l'aide des boîtes de dialogue alert, confirm et prompt.

Module 4

Après avoir terminé le module 4, vous :

serez capable de forcer l'exécution conditionnelle d'un groupe d'instructions (prendre des
décisions et ramifier le flux) à l'aide des commandes if-else et switch ;

serez capable de forcer la répétition d'un groupe d'instructions dans une boucle à l'aide des
commandes for, while et do-while, en utilisant des conditions dépendantes et indépendantes
du nombre d'itérations ;

comprendrez et serez capable d'utiliser les instructions break et continue spécifiques aux
boucles ;

serez capable d'utiliser l'instruction for-in pour itérer sur les propriétés d'un objet ;

serez capable d'utiliser l'instruction for-of pour parcourir les éléments d'un tableau.

Module 5

Après avoir terminé le module 5, vous :

serez capable de déclarer et d'appeler des fonctions ;

saurez comment passer des arguments d'appel à une fonction et en renvoyer le résultat de
son opération ;

comprendrez le concept de variable locale et l'effet du masquage des variables de même

nom au sein d'une fonction ;

saurez qu'une fonction en JS est un membre de première classe et serez capable d'en tirer
parti en déclarant des fonctions à l'aide d'expressions de fonction et en passant des fonctions
comme arguments aux appels d'autres fonctions ;

comprendrez le concept de récursion dans le contexte des fonctions et serez

1.1.1 Introduction

Alors, vous voulez apprendre à programmer en JavaScript ? C’est excellent !

Ce cours sera un long voyage, mais si vous allez jusqu’au bout, vous serez capable de lire,
comprendre et bien sûr écrire des applications et des programmes en JavaScript. Ces
nouvelles compétences pourront vous être utiles dans votre travail actuel ou vous ouvrir de
nouvelles opportunités de carrière dans un marché informatique en constante croissance.
Commençons donc cette aventure sans plus attendre et découvrons ce qu’est JavaScript.

1.1.2 Comment communiquer avec l’ordinateur

Commençons par quelque chose d’évident – les ordinateurs sont partout.

Vous êtes presque certainement en train de lire ce cours sur un ordinateur ; votre téléphone
est un ordinateur ; on trouve des ordinateurs dans les télévisions et dans d’autres appareils
électroménagers, comme votre aspirateur automatique, qui utilise son ordinateur et de
nombreux capteurs dans sa mission sans fin d’éradiquer la poussière de votre vie.

Nous sommes entourés d’ordinateurs. Ils sont utilisés dans les sciences, la médecine, la
banque et les affaires.

Il semble qu’aujourd’hui il serait difficile de trouver un domaine de la vie dans lequel les
ordinateurs ne participent pas activement.

Langages naturels vs langages machines

Nous utilisons principalement les ordinateurs parce qu’ils sont capables d’accomplir
certaines tâches incomparablement plus vite et plus précisément que les humains.
Cependant, les ordinateurs ne peuvent pas deviner quelles tâches nous avons en tête ni
comment nous aider à les accomplir. Nous devons leur dire. Comment ? Le mieux est de le
faire d’une manière semblable à celle utilisée pour transmettre une information à une autre
personne, autrement dit en utilisant un langage compréhensible par les deux parties. Avec
un tel langage, nous écrivons un programme, c’est-à-dire une solution formalisée à notre
problème, qui peut être exécutée par l’ordinateur.

Malheureusement, un langage directement compréhensible par un ordinateur est

absolument illisible pour un humain ordinaire. Il s’agit d’une suite d’instructions étranges,
écrites en forme numérique, faisant référence à des composants informatiques dont nous
ignorons même l’existence (et honnêtement nous n’avons pas nécessairement besoin de le
savoir). Ce mode de communication, qui date des débuts de l’informatique, est de nos jours
très rarement utilisé, et seulement dans des situations très spécifiques.

Pour faciliter la communication avec l’ordinateur, les langages de programmation ont donc
été inventés. Ils sont plus ou moins proches des langages naturels (c’est-à-dire ceux utilisés
pour communiquer entre humains). Il existe des milliers de langages de programmation, qui
diffèrent par leur objectif (à côté des langages généraux, il y a de nombreux langages
spécialisés, par exemple conçus uniquement pour les calculs statistiques), leur niveau
d’abstraction (en termes simples : plus le langage est de haut niveau, moins nous devons
connaître les détails du matériel sur lequel le programme est exécuté), leur facilité
d’utilisation, l’efficacité des programmes écrits avec eux, etc.

1.1.3 JavaScript comme langage interprété

JavaScript est un langage interprété typique. Si nous exécutons du code écrit en JavaScript
dans un navigateur web, comme cela se produit après le chargement de la page que nous
lisons actuellement (oui, oui, il y a aussi des éléments écrits en JavaScript sur cette page),
l’interpréteur sera le moteur JavaScript intégré au navigateur. Ce n’est pas la seule façon
d’exécuter du code JavaScript.

Peut-être avez-vous entendu parler de Node.js. C’est aussi un interpréteur, mais installé
indépendamment des navigateurs, comme un environnement dans le système d’exploitation
de l’ordinateur (que ce soit macOS, Windows ou Linux). Grâce à Node.js, vous pouvez écrire
des programmes en JavaScript qui, par exemple, transformeront votre ordinateur en serveur.

En début de paragraphe, nous avons un peu simplifié les choses. JavaScript est un langage
interprété – cela ne fait aucun doute. Et en fait, exécuter un programme écrit en JavaScript
donne l’impression que nous exécutons notre code source (c’est-à-dire le code que nous
avons écrit) instruction par instruction. Toutefois, vous pourriez rencontrer des informations
un peu différentes concernant ce langage et plus précisément certains interpréteurs.

La plupart des moteurs JavaScript modernes utilisent la technique de Compilation Juste-à-

Temps (JIT Compilation). Elle consiste à compiler des fragments de code pendant l’exécution
du programme (plus d’une seule instruction) afin d’en améliorer les performances.
Cependant, du point de vue de l’utilisateur, ce changement est pratiquement imperceptible –
il semble toujours que seul l’interpréteur exécute le code source, instruction par instruction.

Quel que soit le langage choisi, certaines choses restent les mêmes lors de l’écriture d’un
programme. Avant tout, une étape importante, et probablement la plus difficile, consiste à
définir correctement le problème que nous voulons résoudre. Ce n’est qu’ensuite que nous
cherchons la solution optimale, que nous présenterons enfin sous la forme d’un programme
écrit dans le langage choisi.

Donc, avant de commencer à expliquer quelque chose à l’ordinateur, en d’autres termes

avant d’écrire un programme, vous devez comprendre exactement ce que vous voulez
atteindre et comment vous voulez y parvenir. Ensuite, la solution proposée et écrite sous
forme de programme doit être 100 % non ambiguë – l’ordinateur ne peut rien deviner.

Un exemple simple dans un autre domaine : il vous est probablement arrivé d’acheter un
meuble à monter vous-même. L’assemblage est un problème qui vous est confié en tant
qu’acheteur. Pour vous aider, vous recevez un ensemble d’instructions qui vous guident dans
tout le processus. Vous agissez alors comme un interpréteur, en suivant un programme qui
vous permet de mener la tâche à bien. Le succès de votre mission dépend de la qualité de
ces instructions : sont-elles précises, non ambiguës, et correspondent-elles bien au meuble
acheté ? Sinon, vous risquez de construire non pas le meuble de vos rêves, mais une
construction surréaliste venue d’une autre dimension.

Pour que les instructions soient bonnes, leur concepteur doit savoir exactement ce qu’elles
doivent illustrer, dans quel ordre les actions doivent être réalisées, à quelles étapes on risque
de se tromper, etc. Et bien sûr, il doit connaître l’effet attendu à la fin.

1.1.4 Quelques mots de plus sur JavaScript

Comme nous l’avons déjà mentionné, JavaScript est un langage de programmation

interprété. Comme la plupart des langages interprétés, c’est aussi un langage de haut niveau
(c’est-à-dire relativement facile à comprendre pour les humains et nous éloignant des détails
matériels).

Au début des années 1990, toutes les pages web étaient statiques. Les choses ont changé en
1995, lorsque la société Netscape a embauché Brendan Eich et lui a confié la mission de
développer un nouveau langage pour son navigateur Netscape Navigator. Le nouveau
langage s’appelait LiveScript, mais peu après son nom fut changé en JavaScript. Sa tâche
principale était d’ajouter du dynamisme aux sites web, permettant par exemple des
interactions plus complexes avec l’utilisateur. Ainsi commença la carrière de JavaScript.

1.1.5 Programmation côté client vs côté serveur

L’utilisation de JavaScript sur les sites web, qui avec le temps est devenue de plus en plus
complexe et souvent dotée de logiques très sophistiquées, est appelée programmation côté
client. Le code à exécuter est chargé avec la page dans le navigateur, du côté de l’utilisateur,
et l’interpréteur intégré au navigateur permet son exécution.

Aujourd’hui, JavaScript est le seul langage pris en charge par tous les grands navigateurs web,
et environ 95 % des pages web dans le monde contiennent du code JavaScript. Dès le début,
les pages web ont utilisé JavaScript côté client pour ajouter de l’interactivité et modifier
dynamiquement le contenu.

Mais aujourd’hui, JavaScript est bien plus que cela, car il propose de nombreux frameworks
puissants pour construire d’énormes applications web complexes et des réseaux sociaux
(vous avez sans doute entendu parler de frameworks comme React ou Angular).

Tout cela fonctionne sur une grande variété d’équipements, des stations de travail très
performantes aux simples smartphones. Grâce à la puissance de JavaScript, nous pouvons
commander de la nourriture, jouer à des jeux dans le navigateur, regarder des films sur des
plateformes de streaming et rester en contact permanent avec les personnes qui comptent
pour nous. JavaScript est si populaire que de plus en plus d’efforts sont consacrés à son
utilisation, pas seulement côté client.

Avec le temps, JavaScript a commencé à apparaître dans d’autres domaines, comme la

programmation côté serveur d’applications web complexes, également appelée back-end.
Ces programmes sont exécutés sur des serveurs, traitant des données (par ex. depuis des
bases de données), qui après traitement sont disponibles côté client. La flexibilité de ce
langage et sa relative simplicité l’ont rendu encore plus utile, par exemple dans les
applications mobiles, ou même dans la programmation de drones (certains UAV exécutent
des programmes écrits en JavaScript).

1.1.6 Est-ce le langage de programmation parfait ? – inconvénients

Nous disons que JavaScript est un langage mature, ce qui signifie que la plupart des
fonctionnalités sont déjà implémentées et stables, et qu’il est peu probable que de grands
changements apparaissent dans le langage. Depuis 2015, de nombreux aspects de JavaScript
ont évolué, et de nombreuses nouvelles fonctionnalités ont été ajoutées. Beaucoup de ces
changements ont été introduits pour faciliter la migration vers JavaScript des programmeurs
connaissant d’autres langages populaires, avec lesquels JavaScript différait fortement sur
certains points, comme la gestion des objets.

On peut toujours utiliser le langage à l’ancienne, mais il est plutôt recommandé d’utiliser le
JavaScript moderne.

Mais… il n’existe pas de solutions idéales, et donc pas de langage de programmation parfait
pour toutes les applications. Chacun a ses propres limites, et JavaScript ne fait pas exception.
Malgré sa popularité et son succès, JavaScript n’est pas un langage parfait. De par sa nature,
il ne convient pas à certaines applications. Par exemple, il est inutile de l’utiliser pour écrire
des programmes nécessitant des calculs mathématiques avancés ou des performances très
élevées.

Certaines limitations viennent du concept même du langage, mais la majorité est liée à la
plateforme sur laquelle nous l’utilisons. Cela se remarque surtout lors de l’écriture de code
exécuté dans un navigateur, ce que nous avons appelé plus tôt le côté client. Dans ce cas,
JavaScript est limité par le fait que les navigateurs, pour des raisons de sécurité, exécutent le
code des scripts dans un environnement bac à sable (séparé du monde extérieur), ce qui
empêche l’accès aux fichiers et ressources locales (c’est-à-dire ceux présents sur l’ordinateur
où le navigateur est lancé).

Un autre inconvénient est que, comme le code n’est pas compilé, il est transmis au
navigateur dans une forme identique ou très proche de celle que nous avons écrite. Pourquoi
est-ce un problème ? Parce que tout le monde peut lire facilement notre solution et l’utiliser
(en copiant des morceaux ou même la totalité) sans notre autorisation pour écrire son
propre programme.

Un moyen de protection est l’obfuscation du code, qui consiste à transformer notre script
final en une forme moins lisible (par exemple en générant des noms de variables et de
fonctions courts et aléatoires, en supprimant les retours à la ligne, etc.). Mais le fait est que si
quelqu’un veut vraiment voler notre code JavaScript, il y a très peu de choses que nous
pouvons faire pour l’en empêcher.

1.1.7 Est-ce le langage de programmation parfait ? – avantages

D’un autre côté, JavaScript possède de nombreux avantages par rapport aux autres langages
de programmation, et l’un des plus grands est l’existence d’une communauté très active et
solidaire. Il est facile de trouver des solutions aux problèmes courants et d’obtenir de l’aide
en général. Cela signifie aussi que les outils liés à JavaScript sont constamment développés.

Un autre grand atout est le nombre immense de frameworks et de bibliothèques prêts à

l’emploi, qui fournissent la plupart des fonctionnalités couramment nécessaires. Le langage
lui-même est relativement facile à apprendre et permet de se concentrer sur le travail plutôt
que de lutter contre la syntaxe (c’est-à-dire la manière de construire les instructions qui
composent le code de notre programme).

De plus, JavaScript ne vous oblige pas à acheter des outils coûteux pour travailler :
d’excellents outils sont déjà intégrés directement dans votre navigateur. Enfin, et ce n’est pas
le moindre avantage, de grands acteurs comme Google, Facebook et Mozilla soutiennent
activement les outils JavaScript et leur développement.

Cependant, ce qui est un avantage pour certains peut se révéler un inconvénient pour
d’autres. Un exemple est la typisation dynamique propre à JavaScript. En résumé, cela
signifie que nous pouvons stocker des données de n’importe quel type dans une variable
(une variable étant un conteneur dans lequel nous conservons les données que nous allons
utiliser).

Par exemple, pendant l’exécution d’un programme, nous pouvons stocker le nombre 10 dans
une variable, puis dans l’étape suivante utiliser la même variable pour y stocker la chaîne de
caractères "abc" (ce qui efface automatiquement la valeur précédente – ne vous inquiétez
pas si vous ne comprenez pas tout de suite, nous reviendrons plus tard sur tous ces termes).

La plupart du temps, c’est très pratique, mais certains estiment que cette caractéristique du
langage est un inconvénient. Selon eux, elle facilite les erreurs dans certaines situations. Pour
remédier à cela, un nouveau langage appelé TypeScript a été introduit, ajoutant la typisation
statique (où une variable ne peut contenir qu’un seul type de données, par exemple
uniquement des nombres, pendant toute l’exécution du programme).
Rappelez-vous aussi que si vous apprenez à programmer dans un langage, il vous sera
généralement beaucoup plus facile d’apprendre le suivant, qui pourra être plus adapté pour
résoudre certains problèmes.

Mais commençons avec JavaScript, qui, grâce à sa syntaxe flexible et simple, est parfait
comme premier langage d’apprentissage.

1.1.8 Préparons-nous à travailler

Comme nous l’avons mentionné plus tôt, JavaScript peut être utilisé dans divers
environnements, bien que le plus souvent ce soit un navigateur web ou un serveur avec un
environnement Node.js.

Chaque environnement impose une manière légèrement différente d’utiliser ce langage, et

certains mécanismes ou fonctions spécifiques apparaissent.

Cependant, la partie essentielle du langage, son noyau, reste identique.

Dans cette partie du cours, nous allons apprendre à programmer en utilisant ce noyau
immuable de JavaScript : comment déclarer des variables, écrire des fonctions, des
instructions conditionnelles ou des boucles – tout cela étant utilisable de la même façon
dans n’importe quel environnement où nous décidons d’utiliser ce langage.

Programmer dans n’importe quel langage n’est pas facile à apprendre, et vous pourrez vous
sentir submergé par tant de nouvelles informations. Mais si vous restez persévérant et
concentré, vous serez capable d’écrire rapidement de petits scripts, et il n’existe pas d’autre
méthode pour apprendre la programmation que d’écrire beaucoup, beaucoup de code.

Le plus important est de ne pas abandonner, même lorsque vous êtes bloqué : faites une
pause, allez marcher, revenez avec un esprit plus frais et essayez à nouveau. En fin de
compte, c’est la persévérance qui mène à la réussite.

Maintenant, commençons !
1.2.1 Outils de développement

Comme toute autre tâche, la programmation nécessite des outils et un espace de travail
appropriés. Le développement logiciel, dans la plupart des cas, requiert un éditeur de code
et un compilateur ou interpréteur d’un langage donné. Il s’agit du minimum requis, que nous
pouvons enrichir au besoin avec divers autres outils.

À ce stade du cours, en plus de l’éditeur de code et de l’interpréteur JavaScript, nous

pouvons aussi utiliser le débogueur, qui est un outil permettant, entre autres, de mettre en
pause le programme à l’endroit indiqué et d’analyser son état actuel (par ex. les valeurs des
variables sélectionnées).

Les outils en question devront bien sûr être exécutés sur l’ordinateur. À ce stade, ses
performances ne sont pas particulièrement importantes, et toute machine capable de gérer
les tâches bureautiques courantes suffira. Il est donc fortement recommandé de travailler sur
un ordinateur de bureau ou un ordinateur portable.

Il est indéniable que la taille du moniteur influencera le confort de travail. Plus l’écran est
grand, plus il sera facile de placer l’éditeur de code, l’interpréteur et d’autres contenus (par
ex. ce cours) côte à côte. Dans des conditions normales de travail, les programmeurs utilisent
très souvent plusieurs moniteurs.

Le système d’exploitation n’a pas d’importance, car l’outil approprié peut être trouvé pour
Windows, macOS et Linux.

À ce moment, deux choix s’offrent à vous. Vous pouvez installer tous les outils nécessaires
sur votre machine et travailler dans un environnement local. C’est l’approche privilégiée, car
c’est ainsi que cela se passe la plupart du temps dans les projets commerciaux réels. Vous
pouvez également personnaliser le tout selon vos besoins.

Une autre approche consiste à utiliser des outils en ligne. Ils peuvent être pratiques, car vous
n’avez rien à installer ni à configurer – ils fonctionnent immédiatement. La plupart
permettent de stocker votre travail dans un cloud afin que vous puissiez y accéder depuis
différents appareils, mais en contrepartie, ils manquent d’options de personnalisation et
nécessitent une connexion Internet permanente.

Tout le code que vous verrez dans ce cours a été testé à la fois dans des environnements
locaux et en ligne, donc les deux options sont valides. Enfin, nous pouvons passer au choix
des outils.

1.2.2 Environnement de développement en ligne

Les environnements en ligne, communément appelés code playgrounds, sont des sites qui
agissent comme un éditeur simple et un environnement d’exécution. Tous offrent des
ensembles de fonctionnalités similaires. Ils diffèrent par leur interface utilisateur, mais en
principe, ils se comportent de façon semblable. Ils vous permettent d’écrire du code, de
l’exécuter pour des tests, et le plus souvent de le partager avec d’autres utilisateurs.

Dans le cas de JavaScript, où la préparation d’un environnement local pleinement fonctionnel

revient en réalité à installer un éditeur de code et à lancer le navigateur, ils ne sont pas aussi
importants que les environnements de développement classiques. Ils sont principalement
utilisés comme plateformes d’entraînement et de test, ou comme espaces de publication de
solutions exemples à des problèmes de programmation.

Parmi les programmeurs JavaScript, les plus populaires sont :

 JSFiddle

 CodePen

 JsBin

 Plunker

Au cours de cette formation, nous utiliserons un environnement en ligne intégré à la

plateforme de formation. OpenEDG fournit un environnement simple pour écrire et exécuter
du code dans plusieurs langages de programmation, dont JavaScript. Grâce à cela, vous
pourrez pratiquer immédiatement tout ce dont nous parlerons.

N’oubliez pas, cependant, que cette plateforme est une solution purement didactique et de
test, et qu’elle ne peut en aucun cas être utilisée comme un environnement de
développement complet. Elle est néanmoins idéale pour nos besoins, car dans la plupart des
cas, nous pourrons oublier l’environnement web des programmes écrits en JavaScript, y
compris les éléments HTML. Cela nous permettra de nous concentrer uniquement sur
l’apprentissage du langage JavaScript lui-même.

Il est toutefois fortement recommandé de mettre également en place votre propre

environnement de développement local. Ce n’est pas difficile, comme vous le verrez
rapidement, et cela vous permettra de réaliser certains exercices d’une manière beaucoup
plus proche du développement logiciel réel. Si, plus loin dans le cours, un exercice devait être
réalisé dans un tel environnement, nous l’indiquerons clairement.

1.2.3 Environnement de développement local

Comme nous l’avons déjà écrit, les exigences de JavaScript pour l’environnement de
développement sont très modestes. Dans la plupart des cas, en particulier au début, trois
éléments suffisent : un éditeur de code, un interpréteur (c’est-à-dire un environnement
exécutable) et un débogueur.
Selon le niveau de sophistication, la complexité du projet écrit ou l’environnement pour
lequel nous écrivons nos programmes (côté client, côté serveur, mobile), d’autres outils
peuvent également être nécessaires.

Ceux-ci incluent notamment :

 gestionnaires de paquets – permettant de gérer les bibliothèques (contenant des

solutions prêtes à l’emploi que nous pouvons utiliser dans nos programmes) ou les
composants de l’environnement de développement (par ex. npm ou yarn) ;

 task runners et module bundlers – utilisés, en termes simples, pour automatiser le

processus de développement logiciel et fusionner le code résultant de nombreux
fichiers et bibliothèques (par ex. Grunt ou Webpack) ;

 frameworks de test – permettant de tester automatiquement la justesse de notre

programme afin de détecter d’éventuelles erreurs (par ex. Mocha, Jasmine ou Jest) ;

 analyseurs de sécurité – utilisés pour contrôler la sécurité de notre solution (par ex.
Snyk, RetireJS ou OWASP Dependency Check).

L’ouverture des environnements de développement web est à la fois une bénédiction et une
malédiction. Nous avons le choix parmi des centaines de composants, avec lesquels nous
pouvons créer l’environnement le plus confortable pour nous.

Cependant, leur quantité, ainsi que les changements dynamiques des outils particuliers ou
même simplement les tendances parmi les programmeurs, rendent difficile le suivi de tout ce
qui se passe dans ces environnements.

Mais pour nous, c’est un problème pour un avenir lointain.

Pour l’instant, nous avons besoin du trio minimal : un éditeur de code, un interpréteur et un
débogueur.

1.2.4 Éditeur de code

Le code de presque tous les langages de programmation est composé sous une forme de
texte. Donc, pour écrire du code, nous avons besoin d’un éditeur de texte. Mais il doit s’agir
d’une application qui écrit du texte brut (il ne peut pas s’agir d’un éditeur de texte enrichi,
comme MS Word). En d’autres termes, un simple bloc-notes capable d’écrire des fichiers .txt
suffit pour écrire du code, bien qu’il soit beaucoup plus facile d’utiliser un éditeur de code
dédié.

Le marché est plein d’éditeurs de code professionnels, gratuits ou payants. Certains sont
universels, tandis que d’autres sont réservés à des langages spécifiques. Le principal avantage
d’utiliser un éditeur de code dédié est la coloration syntaxique, l’autocomplétion du texte et
la vérification des erreurs. Cela améliore l’efficacité du travail et la compréhension du code,
et réduit le nombre d’erreurs et de fautes de frappe.
Il existe de nombreux bons éditeurs de code, mais il peut être difficile de choisir celui qui
vous conviendra. Voici quelques-uns des plus populaires :

 Visual Studio Code

[Windows, macOS, Linux]
Éditeur de code puissant, gratuit pour un usage personnel comme commercial. Il est
rapidement devenu l’un des favoris en matière de développement web. Il dispose de
fonctionnalités intégrées comme un débogueur JavaScript, ainsi que des outils pour
optimiser les projets web. Il est également hautement personnalisable grâce à son
système d’extensions (dont beaucoup sont spécialement dédiées au langage
JavaScript).

 WebStorm
[Windows, macOS, Linux]
Un environnement de développement commercial populaire, dans lequel l’éditeur de
code n’est qu’un des nombreux éléments d’un vaste ensemble d’outils destinés à
améliorer le développement de code (par ex. le support des tests). Conçu pour de
grands projets, il peut s’avérer trop lourd et complexe pour de petits programmes.
Bien qu’il soit destiné à un usage commercial, il est possible d’obtenir une licence
éducative gratuite.

 Sublime Text
[Windows, macOS, Linux]
Éditeur de code rapide et facile à utiliser, avec de nombreuses fonctionnalités
avancées comme l’édition multi-lignes, la recherche rapide, et d’autres. Une version
d’essai est disponible, mais pour une utilisation à long terme, une licence doit être
achetée pour un usage privé comme commercial.

 Notepad++
[Windows]
Éditeur de texte et de code gratuit et léger. Le programme est petit et rapide, prend
en charge des dizaines de langages de programmation, et peut être enrichi avec des
plugins. Il est peut-être ancien et peu esthétique, mais reste efficace.

Il existe de nombreux autres éditeurs de code, gratuits comme payants, et vous pouvez
utiliser celui qui vous convient le mieux. Beaucoup de développeurs utilisent, entre autres,
des éditeurs en console, dont le légendaire vim. Les éditeurs en console ne s’exécutent pas
dans un environnement graphique, mais dans une console texte. Cependant, vous ne devriez
vous tourner vers de telles solutions que si les tâches que vous allez effectuer vous
paraissent trop simples et que vous souhaitez compliquer un peu votre vie.

1.2.5 Interpréteur
Nous avons déjà un peu parlé de l’interpréteur et de son rôle. Il fonctionne comme un
environnement d’exécution pour notre programme. Il vérifie si nous avons commis des
erreurs formelles, par exemple une faute de frappe dans le nom d’une fonction ou l’oubli de
fermer une parenthèse, puis il exécute le programme instruction par instruction.

Le choix de l’interpréteur JavaScript dépendra de la plateforme pour laquelle nous écrivons

notre logiciel. Par exemple, si nous voulons écrire une simple application côté serveur, nous
choisirons presque certainement l’environnement Node.js, que nous devrons installer
directement sur notre système d’exploitation. Dans le cas des logiciels côté client, notre
interpréteur sera tout simplement le navigateur web que vous avez déjà installé (car
autrement, comment liriez-vous ce cours ?).

Notre cours porte sur le JavaScript de base, c’est-à-dire les éléments du langage qui seront
tout aussi utiles dans les solutions côté client, côté serveur et mobiles. Nous pouvons donc
les pratiquer dans n’importe quel environnement, en utilisant n’importe quel interpréteur. Le
moyen le plus simple consiste à se limiter à un navigateur web.

Comme nous l’avons déjà dit, pratiquement tous les navigateurs possèdent un moteur
JavaScript intégré (ou interpréteur), mais nous recommandons vivement Chrome de Google,
ou Firefox de Mozilla. Tous deux sont réputés pour leur efficacité et leurs outils avancés
intégrés pour les développeurs web (c’est-à-dire vous). Ils sont disponibles pour Windows,
macOS et Linux.

N’oubliez pas de mettre régulièrement à jour le navigateur choisi et d’utiliser la version la

plus récente. Cela est particulièrement important lorsqu’on travaille avec JavaScript. Le
langage évolue constamment, avec l’ajout de nouvelles fonctionnalités et de nouveaux
mécanismes. Il se peut que votre navigateur préféré, mais un peu ancien, ne prenne pas en
charge certaines fonctionnalités du langage. Votre navigateur est désormais un outil, alors
essayez de le maintenir en bon état en le mettant régulièrement à jour.

1.2.6 Débogueur

Les programmes informatiques sont des bêtes compliquées, comportant des milliers voire
des millions de lignes de code (mais rassurez-vous, nous commencerons avec seulement
quelques-unes). Avec une telle complexité et une telle taille, il est impossible de produire du
code sans aucune erreur.

Certains types d’erreurs, en particulier les erreurs logiques (formellement, le programme est
écrit correctement, mais il se peut que nous ayons inventé une mauvaise solution au
problème), ne peuvent être trouvés qu’au moment de l’exécution du programme, et souvent
seulement dans des circonstances particulières. Il est très difficile de savoir exactement ce
qui se passe à l’intérieur d’un programme qui s’exécute à toute vitesse, et c’est pour ce type
de problème que les débogueurs existent.
Un débogueur est un outil qui vous permet de ralentir ou même d’arrêter l’exécution d’un
programme, de lancer les instructions pas à pas, et d’observer et analyser l’état du
programme à tout moment.

Heureusement, au moment où nous avons décidé d’utiliser le navigateur web comme

environnement d’exécution et interpréteur JavaScript, nous avons également obtenu un
débogueur. Tous les navigateurs modernes sont équipés d’outils de développement. En
fonctionnement normal, ils sont invisibles, et il faut les activer dans les options du navigateur
(nous en parlerons davantage dans le prochain chapitre).

Selon le navigateur, nous y trouverons divers outils, mais il y aura certainement :

 l’inspecteur – qui permet, par exemple, d’analyser les éléments HTML individuels
d’un site web ouvert ;

 la console JavaScript – qui affiche toutes les informations relatives aux erreurs, et
permet également d’exécuter des commandes JavaScript uniques dans le contexte de
la page courante ;

 le débogueur – qui, entre autres, montre les valeurs actuelles des variables, et
permet de mettre en pause l’exécution du code à l’endroit indiqué et de travailler pas
à pas (c’est-à-dire exécuter les instructions du programme une par une).

Comment activer les outils de développement ? Malheureusement, il n’existe pas de réponse

unique ; cela dépend du navigateur que vous utilisez (parfois aussi de sa version) et du
système d’exploitation. Les interfaces des navigateurs changent assez souvent, il vaut donc
mieux apprendre les bons raccourcis plutôt que de chercher l’option appropriée dans le
menu.

Essayez les combinaisons de touches suivantes :

 Systèmes Windows et Linux, tous les navigateurs courants sauf Internet Explorer et
Edge :

 Système Windows, Internet Explorer et Edge :

 Système macOS, tous les navigateurs courants :

Dans le prochain chapitre, nous reviendrons sur ce sujet et apprendrons encore quelques
éléments à propos de ces outils utiles.

Dans le chapitre suivant, nous écrirons notre premier code JavaScript. Nous le testerons
d’abord dans l’environnement d’exécution intégré à notre plateforme de formation. Nous
l’utiliserons également pour vérifier le fonctionnement de notre environnement de
développement local. Alors, assurez-vous que les outils que vous avez choisis sont installés et
que vous pouvez les lancer. Si vous ne savez toujours pas quoi choisir, nous vous suggérons
d’utiliser l’environnement local avec Visual Studio Code (notre éditeur de code) et Chrome
(navigateur web avec interpréteur et débogueur JavaScript).
1.3.1 Le programme « Hello, World! »

Pourquoi « Hello, World! » ? Depuis près de 50 ans, cette phrase et ses variantes marquent le
moment où quelqu’un apprend un nouveau langage de programmation, bien que ce soit plus
une tradition qu’autre chose. L’expression a été utilisée il y a longtemps dans un ouvrage très
important sur le langage C, mais le texte en lui-même importe peu.

L’idée est d’afficher quelque chose à l’écran en utilisant un langage spécifique.

Premièrement, cela permet de voir la syntaxe de base du langage et de la comparer avec
d’autres langages de programmation. Deuxièmement, c’est un programme très simple, que
n’importe qui peut facilement écrire ou copier sur internet pour vérifier si ses outils et son
environnement sont correctement configurés. Troisièmement, c’est un programme qui
produit un résultat, ce qui permet d’obtenir un retour visuel sur son exécution correcte ou
non.

Dans le cas de JavaScript côté client, afficher quelque chose à l’écran peut être compris de
deux manières.

D’abord, JavaScript côté client est toujours exécuté dans le contexte d’un site web et permet
de manipuler les éléments de ce site. Nous pouvons donc, par exemple, utiliser la fonction
appropriée pour insérer du texte, modifier un titre, créer un tableau, etc. sur la page. De
cette façon, nous contrôlons la partie visuelle du site web.

Ensuite, nous pouvons utiliser la console comme écran pour écrire certaines informations. La
console, comme nous l’avons mentionné dans le chapitre précédent, fait partie des outils de
développement. Elle n’est donc pas visible par défaut et doit être activée correctement (nous
en avons également parlé dans le chapitre précédent). Pour nos besoins, il sera beaucoup
plus pratique d’utiliser la console, car nous éviterons une analyse approfondie de la structure
du site web.

Mais qu’est-ce qu’une console, en réalité ? Tout d’abord, c’est un endroit où s’affichent
différents messages, normalement invisibles pour l’utilisateur du navigateur. Ces messages
peuvent, par exemple, être générés par l’interpréteur JavaScript lorsqu’il rencontre une
erreur, ou lorsqu’on lui demande explicitement de les afficher en appelant la fonction
appropriée. Ensuite, nous pouvons exécuter des instructions JavaScript individuelles dans la
console, qui seront exécutées dans le contexte de la page web actuellement chargée (nous
en reparlerons dans un instant).

La fonction de base qui permet d’écrire des informations dans la console est console.log.

Ainsi, pour faire référence à l’éternel « Hello, World! », nous devrions l’appeler de la manière
suivante :

console.log("Hello, World!");

Nous pouvons considérer console.log comme une fonction*. En réalité, log est la fonction, et
console est l’objet auquel cette fonction appartient.
* Ce type de fonction, qui appartient à un objet, est généralement appelé méthode. Mais
encore une fois, pour simplifier les choses pour l’instant, supposons qu’il s’agit simplement
d’une fonction ordinaire – cela ne nous gênera pas du tout (nous apprendrons les objets
beaucoup plus tard).

Une fonction est un morceau de code qui permet d’accomplir une tâche spécifique (dans
notre cas, afficher quelque chose dans la console). Les fonctions prennent souvent des
arguments, c’est-à-dire des données qu’elles utiliseront pendant leur exécution. En
JavaScript, nous exécutons une fonction en l’appelant, c’est-à-dire en écrivant son nom suivi
de parenthèses, dans lesquelles sont placés les arguments (si la fonction n’a pas besoin
d’arguments, les parenthèses restent vides). Dans notre exemple, l’argument est le texte que
nous voulons afficher. Remarquez que pour indiquer que « Hello, World! » est du texte, nous
le plaçons entre guillemets.

Pour signaler à l’interpréteur où se termine la commande, nous mettons un point-virgule à la

fin de l’appel de fonction. Dans ce cas, l’interpréteur s’en sortirait sans cette aide, mais c’est
une bonne habitude de terminer chaque commande par un point-virgule, afin de ne pas
l’oublier lorsque cela sera vraiment nécessaire.

Nous savons déjà ce qu’il faut écrire, et la seule question est : où devons-nous le faire ?

1.3.2 Environnement de développement en ligne

Dans l’éditeur, vous devriez voir le morceau de code que nous venons de discuter, contenant
la fonction console.log. Essayez de l’exécuter.
Vous devez appuyer sur le bouton en surbrillance avec l’icône lecture, situé juste au-dessus
de l’éditeur.

Résultat : la fenêtre inférieure, qui simule la console, devrait afficher :

Output

Hello, World!

Retournez ensuite dans l’éditeur et changez le mot "World" par votre prénom. Relancez le
programme et vérifiez ce qui apparaît dans la fenêtre de la console.
Félicitations, vous venez de modifier un programme écrit en JavaScript.

Nous pouvons discuter de votre premier programme JavaScript à partir de cet exemple. Vous
avez appris sa syntaxe, vous l’avez exécuté en ligne, vérifié son effet, et même modifié vous-
même. Vous pouvez tester tous les exemples que nous allons aborder dans ce cours de cette
manière.

Cependant, dans le chapitre précédent, nous vous avons encouragé à configurer votre
environnement de développement local. Il serait donc bon de vous montrer comment
exécuter ce même exemple dans un tel environnement. Cela nécessitera toutefois une
introduction un peu plus longue.
1.3.3 Environnement de développement local

Le JavaScript côté client est un langage du web, et il n’existe qu’à l’intérieur de l’écosystème
web. Dans ce contexte, JavaScript ne peut pas exister tout seul. Le code JavaScript doit être
intégré dans un document HTML.

Lorsque nous avons utilisé l’environnement en ligne pour exécuter notre programme,
certains aspects étaient cachés. Cette fois, nous allons devoir les examiner de plus près.

Quelques mots sur HTML

HyperText Markup Language, ou HTML en abrégé, est un ensemble de balises utilisées pour
décrire la structure d’un site web. Il permet de donner à une page le format d’un document
contenant des sections, des en-têtes, des paragraphes, des listes, etc.

L’HTML est clairement au-delà du cadre de ce cours, donc nous ne présenterons que
quelques notions de base, juste assez pour comprendre où et comment exécuter du code
JavaScript associé à une page donnée.

Les types de balises sont prédéfinis. Par exemple :

 la balise qui définit un paragraphe est <p>

 la balise pour un titre de premier niveau (le plus grand) est <h1>.

Le nom de la balise doit être placé entre crochets angulaires. Les balises sont généralement
utilisées par paires, délimitant une certaine zone du document (on a une balise ouvrante et
une balise fermante). La balise fermante est différente de la balise ouvrante, car un slash
précède le nom.

Exemple d’un paragraphe :

<p>Ceci est juste un paragraphe ordinaire.</p>

Souvent, les balises peuvent (et parfois doivent) être placées à l’intérieur d’autres balises. Par
exemple, notre paragraphe devrait être placé à l’intérieur des balises <body>, qui délimitent
la partie principale du document.

<body>

<p>Ceci est juste un paragraphe ordinaire.</p>

</body>

Document HTML minimal

Essayons de créer un HTML minimal définissant une page vide :

<!DOCTYPE html>
<html>

<head>

<title>Page vide</title>

</head>

<body>

</body>

</html>

 La déclaration <!DOCTYPE html> n’est pas une balise classique : elle indique
simplement au navigateur que le document est conforme au standard HTML5.

 La description réelle du document commence avec la balise <html> et se termine

avec </html>. Toutes les autres balises doivent être placées à l’intérieur.

 La balise <head> contient des informations supplémentaires sur le document, dont la

plus basique est la balise <title>, qui définit le titre de la page (souvent affiché dans la
barre de titre du navigateur).

 Après <head>, nous avons <body>, qui contient tout le contenu visible de la page
web.

1.3.4 La balise <script>

Le code JavaScript à exécuter par le navigateur doit être attaché à la page HTML via la balise
<script>.
Il existe deux manières de le faire :

1. Insérer le code directement entre <script> et </script>

o Recommandé uniquement pour du code court.

2. Utiliser l’attribut src pour pointer vers un fichier séparé contenant le code JavaScript.

o Pratique lorsque le même code doit être utilisé sur plusieurs pages.

o Évite la duplication du code et réduit la taille des fichiers HTML.

o L’extension standard des fichiers JavaScript est .js.

⚡ Les balises <script> sont exécutées par le navigateur au moment où elles sont rencontrées
lors du traitement du document (analyse syntaxique).
Elles se trouvent généralement dans la partie <head> de la page, mais on peut en placer
plusieurs dans un fichier.
Pour les scripts externes (src="..."), on peut utiliser les attributs :

 defer → exécuter le script après le chargement complet de la page.

 async → exécuter le script immédiatement et en parallèle au reste de la page.

1.3.5 … et un mot sur le CSS

Le CSS (Cascading Style Sheets) est un langage utilisé avec HTML pour décrire l’apparence
d’une page et de ses éléments.

 L’HTML décrit la structure du document.

 Le CSS décrit sa présentation (style).

Exemple :

 En HTML, on décrit une page avec un titre, deux paragraphes et un tableau.

 En CSS, on définit la police utilisée, la couleur de fond, ou encore le changement

d’apparence du curseur de la souris au survol du tableau.

En résumé :

 HTML = structure

 CSS = style

 JavaScript = interaction/dynamique

⚠️Il n’y a pas de page sans HTML. Mais on peut créer une page sans CSS (elle sera juste «
brute »).

1.3.6 Comment exécuter notre code JavaScript ?

Exemple : imaginons que l’utilisateur ouvre son navigateur et tape https://test.org (adresse
fictive).

 Le navigateur envoie une requête au serveur associé à cette adresse.

 Le serveur répond avec un fichier index.html.

 Le navigateur analyse le fichier HTML et affiche son contenu (texte, paragraphes,

titres…).

👉 Si ce fichier contient un bloc <script> ... </script>, le code JavaScript sera exécuté
automatiquement.
Ainsi, notre code console.log("Hello, World!"); sera affiché dans la console, si les outils
développeurs sont activés.
De la même façon, le script peut être placé dans un fichier externe main.js, référencé par
<script src="main.js"></script>.

On peut aussi :

 Charger un fichier local (index.html) dans le navigateur.

 Ce fichier peut référencer un script JavaScript local (main.js).

Pour ouvrir un fichier local :

 Dans Windows/Linux : Ctrl + O

 Dans macOS : Command + O

1.3.7 D’accord, lançons quelque chose !

Étapes pour tester localement :

1. Ouvrez votre éditeur de code.

2. Créez un fichier index.html :

<!DOCTYPE html>

<html>

<head>

<title>Page vide</title>

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

</head>

<body>

</body>

</html>

3. Créez un fichier main.js contenant :

console.log("Hello, World!");

4. Enregistrez les deux fichiers.

5. Ouvrez index.html dans le navigateur.

6. Activez la console (outils développeurs).

7. Vérifiez que « Hello, World! » s’affiche.

👉 Petit défi : modifiez index.html pour insérer directement le code JavaScript dans la balise
<script>, sans passer par main.js.

1.3.8 Exécuter directement du code dans la console

Une autre option, très pratique, est d’exécuter directement du JavaScript dans la console du
navigateur.

 Ouvrez un nouvel onglet.

 Tapez about:blank (page HTML minimale vide).

 Ouvrez les outils développeurs → onglet Console.

 Tapez :

console.log("Hello, World!");

Résultat : le texte s’affiche dans la console.

Selon le navigateur (Chrome, Firefox…), l’interface peut légèrement varier, mais le principe
reste identique.

1.3.9 Résumé de la section

 Notre premier programme a été exécuté dans un environnement en ligne (simple,

pratique).

 Mais il est aussi important de tester dans un environnement local (réaliste, proche du
travail d’un développeur web).

 Pour de petits tests, on peut utiliser uniquement la console avec une page vide.

 Pour des scripts plus grands, il vaut mieux créer un fichier HTML qui référence un
fichier JavaScript via <script>.

1.3.10 Quiz de la section

1. Utilisez console.log pour afficher votre nom complet dans la console.

2. Affichez votre année de naissance.

3. Réessayez en affichant l’année de naissance sans guillemets.

4. Essayez :

5. console.log("abc", "def", "ghi");

Affichez vos informations sous le format : Nom Prénom (Année) :

o en un seul argument

o en plusieurs arguments séparés

6. Affichez vos informations (nom, prénom, année) sur plusieurs lignes.

7. Utilisez l’opérateur + pour concaténer les chaînes, par exemple :

"abc" + "def" → "abcdef".
Refaites l’affichage de votre nom, prénom et année en utilisant +.

8. Ajoutez les espaces nécessaires pour obtenir le même résultat qu’à la question 4.
2.0.1 Variables

La possibilité d’écrire diverses informations à l’écran, comme « Hello, World! », peut être
amusante pendant un moment, mais ce n’est pas une manière universelle d’écrire des
programmes. Il est temps de commencer à apprendre davantage sur les éléments du puzzle
qui vous permettront, au final, de créer des programmes capables de résoudre de vrais
problèmes.

Il y a un certain nombre de ces éléments, et nous allons les introduire progressivement,

même si ce n’est pas nécessairement dans un ordre chronologique simple. Nous reviendrons
souvent sur ce qui a déjà été présenté, en complétant les informations précédentes par de
nouvelles. Parfois, nous irons aussi de l’avant en utilisant des mécanismes qui ne seront
expliqués en détail qu’un peu plus tard.

Au début, cela peut sembler un peu accablant, mais avec le temps, tout devrait commencer à
s’assembler en une image cohérente.

Le premier élément de programmation dont nous allons parler est la variable. Vous
connaissez peut-être ce terme grâce aux mathématiques, où il désigne un symbole servant
de substitut à différentes valeurs susceptibles de changer. Elles ont un rôle similaire en
programmation.

À quoi servent-elles concrètement ? Comme vous pouvez l’imaginer, la plupart des

programmes sont assez complexes, et il est rare qu’un problème se résolve en une seule
opération. En général, le programme sera constitué de nombreuses opérations
supplémentaires, chacune pouvant produire des résultats intermédiaires nécessaires aux
étapes suivantes. Les variables permettent de stocker ces résultats, de les modifier, ou de les
transmettre aux opérations suivantes.

2.0.2 Donner un nom aux variables

Imaginez les variables comme des conteneurs dans lesquels vous pouvez stocker certaines
informations (ces informations seront appelées valeurs de variable). Chaque conteneur doit
avoir son propre nom, qui nous permettra de le désigner clairement.

En général, nous avons une grande liberté dans le choix de ces noms, mais souvenez-vous
qu’ils devraient avoir un rapport avec ce que nous stockons dans la variable (par ex. height,
color, stepCounter, etc.). Bien sûr, JavaScript ne vérifiera pas la cohérence entre le nom et le
contenu de la variable – il s’agit simplement d’une bonne pratique parmi d’autres, facilitant la
compréhension du code par nous-mêmes et par les autres.

Dans la plupart des langages de programmation, une variable doit être déclarée avant d’être
utilisée, et JavaScript ne fait pas exception. Déclarer une variable revient simplement à «
réserver » son nom. Ainsi, nous informons le programme que, dans la suite de son exécution,
nous allons utiliser ce nom pour accéder à notre conteneur, afin d’en extraire une valeur ou
d’en enregistrer une nouvelle.

En JavaScript, les noms de variables peuvent être constitués de n’importe quelle séquence
de lettres (majuscules et minuscules), de chiffres, de caractères de soulignement (_) et de
signes dollar ($), mais ils ne doivent pas commencer par un chiffre. Il existe aussi une liste de
mots réservés qui ne peuvent pas être utilisés comme noms de variables (voir tableau ci-
dessous).

Un autre point important : l’interpréteur JavaScript distingue les majuscules des minuscules,
même pour les noms de variables. Ainsi, test, Test et TEST seront considérés comme trois
variables différentes.

2.0.3 Déclaration de variables en JavaScript

En JavaScript, nous avons plusieurs façons de déclarer des variables.

La plus ancienne utilise le mot-clé var :

var height;

// Déclaration d’une variable appelée height

Cependant, var est aujourd’hui considéré comme obsolète car il présente des
comportements imprévisibles dans certains cas.
À sa place, nous utilisons let et const, introduits avec ECMAScript 6 (ES6).

let age;

const pi = 3.14159;

// let permet de déclarer une variable dont la valeur peut changer

// const permet de déclarer une constante (valeur qui ne peut pas être réassignée)

2.0.4 Initialisation de variables

Déclarer une variable seule n’a pas beaucoup de sens. Il faut souvent lui attribuer une valeur
initiale.

let name = "Alice";

const year = 2025;

// name contient une chaîne de caractères

// year contient un nombre

Avec let, nous pouvons réassigner une nouvelle valeur plus tard :

let counter = 1;
counter = 2; // réassignation

Avec const, ce n’est pas possible :

const country = "France";

country = "Canada"; // ❌ Erreur : réassignation impossible

2.0.5 Bonnes pratiques pour les noms de variables

Quelques règles de style :

 Utiliser le camelCase (ex. studentName, maxValue).

 Donner des noms significatifs (temperature, userAge).

 Éviter les abréviations inutiles (tmp, val1).

2.0.6 Types de données en JavaScript

Les variables peuvent contenir différents types de données :

 Nombre (entiers, décimaux) :

let price = 19.99;

 Chaîne de caractères (string) :

let message = "Bonjour";

 Booléen (true/false) :

let isOnline = true;

 Objet (ensemble de valeurs) :

let person = { name: "Alice", age: 25 };

 Tableau (array) :

let numbers = [1, 2, 3, 4];

 Null et undefined :

let data = null; // valeur volontairement vide

let info; // valeur indéfinie (undefined)

2.0.7 Affectation et réaffectation

Une fois qu’une variable est créée, nous pouvons changer sa valeur (si elle a été déclarée
avec let).

let score = 10;

score = score + 5; // score devient 15

2.0.8 Portée des variables (scope)

La portée définit où une variable est accessible.

 Avec let et const, les variables sont limitées au bloc où elles sont déclarées :

if (true) {

let x = 10;

console.log(x); // 10

console.log(x); // ❌ Erreur : x n’existe pas ici

 Avec var, elles ont une portée fonctionnelle, ce qui cause parfois des bugs.

2.0.9 Variables globales et locales

 Globale : déclarée en dehors de toute fonction, accessible partout.

 Locale : déclarée à l’intérieur d’une fonction ou d’un bloc, accessible uniquement là.

let globalVar = "Je suis globale";

function test() {

let localVar = "Je suis locale";

console.log(globalVar); // OK

console.log(localVar); // OK

console.log(globalVar); // OK

console.log(localVar); // ❌ Erreur
2.0.10 Constantes et immuabilité

Attention : une constante (const) empêche la réaffectation, mais si la valeur est un objet, ses
propriétés peuvent changer.

const user = { name: "Alice", age: 25 };

user.age = 26; // ✅ autorisé

user = { name: "Bob" }; // ❌ Erreur

2.0.11 Conversion de types

JavaScript convertit automatiquement les types dans certains cas (coercition).

let result = "5" + 2;

console.log(result); // "52" (concaténation string + nombre)

On peut aussi convertir explicitement :

Number("42"); // 42

String(42); // "42"

Boolean(0); // false

2.0.12 Résumé

 Les variables stockent des valeurs temporaires.

 let et const remplacent var.

 let → valeur modifiable, const → valeur non réassignable.

 JavaScript gère plusieurs types (nombre, string, booléen, objet, tableau…).

 Les variables ont une portée (locale ou globale).

 Attention à la conversion automatique des types.

2.1.1 Types de données et conversions de types

Les programmes sont destinés à traiter des données. Qu’il s’agisse d’une application de
boutique en ligne, d’un système de gestion des ressources humaines ou d’un jeu vidéo,
chacun de ces programmes lit, traite et stocke d’énormes quantités de données. Dans le
chapitre précédent, nous avons déjà appris à déclarer, initialiser et modifier les variables qui
permettent de stocker ces données dans le contexte d’un programme en cours d’exécution.
En parlant des variables, le concept de types de données est apparu, et il s’est avéré que le
langage JavaScript est faiblement typé, ce qui permet, entre autres, de changer le type de
données stockées dans une variable.

Nous pouvons diviser les données selon leurs propriétés. Par exemple, vous distinguerez
certainement de manière intuitive les données numériques des données textuelles. Une telle
classification est bien sûr arbitraire. Les nombres peuvent eux-mêmes être divisés en
nombres entiers et en nombres réels.

La distinction des données par types est l’une des caractéristiques de tout langage de
programmation. Chaque type de données est associé à certaines opérations que l’on peut
exécuter sur lui. Habituellement, il existe également des méthodes de conversion des
données entre certains types (par exemple, un nombre peut être converti pour être
enregistré sous forme de chaîne de caractères).

En JavaScript, les types de données sont divisés en primitifs (ou simples) et complexes (ou
composites). Parmi les types primitifs, on trouve les nombres et les chaînes de caractères,
tandis que parmi les types complexes, on compte par exemple les tableaux et les objets.

La différence entre ces types de données est assez bien résumée par leurs noms. Les types
primitifs ne sont pas complexes : si vous stockez une donnée primitive dans une variable, une
seule valeur y sera enregistrée. Cette valeur sera atomique, autrement dit, il ne sera pas
possible d’en extraire des composants. En revanche, les données de types complexes,
comme un tableau, seront composées de plusieurs éléments de types primitifs.

Ainsi, nous allons logiquement commencer par les types primitifs.

Avant de passer à la discussion sur les types de données, nous devons introduire un nouveau
concept : les littéraux.

Les littéraux sont une manière de noter des valeurs spécifiques (données) dans le code du
programme. Les littéraux existent dans pratiquement tous les langages de programmation, y
compris JavaScript. Nous avons déjà utilisé des littéraux dans le chapitre précédent lors de
l’initialisation des variables.

Exemple :

let year = 1990;

console.log(year); // -> 1990

console.log(1991); // -> 1991

console.log("Alice"); // -> Alice

Dans cet exemple, nous déclarons la variable year et nous l’initialisons immédiatement avec
la valeur 1990. Les chiffres 1990, écrits directement dans le code à l’endroit de l’initialisation,
sont un littéral représentant un nombre. La valeur 1990 est affichée dans la console via la
variable year. Ensuite, nous affichons 1991 et "Alice" directement dans la console, en
utilisant là encore des littéraux (un nombre et une chaîne de caractères respectivement).
En JavaScript, presque chaque type de données a son propre littéral.

2.1.2 L’opérateur typeof

Lors de l’étude des types de données en JavaScript, l’opérateur typeof peut être utile. En
réalité, il l’est aussi dans le travail quotidien avec ce langage, donc il est bon de le retenir
pour plus tard. Nous consacrerons un chapitre entier aux opérateurs, mais pour l’instant il
suffit de savoir qu’un opérateur est un symbole ou un mot qui représente une action à
effectuer sur un ou plusieurs arguments. Par exemple, le symbole + est un opérateur à deux
arguments représentant l’addition.

L’opérateur typeof mentionné est unaire (il ne prend qu’un seul argument) et nous informe
sur le type de la donnée fournie. L’argument peut être un littéral ou une variable – dans ce
dernier cas, typeof indiquera le type de la donnée stockée. Cet opérateur retourne une
chaîne de caractères correspondant à l’un des types prédéfinis.

Les valeurs possibles que typeof peut retourner sont :

"undefined"

"object"

"boolean"

"number"

"bigint"

"string"

"symbol"

"function"

Cette liste nous montre les principaux types de données avec lesquels nous travaillerons en
JavaScript.

Exemple :

let year = 1990;

console.log(typeof year); // -> number

console.log(typeof 1991); // -> number

let name = "Alice";

console.log(typeof name); // -> string

console.log(typeof "Bob"); // -> string

let typeOfYear = typeof year;

console.log(typeOfYear); // -> number

console.log(typeof typeOfYear); // -> string

Comme vous pouvez le voir, typeof appliqué au littéral 1991 ou à la variable year initialisée
avec 1990 retourne "number".
Le même test appliqué aux chaînes "Alice" et "Bob" retourne "string".
Ensuite, nous stockons le résultat de typeof year dans une variable typeOfYear. Cette variable
contient la chaîne "number". Si nous vérifions le type de typeOfYear, nous obtenons "string".

Vous pouvez vérifier cet exemple dans un éditeur.

2.1.3 Types de données primitifs

En JavaScript, il existe six types de données primitifs (ou simples) : Boolean, Number, BigInt,
String, Symbol, et undefined. De plus, la valeur primitive null est également considérée
comme un type distinct.
Comme nous l’avons déjà dit, un type primitif est un type de données dont les valeurs sont
atomiques, c’est-à-dire qu’elles représentent un élément unique et indivisible.

Examinons de plus près ces types primitifs.

Boolean

Le type Boolean est un type logique. Il ne peut prendre qu’une des deux valeurs : true ou
false. Il est principalement utilisé pour les expressions conditionnelles, nécessaires pour
décider quelle partie du code doit être exécutée ou combien de fois une action doit être
répétée (on appelle cela une instruction de contrôle de flux, que nous verrons en détail dans
le Module 4).

Les booleans sont aussi souvent utilisés comme drapeau (flag), une variable qui signale
quelque chose pouvant être présent ou absent, activé ou désactivé, etc. Comme toute
variable, un Boolean doit avoir un nom clair et explicite. Il est courant de préfixer le nom d’un
flag par is pour indiquer qu’il s’agit d’une vérification true/false.
Exemple :

let isDataValid = true;

let isStringTooLong = false;

let isGameOver = false;

let continueLoop = true;

console.log(false); // -> false

console.log(typeof false); // -> boolean

console.log(isDataValid); // -> true

console.log(typeof isDataValid); // -> boolean

On peut effectuer des opérations logiques sur des valeurs Boolean, sans conversion
préalable. Certaines sont connues en mathématiques : NOT, AND, OR (correspondant aux
symboles !, && et ||). Nous les étudierons plus en détail dans le chapitre sur les opérateurs.

Number

C’est le type numérique principal en JavaScript, représentant à la fois les nombres réels (par
exemple les fractions) et les entiers. La façon dont ces nombres sont stockés en mémoire
signifie que certaines valeurs peuvent être approximatives (surtout pour les très grands
nombres ou certaines fractions).
Pour garantir la précision des calculs, les entiers en JavaScript sont généralement limités à la
plage de -(2^53 - 1) à (2^53 - 1).

Les nombres permettent toutes les opérations arithmétiques classiques : addition,

soustraction, multiplication et division.

Exemple :

const year = 1991;

let delayInSeconds = 0.00016;

let area = (16 * 3.14);

let halfArea = area / 2;

console.log(year); // -> 1991

console.log(typeof year); // -> number

Par défaut, les nombres sont en base décimale, mais on peut aussi utiliser des préfixes pour
les représenter en :

 Hexadécimal : 0x…

 Octal : 0o…

 Binaire : 0b…

Il est également possible d’utiliser la notation exponentielle : par exemple, au lieu de 9000,
on peut écrire 9e3, et au lieu de 0.00123, 123e-5.

Exemple :

let a = 10; // décimal par défaut

let b = 0x10; // hexadécimal

let c = 0o10; // octal

let d = 0b10; // binaire

console.log(a); // -> 10

console.log(b); // -> 16

console.log(c); // -> 8

console.log(d); // -> 2

let x = 9e3;

let y = 123e-5;

console.log(x); // -> 9000

console.log(y); // -> 0.00123

En plus des nombres classiques, JavaScript dispose de trois valeurs spéciales : Infinity, -
Infinity et NaN (Not a Number).

 Infinity et -Infinity sont ce que l’on attend mathématiquement.

 NaN indique qu’une opération arithmétique n’a pas pu être effectuée (l’argument
n’est pas un nombre ou ne peut pas être converti en nombre).

Exemple :

let a = 1 / 0;
let b = -Infinity;

console.log(a); // -> Infinity

console.log(b); // -> -Infinity

console.log(typeof a); // -> number

console.log(typeof b); // -> number

let s = "it's definitely not a number";

let n = s * 10;

console.log(n); // -> NaN

console.log(typeof n); // -> number

BigInt

Le type BigInt est utilisé moins souvent. Il permet de représenter des entiers de longueur
quasi illimitée. Pour la plupart des opérations numériques normales, le type Number suffit,
mais BigInt est utile pour manipuler de très grands nombres.

Les opérations mathématiques sur BigInt se font comme sur Number, mais la division est
toujours arrondie à l’entier inférieur.

Exemple :

let big = 1234567890000000000000n;

let big2 = 1n;

console.log(big); // -> 1234567890000000000000n

console.log(typeof big); // -> bigint

console.log(big2); // -> 1n

console.log(7n / 4n); // -> 1n

⚠️On ne peut pas mélanger BigInt et Number dans une opération arithmétique.

let big3 = 1000n + 20;

// -> TypeError : Cannot mix BigInt and other types

BigInt n’a pas d’équivalent pour Infinity ou NaN. Toute opération impossible provoque une
erreur.

let big4 = 1000n / 0n; // -> RangeError: Division by zero

String

Le type String représente une séquence de caractères, formant un texte. Les opérations les
plus courantes incluent : concaténation, extraction de sous-chaîne, et vérification de la
longueur. Les chaînes de caractères sont omniprésentes en programmation, et encore plus
en développement web.

Exemple :

let country = "Malawi";

let continent = 'Africa';

console.log(country); // -> Malawi

console.log(typeof country); // -> string

console.log(continent); // -> Africa

console.log(typeof continent); // -> string

On peut utiliser des guillemets simples ou doubles, ou encore des backticks pour
l’interpolation de chaînes. Pour inclure un guillemet à l’intérieur de la chaîne, on peut utiliser
le caractère d’échappement \.

Exemple :

let message1 = 'The vessel \'Mars\' called at the port.';

let message2 = "Cyclone \"Cilida\" to pass close to Mauritius.";

console.log(message1); // -> The vessel 'Mars' called at the port.

console.log(message2); // -> Cyclone "Cilida" to pass close to Mauritius.

Les chaînes sont immutables : toute modification crée en réalité une nouvelle chaîne.

La manipulation de chaînes peut être enrichie avec des méthodes et l’autoboxing,

permettant d’utiliser les méthodes des objets String sur des chaînes primitives. Exemple :
let river = "Mekong";

let character = river.charAt(2);

console.log(character); // -> k

Quelques méthodes et propriétés courantes :

 length : propriété, retourne le nombre de caractères

 charAt(index) : méthode, retourne le caractère à la position index

 slice(beginIndex, endIndex) : méthode, extrait une sous-chaîne

 split(separator, limit) : méthode, découpe la chaîne en tableau selon le séparateur

Exemple :

let str = "java script language";

console.log(str.length); // -> 20

console.log(str.charAt(0)); // -> 'j'

console.log(str.slice(0, 4)); // -> 'java'

console.log(str.split(' ')); // -> ['java', 'script', 'language']

Undefined

Le type undefined n’a qu’une seule valeur : undefined. C’est la valeur par défaut des
variables déclarées mais non initialisées.

let declaredVar;

console.log(typeof declaredVar); // -> undefined

declaredVar = 5;

console.log(typeof declaredVar); // -> number

declaredVar = undefined;

console.log(typeof declaredVar); // -> undefined

Symbol

Le type Symbol est un type primitif complexe et assez peu utilisé. Il n’a pas de littéral et se
crée via un constructeur Symbol(). Chaque symbole est unique, utile pour identifier de
manière unique des propriétés d’objets.

Null

La valeur null est primitive mais son type retourne "object" avec typeof. Elle sert à indiquer
qu’une variable ne contient rien, souvent pour des objets.

let someResource;

console.log(someResource); // -> undefined

console.log(typeof someResource); // -> undefined

someResource = null;

console.log(someResource); // -> null

console.log(typeof someResource); // -> object

2.1.4 Conversions de types

En JavaScript, il est très fréquent de convertir des valeurs d’un type vers un autre, que ce
soit automatiquement (conversion implicite) ou manuellement (conversion explicite).
Comprendre ces conversions est essentiel pour éviter des erreurs logiques.

Conversion implicite

La conversion implicite se produit lorsque JavaScript doit effectuer une opération avec des
valeurs de types différents. Dans ce cas, le moteur tente de convertir automatiquement l’une
des valeurs pour que l’opération soit possible.

Exemples :

// Conversion en string

console.log('5' + 1); // -> '51' (1 est converti en string)

console.log('5' + true); // -> '5true' (true devient 'true')

// Conversion en number
console.log('5' - 1); // -> 4 ('5' devient 5)

console.log('10' * '2'); // -> 20 (les deux chaînes deviennent des nombres)

console.log('10' / '2'); // -> 5

⚠️ Attention aux conversions implicites : certaines peuvent produire des résultats contre-
intuitifs :

console.log(true + false); // -> 1 (true = 1, false = 0)

console.log(5 + null); // -> 5 (null = 0)

console.log('5' - null); // -> 5 ('5' -> 5, null -> 0)

console.log('5' + null); // -> '5null' (concaténation)

Conversion explicite

La conversion explicite (ou casting) est réalisée par le programmeur en utilisant des fonctions
natives de JavaScript :

1. Vers Number : Number(value) ou opérateur unaire +

2. Vers String : String(value) ou concaténation avec ''

3. Vers Boolean : Boolean(value) ou double négation !!

Exemples :

// Conversion en number

console.log(Number('123')); // -> 123

console.log(Number('123abc')); // -> NaN

console.log(+'123'); // -> 123

// Conversion en string

console.log(String(123)); // -> '123'

console.log(123 + ''); // -> '123'

// Conversion en boolean

console.log(Boolean(1)); // -> true

console.log(Boolean(0)); // -> false

console.log(!!'non-empty'); // -> true

console.log(!!''); // -> false

Règles de conversion vers Boolean

En JavaScript, certaines valeurs sont considérées comme falsy, c’est-à-dire qu’elles

deviennent false lorsqu’elles sont converties en Boolean. Les valeurs falsy sont :

 0 et -0

 null

 undefined

 NaN

 '' (chaîne vide)

 false

Toutes les autres valeurs sont truthy, donc converties en true.

console.log(Boolean(0)); // -> false

console.log(Boolean('')); // -> false

console.log(Boolean(null)); // -> false

console.log(Boolean(undefined)); // -> false

console.log(Boolean(NaN)); // -> false

console.log(Boolean(42)); // -> true

console.log(Boolean('hello')); // -> true

Résumé des conversions automatiques

 String + Number → String (concaténation)

 Number + Number → Number (arithmétique)

 Boolean → Number dans les opérations arithmétiques (true = 1, false = 0)

 null → 0, undefined → NaN en contexte numérique

Bonnes pratiques
 1. Éviter les conversions implicites dans les calculs pour limiter les erreurs.

2. Préférer les conversions explicites via Number(), String() ou Boolean().

3. Vérifier les valeurs avant la conversion, notamment pour les chaînes susceptibles de
ne pas contenir un nombre valide.

2.1.5 Opérateurs

En JavaScript, un opérateur est un symbole ou un mot-clé qui indique au moteur du langage

de réaliser une opération spécifique sur une ou plusieurs valeurs (appelées opérandes).

Par exemple, l’opérateur + est un opérateur binaire, car il nécessite deux opérandes et
effectue l’addition :

let a = 5;

let b = 3;

console.log(a + b); // -> 8

Types d’opérateurs

1. Opérateurs arithmétiques
Effectuent des calculs numériques sur les nombres.

Opérateur Description Exemple Résultat

+ addition / concaténation 2 + 3 5

- soustraction 5-2 3

* multiplication 4*3 12

/ division 10 / 2 5

% modulo (reste) 10 % 3 1

** puissance 2 ** 3 8

⚠️L’opérateur + est spécial, car il sert aussi à concaténer des chaînes de caractères :

console.log('Hello' + ' ' + 'World'); // -> "Hello World"

2. Opérateurs de comparaison
Permettent de comparer deux valeurs et retournent un Boolean (true ou false).
Opérateur Description Exemple Résultat

== égalité abstraite 5 == '5' true

=== égalité stricte 5 === '5' false

!= différence abstraite 5 != '6' true

!== différence stricte 5 !== '5' true

> supérieur 7>3 true

< inférieur 2<5 true

>= supérieur ou égal 5 >= 5 true

<= inférieur ou égal 3 <= 7 true

⚠️Astuce : toujours privilégier === et !== pour éviter les conversions implicites de type.

3. Opérateurs logiques
Permettent de combiner ou d’inverser des valeurs Boolean.

Opérateur Description Exemple Résultat

! NON logique (NOT) !true false

&& ET logique (AND) true && false false

` ` OU logique (OR)

let isAdmin = true;

let isLoggedIn = false;

console.log(isAdmin && isLoggedIn); // -> false

console.log(isAdmin || isLoggedIn); // -> true

console.log(!isAdmin); // -> false

4. Opérateurs d’affectation
Servent à assigner des valeurs à une variable.

Opérateur Exemple Équivalent long

= a=5 a=5
Opérateur Exemple Équivalent long

+= a += 3 a=a+3

-= a -= 2 a=a-2

*= a *= 4 a=a*4

/= a /= 2 a=a/2

%= a %= 3 a=a%3

5. Opérateurs unaires et ternaires

 Unaire : agit sur un seul opérande (!, ++, --, typeof)

let x = 5;

console.log(++x); // -> 6 (incrémente avant l'affichage)

console.log(typeof x); // -> "number"

 Tertiaire : forme abrégée d’un if conditionnel :

let age = 20;

let canVote = age >= 18 ? 'Oui' : 'Non';

console.log(canVote); // -> "Oui"

Conversion automatique et opérateurs

Certains opérateurs, notamment +, -, * et /, provoquent des conversions implicites selon les

types des opérandes :

console.log('5' + 2); // -> '52' (concaténation)

console.log('5' - 2); // -> 3 (conversion en number)

console.log('5' * '2'); // -> 10 (conversion en number)

💡 Règle générale :

 Pour + : si l’un des opérandes est une string, l’autre sera converti en string.

 Pour -, *, / : JavaScript tente toujours de convertir les opérandes en number.

2.1.6 Exercices pratiques et conversions de types explicites

Dans cette section, nous allons pratiquer les conversions de types de manière explicite.
Rappelons que JavaScript permet de convertir une valeur d’un type à un autre à l’aide de
fonctions intégrées comme String(), Number() ou Boolean().

Ces conversions sont nécessaires dans de nombreuses situations, par exemple :

 lorsqu’un nombre doit être ajouté à une chaîne de caractères,

 ou lorsqu’un texte doit être interprété comme nombre pour des calculs.

Exemple : Conversion vers String

let str = "texte";

let strStr = String(str);

console.log(`${typeof str} : ${str}`); // -> string : texte

console.log(`${typeof strStr} : ${strStr}`); // -> string : texte

let nr = 42;

let strNr = String(nr);

console.log(`${typeof nr} : ${nr}`); // -> number : 42

console.log(`${typeof strNr} : ${strNr}`); // -> string : 42

let bl = true;

let strBl = String(bl);

console.log(`${typeof bl} : ${bl}`); // -> boolean : true

console.log(`${typeof strBl} : ${strBl}`); // -> string : true

let bnr = 123n;

let strBnr = String(bnr);

console.log(`${typeof bnr} : ${bnr}`); // -> bigint : 123

console.log(`${typeof strBnr} : ${strBnr}`); // -> string : 123

let un = undefined;
let strUn = String(un);

console.log(`${typeof un} : ${un}`); // -> undefined : undefined

console.log(`${typeof strUn} : ${strUn}`); // -> string : undefined

let n = null;

let strN = String(n);

console.log(`${typeof n} : ${n}`); // -> object : null

console.log(`${typeof strN} : ${strN}`); // -> string : null

Exemple : Conversion vers Number

console.log(Number(42)); // -> 42

console.log(Number("11")); // -> 11

console.log(Number("0x11")); // -> 17 (hexadécimal)

console.log(Number("0o11")); // -> 9 (octal)

console.log(Number("0b11")); // -> 3 (binaire)

console.log(Number("12e3")); // -> 12000

console.log(Number("Infinity")); // -> Infinity

console.log(Number("texte")); // -> NaN

console.log(Number(14n)); // -> 14

console.log(Number(123456789123456789123n)); // -> 123456789123456800000

console.log(Number(true)); // -> 1

console.log(Number(false)); // -> 0

console.log(Number(undefined)); // -> NaN

console.log(Number(null)); // -> 0
Exemple : Conversion vers Boolean

console.log(Boolean(true)); // -> true

console.log(Boolean(42)); // -> true

console.log(Boolean(0)); // -> false

console.log(Boolean(NaN)); // -> false

console.log(Boolean("texte")); // -> true

console.log(Boolean("")); // -> false

console.log(Boolean(undefined)); // -> false

console.log(Boolean(null)); // -> false

Exemple : Conversion vers BigInt

Pour convertir une valeur en BigInt, on doit fournir un Number ou une String représentant
un entier. Les valeurs en notation hexadécimale, octale ou binaire sont également autorisées.
Contrairement aux autres conversions, BigInt génère une erreur si la valeur ne peut pas être
convertie.

console.log(BigInt(11)); // -> 11n

console.log(BigInt(0x11)); // -> 17n

console.log(BigInt(11e2)); // -> 1100n

console.log(BigInt(true)); // -> 1n

console.log(BigInt("11")); // -> 11n

console.log(BigInt("0x11")); // -> 17n

console.log(BigInt(null)); // -> Erreur : Impossible de convertir null en BigInt

console.log(BigInt(undefined)); // -> Erreur : Impossible de convertir undefined en BigInt

console.log(BigInt(NaN)); // -> Erreur : NaN ne peut pas être converti en BigInt car ce
n’est pas un entier

⚠️Remarque : Lors du test de ces exemples, la première erreur empêchera l’exécution du

reste du code. Il est conseillé de tester chaque conversion séparément.

2.1.10 Conversions implicites

En JavaScript, les conversions de types ne se produisent pas uniquement lorsqu’on les
demande explicitement. Elles se produisent également automatiquement dans certaines
situations, ce qu’on appelle les conversions implicites.

Prenons un exemple simple (similaire à ce que nous avons vu pour le type String) :

const str1 = 42 + "1";

console.log(str1); // -> "421"

console.log(typeof str1); // -> string

const str2 = 42 - "1";

console.log(str2); // -> 41

console.log(typeof str2); // -> number

Que se passe-t-il exactement ?

 Lorsqu’on additionne un nombre et une chaîne de caractères, JavaScript convertit

automatiquement le nombre en chaîne de caractères, afin que l’opération puisse se
faire.
→ C’est ce qui se passe avec str1 : le 42 est converti en "42", et "42" + "1" donne
"421".

 Lorsqu’on soustrait une chaîne de caractères contenant un chiffre à un nombre,

l’opération est interprétée comme arithmétique. JavaScript convertit alors la chaîne
en nombre pour effectuer la soustraction.
→ C’est ce qui se passe avec str2 : "1" est converti en 1, et 42 - 1 donne 41.

⚠️En résumé :

 Addition avec une chaîne → concaténation (conversion implicite des nombres en

chaînes).

 Autres opérations arithmétiques (-, *, /, %) → conversion implicite des chaînes en

nombres.

Ces conversions implicites sont fréquentes en JavaScript, il est donc important de

comprendre ce mécanisme pour éviter des résultats inattendus.

2.1.11 Exercices pratiques sur les conversions et opérateurs

Question 1 :
Écrivez un code qui crée des variables et les initialise avec des valeurs des types Boolean,
Number, BigInt, String et undefined, en utilisant, lorsque c’est possible, des littéraux et des
fonctions constructeur.

Exemple de solution :

// Utilisation de littéraux

let boolLiteral = true;

let numLiteral = 42;

let bigLiteral = 123456789n;

let strLiteral = "JavaScript";

let undefLiteral;

// Utilisation de fonctions constructeur

let boolConstruct = Boolean(false);

let numConstruct = Number(0);

let bigConstruct = BigInt(9001);

let strConstruct = String("texte");

let undefConstruct = undefined;

console.log(boolLiteral, boolConstruct);

console.log(numLiteral, numConstruct);

console.log(bigLiteral, bigConstruct);

console.log(strLiteral, strConstruct);

console.log(undefLiteral, undefConstruct);

Question 2 :
Affichez toutes les valeurs et tous les types de ces valeurs avec console.log. Essayez d’utiliser
l’interpolation de chaînes pour afficher la valeur et le type en une seule instruction.

Exemple :

console.log(`${boolLiteral} [${typeof boolLiteral}]`);

console.log(`${numLiteral} [${typeof numLiteral}]`);

console.log(`${bigLiteral} [${typeof bigLiteral}]`);

console.log(`${strLiteral} [${typeof strLiteral}]`);

console.log(`${undefLiteral} [${typeof undefLiteral}]`);

Question 3 :
Effectuez une chaîne de conversions : créez un Boolean à partir d’un BigInt, créé à partir d’un
Number, qui lui-même a été créé à partir d’une String.
Commencez avec la valeur "1234". Est-ce possible ?

Exemple :

let str = "1234";

let num = Number(str);

let big = BigInt(num);

let bool = Boolean(big);

console.log(bool); // -> true

console.log(typeof bool); // -> boolean

Question 4 :
Essayez d’additionner deux valeurs du même type et vérifiez le type du résultat. Faites-le
pour tous les types primitifs.

Exemple :

console.log(5 + 10, typeof (5 + 10)); // -> 15 [number]

console.log("Hello " + "World", typeof ("Hello " + "World")); // -> "Hello World" [string]

console.log(true + false, typeof (true + false)); // -> 1 [number]

console.log(123n + 456n, typeof (123n + 456n)); // -> 579n [bigint]

Question 5 :
Essayez d’additionner deux valeurs de types différents et observez les résultats.

Exemple :
console.log(10 + "10", typeof (10 + "10")); // -> "1010" [string]

console.log(true + 10, typeof (true + 10)); // -> 11 [number]

console.log(10n + 10n, typeof (10n + 10n)); // -> 20n [bigint]

// console.log(10n + 10); // -> Erreur : TypeError

Question 6 :
Modifiez la ligne suivante pour obtenir le résultat 43 sans retirer les guillemets autour de
"1" :

const str1 = 42 + "1"; // actuellement "421"

Solution possible :

const str1 = 42 + Number("1");

console.log(str1); // -> 43

console.log(typeof str1); // -> number

Ces exercices permettent de comprendre et de pratiquer les conversions explicites et

implicites, ainsi que l’usage des opérateurs sur différents types primitifs.

2.1.12 Résumé et points clés

1. Types de données en JavaScript

o Les types primitifs : Boolean, Number, BigInt, String, Symbol et undefined.

o La valeur null est considérée comme un type séparé.

o Les types primitifs sont atomiques et immuables.

o Les types complexes, comme les Object et les Array, peuvent contenir
plusieurs valeurs et méthodes.

2. Literals

o Les literals représentent directement une valeur dans le code.

o Exemple : 42, "Hello", true.

3. Opérateur typeof

o Permet de connaître le type d’une valeur ou d’une variable.

o Retourne toujours une chaîne ("string", "number", "boolean", "bigint",

"undefined", "object", "symbol", "function").
4. Conversions de types

o Conversions explicites : via les fonctions String(), Number(), Boolean(),

BigInt().

o Conversions implicites : JavaScript convertit automatiquement les types dans

certaines opérations (ex. addition avec une chaîne transforme le nombre en
chaîne).

o La conversion suit des règles précises pour chaque type :

 String : toutes les valeurs peuvent devenir des chaînes.

 Number : les chaînes numériques, true → 1, false → 0, null → 0,

undefined → NaN.

 Boolean : valeurs falsy (0, NaN, "", null, undefined) → false, le reste →
true.

 BigInt : nécessite une valeur entière ou convertible en entier.

5. Opérations sur types primitifs

o Addition entre Number et String → concaténation.

o Addition entre deux BigInt ou deux Number → somme numérique.

o Les opérations entre BigInt et Number génèrent une erreur.

6. Chaîne de méthodes et autoboxing

o Les valeurs primitives n’ont pas de méthodes intrinsèques, mais JavaScript

crée temporairement un objet correspondant pour exécuter les méthodes
(String, Number, Boolean).

o Exemple : "hello".charAt(1) → 'e' même si "hello" est un primitive.

7. Bonnes pratiques

o Nommer les variables de manière descriptive.

o Utiliser null pour indiquer l’absence de valeur significative.

o Éviter d’utiliser undefined explicitement.

o Tester les conversions et comprendre les résultats, surtout lors du mélange de

types.
2.2 Section 3 – Types de données et conversion de types – Partie 2

2.2.1 Types de données complexes

Nous limiterons la discussion sur les types complexes à seulement deux d’entre eux : les
objets et les tableaux. Malheureusement, même ces types devront être présentés de
manière simplifiée. Cela devrait suffire pour les utiliser dans leur portée de base, mais les
techniques plus avancées qui y sont liées, ainsi que les autres types complexes, seront
introduites uniquement dans les prochaines parties du cours.

Objet

Les objets ont de nombreuses applications en JavaScript. L’une des plus basiques, et en
même temps la seule que nous aborderons maintenant, est de l’utiliser comme une
structure connue en informatique sous le nom d’enregistrement. Un enregistrement est une
collection de champs nommés. Chaque champ a son propre nom (ou clé) et une valeur qui
lui est assignée. Dans le cas des objets JavaScript, ces champs sont généralement appelés
propriétés. Les enregistrements, ou dans notre cas les objets, permettent de stocker
plusieurs valeurs de types différents en un seul endroit. En JavaScript, il existe plusieurs
façons de créer des objets, mais la plus simple et rapide est d’utiliser le literal entre
accolades.

let testObj = {};

console.log(typeof testObj); // -> object

L’objet que nous créons et stockons dans la variable testObj n’est pas particulièrement utile,
car il est… vide. Nous n’avons défini aucun champ, c’est-à-dire aucune paire clé–valeur.
Essayons à nouveau, cette fois en définissant un objet contenant deux champs avec les clés
nr et str.

let testObj = {

nr: 600,

str: "text"

};

Remarquez que nous avons créé des objets avec le même literal, mais en même temps nous
avons créé des propriétés qui sont des paires clé–valeur. Les propriétés sont séparées par des
virgules. Une propriété spécifique (champ) d’un objet peut ensuite être référencée avec la
notation par point. Cette notation nécessite le nom de l’objet (un literal ou le nom d’une
variable contenant l’objet), suivi d’un point, puis du nom du champ (clé).

console.log(testObj.nr); // -> 600

console.log(testObj.str); // -> text

Pourquoi avons-nous besoin d’objets ? La raison la plus simple est le désir de stocker
plusieurs valeurs en un seul endroit, liées entre elles pour une raison quelconque.

Supposons que nous collections des informations sur les utilisateurs de notre système. Les
informations sur un utilisateur unique consisteront en son prénom, son nom, son âge et son
adresse email. Essayons d’écrire un code approprié pour deux utilisateurs, sans utiliser
d’objets pour l’instant.

let name1 = "Calvin";

let surname1 = "Hart";

let age1 = 66;

let email1 = "[email protected]";

let name2 = "Mateus";

let surname2 = "Pinto";

let age2 = 21;

let email2 = "[email protected]";

Cela semble fonctionner correctement, mais si l’on y réfléchit bien, nous remarquons deux
inconvénients. Tout d’abord, pour chaque utilisateur, il faudra inventer des noms de variables
séparés pour le nom, l’email, etc. Que se passerait-il si nous décrivions chaque utilisateur un
peu plus précisément ? Ou s’il n’y avait pas seulement deux utilisateurs, mais disons mille ?
Cela deviendrait au minimum inconfortable. Dans une certaine mesure, nous pouvons
organiser cela avec des objets. Le deuxième problème est qu’au stade de l’écriture, nous
devons déjà connaître le nombre exact d’utilisateurs à décrire dans le système. Cela serait
extrêmement limitant dans de vraies applications, et il serait préférable de pouvoir les
ajouter dynamiquement. Nous pourrons également améliorer cela, non pas avec des objets,
mais avec des tableaux (dont nous parlerons bientôt).

Améliorons donc notre code avec des objets :

let user1 = {

name: "Calvin",

surname: "Hart",

age: 66,

email: "[email protected]"

};
let user2 = {

name: "Mateus",

surname: "Pinto",

age: 21,

email: "[email protected]"

};

Nous devons toujours donner des noms différents aux variables qui stockent les informations
(sous forme d’objets) sur les utilisateurs individuels, mais cette fois, les propriétés peuvent
avoir les mêmes noms. Cela rend le code non seulement plus clair et plus cohérent, mais
facilite également les opérations sur les propriétés des différents utilisateurs.

Les propriétés d’un objet, comme nous l’avons indiqué précédemment, sont accessibles avec
un point et le nom de la clé. Nous pouvons à la fois lire et modifier la valeur associée à une
clé particulière. De plus, nous pouvons également modifier l’objet entier en ajoutant une
nouvelle propriété auparavant inexistante. Nous faisons cela également avec la notation par
point : si, lors de la modification, l’interpréteur ne trouve pas la clé spécifiée, il la crée.

console.log(user1.name); // -> Calvin

console.log(user2.name); // -> Mateus

console.log(user1.age); // -> 66

user1.age = 67;

console.log(user1.age); // -> 67

console.log(user2.phone); // -> undefined

user2.phone = "904-399-7557";

console.log(user2.phone); // -> 904-399-7557

Si nous pouvons ajouter de nouveaux champs à un objet existant, pouvons-nous aussi les
supprimer ? Bien sûr : l’opérateur delete est utilisé pour cela.

console.log(user2.phone); // -> 904-399-7557

delete user2.phone;

console.log(user2.phone); // -> undefined

L’utilité des objets dépasse largement leur rôle de simple structure de stockage de données.
Cependant, c’est un sujet distinct, largement lié à la programmation orientée objet, qui fait
partie des techniques de programmation plus avancées. Dans notre cas, les objets seront de
simples structures constituées de paires clé–valeur.

Tableau (Array)

Un tableau, comme un objet, est un type de données complexe qui peut être utilisé pour
stocker une collection de données. À l’instar des objets, les données stockées (les valeurs)
peuvent être de n’importe quel type. La différence est que dans un tableau, nous ne
stockons que des valeurs, sans les noms associés (c’est-à-dire les clés).

Comment savons-nous à quel élément du tableau nous faisons référence si nous ne pouvons
pas utiliser de nom ? Nous le savons car les éléments du tableau sont ordonnés et occupent
des positions consécutives et numérotées à l’intérieur du tableau. Le numéro du champ où
se trouve une valeur particulière est appelé index ou position. L’index commence à 0.

La manière la plus simple de créer des tableaux en JavaScript est d’utiliser des crochets
(literal de tableau). Cela permet de créer un tableau vide, dans lequel les éléments seront
insérés plus tard, ou un tableau contenant des éléments initiaux (séparés par des virgules).
Pour accéder à un élément du tableau, nous utilisons la notation par crochets, en écrivant
après le nom de la variable le numéro de l’index entre crochets.

Exemple :

let days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

console.log(days[0]); // -> Sun

console.log(days[2]); // -> Tue

console.log(days[5]); // -> Fri

days[0] = "Sunday";

console.log(days[0]); // -> Sunday

let emptyArray = [];

console.log(emptyArray[0]); // -> undefined

Nous avons déclaré et initialisé un tableau days contenant les sept abréviations des jours de
la semaine. Les éléments sont de type String. En gardant à l’esprit que les index commencent
à 0, nous affichons trois jours choisis. Ensuite, nous changeons l’élément à l’index 0,
remplaçant "Sun" par "Sunday". Enfin, nous déclarons un tableau vide et essayons de lire un
élément inexistant.

Comment ajouter un nouvel élément à un tableau existant, par exemple un tableau vide ?

La manière la plus simple est d’assigner une nouvelle valeur à une position spécifique :

let animals = [];

console.log(animals[0]); // -> undefined

animals[0] = "dog";

animals[2] = "cat";

console.log(animals[0]); // -> dog

console.log(animals[1]); // -> undefined

console.log(animals[2]); // -> cat

Ici, nous avons placé "dog" à l’index 0 et "cat" à l’index 2, laissant l’index 1 vide. Ce n’est pas
la seule manière d’ajouter des éléments, d’autres méthodes seront présentées plus tard.

En général, on stocke le même type de données dans un tableau, mais JavaScript n’impose
pas cette restriction. Nous pouvons donc créer des tableaux contenant des éléments de
types différents :

let values = ["Test", 7, 12.3, false];

Un élément peut aussi être un tableau, ce qui permet de créer des tableaux imbriqués :

let names = [["Olivia", "Emma", "Mia", "Sofia"], ["William", "James", "Daniel"]];

console.log(names[0]); // -> ["Olivia", "Emma", "Mia", "Sofia"]

console.log(names[0][1]); // -> Emma

console.log(names[1][1]); // -> James

let femaleNames = names[0];

console.log(femaleNames[0]); // -> Olivia

console.log(femaleNames[2]); // -> Mia

Les tableaux internes n’ont pas besoin d’avoir la même longueur.

2.2.2 À quoi servent les tableaux en pratique ?

Les tableaux sont avant tout une manière pratique de stocker une collection d’éléments sous
un même nom. Il est également important de pouvoir ajouter de nouveaux éléments
pendant l’exécution du programme.

Reprenons l’exemple des utilisateurs du système que nous avons testé avec des objets.
L’inconvénient était de devoir déclarer des variables pour chaque utilisateur. Avec un
tableau, nous pouvons ajouter de nouveaux utilisateurs dynamiquement, même pendant
l’exécution du programme.

Nous pouvons stocker des objets dans un tableau :

let users = [

{ name: "Calvin", surname: "Hart", age: 66, email: "[email protected]" },

{ name: "Mateus", surname: "Pinto", age: 21, email: "[email protected]" }

];

console.log(users[0].name); // -> Calvin

console.log(users[1].age); // -> 21

Ajout d’un nouvel utilisateur :

users[2] = {

name: "Irene", surname: "Purnell", age: 32, email: "[email protected]"

};

console.log(users[2].name); // -> Irene

typeof et instanceof avec les tableaux

let days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

let day = "Sunday";

console.log(typeof days); // -> object

console.log(typeof day); // -> string

console.log(days instanceof Array); // -> true

console.log(day instanceof Array); // -> false

instanceof permet de vérifier si une variable est un tableau.

Méthodes et propriétés utiles des tableaux

length – retourne la longueur du tableau (y compris les indices vides) :

let names = ["Olivia", "Emma", "Mateo", "Samuel"];

console.log(names.length); // -> 4

names[5] = "Amelia";

console.log(names.length); // -> 6

indexOf – recherche un élément et retourne son index, ou -1 si non trouvé :

console.log(names.indexOf("Mateo")); // -> 2

console.log(names.indexOf("Victor")); // -> -1

push – ajoute un élément à la fin :

names.push("Amelia");

unshift – ajoute un élément au début :

names.unshift("Sophia");

pop – supprime le dernier élément et le retourne :

let last = names.pop();

shift – supprime le premier élément et le retourne :

let first = names.shift();

reverse – inverse l’ordre des éléments :

names.reverse();

slice – extrait une portion du tableau :

let n1 = names.slice(2);
let n2 = names.slice(1,3);

let n3 = names.slice(0,-1);

let n4 = names.slice(-1);

concat – concatène deux tableaux :

let allNames = names.concat(otherNames);

2.2.3 PRATIQUE

Objets

1. Créer un objet décrivant un billet de train avec trois champs : from, to, price. Afficher
ses valeurs dans la console.

2. Déclarer un objet vide et ajouter name et surname avec la notation par point.
Afficher les champs.

Tableaux

3. Créer un tableau de trois objets représentant des livres avec title, author, pages.

4. Ajouter un nouveau livre à la fin avec la méthode appropriée et afficher la longueur

et les titres.

5. Copier les deux derniers livres dans un nouveau tableau avec slice.

6. Supprimer le premier livre avec la méthode appropriée et afficher la longueur et les

titres.

7. Afficher la somme des pages de tous les livres.

2.2.4 RÉSUMÉ

 Les types simples (Number, BigInt, Boolean, String) ne posent pas de problème.

 String introduit l’autoboxing et l’usage des méthodes d’objets.

 La conversion de types a été abordée.

 Les types complexes (objet et tableau) ont été présentés de manière simplifiée,
utilisables comme enregistrements ou collections d’éléments.

 Les tableaux sont essentiels et seront réutilisés lors des boucles et fonctions.

2.2.5 LAB – Types de données

Durée estimée : 15-30 minutes
Niveau : Facile

Objectifs :
Se familiariser avec les propriétés de base des types complexes (Array et Object) et savoir les
utiliser.

Scénario :
Créer une liste de contacts sous forme de tableau, chaque élément étant un objet
représentant un utilisateur avec name, phone, email. Ajouter un nouveau contact en utilisant
la méthode appropriée. Afficher le premier et le dernier contact avec les informations
formatées correctement, en utilisant length pour l’index du dernier élément.
2.3 Section 4 – Commentaires

Faites défiler pour commencer

2.3.1 Commentaires

Les commentaires sont courants en programmation. « Commenter » n’est peut-être pas une
technique de programmation clé (si l’on peut appeler cela une technique), mais cela permet
d’améliorer le travail sur le code, notamment en le rendant plus lisible. Alors, que sont les
commentaires et pourquoi en avons-nous besoin ?

Les commentaires sont simplement du texte brut, totalement ignoré par l’interpréteur
JavaScript, qui sert généralement à expliquer un morceau de code qui, pour certaines
raisons, peut ne pas être totalement clair. Cependant, nous ne pouvons pas les écrire
complètement librement, car l’interpréteur tenterait de les traiter comme des commandes,
des noms de variables ou des mots-clés. JavaScript doit donc pouvoir distinguer les
commentaires du reste du code. En JavaScript, nous avons deux types de commentaires, et
les deux sont couramment utilisés dans de nombreux langages de programmation, de la
famille du langage C à Python. Ils sont appelés commentaires sur une seule ligne et
commentaires multi-lignes.

Commentaires sur une seule ligne

C’est le moyen principal pour commenter du code. Il utilise deux barres obliques au début du
commentaire, qui s’étend jusqu’à la fin de la ligne. Tout code placé à droite des doubles
barres obliques sera ignoré par l’interpréteur. Si nous voulons créer des commentaires de
cette manière sur plusieurs lignes, nous devons mettre // sur chaque ligne séparément. Vous
avez probablement remarqué que nous avons utilisé ce type dans les exemples précédents.

// Ceci est un commentaire sur une seule ligne

let x = 42; // Ceci est aussi un commentaire sur une seule ligne, même si la partie avant les
doubles barres est du code correct et sera exécutée

// Cette ligne et la suivante seront ignorées

// x = 8;

console.log(x); // -> 42

Dans la plupart des éditeurs de code modernes, il est possible de « commenter » des
fragments de code sélectionnés en utilisant des raccourcis clavier. Cela signifie que nous
pouvons placer le curseur sur la ligne de code sélectionnée et, en appuyant sur une
combinaison de touches spécifique, placer un caractère de commentaire au début de la
ligne. En appuyant à nouveau sur la même combinaison, nous pouvons « décommenter » le
caractère de commentaire. Il est généralement également possible de marquer plusieurs
lignes (avec la souris, ou en utilisant les touches fléchées avec la touche Shift enfoncée) et de
placer un caractère de commentaire au début de toutes les lignes marquées en utilisant la
même combinaison. Ce mécanisme est pris en charge par des applications comme Sublime
Text ou Visual Studio Code, deux éditeurs que nous avons recommandés précédemment.
Essayez-le dans l’éditeur de la plateforme OpenEDG que vous utilisez actuellement. La
combinaison de touches dont nous parlons est la plus courante sous Windows :

(le texte original mentionnait les combinaisons spécifiques mais elles ne sont pas fournies ici)

et sous macOS :

(idem)

Cette méthode est le plus souvent utilisée pour « commenter » (c’est-à-dire désactiver
temporairement) un morceau de code sélectionné, par exemple pour tester une version
alternative.

Commentaires multi-lignes
Les commentaires multi-lignes, également appelés commentaires bloc, permettent de
commenter sur plusieurs lignes, mais également d’insérer des commentaires à l’intérieur
d’une ligne, ce qui n’est pas possible avec les commentaires sur une seule ligne. Ils sont créés
avec une barre oblique et un astérisque au début du commentaire et un astérisque et une
barre oblique à la fin.

/*

Ceci est un commentaire bloc

et il peut s'étendre sur plusieurs lignes

Donc ce code ne sera pas exécuté

console.log("Hello, World!");

*/

let x /* parce qu’aucun meilleur nom */ = 42;

console.log(x);

2.3.2 Mais pourquoi commenter ?

Comme nous l’avons déjà indiqué, il est très important de donner des noms appropriés et
informatifs aux variables (et aussi aux fonctions et tout autre élément que nous pouvons
nommer), mais même les meilleurs noms ne seront pas suffisants si le code est complexe. Et
le code devient complexe assez facilement. Pour aider les développeurs à exprimer leur
intention pour un morceau de code donné, ils utilisent donc des commentaires pour
expliquer verbalement.
Ces exemples sont bien sûr exagérés juste pour montrer comment les utiliser. Dans les
applications et scripts réels, les commentaires doivent être utilisés judicieusement, car trop
de commentaires évidents rendent le code encore plus difficile à lire.

En règle générale, les commentaires doivent être utilisés lorsque la lecture du code n’est pas
suffisante pour comprendre ce qu’il fait, ou dans les situations où le code se comporte
différemment de ce à quoi on s’attend et il faut montrer que c’est intentionnel. Vous devez
également vous rappeler que dans la plupart des projets commerciaux, vous n’êtes pas la
seule personne à lire ce code. Et même si vous l’étiez, relire son propre code après quelques
mois est déjà un défi, et lire le code de quelqu’un d’autre peut rendre le défi encore plus
grand.

// affectation de greetingText à Hello - MAUVAIS

const greetingText = "Hello";

angle = angle + 90; // rotation de 90 degrés pour compenser l’écran vertical - BON

// TODO ajouter vérification pour 0 comme diviseur - BON

let result = a / b;

// Pas de vérification nécessaire pour b - garanti non nul - BON

let result = a / b;

// Division de a par b - MAUVAIS

let result = a / b;

Documentation
Nous pouvons utiliser les commentaires pour documenter le code, et écrire exactement ce
que font les fonctions et quels paramètres elles nécessitent. Dans de nombreux projets, les
fichiers ont un en-tête contenant des informations sur l’auteur, la licence ou l’historique des
modifications. Il existe des outils qui peuvent générer automatiquement de la
documentation à partir des commentaires, tant qu’ils sont utilisés selon la référence de
l’outil. Un exemple d’un tel outil est JSDoc. Placer des commentaires dans le code selon le
format de cet outil permettra de générer un site web contenant des informations détaillées
sur un projet (par ex. descriptions des fonctions, paramètres, valeurs retournées, etc.).
Activation/Désactivation de code
Parfois, nous avons un fragment de code qui pose problème, ou nous voulons tester
rapidement quelques options. Commenter du code est un excellent outil pour cela.

// const greetingText = "Hi";

const greetingText = "Hello";

// const greetingText = "Welcome";

Nous pouvons désactiver chaque ligne de code en utilisant des commentaires sur une seule
ligne comme dans l’exemple. Avec des commentaires bloc, nous pouvons commenter de
grands fragments de code ou des fonctions entières. Cela est très utile pour identifier les
problèmes dans le code.

2.3.3 RÉSUMÉ DE LA SECTION

Pour l’instant, l’utilisation des commentaires peut sembler n’être qu’une curiosité.
Cependant, rappelez-vous qu’avec le temps, vous commencerez à écrire des programmes de
plus en plus complexes. Ils seront composés de nombreux fichiers, avec des centaines ou des
milliers de lignes de code. Les commentaires permettent d’augmenter la clarté du code en
ajoutant des informations qui aideront les autres à comprendre certaines parties. L’étape
suivante sera la capacité à générer la documentation du projet à partir de ces commentaires,
bien que pour cela vous devrez adapter vos commentaires à la convention imposée par l’outil
choisi. Les commentaires sont également très utiles pour activer ou désactiver des morceaux
de code sélectionnés, ce que nous utilisons le plus souvent lors de tests de versions
alternatives ou lors de la recherche d’erreurs.

2.3.4 EXERCICE DE LA SECTION

Tâche : Il y a un code qui ne fonctionne pas actuellement. Essayez de le corriger en utilisant

uniquement des commentaires. Essayez, si possible, d’utiliser les raccourcis clavier de votre
éditeur à cette fin.

"use strict";

const prefix = "username_";

let userName = "Jack";

const userName = "Adam";

let prefixedUserName;
const prefixedUserName;

userName = "John";

prefixedUserName = prefix + userName;

console.log(prefixedUserName + prefixedUserName2);

console.log(prefixedUserName2);
3.0 Section 1 – Opérateurs d’assignation, arithmétiques et logiques

Faites défiler pour commencer

3.0.1 Opérateurs

Les opérateurs dans les langages de programmation sont des symboles (parfois aussi des
noms) utilisés pour effectuer certaines actions sur des arguments appelés opérandes.

Les opérandes peuvent être des valeurs ou des variables. Nous avons rencontré des
opérateurs à plusieurs reprises dans les exemples précédents, par exemple le symbole
d’assignation = ou le mot-clé typeof.

Les opérateurs peuvent être catégorisés de plusieurs façons. Ils se distinguent, par exemple,
selon le nombre d’opérandes sur lesquels ils agissent.

L’opérateur d’addition + est un opérateur binaire typique (il utilise deux opérandes), tandis
que l’opérateur typeof est un opérateur unaire (il utilise un seul opérande).

En JavaScript, il existe également un opérateur ternaire (qui agit sur trois opérandes), dont
nous parlerons un peu plus loin.

Nous pouvons distinguer les opérateurs préfixes (placés avant l’opérande), postfixes (après
l’opérande) et infixes (entre les opérandes). Cependant, il est courant de classer les
opérateurs selon le contexte dans lequel ils sont utilisés : nous avons ainsi les opérateurs
d’assignation, arithmétiques, logiques ou conditionnels. Nous passerons en revue les
opérateurs de base de JavaScript selon cette classification.

Un même symbole peut être interprété comme un opérateur différent selon le contexte, le
plus souvent en fonction du type d’opérandes. En JavaScript, le symbole + en est un exemple.
Si les opérandes sont des nombres, l’utilisation de cet opérateur entraînera le calcul de leur
somme (il s’agit d’un opérateur d’addition, classé comme arithmétique). Cependant, si les
opérandes sont des chaînes de caractères, le même symbole sera traité comme un opérateur
de concaténation, et l’interpréteur tentera de joindre les deux chaînes.

3.0.2 Opérateurs d’assignation

Commençons par les opérateurs d’assignation. Dans ce groupe, on trouve des opérateurs qui
permettent d’assigner des valeurs à des variables et des constantes. L’opérateur d’assignation
de base est le signe égal =, que nous avons déjà vu plusieurs fois dans les exemples. Cet
opérateur assigne la valeur de l’opérande de droite à l’opérande de gauche.

const name = "Alice";

console.log(name); // -> Alice

Si plusieurs opérateurs d’assignation apparaissent dans une séquence, l’ordre de droite à

gauche s’applique. Ainsi, la séquence :
let year = 2050;

let newYear = year = 2051;

signifie la même chose que :

let year = 2050;

year = 2051;

let newYear = year;

En plus de l’opérateur d’assignation de base, il existe également des opérateurs d’assignation

liés aux opérateurs arithmétiques, logiques et sur chaînes. Nous y reviendrons plus tard.

3.0.3 Opérateurs arithmétiques

Les opérateurs arithmétiques expriment des opérations mathématiques et acceptent des

valeurs numériques ou des variables. Tous les opérateurs arithmétiques, sauf l’addition,
tenteront de convertir implicitement les valeurs en type Number avant d’effectuer
l’opération.

L’opérateur d’addition convertira tout en String si l’un des opérandes est de type String, sinon
il les convertira en Number comme les autres opérateurs arithmétiques. L’ordre des
opérations est respecté en JavaScript comme en mathématiques, et nous pouvons utiliser
des parenthèses pour modifier l’ordre si nécessaire.

console.log(2 + 2 * 2); // -> 6

console.log(2 + (2 * 2)); // -> 6

console.log((2 + 2) * 2); // -> 8

Les opérateurs arithmétiques binaires de base sont : addition +, soustraction -, multiplication

*, division /, reste de la division % et puissance **. Leur fonctionnement est similaire à celui
que nous connaissons en mathématiques :

const x = 5;

const y = 2;

console.log("addition: ", x + y); // -> 7

console.log("soustraction: ", x - y); // -> 3

console.log("multiplication: ", x * y); // -> 10

console.log("division: ", x / y); // -> 2.5

console.log("reste division :", x % y); // -> 1

console.log("exposant: ", x ** y); // -> 25

3.0.4 Opérateurs arithmétiques unaires

Il existe également plusieurs opérateurs arithmétiques unaires (agissant sur un seul

opérande). Parmi eux, les opérateurs + et -.

Les deux convertissent les opérandes en type Number, tandis que l’opérateur - les inverse
également.

let str = "123";

let n1 = +str;

let n2 = -str;

let n3 = -n2;

let n4 = +"abcd";

console.log(`${str} : ${typeof str}`); // -> 123 : string

console.log(`${n1} : ${typeof n1}`); // -> 123 : number

console.log(`${n2} : ${typeof n2}`); // -> -123 : number

console.log(`${n3} : ${typeof n3}`); // -> 123 : number

console.log(`${n4} : ${typeof n4}`); // -> NaN : number

3.0.5 Opérateurs d’incrémentation et décrémentation unaires

Parmi les opérateurs arithmétiques, nous avons également à disposition les opérateurs
d’incrémentation ++ et de décrémentation --, en version préfixe et postfixe. Ils permettent
d’augmenter ou de diminuer la valeur de l’opérande de 1.

 Version postfixe (opérateur après l’opérande) : modifie la valeur de la variable mais

retourne l’ancienne valeur.

 Version préfixe (opérateur avant l’opérande) : modifie la valeur et retourne la

nouvelle.

Exemple :

console.log(n1++); // retourne l’ancienne valeur

console.log(++n1); // retourne la nouvelle valeur

Note : le type Number est flottant, ce qui peut entraîner des imprécisions sur certaines
opérations :

console.log(0.2 + 0.1); // 0.30000000000000004

console.log(0.2 * 0.1); // 0.020000000000000004

console.log(0.3 / 0.1); // 2.9999999999999996

3.0.6 Opérateurs d’assignation composés

Les opérateurs arithmétiques binaires peuvent être combinés avec l’opérateur d’assignation,
donnant : +=, -=, *=, /=, %=, **=.

Exemple :

let x = 10;

x += 2; // x = x + 2

x -= 4; // x = x - 4

x *= 3; // x = x * 3

x /= 6; // x = x / 6

x **= 3; // x = x ** 3

x %= 10; // x = x % 10

3.0.7 Opérateurs logiques

Les opérateurs logiques travaillent avec des valeurs booléennes (true ou false). JavaScript
propose :

 AND logique : &&

 OR logique : ||

 NOT logique : !

Exemple :

console.log(true && false); // -> false

console.log(true || false); // -> true

console.log(!true); // -> false

Priorité : ! > && > ||, modifiable avec des parenthèses.

const a = false, b = true, c = false, d = true;

console.log(a && b && c || d); // -> true

console.log(a && b && (c || d)); // -> false

3.0.8 Opérateurs logiques et valeurs non booléennes

 ! convertit l’opérande en booléen, puis inverse sa valeur :

console.log(!0); // -> true

console.log(!!"Alice"); // -> true

 && et || retournent l’opérande évalué selon les règles :

console.log(false && 1991); // -> false

console.log("Alice" || "Bob"); // -> Alice

Évaluation courte : si le premier opérande suffit à déterminer le résultat, le second n’est pas
évalué.

let x = 0, y = 0;

console.log(x++ && y++); // -> 0

console.log(x); // -> 1

console.log(y); // -> 0

3.0.9 Opérateurs d’assignation logiques

Comme les opérateurs arithmétiques, les opérateurs logiques peuvent être combinés avec
l’assignation :

let a = true;

a &&= false; // équivalent à a = a && false

let b = false;

b ||= true; // équivalent à b = b || true

3.0.10 EXERCICES DE LA SECTION

Opérateurs arithmétiques
Remplir les opérateurs manquants pour obtenir le résultat attendu :

console.log(2 _ 3 _ 1); // attendu 7

console.log(2 _ 4); // attendu 16

console.log(5 _ 1); // attendu 5

console.log(8 _ 2 _ 5 _ 2); // attendu 39

Opérateurs de comparaison
Remplir les opérateurs pour que toutes les expressions soient vraies :

console.log(4 * 5 _ 20);

console.log(6 * 5 _ "30");
console.log(-17 _ 0);

console.log(25 _ 1);

console.log(2 + 2 * 2 _ 4);

Opérateurs logiques
Remplir les opérateurs pour que toutes les expressions soient vraies :

console.log(true _ false);

console.log(false _ false);

console.log(false _ false _ true);

console.log(true _ false _ false && true);

3.1 Section 2 – Opérateurs de chaînes, de comparaison et autres en JS

Faites défiler pour commencer

3.1.1 Opérateurs de chaînes

Le seul opérateur dans ce groupe est la concaténation +. Cet opérateur convertira tout en
chaîne de caractères si l’un des opérandes est de type String. Enfin, il créera une nouvelle
chaîne de caractères en attachant l’opérande de droite à la fin de l’opérande de gauche.

let greetings = "Hi";

console.log(greetings + " " + "Alice"); // -> Hi Alice

let sentence = "Happy New Year ";

let newSentence = sentence + 10191;

console.log(newSentence); // -> Happy New Year 10191

console.log(typeof newSentence); // -> string

Opérateurs d’assignation composés

Vous pouvez probablement deviner que cet opérateur peut aussi être utilisé en combinaison
avec l’opérateur d’assignation. Son fonctionnement est tellement intuitif que nous nous
contenterons d’un simple exemple :

let sentence = "Happy New ";

sentence += "Year ";

sentence += 10191;

console.log(sentence); // -> Happy New Year 10191

3.1.2 Opérateurs de comparaison

Les opérateurs de comparaison servent à vérifier l’égalité ou l’inégalité de valeurs. Tous les
opérateurs de comparaison sont binaires et renvoient tous une valeur logique représentant
le résultat de la comparaison, true ou false.

Comme pour les autres opérateurs, JavaScript tentera de convertir les valeurs comparées si
elles sont de types différents. Il est logique de vérifier l’égalité ou la supériorité en utilisant la
représentation numérique, et JavaScript convertira dans la plupart des cas les types en
Number avant la comparaison. Il existe deux exceptions : les chaînes de caractères et
l’opérateur d’identité (égalité stricte). Les chaînes sont comparées caractère par caractère
(précisément caractère Unicode par caractère Unicode selon leurs valeurs).

Pour vérifier si les opérandes sont égaux, on peut utiliser soit l’opérateur d’identité (égalité
stricte) ===, soit l’opérateur d’égalité ==.
Le premier est plus restrictif : pour retourner true, les opérandes doivent être identiques
(c’est-à-dire égaux et du même type).

console.log(10 === 5); // -> false

console.log(10 === 10); // -> true

console.log(10 === 10n); // -> false

console.log(10 === "10"); // -> false

console.log("10" === "10"); // -> true

console.log("Alice" === "Bob"); // -> false

console.log(0 === false); // -> false

console.log(undefined === false); // -> false

L’opérateur d’égalité exige seulement que les valeurs soient égales, les types ne sont pas
comparés. Donc si les opérandes sont de types différents, l’interpréteur tentera de les
convertir en nombres : false devient 0, true devient 1, undefined devient NaN, null devient 0,
10n devient 10, "123" devient 123, etc.

Notez que si l’un des opérandes a une valeur NaN (ou a été converti en NaN, par exemple
avec undefined), l’opérateur d’égalité renverra false.

console.log(10 == 5); // -> false

console.log(10 == 10); // -> true

console.log(10 == 10n); // -> true

console.log(10 == "10"); // -> true

console.log("10" == "10"); // -> true

console.log("Alice" == "Bob"); // -> false

console.log(0 == false); // -> true

console.log(undefined == false); // -> false

console.log(NaN == NaN); // -> false

Rappel : utilisez l’opérateur d’identité sauf si vous voulez intentionnellement autoriser une
comparaison positive entre différents types.

Il existe également les opérateurs complémentaires : l’opérateur de non-identité !== et

l’opérateur d’inégalité !=. Le premier retourne true si les opérandes ne sont pas identiques,
c’est-à-dire qu’ils sont égaux mais de types différents, ou simplement différents. Le second
retourne true si les opérandes sont différents.
console.log(10 !== 5); // -> true

console.log(10 !== 10); // -> false

console.log(10 !== 10n); // -> true

console.log(10 !== "10"); // -> true

console.log("10" !== "10"); // -> false

console.log("Alice" !== "Bob"); // -> true

console.log(0 !== false); // -> true

console.log(undefined !== false); // -> true

console.log(10 != 5); // -> true

console.log(10 != 10); // -> false

console.log(10 != 10n); // -> false

console.log(10 != "10"); // -> false

console.log("10" != "10"); // -> false

console.log("Alice" != "Bob"); // -> true

console.log(0 != false); // -> false

console.log(undefined != false); // -> true

console.log(NaN != NaN); // -> true

On dispose aussi d’opérateurs permettant de vérifier si un opérande est supérieur >, inférieur
<, supérieur ou égal >= et inférieur ou égal <=. Ces opérateurs fonctionnent sur tout type
d’opérande, mais il est logique de les utiliser uniquement sur des nombres ou des valeurs
convertibles en nombres.

console.log(10 > 100); // -> false

console.log(101 > 100); // -> true

console.log(101 > "100"); // -> true

console.log(101 < 100); // -> false

console.log(100n < 102); // -> true

console.log("10" < 20n); // -> true

console.log(101 <= 100); // -> false

console.log(10 >= 10n); // -> true

console.log("10" <= 20); // -> true

Vous pouvez également les utiliser pour comparer des chaînes ne représentant pas des
nombres, mais l’algorithme est complexe et la comparaison peu utile. Par simplification, les
caractères des deux chaînes sont testés aux mêmes positions. On suppose que la valeur des
caractères correspond à leur position dans l’alphabet (la lettre b a une valeur supérieure à a).
Les majuscules ont des valeurs inférieures aux minuscules, et les chiffres ont des valeurs
encore plus faibles.

console.log("b" > "a"); // -> true

console.log("a" > "B"); // -> true

console.log("B" > "A"); // -> true

console.log("A" > "4"); // -> true

console.log("4" > "1"); // -> true

console.log("ab1" < "ab4"); // -> true

console.log("ab4" < "abA"); // -> true

console.log("abB" < "aba"); // -> true

console.log("aba" < "abb"); // -> true

console.log("ab" < "ab4"); // -> true

Remarque : le symbole => existe en JavaScript, mais ce n’est pas un opérateur – il est utilisé
pour construire des fonctions fléchées.

3.1.3 Autres opérateurs

La liste des opérateurs en JavaScript est bien plus longue, mais beaucoup ne seraient pas
particulièrement utiles à ce stade, comme les opérateurs bit à bit, qui travaillent sur des bits
individuels des opérandes. Cependant, il convient de mentionner quelques opérateurs
supplémentaires, dont certains sont déjà apparus dans les exemples précédents.

typeof
Nous avons déjà présenté l’opérateur typeof lors de la discussion sur les types de données.
C’est un opérateur unaire qui vérifie le type d’un opérande (variable ou littéral). Il renvoie
une chaîne avec le nom du type, comme "boolean" ou "number".

let year = 10191;

console.log(typeof year); // -> number

console.log(typeof false); // -> boolean

instanceof
L’opérateur instanceof est apparu lors de la discussion sur les tableaux. C’est un opérateur
binaire qui vérifie si un objet (opérande gauche) est d’un certain type (opérande droit). Selon
le résultat, il renvoie true ou false.

Dans ce cours, son utilité est limitée à tester si une variable contient un tableau.

let names = ["Patti", "Bob"];

let name = names[0];

console.log(names instanceof Array); // -> true

console.log(name instanceof Array); // -> false

delete
L’opérateur unaire delete a été présenté lors de la discussion sur les objets. Il permet de
supprimer un champ sélectionné de l’objet dont le nom est indiqué comme opérande.

let user = {

name: "Alice",

age: 38

};

console.log(user.age); // -> 38

delete user.age;

console.log(user.age); // -> undefined

Opérateur ternaire
Le dernier opérateur discuté est assez inhabituel car c’est le seul opérateur utilisant trois
opérandes. C’est un opérateur conditionnel. Selon la valeur du premier opérande (true ou
false), la valeur du deuxième ou du troisième opérande est retournée. Il est le plus souvent
utilisé pour attribuer l’une des deux valeurs à une variable selon une condition. Les trois
opérandes sont séparés par ? (premier et deuxième) et : (deuxième et troisième).

console.log(true ? "Alice" : "Bob"); // -> Alice

console.log(false ? "Alice" : "Bob"); // -> Bob

Chacun des opérandes peut être une expression à calculer. Dans l’exemple suivant, le
premier opérande est une comparaison de deux nombres. Le résultat de la comparaison sera
false, utilisé par l’opérateur ternaire.

let name = 1 > 2 ? "Alice" : "Bob";

console.log(name); // -> Bob

3.1.4 Priorité (Précédence)

Dans pratiquement tous les exemples précédents, nous avons présenté l’opération de
plusieurs opérateurs en suivant des instructions où un seul opérateur était utilisé. En réalité,
plusieurs opérateurs sont généralement utilisés simultanément. Une question importante se
pose : dans quel ordre l’interpréteur les exécutera-t-il ? Cela affectera le résultat final, donc il
est important d’en tenir compte lors de l’écriture du code.

let a = 10;

let b = a + 2 * 3;

let c = a + 2 < 20 - 15;

console.log(a); // -> 10

console.log(b); // -> 16

console.log(c); // -> false

Dans la deuxième ligne (déclaration de b), les opérateurs sont exécutés selon l’ordre
mathématique : multiplication, puis addition, puis assignation. Dans la troisième ligne (c), le
calcul est plus complexe : somme de a + 2, puis 20 - 15, puis comparaison avec < et
assignation à c.

L’interpréteur JavaScript utilise deux propriétés des opérateurs pour déterminer la

séquence : précédence et associativité. La précédence est la priorité, certains opérateurs ont
la même priorité (ex. + et -). L’associativité indique l’ordre d’exécution lorsque plusieurs
opérateurs de même priorité se suivent : gauche-droite (left-to-right) ou droite-gauche (right-
to-left).

Exemple avec associativité gauche-droite :

let a, b;

b = (a = (20 + 20) * 2) > (3 ** 2);

console.log(a); // -> 60

console.log(b); // -> true

Les parenthèses imposent l’ordre et améliorent la lisibilité.

3.1.5 RÉSUMÉ DE LA SECTION

Dans cette section et la précédente, nous avons introduit de nouveaux opérateurs (ex.
logiques) et consolidé notre connaissance de ceux déjà connus (ex. assignation). Avec eux
sont apparus de nouveaux termes décrivant leurs propriétés : précédence et associativité.

Il est normal que la quantité d’informations nouvelles, notamment sur la précédence, semble
intimidante. Peu de programmeurs JavaScript seraient capables de définir correctement tous
les opérateurs selon leurs priorités.

Heureusement, nous avons les parenthèses pour forcer la priorité des opérations. Les
opérateurs apparaîtront dans tous les exemples jusqu’à la fin du cours, permettant de
consolider progressivement vos connaissances en un ensemble logique et cohérent.
3.2 Section 3 – Interaction avec l’utilisateur

Faites défiler pour commencer

3.2.1 Interaction avec l’utilisateur

La plupart des programmes que nous utilisons au quotidien dépendent de l’interaction avec
l’utilisateur. L’utilisateur saisit des données, fait des choix et confirme les options proposées
par le programme. Grâce à cette interaction, le programme peut commencer à utiliser les
données fournies par l’utilisateur pendant son exécution (ces données n’étaient pas connues
au moment du démarrage du programme, ni au moment de sa rédaction). De plus, le
programme peut effectuer certaines actions de manière conditionnelle : l’utilisateur
influence non seulement les données, mais aussi l’exécution du programme.

Un exemple simple est le programme calculatrice. L’utilisateur ne se contente pas de saisir

des données (par exemple les nombres 10 et 20), il décide également ce qu’il faut en faire
(par exemple les additionner).

Dans le cas de JavaScript, l’interaction avec l’utilisateur est un sujet assez complexe. Cela
pour plusieurs raisons. Vous vous souvenez que nous pouvons écrire des programmes dans
ce langage à la fois pour une utilisation côté navigateur (client-side) et pour exécuter
certaines actions côté serveur (server-side) ? Cette distinction influence l’interaction
possible. Les programmes JavaScript écrits avec Node.js pour serveur n’exigent généralement
pas ce type d’interaction. On les exécute depuis la console, souvent sans interface graphique.

Le plus souvent, l’utilisateur fournit certaines options (par exemple des chemins de fichiers)
au programme exécuté sous cette forme, via un fichier de configuration et/ou des arguments
d’appel. Les données utilisées pour exécuter le programme sont alors récupérées depuis des
fichiers sur disque, des bases de données, des services réseau, etc. Il est très rare que de tels
programmes console nécessitent la saisie de données pendant leur exécution. Si c’est
nécessaire, cela est indiqué par l’apparition d’un message approprié dans la console, sur
laquelle il faut saisir des données.

C’est très différent pour les applications côté client. La plupart du temps, elles nécessitent
une interaction continue entre l’utilisateur et le programme. Grâce à elles, nous pouvons
cliquer sur des boutons, remplir des formulaires, sélectionner des données dans des listes
déroulantes, etc. Le problème est que pratiquement tous les éléments utilisés à cette fin sont
des composants HTML. Leur utilisation peut ne pas être très difficile, mais elle requiert au
moins une compréhension approfondie des bases du DOM (Document Object Model) utilisé
dans les pages web, ainsi que des bases du HTML lui-même.

Un exemple de page HTML utilisant deux éléments pour l’interaction, manipulés par du code
JavaScript, est présenté ci-dessous :

<!DOCTYPE html>

<html>
 <head></head>

<body>

<input id="myId" type="text"></input>

<button onClick="console.log(document.getElementById('myId').value)">Get
Text</button>

</body>

</html>

Exécutez ce code dans l’éditeur, en vous assurant qu’il se trouve dans la fenêtre dédiée au
HTML (onglet index.html). L’élément <input> est un champ de saisie où vous pouvez entrer
du texte. Dans notre cas, nous avons donné à cet élément l’identifiant myId. L’élément
<button> correspond, comme son nom l’indique, à un bouton. Grâce à l’attribut onClick,
nous avons indiqué que si le bouton est cliqué, un morceau de code JavaScript doit être
exécuté. Dans ce code, nous faisons référence à l’objet document (un fragment du modèle
DOM) qui représente notre page web. Nous recherchons l’élément ayant l’identifiant myId,
récupérons sa valeur (c’est-à-dire le texte saisi) et affichons le résultat dans la console.

Comme vous le voyez, l’idée est relativement simple, mais le modèle DOM et le langage
HTML dépassent clairement le cadre du cours actuel. Alors, comment communiquer avec
l’utilisateur si nous n’utilisons pas ces mécanismes standard ?

Il existe une autre solution. Notez qu’elle n’est pas utilisée dans les applications web
modernes, mais elle permet de donner facilement à l’utilisateur la possibilité de saisir des
données ou de prendre certaines décisions. Nous l’utiliserons dans ce cours comme un
substitut pour la communication normale, plutôt que comme un élément pratique pour une
vraie programmation. La solution consiste à utiliser des boîtes de dialogue.

3.2.2 Boîte de dialogue

Les boîtes de dialogue font partie intégrante des navigateurs web, et sont disponibles dans
presque tous, même les très anciens. Ce sont toutes des fenêtres popup (ou modales), ce qui
signifie que lorsqu’elles sont affichées, il est impossible d’interagir avec la page web elle-
même tant que la boîte de dialogue n’est pas fermée.

Cette gêne lorsque la fenêtre popup est visible est une des raisons pour lesquelles il ne faut
pas les utiliser de manière excessive. Elles sont parfaitement adaptées pour l’apprentissage
et, dans de rares cas où des informations importantes doivent être affichées, ou qu’une
saisie utilisateur est obligatoire. Trois types de boîtes de dialogue sont disponibles.

Boîte de dialogue alert

La boîte de dialogue alert est la plus simple. Pour l’afficher, on appelle la méthode alert().
Cette méthode accepte un paramètre optionnel – le texte à afficher. La méthode alert est
une méthode de l’objet window, mais peut être utilisée directement sans écrire
window.alert. L’objet window généralise la fenêtre ou l’onglet du navigateur et donne accès
aux données liées à son état (par ex. le défilement de la page) ainsi qu’à certaines méthodes
pour contrôler cet état.

alert("Hello, World!");

window.alert("Hello, World! for the second time");

alert(4 * 7);

alert(true);

alert("text 1", "text 2"); // seul "text 1" sera affiché

Comme console.log, on peut passer n’importe quelle valeur à alert et elle sera convertie en
chaîne. La différence est que console.log accepte plusieurs paramètres, alors que alert n’en
accepte qu’un (ou zéro si optionnel).

La fenêtre alert restera visible tant que l’utilisateur n’aura pas cliqué sur le bouton OK.
L’exécution du code est suspendue tant que la boîte n’est pas fermée.

Boîte de dialogue confirm

La seconde boîte de dialogue est confirm. Comme alert, elle accepte un paramètre optionnel
– un message à afficher. La différence est qu’elle affiche deux boutons : OK et Annuler. Selon
le bouton cliqué, la méthode retourne une valeur booléenne. true si l’utilisateur clique sur
OK, false s’il clique sur Annuler.

let decision = window.confirm("Is it OK?");

console.log(decision);

Les valeurs retournées par confirm permettent d’exécuter certaines actions du programme
de manière conditionnelle. Exemple avec l’opérateur conditionnel ternaire :

let remove = confirm("Remove all data?");

let message = remove ? "Deleting Data" : "Cancelled";

console.log(message);

Boîte de dialogue prompt

La dernière boîte est prompt. C’est une évolution de confirm. Elle contient OK et Annuler,
ainsi qu’un champ texte à ligne unique pour saisir du texte.

Comme les autres, prompt accepte un paramètre optionnel pour le message, et un second
paramètre optionnel pour la valeur par défaut du champ texte. La méthode retourne le texte
saisi si l’utilisateur clique sur OK, ou null si Annuler est cliqué. Comme la valeur retournée est
toujours une chaîne, il est parfois nécessaire de la convertir dans un autre type, par ex. un
nombre. Il faut aussi se préparer à ce que l’utilisateur saisisse des données invalides.

let name = window.prompt("What is your name?", "John Doe");

name = name ? name : "anonymous";

let age = prompt("Hello " + name + " how old are you?");

alert(name + " is " + age + " years old");

3.2.3 RÉSUMÉ DE LA SECTION

Les fenêtres de dialogue ne sont pas la manière la plus efficace ni élégante de communiquer
avec un programme, mais elles sont suffisantes pour nos besoins.

Elles permettent de récupérer des données et de tenir compte des décisions de l’utilisateur,
qui peuvent influencer le programme.

4.0 Section 1 – Exécution conditionnelle

Faites défiler pour commencer

4.0.1 Instructions conditionnelles

L’exécution conditionnelle, ou les instructions de contrôle de flux, ont déjà été mentionnées
à plusieurs reprises, et il est maintenant temps de les examiner en détail. C’est un sujet très
important, car ces instructions sont essentielles non seulement en JavaScript, mais en
programmation en général. Sans la capacité de réagir et de modifier son comportement,
n’importe quel code ferait toujours la même chose. Bien sûr, cela peut parfois correspondre
exactement à ce dont nous avons besoin, mais la plupart du temps, nous avons besoin de
réactivité et de la capacité à gérer différentes situations dans le code.

On peut imaginer notre programme comme un arbre qui commence par le tronc et se divise
progressivement en branches successives. Le tronc représente le début du programme, et
chaque instruction conditionnelle reflète une nouvelle branche. Les instructions
conditionnelles sont exécutées sur la base de la décision de l’utilisateur, des résultats de
calculs précédents ou d’autres informations que le programme prend en compte. JavaScript
fournit plusieurs manières de diriger l’exécution du code en fonction de conditions
arbitraires. À partir de ce chapitre, vous aurez plus de tâches et de code à écrire, car vous
disposez maintenant presque de tous les outils nécessaires.

4.0.2 L’instruction if

L’instruction if est la première et la plus simple instruction de contrôle de flux disponible en

JavaScript. Elle existe sous plusieurs formes, mais dans sa forme de base, elle vérifie une
condition donnée et, selon sa valeur booléenne, exécute soit un bloc de code, soit le passe.
La syntaxe est la suivante :

if (condition) {

bloc de code

Le mot-clé if doit être suivi de l’expression entre parenthèses, qui sera évaluée en un
booléen. Si le résultat est true, le bloc de code qui suit l’expression conditionnelle est
exécuté. Si l’expression est false, le bloc ne sera pas exécuté. Le bloc de code doit être
délimité par des accolades {}.

Exemple simple utilisant également les boîtes de dialogue vues précédemment :

let isUserReady = confirm("Are you ready?");

console.log(isUserReady);

if (isUserReady) {

alert("User ready!");

Dans cet exemple, l’alerte "User ready!" ne s’affichera que si l’utilisateur ferme la boîte de
confirmation en cliquant sur OK. Si l’utilisateur ferme la boîte sans cliquer sur OK, le message
ne sera jamais affiché.

Même si un seul bloc contient une ligne de code, il est préférable d’utiliser les accolades pour
éviter les erreurs courantes lors de l’ajout de nouvelles instructions à l’intérieur du bloc.

Exemple problématique :

let isUserReady = confirm("Are you ready?");

if (isUserReady)

console.log("User ready!");

alert("User ready!");

Dans ce cas, la seconde instruction alert sera exécutée toujours, indépendamment de la

condition. Pour corriger, fermez les deux instructions dans le bloc avec des accolades.

Remarque sur les blocs

Les blocs de code servent à créer une unité logique. Les variables et constantes déclarées
avec let ou const à l’intérieur d’un bloc sont locales à ce bloc. Exemple :
let unitPrice = 10;

let pieces = prompt("How many pieces do you order?", 0);

if (pieces > 0) {

let total = unitPrice * pieces;

console.log(total);

console.log(total); // -> Uncaught ReferenceError: total is not defined

Opérations logiques et comparaisons

Ces opérations sont souvent utilisées dans les conditions. Exemple :

let userAge = 23;

let isFemale = false;

let points = 703;

let cartValue = 299;

let shippingCost = 9.99;

if (userAge > 21) {

if (cartValue >= 300 || points >= 500) {

shippingCost = 0;

console.log(shippingCost);

Equivalent avec opérateur && pour combiner les conditions :

if (userAge > 21 && (cartValue >= 300 || points >= 500)) {

shippingCost = 0;

4.0.3 L’instruction if ... else

Si if est pratique, que faire si l’on veut exécuter un code lorsque la condition n’est pas
remplie ? On pourrait utiliser un second if, mais cela risque de provoquer des erreurs futures.
On utilise alors le mot-clé else :

let isUserReady = confirm("Are you ready?");

if (isUserReady) {

console.log("User ready!");

} else {

console.log("User not ready!");

4.0.4 L’instruction if ... else if ... else

Pour plus de deux branches, on peut imbriquer plusieurs if ... else :

if (condition1) {

code

} else if (condition2) {

code

} else if (condition3) {

code

} else {

code

Exemple :

let number = prompt("Enter a number", 0);

if (number < 10) {

alert("<10");

} else if (number < 30) {

alert("<30");

} else if (number < 60) {

alert("<60");
} else if (number < 90) {

alert("<90");

} else if (number < 100) {

alert("<100");

} else if (number == 100) {

alert("100");

} else {

alert(">100");

Seule une alerte s’affichera, JavaScript arrête de vérifier après la première condition vraie.

4.0.5 L’opérateur conditionnel

L’opérateur conditionnel (ou ternaire) permet d’exécuter une action parmi deux, selon une
condition :

let price = 100;

let shippingCost = price > 50 ? 0 : 5;

console.log(`price = ${price}, shipping = ${shippingCost}`);

On peut également l’utiliser pour stocker un message :

let start = confirm("Start?");

let message = start ? "Here we go!" : "Aborted";

alert(message);

Pour des expressions longues, il vaut mieux utiliser if pour plus de clarté.

4.0.6 L’instruction switch ... case

Le switch est une alternative aux if imbriqués. Il évalue une expression et tente de la faire
correspondre à des cas définis :

switch (expression) {

case valeur1:

code;
 break;

case valeur2:

code;

break;

default:

code;

Exemple :

let gate = prompt("Choose gate: a, b, or c");

let win = false;

switch (gate) {

case "a":

alert("Gate A: empty");

break;

case "b":

alert("Gate B: main prize");

win = true;

break;

case "c":

alert("Gate C: empty");

break;

default:

alert("No gate " + String(gate));

if (win) {

alert("Winner!");

}
4.0.7 Résumé de la section

Les instructions conditionnelles sont essentielles pour presque toute application. Elles
permettent de gérer les entrées utilisateur, les valeurs reçues du web ou les résultats
d’opérations.

La construction la plus universelle reste if ... else, mais l’opérateur conditionnel ou switch
peut être plus pratique dans certains cas.

4.0.8 Exercices pratiques

Exercice 1: Demander à l’utilisateur de saisir un nombre.

Afficher "Bingo!" si le nombre est supérieur à 90 et inférieur à 110, sinon afficher "Miss".
Utiliser if.

Exercice 2 : Réécrire le code de l’exercice précédent en utilisant l’opérateur ternaire.

Exercice 3 : Écrire une calculatrice simple. Demander à l’utilisateur deux nombres et un

caractère représentant une opération mathématique (+, -, *, /). Si les entrées sont valides,
calculer et afficher le résultat. Sinon, afficher un message d’erreur.

Rappel : la valeur retournée par prompt est une chaîne. Utiliser Number.isNaN pour vérifier si
la conversion en nombre est correcte.

4.0.9 LAB – Exécution conditionnelle

Durée estimée : 30-60 minutes

Niveau de difficulté : Facile/Moyen

Objectifs : Se familiariser avec :

 l’exécution conditionnelle (if–else, opérateur conditionnel, switch–case)

Scénario :
Lors de la dernière modification du programme de liste de contacts, l’utilisateur pouvait
ajouter un nouveau contact.
Allez plus loin : proposer un menu où l’utilisateur choisit :

 afficher le premier contact (first)

 afficher le dernier contact (last)

 ajouter un nouveau contact (new)

Lors de l’ajout d’un nouveau contact, vérifier que toutes les données sont saisies (nom,
téléphone, email). Si une donnée est manquante, ne pas ajouter le contact.
4.1 Section 2 – Boucles

Faites défiler pour commencer

4.1.1 Qu’est-ce qu’une boucle ?

En programmation, les boucles représentent la deuxième forme d’instructions de contrôle de

flux. Avec les instructions d’exécution conditionnelle comme if et switch, elles permettent
une liberté presque infinie quant à la manière dont l’application peut fonctionner d’un point
de vue algorithmique. Alors que les instructions conditionnelles peuvent modifier le
comportement du code (nous permettant de décider pendant l’exécution du programme si
un certain fragment de code doit être exécuté ou non), les boucles offrent un moyen simple
de répéter n’importe quel fragment de code autant de fois que souhaité, ou jusqu’à ce
qu’une certaine condition soit remplie.

Il existe plusieurs types de boucles en JavaScript, mais on peut grossièrement les classer en
deux catégories :

 les boucles répétées un nombre donné de fois ;

 les boucles qui continuent jusqu’à ce qu’une condition soit remplie.

4.1.2 La boucle while

Nous savons donc que les boucles nous permettent d’exécuter un fragment de code plusieurs
fois. Mais quel serait l’intérêt ?

Imaginons qu’au sein d’un programme, nous avons créé un tableau contenant des
informations sur les utilisateurs du système. Si nous voulions afficher le nom de chacun d’eux
dans la console, nous devrions écrire console.log autant de fois qu’il y a d’utilisateurs. Par
exemple, pour 100 utilisateurs, nous écririons 100 appels console.log les uns en dessous des
autres. Cela semblerait plutôt étrange, n’est-ce pas ?

À la place, nous pouvons utiliser une boucle qui appelle la même commande console.log 100
fois, mais pour chaque élément suivant du tableau. Chaque itération de la boucle fera
référence à l’utilisateur suivant. Dans un instant, nous apprendrons à utiliser différentes
boucles.

Commençons par un exemple sans utiliser de boucle. Notre objectif est d’afficher les
nombres consécutifs 0, 10, 20, 30, 40, 50, 60, 70, 80 et 90 dans la console.

console.log(0); // -> 0

console.log(10); // -> 10

console.log(20); // -> 20

console.log(30); // -> 30
console.log(40); // -> 40

console.log(50); // -> 50

console.log(60); // -> 60

console.log(70); // -> 70

console.log(80); // -> 80

console.log(90); // -> 90

Au final, nous avons atteint notre objectif, mais cela semble un peu étrange. Nous répétons
la même commande dix fois, une par une. À première vue, il peut sembler que les
commandes ne sont pas exactement identiques. Oui, chaque fois nous appelons console.log,
mais à chaque fois un argument différent apparaît : 0, 10, 20, etc.

Modifions le code pour montrer qu’il s’agit exactement de la même action :

let n = 0;

console.log(n); // -> 0

n += 10;

console.log(n); // -> 10

n += 10;

console.log(n); // -> 20

n += 10;

console.log(n); // -> 30

n += 10;

console.log(n); // -> 40

n += 10;

console.log(n); // -> 50

n += 10;

console.log(n); // -> 60

n += 10;

console.log(n); // -> 70

n += 10;

console.log(n); // -> 80
n += 10;

console.log(n); // -> 90

n += 10;

Nous utilisons la variable n, que nous initialisons à 0. Ensuite, nous répétons ce fragment de
code identique dix fois : nous affichons la valeur actuelle de n dans la console, puis nous
l’augmentons de 10.

console.log(n);

n += 10;

C’est exactement la situation où nous pouvons utiliser une boucle. En utilisant la boucle
while, nous réécrivons notre code : nous laissons la déclaration et l’initialisation de la
variable n inchangées. Le fragment de code répétitif est placé dans un bloc de code séparé,
et à l’aide du mot while, nous précisons qu’il doit être exécuté tant que la valeur de n est
inférieure à 91.

let n = 0;

while(n < 91) {

console.log(n); // -> 0, 10, 20, 30, 40, 50, 60, 70, 80, 90

n += 10;

La boucle while est si polyvalente qu’une personne persistante pourrait remplacer toutes les
autres instructions de contrôle par des boucles while, même des instructions if. Bien sûr, ce
serait fastidieux au mieux. La boucle while est normalement utilisée lorsque nous ne savons
pas exactement combien de fois quelque chose doit être répété, mais nous savons quand
nous arrêter. La syntaxe de la boucle while est la suivante :

while(condition) {

bloc de code

L’expression entre parenthèses est évaluée au début de chaque itération de la boucle. Si la

condition est évaluée à true, le code entre accolades sera exécuté. Ensuite, l’exécution
revient au début de la boucle et la condition est évaluée à nouveau. La boucle s’exécutera
tant que la condition sera true.

Bien sûr, avec une condition mal formée, une boucle while peut se transformer en boucle
infinie. Selon le contexte, cela peut être voulu. Presque tous les jeux vidéo sont, par exemple,
essentiellement des boucles infinies répétitives : lire les entrées du joueur, mettre à jour
l’état du jeu, afficher à l’écran autant de fois que nécessaire par seconde. C’est une grande
simplification, mais néanmoins vrai.

Voyons un autre exemple.

Cette fois, la décision de terminer la boucle sera prise par l’utilisateur qui répond à la
question posée à chaque itération (nous utiliserons la boîte de dialogue confirm que nous
avons récemment introduite).

let isOver = false;

let counter = 1;

while (isOver != true) {

let continueLoop = confirm(`[${counter}] Continuer la boucle ?`);

isOver = continueLoop === true ? false : true;

counter = counter + 1;

La boucle sera répétée jusqu’à ce que la variable isOver soit définie sur true.

Dans la boucle, nous affichons la question : "Continuer la boucle ?", précédée du numéro de
l’itération (variable counter).

Notez que la variable counter n’est pas utilisée dans la condition while, son rôle est
uniquement informatif. Cliquer sur le bouton OK de la boîte de dialogue confirm affectera
true à continueLoop (sinon, elle sera false).

En fonction de la valeur de continueLoop, nous définissons une nouvelle valeur pour isOver.
N’oubliez pas que la variable testée dans la condition while doit être initialisée au préalable.

C’est l’une des erreurs les plus courantes des débutants : ils se rappellent de changer sa
valeur à l’intérieur de la boucle, mais oublient de la définir pour le premier test.

L’exemple est correct, mais contient beaucoup de code redondant, qui n’est pas vraiment
nécessaire (nous l’avons fait seulement pour analyser le fonctionnement des instructions
ultérieures de manière simple). Le même effet peut être obtenu en simplifiant le code ainsi :

let isOver = false;

let counter = 1;

while (!isOver) {

isOver = !confirm(`[${counter++}] Continuer la boucle ?`);

}
4.1.3 La boucle do … while

La boucle do ... while est très similaire à la boucle while classique, la principale différence
étant que dans une boucle while, la condition est vérifiée avant chaque itération, alors que
dans do ... while, elle est vérifiée après chaque itération.

Cela peut sembler peu important, mais la conséquence est que le code dans une boucle
do ... while est toujours exécuté au moins une fois avant le premier test de condition, alors
qu’une boucle while classique peut ne jamais être exécutée si la condition initiale est false.

Syntaxe :

do {

bloc de code

} while(condition);

Réécrivons notre dernier exemple en utilisant do ... while :

let isOver;

let counter = 1;

do {

isOver = !confirm(`[${counter++}] Continuer la boucle ?`);

} while (!isOver);

Le comportement du programme sera identique à l’exemple précédent utilisant while.

Comparez les deux exemples pour observer les différences.

Dans l’exemple suivant, nous démontrons ce que nous avons dit plus tôt : une boucle do ...
while s’exécute toujours au moins une fois :

let condition = false;

while (condition) {

console.log("Une itération de while."); // jamais exécuté

do {

console.log("Une itération de do ... while."); // exécuté une fois

} while (condition);
4.1.4 La boucle for

La boucle for fait partie du deuxième type de boucles, utile lorsque nous savons combien de
fois la boucle doit être exécutée (mais ce n’est pas obligatoire).

Syntaxe :

for (initialisation; condition; incrément) {

bloc de code

Entre parenthèses après for, il y a trois champs séparés par des points-virgules :

1. instruction d’initialisation de la boucle ;

2. instruction de condition de la boucle ;

3. instruction d’incrément de la boucle.

Tous ces champs sont optionnels, mais on les utilise presque toujours.

Instruction d’initialisation : exécutée une seule fois avant la première itération. On l’utilise
généralement pour initialiser une variable compteur.

Instruction de condition : évaluée avant chaque itération. Si true, la boucle s’exécute ; si

false, la boucle s’arrête.

Instruction d’incrément : exécutée à la fin de chaque itération, souvent pour augmenter ou

diminuer le compteur.

Exemple simple : afficher les entiers de 0 à 9 :

for (let i = 0; i < 10; i++) {

console.log(i);

Le même exemple avec while :

let i = 0;

while (i < 10) {

console.log(i);

i++;

La boucle for est pratique lorsqu’on utilise un compteur d’itérations.

Exemple avec un tableau de 4 éléments :

let values = [10, 30, 50, 100];

let sum = 0;

for (let i = 0; i < values.length; i++) {

sum += values[i];

console.log(sum); // -> 190

4.1.5 Boucles et tableaux

Nous pouvons combiner boucles et tableaux pour créer des structures dynamiques.

Exemple : demander à l’utilisateur de saisir des noms jusqu’à ce qu’il appuie sur Annuler.

let names = [];

let isOver = false;

while (!isOver) {

let name = prompt("Entrez un autre nom ou appuyez sur Annuler.");

if (name != null) {

names.push(name);

} else {

isOver = true;

for (let i = 0; i < names.length; i++){

console.log(names[i]);

Nous avons créé et rempli une structure de données dynamique sans savoir à l’avance
combien d’éléments elle contiendrait.

4.1.6 La boucle for … of

Cette boucle est spécialement adaptée aux tableaux. Elle parcourt tous les éléments sans
nécessiter de condition ou de compteur explicite.

Exemple :

let values = [10, 30, 50, 100];

let sum = 0;

for (let number of values) {

sum += number;

console.log(sum); // -> 190

Syntaxe :

for (variable of tableau) {

bloc de code

4.1.7 La boucle for … in

Cette boucle parcourt les propriétés d’un objet :

let user = {

name: "Calvin",

surname: "Hart",

age: 66,

email: "[email protected]"

};

for (let key in user) {

console.log(`${key} -> ${user[key]}`);

};

4.1.8 Les instructions break et continue

break termine une boucle ou un switch.

continue passe directement à l’itération suivante de la boucle la plus proche.
Exemple continue :

for (let i = 0; i < 10; i++) {

if (i == 3) {

continue;

console.log(i);

4.1.9 Le mot-clé break dans les switch

Dans un switch, break empêche l’exécution en cascade des cas :

let gate = prompt("Choisissez une porte : a, b ou c");

let win = false;

switch (gate) {

case "a":

case "A":

case 1:

case "1":

alert("Porte A : vide");

break;

case "b":

case "B":

case 2:

case "2":

alert("Porte B : gros lot");

win = true;

break;

case "c":

case "C":
 case 3:

case "3":

alert("Porte C : vide");

break;

default:

alert("Pas de porte " + String(gate));

if (win) {

alert("Gagnant !");

Pour du code plus complexe, on peut encapsuler chaque cas entre accolades pour créer un
scope local.

4.1.10 RÉSUMÉ DE LA SECTION

Il est difficile d’imaginer écrire des programmes sans boucles. Leur utilisation habile facilite le
travail et permet de créer des solutions impossibles autrement. JavaScript offre de nombreux
mécanismes pour répéter des actions, parcourir des tableaux ou des objets. Les boucles
while et for suffisent généralement à créer des programmes avancés.

4.1.11 EXERCICES DE LA SECTION

Exercice 1 : Affichez les nombres de 100 à 0 par pas de 10.

Exercice 2 : Modifiez le programme précédent pour demander à l’utilisateur le premier et le

dernier nombre via prompt, et vérifiez que la valeur initiale est supérieure à la finale.

Exercice 3 : Avec le tableau :

let numbers = [21, 45, 100, 12, 11, 78, 61, 4, 39, 22];

Affichez d’abord tous les nombres, puis ceux pairs, puis ceux supérieurs à 10 et inférieurs à
60.

Exercice 4 : Demandez le nom et la note d’un film (IMDb). Permettez l’entrée de plusieurs
films dans un tableau d’objets {title, imdb}. Affichez ensuite les films avec note < 7, puis ≥ 7.

Exercice 5 : Affichez les données du navire Mareno :

LATITUDE -> 40.07288

LONGITUDE -> 154.48535

COURSE -> 285.6

SPEED -> 14.0

IMO -> 9175717

NAME -> MARENO

Complétez le programme avec l’objet manquant :

let vessel = ...

for(let key in vessel) {

console.log(`${key} -> ${vessel[key]}`);

Exercice 6 : Modifiez votre programme calculatrice pour qu’il fonctionne en boucle jusqu’à ce
que l’utilisateur saisisse Q.

4.1.12 LABORATOIRE – Boucles

Durée estimée : 30–60 minutes

Niveau de difficulté : Facile/Moyen

Objectifs :
Se familiariser avec :

 les boucles (while, do … while, for, for … of, for … in)

 les instructions break et continue

Scénario :
Améliorez un programme de liste de contacts en utilisant des boucles pour afficher tous les
contacts et répéter le menu d’actions jusqu’à ce que l’utilisateur choisisse de quitter :

 afficher le premier contact (first)

 afficher le dernier contact (last)

 afficher tous les contacts (all)

 ajouter un contact (new)

 quitter le programme (quit)

Après chaque action, le programme redemande l’action à effectuer.

5.0 Section 1 – Functions – Part 1

5.0.1 Qu’est-ce qu’une fonction ?

Une fonction est un morceau de code indépendant conçu pour effectuer une tâche
spécifique.

 On lui donne généralement un nom pour pouvoir l’appeler plusieurs fois dans le
programme.

 Il existe aussi des fonctions anonymes (sans nom).

Avantages des fonctions :

1. Modularité : découpe le code en parties logiques, plus lisibles.

2. Réutilisation : permet d’éviter de répéter le même code.

3. Maintenance facile : modification d’une séquence de code en un seul endroit.

Exemple sans fonction :

let temperatures = [12, 12, 11, 11, 10, 9, 9, 10, ...];

let sum = 0;

for (let i = 0; i < temperatures.length; i++) {

sum += temperatures[i];

let meanTemp = sum / temperatures.length;

console.log(`mean: ${meanTemp}`);

5.0.2 Déclaration de fonctions

Syntaxe de base :

function functionName() {

// code

Exemple :

function getMeanTemp() {

sum = 0;

for (let i = 0; i < temperatures.length; i++) {

 sum += temperatures[i];

meanTemp = sum / temperatures.length;

Déclarer une fonction ne l’exécute pas. Il faut l’appeler pour voir l’effet.

5.0.3 Appel de fonctions

getMeanTemp(); // exécute le code de la fonction

Exemple complet :

temperatures = [12, 12, 11, ...];

getMeanTemp();

console.log(`mean: ${meanTemp}`);

Les fonctions peuvent être déclarées avant ou après leur appel grâce au hoisting.

5.0.4 Variables locales

 Les variables déclarées à l’intérieur d’une fonction (let ou var) sont locales et
invisibles à l’extérieur.

 Cela évite d’utiliser des variables globales inutiles.

function getMeanTemp() {

let sum = 0; // variable locale

for (let i = 0; i < temperatures.length; i++) {

sum += temperatures[i];

meanTemp = sum / temperatures.length;

5.0.5 La commande return

 return termine la fonction immédiatement.

  Elle peut aussi retourner une valeur à l’endroit où la fonction est appelée.

function getTrue() {

return true;

let test = getTrue(); // test = true

Exemple simplifié pour le calcul de la moyenne :

function getMeanTemp() {

let sum = 0;

for (let i = 0; i < temperatures.length; i++) {

sum += temperatures[i];

return sum / temperatures.length;

console.log(getMeanTemp()); // affiche directement la moyenne

5.0.6 Paramètres

 Les paramètres permettent à une fonction d’utiliser des données venant de

l’extérieur.

 Les arguments sont les valeurs passées aux paramètres lors de l’appel.

Exemple : addition :

function add(first, second) {

return first + second;

let result = add(5, 7); // result = 12

Exemple avec tableau :

function getElement(elements, index) {

return elements[index];

}
let names = ["Alice", "Bob", "Eve", "John"];

console.log(getElement(names, 2)); // -> Eve

Exemple avec moyenne :

function getMeanTemp(temperatures) {

let sum = 0;

for (let i = 0; i < temperatures.length; i++) {

sum += temperatures[i];

return sum / temperatures.length;

let day1 = [12, 12, 11, ...];

let day2 = [17, 16, 14, ...];

console.log(getMeanTemp(day1));

console.log(getMeanTemp(day2));

5.0.7 Shadowing

 Les paramètres et variables locales dans une fonction masquent (shadow) les
variables globales du même nom.

 Les variables non déclarées localement restent globales.

let a = 100, b = 200, c = 300;

function test(a) {

let b = 10;

console.log(a); // paramètre a

console.log(b); // variable locale b

console.log(c); // variable globale c

test(1); // -> 1, 10, 300

console.log(a, b, c); // -> 100, 200, 300

5.1 Section 2 – Fonctions – Partie 2

Faites défiler pour commencer

5.1.1 Validation des paramètres

Rappelez-vous comment nous avons dit que nous utilisons parfois le mot-clé return pour
interrompre les fonctions en cas d’erreurs ? Un bon exemple est la validation des paramètres
d’une fonction.

Revenons à l’exemple de la fonction getMeanTemp. La dernière version que nous avons

écrite nécessite un tableau de nombres comme argument. Avant de commencer le calcul,
nous pouvons vérifier si la valeur qui lui est passée est réellement un tableau.

function getMeanTemp(temperatures) {

if (!(temperatures instanceof Array)) {

return NaN;

let sum = 0;

for (let i = 0; i < temperatures.length; i++) {

sum += temperatures[i];

return sum / temperatures.length;

console.log(getMeanTemp(10)); // -> NaN

console.log(getMeanTemp([10, 30])); // -> 20

5.1.2 Récursion

Lors de vos cours de mathématiques, vous avez probablement rencontré le concept de

factorielle. Une factorielle est une fonction, indiquée par un point d’exclamation en notation
mathématique. On passe un entier à cette fonction et son résultat est obtenu en multipliant
tous les entiers de 1 jusqu’au nombre donné comme argument. Formellement, on définit une
factorielle comme suit :

n!=n⋅(n−1)⋅(n−2)⋅...⋅2⋅1n! = n \cdot (n-1) \cdot (n-2) \cdot ... \cdot 2 \cdot 1n!
=n⋅(n−1)⋅(n−2)⋅...⋅2⋅1

Par exemple, la factorielle de 6 est :

6!=6⋅5⋅4⋅3⋅2⋅1=7206! = 6 \cdot 5 \cdot 4 \cdot 3 \cdot 2 \cdot 1 = 7206!=6⋅5⋅4⋅3⋅2⋅1=720

Essayons d’écrire une fonction qui calculera la factorielle du nombre donné.

Elle prendra le paramètre n et retournera la valeur calculée.

function factorial (n) {

let result = 1;

while (n > 1) {

result *= n;

n--;

return result;

console.log(factorial(6)); // -> 720

Dans ce cas, nous utilisons l’approche itérative pour calculer la factorielle, c’est-à-dire que
nous utilisons une boucle dans laquelle, à chaque itération, nous multiplions le résultat
précédent par un autre élément de la séquence.

Après la première itération, le résultat est 6, après la deuxième, 30, après la troisième, 120,
et ainsi de suite. Les itérations se répètent jusqu’au dernier élément significatif de la
séquence, c’est-à-dire jusqu’à la valeur 2 (d’où la condition de fin de boucle n > 1).

Cependant, la définition d’une factorielle peut être écrite d’une manière légèrement
différente. Elle sera la factorielle de l’élément précédent n - 1 multipliée par n.

Par exemple, 6! est 5! multiplié par 6. Une telle définition de la factorielle utilise la récursion,
c’est-à-dire que la fonction se réfère à elle-même (mais avec un argument différent). La
récursion est un mécanisme qui permet de simplifier la notation formelle de nombreuses
fonctions mathématiques et de les présenter de manière élégante. Nous pouvons également
utiliser la récursion avec succès en programmation.

Déclarons à nouveau la fonction factorielle, cette fois en utilisant la récursion :

function factorial (n) {

return n > 1 ? n * factorial(n - 1) : 1;

console.log(factorial(6)); // -> 720

Pour obtenir un code plus court et plus compact, au lieu d’une instruction conditionnelle if,
nous utilisons l’opérateur conditionnel ternaire. Ici, nous vérifions si l’argument n est
supérieur à 1. Selon le résultat, nous retournons soit le produit du nombre n par le résultat
de l’appel factorial(n – 1), soit la valeur 1. La figure ci-dessous montre une séquence d’appels
à la fonction factorielle à partir d’un appel avec la valeur 6 (les flèches montrent où la valeur
de la fonction appelée est retournée).

La récursion est couramment utilisée en programmation. Cependant, comme pour toute

solution, elle doit être utilisée avec prudence. Nous ne devrions pas l’utiliser lorsqu’il est
impossible d’estimer le nombre d’appels imbriqués.

Il faut également être très attentif à la formulation de la condition qui interrompt la

séquence d’appels de la fonction – les erreurs peuvent provoquer la suspension du
programme.

5.1.3 Fonctions comme membres de première classe

En JavaScript, les fonctions sont des membres de première classe. Ce terme signifie que les
fonctions peuvent être traitées comme n’importe quelle donnée, pouvant être stockées dans
des variables ou passées en arguments à d’autres fonctions. Par exemple, nous pouvons
déclarer la fonction showMessage puis la stocker dans la variable sm.

function showMessage(message) {

console.log(`Message: ${message}`);

let sm = showMessage;

Nous pouvons stocker n’importe quelle fonction accessible dans ce scope dans une variable
et utiliser l’opérateur d’appel de fonction () pour l’exécuter. Nous pouvons vérifier que la
variable sm est maintenant une fonction en utilisant l’opérateur typeof.

sm("This works!"); // -> Message: This works!

console.log(typeof sm); // -> function

Mais il est important de se rappeler que lors de l’affectation d’une fonction à une variable,
nous n’utilisons pas l’opérateur d’appel de fonction, car cela exécuterait la fonction et
affecterait le résultat de la fonction à la variable, et non pas la fonction elle-même.

function doNothing() {

return undefined;

let a = doNothing(); // assignation du résultat de l'appel

let b = doNothing; // assignation de la fonction

console.log(typeof a); // -> undefined

console.log(typeof b); // -> function

Dans cet exemple, le résultat de l’appel de doNothing (c’est-à-dire la valeur undefined

retournée par la fonction) est stocké dans la variable a, tandis que la fonction doNothing elle-
même est stockée dans la variable b (plus précisément, une référence à la fonction).

Cette propriété est particulièrement utile lorsqu’on passe la fonction comme paramètre à
d’autres fonctions, ce que nous verrons bientôt. Pour l’instant, testons que c’est
effectivement possible.

function add(a, b) {

return a + b;

function multiply(a, b) {

return a * b;

function operation(func, first, second) {

return func(first, second);

console.log(operation(add, 10, 20)); // -> 30

console.log(operation(multiply, 10, 20)); // -> 200

La fonction operation prend en premier argument une fonction (func) et l’appelle avec les
deux autres arguments passés (first et second).

5.1.4 Expressions de fonction

Pour stocker une fonction dans une variable ou la passer comme argument, il n’est pas
nécessaire de la déclarer auparavant et d’utiliser son nom.

Reprenons notre exemple avec add :

function add(a, b) {

return a + b;

let myAdd = add;

console.log(myAdd(10, 20)); // -> 30

console.log(add(10, 20)); // -> 30

Nous déclarons d’abord la fonction add, puis la stockons dans la variable myAdd. Nous
pouvons appeler la fonction avec le nom add ou avec la variable myAdd. Nous pouvons
raccourcir cette notation et déclarer la fonction directement en la stockant dans une
variable :

let myAdd = function add(a, b) {

return a + b;

console.log(myAdd(10, 20)); // -> 30

console.log(add(10, 20)); // -> 30

Dans cet exemple, nous déclarons à nouveau la fonction add et la stockons simultanément
dans la variable myAdd.

Cette forme de définition de fonction s’appelle expression de fonction. Ici, il s’agit d’une
expression de fonction nommée, car la fonction a un nom (add). Il existe également une
version anonyme, c’est-à-dire une expression de fonction sans nom :

let myAdd = function(a, b) {

return a + b;

console.log(myAdd(10, 20)); // -> 30

Revenons au concept de fonctions anonymes. Il peut sembler déroutant d’utiliser un nom (ici
une variable) pour se référer à une fonction. Dans ce cas, il s’agit de l’anonymat, c’est-à-dire
l’absence de nom dans la définition même de la fonction. Cela devient plus évident lorsqu’on
passe la fonction comme paramètre à une autre fonction.

Exemple :

function operation(func, first, second) {

return func(first, second);

let myAdd = function(a, b) {

return a + b;

console.log(operation(myAdd, 10, 20)); // -> 30

console.log(operation(function(a, b) {
 return a * b;

}, 10, 20)); // -> 200

Dans le premier cas, nous passons la fonction myAdd. Dans le second, nous passons
directement une fonction anonyme. Le résultat est le même, mais la fonction anonyme n’a
pas de nom.

5.1.5 Callbacks

Les fonctions passées comme arguments à d’autres fonctions sont appelées callbacks. Elles
peuvent sembler exotiques, mais elles sont très importantes en programmation. Une
fonction qui reçoit un callback comme argument peut l’appeler à tout moment. Dans nos
exemples, le callback est exécuté synchroniquement, c’est-à-dire dans un ordre strictement
défini.

Callbacks synchrones

let inner = function() {

console.log('inner 1');

let outer = function(callback) {

console.log('outer 1');

callback();

console.log('outer 2');

console.log('test 1');

outer(inner);

console.log('test 2');

Sortie :

test 1

outer 1

inner 1

outer 2

test 2
L’ordre des actions est donc respecté. Mais il peut être perturbé dans certaines circonstances
spéciales.

5.1.6 Callbacks asynchrones

L’exécution asynchrone est un sujet complexe, dépendant du langage et de l’environnement.

Pour JavaScript côté client dans un navigateur, elle est basée sur la programmation
événementielle : la réponse asynchrone à certains événements (clic, timer, réception de
données…).

Exemple avec setTimeout :

let inner = function() {

console.log('inner 1');

let outer = function(callback) {

console.log('outer 1');

setTimeout(callback, 1000);

console.log('outer 2');

console.log('test 1');

outer(inner);

console.log('test 2');

Sortie (différée pour le callback) :

test 1

outer 1

outer 2

test 2

...

inner 1

5.1.7 Fonctions setTimeout et setInterval

 setTimeout : action retardée une seule fois.

 setInterval : action retardée et répétée périodiquement.

Exemple combiné :

let inner = function() {

console.log('inner 1');

let outer = function(callback) {

console.log('outer 1');

let timerId = setInterval(callback, 1000);

console.log('outer 2');

setTimeout(function(){

clearInterval(timerId);

}, 5500);

console.log('test 1');

outer(inner);

console.log('test 2');

Sortie :

outer 1

outer 2

test 2

...

inner 1

inner 1

inner 1

inner 1

inner 1

Les appels asynchrones peuvent aussi venir d’événements générés par l’utilisateur. Exemple :

window.addEventListener("click", function() {

console.log("clicked!");
});

Rien ne se passe avant un clic. Lors du clic, le message "clicked!" apparaît.

5.1.8 Fonctions fléchées (Arrow functions)

Une fonction fléchée est une forme courte d’une expression de fonction.

let add = (a, b) => a + b;

console.log(add(10, 20)); // -> 30

 Si un seul paramètre, on peut omettre les parenthèses.

 Si une seule instruction retourne une valeur, return peut être omis.

 Utile pour les fonctions courtes et souvent anonymes.

Exemple avec forEach :

let names = ['Alice', 'Eve', 'John'];

names.forEach(element => console.log(element)); // -> Alice, Eve, John

5.1.9 RÉSUMÉ DE LA SECTION

Les fonctions sont fondamentales en programmation. On utilise :

 Fonctions natives (console.log)

 Fonctions tierces (bibliothèques comme Leaflet, D3.js, jQuery)

 Fonctions personnalisées (réutilisation, tests, logique modulaire)

On a vu :

 Déclaration classique, expressions de fonction et fléchées

 Passage de paramètres et retour de valeurs

 Fonctions nommées vs anonymes

 Callbacks et récursion

5.1.10 EXERCICES DE LA SECTION

Exercice 1 : Tri de tableau avec sort

 Modifier pour raccourcir le code avec fonction anonyme ou fléchée.

 Tri descendant.

Exercice 2 : Fonctions add, sub, mult

 Vérifier que les arguments sont des entiers (Number.isInteger)

  Retourner NaN sinon

Exercice 3 : Réécrire avec fonctions fléchées

Exercice 4 : Fonction action avec callback

 Prend une fonction en argument et deux nombres, retourne le résultat

Exercice 5 : Afficher les entiers consécutifs 10 fois toutes les 2 secondes

 Utiliser setInterval, clearInterval, setTimeout

Exercice 6 : Calculer n-ième élément de Fibonacci

 Utiliser récursion

 Expression de fonction anonyme

Exercice 7 : Réécrire l’Exercice 5 avec fonction fléchée

 Code le plus court possible

Exercice 8 : Version itérative de l’Exercice 5

 Utiliser for et déclaration classique