Spelling Continued
Checked some spelling further along in the article files. Made some small grammatical fixes, but mostly spelling.
This commit is contained in:
reigningmetal
parent
42d9f16fe3
commit
c97f53563c
19 changed files with 31 additions and 31 deletions
|
|
@ -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 [...]
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
@ -194,7 +194,7 @@ Here we look for all `<li>` 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 `<html>` 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 `<html>` to the most nested one).
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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 `<html>` 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 `<html>` 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);
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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 `<div>` 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 `<div>` 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
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ There are important peculiarities when working with focus events. We'll do the b
|
|||
|
||||
## Events focus/blur
|
||||
|
||||
The `focus` event is called on focusing, and `blur` -- when the element loooses the focus.
|
||||
The `focus` event is called on focusing, and `blur` -- when the element looses the focus.
|
||||
|
||||
Let's use them for validation of an input field.
|
||||
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ The train in the example below goes from left to right with the permanent speed
|
|||
|
||||
[codetabs src="train-linear"]
|
||||
|
||||
The CSS `transition` is bazed on that curve:
|
||||
The CSS `transition` is based on that curve:
|
||||
|
||||
```css
|
||||
.train {
|
||||
|
|
@ -225,7 +225,7 @@ But it looks a bit differently.
|
|||
|
||||
**A Bezier curve can make the animation "jump out" of its range.**
|
||||
|
||||
The control points on the curve can have any `y` coordinates: even negative or huge. Then the Bezier curve would also jump very low or high, making the animation go beyound its normal range.
|
||||
The control points on the curve can have any `y` coordinates: even negative or huge. Then the Bezier curve would also jump very low or high, making the animation go beyond its normal range.
|
||||
|
||||
In the example below the animation code is:
|
||||
```css
|
||||
|
|
@ -359,7 +359,7 @@ The event object for `transitionend` has few specific properties:
|
|||
: The property that has finished animating. Can be good if we animate multiple properties simultaneously.
|
||||
|
||||
`event.elapsedTime`
|
||||
: The time (in secods) that the animation took, without `transition-delay`.
|
||||
: The time (in seconds) that the animation took, without `transition-delay`.
|
||||
|
||||
## Keyframes
|
||||
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ For windows with URLs from another sites, we are able to change the location by
|
|||
|
||||
A popup may access the "opener" window as well. A JavaScript in it may use `window.opener` to access the window that opened it. It is `null` for all windows except popups.
|
||||
|
||||
So both the main window and the popup have a reference to each other. Thay may modify each other freely assuming that they come from the same origin. If that's not so, then there are still means to communicate, to be covered in the next chapter <info:cross-window-communication>.
|
||||
So both the main window and the popup have a reference to each other. They may modify each other freely assuming that they come from the same origin. If that's not so, then there are still means to communicate, to be covered in the next chapter <info:cross-window-communication>.
|
||||
|
||||
## Closing a popup
|
||||
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ A hacker can post a link to his evil page in a message or lure visitors to his p
|
|||
|
||||
From one side -- the attack is "not deep": all a hacker can do is one click. But from another side, if the hacker knows that after the click another control appears, then it may use cunning messages to make the user to click on it as well.
|
||||
|
||||
The attack is quite dangerous, because when we engineer the UI we usually don't think that a hacker can click on behalf of the visitor. So vulnerabilities can be found in totally unexpeced places.
|
||||
The attack is quite dangerous, because when we engineer the UI we usually don't think that a hacker can click on behalf of the visitor. So vulnerabilities can be found in totally unexpected places.
|
||||
|
||||
- It's recommended to use `X-Frame-Options: SAMEORIGIN` on pages that are totally not meant to be shown inside iframes (or just for the whole site).
|
||||
- Use a covering `<div>` if we want to allow our pages to be shown in iframes, and still stay safe.
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ alert( str.search( *!*/a/i*/!* ) ); // 0 (the first position)
|
|||
|
||||
**The important limitation: `search` always looks for the first match.**
|
||||
|
||||
We can't find next positions using `search`, there's just no syntax for that. But there are other mathods that can.
|
||||
We can't find next positions using `search`, there's just no syntax for that. But there are other methods that can.
|
||||
|
||||
## str.match(reg), no "g" flag
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ Most used are:
|
|||
: A space symbol: that includes spaces, tabs, newlines.
|
||||
|
||||
`\w` ("w" is from "word")
|
||||
: A "wordly" character: either a letter of English alphabet or a digit or an underscore. Non-english letters (like cyricllic or hindi) do not belong to `\w`.
|
||||
: A "wordly" character: either a letter of English alphabet or a digit or an underscore. Non-english letters (like cyrillic or hindi) do not belong to `\w`.
|
||||
|
||||
For instance, `pattern:\d\s\w` means a digit followed by a space character followed by a wordly character, like `"1 Z"`.
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ Several characters or character classes inside square brackets `[…]` mean to "
|
|||
|
||||
For instance, `pattern:[eao]` means any of the 3 characters: `'a'`, `'e'`, or `'o'`.
|
||||
|
||||
That's calles a *set*. Sets can be used in a regexp along with regular characters:
|
||||
That's called a *set*. Sets can be used in a regexp along with regular characters:
|
||||
|
||||
```js run
|
||||
// find [t or m], and then "op"
|
||||
|
|
@ -93,7 +93,7 @@ In square brackets the vast majority of special characters can be used without e
|
|||
- A caret `pattern:'^'` if not in the beginning (where it means exclusion).
|
||||
- And the opening square bracket `pattern:'['`.
|
||||
|
||||
In other words, all special charactere are allowed except where they mean something for square brackets.
|
||||
In other words, all special characters are allowed except where they mean something for square brackets.
|
||||
|
||||
A dot `"."` inside square brackets means just a dot. The pattern `pattern:[.,]` would look for one of characters: either a dot or a comma.
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ To find a match, the regular expression engine uses the following algorithm:
|
|||
|
||||
These common words do not make it obvious why the regexp fails, so let's elaborate how the search works for the pattern `pattern:".+"`.
|
||||
|
||||
1. The first pattern characeter is a quote `pattern:"`.
|
||||
1. The first pattern character is a quote `pattern:"`.
|
||||
|
||||
The regular expression engine tries to find it on 0-th position of the source string, but there's `subject:a` there, so no match.
|
||||
|
||||
|
|
@ -100,7 +100,7 @@ For our task we want another thing. That's what the lazy quantifier mode is for.
|
|||
|
||||
## Lazy mode
|
||||
|
||||
The lazy mode of quantifier is an opposite to the gredy mode. It means: "repeat minimal number of times".
|
||||
The lazy mode of quantifier is an opposite to the greedy mode. It means: "repeat minimal number of times".
|
||||
|
||||
We can enable it by putting a question mark `pattern:'?'` after the quantifier, so that it becomes `pattern:*?` or `pattern:+?` or even `pattern:??` for `pattern:'?'`.
|
||||
|
||||
|
|
@ -146,7 +146,7 @@ To clearly understand the change, let's trace the search step by step.
|
|||
|
||||
In this example we saw how the lazy mode works for `pattern:+?`. Quantifiers `pattern:+?` and `pattern:??` work the similar way -- the regexp engine increases the number of repetitions only if the rest of the pattern can't match on the given position.
|
||||
|
||||
**Lazyness is only enabled for the quantifier with `?`.**
|
||||
**Laziness is only enabled for the quantifier with `?`.**
|
||||
|
||||
Other quantifiers remain greedy.
|
||||
|
||||
|
|
@ -241,7 +241,7 @@ let reg = /<a href=".*?" class="doc">/g;
|
|||
alert( str.match(reg) ); // <a href="link1" class="doc">, <a href="link2" class="doc">
|
||||
```
|
||||
|
||||
Now it works, there are two maches:
|
||||
Now it works, there are two matches:
|
||||
|
||||
```html
|
||||
<a href="....." class="doc"> <a href="....." class="doc">
|
||||
|
|
@ -268,7 +268,7 @@ Why it happens?
|
|||
|
||||
The quantifier `pattern:.*?` consumes characters until it meets `match:class="doc">`.
|
||||
|
||||
...And where can it find it? If we look at the text, then we can see that the only `match:class="doc">` is beyound the link, in the tag `<p>`.
|
||||
...And where can it find it? If we look at the text, then we can see that the only `match:class="doc">` is beyond the link, in the tag `<p>`.
|
||||
|
||||
3. So we have match:
|
||||
|
||||
|
|
@ -277,7 +277,7 @@ Why it happens?
|
|||
<a href="link1" class="wrong">... <p style="" class="doc">
|
||||
```
|
||||
|
||||
So the lazyness did not work for us here.
|
||||
So the laziness did not work for us here.
|
||||
|
||||
We need the pattern to look for `<a href="...something..." class="doc">`, but both greedy and lazy variants have problems.
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
Alternation is the term in regular expression that is actually a simple "OR".
|
||||
|
||||
In a regular expression it is denoted with a vertial line character `pattern:|`.
|
||||
In a regular expression it is denoted with a vertical line character `pattern:|`.
|
||||
|
||||
[cut]
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue