Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 94a6933

Browse files
committed
fixes
1 parent 807414b commit 94a6933

File tree

4 files changed

+25
-14
lines changed

4 files changed

+25
-14
lines changed

‎1-js/09-classes/01-class/article.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
119119

120120
## Not just a syntax sugar
121121

122-
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:
122+
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:
123123

124124
```js run
125125
// rewriting class User in pure functions
@@ -147,7 +147,7 @@ Although, there are important differences.
147147

148148
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.
149149

150-
Unlike a regular function, a class constructor can't be called without `new`:
150+
Unlike a regular function, a class constructor must be called with `new`:
151151

152152
```js run
153153
class User {
@@ -176,8 +176,7 @@ Although, there are important differences.
176176
3. Classes always `use strict`.
177177
All code inside the class construct is automatically in strict mode.
178178

179-
180-
Also, in addition to its basic operation, the `class` syntax brings many other features with it which we'll explore later.
179+
Besides, `class` syntax brings many other features that we'll explore later.
181180
182181
## Class Expression
183182

‎2-ui/1-document/11-coordinates/2-position-at/source.view/index.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,13 @@
4141
* relative to the anchor element.
4242
*/
4343
function showNote(anchor, position, html) {
44-
// ... your code ...
44+
45+
let note = document.createElement('div');
46+
note.className = "note";
47+
note.innerHTML = html;
48+
document.body.append(note);
49+
50+
positionAt(anchor, position, note);
4551
}
4652

4753
// test it

‎2-ui/1-document/11-coordinates/2-position-at/task.md‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@ importance: 5
44

55
# Show a note near the element
66

7-
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`.
7+
Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` near `anchor`element.
88

9-
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.
9+
The `position` must be a string with any one of 3 values:
10+
- `"top"` - position `elem` right above `anchor`
11+
- `"right"` - position `elem` immediately at the right of `anchor`
12+
- `"bottom"` - position `elem` right below `anchor`
1013

11-
Show the notes like here:
14+
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`.
1215

13-
[iframe src="solution" height="350" border="1" link]
16+
Here's the demo of notes:
1417

15-
P.S. The note should have `position:fixed` for this task.
18+
[iframe src="solution" height="350" border="1" link]

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ Main `DOMRect` properties:
3232

3333
Additionally, there are derived properties:
3434

35-
- `top/bottom` -- Y-coordinate for the top/bottom edge,
36-
- `left/right` -- X-coordinate for the left/right edge.
35+
- `top/bottom` -- Y-coordinate for the top/bottom rectangle edge,
36+
- `left/right` -- X-coordinate for the left/right rectangle edge.
3737

3838
```online
3939
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
7171
Also:
7272

7373
- 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`.
74-
- 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.
74+
- 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.
7575

7676
```smart header="Why derived properties are needed? Why does `top/left` exist if there's `x/y`?"
77+
Mathematically, a rectangle is uniquely defined with its starting point `(x,y)` and the direction vector `(width,height)`.
7778

78-
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.
79+
So the additional derived properties are for convenience.
80+
81+
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.
7982

8083
Negative `width/height` may be useful for directed rectangles, e.g. to represent mouse selections with properly marked start and end.
8184

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /