JavaScript et les données du Web
Robert Jeansoulin
iSTE Éditions
Introduction13
Partie 1. Les fondements : Core JavaScript23
Introduction de la partie 125
Chapitre 1. Variables : déclaration, définition et types27
1.1. Déclaration de variable et de fonction28
1.1.1. Quatre mots-clés de déclaration28
1.1.2. Portée lexicale et définition d'une variable selon : var, let, const30
1.1.3. Commentaires sur les possibilités ouvertes par ES632
1.1.4. Conclusion sur les déclarations de variable en JavaScript32
1.1.5. Récapitulation du mécanisme des deux passes34
1.2. Initialisation et définition des variables35
1.3. Comportement du moteur JavaScript35
1.3.1. Recommandations36
1.4. Nommage des variables et des fonctions36
1.5. Types en JavaScript37
1.5.1. Usage de la valeur native 'undefined' et du type 'undefined'38
Chapitre 2. Contrôles : booléens, tests et boucles39
2.1. Valeurs de vérité, opérateurs booléens, de comparaison et relationnels39
2.1.1. Opérateurs booléens : notés « ! » (not), « && » (and) et « || » (or)39
2.1.2. Opérateurs relationnels : supérieur, inférieur strict (>), (<), ou égal (>=), (<=)40
2.1.3. Opérateurs de comparaison (égalité ou inégalité)40
2.2. Test d'instruction conditionnelle et condition d'arrêt dans les boucles41
2.2.1. Les instructions conditionnelles : « if.else, if..else if.else »41
2.2.2. Opérateur ternaire pour expressions conditionnelles42
2.2.3. Instruction « switch »42
2.2.4. La boucle classique : l'instruction « for »43
2.2.5. Les répétitions sous condition : instructions « while » et « do..while »43
2.2.6. Conversion des valeurs 'undefined' et 'null' dans les tests44
2.2.7. Évaluation « court-circuit » : usage pour les définitions incertaines45
2.3. Gestion des exceptions et émission d'exceptions (Exception handling)45
Chapitre 3. Données : nombres et chaînes de caractères49
3.1. Manipulation des nombres50
3.1.1. Variables de type « number »50
3.1.2. Opérateurs arithmétiques50
3.1.3. Conversion de type entre « number » et « boolean »54
3.2. Manipulation des chaînes de caractères (type « string »)54
3.2.1. Notation littérale d'une chaîne de caractères54
3.2.2. La syntaxe « back-tick » introduite par ES655
3.2.3. Opérateur de concaténation de chaînes de caractères55
3.2.4. Résolution du polymorphisme de l'opérateur +55
3.2.5. Comportement des opérateurs relationnels et d'égalité56
3.3. Les méthodes de l'objet String.prototype59
3.3.1. Nécessité des prétraitements avant comparaison59
3.3.2. Manipulation interne de la chaîne et comparaisons partielles60
3.4. Les expressions régulières62
3.4.1. Syntaxe d'une expression régulière64
3.4.2. Combinaison des RegExp avec les méthodes String.prototype65
Chapitre 4. Objets et prototypes en JavaScript67
4.1. Plan de ce chapitre67
4.2. Les objets : concepts ou entités définies ?68
4.3. Le littéral objet en JavaScript69
4.3.1. Syntaxe de littéral 'Object'69
4.3.2. Remarques importantes sur la syntaxe du littéral objet JavaScript70
4.3.3. Premier usage du littéral objet : définir une variable de type objet71
4.3.4. Deuxième usage du littéral objet : notation de données JSON71
4.3.5. Accès aux propriétés individuelles d'un objet72
4.3.6. Notation des propriétés et méthodes dans la norme ES673
4.4. Les méthodes de Object et Object.prototype74
4.4.1. Les méthodes de Object, de Object.prototype et de JSON74
4.4.2. Créer un objet, spécifier ses propriétés76
4.4.3. Lister les propriétés d'un objet, afficher un objet, analyser un littéral77
4.5. Principe de l'approche « prototypale » en JavaScript79
4.5.1. À la base des objets du JavaScript : la relation « a pour prototype »80
4.5.2. Rôle et mise en oeuvre des prototypes82
4.5.3. Schéma de construction d'objet par l'approche « littérale »83
4.5.4. Schéma de construction d'objet par l'approche « prototypale » avec Object.create85
4.5.5. La combinaison Assign/Create86
4.5.6. Schéma de construction d'objet par l'approche « classique » avec l'opérateur 'new'87
4.6. Compléments sur l'approche « prototypale » (combinaison Assign/Create)89
4.6.1. Simulations alternatives d'une hiérarchie de classes en JavaScript90
4.6.2. Quelques points à retenir94
Chapitre 5. Tableaux97
5.1. Manipulation des tableaux : création et accès aux éléments98
5.1.1. Création d'un tableau par littéral tableau98
5.1.2. Type d'un tableau98
5.1.3. Propriété length99
5.1.4. Accéder aux valeurs d'un tableau : les indices100
5.2. Méthodes statiques de l'objet Array101
5.3. Méthodes du prototype Array.prototype101
5.3.1. La famille « Mutators »101
5.3.2. La famille « Accessors »104
5.3.3. La famille « Iteration »105
5.4. Itérer sur les éléments d'un tableau106
5.4.1. Les inconvénients des boucles classiques106
5.4.2. Itération sans boucle, à l'aide des méthodes de Array.prototype106
5.4.3. Usage fonctionnel des méthodes de tableaux109
5.5. Tableau de tableaux (tableau à deux dimensions)111
5.5.1. Simulation de tableau bidimensionnel en JavaScript111
5.5.2. Librairies qui proposent un « Array.prototype augmenté »112
5.5.3. Propriétés d'un tableau113
5.5.4. Les « array-like », objets de type « Iterable »113
Chapitre 6. Fonctions115
6.1. Syntaxe générale d'une fonction en JavaScript116
6.1.1. Nom117
6.1.2. Paramètres117
6.1.3. Retour117
6.1.4. Bloc de code et « portée »118
6.2. Création des fonctions118
6.2.1. Déclaration de fonction118
6.2.2. Expression de fonction119
6.3. Invocation de fonction avec l'opérateur (.)119
6.4. Choix entre déclaration de fonction versus expression de fonction120
6.5. Arguments121
6.5.1. Les arguments sont toujours passés par valeur121
6.5.2. L'objet interne « arguments »122
6.6. Portée des noms de variables et de fonctions : « scope »123
6.6.1. Vocabulaire : portée et espace de noms (« scope », « namespace »)123
6.6.2. Récapitulation et mises en garde127
6.6.3. Note sur le mécanisme interne128
6.6.4. Vaccination contre le 'var' : série d'exercices129
6.7. Clôture de fonctions : « closure »130
6.7.1. Pérennisation de la valeur d'une variable libre dans un contexte donné131
6.7.2. Création d'une liste de fonctions dépendantes d'une liste de données (tableau)132
6.7.3. « Curryfication » : décomposition d'une fonction en fonctions à un seul paramètre134
6.7.4. Composition de fonctions à partir d'un tableau135
6.8. Fonctions auto exécutables : IIFE (Immediately-Invoked Function Expression)136
6.8.1. Création d'un « namespace » ou d'une bibliothèque nommée avec une IIFE138
6.9. Fonctions138
6.10. Les méthodes de Function.prototype139
6.10.1. Function.prototype.call() and .apply() : retour sur le 'this'140
6.10.2. Function.prototype.bind()141
6.10.3. Les fonctions natives (« built-in functions »)142
Chapitre 7. Du signe au motif143
7.1. Mots réservés144
7.2. Le pronom 'this'145
7.2.1. Ambiguïtés liées au pronom 'this'146
7.3. Comment passer le pronom d'un contexte à un autre ?147
7.4. Opérateur new148
7.5. Ponctuation148
7.6. Patrons de conception (design patterns)150
7.6.1. Idiomes de programmation151
7.6.2. Patron de création : « Assign/Create Combo »152
7.6.3. Patron structurel : singleton ou namespace pattern154
7.6.4. Patron structurel : decorator pattern155
7.6.5. Patron de comportement : observer pattern156
7.7. Méta-programmation avec ES6158
7.7.1. La « Reflection » par les « Symbols »158
7.7.2. Outils de mesure de la performance158
Partie 2. JavaScript Client Web (Client-Side JavaScript)159
Introduction de la partie 2161
Chapitre 8. JavaScript dans l'écosystème de la page web163
8.1. Écosystème de la page web : la séquence HTML163
8.1.1. Structure et sémantique/mise en page et présentation163
8.1.2. Rappel sur les balises HTML5164
8.2. Fonctionnement de la page web : le moteur de rendu166
8.2.1. Arbre DOM créé par le moteur de rendu, sélection des noeuds par le CSS167
8.2.2. Les règles CSS : relation avec les accès JavaScript168
8.3. Fonctionnement de la page web : le moteur de script169
8.4. Interface avec le Document Object Model171
8.4.1. Interface DOM : la sélection des éléments171
8.4.2. Interface DOM : lecture/écriture/création d'un élément173
8.4.3. Propriétés et méthodes des objets HTML DOM Document et Element174
8.5. Les événements dans le JavaScript client176
8.5.1. La boucle d'événements du navigateur : browser event loop176
8.5.2. Gestion des événements177
8.6. Interaction avec le DOM : exemples combinant éléments et événements179
8.6.1. Usage des événements : attendre la fin du chargement du DOM179
8.6.2. Définir une fonction de création de listes HTML180
8.6.3. Usage des événements : modifier les attributs ou les noms de classe d'un élément181
8.6.4. Créer des événements et les émettre : dispatchEvent, Custom Event()181
Chapitre 9. Outils graphiques et multimédias du client183
9.1. Dessiner dans la page web183
9.1.1. Les éléments <figure> et <canvas>184
9.1.2. Tracé de courbe 2D184
9.2. Graphique 3D187
9.3. Langage graphique SVG187
9.4. Gestion du temps dans l'animation189
9.4.1. Les méthodes setTimeout, setInterval, requestAnimationFrame189
9.4.2. Considérations sur la performance, fonctions « génératrices »190
9.5. La persistance des données entre sessions de JavaScript client192
9.5.1. Les « http cookies »192
9.5.2. Les « local storages »193
9.6. Note sur les « JavaScript frameworks » (jQuery, d3, etc.)194
9.6.1. Présentation de jQuery194
9.6.2. Exemple d'évolution : requête Ajax194
9.6.3. Exemple d'évolution : modifier le style d'un élément du DOM195
9.6.4. Recommandation195
Chapitre 10. Technologie AJAX (requêtes asynchrones)197
10.1. Architecture d'échange de données entre le client et le serveur197
10.2. Usage de XMLHttpRequest198
10.3. Note sur HTTP199
10.4. Les « promesses » du JavaScript199
10.4.1. Exemple : XMLHttpRequest transformé en promesse200
10.4.2. Enchaînement de promesses201
10.4.3. Note sur Fetch202
10.4.4. Note sur « Same Origin Policy » (SOP)203
10.5. Le format d'échange JSON203
10.5.1. Un usage très utile du JSON : convertir les données d'un logiciel tableur204
10.5.2. Exporter des données tabulées en format JSON206
10.5.3. Notation de littéral objet JavaScript et notation JSON208
10.5.4. Gestion des erreurs avec la lecture JSON209
10.6. JSONP (JavaScript Object Notation with Padding)210
10.7. Autre outil asynchrone du JavaScript : les « Workers »211
Partie 3. Applications213
Introduction de la partie 3215
Chapitre 11. Données chronologiques217
11.1. Accéder à un fichier JSON via une interface Ajax217
11.1.1. Description sommaire de l'API Quandl217
11.1.2. Accès aux données218
11.1.3. Traitement des données219
11.1.4. Explication219
11.1.5. Données additionnelles220
11.2. Usage de librairies graphiques Open Source221
11.2.1. Tracer plusieurs courbes par rapport à un même axe221
11.2.2. Tracé dynamique d'une courbe (rafraîchissement des données)223
Chapitre 12. Données relationnelles225
12.1. Agrégation de données JSON tabulées225
12.1.1. Données électorales : découpage administratif et découpage en affiliations politiques226
12.1.2. Agrégation de données le long d'une dimension : votes par circonscription229
12.1.3. Agrégation de données le long d'une dimension : affiliations par candidat231
12.2. Jointure de données : multiples fichiers JSON233
12.2.1. Intérêt de la flexibilité de l'approche prototypale234
12.3. Post-traitement : analyse235
12.4. Intérêt des promesses pour les jointures multiples236
12.4.1. Mise en promesses des étapes de l'application236
12.4.2. Résultats obtenus avec l'application électorale237
12.5. Application graphique : usage d'une librairie spécialisée (Google Charts)237
Chapitre 13. Données cartographiques239
13.1. Application cartographique : usage d'une librairie spécialisée239
13.1.1. Préparation240
13.1.2. Création de marqueurs241
13.2. Cartographie avec le « Géoportail »243
13.3. Cartographie basée sur des éléments <svg>244
13.3.1. Description de l'application244
13.3.2. Procédure d'intégration du SVG : par copie directe245
13.3.3. Procédure d'intégration du SVG : élément par élément246
13.3.4. Procédure de jointure SVG : infos par pays246
13.3.5. Post-traitement : combinaison des informations247
Chapitre 14. Données servies par JSONP249
14.1. Serveur de flux RSS : Yahoo Query Language249
14.2. Serveur de données tabulées partagées : Google Spreadsheets251
14.2.1. Code (client side) du HTML et de la fonction de callback251
14.2.2. Code (server side) dans l'environnement GoogleScript252
14.3. Serveur d'images : Flickr API252
Bibliographie255
Index259