recursal/MDN huggingface dataset:
IntersectionObserver.observe()
==============================

`IntersectionObserver`의 **`observe()`** 메서드는 `IntersectionObserver`의 주시 대상 목록에 요소를 추가합니다. 하나의 감지기는 하나의 루트와 하나의 역치 목록만 가질 수 있지만, 동시에 여러 요소를 주시할 수 있습니다.

요소의 주시를 중단하려면 `IntersectionObserver.unobserve()`를 호출하세요.

지정한 주시 대상 요소의 가시성 비율이 감지기의 역치(`IntersectionObserver.thresholds` (en-US))를 통과하는 순간 감지기 콜백이 호출됩니다. 이때 역치를 통과한 요소를 나타내는 `IntersectionObserverEntry` (en-US)의 배열을 콜백 매개변수로 제공합니다. 이런 구조 덕분에 한 번의 콜백 호출만으로 많은 요소의 가시성 변화를 한 번에 처리할 수 있습니다.

구문
--


```js
IntersectionObserver.observe(targetElement);
```

### 매개변수

`targetElement`

루트 내에서의 가시성 변화를 감지할 `element` (en-US)입니다. 루트 요소의 자손이어야 합니다. 루트가 현재 문서의 뷰포트일 경우 이 요소도 문서 내에 위치해야 합니다.

### 반환 값

`undefined`.

예제
--


```js
// IntersectionObserver 등록
const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    // 주시 대상이 뷰포트 안으로 들어오면 active 클래스 추가
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add("active");
    }
    // 아니면 active 클래스 제거
    else {
      entry.target.classList.remove("active");
    }
  });
});

// 주시 대상 선언, 주시 시작
const boxElList = document.querySelectorAll(".box");
boxElList.forEach((el) => {
  io.observe(el);
});
```

명세
--

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-observe |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `IntersectionObserver.unobserve()`
IntersectionObserver.unobserve()
================================

`IntersectionObserver`의 **`unobserve()`** 메서드는 특정 요소에 대한 가시성 변화 주시를 중단합니다.

구문
--


```js
IntersectionObserver.unobserve(target);
```

### 매개변수

`target`

주시를 중단할 `Element` (en-US)입니다. 지정한 요소를 이미 주시하고 있지 않을 때는 아무것도 수행하지 않으며 예외도 발생하지 않습니다.

### 반환 값

`undefined`.

예제
--

아래 코드는 감지기를 생성한 후 요소를 주시하고, 다시 주시를 해제하는 예제입니다.


```js
var observer = new IntersectionObserver(callback);
observer.observe(document.getElementById("elementToObserve"));

/\* ... \*/

observer.unobserve(document.getElementById("elementToObserve"));
```

명세
--

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-unobserve |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Intersection Observer API
* `IntersectionObserver.observe()`
IntersectionObserver()
======================

**`IntersectionObserver()`** 생성자는 새로운 `IntersectionObserver` 객체를 생성하고 반환합니다.

`rootMargin` 옵션을 지정했다면 값의 구문이 맞는지, 범위가 0.0 이상 1.0 이하인지, 그리고 역치가 오름차순으로 정렬됐는지 검사합니다. 역치 목록이 없다면 배열 `[0.0]`을 사용합니다.

구문
--


```js
new IntersectionObserver(callback[, options]);
```

### 매개변수

`callback`

대상 요소의 보이는 영역 비율이 역치를 위아래로 넘을 때 (더 커졌거나 작아졌을 때 모두) 호출할 함수입니다. 두 개의 매개변수를 받습니다.

`entries`

더 드러나거나 가려져서 지정한 역치를 넘어가게 된 요소를 나타내는 `IntersectionObserverEntry` (en-US) 객체의 배열.

`observer`

콜백을 호출한 `IntersectionObserver`.


`options` Optional

감지기를 조절할 수 있는 객체입니다. 지정하지 않으면 문서 뷰포트를 루트로, 여백 없이, 0% 역치(하나의 픽셀이라도 보이면 콜백 호출)로 설정합니다.

`root`

대상 요소의 조상 `Element` (en-US) 또는 `Document`. 여기에 지정한 요소 또는 문서의 바운딩 박스를 이 감지기의 뷰포트로 사용합니다.

