Correct mis-use of "it's"
This commit is contained in:
parent
ac7daa516f
commit
6af9a2e2a4
14 changed files with 29 additions and 29 deletions
|
@ -2,12 +2,12 @@
|
|||
|
||||
The two most used data structures in JavaScript are `Object` and `Array`.
|
||||
|
||||
- Objects allow us to create a single entity that stores data items by key.
|
||||
- Objects allow us to create a single entity that stores data items by key.
|
||||
- Arrays allow us to gather data items into an ordered list.
|
||||
|
||||
Although, when we pass those to a function, it may need not be an object/array as a whole. It may need individual pieces.
|
||||
|
||||
*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient.
|
||||
*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient.
|
||||
|
||||
Destructuring also works great with complex functions that have a lot of parameters, default values, and so on. Soon we'll see that.
|
||||
|
||||
|
@ -76,7 +76,7 @@ In the code above, the second element of the array is skipped, the third one is
|
|||
let [a, b, c] = "abc"; // ["a", "b", "c"]
|
||||
let [one, two, three] = new Set([1, 2, 3]);
|
||||
```
|
||||
That works, because internally a destructuring assignment works by iterating over the right value. It's kind of syntax sugar for calling `for..of` over the value to the right of `=` and assigning the values.
|
||||
That works, because internally a destructuring assignment works by iterating over the right value. It's a kind of syntax sugar for calling `for..of` over the value to the right of `=` and assigning the values.
|
||||
````
|
||||
|
||||
|
||||
|
@ -176,7 +176,7 @@ alert(rest.length); // 2
|
|||
*/!*
|
||||
```
|
||||
|
||||
The value of `rest` is the array of the remaining array elements.
|
||||
The value of `rest` is the array of the remaining array elements.
|
||||
|
||||
We can use any other variable name in place of `rest`, just make sure it has three dots before it and goes last in the destructuring assignment.
|
||||
|
||||
|
@ -254,7 +254,7 @@ alert(width); // 100
|
|||
alert(height); // 200
|
||||
```
|
||||
|
||||
Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables.
|
||||
Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables.
|
||||
|
||||
The order does not matter. This works too:
|
||||
|
||||
|
@ -429,7 +429,7 @@ let options = {
|
|||
height: 200
|
||||
},
|
||||
items: ["Cake", "Donut"],
|
||||
extra: true
|
||||
extra: true
|
||||
};
|
||||
|
||||
// destructuring assignment split in multiple lines for clarity
|
||||
|
|
|
@ -5,7 +5,7 @@ There are two kinds of object properties.
|
|||
|
||||
The first kind is *data properties*. We already know how to work with them. All properties that we've been using until now were data properties.
|
||||
|
||||
The second type of properties is something new. It's *accessor properties*. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code.
|
||||
The second type of property is something new. It's an *accessor property*. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code.
|
||||
|
||||
## Getters and setters
|
||||
|
||||
|
|
|
@ -55,7 +55,7 @@ Also, there's a global variable named by `id` that references the element:
|
|||
```
|
||||
|
||||
```warn header="Please don't use id-named global variables to access elements"
|
||||
This behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), so it's kind of standard. But it is supported mainly for compatibility.
|
||||
This behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), so it's a kind of standard. But it is supported mainly for compatibility.
|
||||
|
||||
The browser tries to help us by mixing namespaces of JS and DOM. That's fine for simple scripts, inlined into HTML, but generally isn't a good thing. There may be naming conflicts. Also, when one reads JS code and doesn't have HTML in view, it's not obvious where the variable comes from.
|
||||
|
||||
|
|
|
@ -17,8 +17,8 @@ As a sample element to demonstrate properties we'll use the one given below:
|
|||
width: 300px;
|
||||
height: 200px;
|
||||
border: 25px solid #E8C48F;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
@ -106,7 +106,7 @@ Geometry properties are calculated only for displayed elements.
|
|||
|
||||
If an element (or any of its ancestors) has `display:none` or is not in the document, then all geometry properties are zero (or `null` for `offsetParent`).
|
||||
|
||||
For example, `offsetParent` is `null`, and `offsetWidth`, `offsetHeight` are `0` when we created an element, but haven't inserted it into the document yet, or it (or it's ancestor) has `display:none`.
|
||||
For example, `offsetParent` is `null`, and `offsetWidth`, `offsetHeight` are `0` when we created an element, but haven't inserted it into the document yet, or it (or its ancestor) has `display:none`.
|
||||
|
||||
We can use this to check if an element is hidden, like this:
|
||||
|
||||
|
|
|
@ -210,7 +210,7 @@ Please note: the event must have the flag `cancelable: true`, otherwise the call
|
|||
|
||||
## Events-in-events are synchronous
|
||||
|
||||
Usually events are processed in a queue. That is: if the browser is processing `onclick` and a new event occurs, e.g. mouse moved, then it's handling is queued up, corresponding `mousemove` handlers will be called after `onclick` processing is finished.
|
||||
Usually events are processed in a queue. That is: if the browser is processing `onclick` and a new event occurs, e.g. mouse moved, then its handling is queued up, corresponding `mousemove` handlers will be called after `onclick` processing is finished.
|
||||
|
||||
The notable exception is when one event is initiated from within another one, e.g. using `dispatchEvent`. Such events are processed immediately: the new event handlers are called, and then the current event handling is resumed.
|
||||
|
||||
|
|
|
@ -23,14 +23,14 @@ These are the basics. Later we'll see how to other features, such as highlightin
|
|||
Here's the implementation of dragging a ball:
|
||||
|
||||
```js
|
||||
ball.onmousedown = function(event) {
|
||||
ball.onmousedown = function(event) {
|
||||
// (1) prepare to moving: make absolute and on top by z-index
|
||||
ball.style.position = 'absolute';
|
||||
ball.style.zIndex = 1000;
|
||||
|
||||
// move it out of any current parents directly into body
|
||||
// to make it positioned relative to the body
|
||||
document.body.append(ball);
|
||||
document.body.append(ball);
|
||||
|
||||
// centers the ball at (pageX, pageY) coordinates
|
||||
function moveAt(pageX, pageY) {
|
||||
|
@ -93,7 +93,7 @@ So we should listen on `document` to catch it.
|
|||
|
||||
## Correct positioning
|
||||
|
||||
In the examples above the ball is always moved so, that it's center is under the pointer:
|
||||
In the examples above the ball is always moved so that its center is under the pointer:
|
||||
|
||||
```js
|
||||
ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
|
||||
|
|
|
@ -85,7 +85,7 @@ So the example above uses `document.getSelection()` to get the selected text. Yo
|
|||
|
||||
It's possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it.
|
||||
|
||||
That's because `clipboardData` implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's bit beyond our scope now, but you can find its methods in the [DataTransfer specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
|
||||
That's because `clipboardData` implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's a bit beyond our scope now, but you can find its methods in the [DataTransfer specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
|
||||
|
||||
Also, there's an additional asynchronous API of accessing the clipboard: `navigator.clipboard`. More about it in the specification [Clipboard API and events](https://www.w3.org/TR/clipboard-apis/), [not supported by Firefox](https://caniuse.com/async-clipboard).
|
||||
|
||||
|
|
|
@ -87,7 +87,7 @@ Settings for `params`:
|
|||
|
||||
There is also a number of less supported browser-specific features, which are usually not used. Check <a href="https://developer.mozilla.org/en/DOM/window.open">window.open in MDN</a> for examples.
|
||||
|
||||
## Example: a minimalistic window
|
||||
## Example: a minimalistic window
|
||||
|
||||
Let's open a window with minimal set of features, just to see which of them browser allows to disable:
|
||||
|
||||
|
@ -120,7 +120,7 @@ Rules for omitted settings:
|
|||
|
||||
## Accessing popup from window
|
||||
|
||||
The `open` call returns a reference to the new window. It can be used to manipulate it's properties, change location and even more.
|
||||
The `open` call returns a reference to the new window. It can be used to manipulate its properties, change location and even more.
|
||||
|
||||
In this example, we generate popup content from JavaScript:
|
||||
|
||||
|
@ -239,7 +239,7 @@ There's also `window.onscroll` event.
|
|||
|
||||
Theoretically, there are `window.focus()` and `window.blur()` methods to focus/unfocus on a window. And there are also `focus/blur` events that allow to catch the moment when the visitor focuses on a window and switches elsewhere.
|
||||
|
||||
Although, in practice they are severely limited, because in the past evil pages abused them.
|
||||
Although, in practice they are severely limited, because in the past evil pages abused them.
|
||||
|
||||
For instance, look at this code:
|
||||
|
||||
|
@ -257,10 +257,10 @@ Still, there are some use cases when such calls do work and can be useful.
|
|||
|
||||
For instance:
|
||||
|
||||
- When we open a popup, it's might be a good idea to run a `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
|
||||
- When we open a popup, it might be a good idea to run `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
|
||||
- If we want to track when a visitor actually uses our web-app, we can track `window.onfocus/onblur`. That allows us to suspend/resume in-page activities, animations etc. But please note that the `blur` event means that the visitor switched out from the window, but they still may observe it. The window is in the background, but still may be visible.
|
||||
|
||||
## Summary
|
||||
## Summary
|
||||
|
||||
Popup windows are used rarely, as there are alternatives: loading and displaying information in-page, or in iframe.
|
||||
|
||||
|
|
|
@ -275,7 +275,7 @@ Arguments:
|
|||
`targetOrigin`
|
||||
: Specifies the origin for the target window, so that only a window from the given origin will get the message.
|
||||
|
||||
The `targetOrigin` is a safety measure. Remember, if the target window comes from another origin, we can't read it's `location` in the sender window. So we can't be sure which site is open in the intended window right now: the user could navigate away, and the sender window has no idea about it.
|
||||
The `targetOrigin` is a safety measure. Remember, if the target window comes from another origin, we can't read its `location` in the sender window. So we can't be sure which site is open in the intended window right now: the user could navigate away, and the sender window has no idea about it.
|
||||
|
||||
Specifying `targetOrigin` ensures that the window only receives the data if it's still at the right site. Important when the data is sensitive.
|
||||
|
||||
|
|
|
@ -30,7 +30,7 @@ Let's eliminate a possible source of confusion. `ArrayBuffer` has nothing in com
|
|||
|
||||
**To manipulate an `ArrayBuffer`, we need to use a "view" object.**
|
||||
|
||||
A view object does not store anything on it's own. It's the "eyeglasses" that give an interpretation of the bytes stored in the `ArrayBuffer`.
|
||||
A view object does not store anything on its own. It's the "eyeglasses" that give an interpretation of the bytes stored in the `ArrayBuffer`.
|
||||
|
||||
For instance:
|
||||
|
||||
|
|
|
@ -24,7 +24,7 @@ When `abort()` is called:
|
|||
- `controller.signal` emits the `"abort"` event.
|
||||
- `controller.signal.aborted` property becomes `true`.
|
||||
|
||||
Generally, we have two parties in the process:
|
||||
Generally, we have two parties in the process:
|
||||
1. The one that performs a cancelable operation, it sets a listener on `controller.signal`.
|
||||
2. The one that cancels: it calls `controller.abort()` when needed.
|
||||
|
||||
|
@ -34,7 +34,7 @@ Here's the full example (without `fetch` yet):
|
|||
let controller = new AbortController();
|
||||
let signal = controller.signal;
|
||||
|
||||
// The party that performs a cancelable operation
|
||||
// The party that performs a cancelable operation
|
||||
// gets the "signal" object
|
||||
// and sets the listener to trigger when controller.abort() is called
|
||||
signal.addEventListener('abort', () => alert("abort!"));
|
||||
|
@ -143,6 +143,6 @@ let results = await Promise.all([...fetchJobs, ourJob]);
|
|||
|
||||
## Summary
|
||||
|
||||
- `AbortController` is a simple object that generates an `abort` event on it's `signal` property when the `abort()` method is called (and also sets `signal.aborted` to `true`).
|
||||
- `AbortController` is a simple object that generates an `abort` event on its `signal` property when the `abort()` method is called (and also sets `signal.aborted` to `true`).
|
||||
- `fetch` integrates with it: we pass the `signal` property as the option, and then `fetch` listens to it, so it's possible to abort the `fetch`.
|
||||
- We can use `AbortController` in our code. The "call `abort()`" -> "listen to `abort` event" interaction is simple and universal. We can use it even without `fetch`.
|
||||
|
|
|
@ -179,7 +179,7 @@ The `integrity` option allows to check if the response matches the known-ahead c
|
|||
|
||||
As described in the [specification](https://w3c.github.io/webappsec-subresource-integrity/), supported hash-functions are SHA-256, SHA-384, and SHA-512, there might be others depending on the browser.
|
||||
|
||||
For example, we're downloading a file, and we know that it's SHA-256 checksum is "abcdef" (a real checksum is longer, of course).
|
||||
For example, we're downloading a file, and we know that its SHA-256 checksum is "abcdef" (a real checksum is longer, of course).
|
||||
|
||||
We can put it in the `integrity` option, like this:
|
||||
|
||||
|
|
|
@ -159,7 +159,7 @@ Function `animate` accepts 3 parameters that essentially describes the animation
|
|||
}
|
||||
```
|
||||
|
||||
It's graph:
|
||||
Its graph:
|
||||

|
||||
|
||||
That's just like `transition-timing-function: linear`. There are more interesting variants shown below.
|
||||
|
|
|
@ -16,7 +16,7 @@ The pattern `pattern:^Mary` means: "string start and then Mary".
|
|||
Similar to this, we can test if the string ends with `snow` using `pattern:snow$`:
|
||||
|
||||
```js run
|
||||
let str1 = "it's fleece was white as snow";
|
||||
let str1 = "its fleece was white as snow";
|
||||
alert( /snow$/.test(str1) ); // true
|
||||
```
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue