diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index de00c2ca..2cb3c65e 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -95,7 +95,7 @@ To attach several scripts, use multiple tags: ```smart As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files. -The benefit of a separate file is that the browser will download it and then store in its [cache](https://en.wikipedia.org/wiki/Web_cache). +The benefit of a separate file is that the browser will download it and then store it in its [cache](https://en.wikipedia.org/wiki/Web_cache). After this, other pages that want the same script will take it from the cache instead of downloading it. So the file is actually downloaded only once. diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md index 370dcd39..39438575 100644 --- a/1-js/02-first-steps/04-variables/article.md +++ b/1-js/02-first-steps/04-variables/article.md @@ -183,7 +183,7 @@ let my-name; // a hyphen '-' is not allowed in the name Variables named `apple` and `AppLE` -- are two different variables. ``` -````smart header="Non-english letters are allowed, but not recommended" +````smart header="Non-English letters are allowed, but not recommended" It is possible to use any language, including cyrillic letters or even hieroglyphs, like this: ```js diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md index b4a3962b..b42e9f1e 100644 --- a/1-js/05-data-types/02-number/article.md +++ b/1-js/05-data-types/02-number/article.md @@ -283,7 +283,7 @@ In most cases the distinction is unnoticeable, because operators are suited to t Remember these two special numeric values? -- `Infinite` (and `-Infinite`) is a special numeric value that is greater (less) than anything. +- `Infinity` (and `-Infinity`) is a special numeric value that is greater (less) than anything. - `NaN` represents an error. They belong to the type `number`, but are not "normal" numbers, so there are special functions to check for them: diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index ca06c65c..12d06426 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -1,6 +1,6 @@ # Arrays -Objects allow to store keyed collections of values. That's fine. +Objects allow you to store keyed collections of values. That's fine. But quite often we find that we need an *ordered collection*, where we have a 1st, a 2nd, a 3rd element and so on. For example, we need that to store a list of something: users, goods, HTML elements etc. @@ -121,7 +121,7 @@ A stack is usually illustrated as a pack of cards: new cards are added to the to For stacks, the latest pushed item is received first, that's also called LIFO (Last-In-First-Out) principle. For queues, we have FIFO (First-In-First-Out). -Arrays in JavaScript can work both as a queue and as a stack. They allow to add/remove elements both to/from the beginning or the end. +Arrays in JavaScript can work both as a queue and as a stack. They allow you to add/remove elements both to/from the beginning or the end. In computer science the data structure that allows it is called [deque](https://en.wikipedia.org/wiki/Double-ended_queue). @@ -431,7 +431,7 @@ alert( "1,2" + 1 ); // "1,21" ## Summary -Array is a special kind of objects, suited to store and manage ordered data items. +Array is a special kind of object, suited to storing and managing ordered data items. - The declaration: diff --git a/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md b/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md index c2ca8168..409c6dc1 100644 --- a/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md +++ b/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md @@ -119,6 +119,8 @@ function f() { f(1); // 1 ``` +```` + As we remember, arrow functions don't have their own `this`. Now we know they don't have the special `arguments` object either. ## Spread operator [#spread-operator] diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md index 8c082cb6..c1bcf2ce 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/article.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/article.md @@ -1,6 +1,6 @@ # Attributes and properties -When the browser loads the page, it "reads" (another word: "parses") HTML text and generates DOM objects from it. For element nodes most standard HTML attributes automatically become properties of DOM objects. +When the browser loads the page, it "reads" (another word: "parses") the HTML and generates DOM objects from it. For element nodes, most standard HTML attributes automatically become properties of DOM objects. For instance, if the tag is ``, then the DOM object has `body.id="page"`. @@ -51,7 +51,7 @@ So, DOM properties and methods behave just like those of regular JavaScript obje ## HTML attributes -In HTML language, tags may have attributes. When the browser reads HTML text and creates DOM objects for tags, it recognizes *standard* attributes and creates DOM properties from them. +In HTML, tags may have attributes. When the browser parses the HTML to create DOM objects for tags, it recognizes *standard* attributes and creates DOM properties from them. So when an element has `id` or another *standard* attribute, the corresponding property gets created. But that doesn't happen if the attribute is non-standard. @@ -83,9 +83,9 @@ Here we can see it: ``` -So, if an attribute is non-standard, there won't be DOM-property for it. Is there a way to access such attributes? +So, if an attribute is non-standard, there won't be a DOM-property for it. Is there a way to access such attributes? -Sure. All attributes are accessible using following methods: +Sure. All attributes are accessible by using the following methods: - `elem.hasAttribute(name)` -- checks for existence. - `elem.getAttribute(name)` -- gets the value. @@ -138,7 +138,7 @@ Please note: 1. `getAttribute('About')` -- the first letter is uppercase here, and in HTML it's all lowercase. But that doesn't matter: attribute names are case-insensitive. 2. We can assign anything to an attribute, but it becomes a string. So here we have `"123"` as the value. 3. All attributes including ones that we set are visible in `outerHTML`. -4. The `attributes` collection is iterable and has all attributes with `name` and `value`. +4. The `attributes` collection is iterable and has all the attributes of the element (standard and non-standard) as objects with `name` and `value` properties. ## Property-attribute synchronization diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md index 4fadba81..7b2adb25 100644 --- a/2-ui/1-document/09-size-and-scroll/article.md +++ b/2-ui/1-document/09-size-and-scroll/article.md @@ -64,9 +64,9 @@ The `offsetParent` is the nearest ancestor that is: 2. or ``, ``, ``, 2. or ``. -In most practical cases we can use `offsetParent` to get the nearest CSS-positioned ancestor. And `offsetLeft/offsetTop` provide x/y coordinates relative to it's left-upper corner. +In most practical cases we can use `offsetParent` to get the nearest CSS-positioned ancestor. And `offsetLeft/offsetTop` provide x/y coordinates relative to it's upper-left corner. -In the example below the inner `
` has `
` as `offsetParent` and `offsetLeft/offsetTop` shifts from its left-upper corner (`180`): +In the example below the inner `
` has `
` as `offsetParent` and `offsetLeft/offsetTop` shifts from its upper-left corner (`180`): ```html run height=10
@@ -265,11 +265,11 @@ Please note that the described difference is only about reading `getComputedStyl Elements have the following geometry properties: - `offsetParent` -- is the nearest positioned ancestor or `td`, `th`, `table`, `body`. -- `offsetLeft/offsetTop` -- coordinates relative to the left-upper edge of `offsetParent`. +- `offsetLeft/offsetTop` -- coordinates relative to the upper-left edge of `offsetParent`. - `offsetWidth/offsetHeight` -- "outer" width/height of an element including borders. -- `clientLeft/clientTop` -- the distance from the left-upper outer corner to its left-upper inner corner. For left-to-right OS they are always the widths of left/top borders. For right-to-left OS the vertical scrollbar is on the left so `clientLeft` includes its width too. +- `clientLeft/clientTop` -- the distance from the upper-left outer corner to its upper-left inner corner. For left-to-right OS they are always the widths of left/top borders. For right-to-left OS the vertical scrollbar is on the left so `clientLeft` includes its width too. - `clientWidth/clientHeight` -- the width/height of the content including paddings, but without the scrollbar. - `scrollWidth/scrollHeight` -- the width/height of the content including the scrolled out parts. Also includes paddings, but not the scrollbar. -- `scrollLeft/scrollTop` -- width/height of the scrolled out part of the element, starting from its left-upper corner. +- `scrollLeft/scrollTop` -- width/height of the scrolled out part of the element, starting from its upper-left corner. All properties are read-only except `scrollLeft/scrollTop`. They make the browser scroll the element if changed. diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md index bc5d70dc..04f2b87a 100644 --- a/2-ui/2-events/02-bubbling-and-capturing/article.md +++ b/2-ui/2-events/02-bubbling-and-capturing/article.md @@ -10,7 +10,7 @@ This handler is assigned to `
`, but also runs if you click any nested tag l
``` -Isn't it a bit strange? Why the handler on `
` runs if the actual click was on ``? +Isn't it a bit strange? Why does the handler on `
` run if the actual click was on ``? ## Bubbling @@ -18,7 +18,7 @@ The bubbling principle is simple. **When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.** -Let's say, we have 3 nested elements `FORM > DIV > P` with a handler on each of them: +Let's say we have 3 nested elements `FORM > DIV > P` with a handler on each of them: ```html run autorun