+ QUIZ

Version en ligne
Apprendre à développer avec JavaScript OFFERTE !
Des bases à l’utilisation de frameworks pendant 1 an

Apprendre à développer
Ce livre sur l’apprentissage du langage JavaScript s’adresse à des Christian VIGOUROUX est Maître de
lecteurs qui souhaitent maîtriser cette brique incontournable et omni- Conférences des Universités à l’Université
présente dans le développement de sites web (intranet, extranet, inter- de Rennes 1 dans la composante Gestion
net) et dans celui d’applications hybrides pour smartphones et tablettes. (IAE - Institut de Gestion de Rennes). Il y

Apprendre à développer
enseigne depuis près de 30 ans l’informa-
En effet, même si des solutions logicielles existent pour contourner la tique de gestion à des publics d’étudiants
connaissance du langage JavaScript, sa maîtrise est un atout essentiel en Formation Initiale et Formation Conti-

avec JavaScript
pour acquérir une expertise dans le domaine des technologies du Web nue (Bac+5) et est notamment en charge
2.0.

JavaScript
des enseignements en Techniques Inter-
En prenant le parti que le lecteur n’a que des connaissances minimales net, en Génie Logiciel et en Informatique
Décisionnelle du Master Systèmes d’Infor-

avec
en programmation, l’auteur débute par des rappels ou des apports en
algorithmie. Il explique ensuite les bases du langage JavaScript. Les mation et Contrôle de Gestion qu’il dirige.
différents concepts, principes ou fonctionnalités sont mis en œuvre au Par ailleurs, il mène des missions de
travers d’exemples concrets facilement réutilisables ensuite dans conseil auprès de grands groupes pour la
mise en œuvre de solutions décisionnelles
d’autres développements.
et pour l’implémentation d’architectures

Des bases à l’utilisation

Dans la mesure où le langage JavaScript interagit avec d’autres techno- logicielles.
logies web (ou langages) comme l’incontournable HTML, les feuilles de
styles CSS, les langages de script orientés serveurs comme PHP, ce Téléchargement

de frameworks
www.editions-eni.fr
.fr
livre vous permettra aussi de faire vos premiers pas sur ces différentes
technologies.
Dans cette quatrième édition, le livre intègre des chapitres supplémen-
taires relatifs aux principaux frameworks JavaScript tels que Svelte et
React facilitant le développement d’applications web. sur www.editions-eni.fr :

Le dernier chapitre présente React Native (déclinaison de React) qui

b Code source des exercices 4e édition
du livre.
permet de développer aisément des applications pour mobiles avec une
approche hybride, c’est-à-dire avec un même code déployable sur pla-
teformes Android et iOS (iPhone et iPad).
Tous les chapitres du livre intègrent de nombreux exemples largement
commentés et en progression logique. Des éléments complémentaires
sont en téléchargement sur le site www.editions-eni.fr. Vous y trouve- En téléchargement
rez aussi des applications « bonus », non décrites dans le livre.
code source des exemples
ISBN : 978-2-409-03283-7

Pour plus
d’informations :
29,90 €

Christian VIGOUROUX

RI_XGT_NL_K.indd 41 02/11/2021 09:14:15

Table des matières 1

Les éléments à télécharger sont disponibles à l'adresse suivante :

http://www.editions-eni.fr
Saisissez la référence ENI de l'ouvrage RI4JASAP dans la zone de recherche
et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement.

Partie 1 : Présentation de JavaScript

et programmation à partir d’algorithmes

Chapitre 1-1
Présentation du langage JavaScript
1. Définition et rapide historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2. Prérequis pour un apprentissage aisé du langage . . . . . . . . . . . . . . . . 17
3. Outillage nécessaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4. Positionnement du JavaScript face à d’autres technologies
de développement web (HTML, CSS, PHP…) . . . . . . . . . . . . . . . . . . 19

Chapitre 1-2
Développement à partir d’algorithmes
1. Présentation de la notion d'algorithme . . . . . . . . . . . . . . . . . . . . . . . . 21
2. Notion de variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.1 Présentation des notions de variable et de type . . . . . . . . . . . . . 23
2.2 Types de base et opérations associées . . . . . . . . . . . . . . . . . . . . . 24
2.3 Intérêt des types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.4 Utilisation des variables dans des expressions . . . . . . . . . . . . . . 27
2.5 Tableau récapitulatif des opérateurs . . . . . . . . . . . . . . . . . . . . . . 27
3. Manipulation des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.1 Nommage des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2 Affectation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.3 Exercice n°1 : Inversion du contenu
de deux variables mémoire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.4 Affichage des résultats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2 Apprendre à développer
avec JavaScript

3.5 Exercice n°2 : Surfaces de cercles . . . . . . . . . . . . . . . . . . . . . . . . . 35

3.6 Saisie au clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.7 Exercice n°3 : Surface et volume d'une sphère . . . . . . . . . . . . . . 37
4. Fonctions prédéfinies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.1 Exercice n°4 : Affichage de la longueur d'un nom . . . . . . . . . . . 38
4.2 Exercice n°5 : Détermination des initiales . . . . . . . . . . . . . . . . . 39
5. Traitements conditionnés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.1 Exercice n°6 : Polynôme du second degré . . . . . . . . . . . . . . . . . . 44
5.2 Exercice n°7 : Libellé du mois en clair . . . . . . . . . . . . . . . . . . . . . 46
5.3 Exercice n°8 : Libellé du mois en clair (Suivant ... Finsuivant) . 49
6. Structures itératives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
6.1 Principe des itérations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
6.2 Structures itératives de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
6.3 Exercice n°9 : Moyenne de 10 nombres. . . . . . . . . . . . . . . . . . . . 53
6.4 Exercice n°10 : Moyenne d'une série de n nombres . . . . . . . . . . 54
6.5 Exercice n°11 : Plus Grand Commun Diviseur
par la méthode des divisions successives. . . . . . . . . . . . . . . . . . . 57
6.6 Structure itérative Pour . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
6.7 Exercice n°12 : Calcul de la moyenne de 10 nombres. . . . . . . . . 61
6.8 Exercice n°13 : Décompte du nombre
de voyelles dans un mot. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
7. Tableaux à dimension unique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
7.1 Exercice n°14 : Décompte des nombres pairs dans un tableau . 65
8. Tableaux à dimensions multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
8.1 Exercice n°15 : Mini-tableur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
9. Procédures, fonctions et passage de paramètres . . . . . . . . . . . . . . . . . 69
9.1 Les objectifs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
9.2 Les procédures. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
9.3 Exercice n°16 : Appel d'une procédure
avec passage de paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
9.4 Les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
9.5 Exercice n°17 : Appel d'une fonction
avec passage de paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Table des matières 3

Partie 2 : Bien débuter avec JavaScript

Chapitre 2-1
Bases du langage JavaScript
1. Méthodologie d'apprentissage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
2. Variables (déclaration et typage) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
2.1 Exercice n°2 : Surfaces de cercles . . . . . . . . . . . . . . . . . . . . . . . . . 78
2.2 Exercice n°3 : Surface et volume d'une sphère . . . . . . . . . . . . . . 85
2.3 Exercice n°4 : Nombre de lettres d'un mot . . . . . . . . . . . . . . . . . 88
2.4 Exercice n°5 : Détermination des initiales . . . . . . . . . . . . . . . . . 88

Chapitre 2-2
Conditionnement des traitements
1. Présentation de la syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
2. Exemples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
2.1 Exercice n°6 : Polynôme du second degré . . . . . . . . . . . . . . . . . . 93
2.2 Exercice n°8 : Impression du libellé d'un mois . . . . . . . . . . . . . . 94

Chapitre 2-3
Traitements itératifs (boucles)
1. Présentation de la syntaxe des boucles . . . . . . . . . . . . . . . . . . . . . . . . 97
2. Boucle while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
2.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
2.2 Exercice n°9 : Moyenne de 10 nombres saisis au clavier . . . . . . 99
2.3 Exercice n°10 : Moyenne d'une série
de n nombres saisis au clavier . . . . . . . . . . . . . . . . . . . . . . . . . . 100
3. Boucle do while. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
3.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
3.2 Exercice n°11 : Moyenne d'une série
de n nombres saisis au clavier . . . . . . . . . . . . . . . . . . . . . . . . . . 102
4 Apprendre à développer
avec JavaScript

4. Boucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

4.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
4.2 Exercice n°12 : Moyenne d'une série
de 10 nombres saisis au clavier . . . . . . . . . . . . . . . . . . . . . . . . . 104
4.3 Exercice n°13 : Décompte du nombre
de voyelles dans un mot105

Chapitre 2-4
Tableaux
1. Tableaux à dimension unique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
1.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
1.2 Exercice n°14 : Décompte
des nombres pairs dans un tableau109
2. Tableaux à dimensions multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
2.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
2.2 Exercice n°15 : Mini-tableur. . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Chapitre 2-5
Procédures et fonctions
1. Les procédures. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
1.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
1.2 Exercice n°16 : Appel d'une procédure
avec passage de paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
2. Les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
2.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
2.2 Exercice n°17 : Appel d'une fonction
avec passage de paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Table des matières 5

Partie 3 : Approche POO sous JavaScript

Chapitre 3-1
Approche "objet" en JavaScript
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
2. Programmation orientée objet au travers d’exemples . . . . . . . . . . . 122
2.1 Séquence 1 : Déclaration des objets
JavaScript en méthode "Inline" . . . . . . . . . . . . . . . . . . . . . . . . . 122
2.2 Séquence 2 : Création des objets JavaScript par constructeur. 123
2.3 Séquence 3 : Variables privées dans une instance d'objet . . . . 125
2.4 Séquence 4 : Passage de paramètre(s) à un constructeur . . . . . 126
2.5 Séquence 5 : Non-partage des méthodes
par les instances d'objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
2.6 Séquence 6 : Notion de prototype . . . . . . . . . . . . . . . . . . . . . . . 128
2.7 Séquence 7 : Surcharge d'une méthode . . . . . . . . . . . . . . . . . . . 130
2.8 Séquence 8 : Extension d'un prototype . . . . . . . . . . . . . . . . . . . 131
2.9 Séquence 9 : Mécanisme de l'héritage . . . . . . . . . . . . . . . . . . . . 132
2.10 Séquence 10 : Limite de l'héritage de la séquence n°9 . . . . . . . 134
2.11 Séquence 11 : Une seconde limite à notre héritage . . . . . . . . . 135

Chapitre 3-2
Objets de base de JavaScript
1. Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
2. Les objets de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
2.1 Objet Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
2.2 Objet Date. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
2.3 Objet Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
2.4 Objet window. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
2.5 Objet navigator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
2.6 Objet String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
6 Apprendre à développer
avec JavaScript

Chapitre 3-3
Les nouveautés d’EcmaScript 6
1. Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
2. Apports au niveau de la Programmation Orientée Objet . . . . . . . . 170
2.1 Notion de prototype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
2.2 Surcharge d’une méthode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
2.3 Extension de prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
2.4 Héritage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
2.5 Premier exemple POO en EcmaScript 6 . . . . . . . . . . . . . . . . . . 184
2.6 Héritage en EcmaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
2.7 Méthodes getter, setter et static en EcmaScript 6 . . . . . . . . . . 190
3. Fonctions fléchées (arrow functions) . . . . . . . . . . . . . . . . . . . . . . . . 195
3.1 Avantages des fonctions fléchées . . . . . . . . . . . . . . . . . . . . . . . 195
3.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
4. Structures Map, Set et boucle for of . . . . . . . . . . . . . . . . . . . . . . . . . 201
4.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
4.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
5. Portée des variables (var ou let) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
5.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
5.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
6. Promesses (promise) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
6.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
6.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
7. Déstructuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
7.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
7.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Table des matières 7

Partie 4 : Gestion de formulaire et modèle DOM

Chapitre 4-1
Saisie de données via des formulaires
1. Pilotage des contrôles de saisie via JavaScript. . . . . . . . . . . . . . . . . . 225
1.1 Contrôle de saisie sur un champ texte . . . . . . . . . . . . . . . . . . . 225
1.2 Contrôle de numéricité d'une saisie dans un champ texte . . . 232
1.3 Contrôle de caractères alphabétiques d'une saisie
dans un champ texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
1.4 Contrôle de caractères alphabétiques et numériques
d'une saisie dans un champ texte . . . . . . . . . . . . . . . . . . . . . . . 236
1.5 Contrôle de longueur d'une saisie dans un champ texte . . . . . 237
1.6 Contrôle de saisie sur une adresse e-mail . . . . . . . . . . . . . . . . . 238
1.7 Contrôle d'un choix dans une liste déroulante
(version simplifiée) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
1.8 Contrôle d'un choix dans une liste déroulante
(version étendue) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
1.9 Contrôle d'un choix par bouton radio. . . . . . . . . . . . . . . . . . . . 245
1.10 Contrôle d'un choix par case à cocher . . . . . . . . . . . . . . . . . . . . 249

Chapitre 4-2
Modèle DOM
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
1.1 Définition de DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
1.2 Définition de l'arborescence . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
2. Apprentissage du modèle DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
2.1 Script "Hello World!" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
2.2 Différence entre write et writeln. . . . . . . . . . . . . . . . . . . . . . . . 258
2.3 Gestion des liens hypertextes . . . . . . . . . . . . . . . . . . . . . . . . . . 260
2.4 Gestion des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
2.5 Gestion des formulaires et de leurs balises . . . . . . . . . . . . . . . . 264
2.6 Gestion des ancres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
8 Apprendre à développer
avec JavaScript

2.7 Gestion de la navigation entre pages web. . . . . . . . . . . . . . . . . 269

2.8 Affichage de caractéristiques générales du document . . . . . . . 274
2.9 Gestion des boutons dans les formulaires. . . . . . . . . . . . . . . . . 276
2.10 Gestion des tableaux (balise HTML table) . . . . . . . . . . . . . . . . 286

Chapitre 4-3
Exploration de flux XML via DOM
1. Notion de flux XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
2. Exemples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
2.1 Exemple 1 : Affichage d'un contenu d’e-mail codé en XML . . 316
2.2 Exemple 2 : Liste des marques des voitures
(fichier voitures.xml) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
2.3 Exemple 3 : Liste des marques des voitures avec une boucle. . 322
2.4 Exemple 4 : Liste des nœuds rattachés à la racine . . . . . . . . . . 324
2.5 Exemple 5 : Liste des champs (nœuds) de chaque voiture. . . . 326
2.6 Exemple 6 : Remplacement d'une valeur de nœud. . . . . . . . . . 329
2.7 Exemple 7 : Accès aux attributs. . . . . . . . . . . . . . . . . . . . . . . . . 330
2.8 Exemple 8 : Accès à un nœud parent . . . . . . . . . . . . . . . . . . . . 331
2.9 Exemple 9 : Parcours arrière des nœuds . . . . . . . . . . . . . . . . . . 332
2.10 Exemple 10 : Remplacement systématique
d'une valeur d'attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
2.11 Exemple 11 : Conversion XML en HTML . . . . . . . . . . . . . . . . 335
2.12 Exemple 12 : Suppression d'un nœud dans un flux XML . . . . 337

Partie 5 : Cookies et mécanismes de persistance

Chapitre 5-1
Gestion des cookies en JavaScript
1. Notion de cookie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
2. Écriture d'un cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
3. Lecture d'un cookie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Table des matières 9

4. Suppression d'un cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346

Chapitre 5-2
Stockage local de données
1. Présentation générale des solutions. . . . . . . . . . . . . . . . . . . . . . . . . . 349
1.1 Stockage par sessionStorage. . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
1.2 Stockage par localStorage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
2. Mise en œuvre du Web Storage au travers d'exemples . . . . . . . . . . 351
2.1 Exemple 1 : Stockage par localStorage
de chaînes de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
2.2 Exemple 2 : Stockage dans le localStorage
d'un objet JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361

Chapitre 5-3
Stockage distant (Ajax - PHP - MySQL - XML)
1. Présentation générale de la solution . . . . . . . . . . . . . . . . . . . . . . . . . 371
2. Mise en œuvre du stockage distant au travers d'exemples . . . . . . . 372
2.1 Exemple 1 : Accès Ajax sur BDD MySQL
(liste de l'ensemble des voitures) . . . . . . . . . . . . . . . . . . . . . . . . 373
2.2 Exemple 2 : Accès MySQL via Ajax. . . . . . . . . . . . . . . . . . . . . . 399

Chapitre 5-4
Stockage distant (Ajax - PHP - MySQL - JSON)
1. Présentation générale de la solution . . . . . . . . . . . . . . . . . . . . . . . . . 407
2. Mise en œuvre du stockage distant au travers d'exemples . . . . . . . 409
2.1 Exemple 1 : Présentation du système de notation JSON. . . . . 409
2.2 Exemple 2 : Lecture d'un fichier JSON
via XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
2.3 Exemple 3 : Lecture d'un fichier JSON
via XMLHttpRequest et un script serveur en PHP . . . . . . . . . 420
10 Apprendre à développer
avec JavaScript

2.4 Exemple 4 : Lecture d'une table MySQL

via XMLHttpRequest (serveur PHP et flux JSON) . . . . . . . . . 422
2.5 Exemple 5 : Recodage de l'exemple 4
avec une liste déroulante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

Partie 6 : Géolocalisation, dessin et graphiques de gestion

Chapitre 6-1
Géolocalisation
1. Principe de la géolocalisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
2. Exemples d'applications de géolocalisation. . . . . . . . . . . . . . . . . . . . 434
2.1 Exemple 1 : Affichage de la carte de l'Ouest de la France . . . . 434
2.2 Exemple 2 : Affichage de la carte de l’Ouest
de la France (marqueur) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441
2.3 Exemple 3 : Affichage de la carte de l’Ouest de la France
(marqueur et cercles de population) . . . . . . . . . . . . . . . . . . . . . 444
2.4 Exemple 4 : Affichage de la carte de l'Ouest de la France
(informations météorologiques) . . . . . . . . . . . . . . . . . . . . . . . . 447
2.5 Exemple 5 : Affichage de la carte de Rennes Centre-Sud
(avec photo des sites importants) . . . . . . . . . . . . . . . . . . . . . . . 454
2.6 Exemple 6 : Affichage de la carte de Rennes (Street View) . . . 456

Chapitre 6-2
Dessin (HTML5 CANVAS)
1. Présentation de l'API HTML5 CANVAS. . . . . . . . . . . . . . . . . . . . . . 461
2. Exemples d'applications de l'élément <canvas> . . . . . . . . . . . . . . . 462
2.1 Exemple 1 : Tracé d'un simple carré . . . . . . . . . . . . . . . . . . . . . 462
2.2 Exemple 2 : Tracé d'une grille de TicTacToe . . . . . . . . . . . . . . 466
2.3 Améliorations possibles sur le jeu du TicTacToe . . . . . . . . . . . 473
Table des matières 11

Chapitre 6-3
Graphiques de gestion
1. Différentes solutions de conception de graphiques de gestion . . . . 475
2. Exemples d'utilisation des API Google Charts . . . . . . . . . . . . . . . . . 476
2.1 Exemple 1 : Tracé d'un histogramme . . . . . . . . . . . . . . . . . . . . 476
2.2 Exemple 2 : Tracé d'un graphique en secteurs . . . . . . . . . . . . . 482
2.3 Exemple 3 : Tracé d'une carte . . . . . . . . . . . . . . . . . . . . . . . . . . 485

Partie 7 : Frameworks JavaScript

Chapitre 7-1
Positionnement des frameworks JavaScript
1. Présentation générale des frameworks JavaScript . . . . . . . . . . . . . . 489
1.1 Frameworks « front-end ». . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490
1.2 Frameworks « back-end » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490
1.3 Solutions de développement « hybride » . . . . . . . . . . . . . . . . . . 491
2. Les frameworks Node.js, Svelte, React et React Native. . . . . . . . . . 491

Chapitre 7-2
Installation de Node.js
1. Présentation du framework Node.js . . . . . . . . . . . . . . . . . . . . . . . . . 493
2. Installation du framework Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . 495

Chapitre 7-3
Framework Svelte
1. Présentation du framework Svelte . . . . . . . . . . . . . . . . . . . . . . . . . . 503
2. Site svelte.dev . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504
3. Création locale d’un projet Svelte . . . . . . . . . . . . . . . . . . . . . . . . . . . 507
12 Apprendre à développer
avec JavaScript

4. Installation de Microsoft Visual Studio Code . . . . . . . . . . . . . . . . . 509

5. Projets Svelte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
5.1 « eni_svelte_01 » - Première application . . . . . . . . . . . . . . . . . . 510
5.2 « eni_svelte_02 » - Importance des commentaires . . . . . . . . . . 517
5.3 « eni_svelte_03 » - Mise en place d’une image. . . . . . . . . . . . . . 519
5.4 « eni_svelte_04 » - Intégration de balises HTML . . . . . . . . . . . 521
5.5 « eni_svelte_05 » - Un premier bouton . . . . . . . . . . . . . . . . . . . 523
5.6 « eni_svelte_06 » - Le rôle du $ dans les formules . . . . . . . . . . . 526
5.7 « eni_svelte_07 » - Champs de saisie . . . . . . . . . . . . . . . . . . . . . 528
5.8 « eni_svelte_08 » - Saisie avec curseur . . . . . . . . . . . . . . . . . . . . 531
5.9 « eni_svelte_09 » - Cases à cocher . . . . . . . . . . . . . . . . . . . . . . . 534
5.10 « eni_svelte_10 » - Boutons « radio » . . . . . . . . . . . . . . . . . . . . . 537
5.11 « eni_svelte_11 » - Liste. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
5.12 « eni_svelte_12 » - Liste et boutons « radio » . . . . . . . . . . . . . . . 541
5.13 « eni_svelte_13 » - Boutons Svelte Materialify . . . . . . . . . . . . . 544
5.14 « eni_svelte_14 » - Liste déroulante Svelte Materialify. . . . . . . 546
5.15 « eni_svelte_15 » - Switches Svelte Materialify . . . . . . . . . . . . 549
5.16 « eni_svelte_16 » - Première application Sapper-MySQL . . . . . 551
5.17 « eni_svelte_17 » - Liste déroulante Sapper-MySQL . . . . . . . . . 568
5.18 « eni_svelte_18 » - Ajout d’un sport via Sapper-MySQL . . . . . 571
5.19 « eni_svelte_19 » - Mise à jour Sapper-MySQL . . . . . . . . . . . . . 578
5.20 « eni_svelte_20 » - Suppression Sapper-MySQL . . . . . . . . . . . . 584

Chapitre 7-4
Framework React
1. Présentation de React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589
2. Création locale d’un projet React . . . . . . . . . . . . . . . . . . . . . . . . . . . 590
3. Projets React basiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591
3.1 « eni_react_bases_01 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 592
3.2 « eni_react_bases_02 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 598
3.3 « eni_react_bases_03 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600
Table des matières 13

3.4 « eni_react_bases_04 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603

3.5 « eni_react_bases_05 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606
3.6 « eni_react_bases_06 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611
4. Les props React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 614
4.1 « eni_react_props_01 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 614
4.2 « eni_react_props_02 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 616
4.3 « eni_react_props_03 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 618
5. Les librairies tierces pour React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 621
5.1 « eni_react_material-ui_table_01 ». . . . . . . . . . . . . . . . . . . . . . . 622
5.2 « eni_react_material-ui_table_02 ». . . . . . . . . . . . . . . . . . . . . . . 625
5.3 « eni_react_material-ui_table_03 ». . . . . . . . . . . . . . . . . . . . . . . 629
5.4 « eni_react_recharts_01 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632
5.5 « eni_react_recharts_02 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637
5.6 « eni_react_recharts_03 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641
6. Lecture de fichiers JSON sous React . . . . . . . . . . . . . . . . . . . . . . . . . 643
6.1 Différents types de flux JSON . . . . . . . . . . . . . . . . . . . . . . . . . . 643
6.2 « eni_react_lecture_json_local » . . . . . . . . . . . . . . . . . . . . . . . . . 644
7. Interactions avec un serveur PHP-MySQL . . . . . . . . . . . . . . . . . . . . 653
7.1 « eni_react_php_mysql_01 ». . . . . . . . . . . . . . . . . . . . . . . . . . . . 654
7.2 « eni_react_php_mysql_02 ». . . . . . . . . . . . . . . . . . . . . . . . . . . . 661
7.3 « eni_react_php_mysql_03 ». . . . . . . . . . . . . . . . . . . . . . . . . . . . 679
7.4 « eni_react_php_mysql_04 ». . . . . . . . . . . . . . . . . . . . . . . . . . . . 683
7.5 « eni_react_php_mysql_05 ». . . . . . . . . . . . . . . . . . . . . . . . . . . . 694
8. La navigation sous React (routage) . . . . . . . . . . . . . . . . . . . . . . . . . . 700
14 Apprendre à développer
avec JavaScript

Chapitre 7-5
Framework React Native
1. Approches de développement pour périphériques mobiles . . . . . . . 705
1.1 Développements web, natif et hybride . . . . . . . . . . . . . . . . . . . 706
1.1.1 Applications web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706
1.1.2 Applications natives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707
1.1.3 Applications hybrides. . . . . . . . . . . . . . . . . . . . . . . . . . . . 708
1.2 Les trois principales plateformes . . . . . . . . . . . . . . . . . . . . . . . . 709
1.2.1 Apple iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709
1.2.2 Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709
1.2.3 Windows Phone, Windows 10 Mobile . . . . . . . . . . . . . . 710
2. Présentation du framework React Native. . . . . . . . . . . . . . . . . . . . . 710
3. Projets React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 712
3.1 Application « eni_react_native_helloworld » . . . . . . . . . . . . . . 713
3.2 Application « eni_react_native_list_view » . . . . . . . . . . . . . . . . 730
3.3 Application « eni_react_native_input_text » . . . . . . . . . . . . . . 736
3.4 Application « eni_react_native_picker_basique » . . . . . . . . . . . 741
3.5 Application « eni_react_native_hook » . . . . . . . . . . . . . . . . . . . 746
3.6 Application « eni_react_native_php_mysql » . . . . . . . . . . . . . . 751

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757
 489

Partie 7
Frameworks JavaScript

Chapitre 7-1
Positionnement
des frameworks JavaScript
1. Présentation générale des frameworks JavaScript
Positionnement des frameworks JavaScript

De très nombreux frameworks JavaScript existent, avec des positionnements

fonctionnels différents.
Il ne peut être question, dans le cadre de ce livre réservé à des débutants en
JavaScript, d’en faire une revue exhaustive.
Ils ont tous les points communs suivants : masquer la complexité du langage
JavaScript, apporter de la robustesse dans les développements et aussi
permettre, pour certains d’entre eux, d’interagir avec des bases de données.
490 Apprendre à développer
avec JavaScript

1.1 Frameworks « front-end »

Les plus populaires des frameworks dits « front-end », c’est-à-dire gérant le

côté interface utilisateur des applications web ou mobiles (téléphones
mobiles, tablettes…) sont :
– Angular, framework développé par Google (la première version était connue
sous l’appellation AngularJS)
– React JS (ou React), framework développé par Facebook
– Vue.js
– Svelte

1.2 Frameworks « back-end »

Pour les interactions avec les systèmes de gestion de bases de données, des
frameworks dits « back-end » existent. Ils sont souvent eux-mêmes basés sur
Node.js, qui est un environnement d’exécution multiplateforme Open Source
exécutant du code JavaScript en dehors d’un navigateur (dans un runtime).
Node.js permet de concevoir des services d’accès à des Bases De Données et à
des ressources disponibles sur Internet. Il fonctionne parfaitement sur
Windows, Linux ou encore macOS.
Nous verrons par exemple que l’accès aux données pour le framework Svelte
peut être assuré par les frameworks Express ou Sapper, tous deux basés sur
Node.js.

© Editions ENI - All rights reserved

 Positionnement des frameworks JavaScript 491
Chapitre 7-1

1.3 Solutions de développement « hybride »

Pour terminer ce rapide panorama concernant les frameworks JavaScript,

n’oublions pas les solutions dédiées aux développements pour périphériques
mobiles (smartphones et tablettes). Dans un précédent livre, publié en 2020
aux Éditions ENI (Java et Ionic - Développement mobile pour Android : natif
vs hybride), le framework Ionic a été présenté. Ce framework est lui-même
basé sur d’autres frameworks, dont le très réputé Angular (soutenu par
Google) et Apache Cordova.
Un chapitre du présent livre sera aussi consacré au Framework React Native
(assez proche de React qui, lui, est réservé aux applications web). React
Native permet très facilement à des développeurs ayant déjà une réelle expé-
rience en React de concevoir des applications pour mobiles. Ce framework
extrêmement utilisé et supporté par Facebook est une alternative plus que
crédible à Ionic. Les applications React Native sont facilement déployables sur
les mobiles fonctionnant sous systèmes d’exploitation Android et iOS
(iPhone, iPad).

2. Les frameworks Node.js, Svelte, React et React Native

Comme indiqué précédemment, un court chapitre (Installation de Node.js)
sera consacré à l’installation du framework Node.js, socle sur lequel
fonctionnent les frameworks Svelte, React et React Native.
Le framework Svelte, relativement récent, est un challenger crédible pour
React (React JS) et Vue.js. Svelte, présenté dans le chapitre Framework Svelte,
possède de nombreux atouts techniques. Il bénéficie par contre pour l’instant
d’une communauté de développeurs plus restreinte que celles des deux acteurs
principaux (React et Vue.js).
Dans le cadre de ce livre, un choix éditorial a été fait de ne pas évoquer Vue.js.
Vous trouvez, toujours aux Éditions ENI, des ouvrages dédiés exclusivement
à Vue.js, notamment le livre Vue.js - Développez des applications web
modernes en JavaScript de Yoann GAUCHARD.
492 Apprendre à développer
avec JavaScript

Le chapitre Framework React sera celui dédié à React. Comme dans le chapitre
consacré à Svelte, après une rapide présentation des concepts de base, de
nombreux exemples seront proposés et largement commentés.
Le livre se terminera au chapitre Framework React Native avec un exposé
consacré à React Native, la version du framework React permettant le déve-
loppement d’applications pour mobiles.

© Editions ENI - All rights reserved

 493

Chapitre 7-2
Installation de Node.js

1. Présentation du framework Node.js

Installation de Node.js

JavaScript a longtemps été cantonné à une utilisation côté client. On utilisait

JavaScript seulement pour ajouter de l’interactivité dans les pages web
(animations, contrôles de saisie...).
Pour les accès aux Bases De Données distantes, comme MySQL, les applica-
tions web intégraient par ailleurs des scripts orientés serveur, là aussi souvent
développés en langage PHP.
494 Apprendre à développer
avec javaScript

Avec Node.js, il est bien sûr toujours possible d’utiliser JavaScript côté client
pour manipuler les pages HTML. En plus, Node.js propose un environnement
côté serveur qui permet aussi d'utiliser le langage JavaScript pour générer des
pages web. En clair, il vient en remplacement de langages serveur comme PHP,
Java EE, etc.

© Editions ENI - All rights reserved