Merge branch 'master' of github.com:javascript-tutorial/en.javascript.info into sync-e4e6a50b

Author: iliakan

1-js/05-data-types/09-keys-values-entries/article.md

@@ -74,7 +74,7 @@ Usually that's convenient. But if we want symbolic keys too, then there's a sepa
 
 Objects lack many methods that exist for arrays, e.g. `map`, `filter` and others.
 
-If we'd like to apply them, then we can use `Object.entries` followed `Object.fromEntries`:
+If we'd like to apply them, then we can use `Object.entries` followed by `Object.fromEntries`:
 
 1. Use `Object.entries(obj)` to get an array of key/value pairs from `obj`.
 2. Use array methods on that array, e.g. `map`.

1-js/06-advanced-functions/03-closure/article.md

@@ -183,7 +183,7 @@ Rectangles on the right-hand side demonstrate how the global Lexical Environment
 
 1. When the script starts, the Lexical Environment is pre-populated with all declared variables.
     - Initially, they are in the "Uninitialized" state. That's a special internal state, it means that the engine knows about the variable, but it cannot be referenced until it has been declared with `let`. It's almost the same as if the variable didn't exist.
-2. Then `let phrase` definition appears. There's no assignment yet, so its value is `undefined`. We can use the variable since this moment.
+2. Then `let phrase` definition appears. There's no assignment yet, so its value is `undefined`. We can use the variable from this point forward.
 3. `phrase` is assigned a value.
 4. `phrase` changes the value.
 
@@ -286,7 +286,7 @@ Later, when `counter()` is called, a new Lexical Environment is created for the
 
 ![](closure-makecounter-nested-call.svg)
 
-Now when the code inside `counter()` looks for `count` variable, it first searches its own Lexical Environment (empty, as there are no local variables there), then the Lexical Environment of the outer `makeCounter()` call, where finds it and changes.
+Now when the code inside `counter()` looks for `count` variable, it first searches its own Lexical Environment (empty, as there are no local variables there), then the Lexical Environment of the outer `makeCounter()` call, where it finds and changes it.
 
 **A variable is updated in the Lexical Environment where it lives.**
 

1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/solution.js

@@ -0,0 +1,15 @@
+function sum(a) {
+
+  let currentSum = a;
+
+  function f(b) {
+    currentSum += b;
+    return f;
+  }
+
+  f.toString = function() {
+    return currentSum;
+  };
+
+  return f;
+}

1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/source.js

@@ -0,0 +1,12 @@
+function sum(a){
+  // Your code goes here.
+
+}
+
+/*
+sum(1)(2) == 3; // 1 + 2
+sum(1)(2)(3) == 6; // 1 + 2 + 3
+sum(5)(-1)(2) == 6
+sum(6)(-1)(-2)(-3) == 0
+sum(0)(1)(2)(3)(4)(5) == 15
+*/

1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/test.js

@@ -0,0 +1,19 @@
+describe("sum", function(){
+  
+  it("sum(1)(2) == 3", function(){
+    assert.equal(3, sum(1)(2));
+  });
+
+  it("sum(5)(-1)(2) == 6", function(){
+    assert.equal(6, sum(5)(-1)(2));
+  });
+  
+  it("sum(6)(-1)(-2)(-3) == 0", function(){
+    assert.equal(0, sum(6)(-1)(-2)(-3));
+  });
+
+  it("sum(0)(1)(2)(3)(4)(5) == 15", function(){
+    assert.equal(15, sum(0)(1)(2)(3)(4)(5));
+  });
+});
+

1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js

