Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion 1-js/05-data-types/10-destructuring-assignment/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 합니다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 하죠.

이럴 때 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법인 *구조 분해 할당(destructuring assignment)* 을 사용할 수 있습니다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘합니다.
*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.

## 배열 분해하기

Expand Down Expand Up @@ -69,7 +70,6 @@ alert( title ); // Consul
let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);
```

````


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
text-align: center;
}
.circle {
transition-property: width, height, margin-left, margin-top;
transition-property: width, height;
transition-duration: 2s;
position: fixed;
transform: translateX(-50%) translateY(-50%);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
text-align: center;
}
.circle {
transition-property: width, height, margin-left, margin-top;
transition-property: width, height;
transition-duration: 2s;
position: fixed;
transform: translateX(-50%) translateY(-50%);
Expand Down
6 changes: 3 additions & 3 deletions 1-js/99-js-misc/01-proxy/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -994,7 +994,7 @@ We use `WeakMap` instead of `Map` here because it won't block garbage collection
## References

- Specification: [Proxy](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots).
- MDN: [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).
- MDN: [Proxy](mdn:/JavaScript/Reference/Global_Objects/Proxy).

## Summary

Expand All @@ -1016,13 +1016,13 @@ We can trap:
- Reading (`get`), writing (`set`), deleting (`deleteProperty`) a property (even a non-existing one).
- Calling a function (`apply` trap).
- The `new` operator (`construct` trap).
- Many other operations (the full list is at the beginning of the article and in the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)).
- Many other operations (the full list is at the beginning of the article and in the [docs](mdn:/JavaScript/Reference/Global_Objects/Proxy)).

That allows us to create "virtual" properties and methods, implement default values, observable objects, function decorators and so much more.

We can also wrap an object multiple times in different proxies, decorating it with various aspects of functionality.

The [Reflect](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect) API is designed to complement [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). For any `Proxy` trap, there's a `Reflect` call with same arguments. We should use those to forward calls to target objects.
The [Reflect](mdn:/JavaScript/Reference/Global_Objects/Reflect) API is designed to complement [Proxy](mdn:/JavaScript/Reference/Global_Objects/Proxy). For any `Proxy` trap, there's a `Reflect` call with same arguments. We should use those to forward calls to target objects.

Proxies have some limitations:

Expand Down
2 changes: 1 addition & 1 deletion 1-js/99-js-misc/05-bigint/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,5 +126,5 @@ We can use such JSBI code "as is" for engines that don't support bigints and for

## 참고 자료

- [MDN docs on BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt).
- [MDN docs on BigInt](mdn:/JavaScript/Reference/Global_Objects/BigInt).
- [Specification](https://tc39.es/ecma262/#sec-bigint-objects).
4 changes: 2 additions & 2 deletions 2-ui/1-document/09-size-and-scroll/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
width: 300px;
height: 200px;
border: 25px solid #E8C48F;
padding: 20px;
overflow: auto;
padding: 20px;
overflow: auto;
}
</style>
```
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div id="carousel" class="carousel">
<button class="arrow prev">⇦</button>
<div class="gallery">
<ul class="images">
<ul>
<li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://en.js.cx/carousel/2.png"></li>
<li><img src="https://en.js.cx/carousel/3.png"></li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ class HoverIntent {
if (speed < this.sensitivity) {
clearInterval(this.checkSpeedInterval);
this.isHover = true;
this.over.call(this.elem, event);
this.over.call(this.elem);
} else {
// speed fast, remember new coordinates as the previous ones
this.prevX = this.lastX;
Expand Down
2 changes: 1 addition & 1 deletion 2-ui/99-ui-misc/02-selection-range/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ Click buttons to run methods on the selection, "resetExample" to reset it.
</script>
```

There also exist methods to compare ranges, but these are rarely used. When you need them, please refer to the [spec](https://dom.spec.whatwg.org/#interface-range) or [MDN manual](https://developer.mozilla.org/en-US/docs/Web/API/Range).
There also exist methods to compare ranges, but these are rarely used. When you need them, please refer to the [spec](https://dom.spec.whatwg.org/#interface-range) or [MDN manual](mdn:/api/Range).


## Selection
Expand Down
10 changes: 5 additions & 5 deletions 3-frames-and-windows/01-popup-windows/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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:

Expand All @@ -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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,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.

Expand Down
Loading