`rootMargin`

교차 계산에 대해 루트의 바운딩 박스에 적용할 오프셋을 나타내는 문자열. 즉 교차 계산 시 루트 영역의 크기를 키우거나 줄이고자 할 때 사용합니다. CSS `margin` 속성과 유사한 값을 받을 수 있습니다. Intersection Observer API 문서의 교차 루트와 루트 여백에서 여백의 동작 방식과 여백 구문에 대해 알아보세요. 기본 값은 `"0px 0px 0px 0px"`입니다.

`threshold`

0.0 이상, 1.0 이하의 숫자 단일 값 또는 숫자 배열. 대상의 보이는 영역과 전체 바운딩 박스의 비율에 대한 역치를 나타냅니다. `0.0`을 지정하면 대상의 픽셀 하나라도 보일 때 대상을 볼 수 있는 것으로 취급하고, `1.0`을 지정하면 대상을 온전히 볼 수 있어야 합니다. Intersection Observer API 문서의 역치에서 자세한 동작 방식을 알아보세요. 기본 값은 `0.0`입니다.


### 반환 값

지정한 `root` 내에서 주시 중인 요소의 가시성이 `threshold`를 위아래로 넘어가는 경우를 감지할 수 있는 새로운 `IntersectionObserver`. `observe()` 메서드를 호출해서 새로운 요소를 주시하세요.

### 예외

`SyntaxError`

지정한 `rootMargin`이 유효하지 않은 경우.

`RangeError`

한 개 이상의 `threshold` 값이 0.0 미만 또는 1.0을 초과할 경우.

예제
--

요소의 볼 수 있는 영역 비율이 10% 위아래로 넘어갈 때 `myObserverCallback` 함수를 호출하는 새로운 교차 탐지기를 생성하는 예제입니다.


```js
let observer = new IntersectionObserver(myObserverCallback, { threshold: 0.1 });
```

명세
--

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-intersectionobserver |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLFormElement.elements
========================

`HTMLFormElement` (en-US) 의 **`HTMLFormElement.elements`** 속성은 `<form>` 요소에 포함된 모든 컨트롤 폼을 나열하는 `HTMLFormControlsCollection` (en-US)을 반환합니다.

`HTMLFormElement.length` (en-US) 속성을 독립적으로 사용하면 컨트롤 폼의 수만 얻을 수 있습니다.

인덱스나 요소의 `name` 또는 `id` 속성을 사용하여 반환된 컬렉션의 특정 컨트롤 폼에 액세스할 수 있습니다.

HTML 5 이전에는 `HTMLFormControlsCollection`을 기반으로 하는 `HTMLCollection`을 반환하였습니다.

**참고:** 문서의 `<form>` 속성을 사용해도 마찬가지로 주어진 문서에 포함된 모든 컨트롤 폼의 목록을 얻을 수 있습니다.

값
-

이미지가 아닌 모든 컨트롤을 포함한 `HTMLFormControlsCollection` (en-US)를 가집니다. 이것은 라이브 컬렉션입니다. 컨트롤 폼이 컬렉션에 추가되거나 제거되면 이 컬렉션은 변경 사항을 반영하도록 업데이트됩니다.

반환된 컬렉션의 컨트롤 폼은 사전 순서, 깊이 우선 트리 순회를 따라 양식에 나타나는 순서와 동일합니다. 이것을 **트리 오더**라고 합니다.

다음 요소들만 반환합니다:

* `<button>`
* `<fieldset>`
* `<input>` (en-US) (단, `type` (en-US)이 `"image"`인 경우는 역사적으로 다른 기능을 위해 작동했기 때문에 생략됩니다.)
* `<object>`
* `<output>`
* `<select>` (en-US)
* `<textarea>` (en-US)
예제
--

### 빠른 구문 예제

이 예제에서는 컨트롤 폼 목록을 얻는 방법과 인덱스 및 이름 또는 ID별로 해당 요소에 액세스하는 방법을 알아봅니다.


```html
<form id="my-form">
  <input type="text" name="username" />
  <input type="text" name="full-name" />
  <input type="password" name="password" />
</form>
```



```js
var inputs = document.getElementById("my-form").elements;
var inputByIndex = inputs[0];
var inputByName = inputs["username"];
```

### 컨트롤 폼에 액세스하기

이 예제에서는 폼의 요소 목록을 가져온 다음 목록을 반복하면서 text (en-US) 유형의 `<input>` (en-US) 요소를 찾아 일부 형식의 처리를 수행할 수 있도록 합니다.


```js
var inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (i = 0; i < inputs.length; i++) {
  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
    // Update text input
    inputs[i].value.toLocaleUpperCase();
  }
}
```

### 폼 컨트롤 비활성화


```js
var inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (i = 0; i < inputs.length; i++) {
  // Disable all form controls
  inputs[i].setAttribute("disabled", "");
}
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-form-elements-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* The HTML element implementing this interface: `<form>`.
GlobalEventHandlers.onsubmit
============================

현재 창에서 폼을 제출하는 이벤트를 다루는 이벤트 핸들러

문법
--


```js
window.onsubmit = funcRef;
```

### 매개 변수

* `funcRef` 는 함수를 참조하는 변수이다.
예제
--


```html
<html>
  <script>
 function reg() {
 window.captureEvents(Event.SUBMIT);
 window.onsubmit = hit;
 }

 function hit() {
 console.log("hit");
 }
 </script>

  <body onload="reg();">
    <form>
      <input type="submit" value="submit" />
    </form>
    <div id="d"></div>
  </body>
</html>
```

알아두기
----

제출 이벤트는 사용자가 폼 내부에 있는 제출 버튼(`<input type="submit"/>`)을 눌렀을 때 발생한다.

명세
--

| Specification |
| --- |
| HTML Standard # event-submit |
| HTML Standard # handler-onsubmit |
RTCDataChannelEvent.channel
===========================

**실험적:** **이 기능은 실험적인 기능입니다.**  
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

읽기 속성인 **`RTCDataChannelEvent.channel`** 는 `RTCDataChannel` (en-US)와 관련이 있는 이벤트를 반환합니다.

Syntax
------


```js
var channel = RTCDataChannelEvent.channel;
```

### 값

`RTCDataChannel` (en-US) 객체는 `RTCPeerConnection` (en-US)을 원격 피어와 연결해주는 데이터 채널을 알려줍니다.

예시
--

`datachannel` 이벤트 핸들러 안 코드의 첫 줄에서 이벤트 객체의 채널을 가져오고, 이를 데이터 트래픽을 관리하는 코드에 사용 될 수 있도록 지역 변수로 저장합니다.


```js
pc.ondatachannel = function (event) {
  inboundDataChannel = event.channel;
  inboundDataChannel.onmessage = handleIncomingMessage;
  inboundDataChannel.onopen = handleChannelOpen;
  inboundDataChannel.onclose = handleChannelClose;
};
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-datachannelevent-channel |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `datachannel`
* `RTCDataChannel` (en-US)
* `RTCPeerConnection.ondatachannel`
* A simple RTCDataChannel sample (en-US)
* `RTCPeerConnection` (en-US)
RTCDataChannelEvent()
=====================

**실험적:** **이 기능은 실험적인 기능입니다.**  
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`RTCDataChannelEvent()`** 생성자는 새로운 `RTCDataChannelEvent`를 생성합니다.

**참고:** 이 이벤트는 알아서 WebRTC 레이어에 생성되고 전달되기 때문에, `RTCDataChannelEvent`를 수동으로 생성하는 일은 거의 없습니다.

Syntax
------


```js
var event = new RTCDataChannelEvent(type, RtcDataChannelEventInit);
```

### 패러미터

`type`

이벤트의 이름을 알려주는 `DOMString`입니다. 이름은 `RTCDataChannelEvent` 타입의 한 종류인 "datachannel" 딱 한 가지만 존재합니다.

`RtcDataChannelEventInit`

아래의 필드를 가지는 `RTCDataChannelEventInit` 딕셔너리 입니다:\* `"channel"`은 {domxref("RTCDataChannel")}}의 한 종류로, 이벤트에 의해 데이터 채널이 확인되었다는 것을 알려줍니다.

* `"bubbles"`은 옵션으로 설정이 가능하며, `EventInit`에서 상속됩니다. 이는 해당 이벤트가 무조건 `bubble`이 되어야하는지의 여부를 알려줍니다. 기본 값은 `false`입니다
* `"cancelable"`은 옵션으로 설정이 가능하며, `EventInit`에서 상속됩니다. 이는 해당 이벤트가 취소 될 수 있는지의 여부를 알려줍니다. 기본 값은 `false`입니다.

### 값

명시한대로 설정된 신규 `RTCDataChannelEvent` 입니다.

예시
--

아래 예제는 신규 `datachannel`를 생성합니다. `dc`는 이미 존재하는 데이터 채널을 뜻합니다.


```js
var event = new RTCDataChannelEvent("datachannel", { channel: dc });
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcdatachannelevent-constructor |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

참조
--

* WebRTC (en-US)
* `RTCDataChannel` (en-US)
* `RTCPeerConnection` (en-US)
* A simple RTCDataChannel sample (en-US)
DOMTokenList: add() 메서드
=======================

`DOMTokenList` (en-US) 인터페이스의 **`add()`** 메서드는 이미 있는 토큰은 생략하면서 목록에 지정된 토큰을 추가합니다.

구문
--


```js
add(token0)
add(token0, token1)
add(token0, token1, /\* … ,\*/ tokenN)
```

### 매개변수

`tokenN`

`DOMTokenList`에 추가할 토큰을 나타내는 문자열입니다.

### 반환 값

없음.

### 예외

`SyntaxError` `DOMException` (en-US)

전달인자 중 하나가 빈 문자열이면 에러를 발생시킵니다.

`InvalidCharacterError` `DOMException` (en-US)

토큰이 ASCII 공백을 포함하면 에러를 발생시킵니다.

예제
--

다음 예제에서 `Element.classList`를 사용하여 `<span>` 요소에 설정된 클래스 목록을 `DOMTokenList`로 찾아냅니다. 그 다음으로 목록에 새로운 토큰을 추가하고 `<span>`의 `Node.textContent`을 활용하여 목록을 작성합니다.

HTML 관련 코드입니다.


```html
<span class="a b c"></span>
```


JavaScript 관련 코드입니다.


```js
const span = document.querySelector("span");
const classes = span.classList;
classes.add("d");
span.textContent = classes;
```


결과는 다음과 같습니다.

여러 토큰을 추가할 수도 있습니다.


```js
span.classList.add("d", "e", "f");
```

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-add① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PeriodicWave()
==============

Web Audio API의 **`PeriodicWave()`** 생성자는 새로운 `PeriodicWave` 객체 인스턴스를 생성합니다.

구문
--


```js
var myWave = new PeriodicWave(context, options);
```

### 매개변수

*`AudioNodeOptions` (en-US) dictionary로부터 매개변수를 상속받습니다*.

`context`

여러분이 노드가 관련되기를 바라는 오디오 컨텍스트를 나타내는 `BaseAudioContext`

`options` Optional

 여러분이 `PeriodicWave`가 가지기를 바라는 속성들을 정의하는 `PeriodicWaveOptions` dictionary 객체 (이것은 또한 PeriodicWaveConstraints
 dictionary에 정의된 옵션들도 상속받습니다.):\* `real`: 여러분이 파동을 형성하기 위해 사용하기를 원하는 코사인 항을 포함하는 `Float32Array` (en-US) (`BaseAudioContext.createPeriodicWave`의 `real` 매개변수와 동일)


* `imag`: 여러분이 파동을 형성하기 위해 사용하기를 원하는 사인 항을 포함하는 `Float32Array` (en-US) (`BaseAudioContext.createPeriodicWave`의 `imag` 매개변수와 동일)

### 반환 값

새로운 `PeriodicWave` 객체 인스턴스.

예제
--


```js
var real = new Float32Array(2);
var imag = new Float32Array(2);
var ac = new AudioContext();

real[0] = 0;
imag[0] = 0;
real[1] = 1;
imag[1] = 0;

var options = {
  real: real,
  imag: imag,
  disableNormalization: false,
};