@@ -7,8 +7,8 @@ describe("throttle(f, 1000)", function() {
   }
 
   before(function() {
-    f1000 = throttle(f, 1000);
     this.clock = sinon.useFakeTimers();
+    f1000 = throttle(f, 1000);
   });
 
   it("the first call runs now", function() {

1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.svg renamed to 1-js/09-classes/03-static-properties-methods/3-class-extend-object/rabbit-extends-object.svg

@@ -179,10 +179,10 @@ If the browser doesn't support `Promise.allSettled`, it's easy to polyfill:
 if(!Promise.allSettled) {
   Promise.allSettled = function(promises) {
     return Promise.all(promises.map(p => Promise.resolve(p).then(value => ({
-      state: 'fulfilled',
+      status: 'fulfilled',
       value
     }), reason => ({
-      state: 'rejected',
+      status: 'rejected',
       reason
     }))));
   };
@@ -191,7 +191,7 @@ if(!Promise.allSettled) {
 
 In this code, `promises.map` takes input values, turns them into promises (just in case a non-promise was passed) with `p => Promise.resolve(p)`, and then adds `.then` handler to every one.
 
-That handler turns a successful result `value` into `{state:'fulfilled', value}`, and an error `reason` into `{state:'rejected', reason}`. That's exactly the format of `Promise.allSettled`.
+That handler turns a successful result `value` into `{status:'fulfilled', value}`, and an error `reason` into `{status:'rejected', reason}`. That's exactly the format of `Promise.allSettled`.
 
 Now we can use `Promise.allSettled` to get the results of *all* given promises, even if some of them reject.
 
@@ -277,7 +277,7 @@ There are 5 static methods of `Promise` class:
 
 1. `Promise.all(promises)` -- waits for all promises to resolve and returns an array of their results. If any of the given promises rejects, it becomes the error of `Promise.all`, and all other results are ignored.
 2. `Promise.allSettled(promises)` (recently added method) -- waits for all promises to settle and returns their results as an array of objects with:
-    - `state`: `"fulfilled"` or `"rejected"`
+    - `status`: `"fulfilled"` or `"rejected"`
     - `value` (if fulfilled) or `reason` (if rejected).
 3. `Promise.race(promises)` -- waits for the first promise to settle, and its result/error becomes the outcome.
 4. `Promise.resolve(value)` -- makes a resolved promise with the given value.

1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md renamed to 1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md

@@ -216,6 +216,8 @@ function getCoords(elem) {
 
   return {
     top: box.top + window.pageYOffset,
+    right: box.right + window.pageXOffset,
+    bottom: box.bottom + window.pageYOffset,
     left: box.left + window.pageXOffset
   };
 }

1-js/09-classes/02-class-inheritance/3-class-extend-object/task.md renamed to 1-js/09-classes/03-static-properties-methods/3-class-extend-object/task.md

@@ -177,7 +177,7 @@ But we continue tracking track `pointermove` events and move the thumb until `po
 
 [Previously](info:mouse-drag-and-drop), to handle `pointermove` events that happen outside of the slider, we listened for `pointermove` events on the whole `document`. 
 
-Pointer capturing provides an alternative solution: we can call `thumb.setPointerCapture(event.pointerId)` in `pointerdown` handler, and then all future pointer events until `pointerup` will be retarteted to `thumb`.
+Pointer capturing provides an alternative solution: we can call `thumb.setPointerCapture(event.pointerId)` in `pointerdown` handler, and then all future pointer events until `pointerup` will be retargeted to `thumb`.
 
 That is: events handlers on `thumb` will be called, and `event.target` will always be `thumb`, even if the user moves their pointer around the whole document. So we can listen at `thumb` for `pointermove`, no matter where it happens.
 
@@ -226,4 +226,4 @@ Additional abilities of Pointer events are:
 - Device-specific properties, such as `pressure`, `width/height` and others.
 - Pointer capturing: we can retarget all pointer events to a specific element until `pointerup`/`pointercancel`.
 
-As of now, pointer events are supported in all major browsers, so we can safely switch to them, if IE10- and Safari 12- are not needed. And even with those browsers, there are polyfills that enable the support of pointer events.
+As of now, pointer events are supported in all major browsers, so we can safely switch to them, if IE10- and Safari 12- are not needed. And even with those browsers, there are polyfills that enable the support of pointer events.

1-js/11-async/05-promise-api/article.md

@@ -5,7 +5,7 @@ libs:
 
 # IndexedDB
 
-IndexedDB is a database, that is built into browser, much more powerful than `localStorage`.
+IndexedDB is a database that is built into browser, much more powerful than `localStorage`.
 
 - Stores almost any kind of values by keys, multiple key types.
 - Supports transactions for reliability.
@@ -75,10 +75,10 @@ We can open it with version `2` and perform the upgrade like this:
 ```js
 let openRequest = indexedDB.open("store", *!*2*/!*);
 
-openRequest.onupgradeneeded = function() {
+openRequest.onupgradeneeded = function(event) {
   // the existing database version is less than 2 (or it doesn't exist)
   let db = openRequest.result;
-  switch(db.version) { // existing db version
+  switch(event.oldVersion) { // existing db version
     case 0:
       // version 0 means that the client had no database
       // perform initialization

2-ui/1-document/11-coordinates/article.md

@@ -93,7 +93,7 @@ Here's the main character categories and their subcategories:
   - control `Cc`,
   - format `Cf`,
   - not assigned `Cn`,
-  -- private use `Co`,
+  - private use `Co`,
   - surrogate `Cs`.
 
 
@@ -127,7 +127,7 @@ alert("number: xAF".match(regexp)); // xAF
 
 Let's look for Chinese hieroglyphs.
 
-There's a unicode property `Script` (a writing system), that may have a value: `Cyrillic`, `Greek`, `Arabic`, `Han` (Chinese) and so on, [here's the full list]("https://en.wikipedia.org/wiki/Script_(Unicode)").
+There's a unicode property `Script` (a writing system), that may have a value: `Cyrillic`, `Greek`, `Arabic`, `Han` (Chinese) and so on, [here's the full list](https://en.wikipedia.org/wiki/Script_(Unicode)).
 
 To look for characters in a given writing system we should use `pattern:Script=<value>`, e.g. for Cyrillic letters: `pattern:\p{sc=Cyrillic}`, for Chinese hieroglyphs: `pattern:\p{sc=Han}`, and so on: