Skip to content

Commit ce45bae

Browse files
iliakaniliakan
authored
Merge pull request javascript-tutorial#39 from reigningmetal/master
Fixed spelling errors
2 parents ef35cf4 + 81366db commit ce45bae

File tree

22 files changed

+36
-36
lines changed

22 files changed

+36
-36
lines changed

‎2-ui/1-document/04-searching-elements-dom/article.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ We can use it to access the element, like this:
2222
2323
// for elem-content things are a bit more complex
2424
// that has a dash inside, so it can't be a variable name
25-
alert(window['elem-content']); // ...but accessable using square brackets [...]
25+
alert(window['elem-content']); // ...but accessible using square brackets [...]
2626
</script>
2727
```
2828

@@ -194,7 +194,7 @@ Here we look for all `<li>` elements that are last children:
194194
This method is indeed powerful, because any CSS selector can be used.
195195
196196
```smart header="Can use pseudo-classes as well"
197-
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).
197+
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).
198198
```
199199
200200

‎2-ui/1-document/06-dom-attributes-and-properties/article.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ So, if an attribute is non-standard, there won't be DOM-property for it. Is ther
8989

9090
Sure. All attributes are accessible using following methods:
9191

92-
- `elem.hasAttribute(name)` -- checks for existance.
92+
- `elem.hasAttribute(name)` -- checks for existence.
9393
- `elem.getAttribute(name)` -- gets the value.
9494
- `elem.setAttribute(name, value)` -- sets the value.
9595
- `elem.removeAttribute(name)` -- removes the attribute.
@@ -376,7 +376,7 @@ A small comparison:
376376

377377
Methods to work with attributes are:
378378

379-
- `elem.hasAttribute(name)` -- to check for existance.
379+
- `elem.hasAttribute(name)` -- to check for existence.
380380
- `elem.getAttribute(name)` -- to get the value.
381381
- `elem.setAttribute(name, value)` -- to set the value.
382382
- `elem.removeAttribute(name)` -- to remove the attribute.

‎2-ui/1-document/09-size-and-scroll/article.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ They include the content width together with paddings, but without the scrollbar
156156

157157
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`.
158158

159-
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`.
159+
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`.
160160

161161
**If there are no paddings, then `clientWidth/Height` is exactly the content area, inside the borders and the scrollbar (if any).**
162162

@@ -248,7 +248,7 @@ Why we should use geometry properties instead? There are two reasons:
248248
249249
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.
250250
251-
...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.
251+
...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.
252252
253253
```online
254254
If your browser reserves the space for a scrollbar (most browsers for Windows do), then you can test it below.

‎2-ui/1-document/10-size-and-scroll-window/article.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
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?
44

5-
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.
5+
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.
66

77
[cut]
88

@@ -66,7 +66,7 @@ Regular elements have their current scroll state in `elem.scrollLeft/scrollTop`.
6666
6767
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.
6868
69-
Luckily, we don't have to remember these pecularities at all, because of the special properties `window.pageXOffset/pageYOffset`:
69+
Luckily, we don't have to remember these peculiarities at all, because of the special properties `window.pageXOffset/pageYOffset`:
7070
7171
```js run
7272
alert('Current scroll from the top: ' + window.pageYOffset);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ Also:
5050

5151
- 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.
5252
- 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.
53-
- 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`.
53+
- 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`.
5454

5555
```warn header="Coordinates right/bottom are different from CSS properties"
5656
If we compare window coordinates versus CSS positioning, then there are obvious similarities to `position:fixed` -- also the position relative to the viewport.

‎2-ui/2-events/04-default-browser-action/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ If we omit `return false`, then after our code executes the browser will do its
7878
By the way, using event delegation here makes our menu flexible. We can add nested lists and style them using CSS to "slide down".
7979

8080

81-
## Prevent futher events
81+
## Prevent further events
8282

8383
Certain events flow one into another. If we prevent the first event, there will be no second.
8484

‎2-ui/2-events/05-dispatch-events/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,7 @@ For custom events we should use `CustomEvent` constructor. It has an additional
279279
280280
Despite the technical possibility to generate browser events like `click` or `keydown`, we should use with the great care.
281281
282-
We shouldn't generate browser events as a hacky way to run handlers. That's a bad architecture most of the time.
282+
We shouldn't generate browser events as it's a hacky way to run handlers. That's a bad architecture most of the time.
283283
284284
Native events might be generated:
285285

‎2-ui/3-event-details/10-onload-ondomcontentloaded/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ For instance:
4747

4848
In the example the `DOMContentLoaded` handler runs when the document is loaded, not waits for the page load. So `alert` shows zero sizes.
4949

50-
At the first sight `DOMContentLoaded` event is very simple. The DOM tree is ready -- here's the event. But there are few pecularities.
50+
At the first sight `DOMContentLoaded` event is very simple. The DOM tree is ready -- here's the event. But there are few peculiarities.
5151

5252
### DOMContentLoaded and scripts
5353

‎2-ui/3-event-details/11-onload-onerror/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ The browser allows to track the loading of external resources -- scripts, iframe
55
There are two events for it:
66

77
- `onload` -- successful load,
8-
- `onerror` -- an error occured.
8+
- `onerror` -- an error occurred.
99

1010
## Loading a script
1111

‎2-ui/3-event-details/4-mouse-drag-and-drop/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ But that doesn't work.
194194
195195
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.
196196

197-
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:
197+
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:
198198
199199
```html run autorun height=60
200200
<style>

