Merge pull request #131 from javascript-tutorial/sync-5b195795

Sync with upstream @ 5b19579

Author: HachemiH

1-js/02-first-steps/06-type-conversions/article.md

@@ -1,6 +1,10 @@
 # Les conversions de types
 
+<<<<<<< HEAD
 La plupart du temps, les opérateurs et les fonctions convertissent automatiquement les valeurs qui leur sont attribuées dans le bon type.
+=======
+Most of the time, operators and functions automatically convert the values given to them to the right type.
+>>>>>>> 5b195795da511709faf79a4d35f9c5623b6dbdbd
 
 Par exemple, `alert` convertit automatiquement toute valeur en chaîne de caractères pour l'afficher. Les opérations mathématiques convertissent les valeurs en nombres.
 
@@ -81,6 +85,7 @@ alert( Number(false) );       // 0
 
 Veuillez noter que `null` et `undefined` se comportent différemment ici : `null` devient un zéro, alors qu'`undefined` devient `NaN`.
 
+<<<<<<< HEAD
 ````smart header="L\'addition \"+\" concatène les chaînes de caractères"
 Presque toutes les opérations mathématiques convertissent les valeurs en nombres. A l'exception notable de l'addition `+`. Si l'une des valeurs ajoutées est une chaîne de caractères, une autre est également convertie en chaîne de caractères.  
 
@@ -93,6 +98,9 @@ alert( '1' + 2 ); // '12' (chaîne de caractères à gauche)
 
 Cela ne se produit que lorsque l'un des arguments est une chaîne de caractères. Sinon, les valeurs sont converties en nombres.
 ````
+=======
+Most mathematical operators also perform such conversion, we'll see that in the next chapter.
+>>>>>>> 5b195795da511709faf79a4d35f9c5623b6dbdbd
 
 ## Boolean Conversion
 

1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/solution.md renamed to 1-js/02-first-steps/07-operators/3-primitive-conversions-questions/solution.md

@@ -12,10 +12,20 @@ null === +"\n0\n" → false
 
 Quelques raisons :
 
+<<<<<<< HEAD
 1. Évidemment, c'est vrai.
 2. Comparaison du dictionnaire, donc fausse.
 3. Encore une fois, la comparaison du dictionnaire, le premier caractère de `"2"` est plus grand que le premier caractère de` "1"`.
 4. Les valeurs `null` et `undefined` sont exclusivement égale entre elles.
 5. L'égalité stricte est stricte. Des types différents des deux côtés conduisent à `false`.
 6. Voir `(4)`, `null` n'est égale qu'à `undefined`.
 7. Egalité stricte de différents types.
+=======
+1. Obviously, true.
+2. Dictionary comparison, hence false. `"a"` is smaller than `"p"`.
+3. Again, dictionary comparison, first char of `"2"` is greater than the first char of `"1"`.
+4. Values `null` and `undefined` equal each other only.
+5. Strict equality is strict. Different types from both sides lead to false.
+6. Similar to `(4)`, `null` only equals `undefined`.
+7. Strict equality of different types.
+>>>>>>> 5b195795da511709faf79a4d35f9c5623b6dbdbd

1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/task.md renamed to 1-js/02-first-steps/07-operators/3-primitive-conversions-questions/task.md

@@ -66,7 +66,11 @@ Object.defineProperty(obj, propertyName, descriptor)
 : L'objet et sa propriété pour appliquer le descripteur.
 
 `descriptor`
+<<<<<<< HEAD
 : Descripteur de propriété à appliquer.
+=======
+: Property descriptor object to apply.
+>>>>>>> 5b195795da511709faf79a4d35f9c5623b6dbdbd
 
 Si la propriété existe, `defineProperty` met à jour ses attributs. Sinon, il crée la propriété avec la valeur et les descripteurs donnés. Dans ce cas, si aucun drapeau n'est fourni, il est supposé `false`.
 

1-js/02-first-steps/08-comparison/1-comparison-questions/solution.md

