diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 9f9e72da..50674218 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -22,7 +22,7 @@ We can use it to access the element, like this: // for elem-content things are a bit more complex // that has a dash inside, so it can't be a variable name - alert(window['elem-content']); // ...but accessable using square brackets [...] + alert(window['elem-content']); // ...but accessible using square brackets [...] ``` @@ -194,7 +194,7 @@ Here we look for all `
  • ` elements that are last children: This method is indeed powerful, because any CSS selector can be used. ```smart header="Can use pseudo-classes as well" -Pseudo-classes in the CSS selector like `:hover` and `:active` are also supported. For instance, `document.querySelectorAll(':hover')` will return the collection with elements that the pointer is over now (in nesting order: from the outmost `` to the most nested one). +Pseudo-classes in the CSS selector like `:hover` and `:active` are also supported. For instance, `document.querySelectorAll(':hover')` will return the collection with elements that the pointer is over now (in nesting order: from the outermost `` to the most nested one). ``` 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 e09b0259..8a0f1d6e 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 @@ -89,7 +89,7 @@ So, if an attribute is non-standard, there won't be DOM-property for it. Is ther Sure. All attributes are accessible using following methods: -- `elem.hasAttribute(name)` -- checks for existance. +- `elem.hasAttribute(name)` -- checks for existence. - `elem.getAttribute(name)` -- gets the value. - `elem.setAttribute(name, value)` -- sets the value. - `elem.removeAttribute(name)` -- removes the attribute. @@ -376,7 +376,7 @@ A small comparison: Methods to work with attributes are: -- `elem.hasAttribute(name)` -- to check for existance. +- `elem.hasAttribute(name)` -- to check for existence. - `elem.getAttribute(name)` -- to get the value. - `elem.setAttribute(name, value)` -- to set the value. - `elem.removeAttribute(name)` -- to remove the attribute. 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 b3915c22..375cb4d9 100644 --- a/2-ui/1-document/09-size-and-scroll/article.md +++ b/2-ui/1-document/09-size-and-scroll/article.md @@ -156,7 +156,7 @@ They include the content width together with paddings, but without the scrollbar On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so it's exactly the sum of what's inside the borders: CSS-height `200px` plus top and bottom paddings (`2*20px`) total `240px`. -Now `clientWidth` -- here the content width is not `300px`, but `284px`, because `16px` are occupied by the scrollbbar. So the sum is `284px` plus left and right paddings, total `324px`. +Now `clientWidth` -- here the content width is not `300px`, but `284px`, because `16px` are occupied by the scrollbar. So the sum is `284px` plus left and right paddings, total `324px`. **If there are no paddings, then `clientWidth/Height` is exactly the content area, inside the borders and the scrollbar (if any).** @@ -248,7 +248,7 @@ Why we should use geometry properties instead? There are two reasons: And there's one more reason: a scrollbar. Sometimes the code that works fine without a scrollbar starts to bug with it, because a scrollbar takes the space from the content in some browsers. So the real width available for the content is *less* than CSS width. And `clientWidth/clientHeight` take that into account. -...But with `getComputedStyle(elem).width` the situation is different. Some browsers (e.g. Chrome) return the real inner width, minus the scrollbar, and some of them (e.g. Firefox) -- CSS width (ignore the scrollbar). Such cross-browser differences is the reason not to use `getComputedStyle`, but rather rely on geometry propeties. +...But with `getComputedStyle(elem).width` the situation is different. Some browsers (e.g. Chrome) return the real inner width, minus the scrollbar, and some of them (e.g. Firefox) -- CSS width (ignore the scrollbar). Such cross-browser differences is the reason not to use `getComputedStyle`, but rather rely on geometry properties. ```online If your browser reserves the space for a scrollbar (most browsers for Windows do), then you can test it below. diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index ce682c62..0825b752 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -2,7 +2,7 @@ How to find out the width of the browser window? How to get the full height of the document, including the scrolled out part? How to scroll the page using JavaScript? -From the DOM point of view, the root document element is `document.documentElement`. That element corresponds to `` and has geometry properties described in the [previous chapter](info:size-and-scroll). For some cases we can use it, but there are additional methods and pecularities important enough to consider. +From the DOM point of view, the root document element is `document.documentElement`. That element corresponds to `` and has geometry properties described in the [previous chapter](info:size-and-scroll). For some cases we can use it, but there are additional methods and peculiarities important enough to consider. [cut] @@ -66,7 +66,7 @@ Regular elements have their current scroll state in `elem.scrollLeft/scrollTop`. What's with the page? Most browsers provide `documentElement.scrollLeft/Top` for the document scroll, but Chrome/Safari/Opera have bugs (like [157855](https://code.google.com/p/chromium/issues/detail?id=157855), [106133](https://bugs.webkit.org/show_bug.cgi?id=106133)) and we should use `document.body` instead of `document.documentElement` there. -Luckily, we don't have to remember these pecularities at all, because of the special properties `window.pageXOffset/pageYOffset`: +Luckily, we don't have to remember these peculiarities at all, because of the special properties `window.pageXOffset/pageYOffset`: ```js run alert('Current scroll from the top: ' + window.pageYOffset); diff --git a/2-ui/1-document/11-coordinates/article.md b/2-ui/1-document/11-coordinates/article.md index 907cca2a..98758249 100644 --- a/2-ui/1-document/11-coordinates/article.md +++ b/2-ui/1-document/11-coordinates/article.md @@ -50,7 +50,7 @@ Also: - Coordinates may be decimal fractions. That's normal, internally browser uses them for calculations. We don't have to round them when setting to `style.position.left/top`, the browser is fine with fractions. - Coordinates may be negative. For instance, if the page is scrolled down and the `elem` top is now above the window then `elem.getBoundingClientRect().top` is negative. -- Some browsers (like Chrome) also add to the result `getBoundingClientRect` properties `width` and `height`. We can get them also by substraction: `height=bottom-top`, `width=right-left`. +- Some browsers (like Chrome) also add to the result `getBoundingClientRect` properties `width` and `height`. We can get them also by subtraction: `height=bottom-top`, `width=right-left`. ```warn header="Coordinates right/bottom are different from CSS properties" If we compare window coordinates versus CSS positioning, then there are obvious similarities to `position:fixed` -- also the position relative to the viewport. diff --git a/2-ui/2-events/04-default-browser-action/article.md b/2-ui/2-events/04-default-browser-action/article.md index cb5c6ce9..0472a818 100644 --- a/2-ui/2-events/04-default-browser-action/article.md +++ b/2-ui/2-events/04-default-browser-action/article.md @@ -78,7 +78,7 @@ If we omit `return false`, then after our code executes the browser will do its By the way, using event delegation here makes our menu flexible. We can add nested lists and style them using CSS to "slide down". -## Prevent futher events +## Prevent further events Certain events flow one into another. If we prevent the first event, there will be no second. diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index 25f2fcec..391893ec 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -279,7 +279,7 @@ For custom events we should use `CustomEvent` constructor. It has an additional Despite the technical possibility to generate browser events like `click` or `keydown`, we should use with the great care. -We shouldn't generate browser events as a hacky way to run handlers. That's a bad architecture most of the time. +We shouldn't generate browser events as it's a hacky way to run handlers. That's a bad architecture most of the time. Native events might be generated: diff --git a/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md b/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md index 92a6618b..277b70ef 100644 --- a/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md +++ b/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md @@ -47,7 +47,7 @@ For instance: In the example the `DOMContentLoaded` handler runs when the document is loaded, not waits for the page load. So `alert` shows zero sizes. -At the first sight `DOMContentLoaded` event is very simple. The DOM tree is ready -- here's the event. But there are few pecularities. +At the first sight `DOMContentLoaded` event is very simple. The DOM tree is ready -- here's the event. But there are few peculiarities. ### DOMContentLoaded and scripts diff --git a/2-ui/3-event-details/11-onload-onerror/article.md b/2-ui/3-event-details/11-onload-onerror/article.md index d9bcfa13..7792626c 100644 --- a/2-ui/3-event-details/11-onload-onerror/article.md +++ b/2-ui/3-event-details/11-onload-onerror/article.md @@ -5,7 +5,7 @@ The browser allows to track the loading of external resources -- scripts, iframe There are two events for it: - `onload` -- successful load, -- `onerror` -- an error occured. +- `onerror` -- an error occurred. ## Loading a script diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md index 7c110de1..a4a0ccb5 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md @@ -194,7 +194,7 @@ But that doesn't work. The problem is that, while we're dragging, the draggable element is always above other elements. And mouse events only happen on the top element, not on those below it. -For instance, below are two `
    ` elements, red on top of blue. There'no way to catch an event on the blue one, because the red is on top: +For instance, below are two `
    ` elements, red on top of blue. There's no way to catch an event on the blue one, because the red is on top: ```html run autorun height=60