var wave = new PeriodicWave(ac, options);
```

명세
--

| Specification |
| --- |
| Web Audio API # dom-periodicwave-periodicwave |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MouseEvent.clientX
==================


`MouseEvent` 인터페이스의 clientX 읽기 전용 속성은 이벤트가 발생한 애플리케이션 viewport 내에 수평 좌표를 제공한다(페이지 내의 좌표와는 반대).

예를 들어 뷰포트의 왼쪽 가장자리를 클릭하면 페이지가 수평으로 스크롤되는지 여부에 관계없이 항상 clientX 값이 0인 마우스 이벤트가 발생한다.

Syntax
------


```js
var x = instanceOfMouseEvent.clientX;
```

### Return value

CSSOM 뷰 모듈에 의해 재정의된 이중 부동 소수점 값. 원래 이 속성은 긴 정수로 정의되었다. 자세한 내용은 "브라우저 호환성" 섹션을 참조하십시오.

Example
-------

이 예에서는 `mousemove (en-US)` 이벤트를 트리거할 때마다 마우스 좌표를 표시한다.

### HTML


```html
<p>위치를 보려면 마우스를 이동하십시오..</p>
<p id="screen-log"></p>
```

### JavaScript


```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### Result

명세서
---

| Specification |
| --- |
| UI Events # dom-mouseevent-clientx |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

참고 항목
-----

* `MouseEvent`
* `clientY` (en-US)
* `screenX` (en-US) / `screenY` (en-US)
RTCIceCandidate.candidate
=========================

`RTCIceCandidate` 인터페이스에 대한 읽기 속성인 **`candidate`** 는 candidate에 대해 자세히 설명해주는 `DOMString`를 반환합니다.

`RTCIceCandidate`의 거의 모든 다른 속성들은 사실 이 문자열에서 가져와진 것입니다.

이 속성은 `RTCIceCandidate()` (en-US)를 사용해서 신규 candidate 객체를 구성 할 때, `candidate` (en-US) 속성의 값을 지정해서 설정 할 수 있습니다.

Syntax
------


```js
var candidate = RTCIceCandidate.candidate;
```

### 값

반환되는 `DOMString` 값은 SDP의 속성인 `"candidate"`에서 직접 가져와진 candidate의 속성에 대해 알려줍니다. candidate 문자열은 해당 candidate에 대한 네트워크 연결 정보를 명시합니다. `candidate`가 빈 문자열 (`""`)이라면, 더 이상 남아있는 candidate가 없다는 뜻입니다. 빈 문자열은 "candidate 종료" 표시자로도 알려져있습니다.

candidate 문자열에 대한 구문은 RFC 5245, 섹션 15.1에 설명되어있습니다.
```

a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host
```


위와 같은 a-line (속성 line)에서 해당하는 `candidate` 문자열의 값은 `"candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host"`가 됩니다.

user agent는 항상 가장 높거나 같은 `priority` (en-US)를 가진 candidate를 선호합니다. 위의 예시에서, 우선 순위는 `2043278322` 입니다. 속성은 단일 스페이스로 특정한 순서가 있습니다. 위의 candidate에 대한 전체 속성 리스트는 다음과 같습니다:

* `foundation` (en-US) = 4234997325
* `component` (en-US) = `"rtp"` (`"rtp"`는 1이 문자열에 있고, `"rtcp"`는 2가 문자열에 있습니다.)
* `protocol` (en-US) = `"udp"`
* `priority` (en-US) = 2043278322
* `ip` (en-US) = `"192.168.0.56"`
* `port` (en-US) = 44323
* `type` (en-US) = `"host"`
예시
--

아래 예제에서는 시그널링 과정에서 원격 유저에게서 수신 받은 ICE candidate 정보를 가진 SDP 문자열을 입력으로 받는 함수입니다.


```js
function handleNewIceCandidate(candidateSDP) {
  var candidateObj = new RTCIceCandidate(candidateSDP);

  myPeerConnection.addIceCandidate(candidateObj).catch({
    /\* handle the error thrown by addIceCandidate() \*/
  });
}
```


`handleNewIceCandidate()` 함수는 수신 받은 candidate의 SDP 문자를 `RTCIceCandidate()` (en-US)에 보내고, candidate를 알려주는 `RTCIceCanddiate` 객체를 반환 받습니다.

그 후, 신규 candidatesms `RTCPeerConnection.addIceCandidate()`에 전달되서 candidate의 리스트에 추가해서 WebRTC가 연결 설정으로 사용 하도록 고려합니다.

위 예제는 더 간단하게 표현 될 수 있습니다. ECMAScript 2016의 고급 기능들을 사용해서 아래와 같이 나타낼 수 있습니다:


```js
let handleNewIceCandidate = (candidateSDP) =>
  myPeerConnection.addIceCandidate(new RTCIceCandidate(candidateSDP));
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicecandidate-candidate |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RTCIceCandidate. toJSON()
=========================

`RTCIceCandidate` 메소드인 \*\*`toJSON()`\*\*은 JSON 형식으로 호출된 RTCIceCandidate를 `RTCIceCandidateInit` (en-US) 객체 형식으로 변환합니다. .

Syntax
------


```js
json = RTCIceCandidate.toJSON();
```

### 반환 값

`RTCIceCandidateInit` (en-US) 딕셔너리에 상응하는 객체로, `RTCIceCandidate` 객체의 해당하는 값으로 설정됩니다.

반환된 객체에 대한 문자열화된 버전의 객체는 `stringify()`를 호출해서 가져올 수 있습니다. 아래의 예시를 참조하십시오.

예시
--

아래의 샘플 코드는 `candidate` 변수의 `RTCIceCandidate`를 나타내는 JSON 문자열을 가져옵니다.


```js
var jsonString = candidate.toJSON().stringify();
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicecandidate-tojson |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Crypto.getRandomValues()
========================

**`Crypto.getRandomValues()`** 메서드는 암호학적으로 강력한 난수를 생성할 수 있습니다. 매개변수로 제공한 배열을 무작위 (암호학에서의 '무작위') 숫자로 채웁니다.

충분한 성능을 확보하기 위해, API 구현체들은 진정한 난수 생성기 대신 충분한 엔트로피를 지닌 값을 시드로 적용한 의사 난수 생성기(pseudo-random number generator, PRNG)를 사용합니다. 정확한 의사 난수 생성 알고리즘은 사용자 에이전트마다 다를 수 있지만, 암호학적 용도로는 모두 적합할 것입니다.

`getRandomValues()`는 안전하지 않은 연결에서 사용할 수 있는 유일한 `Crypto` 인터페이스 멤버입니다.

구문
--


```js
getRandomValues(typedArray);
```

### 매개변수

`typedArray`

정수형 `TypedArray`입니다. 즉 `Float32Array`와 `Float64Array`를 **제외**한 `Int8Array`, `Uint8Array`, `Uint8ClampedArray`, `Int16Array`, `Uint16Array`, `Int32Array`, `Uint32Array`, `BigInt64Array`, `BigUint64Array` 중 하나여야 합니다. 제공한 배열의 모든 원소는 난수로 덮어쓰입니다.

### 반환 값

`typedArray`로 제공한 배열. 단, 배열의 요소들을 모두 새로 생성한 난수로 덮어쓴 후 반환합니다. `typedArray` 자체를 변경하며, 복사본을 생성하지 않습니다.

### 예외

`QuotaExceededError` `DOMException` (en-US)

`typedArray`의 `byteLength`가 65,536을 초과하면 발생합니다.

사용 일람
-----

`getRandomValues()`를 암호화 키의 생성에 사용하지 마세요. 암호화 키 생성에는 `generateKey()` (en-US) 메서드를 사용해야 합니다. 몇 가지 이유가 있는데, 그중 하나는 안전하지 않은 연결에서도 `getRandomValues()`를 실행할 수 있기 때문입니다.

Web Cryptography 명세는 엔트로피의 하한선을 명시하지는 않고, 사용자 에이전트가 실용적인 선 내에서 최선의 엔트로피를 제공하도록 강하게 권고하고 있습니다. 이를 위해, 명세는 사용자 에이전트가 플랫폼별 난수 생성 기능(Unix `/dev/urandom` 등)을 포함한 고 엔트로피 무작위/의사 무작위 데이터 출처에서 가져온 값을 시드로 사용, 잘 정립되고 효율적인 의사 난수 생성기를 사용해 난수를 생성하도록 추천합니다.

예제
--


```js
const array = new Uint32Array(10);
self.crypto.getRandomValues(array);

console.log("오늘자 행운의 수:");
for (const num of array) {
  console.log(num);
}
```