@@ -2,18 +2,18 @@ The solution is short, yet may look a bit tricky, so here I provide it with exte
 
 
 ```js
-let sortedRows = Array.from(table.rows)
-  .slice(1)
-  .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
+let sortedRows = Array.from(table.tBodies[0].rows) // (1)
+  .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1); // (2)
 
-table.tBodies[0].append(...sortedRows);
+table.tBodies[0].append(...sortedRows); // (3)
 ```
 
-1. Get all `<tr>`, like `table.querySelectorAll('tr')`, then make an array from them, cause we need array methods.
-2. The first TR (`table.rows[0]`) is actually a table header, so we take the rest by `.slice(1)`.
-3. Then sort them comparing by the content of the first `<td>` (the name field).
-4. Now insert nodes in the right order by `.append(...sortedRows)`.
+The step-by-step algorthm:
 
-    Tables always have an implicit `<tbody>` element, so we need to take it and insert into it: a simple `table.append(...)` would fail.
+1. Get all `<tr>`, from `<tbody>`.
+2. Then sort them comparing by the content of the first `<td>` (the name field).
+3. Now insert nodes in the right order by `.append(...sortedRows)`.
 
-    Please note: we don't have to remove them, just "re-insert", they leave the old place automatically.
+Please note: we don't have to remove row elements, just "re-insert", they leave the old place automatically.
+
+Also note: even if the table HTML doesn't have `<tbody>`, the DOM structure always has it. So we must insert elements as `table.tBodes[0].append(...)`: a simple `table.append(...)` would fail.

1-js/07-object-properties/01-property-descriptors/article.md

@@ -28,8 +28,8 @@
       let box = elem.getBoundingClientRect();
 
       return {
-        top: box.top + pageYOffset,
-        left: box.left + pageXOffset
+        top: box.top + window.pageYOffset,
+        left: box.left + window.pageXOffset
       };
     }
 

2-ui/1-document/07-modifying-document/12-sort-table/solution.md

@@ -26,8 +26,8 @@
       let box = elem.getBoundingClientRect();
 
       return {
-        top: box.top + pageYOffset,
-        left: box.left + pageXOffset
+        top: box.top + window.pageYOffset,
+        left: box.left + window.pageXOffset
       };
     }
 

2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html

@@ -215,8 +215,8 @@ function getCoords(elem) {
   let box = elem.getBoundingClientRect();
 
   return {
-    top: box.top + pageYOffset,
-    left: box.left + pageXOffset
+    top: box.top + window.pageYOffset,
+    left: box.left + window.pageXOffset
   };
 }
 ```

2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html

@@ -20,20 +20,17 @@
   <div id="tooltip" hidden>Tooltip</div>
 
   <script>
-    // for the demo
-    setTimeout(function() {
-      new HoverIntent({
-        elem,
-        over() {
-          tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
-          tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
-          tooltip.hidden = false;
-        },
-        out() {
-          tooltip.hidden = true;
-        }
-      });
-    }, 2000);
+    new HoverIntent({
+      elem,
+      over() {
+        tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
+        tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
+        tooltip.hidden = false;
+      },
+      out() {
+        tooltip.hidden = true;
+      }
+    });
   </script>
 
 </body>

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

@@ -49,18 +49,18 @@ describe("hoverIntent", function() {
     }
   })
 
-  it("mouseover -> immediately no tooltip", function() {
+  it("mouseover -> when the pointer just arrived, no tooltip", function() {
     mouse('mouseover', 10, 10);
     assert.isFalse(isOver);
   });
 
-  it("mouseover -> pause shows tooltip", function() {
+  it("mouseover -> after a delay, the tooltip shows up", function() {
     mouse('mouseover', 10, 10);
     this.clock.tick(100);
     assert.isTrue(isOver);
   });
 
-  it("mouseover -> fast mouseout no tooltip", function() {
+  it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() {
     mouse('mouseover', 10, 10);
     setTimeout(
       () => mouse('mouseout', 300, 300, { relatedTarget: document.body}),

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html

@@ -44,7 +44,12 @@ class HoverIntent {
 
 
   destroy() {
+<<<<<<< HEAD
     /* votre code pour  "désactiver" la fonctionnalité,  enlever tous les gestionnaires d’évènements*/
+=======
+    /* your code to "disable" the functionality, remove all handlers */
+    /* it's needed for the tests to work */
+>>>>>>> 5b195795da511709faf79a4d35f9c5623b6dbdbd
   }
 
 }

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js

@@ -20,20 +20,17 @@
   <div id="tooltip" hidden>Tooltip</div>
 
   <script>
-    // for the demo
-    setTimeout(function() {
-      new HoverIntent({
-        elem,
-        over() {
-          tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
-          tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
-          tooltip.hidden = false;
-        },
-        out() {
-          tooltip.hidden = true;
-        }
-      });
-    }, 2000);
+    new HoverIntent({
+      elem,
+      over() {
+        tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
+        tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
+        tooltip.hidden = false;
+      },
+      out() {
+        tooltip.hidden = true;
+      }
+    });
   </script>
 
 </body>

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js

@@ -3,35 +3,35 @@
 describe("hoverIntent", function() {
 
   function mouse(eventType, x, y, options) {
-    let eventOptions = Object.assign({ 
+    let eventOptions = Object.assign({
       bubbles: true,
       clientX: x,
       clientY: y,
       pageX: x,
       pageY: y,
       target: elem
     }, options || {});
-    
+
     elem.dispatchEvent(new MouseEvent(eventType, eventOptions));
   }
 
 
   let isOver;
   let hoverIntent;
-  
-  
+
+
   before(function() {
     this.clock = sinon.useFakeTimers();
   });
 
   after(function() {
     this.clock.restore();
   });
-  
-  
+
+
   beforeEach(function() {
     isOver = false;
-    
+
     hoverIntent = new HoverIntent({
       elem: elem,
       over: function() {
@@ -49,18 +49,18 @@ describe("hoverIntent", function() {
     }
   })
 
-  it("mouseover -> immediately no tooltip", function() {
+  it("mouseover -> when the pointer just arrived, no tooltip", function() {
     mouse('mouseover', 10, 10);
     assert.isFalse(isOver);
   });
-  
-  it("mouseover -> pause shows tooltip", function() {
+
+  it("mouseover -> after a delay, the tooltip shows up", function() {
     mouse('mouseover', 10, 10);
     this.clock.tick(100);
     assert.isTrue(isOver);
   });
 
-  it("mouseover -> fast mouseout no tooltip", function() {
+  it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() {
     mouse('mouseover', 10, 10);
     setTimeout(
       () => mouse('mouseout', 300, 300, { relatedTarget: document.body}),
@@ -94,5 +94,5 @@ describe("hoverIntent", function() {
     this.clock.tick(200);
     assert.isFalse(isOver);
   });
-  
+
 });

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html

@@ -7,7 +7,7 @@ document.addEventListener('mousedown', function(event) {
   if (!dragElement) return;
 
   event.preventDefault();
-  
+
   dragElement.ondragstart = function() {
       return false;
   };
@@ -19,7 +19,7 @@ document.addEventListener('mousedown', function(event) {
   function onMouseUp(event) {
     finishDrag();
   };
-  
+
   function onMouseMove(event) {
     moveAt(event.clientX, event.clientY);
   }
@@ -31,9 +31,9 @@ document.addEventListener('mousedown', function(event) {
     if(isDragging) {
       return;
     }
-    
+
     isDragging = true;
-    
+
     document.addEventListener('mousemove', onMouseMove);
     element.addEventListener('mouseup', onMouseUp);
 
@@ -50,10 +50,10 @@ document.addEventListener('mousedown', function(event) {
     if(!isDragging) {
       return;
     }
-    
+
     isDragging = false;
 
-    dragElement.style.top = parseInt(dragElement.style.top) + pageYOffset + 'px';
+    dragElement.style.top = parseInt(dragElement.style.top) + window.pageYOffset + 'px';
     dragElement.style.position = 'absolute';
 
     document.removeEventListener('mousemove', onMouseMove);

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/test.js

@@ -12,7 +12,7 @@ Voici une petite fonction pour montrer la position actuelle du défilement:
 
 ```js autorun
 window.addEventListener('scroll', function() {
-  document.getElementById('showScroll').innerHTML = pageYOffset + 'px';
+  document.getElementById('showScroll').innerHTML = window.pageYOffset + 'px';
 });
 ```