JavaScript and Open Data

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