명세
--

| Specification |
| --- |
| Web Cryptography API # Crypto-method-getRandomValues |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Web Crypto API (en-US)
* `Crypto` 객체를 가져올 수 있는 `crypto` 전역 속성
* 비암호학적 난수 출처인 `Math.random`
Crypto.subtle
=============

**`Crypto.subtle`** 은 읽기전용 속성이며 암호화 기법을 수행할 수 있는 `SubtleCrypto` (en-US) 객체를 반환합니다.

명세
--

| Specification |
| --- |
| Web Cryptography API # Crypto-attribute-subtle |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Crypto`.
* `SubtleCrypto` (en-US).
요소의 차원 정하기
==========

엘리먼트의 너비와 높이를 알기 위해 살펴볼 수 있는 여러 속성이 있습니다. 또한, 요구하는 사항에 딱 맞는 것을 고르기 다소 까다로울 수도 있습니다. 이 글은 여러분이 필요에 맞는 속성을 고르는데 도움을 주기 위해 작성했습니다.

### 공간을 얼마나 차지하나요?

표시된 컨텐트의 너비, 스크롤바, 패딩까지 포함해서 엘리먼트가 차지하는 전체 공간을 알고 싶다면, `offsetWidth` (en-US)와 `offsetHeight 속성을 사용하세요:`

![offsetWidth와 offsetHeight는 패딩, 테두리 및 여백 크기를 고려하여 결정됩니다.](/ko/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements/dimensions-offset.png)

### 보이는 컨텐트의 크기는요?

패딩은 포함하되 경계선, 여백, 스크롤바는 포함시키지 않고 보이는 컨텐트가 실제로 차지하는 공간이 알고 싶다면, `clientWidth`와 `clientHeight` 속성을 사용하세요:

![clientWidth와 clientHeight는 패딩, 테두리 및 여백 크기를 고려하여 결정됩니다.](/ko/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements/dimensions-client.png)

### 컨텐트는 얼마나 크나요?

컨텐트의 실제 크기를 알고 싶다면(보여지는 부분만이 아닌 전체 컨텐트 크기), `scrollWidth` (en-US)와 `scrollHeight` 속성을 사용하세요. 이 속성들은 엘리먼트 컨텐트의 전체 크기에 해당하는 너비와 높이를 반환합니다. 보여지는 영역이 작아서 스크롤바를 사용하고 있다해도 관계없습니다.

예를 들어, 600x400 픽셀 크기의 엘리먼트가 300x300 픽셀의 스크롤박스에서 보여진다면 `scrollWidth`는 600을, `scrollHeight`는 400을 각각 반환합니다.

### 참고자료

MSDN: Measuring Element Dimension and Location
Worker.terminate()
==================

`Worker` 인터페이스의 **`terminate()`** 메서드는 `Worker`를 즉시 종료시킬 때 사용합니다. 이것은 worker가 자신의 작업들을 끝마칠 수 있도록 하는 게 아니라, 바로 종료시키는 것입니다.

구문
--


```js
terminate()
```

### 매개변수

없음.

### 반환 값

없음 (`undefined`).

예시
--

아래의 코드 스니펫은 `Worker()` (en-US) 생성자를 이용하여 `Worker` 객체를 생성하고, 즉시 종료하는 예를 보여줍니다.


```js
const myWorker = new Worker("worker.js");

myWorker.terminate();
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-worker-terminate-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

`Worker` 인터페이스
HTMLMediaElement.autoplay
=========================

**`HTMLMediaElement.autoplay`** 프로퍼티는 `autoplay` HTML 어트리뷰트의 값을 반환합니다. 이 프로퍼티는 미디어가 문제 없이 재생 가능한 상황이 되면 자동 재생 여부를 결정합니다.

미디어 엘리먼트의 소스가 `MediaStream` (en-US)이며 `autoplay` 프로퍼티가 `true` 일 경우 액티브 상태가 되면 재생합니다 (즉, `MediaStream.active` (en-US)가 `true`가 될 때).

**참고:** 오디오(또는 오디오가 있는 비디오)를 자동으로 재생하는 사이트는 사용자에게 그리 탐탁치 않은 경험일 수 있습니다, 그러므로 가능한 한 지양해야합니다. 자동 재생 기능을 제공하려면, 사전 동의(사용자에게 기능을 켜도록 함)를 받아야 합니다. 의외로 이 점은 사용자의 조작에 의해 미디어 엘레먼츠를 늦게 생성하는 경우 유용할 수 있습니다.

자동 재생과 자동 재생 제한, 그리고 브라우저의 자동 재생 제한에 대처하는 법에 대해 자세히 알고 싶다면 미디어 자동 재생과 Web Audio API 가이드 문서를 참조하세요.

문법
--


```js
HTMLMediaElement.autoplay = true | false;

var autoplay = HTMLMediaElement.autoplay;
```

### 값

미디어가 재생 가능할 정도로 로드되고 문제 없이 재생 가능할 때 자동 재생 여부를 `Boolean` `true` 로 반환한다.

**참고:** 특정 브라우저는 사용자 설정을 통해 `autoplay` 프로퍼티를 무시하고 비디오/오디오 자동 재생을 막는 기능을 제공합니다. 자동 재생을 위해 `autoplay` 프로퍼티를 맹신하지 마세요.

예제
--

...


```html
<video id="video" controls>
  <source
 src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile\_id=165" />
</video>
```



```js
// Disable autoplay (recommended)
// false is the default value
document.querySelector("#video").autoplay = false;
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-media-autoplay |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

더 보기
----

* 정의된 인터페이스 `HTMLMediaElement`.
* `<audio>` (en-US), `<video>` 엘리먼트
HTMLMediaElement: canplay
=========================

`canplay` 이벤트는 user agent 가 media 를 재생할 수 있을 때 발생된다. 그러나, 컨텐츠의 추가 버퍼링을 위한 정지 없이 media 를 끝까지 재생하기에는, 로드된 데이터가 충분하지 않을 것으로 추산한다.

General info
------------

Specification

HTML5 media

Interface

Event

Bubbles

No

Cancelable

No

Target

Element

Default Action

None.

Properties
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` 읽기 전용 | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` 읽기 전용 | `DOMString` | The type of event. |
| `bubbles` 읽기 전용 | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` 읽기 전용 | `Boolean` | Whether the event is cancellable or not. |

Related Events
--------------

* `playing (en-US)`
* `waiting (en-US)`
* `seeking (en-US)`
* `seeked (en-US)`
* `ended (en-US)`
* `loadedmetadata (en-US)`
* `loadeddata (en-US)`
* `canplay`
* `canplaythrough`
* `durationchange (en-US)`
* `timeupdate (en-US)`
* `play (en-US)`
* `pause (en-US)`
* `ratechange (en-US)`
* `volumechange (en-US)`
* `suspend (en-US)`
* `emptied (en-US)`
* `stalled (en-US)`
HTMLMediaElement.networkState
=============================

**`HTMLMediaElement.networkState`** 속성은 네트워크를
 통한 미디어 가져오기(fetching)의 현재 상태를 나타냅니다.

값
-

아래의 `unsigned short` 값 중 하나입니다.

| 상수 | 값 | 설명 |
| --- | --- | --- |
| `NETWORK_EMPTY` | 0 | 아직 데이터가 없습니다. 또한 `readyState`는 `HAVE_NOTHING`입니다. |
| `NETWORK_IDLE` | 1 | HTMLMediaElement가 활성 상태이고 리소스를 선택했지만 네트워크를 사용하고 있지 않습니다. |
| `NETWORK_LOADING` | 2 | 브라우저가 HTMLMediaElement 데이터를 다운로드하고 있습니다. |
| `NETWORK_NO_SOURCE` | 3 | HTMLMediaElement src를 찾을 수 없습니다. |

예제
--

 이 예제는 오디오 요소가 재생을 시작할 때까지 수신한 다음
 여전히 데이터를 로드하고 있는지 확인합니다.


```html
<audio id="example" preload="auto">
  <source src="sound.ogg" type="audio/ogg" />
</audio>
```



```js
const obj = document.getElementById("example");
obj.addEventListener("playing", () => {
  if (obj.networkState === 2) {
    // 여전히 로딩중입니다...
  }
});
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-media-networkstate-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* networkState를 정의하는 인터페이스는 `HTMLMediaElement`입니다.