‎2-ui/4-forms-controls/2-focus-blur/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ There are important peculiarities when working with focus events. We'll do the b
1414

1515
## Events focus/blur
1616

17-
The `focus` event is called on focusing, and `blur` -- when the element loooses the focus.
17+
The `focus` event is called on focusing, and `blur` -- when the element looses the focus.
1818

1919
Let's use them for validation of an input field.
2020

‎3-animation/2-css-animations/article.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ The train in the example below goes from left to right with the permanent speed
164164

165165
[codetabs src="train-linear"]
166166

167-
The CSS `transition` is bazed on that curve:
167+
The CSS `transition` is based on that curve:
168168

169169
```css
170170
.train {
@@ -225,7 +225,7 @@ But it looks a bit differently.
225225

226226
**A Bezier curve can make the animation "jump out" of its range.**
227227

228-
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.
228+
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.
229229

230230
In the example below the animation code is:
231231
```css
@@ -359,7 +359,7 @@ The event object for `transitionend` has few specific properties:
359359
: The property that has finished animating. Can be good if we animate multiple properties simultaneously.
360360

361361
`event.elapsedTime`
362-
: The time (in secods) that the animation took, without `transition-delay`.
362+
: The time (in seconds) that the animation took, without `transition-delay`.
363363

364364
## Keyframes
365365

‎4-frames-and-windows/01-popup-windows/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ For windows with URLs from another sites, we are able to change the location by
137137

138138
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.
139139

140-
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>.
140+
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>.
141141

142142
## Closing a popup
143143

‎4-frames-and-windows/06-clickjacking/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ A hacker can post a link to his evil page in a message or lure visitors to his p
194194

195195
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.
196196

197-
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.
197+
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.
198198

199199
- 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).
200200
- Use a covering `<div>` if we want to allow our pages to be shown in iframes, and still stay safe.

‎5-regular-expressions/02-regexp-methods/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ alert( str.search( *!*/a/i*/!* ) ); // 0 (the first position)
2121
2222
**The important limitation: `search` always looks for the first match.**
2323
24-
We can't find next positions using `search`, there's just no syntax for that. But there are other mathods that can.
24+
We can't find next positions using `search`, there's just no syntax for that. But there are other methods that can.
2525
2626
## str.match(reg), no "g" flag
2727

‎5-regular-expressions/03-regexp-character-classes/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ Most used are:
4343
: A space symbol: that includes spaces, tabs, newlines.
4444

4545
`\w` ("w" is from "word")
46-
: 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`.
46+
: 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`.
4747

4848
For instance, `pattern:\d\s\w` means a digit followed by a space character followed by a wordly character, like `"1 Z"`.
4949

‎5-regular-expressions/05-regexp-character-sets-and-ranges/article.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Several characters or character classes inside square brackets `[…]` mean to "
88

99
For instance, `pattern:[eao]` means any of the 3 characters: `'a'`, `'e'`, or `'o'`.
1010

11-
That's calles a *set*. Sets can be used in a regexp along with regular characters:
11+
That's called a *set*. Sets can be used in a regexp along with regular characters:
1212

1313
```js run
1414
// 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
9393
- A caret `pattern:'^'` if not in the beginning (where it means exclusion).
9494
- And the opening square bracket `pattern:'['`.
9595

96-
In other words, all special charactere are allowed except where they mean something for square brackets.
96+
In other words, all special characters are allowed except where they mean something for square brackets.
9797

9898
A dot `"."` inside square brackets means just a dot. The pattern `pattern:[.,]` would look for one of characters: either a dot or a comma.
9999

‎5-regular-expressions/08-regexp-greedy-and-lazy/article.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ To find a match, the regular expression engine uses the following algorithm:
4444

4545
These common words do not make it obvious why the regexp fails, so let's elaborate how the search works for the pattern `pattern:".+"`.
4646

47-
1. The first pattern characeter is a quote `pattern:"`.
47+
1. The first pattern character is a quote `pattern:"`.
4848

4949
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.
5050

@@ -100,7 +100,7 @@ For our task we want another thing. That's what the lazy quantifier mode is for.
100100

101101
## Lazy mode
102102

103-
The lazy mode of quantifier is an opposite to the gredy mode. It means: "repeat minimal number of times".
103+
The lazy mode of quantifier is an opposite to the greedy mode. It means: "repeat minimal number of times".
104104

105105
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:'?'`.
106106

@@ -146,7 +146,7 @@ To clearly understand the change, let's trace the search step by step.
146146

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

149-
**Lazyness is only enabled for the quantifier with `?`.**
149+
**Laziness is only enabled for the quantifier with `?`.**
150150

151151
Other quantifiers remain greedy.
152152

@@ -241,7 +241,7 @@ let reg = /<a href=".*?" class="doc">/g;
241241
alert( str.match(reg) ); // <a href="link1" class="doc">, <a href="link2" class="doc">
242242
```
243243

244-
Now it works, there are two maches:
244+
Now it works, there are two matches:
245245

246246
```html
247247
<a href="....." class="doc"> <a href="....." class="doc">
@@ -268,7 +268,7 @@ Why it happens?
268268

269269
The quantifier `pattern:.*?` consumes characters until it meets `match:class="doc">`.
270270

271-
...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>`.
271+
...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>`.
272272

273273
3. So we have match:
274274

@@ -277,7 +277,7 @@ Why it happens?
277277
<a href="link1" class="wrong">... <p style="" class="doc">
278278
```
279279

280-
So the lazyness did not work for us here.
280+
So the laziness did not work for us here.
281281

282282
We need the pattern to look for `<a href="...something..." class="doc">`, but both greedy and lazy variants have problems.
283283

‎5-regular-expressions/11-regexp-alternation/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Alternation is the term in regular expression that is actually a simple "OR".
44

5-
In a regular expression it is denoted with a vertial line character `pattern:|`.
5+
In a regular expression it is denoted with a vertical line character `pattern:|`.
66

77
[cut]
88

‎6-async/02-promise-basics/article.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ When the executor finishes the job, it should call one of:
3434
- `resolve(value)` -- to indicate that the job finished successfully:
3535
- sets `state` to `"fulfilled"`,
3636
- sets `result` to `value`.
37-
- `reject(error)` -- to indicate that an error occured:
37+
- `reject(error)` -- to indicate that an error occurred:
3838
- sets `state` to `"rejected"`,
3939
- sets `result` to `error`.
4040

@@ -128,7 +128,7 @@ The syntax of `.then` is:
128128
129129
```js
130130
promise.then(
131-
function(result) { /* handle a sucessful result */ },
131+
function(result) { /* handle a successful result */ },
132132
function(error) { /* handle an error */ }
133133
);
134134
```

‎6-async/03-promise-chaining/article.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ class Thenable {
207207
}
208208
then(resolve, reject) {
209209
alert(resolve); // function() { native code }
210-
// resolve with this.num*2 after the 1 secound
210+
// resolve with this.num*2 after the 1 second
211211
setTimeout(() => resolve(this.num * 2), 1000); // (**)
212212
}
213213
}
@@ -513,7 +513,7 @@ new Promise(function(resolve, reject) {
513513
/* never runs here */
514514
}).catch(error => { // (**)
515515

516-
alert(`The unknown error has occured: ${error}`);
516+
alert(`The unknown error has occurred: ${error}`);
517517
// don't return anything => execution goes the normal way
518518

519519
});

‎6-async/05-async-await/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,4 +295,4 @@ The `await` keyword before a promise makes JavaScript wait until that promise se
295295
296296
Together they provide a great framework to write asynchronous code that is easy both to read and write.
297297
298-
With `async/await` we rarely need to write `promise.then/catch`, but we still shouldn't forget that they are based on promises, because sometimes (e.g. in the outmost scope) we have to use these methods. Also `Promise.all` is a nice thing to wait for many tasks simultaneously.
298+
With `async/await` we rarely need to write `promise.then/catch`, but we still shouldn't forget that they are based on promises, because sometimes (e.g. in the outermost scope) we have to use these methods. Also `Promise.all` is a nice thing to wait for many tasks simultaneously.

0 commit comments

Comments
 (0)