This book will teach you how to take advantage of the JavaScript language to process data provided on the Internet.
Much attention is given to the main JavaScript backbone: prototype based objects, and functional capabilities, while common features (loops, etc.) are summarized in a few cheat-sheets. Only operational features are detailed through the coding of several applications -the second and largest part of the book-, on free-access datasets (e.g. World Bank). It includes: cartography (SVG or API's based), data-sheets access (via Ajax or Jsonp), video data and post-synchronization, and animation examples.
Table of Contents
Introduction xiii
Part 1. Core JavaScript 1
Introduction to Part 1 3
Chapter 1. Variables: Declaration, Definition and Type 5
1.1. Declarations of functions and variables 6
1.1.1. The different declaration keywords 6
1.1.2. Lexical scope and definition of a variable according to declaration mode: var, let, const 9
1.1.3. Comments (important improvements carried over by ES6) 11
1.1.4. General conclusion about the variable declarations in JavaScript 11
1.1.5. Naming variables and functions: best practices 14
1.2. Variable definition, initialization and typing in JavaScript 15
1.2.1. Variables initialization and definition 15
1.2.2. Types 15
1.2.3. How to use the type “undefined” and the value undefined 17
Chapter 2. Controls: Booleans, Branch and Loops 19
2.1. Truth values and boolean operators 19
2.1.1. Boolean operators: “!” (not), “&&” (and), “ - - ” (or) 19
2.1.2. Relational operators: >, <, >=, < = 20
2.1.3. Comparison operators: = =, != (simple) or = = =, != = (strict) 20
2.2. Conditional instructions: branch test, loop test 21
2.2.1. Conditional instructions: if ... else, if ... else if ... else 21
2.2.2. Ternary conditional operator 21
2.2.3. Instruction “switch” 22
2.2.4. Classical iteration loop: instruction “for” 22
2.2.5. Repeat under condition: instructions “while”, and “do..while” 23
2.2.6. Implicit casting of values “undefined” and “null” in boolean context 23
2.2.7. Short-cut evaluation: tips for the uncertain definitions 24
2.2.8. Exception handling 24
Chapter 3. Data: Numbers and Strings 27
3.1. Handling numbers 28
3.1.1. Literal notation of type “number” variables 28
3.1.2. Arithmetic operators 29
3.1.3. Math operations using the methods of the object Math 30
3.1.4. Evaluation in the “numerical context” versus “boolean context” 32
3.2. Handling character strings 32
3.2.1. Literal notation of strings 32
3.2.2. Backtick syntax, or template syntax, introduced by ES6 33
3.2.3. Concatenation operator 34
3.2.4. Resolving polymorphism issues with operator + in numerical or string context 34
3.2.5. Behavior of the relational and equality operators 35
3.2.6. Various facets of string-related issues in a sample application 35
3.3. The String.prototype methods 37
3.3.1. The need for preprocessing before comparison 37
3.3.2. Handling partial comparisons 38
3.3.3. Methods for handling strings 39
3.3.4. Regular expressions 41
3.3.5. Evaluation and uses 42
3.3.6. Some examples of useful patterns 42
3.3.7. General syntax of a regular expression 43
3.3.8. Combining RegExp and String.prototype methods 44
Chapter 4. Objects and Prototypes 45
4.1. Introduction 45
4.2. The objects: concepts versus named entities 46
4.3. Object literal notation in JavaScript 47
4.3.1. Syntax for “object literal”: 47
4.3.2. Important warnings about writing JavaScript object notation 48
4.3.3. The object literal first use: to define an object type variable 49
4.3.4. The object literal second use: data notation in JSON format 49
4.3.5. Accessing the individual properties of an object 50
4.3.6. Notation syntax evolution with ES6 51
4.4. The builtin methods of Object and Object.prototype 51
4.4.1. The methods of Object, Object.prototype, and JSON 51
4.4.2. Create an object and specify its properties 53
4.4.3. Syntax and usage of the “descriptor” property 53
4.4.4. Listing the properties of an object, analyzing a literal 54
4.5. Basics of the “prototypal approach” in JavaScript 56
4.5.1. JavaScript object's fundamental relation: “has prototype” 57
4.5.2. Role of the prototypes and inheritance mechanism 58
4.5.3. Object construction: the “literal approach” 60
4.5.4. Object construction: the “prototypal approach” 61
4.5.5. The pattern “assign/create” 62
4.5.6. Object construction: the “classical approach” 63
4.6. Comparing “prototypal” and “classical” approaches 64
4.6.1. Simulating a class hierarchy in JavaScript 65
4.6.2. Summing up what we learned so far 68
Chapter 5. Arrays 71
5.1. Handling arrays: creation and access to its elements 72
5.1.1. Creating an array with the array literal notation 72
5.1.2. Checking if a variable is an array 72
5.1.3. The length property, the index count 73
5.1.4. Accessing individual values in an array: the indices 74
5.2. Methods of the object Array and Array.prototype 74
5.2.1. The “Mutators” family 75
5.2.2. The “Accessors” family 77
5.2.3. The “Iteration” family 78
5.2.4. Iterating over the elements of an array 78
5.2.5. Iteration without a loop, with Array/Array.prototype methods 79
5.2.6. Chaining array methods 81
5.2.7. Arrays and the arrow function syntax 82
5.2.8. The “Iterables” 83
5.3. Array of arrays (multidimensional array) 83
5.3.1. Frameworks proposing an “augmented Array.prototype” 85
Chapter 6. Functions 87
6.1. General syntax of a JavaScript function 88
6.1.1. Name 88
6.1.2. Parameters 88
6.1.3. Return 89
6.1.4. Function code block and scope 89
6.1.5. Creating functions 89
6.2. Invoking a function with operator (.) 90
6.2.1. The three facets of the “parentheses operator” in a function context 91
6.3. Choosing function declaration versus function expression 92
6.4. Arguments 93
6.4.1. The arguments are passed by value 93
6.4.2. The inner object “arguments” 94
6.5. Scope: global scope, function scopes and block scopes 94
6.5.1. Vocabulary: lexical scope and “namespace” 94
6.5.2. Wrapping-up and warnings 98
6.6. Function “closures” 101
6.6.1. Saving the value of a free variable in a given context 102
6.6.2. Creating a list of functions linked to an array of data 103
6.6.3. Currying”: breaking down a function into 1-parameter functions 106
6.6.4. Compositing functions from an array of functions 107
6.7. Immediately invocable functions: IIFE 109
6.7.1. Creating a “namespace”, or a named library, with an IIFE 109
6.8. The methods of Function.prototype 110
6.8.1. Function.prototype.call() and .apply(), and pronoun 'this' 112
6.8.2. Function.prototype.bind() 112
6.9. Built-in functions 113
6.10. Closure and IIFE cheat-sheet 114
Chapter 7. From Signs to Patterns 117
7.1. Reserved words 118
7.2. The pronoun “this” 119
7.2.1. The many ways to link the pronoun “this” 119
7.2.2. How to explicitly bind the pronoun? 121
7.3. Operator: new 121
7.4. Punctuation signs 122
7.5. JavaScript usual design patterns 123
7.5.1. Programming idioms 124
7.5.2. Creational pattern: “Assign/Create Combo” 125
7.5.3. Structural pattern: singleton or namespace pattern 127
7.5.4. Another structural pattern: the Decorator pattern 128
7.5.5. Behavioral pattern: the observer or publish/subscribe pattern 130
7.6. Metaprogramming with ES6 131
7.6.1. “Reflection” by “Symbols” 131
7.6.2. New tool for measuring code performance 131
Part 2. Client-Side JavaScript 133
Introduction to Part 2 135
Chapter 8. JavaScript in the Web Page 137
8.1. Ecosystem of the web page: the HTML sequence 137
8.1.1. Structure and semantics/layout and presentation 137
8.1.2. Reminder about HTML5 tags 138
8.2. Building the web page DOM: the layout engine 140
8.2.1. DOM tree built by the layout engine: selecting nodes via CSS 141
8.2.2. CSS rules and relationship with JavaScript selection methods 142
8.3. Dynamic behavior of the web page: the script engine 143
8.4. Interface with the DOM 145
8.4.1. DOM interface 1: selecting elements 145
8.4.2. DOM interface 2: reading/writing/creating an element 146
8.4.3. Methods for HTML DOM document and element prototypes 148
8.5. The events in client side JavaScript 150
8.5.1. The browser event loop 150
8.5.2. Handling DOM events 151
8.6. Interacting with the DOM: to link elements/events 153
8.6.1. Waiting for the DOM 153
8.6.2. Example: to build an HTML list 153
8.6.3. Using events: modifying attributes and class names of an element. 154
8.6.4. Dispatching events, creating a CustomEvent 155
Chapter 9. Graphic and Multimedia Tools 157
9.1. To draw in the web page 157
9.1.1. The elements and 158
9.1.2. 2D curve plot 158
9.2. SVG language 161
9.3. Handling time in graphics animation 163
9.3.1. Methods setTimeout, setInterval, requestAnimationFrame 163
9.3.2. Performance considerations, generator functions 165
9.4. Data persistence between client sessions 166
9.4.1. Http cookies 166
9.4.2. Local storages 167
9.5. Note about “JavaScript frameworks” (jQuery, d3, etc.) 168
9.5.1. A few words about jQuery 168
9.5.2. Recommendation 169
Chapter 10. AJAX Technology (Asynchrony) 171
10.1. Architecture for client–server data exchange 171
10.1.1. The object XMLHttpRequest 172
10.1.2. Using XMLHttpRequest: several steps 172
10.2. Remarks about HTTP 173
10.3. “Promises” and asynchronous programming 173
10.3.1. Example: promisifying XMLHttpRequest 174
10.3.2. Chaining promises 175
10.3.3. Parallel processing of several promises 175
10.3.4. Fetch: the promise to fetch AJAX 176
10.3.5. About the “Same Origin Policy” 177
10.4. The exchange format: JSON 177
10.4.1. A very useful application of JSON: converting data from a spreadsheet 178
10.4.2. Exporting spreadsheet data into JSON format 179
10.4.3. Differences between JSON and the Javascript object Notation 182
10.5. JavaScript Object Notation with Padding 184
10.6. A parallel JavaScript: the “worker” 185
Part 3. Applications 187
Introduction to Part 3 189
Chapter 11. Chronological Data 191
11.1. Accessing a JSON file via Ajax 191
11.1.1. Quick presentation of the Quandl API 191
11.1.2. Processing an example with promises 192
11.2. Using open source graphic libraries 195
11.2.1. Plot multiple data series against the same time axis 195
11.2.2. Dynamic plot: simulating time evolution 197
Chapter 12. Relational Data 199
12.1. Aggregating tabulated JSON data 199
12.1.1. lectoral data: administrative breakdown, political breakdown 200
12.1.2. Aggregating data along the spatial dimension: votes by circonscription 203
12.1.3. Aggregating data along the affiliations dimension: labels by candidate 205
12.2. Joining data: multiple JSON files 207
12.2.1. Advantage of the flexibility brought by the prototypal approach 207
12.2.2. Coding the join on the electoral application 208
12.3. Postprocessing: analysis 210
12.3.1. Analyzing the affiliations 210
12.4. The role of promises 211
12.4.1. Performance considerations with the electoral application 213
12.5. Using Google Gantt chart for a graphic visualization 214
Chapter 13. Cartographic Data 217
13.1. Cartographic application: using cartographic libraries 217
13.1.1. Preparation of the map 219
13.1.2. Creating a layer of markers 220
13.1.3. Interacting and selecting features 222
13.2. SVG-based cartography 222
13.2.1. Description of the application 223
13.2.2. Embedding the whole SVG document by direct copy 224
13.2.3. Embedding the SVG code, element by element 225
13.2.4. Joining relational data and SVG data 225
13.2.5. Processing the combined information 226
13.3. Getting coordinates from Wikipedia pages 227
Chapter 14. Data Served by JSONP 229
14.1. Serving RSS feeds through Yahoo Query Language 229
14.2. Serving shared spreadsheets through Google spreadsheets 231
14.2.1. Client-side code: HTML and script of the callback function 231
14.2.2. Server-side code under the GoogleScript global object 232
14.3. Serving images and their metadata through the Flickr API 233
Bibliography 235
Index 239
