From 94a69332940fde266213869282dc3dd140a8e9ef Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Thu, 18 Jul 2019 19:41:21 +0300 Subject: [PATCH] fixes --- 1-js/09-classes/01-class/article.md | 7 +++---- .../2-position-at/source.view/index.html | 8 +++++++- .../1-document/11-coordinates/2-position-at/task.md | 13 ++++++++----- 2-ui/1-document/11-coordinates/article.md | 11 +++++++---- 4 files changed, 25 insertions(+), 14 deletions(-) diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md index 43b03403..6f494f94 100644 --- a/1-js/09-classes/01-class/article.md +++ b/1-js/09-classes/01-class/article.md @@ -119,7 +119,7 @@ alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi ## Not just a syntax sugar -Sometimes people say that `class` is a "syntax sugar" (syntax that is designed to make things easier to read, but doesn't introduce anything new) in JavaScript, because we could actually declare the same without `class` keyword at all: +Sometimes people say that `class` is a "syntax sugar" (syntax that is designed to make things easier to read, but doesn't introduce anything new), because we could actually declare the same without `class` keyword at all: ```js run // rewriting class User in pure functions @@ -147,7 +147,7 @@ Although, there are important differences. 1. First, a function created by `class` is labelled by a special internal property `[[FunctionKind]]:"classConstructor"`. So it's not entirely the same as creating it manually. - Unlike a regular function, a class constructor can't be called without `new`: + Unlike a regular function, a class constructor must be called with `new`: ```js run class User { @@ -176,8 +176,7 @@ Although, there are important differences. 3. Classes always `use strict`. All code inside the class construct is automatically in strict mode. - -Also, in addition to its basic operation, the `class` syntax brings many other features with it which we'll explore later. +Besides, `class` syntax brings many other features that we'll explore later. ## Class Expression diff --git a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html index 730f815d..67557345 100755 --- a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html +++ b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html @@ -41,7 +41,13 @@ * relative to the anchor element. */ function showNote(anchor, position, html) { - // ... your code ... + + let note = document.createElement('div'); + note.className = "note"; + note.innerHTML = html; + document.body.append(note); + + positionAt(anchor, position, note); } // test it diff --git a/2-ui/1-document/11-coordinates/2-position-at/task.md b/2-ui/1-document/11-coordinates/2-position-at/task.md index 1d4f0677..3aaa47f0 100644 --- a/2-ui/1-document/11-coordinates/2-position-at/task.md +++ b/2-ui/1-document/11-coordinates/2-position-at/task.md @@ -4,12 +4,15 @@ importance: 5 # Show a note near the element -Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` either at the top (`"top"`), right (`"right"`) or bottom (`"bottom"`) of the element `anchor`. +Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` near `anchor` element. -Call it inside the function `showNote(anchor, position, html)` that shows an element with the class `"note"` and the text `html` at the given position near the anchor. +The `position` must be a string with any one of 3 values: +- `"top"` - position `elem` right above `anchor` +- `"right"` - position `elem` immediately at the right of `anchor` +- `"bottom"` - position `elem` right below `anchor` -Show the notes like here: +It's used inside function `showNote(anchor, position, html)`, provided in the task source code, that creates a "note" element with given `html` and shows it at the given `position` near the `anchor`. + +Here's the demo of notes: [iframe src="solution" height="350" border="1" link] - -P.S. The note should have `position:fixed` for this task. diff --git a/2-ui/1-document/11-coordinates/article.md b/2-ui/1-document/11-coordinates/article.md index 9fffb111..6a10ce4a 100644 --- a/2-ui/1-document/11-coordinates/article.md +++ b/2-ui/1-document/11-coordinates/article.md @@ -32,8 +32,8 @@ Main `DOMRect` properties: Additionally, there are derived properties: -- `top/bottom` -- Y-coordinate for the top/bottom edge, -- `left/right` -- X-coordinate for the left/right edge. +- `top/bottom` -- Y-coordinate for the top/bottom rectangle edge, +- `left/right` -- X-coordinate for the left/right rectangle edge. ```online For instance click this button to see its window coordinates: @@ -71,11 +71,14 @@ As you can see, `x/y` and `width/height` fully describe the rectangle. Derived p Also: - Coordinates may be decimal fractions, such as `10.5`. That's normal, internally browser uses fractions in calculations. We don't have to round them when setting to `style.position.left/top`. -- Coordinates may be negative. For instance, if the page is scrolled down and the top `elem` is now above the window. Then, `elem.getBoundingClientRect().top` is negative. +- Coordinates may be negative. For instance, if the page is scrolled so that `elem` is now above the window, then `elem.getBoundingClientRect().top` is negative. ```smart header="Why derived properties are needed? Why does `top/left` exist if there's `x/y`?" +Mathematically, a rectangle is uniquely defined with its starting point `(x,y)` and the direction vector `(width,height)`. -The reason is that technically it's possible for `width/height` to be negative. A rectangle starts at `(x,y)` and `(width,height)` is actually the direction vector where it goes. +So the additional derived properties are for convenience. + +Please note that technically it's possible for `width/height` to be negative. A rectangle starts at `(x,y)` and `(width,height)` is actually the direction vector where it goes. Negative `width/height` may be useful for directed rectangles, e.g. to represent mouse selections with properly marked start and end.