recursal/MDN huggingface dataset:
Window.sessionStorage
=====================

**`sessionStorage`** 읽기 전용 속성은 현재 출처 세션의 `Storage` 객체에 접근합니다. `sessionStorage`는 `localStorage`와 비슷하지만, `localStorage`의 데이터는 만료되지 않고, `sessionStorage`의 데이터는 **페이지 세션**이 끝날 때 제거되는 차이가 있습니다.

* 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있습니다.
* **페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성합니다.**
* 같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 `sessionStorage`를 생성합니다.
* 탭/창을 닫으면 세션이 끝나고 `sessionStorage` 안의 객체를 초기화합니다.

`sessionStorage`에 저장한 자료는 **페이지 프로토콜별로 구분**합니다. 특히 HTTP(http://example.com)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(https://example.com)와는 다른 `sessionStorage`에 저장됩니다.

키와 값은 **항상** 각 문자에 2바이트를 할당하는 UTF-16 `DOMString`의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.

구문
--


```js
myStorage = window.sessionStorage;
```

### 값

현재 출처의 세션 저장 공간에 접근할 수 있는 `Storage` 객체.

### 예외

`SecurityError`

요청이 정책의 결정을 위반했거나, 출처가 유효한 스킴/호스트/포트 튜플이 아닌 경우. 유효하지 않은 튜플은 출처가 `file:`이나 `data:` 스킴을 사용했을 때 발생할 수 있습니다. 예외의 예를 들자면 사용자가 특정 출처의 지속성 데이터를 거부하도록 브라우저를 설정하는 경우가 있습니다.

예제
--

아래 코드는 현재 출처의 세션 `Storage` 객체에 접근한 후, `Storage.setItem()` (en-US)을 사용해 항목 하나를 추가합니다.


```js
sessionStorage.setItem("myCat", "Tom");
```


다음 예제는 텍스트 필드의 문장을 자동 저장하여 브라우저가 의도치 않게 재시작 되었을 경우 자동으로 텍스트 필드의 내용을 저장된 문장으로 복구하여 작성한 내용이 사라지지 않게 합니다.


```js
// 추적할 텍스트 입력 칸 가져오기
let field = document.getElementById("field");

// 자동저장 값이 존재하는지 판별
// (의도치 않게 페이지를 새로 불러올 경우에만 발생)
if (sessionStorage.getItem("autosave")) {
  // 입력 칸의 콘텐츠 복구
  field.value = sessionStorage.getItem("autosave");
}

// 텍스트 입력 칸의 변화 수신
field.addEventListener("change", function () {
  // 결과를 세션에 저장
  sessionStorage.setItem("autosave", field.value);
});
```


**참고:** Web Storage API 사용하기 (en-US) 문서에서 전체 예제를 살펴보세요.

명세
--

| Specification |
| --- |
| HTML Standard # dom-sessionstorage-dev |

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

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

같이 보기
-----

* Web Storage API 사용하기 (en-US)
* `Window.localStorage`
popstate
========

`Window` 인터페이스의 **`popstate`** 이벤트는 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생합니다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 됩니다.

history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의합니다.popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다.

브라우저는 popstate 이벤트를 페이지 로딩시에 다르게 처리합니다. Chrome(v34 이전버전) 와 Safari는 popstate 이벤트를 페이지 로딩시에 발생시킵니다. 하지만 Firefox 는 그렇지 않습니다.

| Bubbles | Yes |
| --- | --- |
| Cancelable | No |
| Interface | `PopStateEvent` (en-US) |
| Event handler property | `onpopstate` |

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

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

Example
-------

예시를 보자, 다음의 코드를 실행하는 `http://example.com/example.html` 의 한 페이지는 주석에 쓰여있는 경고들을 발생시킨다.


```js
window.onpopstate = function (event) {
  console.log(
    "location: " +
      document.location +
      ", state: " +
      JSON.stringify(event.state),
  );
};
history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null
history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
```


원래의 히스토리 엔트리인 (`http://example.com/example.html`) 에 이와 연관된 state 객체가 없더라도, 두번째 history.back() API 호출 후 엔트리를 활성화 시키면 popstate 이벤트는 여전히 발생된다.

See Also
--------

* Manipulating the browser history (the History API)
Window: toolbar 속성
==================

`toolbar` 객체를 반환합니다.

이 속성은 불리언 `visible` 속성을 포함하는 객체로, 유사한 역할의 다른 `Window` 속성들처럼 과거에는 웹 브라우저 사용자 인터페이스의 특정 부분이 보이는지를 나타냈었습니다.

개인정보 보호 및 호환성을 위해, 지금은 `visible` 속성의 값이 `Window`가 팝업이면 `false`, 그 외에는 모두 `true`입니다.

값
-

하나의 속성을 포함하는 객체입니다.

`visible` 읽기 전용

불리언 속성으로, `Window`가 팝업이면 `false`, 아니면 `true`입니다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-window-toolbar-dev |

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

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

같이 보기
-----

* `window.locationbar` (en-US)
* `window.menubar` (en-US)
* `window.personalbar` (en-US)
* `window.scrollbars` (en-US)
* `window.statusbar` (en-US)
Window.stop()
=============

요약
--

Window.stop()메서드는 window 객체의 로딩을 취소하는 메서드입니다.

문법
--


```js
window.stop();
```

예시
--


```js
window.stop();
```

본문
--

stop() 메서드는 브라우저의 정지 버튼을 누르는 행위와 동등한 효과를 지닙니다. Because of the order in which scripts are loaded, the stop() method cannot stop the document in which it is contained from loading, but it will stop the loading of large images, new windows, and other objects whose loading is deferred.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-window-stop-dev |

Compatibility
-------------

stop()메서드는 인터넷 익스플로러에서 지원하지 않습니다.
WindowEventHandlers.onstorage
=============================

`WindowEventHandlers` 믹스인의 **`onstorage`** 속성은 `storage` 이벤트를 처리하는 `event handler`입니다.

`storage` 이벤트는 다른 문서에서 저장소를 변경했을 때 발생합니다.

구문
--


```js
window.onstorage = functionRef;
```

### 값

`functionRef`는 함수 이름 혹은 함수 표현식으로, 단일 매개변수로써 `StorageEvent`를 받습니다.

예제
--

다음 예제는 다른 문서에서 저장소 키를 바꿀 때마다 메시지를 기록합니다.


```js
window.onstorage = function (e) {
  console.log(
    "The " +
      e.key +
      " key has been changed from " +
      e.oldValue +
      " to " +
      e.newValue +
      ".",
  );
};
```

명세
--

| Specification |
| --- |
| HTML Standard # event-storage |
| HTML Standard # handler-window-onstorage |

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

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

같이 보기
-----

* Window: `storage` 이벤트
Window.history
==============

`Window.history` 읽기 전용 속성은 `History` 객체로의 참조를 반환합니다. History 객체는 브라우저의 세션 기록(현재 페이지를 불러온 탭 혹은 프레임이 방문했던 페이지)을 조작할 때 사용합니다.

History API 문서를 방문해 자세한 정보와 함께 예제를 살펴보세요. 특히, 저 문서는 `pushState()`와 `replaceState()` 메서드를 사용하기 전 알아야 할 보안 기능을 설명합니다.

예제
--


```js
history.back(); // 뒤로 가기 버튼 클릭과 동일
history.go(-1); // history.back()과 동일
```

참고
--

프레임에 속하지 않은 최상위 페이지의 세션 기록은 브라우저의 뒤로 가기/앞으로 가기 버튼의 드롭다운 메뉴에서도 볼 수 있습니다.

보안상의 문제로, `History` 객체는 세션 기록 내 다른 페이지의 URL을 알 수 없습니다. 그러나 세션 기록을 탐색하는 것은 할 수 있습니다.

일반 코드에서 세션 기록을 지우거나, 브라우저의 뒤로/앞으로 가기 버튼을 비활성화할 방법은 없습니다. 그나마 가장 근접한 방법은 `location.replace()` 메서드로, 세션 기록의 현재 항목을 주어진 URL로 바꿉니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-history-interface |

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

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

`ImageCapture` 인터페이스의 **`takePhoto()`** 메서드는 `MediaStreamTrack`을 제공하는 비디오 캡처 장치를 사용해 단일 노출 촬영을 하고, 그 데이터를 담은 `Blob`으로 이행하는 `Promise`를 반환합니다.

구문
--


```js
const blobPromise = imageCaptureObj.takePhoto([photoSettings]);
```

### 매개변수

`photoSettings` Optional

사진을 촬영할 때 사용할 옵션을 나타내는 객체. 가능한 옵션은 다음과 같습니다.\* `fillLightMode`: 캡처 장치의 플래시 설정. `"auto"`, `"off"`, `"flash"` 중 하나를 사용할 수 있습니다.

* `imageHeight`: 원하는 이미지 크기의 높이를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, 사용자 에이전트는 이 값과 제일 가까운 높이를 사용합니다.
* `imageWidth`: 원하는 이미지 크기의 너비를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, 사용자 에이전트는 이 값과 제일 가까운 너비를 사용합니다.
* `redEyeReduction`: 적목 현상 감소 기능이 존재하는 경우, 사용할지 나타내는 불리언 값.

### 반환 값

`Blob`으로 이행하는 `Promise`.

예제
--

다음 코드는 Simple Image Capture 데모에서 가져온 것으로, `takePhoto()`가 반환한 `Promise`의 `Blob`을 사용해 `<img>` 요소에 할당하는 방법을 보입니다. 코드를 짧게 유지하기 위해 `ImageCapture` 객체의 초기화 과정은 생략했습니다.


```js
var takePhotoButton = document.querySelector("button#takePhoto");
var canvas = document.querySelector("canvas");

takePhotoButton.onclick = takePhoto;

function takePhoto() {
  imageCapture
    .takePhoto()
    .then(function (blob) {
      console.log("Took photo:", blob);
      img.classList.remove("hidden");
      img.src = URL.createObjectURL(blob);
    })
    .catch(function (error) {
      console.log("takePhoto() error: ", error);
    });
}
```

명세
--

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-takephoto |

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

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

`ImageCapture` 인터페이스의 **`getPhotoCapabilities()`** 메서드는 사용 가능한 설정 옵션을 담은 `PhotoCapabilities` 객체로 이행하는 `Promise`를 반환합니다.

구문
--


```js
const capabilitiesPromise = imageCaptureObj.getPhotoCapabilities();
```

### 반환 값

다음 속성을 포함하는 객체로 이행하는 `Promise`.

`redEyeReduction`

장치의 적목 현상 감소 기능 적용 여부를 나타내는 `"never"`, `"always"`, `"controllable"` 중 하나를 반환합니다.

`imageHeight`

사용자 에이전트가 지원하는 이미지 높이의 범위를 나타내는 객체를 반환합니다.

`imageWidth`

사용자 에이전트가 지원하는 이미지 너비의 범위를 나타내는 객체를 반환합니다.

`fillLightMode`

사용 가능한 카메라 플래시 옵션을 담은 배열을 반환합니다. 가능한 값은 `auto`, `off`, `flash`입니다.

예제
--

다음 예제는 Chrome의 Image Capture / Photo Resolution Sample에서 가져온 코드로, `getPhotoCapabilities()`를 사용해 범위 입력 칸의 크기를 수정합니다. 또한 장치의 `MediaStream` (en-US)에서 가져온 `MediaStreamTrack` 객체를 사용해 `ImageCapture` 객체를 생성하는 부분도 포함하고 있습니다.


```js
const input = document.querySelector('input[type="range"]');

var imageCapture;

navigator.mediaDevices
  .getUserMedia({ video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;

    const track = mediaStream.getVideoTracks()[0];
    imageCapture = new ImageCapture(track);

    return imageCapture.getPhotoCapabilities();
  })
  .then((photoCapabilities) => {
    const settings = imageCapture.track.getSettings();

    input.min = photoCapabilities.imageWidth.min;
    input.max = photoCapabilities.imageWidth.max;
    input.step = photoCapabilities.imageWidth.step;

    return imageCapture.getPhotoSettings();
  })
  .then((photoSettings) => {
    input.value = photoSettings.imageWidth;
  })
  .catch((error) => console.log("Argh!", error.name || error));
```

명세
--

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-getphotocapabilities |

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

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

`ImageCapture` 인터페이스의 **`track`** 읽기 전용 속성은 `ImageCapture()` 생성자에 제공한 `MediaStreamTrack`의 참조를 반환합니다.

구문
--


```js
const mediaStreamTrack = imageCaptureObj.track;
```

### 값

`MediaStreamTrack` 객체.

명세
--

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-track |

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

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

`ImageCapture` 인터페이스의 **`getPhotoSettings()`** 메서드는 현재 촬영 설정을 담은 `PhotoSettings` 객체로 이행하는 `Promise`를 반환합니다.

구문
--


```js
const settingsPromise = imageCapture.getPhotoSettings();
```

### 반환 값

다음의 속성으로 구성된 `PhotoSettings` 객체로 이행하는 `Promise`.

* `fillLightMode`: 캡처 장치의 플래시 설정. `"auto"`, `"off"`, `"flash"` 중 하나를 사용할 수 있습니다.
* `imageHeight`: 원하는 이미지 크기의 높이를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, 사용자 에이전트는 이 값과 제일 가까운 높이를 사용합니다.
* `imageWidth`: 원하는 이미지 크기의 너비를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, 사용자 에이전트는 이 값과 제일 가까운 너비를 사용합니다.
* `redEyeReduction`: 적목 현상 감소 기능이 존재하는 경우, 사용할지 나타내는 불리언 값.
예제
--

다음 예제는 Chrome의 Image Capture / Photo Resolution Sample에서 가져온 코드로, `getPhotoCapabilities()`를 사용해 범위 입력 칸의 크기를 수정합니다. 또한 장치의 `MediaStream` (en-US)에서 가져온 `MediaStreamTrack` 객체를 사용해 `ImageCapture` 객체를 생성하는 부분도 포함하고 있습니다.


```js
const input = document.querySelector('input[type="range"]');

var imageCapture;

navigator.mediaDevices
  .getUserMedia({ video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;

    const track = mediaStream.getVideoTracks()[0];
    imageCapture = new ImageCapture(track);

    return imageCapture.getPhotoCapabilities();
  })
  .then((photoCapabilities) => {
    const settings = imageCapture.track.getSettings();

    input.min = photoCapabilities.imageWidth.min;
    input.max = photoCapabilities.imageWidth.max;
    input.step = photoCapabilities.imageWidth.step;

    return imageCapture.getPhotoSettings();
  })
  .then((photoSettings) => {
    input.value = photoSettings.imageWidth;
  })
  .catch((error) => console.log("Argh!", error.name || error));
```

명세
--

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-getphotosettings |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ImageCapture() 생성자
==================

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

구문
--


```js
const imageCapture = new ImageCapture(videoTrack);
```

### 매개변수

`videoTrack`

이미지를 가져올 때 사용할 `MediaStreamTrack`. 화상전화 스트림, 재생 중인 영화, 웹캠 스트림 등 모든 출처를 사용할 수 있습니다.

### 반환 값

지정한 비디오 트랙에서 정지 프레임을 캡처할 수 있는 `ImageCapture` 객체.

예제
--

다음 예제는 `MediaDevices.getUserMedia()` (en-US)을 사용해, `ImageCapture()` 생성자에 필요한 `MediaStreamTrack`을 가져오는 법을 보입니다.


```js
navigator.mediaDevices
  .getUserMedia({ video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;
    const track = mediaStream.getVideoTracks()[0];
    imageCapture = new ImageCapture(track);
  })
  .catch((error) => console.log(error));
```

명세
--

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-imagecapture |

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

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

`ImageCapture` 인터페이스의 **`grabFrame()`** 메서드는 `MediaStreamTrack`의 라이브 비디오에서 스냅샷을 찍고, 그 결과를 담은 `ImageBitmap` (en-US)으로 이행하는 `Promise`를 반환합니다.

구문
--


```js
const bitmapPromise = imageCapture.grabFrame();
```

### 반환 값

`ImageBitmap` (en-US) 객체로 이행하는 `Promise`.

예제
--

다음 예제는 Simple Image Capture 데모에서 가져온 것으로, `grabFrame()`이 반환한 `Promise`의 `ImageBitmap` (en-US)을 사용해 `<canvas>` 요소에 할당하는 방법을 보입니다. 코드를 짧게 유지하기 위해 `ImageCapture` 객체의 초기화 과정은 생략했습니다.


```js
var grabFrameButton = document.querySelector("button#grabFrame");
var canvas = document.querySelector("canvas");

grabFrameButton.onclick = grabFrame;

function grabFrame() {
  imageCapture
    .grabFrame()
    .then(function (imageBitmap) {
      console.log("Grabbed frame:", imageBitmap);
      canvas.width = imageBitmap.width;
      canvas.height = imageBitmap.height;
      canvas.getContext("2d").drawImage(imageBitmap, 0, 0);
      canvas.classList.remove("hidden");
    })
    .catch(function (error) {
      console.log("grabFrame() error: ", error);
    });
}
```

명세
--

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-grabframe |

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

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

`BaseAudioContext` 인터페이스의 `createPeriodicWave()` 메서드는 `PeriodicWave`를 생성하기 위해 사용되는데, 이는 `OscillatorNode` (en-US)의 출력을 형성하기 위해 사용될 수 있는 주기적인 파형을 정의하기 위해 사용됩니다.

구문
--


```js
var wave = AudioContext.createPeriodicWave(real, imag[, constraints]);
```

### 반환

`PeriodicWave`.

### 매개변수

`real`

코사인 항의 배열 (전통적으로 A 항).

`imag`

사인 항의 배열 (전통적으로 B 항).

`real` 과 `imag` 배열은 같은 길이를 가져야만 합니다. 그렇지 않으면 오류가 발생됩니다.

`constraints` Optional

정규화(normalization)가 비활성화되어야 하는지를 명시하는 dictionary 객체입니다 (만약 명시되지 않으면, 기본적으로 정규화는 활성화 됩니다.) 이것은 하나의 프로퍼티를 취합니다:\* `disableNormalization`: 만약 `true`로 설정되면, 정규화는 주기파에 대해 비활성화 됩니다. 기본값은 `false`입니다.


**참고:** 만약 정규화되면, 결과 파동은 최고 절대값(maximum absolute peak value) 1을 가지게 됩니다.

예제
--

다음의 예제는 단순한 사인파를 포함하는 `PeriodicWave` 객체를 생성하기 위한 `createPeriodicWave()`의 간단한 사용을 보여줍니다.


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

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

var wave = ac.createPeriodicWave(real, imag, { disableNormalization: true });

osc.setPeriodicWave(wave);

osc.connect(ac.destination);

osc.start();
osc.stop(2);
```


이는 정의에 의해 오직 기본음을 포함하는 소리가 사인파이기 때문에 작동합니다.

여기서, 우리는 두 값과 함께 `PeriodicWave`를 생성합니다. 첫번째 값은 oscillator가 시작하는 값인 DC 오프셋입니다. 여기서 0은 좋은데, 왜냐하면 우리는 곡선을 [-1.0; 1.0] 범위의 중간에서 시작하기를 원하기 때문입니다.

두번째와 그 다음의 값은 사인과 코사인 요소입니다. 여러분은 이것을 시간 도메인 값으로부터 주파수 도메인 값을 얻는 푸리에 변환의 결과로 생각할 수 있습니다. 여기서, `createPeriodicWave()`와 함께, 여러분은 주파수를 명시하고, 브라우저는 oscillator의 주파수에 대한 시간 도메인 버퍼를 얻기 위해 역 푸리에 변환을 수행합니다. 여기서, 우리는 오직 기본음의 전체 볼륨 (1.0)에서의 한 요소만을 설정했으므로, 우리는 사인파를 얻습니다.

 푸리에 변환의 계수는 *오름*차순으로 주어져야만 하고
 (예: 


(

a
+
b
i

)

e
i

,

(

c
+
d
i

)

e

2
i

,

(

f
+
g
i

)

e

3
i

 \left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} ,
 \left(f+gi\right)e^{3i} 


 등) 양이거나 음일 수 있습니다. 수동으로 이러한 계수들을 얻는 간단한 방법은 (최고의 방법은 아니지만) 그래프 계산기를 사용하는 것입니다.

명세
--

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createperiodicwave |

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

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

See also
--------

* Using the Web Audio API
AbstractRange.collapsed
=======================

`AbstractRange` (en-US)의 범위가 축소된 read-only 속성은 범위의 시작 위치와 끝 위치가 같을 경우 true를 반환합니다.

문법
--


```js
var isCollpased = range.collapsed;
```

### Value

범위가 축소된 경우 true인 `Boolean`값을 반환합니다. 축소된 범위는 시작 위치와 종료 위치가 동일하며, 문자 길이가 0인 범위입니다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-collapsed① |

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

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

`Storage` 인터페이스의 `length` 읽기 전용 속성은 `Storage` 객체에 저장된 데이터 항목의 수를 반환합니다.

구문
--


```js
length = storage.length;
```

### 반환 값

`Storage` 객체에 저장된 항목의 수.

예제
--

다음의 함수는 현재 도메인의 로컬 저장소에 세 개의 항목을 추가한 후 저장소 항목의 수를 반환합니다.


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "yellow");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "cats.png");

  return localStorage.length; // Should return 3
}
```


**참고:** 실제 사용 예제를 보시려면 저희의 Web Storage Demo를 방문하세요.

명세
--

| Specification |
| --- |
| HTML Standard # dom-storage-length-dev |

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

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

같이 보기
-----

* Web Storage API 사용하기 (en-US)
Storage.removeItem()
====================

`Storage` 인터페이스의 removeItem() 메소드에 키 이름을 파라미터로 전달하면 스토리지에서 해당 키를 삭제합니다.

문법
--


```js
storage.removeItem(keyName);
```

### 파라미터

***keyName***

삭제하고자 하는 키 이름(`DOMString`).

### 반환값

*반환값 없음.*

예제
--

아래의 함수는 로컬 스토리지에 3 개의 데이터 아이템을 생성한 후 그 중 하나를 삭제합니다.


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");

  localStorage.removeItem("image");
}
```


**참고:** 실 사용 예제는 Web Storage Demo를 참고하시기 바랍니다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-storage-removeitem-dev |

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

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

같이 보기
-----

Web Storage API 사용하기 (en-US)
Storage.key()
=============

`Storage` 인터페이스의 `key()` 메서드는 숫자 `n`이 전달되면 Storage의 `n`번째 key 이름을 반환합니다. key의 순서는 user-agent에 의해 정의되므로 이 순서에 의존성이 있어서는 안됩니다.

문법
--


```js
var aKeyName = storage.key(index);
```

### Parameters

*index*

반환받으려하는 key의 번호를 나타내는 정수. 이 정수는 0부터 시작하는 인덱스입니다.

### Return value

key 이름을 포함한 `DOMString` 입니다.

예제
--

다음 함수는 localStorage 의 key들을 반복합니다.


```js
function forEachKey(callback) {
  for (var i = 0; i < localStorage.length; i++) {
    callback(localStorage.key(i));
  }
}
```


다음 함수는 localStorage 의 key들을 반복하고 각 key에 설정된 값들을 가져옵니다.


```js
for (var i = 0; i < localStorage.length; i++) {
  console.log(localStorage.getItem(localStorage.key(i)));
}
```


**참고:** 실제로 쓰이는 예제를 보려면 우리의 Web Storage Demo 를 참조하세요.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-storage-key-dev |

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

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

See also
--------

Using the Web Storage API (en-US)
MediaDevices.enumerateDevices()
===============================

`MediaDevices`의 **`enumerateDevices()`** 메서드는 사용(또는 접근)이 가능한 미디어 입력장치나 출력장치들의 리스트를 가져옵니다. 예를 들면 마이크, 카메라, 헤드셋 등의 미디어 입/출력 장치 리스트를 불러오는 것 이죠. 이 메서드는 `Promise` (en-US)를 반환하는데, 이 Promise가 resolve되면 장치(device)정보가 들어있는 `MediaDeviceInfo` (en-US) 배열(array)을 확인할 수 있습니다.

Syntax (구문)
-----------


```js
var enumeratorPromise = navigator.mediaDevices.enumerateDevices();
```

### Return value ( 반환값 )

반환받는 `Promise` (en-US)는 모든 장치 리스트를 가져오는 것에 성공하면 `MediaDeviceInfo` (en-US)객체 배열(array)를 받습니다. 배열에 들어있는 객체들은 각각의 장치정보를 가지고 있습니다.

장치 리스트를 가져오는 것이 실패하면, promise는 rejected처리 됩니다.

Example (예제)
------------

`enumerateDevices()`을 사용하는 방법을 알아봅시다. 아래는 장치 종류와 device IDs (장치 아이디) (en-US)를 반환하며, 레이블이 있을 경우 레이블도 보여주는 간단한 코드 입니다.


```js
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices()를 지원하지 않습니다.");
  return;
}

// 카메라와 마이크 리스트

navigator.mediaDevices
  .enumerateDevices()
  .then(function (devices) {
    devices.forEach(function (device) {
      console.log(
        device.kind + ": " + device.label + " id = " + device.deviceId,
      );
    });
  })
  .catch(function (err) {
    console.log(err.name + ": " + err.message);
  });
```


위 코드를 실행하면 아래와 같은 결과를 볼 수 있을 것입니다.:
```

videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```


또는 하나 이상의 `MediaStream` (en-US)이 사용 가능하거나 접근(사용권한)이 가능할 경우:
```

videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```

명세서
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediadevices-enumeratedevices |

Browser compatibility (브라우저 호환)
-------------------------------

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

See also
--------

* `navigator.mediaDevices.getUserMedia()` (en-US)
* WebRTC (en-US) - the introductory page to the API
* MediaStream API (en-US) - the API for the media stream objects
* Taking webcam photos (en-US) - a tutorial on using `getUserMedia()` for taking photos rather than video.
Text.splitText()
================

**`Text.splitText()`** 메소드는 `Text` 노드를 지정된 오프셋에서 두 노드로 분리합니다. 두 노드는 sibling으로써 트리에 유지됩니다.

분리한 이후, 현재 노드는 지정된 오프셋 지점까지의 모든 컨텐츠를 포함하며, 새롭게 생성된 같은 타입의 노드는 남아있는 텍스트를 포함합니다. 새롭게 생성된 노드는 호출자에게 반환됩니다. 기존 노드가 부모를 갖고 있다면, 새 노드는 기존 노드의 다음 sibling으로 삽입됩니다. 기존 노드의 길이와 오프셋이 동일하다면, 새롭게 생성된 노드는 데이터를 갖지 않습니다.

분리된 텍스트 노드는 `Node.normalize()` 메소드를 사용해 이어붙혀질 수 있습니다.

지정된 오프셋이 음수이거나 노드의 텍스트의 16 비트 단위의 수보다 크면 `INDEX_SIZE_ERR` 값을 갖는 `DOMException` (en-US) 을 throw됩니다. `NO_MODIFICATION_ALLOWED_ERR` 값을 갖는 `DOMException` (en-US) 은 노드가 읽기 전용일 때 throw됩니다.

문법
--


```js
replacementNode = textnode.splitText(offset);
```

예제
--

이 예제에서 `<p>` 텍스트 노드는 두 텍스트 노드로 분리되며 그 사이에 `<span>` 이 삽입됩니다.


```html
<body>
  <p id="p">foobar</p>

  <script type="text/javascript">
 var p = document.getElementById("p");
 var textnode = p.firstChild;

 // foo 와 bar 사이를 분리
 var replacementNode = textnode.splitText(3);

 // ' span contents ' 를 포함하는 span을 생성
 var span = document.createElement("span");
 span.appendChild(document.createTextNode(" span contents "));

 // 'bar' 앞에 span을 추가
 p.insertBefore(span, replacementNode);

 // 결과: <p id="p">foo<span> span contents </span>bar</p>
 </script>
</body>
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-text-splittext① |

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

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

함께 보기
-----

* 이 메소드가 속한 `Text` 인터페이스.
* 반대되는 메소드: `Node.normalize`.
Text()
======

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

**`Text()`** 생성자는 옵션인 파라미터로 주어진 문자형 컨텐츠인 `DOMString` 으로 새롭게 생성된 `Text` 객체를 반환합니다.

문법
--


```js
text1 = new Text(); // 빈 텍스트 노드 생성
text2 = new Text("텍스트 노드입니다");
```

예제
--


```js
text = new Text("Test");
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-text-text① |

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

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

함께 보기
-----

* DOM 인터페이스 목차.