diff options
Diffstat (limited to 'files/ru/web/api')
75 files changed, 4339 insertions, 1886 deletions
diff --git a/files/ru/web/api/audiocontext/createpanner/index.html b/files/ru/web/api/baseaudiocontext/createpanner/index.html index 0a4d5db32b..28e5bdc0f7 100644 --- a/files/ru/web/api/audiocontext/createpanner/index.html +++ b/files/ru/web/api/baseaudiocontext/createpanner/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createPanner() -slug: Web/API/AudioContext/createPanner +slug: Web/API/BaseAudioContext/createPanner translation_of: Web/API/BaseAudioContext/createPanner +original_slug: Web/API/AudioContext/createPanner --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/ru/web/api/audiocontext/currenttime/index.html b/files/ru/web/api/baseaudiocontext/currenttime/index.html index 51370701f4..ed77cb9ec9 100644 --- a/files/ru/web/api/audiocontext/currenttime/index.html +++ b/files/ru/web/api/baseaudiocontext/currenttime/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.currentTime -slug: Web/API/AudioContext/currentTime +slug: Web/API/BaseAudioContext/currentTime translation_of: Web/API/BaseAudioContext/currentTime +original_slug: Web/API/AudioContext/currentTime --- <p>{{ APIRef("AudioContext") }}</p> <div> diff --git a/files/ru/web/api/audiocontext/decodeaudiodata/index.html b/files/ru/web/api/baseaudiocontext/decodeaudiodata/index.html index faae982eae..a04a0df083 100644 --- a/files/ru/web/api/audiocontext/decodeaudiodata/index.html +++ b/files/ru/web/api/baseaudiocontext/decodeaudiodata/index.html @@ -1,9 +1,10 @@ --- title: AudioContext.decodeAudioData() -slug: Web/API/AudioContext/decodeAudioData +slug: Web/API/BaseAudioContext/decodeAudioData tags: - API translation_of: Web/API/BaseAudioContext/decodeAudioData +original_slug: Web/API/AudioContext/decodeAudioData --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/ru/web/api/canvas_api/tutorial/применение_стилей_и_цветов/index.html b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index 2c9eeaae78..3dc5e6c8f0 100644 --- a/files/ru/web/api/canvas_api/tutorial/применение_стилей_и_цветов/index.html +++ b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -1,7 +1,8 @@ --- title: Применение стилей и цветов -slug: Web/API/Canvas_API/Tutorial/Применение_стилей_и_цветов +slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +original_slug: Web/API/Canvas_API/Tutorial/Применение_стилей_и_цветов --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div> diff --git a/files/ru/web/api/canvas_api/tutorial/основы_анимации/index.html b/files/ru/web/api/canvas_api/tutorial/basic_animations/index.html index a47b8b734e..e4595cbbd4 100644 --- a/files/ru/web/api/canvas_api/tutorial/основы_анимации/index.html +++ b/files/ru/web/api/canvas_api/tutorial/basic_animations/index.html @@ -1,6 +1,6 @@ --- title: Простые анимации -slug: Web/API/Canvas_API/Tutorial/Основы_анимации +slug: Web/API/Canvas_API/Tutorial/Basic_animations tags: - HTML - HTML5 @@ -9,6 +9,7 @@ tags: - Средний уровень - Холст translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +original_slug: Web/API/Canvas_API/Tutorial/Основы_анимации --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</div> diff --git a/files/ru/web/api/canvas_api/tutorial/композиции/index.html b/files/ru/web/api/canvas_api/tutorial/compositing/index.html index 264cc7e544..bac6986141 100644 --- a/files/ru/web/api/canvas_api/tutorial/композиции/index.html +++ b/files/ru/web/api/canvas_api/tutorial/compositing/index.html @@ -1,9 +1,10 @@ --- title: Композиция и обрезка -slug: Web/API/Canvas_API/Tutorial/Композиции +slug: Web/API/Canvas_API/Tutorial/Compositing tags: - канвас translation_of: Web/API/Canvas_API/Tutorial/Compositing +original_slug: Web/API/Canvas_API/Tutorial/Композиции --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div> diff --git a/files/ru/web/api/canvas_api/tutorial/рисование_фигур/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html index f6ca6c23ef..046e249975 100644 --- a/files/ru/web/api/canvas_api/tutorial/рисование_фигур/index.html +++ b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -1,7 +1,8 @@ --- title: Рисование фигур с помощью canvas -slug: Web/API/Canvas_API/Tutorial/Рисование_фигур +slug: Web/API/Canvas_API/Tutorial/Drawing_shapes translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> diff --git a/files/ru/web/api/canvas_api/tutorial/рисование_текста/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html index 90915c5e09..c25c49be30 100644 --- a/files/ru/web/api/canvas_api/tutorial/рисование_текста/index.html +++ b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html @@ -1,6 +1,6 @@ --- title: Рисование текста -slug: Web/API/Canvas_API/Tutorial/Рисование_текста +slug: Web/API/Canvas_API/Tutorial/Drawing_text tags: - Canvas - Графика @@ -8,6 +8,7 @@ tags: - Рукводовство - мануал translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +original_slug: Web/API/Canvas_API/Tutorial/Рисование_текста --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div> diff --git a/files/ru/web/api/canvas_api/tutorial/использование_изображений/index.html b/files/ru/web/api/canvas_api/tutorial/using_images/index.html index 3ce4b8384e..d1addb4b7d 100644 --- a/files/ru/web/api/canvas_api/tutorial/использование_изображений/index.html +++ b/files/ru/web/api/canvas_api/tutorial/using_images/index.html @@ -1,9 +1,10 @@ --- title: Использование изображений -slug: Web/API/Canvas_API/Tutorial/Использование_изображений +slug: Web/API/Canvas_API/Tutorial/Using_images tags: - Графика translation_of: Web/API/Canvas_API/Tutorial/Using_images +original_slug: Web/API/Canvas_API/Tutorial/Использование_изображений --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Трансформации")}}</div> diff --git a/files/ru/web/api/randomsource/getrandomvalues/index.html b/files/ru/web/api/crypto/getrandomvalues/index.html index c59f5dde54..20f900e9bb 100644 --- a/files/ru/web/api/randomsource/getrandomvalues/index.html +++ b/files/ru/web/api/crypto/getrandomvalues/index.html @@ -1,12 +1,13 @@ --- title: RandomSource.getRandomValues() -slug: Web/API/RandomSource/getRandomValues +slug: Web/API/Crypto/getRandomValues tags: - АПИ - Криптография - Справка - метод translation_of: Web/API/Crypto/getRandomValues +original_slug: Web/API/RandomSource/getRandomValues --- <p>{{APIRef("Web Crypto API")}}</p> diff --git a/files/ru/web/api/css_object_model/ориентация_экрана/index.html b/files/ru/web/api/css_object_model/managing_screen_orientation/index.html index a6b16cba4a..198fae2acb 100644 --- a/files/ru/web/api/css_object_model/ориентация_экрана/index.html +++ b/files/ru/web/api/css_object_model/managing_screen_orientation/index.html @@ -1,11 +1,12 @@ --- title: Разбираемся с ориентацией экрана -slug: Web/API/CSS_Object_Model/ориентация_экрана +slug: Web/API/CSS_Object_Model/Managing_screen_orientation tags: - Ориентация экрана - Положение экрана - Руководство translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation +original_slug: Web/API/CSS_Object_Model/ориентация_экрана --- <p>{{DefaultAPISidebar("Screen Orientation API")}}{{SeeCompatTable}}</p> diff --git a/files/ru/web/api/document/createelement/index.html b/files/ru/web/api/document/createelement/index.html new file mode 100644 index 0000000000..f233ecf007 --- /dev/null +++ b/files/ru/web/api/document/createelement/index.html @@ -0,0 +1,83 @@ +--- +title: document.createElement +slug: Web/API/Document/createElement +tags: + - DOM + - Gecko +translation_of: Web/API/Document/createElement +original_slug: DOM/document.createElement +--- +<p>{{ ApiRef() }}</p> + +<h3 id=".D0.9E.D0.B1.D1.89.D0.B0.D1.8F_.D0.B8.D0.BD.D1.84.D0.BE.D1.80.D0.BC.D0.B0.D1.86.D0.B8.D1.8F" name=".D0.9E.D0.B1.D1.89.D0.B0.D1.8F_.D0.B8.D0.BD.D1.84.D0.BE.D1.80.D0.BC.D0.B0.D1.86.D0.B8.D1.8F">Общая информация</h3> + +<p>В HTML-документах создает элемент c тем тегом, что указан в аргументе или <code>HTMLUnknownElement</code>, если имя тега не распознаётся.</p> + +<p>В XUL-документах создает указанный в аргументе элемент XUL.</p> + +<p>В остальных случаях создаёт элемент с нулевым <span id="result_box" lang="ru"><span class="hps"><em>NamespaceURI</em>.</span></span></p> + +<h3 id=".D0.A1.D0.B8.D0.BD.D1.82.D0.B0.D0.BA.D1.81.D0.B8.D1.81" name=".D0.A1.D0.B8.D0.BD.D1.82.D0.B0.D0.BA.D1.81.D0.B8.D1.81">Параметры</h3> + +<pre class="eval"><var>var element</var> = <var>document</var>.createElement(<var>tagName, [options]</var>); +</pre> + +<ul> + <li><code>element</code> — созданый объект <a href="../Web/API/Element">элемента</a>.</li> + <li><code>tagName</code> — строка, указывающая элемент какого типа должен быть создан. <a href="ru/DOM/element.nodeName">nodeName</a> создается и инициализируется со значением <code>tagName</code>.</li> + <li> + <p><code>options</code> — необязательный параметр, объект <code>ElementCreationOptions</code>, который может содержать только поле <code>is</code>, указывающее имя пользовательского элемента, созданного с помощью <code>customElements.define()</code> (см. <a href="/ru/docs/Web/Web_Components">Веб-компоненты</a>).</p> + </li> +</ul> + +<h3 id=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80.D1.8B" name=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80.D1.8B">Пример</h3> + +<p>Данный пример создает новый элемент <code><div></code> и вставляет его перед элементом с идентификатором <code>org_div1</code>:</p> + +<pre class="brush: js"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>||Работа с элементами||<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">> +</span></span><div><h1>Привет!</h1></div> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span>'org_div1'</span><span class="punctuation token">></span></span>Текст выше сгенерирован автоматически.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">> + +<script> +<code class="language-html"><code class="language-javascript"> document.body.onload = addElement; +</code></code> var my_div = newDiv = null; + + function addElement() { + + // Создаем новый элемент div + // и добавляем в него немного контента + + var newDiv = document.createElement("div"); + newDiv.innerHTML = "<h1>Привет!</h1>"; + + // Добавляем только что созданый элемент в дерево DOM + + my_div = document.getElementById("org_div1"); + document.body.insertBefore(newDiv, my_div); + } +</script> +</html></span></span> +</code></pre> + +<h3 id=".D0.97.D0.B0.D0.BC.D0.B5.D1.87.D0.B0.D0.BD.D0.B8.D1.8F" name=".D0.97.D0.B0.D0.BC.D0.B5.D1.87.D0.B0.D0.BD.D0.B8.D1.8F">Заметки</h3> + +<p>Если существуют атрибуты со значениями по умолчанию, атрибуты узлов предоставляющие их создаются автоматически и применяются к элементу.</p> + +<p>Для создания элементов с заданым пространством имен используйте метод <a href="ru/DOM/document.createElementNS">createElementNS</a>.</p> + +<p>Реализация <code>createElement </code>в Gecko не соответствует DOM спецификации для XUL и XHTML документов: <code>localName</code> и <code>namespaceURI</code> не устанавливаются в <code>null</code> в созданном документе. Смотрите {{ Bug(280692) }} для подробностей.</p> + +<p>Для обратной совместимости с предыдущими версиями спецификации пользовательских элементов некоторые браузеры позволяют передавать здесь строку вместо объекта, где значением строки является имя тега пользовательского элемента.</p> + +<h3 id=".D0.A1.D0.BF.D0.B5.D1.86.D0.B8.D1.84.D0.B8.D0.BA.D0.B0.D1.86.D0.B8.D0.B8" name=".D0.A1.D0.BF.D0.B5.D1.86.D0.B8.D1.84.D0.B8.D0.BA.D0.B0.D1.86.D0.B8.D0.B8">Спецификации</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547">DOM 2 Модуль: createElement</a></p> + +<p>{{ languages( { "fr": "fr/DOM/document.createElement", "it": "it/DOM/document.createElement", "pl": "pl/DOM/document.createElement" } ) }}</p> diff --git a/files/ru/web/api/document/images/index.html b/files/ru/web/api/document/images/index.html new file mode 100644 index 0000000000..420dd40024 --- /dev/null +++ b/files/ru/web/api/document/images/index.html @@ -0,0 +1,30 @@ +--- +title: document.images +slug: Web/API/Document/images +tags: + - DOM + - JavaScript +translation_of: Web/API/Document/images +original_slug: DOM/document.images +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Кратко об обьекте</h3> +<p><code>document.images</code> возвращает коллекцию <a href="/ru/Web/API/HTMLImageElement" title="en/DOM/Image">изображений</a> в текущем HTML документе.</p> +<h3 id="Syntax" name="Syntax">Синтаксис</h3> +<pre class="eval"><em>var htmlCollection</em> = document.images; +</pre> +<h3 id="Example" name="Example">Пример</h3> +<pre class="eval">var images = document.images; + +for(var i = 0; i < images.length; i++) { + if(images[i].src == "banner.gif") { + alert('Баннер найден!'); + }; +}; +</pre> +<h3 id="Notes" name="Notes">Примечания</h3> +<p><code>document.images.length</code> — возвращает количество изображений на странице.</p> +<p><code>document.images</code> является частью DOM HTML, и работает только в HTML документах.</p> +<h3 id="Specification" name="Specification">Спецификация</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117">DOM Level 2 HTML: HTMLDocument.images</a></p> +<p>{{ languages( { "en": "en/DOM/document.images", "fr": "fr/DOM/document.images", "pl": "pl/DOM/document.images","ru":"ru/DOM/document.images" } ) }}</p> diff --git a/files/ru/web/api/document/readystatechange_event/index.html b/files/ru/web/api/document/readystatechange_event/index.html new file mode 100644 index 0000000000..70ea3f778a --- /dev/null +++ b/files/ru/web/api/document/readystatechange_event/index.html @@ -0,0 +1,91 @@ +--- +title: readystatechange +slug: Web/API/Document/readystatechange_event +tags: + - события +translation_of: Web/API/Document/readystatechange_event +original_slug: Web/Events/readystatechange +--- +<p>{{ApiRef}}</p> + +<p>Событие <code>readystatechange</code> срабатывает, когда изменяется атрибут документа <a href="/en-US/docs/DOM/document.readyState"><code>readyState</code></a>.</p> + +<h2 id="Основная_информация">Основная информация</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness">HTML5</a></dd> + <dt style="margin: 0px 0px 0px 120px;"> </dt> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Всплывает</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Цель</dt> + <dd style="margin: 0 0 0 120px;">Document</dd> + <dt style="float: left; text-align: right; width: 120px;">Действие по умолчаанию</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Свойство</th> + <th scope="col">Тип</th> + <th scope="col">Описание</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Цель события (Самая верхняя цель в дереве DOM).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Тип события.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Всплывает ли событие.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Возможно ли отменить событие.</td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: js">document.readyState === "complete"; +// true + + +// Альтернатива DOMContentLoaded +document.onreadystatechange = function () { + if (document.readyState === "interactive") { + initApplication(); + } +} +</pre> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>Данное событие давно поддерживается Internet Explorer и может быть использовано в качестве альтернативы событию <code><a href="/ru/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> (см. примечание [2] в разделе <a href="/ru/docs/Web/Events/DOMContentLoaded#Поддержка_браузерами">Поддержка браузерами</a>).</p> + +<h2 id="Связанные_события">Связанные события</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/ru/web/api/document_object_model/events/index.html b/files/ru/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..c5995b792e --- /dev/null +++ b/files/ru/web/api/document_object_model/events/index.html @@ -0,0 +1,81 @@ +--- +title: Events and the DOM +slug: Web/API/Document_Object_Model/Events +translation_of: Web/API/Document_Object_Model/Events +original_slug: DOM/DOM_Reference/Events +--- +<p>Вступление</p> + +<h2 id="Вступление">Вступление</h2> + +<p>В этой главе описывается модель событий DOM. <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Топ скрыть</a> Интерфейс сам по себе описано, а также интерфейсы для регистрации событий на узлах в DOM, Также а <a href="/ru/docs/Web/API/EventTarget.addEventListener">слушатели события</a> Главного , Также а Несколько больше Примеры, которые показывают, как Различные интерфейсы связаны друг события Главного с другом.</p> + +<p>Существует отличная диаграмма, которая четко объясняет события трех этапов через DOM в проекте <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events</a> .</p> + +<p>Также см. <a href="/ru/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Пример 5: Распространение событий</a> в главе «Примеры» для более подробного примера.</p> + +<h2 id="Регистрация_слушателей_событий">Регистрация слушателей событий</h2> + +<p>Есть 3 способа регистрации обработанных событий для элемента DOM.</p> + +<h3 id="EventTarget.addEventListener"><a href="/ru/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3> + +<pre class="brush: js">// Предполагая, что myButton является элементом кнопки +myButton.addEventListener ('click', greet, false); +function greet (event) { + // распечатать и посмотреть на объект события + // всегда печатать аргументы в случае пропуска любых других аргументов + console.log ('greet:', arguments); + оповещение («Привет, мир»); +} +</pre> + +<p>Это метод, который вы должны использовать на современных веб-страницах.</p> + +<p>Примечание. Internet Explorer 6-8 не поддерживает этот метод, предлагая аналогичный {{domxref ("EventTarget.attachEvent")}} API. Для кросс-браузерной совместимости используйте одну из множества доступных библиотек JavaScript.</p> + +<p>Дополнительную информацию можно найти на справочной странице {{domxref ("EventTarget.addEventListener")}}.</p> + +<h3 id="Атрибут_HTML"><a href="/ru/docs/Web/Guide/HTML/Event_attributes">Атрибут HTML</a></h3> + +<pre class="brush: html"><button onclick = "alert ('Hello world!')"> +</pre> + +<p>Код JavaScript в атрибуте передается объекту Event через <code>event</code>параметр. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML</a> .</p> + +<p>Этого пути следует избегать. Это делает разметку больше и менее читаемой. Проблемы содержания / структуры и поведения плохо разделены, что затрудняет поиск ошибки.</p> + +<h3 id="Свойства_элемента_DOM">Свойства элемента DOM</h3> + +<pre class="brush: js">// Предполагая, что myButton является элементом кнопки +<code>myButton.onclick = function(event){alert('Hello world');};</code> +</pre> + +<p>Функция может быть определена для получения <code>event</code>параметра. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML</a> .</p> + +<p>Проблема этого метода в том, что для каждого элемента и для каждого события может быть установлен только один обработчик.</p> + +<h2 id="Доступ_к_интерфейсам_событий">Доступ к интерфейсам событий</h2> + +<p>Обработчики событий могут быть присоединены к различным объектам, включая элементы DOM, документ, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects">объект окна</a> и т. Д. Когда происходит событие, объект события создается и последовательно передается слушателям события.</p> + +<p>Интерфейс {{domxref ("Event")}} доступен из функции-обработчика через объект события, переданный в качестве первого аргумента. В следующем простом примере показано, как объект события передается в функцию-обработчик события и может использоваться из одной такой функции.</p> + +<pre class="brush: js"><code>function print(evt) {</code> + // параметру evt автоматически назначается объект события + // позаботимся о различиях в console.log и alert + <code>console.log('print:', evt); + alert(evt); +}</code> +// любая функция должна иметь подходящее имя, это то, что называется семантическим +<code>table_el.onclick = print; </code> +</pre> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/ru/docs/Web/API/Document_Object_Model">DOM Ссылка</a></li> + <li><a href="/ru/docs/Web/API/Document_Object_Model/Introduction">Введение в DOM</a></li> + <li><a href="/ru/docs/Web/API/Document_Object_Model/Events">События и ДОМ</a></li> + <li><a href="/ru/docs/Web/API/Document_Object_Model/Examples">Примеры</a></li> +</ul> diff --git a/files/ru/web/api/document_object_model/examples/index.html b/files/ru/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..b590dec1ae --- /dev/null +++ b/files/ru/web/api/document_object_model/examples/index.html @@ -0,0 +1,383 @@ +--- +title: Examples of web and XML development using the DOM +slug: Web/API/Document_Object_Model/Examples +translation_of: Web/API/Document_Object_Model/Examples +original_slug: DOM/DOM_Reference/Examples +--- +<p>В этой главе представлены более длинные примеры разработки веб-сайтов и XML с использованием DOM. По возможности, примеры используют общие API, трюки и шаблоны в JavaScript для управления объектом документа.</p> + +<h2 id="Example_1_height_and_width" name="Example_1:_height_and_width">Пример 1: высота и ширина</h2> + +<p>В следующем примере показано использование свойств высоты и ширины для изображений разных размеров:<br> + </p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>width/height example</title> +<script> +function init() { + var arrImages = new Array(3); + + arrImages[0] = document.getElementById("image1"); + arrImages[1] = document.getElementById("image2"); + arrImages[2] = document.getElementById("image3"); + + var objOutput = document.getElementById("output"); + var strHtml = "<ul>"; + + for (var i = 0; i < arrImages.length; i++) { + strHtml += "<li>image" + (i+1) + + ": height=" + arrImages[i].height + + ", width=" + arrImages[i].width + + ", style.height=" + arrImages[i].style.height + + ", style.width=" + arrImages[i].style.width + + "<\/li>"; + } + + strHtml += "<\/ul>"; + + objOutput.innerHTML = strHtml; +} +</script> +</head> +<body onload="init();"> + +<p>Image 1: no height, width, or style + <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> +</p> + +<p>Image 2: height="50", width="500", but no style + <img id="image2" + src="http://www.mozilla.org/images/mozilla-banner.gif" + height="50" width="500"> +</p> + +<p>Image 3: no height, width, but style="height: 50px; width: 500px;" + <img id="image3" + src="http://www.mozilla.org/images/mozilla-banner.gif" + style="height: 50px; width: 500px;"> +</p> + +<div id="output"> </div> +</body> +</html> +</pre> + +<h2 id="Example_2_Image_Attributes" name="Example_2:_Image_Attributes">Пример 2: Аттрибуты Изображения</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Modifying an image border</title> + +<script> +function setBorderWidth(width) { + document.getElementById("img1").style.borderWidth = width + "px"; +} +</script> +</head> + +<body> +<p> + <img id="img1" + src="image1.gif" + style="border: 5px solid green;" + width="100" height="100" alt="border test"> +</p> + +<form name="FormName"> + <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /> + <input type="button" value="Make border 5px-wide" onclick="setBorderWidth(5);" /> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_3_Manipulating_Styles" name="Example_3:_Manipulating_Styles">Пример 3: Управление Стилями</h2> + +<p>В этом простом примере, некоторые базовые свойства стиля элемента абзаца HTML доступны с помощью объекта стиля элемента и свойств стиля CSS этого объекта, который можно получить и установить из DOM. В этом случае вы напрямую управляете отдельными стилями. В следующем примере (см. Пример 4), вы можете использовать таблицы стилей и их правила для изменения стилей для целых документов.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Changing color and font-size example</title> + +<script> +function changeText() { + var p = document.getElementById("pid"); + + p.style.color = "blue" + p.style.fontSize = "18pt" +} +</script> +</head> +<body> + +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> + +<form> + <p><input value="rec" type="button" onclick="changeText();" /></p> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_4_Using_Stylesheets" name="Example_4:_Using_Stylesheets">Пример 4: Использование Стилей</h2> + +<p>Свойство styleSheets объекта документа возвращает список таблиц стилей, которые были загружены в этот документ. Вы можете получить доступ к этим таблицам стилей и их правилам индивидуально, используя объекты таблицы стилей, стилей и CSS правил объекта, как показано в этом примере, который выводит все селектора правил стиля в консоль.</p> + +<pre class="brush:js">var ss = document.styleSheets; + +for(var i = 0; i < ss.length; i++) { + for(var j = 0; j < ss[i].cssRules.length; j++) { + dump( ss[i].cssRules[j].selectorText + "\n" ); + } +}</pre> + +<p>Для документа с единой таблицей стилей, в которой определены следующие три правила:</p> + +<pre class="brush:css">body { background-color: darkblue; } +p { font-face: Arial; font-size: 10pt; margin-left: .125in; } +#lumpy { display: none; } +</pre> + +<p>Этот скрипт выводит следующее:</p> + +<pre>BODY +P +#LUMPY +</pre> + +<h2 id="Example_5_Event_Propagation" name="Example_5:_Event_Propagation">Пример 5: Распространение Событий</h2> + +<p>Этот пример демонстрирует, как события срабатывают и обрабатываются в DOM очень простым путём. Когда загружается BODY в составе HTML-документа, обработчик событий регистрируется в верхней строке таблицы TABLE. Обработчик событий реагирует на событие запуском функции stopEvent, изменяющей значение в нижней ячейке.</p> + +<p>Однако, stopEvent также вызывает метод объекта событий, {{domxref("event.stopPropagation")}}, что препятствует дальнейшему всплытию события в DOM. Обратите внимание, что сама таблица имеет {{domxref("element.onclick","onclick")}} обработчик событий, который должен отображать сообщение при нажатии на таблицу. Но метод stopEvent метод прекратил распространение, и поэтому после обновления данных в таблице фаза события эффективно завершается, и отображается окно предупреждения для подтверждения.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Event Propagation</title> + +<style> +#t-daddy { border: 1px solid red } +#c1 { background-color: pink; } +</style> + +<script> +function stopEvent(ev) { + c2 = document.getElementById("c2"); + c2.innerHTML = "hello"; + + // this ought to keep t-daddy from getting the click. + ev.stopPropagation(); + alert("event propagation halted."); +} + +function load() { + elem = document.getElementById("tbl1"); + elem.addEventListener("click", stopEvent, false); +} +</script> +</head> + +<body onload="load();"> + +<table id="t-daddy" onclick="alert('hi');"> + <tr id="tbl1"> + <td id="c1">one</td> + </tr> + <tr> + <td id="c2">two</td> + </tr> +</table> + +</body> +</html> +</pre> + +<h2 id="Example_6_getComputedStyle" name="Example_6:_getComputedStyle">Пример 6: getComputedStyle</h2> + +<p>Этот пример показывает как {{domxref("window.getComputedStyle")}} метод может использоваться для получения стилей элемента, которые не заданы с помощью атрибута style или с помощью JavaScript (e.g., <code>elt.style.backgroundColor="rgb(173, 216, 230)"</code>). Эти последние типы стилей можно получить с помощью более прямых {{domxref("element.style", "elt.style")}} свойств, которые указаны в <a href="/en-US/docs/Web/CSS/Reference">DOM CSS Properties List</a>.</p> + +<p>getComputedStyle () возвращает объект ComputedCSSStyleDeclaration, свойства индивидуального стиля которого могут ссылаться на метод getPropertyValue () этого объекта, как показано в следующем примере документа.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> + +<title>getComputedStyle example</title> + +<script> +function cStyles() { + var RefDiv = document.getElementById("d1"); + var txtHeight = document.getElementById("t1"); + var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); + + txtHeight.value = h_style; + + var txtWidth = document.getElementById("t2"); + var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); + + txtWidth.value = w_style; + + var txtBackgroundColor = document.getElementById("t3"); + var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color"); + + txtBackgroundColor.value = b_style; +} +</script> + +<style> +#d1 { + margin-left: 10px; + background-color: rgb(173, 216, 230); + height: 20px; + max-width: 20px; +} +</style> + +</head> + +<body> + +<div id="d1">&nbsp;</div> + +<form action=""> + <p> + <button type="button" onclick="cStyles();">getComputedStyle</button> + height<input id="t1" type="text" value="1" /> + max-width<input id="t2" type="text" value="2" /> + bg-color<input id="t3" type="text" value="3" /> + </p> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_7_Displaying_Event_Object_Properties" name="Example_7:_Displaying_Event_Object_Properties">Пример 7: Отображение Свойств Событий Объекта</h2> + + + +<p>В этом примере используются методы DOM для отображения всех свойств объекта {{domxref ("window.onload")}} {{domxref ("event")}} и их значений в таблице. Он также показывает полезный метод использования цикла for..in для итерации по свойствам объекта для получения их значений.</p> + +<p>Свойства объектов событий сильно различаются между браузерами, WHATWG DOM Standard перечисляет стандартные свойства, однако многие браузеры значительно расширили их.</p> + +<p>Поместите следующий код в пустой текстовый файл и загрузите его в различные браузеры, вы будете удивлены различным количеством и именами свойств. Вы также можете добавить некоторые элементы на страницу и вызвать эту функцию из разных обработчиков событий.</p> + + + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>Show Event properties</title> + +<style> +table { border-collapse: collapse; } +thead { font-weight: bold; } +td { padding: 2px 10px 2px 10px; } + +.odd { background-color: #efdfef; } +.even { background-color: #ffffff; } +</style> + +<script> + +function showEventProperties(e) { + function addCell(row, text) { + var cell = row.insertCell(-1); + cell.appendChild(document.createTextNode(text)); + } + + var e = e || window.event; + document.getElementById('eventType').innerHTML = e.type; + + var table = document.createElement('table'); + var thead = table.createTHead(); + var row = thead.insertRow(-1); + var lableList = ['#', 'Property', 'Value']; + var len = lableList.length; + + for (var i=0; i<len; i++) { + addCell(row, lableList[i]); + } + + var tbody = document.createElement('tbody'); + table.appendChild(tbody); + + for (var p in e) { + row = tbody.insertRow(-1); + row.className = (row.rowIndex % 2)? 'odd':'even'; + addCell(row, row.rowIndex); + addCell(row, p); + addCell(row, e[p]); + } + + document.body.appendChild(table); +} + +window.onload = function(event){ + showEventProperties(event); +} +</script> +</head> + +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> + +</html> +</pre> + +<h2 id="Example_8_Using_the_DOM_Table_Interface" name="Example_8:_Using_the_DOM_Table_Interface">Пример 8: Использование интерфейса таблицы DOM</h2> + + + +<p>Интерфейс DOM HTMLTableElement предоставляет некоторые удобные методы для создания и управления таблицами. Два часто используемых метода: {{domxref ("HTMLTableElement.insertRow")}} и {{domxref ("tableRow.insertCell")}}.</p> + +<p>Чтобы добавить строку и некоторые ячейки в существующую таблицу:</p> + + + +<pre class="brush:html"><table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> + +<script> +var table = document.getElementById('table0'); +var row = table.insertRow(-1); +var cell, + text; + +for (var i = 0; i < 2; i++) { + cell = row.insertCell(-1); + text = 'Row ' + row.rowIndex + ' Cell ' + i; + cell.appendChild(document.createTextNode(text)); +} +</script> +</pre> + +<h3 id="Notes" name="Notes">Заметки</h3> + +<ul> + <li>Свойство таблицы {{domxref ("element.innerHTML", "innerHTML")}} никогда не должно использоваться для изменения таблицы, хотя вы можете использовать ее для записи всей таблицы или содержимого ячейки.</li> + <li>Если для создания строк и ячеек используются методы DOM Core {{domxref ("document.createElement")}} и {{domxref ("Node.appendChild")}}, IE требует, чтобы они были добавлены к элементу tbody, тогда как другие браузеры позволят добавлять к элементу таблицы (строки будут добавлены к последнему элементу tbody).</li> + <li>Существует ряд других методов, относящихся к интерфейсу таблицы, которые могут использоваться для создания и изменения таблиц.</li> +</ul> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> diff --git a/files/ru/web/api/document_object_model/index.html b/files/ru/web/api/document_object_model/index.html new file mode 100644 index 0000000000..a1546eb2a4 --- /dev/null +++ b/files/ru/web/api/document_object_model/index.html @@ -0,0 +1,388 @@ +--- +title: Руководство по DOM +slug: Web/API/Document_Object_Model +tags: + - DOM + - DOM Reference + - DOM интерфейс + - Intermediate + - Руководство +translation_of: Web/API/Document_Object_Model +original_slug: DOM/DOM_Reference +--- +<p><strong>Объектная Модель Документа (<em>DOM</em>)</strong> является программным интерфейсом для HTML, XML и SVG документов. Это обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания. DOM обеспечивает представление документа в виде структурированной группы узлов и объектов, которые имеют свойства и методы. По сути, она связывает веб -страницы со скриптами или языками программирования.</p> + +<p>DOM чаще всего используется в JavaScript, но не является его частью, поэтому иногда с DOM работают в других языках.</p> + +<p><a href="/ru/docs/DOM/DOM_Reference/Введение">Введение</a> в DOM доступно.</p> + +<h2 id="DOM_интерфейсы">DOM интерфейсы</h2> + +<div class="index"> +<ul> + <li>{{domxref("Attr")}}</li> + <li>{{domxref("CharacterData")}}</li> + <li>{{domxref("ChildNode")}} {{experimental_inline}}</li> + <li>{{domxref("Comment")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("Document")}}</li> + <li>{{domxref("DocumentFragment")}}</li> + <li>{{domxref("DocumentType")}}</li> + <li>{{domxref("DOMError")}}</li> + <li>{{domxref("DOMException")}}</li> + <li>{{domxref("DOMImplementation")}}</li> + <li>{{domxref("DOMString")}}</li> + <li>{{domxref("DOMTimeStamp")}}</li> + <li>{{domxref("DOMSettableTokenList")}}</li> + <li>{{domxref("DOMStringList")}}</li> + <li>{{domxref("DOMTokenList")}}</li> + <li>{{domxref("Element")}}</li> + <li>{{domxref("Event")}}</li> + <li>{{domxref("EventTarget")}}</li> + <li>{{domxref("HTMLCollection")}}</li> + <li>{{domxref("MutationObserver")}}</li> + <li>{{domxref("MutationRecord")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeFilter")}}</li> + <li>{{domxref("NodeIterator")}}</li> + <li>{{domxref("NodeList")}}</li> + <li>{{domxref("ParentNode")}} {{experimental_inline}}</li> + <li>{{domxref("ProcessingInstruction")}}</li> + <li>{{domxref("Promise")}} {{experimental_inline}}</li> + <li>{{domxref("PromiseResolver")}} {{experimental_inline}}</li> + <li>{{domxref("Range")}}</li> + <li>{{domxref("Text")}}</li> + <li>{{domxref("TreeWalker")}}</li> + <li>{{domxref("URL")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Worker")}}</li> + <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> +</ul> +</div> + +<h2 id="Устаревшие_интерфейсы">Устаревшие интерфейсы</h2> + +<p><span id="result_box" lang="ru"><span class="hps">Объектная модель документа</span> <span class="hps">находится в</span> <span class="hps">процессе</span><span class="hps"> значительного упрощения</span><span>.</span> <span class="hps">Для того,</span> <span class="hps">чтобы достигнуть этого</span> <span class="hps">следующие интерфейсы</span><span>, присутствующие на</span> <span class="hps">различных</span> <span class="hps">DOM</span> level <span class="hps">3</span> <span class="hps">или</span> <span class="hps">более ранних</span> <span class="hps">спецификациях</span> <span class="hps">были удалены</span><span>.</span> <span class="hps">До сих пор неясно</span><span>, будут ли</span> <span class="hps">некоторые из них возвращены</span><span>,</span> <span class="hps">но на данный момент</span> <span class="hps">они</span> <span class="hps">должны быть рассмотрены</span> <span class="hps">как устаревшие,</span> <span class="hps">и их использования следует избегать</span><span>:</span></span></p> + +<div class="index"> +<ul> + <li>{{domxref("CDATASection")}}</li> + <li>{{domxref("DOMConfiguration")}}</li> + <li>{{domxref("DOMErrorHandler")}}</li> + <li>{{domxref("DOMImplementationList")}}</li> + <li>{{domxref("DOMImplementationRegistry")}}</li> + <li>{{domxref("DOMImplementationSource")}}</li> + <li>{{domxref("DOMLocator")}}</li> + <li>{{domxref("DOMObject")}}</li> + <li>{{domxref("DOMUserData")}}</li> + <li>{{domxref("Entity")}}</li> + <li>{{domxref("EntityReference")}}</li> + <li>{{domxref("NamedNodeMap")}}</li> + <li>{{domxref("NameList")}}</li> + <li>{{domxref("Notation")}}</li> + <li>{{domxref("TypeInfo")}}</li> + <li>{{domxref("UserDataHandler")}}</li> +</ul> +</div> + +<h2 id="HTML_интерфейсы">HTML интерфейсы</h2> + +<p>Документ, содержащий HTML описывается с помощью {{domxref("HTMLDocument")}} интерфейса. Обратите внимание, что HTML спецификация также расширяет {{domxref("Document")}} интерфейс.</p> + +<p><code><font face="Open Sans, Arial, sans-serif">Объект </font>HTMLDocument</code> также даёт доступ к следующим возможностям браузера: вкладки, окна, в которых отрисовывается страница, используя интерфейс {{domxref("Window")}}, асcоциированный с ним {{domxref("window.style", "Style")}} (обычно CSS), история браузера, относящаяся к контексту, {{domxref("window.history", "History")}}, в конце концов, {{domxref("Selection")}} в документе.</p> + +<h3 id="Интерфейсы_HTML_элементов">Интерфейсы HTML элементов</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLAnchorElement")}}</li> + <li>{{domxref("HTMLAppletElement")}}</li> + <li>{{domxref("HTMLAreaElement")}}</li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLBaseElement")}}</li> + <li>{{domxref("HTMLBodyElement")}}</li> + <li>{{domxref("HTMLBRElement")}}</li> + <li>{{domxref("HTMLButtonElement")}}</li> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("HTMLDataElement")}}</li> + <li>{{domxref("HTMLDataListElement")}}</li> + <li>{{domxref("HTMLDirectoryElement")}}</li> + <li>{{domxref("HTMLDivElement")}}</li> + <li>{{domxref("HTMLDListElement")}}</li> + <li>{{domxref("HTMLElement")}}</li> + <li>{{domxref("HTMLEmbedElement")}}</li> + <li>{{domxref("HTMLFieldSetElement")}}</li> + <li>{{domxref("HTMLFontElement")}}</li> + <li>{{domxref("HTMLFormElement")}}</li> + <li>{{domxref("HTMLFrameElement")}}</li> + <li>{{domxref("HTMLFrameSetElement")}}</li> + <li>{{domxref("HTMLHeadElement")}}</li> + <li>{{domxref("HTMLHeadingElement")}}</li> + <li>{{domxref("HTMLHtmlElement")}}</li> + <li>{{domxref("HTMLHRElement")}}</li> + <li>{{domxref("HTMLIFrameElement")}}</li> + <li>{{domxref("HTMLImageElement")}}</li> + <li>{{domxref("HTMLInputElement")}}</li> + <li>{{domxref("HTMLKeygenElement")}}</li> + <li>{{domxref("HTMLLabelElement")}}</li> + <li>{{domxref("HTMLLegendElement")}}</li> + <li>{{domxref("HTMLLIElement")}}</li> + <li>{{domxref("HTMLLinkElement")}}</li> + <li>{{domxref("HTMLMapElement")}}</li> + <li>{{domxref("HTMLMediaElement")}}</li> + <li>{{domxref("HTMLMenuElement")}}</li> + <li>{{domxref("HTMLMetaElement")}}</li> + <li>{{domxref("HTMLMeterElement")}}</li> + <li>{{domxref("HTMLModElement")}}</li> + <li>{{domxref("HTMLObjectElement")}}</li> + <li>{{domxref("HTMLOListElement")}}</li> + <li>{{domxref("HTMLOptGroupElement")}}</li> + <li>{{domxref("HTMLOptionElement")}}</li> + <li>{{domxref("HTMLOutputElement")}}</li> + <li>{{domxref("HTMLParagraphElement")}}</li> + <li>{{domxref("HTMLParamElement")}}</li> + <li>{{domxref("HTMLPreElement")}}</li> + <li>{{domxref("HTMLProgressElement")}}</li> + <li>{{domxref("HTMLQuoteElement")}}</li> + <li>{{domxref("HTMLScriptElement")}}</li> + <li>{{domxref("HTMLSelectElement")}}</li> + <li>{{domxref("HTMLSourceElement")}}</li> + <li>{{domxref("HTMLSpanElement")}}</li> + <li>{{domxref("HTMLStyleElement")}}</li> + <li>{{domxref("HTMLTableElement")}}</li> + <li>{{domxref("HTMLTableCaptionElement")}}</li> + <li>{{domxref("HTMLTableCellElement")}}</li> + <li>{{domxref("HTMLTableDataCellElement")}}</li> + <li>{{domxref("HTMLTableHeaderCellElement")}}</li> + <li>{{domxref("HTMLTableColElement")}}</li> + <li>{{domxref("HTMLTableRowElement")}}</li> + <li>{{domxref("HTMLTableSectionElement")}}</li> + <li>{{domxref("HTMLTextAreaElement")}}</li> + <li>{{domxref("HTMLTimeElement")}}</li> + <li>{{domxref("HTMLTitleElement")}}</li> + <li>{{domxref("HTMLTrackElement")}}</li> + <li>{{domxref("HTMLUListElement")}}</li> + <li>{{domxref("HTMLUnknownElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> +</ul> +</div> + +<h3 id="Другие_интерфейсы">Другие интерфейсы</h3> + +<div class="index"> +<ul> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("CanvasPixelArray")}}</li> + <li>{{domxref("NotifyAudioAvailableEvent")}}</li> + <li>{{domxref("HTMLAllCollection")}}</li> + <li>{{domxref("HTMLFormControlsCollection")}}</li> + <li>{{domxref("HTMLOptionsCollection")}}</li> + <li>{{domxref("HTMLPropertiesCollection")}}</li> + <li>{{domxref("DOMStringMap")}}</li> + <li>{{domxref("RadioNodeList")}}</li> + <li>{{domxref("MediaError")}}</li> +</ul> +</div> + +<h3 id="Устаревшие_HTML_интерфейсы">Устаревшие HTML интерфейсы</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLBaseFontElement")}}</li> + <li>{{domxref("HTMLIsIndexElement")}}</li> +</ul> +</div> + +<h2 id="SVG_интерфейсы">SVG интерфейсы</h2> + +<h3 id="Интерфейсы_SVG_элементов">Интерфейсы SVG элементов</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAElement")}}</li> + <li>{{domxref("SVGAltGlyphElement")}}</li> + <li>{{domxref("SVGAltGlyphDefElement")}}</li> + <li>{{domxref("SVGAltGlyphItemElement")}}</li> + <li>{{domxref("SVGAnimationElement")}}</li> + <li>{{domxref("SVGAnimateElement")}}</li> + <li>{{domxref("SVGAnimateColorElement")}}</li> + <li>{{domxref("SVGAnimateMotionElement")}}</li> + <li>{{domxref("SVGAnimateTransformElement")}}</li> + <li>{{domxref("SVGCircleElement")}}</li> + <li>{{domxref("SVGClipPathElement")}}</li> + <li>{{domxref("SVGColorProfileElement")}}</li> + <li>{{domxref("SVGComponentTransferFunctionElement")}}</li> + <li>{{domxref("SVGCursorElement")}}</li> + <li>{{domxref("SVGDefsElement")}}</li> + <li>{{domxref("SVGDescElement")}}</li> + <li>{{domxref("SVGElement")}}</li> + <li>{{domxref("SVGEllipseElement")}}</li> + <li>{{domxref("SVGFEBlendElement")}}</li> + <li>{{domxref("SVGFEColorMatrixElement")}}</li> + <li>{{domxref("SVGFEComponentTransferElement")}}</li> + <li>{{domxref("SVGFECompositeElement")}}</li> + <li>{{domxref("SVGFEConvolveMatrixElement")}}</li> + <li>{{domxref("SVGFEDiffuseLightingElement")}}</li> + <li>{{domxref("SVGFEDisplacementMapElement")}}</li> + <li>{{domxref("SVGFEDistantLightElement")}}</li> + <li>{{domxref("SVGFEFloodElement")}}</li> + <li>{{domxref("SVGFEGaussianBlurElement")}}</li> + <li>{{domxref("SVGFEImageElement")}}</li> + <li>{{domxref("SVGFEMergeElement")}}</li> + <li>{{domxref("SVGFEMergeNodeElement")}}</li> + <li>{{domxref("SVGFEMorphologyElement")}}</li> + <li>{{domxref("SVGFEOffsetElement")}}</li> + <li>{{domxref("SVGFEPointLightElement")}}</li> + <li>{{domxref("SVGFESpecularLightingElement")}}</li> + <li>{{domxref("SVGFESpotLightElement")}}</li> + <li>{{domxref("SVGFETileElement")}}</li> + <li>{{domxref("SVGFETurbulenceElement")}}</li> + <li>{{domxref("SVGFEFuncRElement")}}</li> + <li>{{domxref("SVGFEFuncGElement")}}</li> + <li>{{domxref("SVGFEFuncBElement")}}</li> + <li>{{domxref("SVGFEFuncAElement")}}</li> + <li>{{domxref("SVGFilterElement")}}</li> + <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li> + <li>{{domxref("SVGFontElement")}}</li> + <li>{{domxref("SVGFontFaceElement")}}</li> + <li>{{domxref("SVGFontFaceFormatElement")}}</li> + <li>{{domxref("SVGFontFaceNameElement")}}</li> + <li>{{domxref("SVGFontFaceSrcElement")}}</li> + <li>{{domxref("SVGFontFaceUriElement")}}</li> + <li>{{domxref("SVGForeignObjectElement")}}</li> + <li>{{domxref("SVGGElement")}}</li> + <li>{{domxref("SVGGlyphElement")}}</li> + <li>{{domxref("SVGGlyphRefElement")}}</li> + <li>{{domxref("SVGGradientElement")}}</li> + <li>{{domxref("SVGHKernElement")}}</li> + <li>{{domxref("SVGImageElement")}}</li> + <li>{{domxref("SVGLinearGradientElement")}}</li> + <li>{{domxref("SVGLineElement")}}</li> + <li>{{domxref("SVGMarkerElement")}}</li> + <li>{{domxref("SVGMaskElement")}}</li> + <li>{{domxref("SVGMetadataElement")}}</li> + <li>{{domxref("SVGMissingGlyphElement")}}</li> + <li>{{domxref("SVGMPathElement")}}</li> + <li>{{domxref("SVGPathElement")}}</li> + <li>{{domxref("SVGPatternElement")}}</li> + <li>{{domxref("SVGPolylineElement")}}</li> + <li>{{domxref("SVGPolygonElement")}}</li> + <li>{{domxref("SVGRadialGradientElement")}}</li> + <li>{{domxref("SVGRectElement")}}</li> + <li>{{domxref("SVGScriptElement")}}</li> + <li>{{domxref("SVGSetElement")}}</li> + <li>{{domxref("SVGStopElement")}}</li> + <li>{{domxref("SVGStyleElement")}}</li> + <li>{{domxref("SVGSVGElement")}}</li> + <li>{{domxref("SVGSwitchElement")}}</li> + <li>{{domxref("SVGSymbolElement")}}</li> + <li>{{domxref("SVGTextElement")}}</li> + <li>{{domxref("SVGTextPathElement")}}</li> + <li>{{domxref("SVGTitleElement")}}</li> + <li>{{domxref("SVGTRefElement")}}</li> + <li>{{domxref("SVGTSpanElement")}}</li> + <li>{{domxref("SVGUseElement")}}</li> + <li>{{domxref("SVGViewElement")}}</li> + <li>{{domxref("SVGVKernElement")}}</li> +</ul> +</div> + +<h3 id="Интерфейсы_SVG_данных">Интерфейсы SVG данных</h3> + +<p>DOM API для типов данных, используемых в определениях SVG свойств и атрибутов.</p> + +<div class="note"> +<p><strong>Замечание:</strong> Начиная с {{Gecko("5.0")}}, следующие относящиеся к SVG DOM интерфейсы, представляя списки объектов, индексируются и к ним можно иметь доступ как к массивам; к тому же, у них есть свойство длины, обозначающее количество элементов в списках: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} и {{domxref("SVGPointList")}}.</p> +</div> + +<h4 id="Статический_тип">Статический тип</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAngle")}}</li> + <li>{{domxref("SVGColor")}}</li> + <li>{{domxref("SVGICCColor")}}</li> + <li>{{domxref("SVGElementInstance")}}</li> + <li>{{domxref("SVGElementInstanceList")}}</li> + <li>{{domxref("SVGLength")}}</li> + <li>{{domxref("SVGLengthList")}}</li> + <li>{{domxref("SVGMatrix")}}</li> + <li>{{domxref("SVGNumber")}}</li> + <li>{{domxref("SVGNumberList")}}</li> + <li>{{domxref("SVGPaint")}}</li> + <li>{{domxref("SVGPoint")}}</li> + <li>{{domxref("SVGPointList")}}</li> + <li>{{domxref("SVGPreserveAspectRatio")}}</li> + <li>{{domxref("SVGRect")}}</li> + <li>{{domxref("SVGStringList")}}</li> + <li>{{domxref("SVGTransform")}}</li> + <li>{{domxref("SVGTransformList")}}</li> +</ul> +</div> + +<h4 id="Анимированный_тип">Анимированный тип</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedAngle")}}</li> + <li>{{domxref("SVGAnimatedBoolean")}}</li> + <li>{{domxref("SVGAnimatedEnumeration")}}</li> + <li>{{domxref("SVGAnimatedInteger")}}</li> + <li>{{domxref("SVGAnimatedLength")}}</li> + <li>{{domxref("SVGAnimatedLengthList")}}</li> + <li>{{domxref("SVGAnimatedNumber")}}</li> + <li>{{domxref("SVGAnimatedNumberList")}}</li> + <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li> + <li>{{domxref("SVGAnimatedRect")}}</li> + <li>{{domxref("SVGAnimatedString")}}</li> + <li>{{domxref("SVGAnimatedTransformList")}}</li> +</ul> +</div> + +<h3 id="Относящиеся_к_SMIL">Относящиеся к SMIL</h3> + +<div class="index"> +<ul> + <li>{{domxref("ElementTimeControl")}}</li> + <li>{{domxref("TimeEvent")}}</li> +</ul> +</div> + +<h3 id="Другие_SVG_интерфейсы">Другие SVG интерфейсы</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedPathData")}}</li> + <li>{{domxref("SVGAnimatedPoints")}}</li> + <li>{{domxref("SVGColorProfileRule")}}</li> + <li>{{domxref("SVGCSSRule")}}</li> + <li>{{domxref("SVGExternalResourcesRequired")}}</li> + <li>{{domxref("SVGFitToViewBox")}}</li> + <li>{{domxref("SVGLangSpace")}}</li> + <li>{{domxref("SVGLocatable")}}</li> + <li>{{domxref("SVGRenderingIntent")}}</li> + <li>{{domxref("SVGStylable")}}</li> + <li>{{domxref("SVGTests")}}</li> + <li>{{domxref("SVGTextContentElement")}}</li> + <li>{{domxref("SVGTextPositioningElement")}}</li> + <li>{{domxref("SVGTransformable")}}</li> + <li>{{domxref("SVGUnitTypes")}}</li> + <li>{{domxref("SVGURIReference")}}</li> + <li>{{domxref("SVGViewSpec")}}</li> + <li>{{domxref("SVGZoomAndPan")}}</li> +</ul> +</div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference/Examples">Примеры DOM</a></li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 4px; top: 245px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/ru/web/api/document_object_model/introduction/index.html b/files/ru/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..9fa1a55cbc --- /dev/null +++ b/files/ru/web/api/document_object_model/introduction/index.html @@ -0,0 +1,231 @@ +--- +title: Введение +slug: Web/API/Document_Object_Model/Introduction +tags: + - DOM +translation_of: Web/API/Document_Object_Model/Introduction +original_slug: DOM/DOM_Reference/Введение +--- +<div> +<p><span style="line-height: 1.5;">Этот раздел представляет краткое знакомство с Объектной Моделью Документа (DOM) - что такое DOM, каким образом предоставляются структуры HTML и XML документов, и как взаимодействовать с ними. Данный раздел содержит справочную информацию и примеры.</span></p> + +<h2 id="Что_такое_Объектная_Модель_Документа_DOM">Что такое Объектная Модель Документа (DOM)?</h2> + +<p>Объектная Модель Документа (DOM) – это программный интерфейс (API) для HTML и XML документов. DOM предоставляет структурированное представление документа и определяет то, как эта структура может быть доступна из программ, которые могут изменять содержимое, стиль и структуру документа. Представление DOM состоит из структурированной группы узлов и объектов, которые имеют свойства и методы. По существу, DOM соединяет веб-страницу с языками описания сценариев либо языками программирования.<br> + <br> + Веб-страница – это документ. Документ может быть представлен как в окне браузера, так и в самом HTML-коде. В любом случае, это один и тот же документ. DOM предоставляет другой способ представления, хранения и управления этого документа. DOM полностью поддерживает объектно-ориентированнное представление веб-страницы, делая возможным её изменение при помощи языка описания сценариев наподобие JavaScript.<br> + <br> + Стандарты <a class="external external-icon" href="http://www.w3.org/DOM/">W3C DOM</a> и <a class="external external-icon" href="https://dom.spec.whatwg.org/">WHATWG DOM </a>формируют основы DOM, реализованные в большинстве современных браузеров. Многие браузеры предлагают расширения за пределами данного стандарта, поэтому необходимо проверять работоспособность тех или иных возможностей DOM для каждого конкретного браузера.</p> + +<p>Например: стандарт DOM описывает, что метод <code>getElementsByTagName </code>в коде, указанном ниже, должен возращать список всех элементов <p> в документе.</p> + +<pre class="brush: js language-js" style="font-size: 14px;"><code class="language-js">paragraphs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName<span class="punctuation token">(</span></span><span class="string token">"P"</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> +// paragraphs[0] это первый <p> элемент +</span><span class="comment token">// paragraphs[1] это второй <p> элемент и т.д. +</span><span class="function token">alert<span class="punctuation token">(</span></span>paragraphs<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Все свойства, методы и события, доступные для управления и создания новых страниц, организованы в виде объектов. Например, объект <code>document</code>, который представляет сам документ, объект <code>table</code>, который реализует специальный интерфейс DOM<code style="font-style: normal; line-height: 1.5;"> HTMLTableElement,</code> необходимый для доступа к HTML-таблицам, и так далее. Данная документация даёт справку об объектах DOM, реализованных Gecko-подобных браузерах.</p> + +<h2 id="DOM_и_JavaScript">DOM и JavaScript</h2> + +<p>Небольшой пример выше, как почти все примеры в этой справке – это JavaScript. То есть пример <em>написан </em>на JavaScript, но при этом <em>используется </em>DOM для доступа к документу и его элементам. DOM не является языком программирования, но без него JavaScript не имел бы никакой модели или представления о веб-странице, HTML-документе, XML-документе и их элементах. Каждый элемент в документе - весь документ в целом, заголовок, таблицы внутри документа, заголовки таблицы, текст внутри ячеек таблицы - это части объектной документной модели для этого документа, поэтому все они могут быть доступны и могут изменяться с помощью DOM и скриптового языка наподобие JavaScript.</p> + +<p>Вначале JavaScript и DOM были тесно связаны, но впоследствии они развились в различные сущности. Содержимое страницы хранится в DOM и может быть доступно и изменяться с использованием JavaScript, поэтому мы можем записать это в виде приблизительного равенства:</p> + +<p>API (веб либо XML страница) = DOM + JS (язык описания скриптов)</p> + +<p>DOM спроектирован таким образом, чтобы быть независимым от любого конкретного языка программирования, обеспечивая структурное представление документа согласно единому и последовательному API. Хотя мы всецело сфокусированы на JavaScript в этой справочной документации, реализация DOM может быть построена для любого языка, как в следующем примере на Python:</p> +</div> + +<pre class="brush: python language-html"><code class="language-html"># Пример DOM на языке Python +import xml.dom.minidom as m +doc = m.parse("C:\\Projects\\Py\\chap1.xml"); +doc.nodeName # Свойство объекта документа DOM; +p_list = doc.getElementsByTagName("para");</code></pre> + +<p>Для подробной информации о том, какие технологии участвуют в написании JavaScript для веб, смотрите обзорную статью <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview" style="line-height: 1.5;">JavaScript technologies overview.</a></p> + +<h2 id="Каким_образом_доступен_DOM">Каким образом доступен DOM? </h2> + +<p>Вы не должны делать ничего особенного для работы с DOM. Различные браузеры имеют различную реализацию DOM, эти реализации показывают различную степень соответсвия с действительным стандартом DOM (это тема, которую мы пытались не затрагивать в данной документации), но каждый браузер использует свой DOM, чтобы сделать веб страницы доступными для взаимодествия с языками сценариев.</p> + +<p>При создании сценария с использованием элемента <script>, либо включая в веб страницу инструкцию для загрузки скрипта, вы можете немедленно приступить к использованию программного интерфейса (API), используя элементы <code><a href="https://developer.mozilla.org/en-US/docs/DOM/document">document</a> </code>или <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code> для взаимодействия с самим документом, либо для получения потомков этого документа, т.е. различных элементов на странице. Ваше программирование DOM может быть чем-то простым, например, вывод сообщения с использованием функции <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window.alert">alert()</a></code> объекта <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code>, или использовать более сложные методы DOM, которые создают новое содержимое, как показанно в следующем примере:</p> + +<pre class="language-html"><body onload="window.alert('добро пожаловать на мою домашнюю страницу!');"> +</pre> + +<p>В следующем примере внутри элемента <code><script></code> определен код JavaScript, данный код устанавливает функцию при загрузке документа (когда весь DOM доступен для использования). Эта функция создает новый элемент H1, добавляет текст в данный элемент, а затем добавляет H1 в дерево документа:</p> + +<pre class="brush: html language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span> + <span class="comment token"> // запуск данной функции при загрузке документа +</span> window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token"> // создание нескольких элементов +</span> <span class="comment token"> // в пустой HTML странице +</span> heading <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement<span class="punctuation token">(</span></span><span class="string token">"h1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + heading_text <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode<span class="punctuation token">(</span></span><span class="string token">"Big Head!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + heading<span class="punctuation token">.</span><span class="function token">appendChild<span class="punctuation token">(</span></span>heading_text<span class="punctuation token">)</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild<span class="punctuation token">(</span></span>heading<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Важные_типы_данных">Важные типы данных</h2> + +<p>Данный раздел предназначен для краткого описания различных типов и объектов в простой и доступной манере. Существует некоторое количество различных типов данных, которые используются в API, на которые вы должны обратить внимание. Для простоты, синтаксис примеров в данном разделе обычно ссылается на узлы как на <code>element</code>s, на массивы узлов как на <code>nodeList</code>s ( либо просто <code>element</code>s ) и на атрибуты узла, просто как на <code>attribute</code>s.</p> + +<p>Ниже таблица с кратким описанием этих типов данных.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>document</td> + <td>Когда член возвращает объект типа document (например, свойство элемента ownerDocument возвращает документ к которому он относится), этот обьект document является собственным корневым обьектом. В DOM document Reference разделе описан объект document.<br> + element </td> + </tr> + <tr> + <td>element</td> + <td>обозначает элемент или узел типа element, возвращаемый членом DOM API. Вместо того, чтобы говорить, что метод document.createElement() возвращает ссылку на node, мы просто скажем, что этот элемент возвращает element, который просто был создан в DOM. Объекты element реализуют DOM element интерфейс и также более общий Node интерфейс. Оба интерфейса включены в эту справку.<br> + nodeList</td> + </tr> + <tr> + <td>NodeList</td> + <td> + <p>массив элементов, как тот, что возвращается методом Document.getElementsByTagName(). Конкретные элементы в массиве доступны по индексу двумя способами:</p> + + <ul> + <li> list.item(1)</li> + <li> list[1]</li> + </ul> + + <p>Эти способы эквивалентны. В первом способе item() - единственный метод объекта NodeList. Последний использует обычный синтаксис массивов, чтобы получить второе значение в списке.</p> + </td> + </tr> + <tr> + <td>attribute</td> + <td>Когда attribute возвращается членом API (например, метод createAttribute()) - это будет ссылка на объект, который предоставляет специальный (хоть и небольшой) интерфейс для атрибутов. Атрибуты - это узлы в DOM, как и элементы, хотя вы можете редко использовать их в таком виде.</td> + </tr> + <tr> + <td>namedNodeMap</td> + <td>namedNodeMap подобна массиву, но элементы доступны по имени или индексу. Доступ по индексу - это лишь для удобства перечисления, т.к. элементы не имеют определенног порядка в списке. Этот тип данных имеет метод item() для этих целей и вы можете также добавлять и удалять элементы из namedNodeMap</td> + </tr> + </tbody> +</table> + + + +<h2 id="DOM-интерфейсы_DOM_interfaces">DOM-интерфейсы (DOM interfaces)</h2> + + + +<p>Это руководство об объектах и реальных вещах, которые вы можете использовать для управления DOM-иерархией. Есть много моментов, где понимание того, как это работает, может удивлять. Например, объект, представляющий <code>HTML form</code> элемент, берет своё свойство <code><strong>name </strong></code>из интерфейса <code>HTMLFormElement, </code>а свойство <code><strong>className - </strong></code>из интерфейса <code>HTMLElement. </code>В обоих случаях свойство, которое вы хотите, находится в этом объекте формы.</p> + +<p>Кроме того, отношение между объектами и интерфейсами, которые они реализуют в DOM может быть удивительным и этот раздел пытается рассказать немного о существующих интерфейсах в DOM и о том, как они могут быть доступны.</p> + +<h3 id="Интерфейсы_и_объекты_Interfaces_and_objects">Интерфейсы и объекты (Interfaces and objects)</h3> + +<p>Многие объекты реализуют действия из нескольких интерфейсов. Объект таблицы, например, реализует специальный <a href="https://developer.mozilla.org/en-US/docs/DOM/HTMLTableElement/ru/docs/">HTML Table Element Interface</a>, который включает такие методы как <code>createCaption</code> и <code>insertRow</code>. Но так как это таблица - это ещё и HTML-элемент, <code>table</code> реализует интерфейс <code>Element</code>, описанный в разделе <a href="https://developer.mozilla.org/en-US/docs/DOM/element/ru/docs/">DOM <code>element</code> Reference</a>. Наконец, так как HTML-элемент (в смысле DOM) - это узел (<code>node)</code> в дереве, которое составляет объектную модель для HTML- или XML-страницы, табличный элемент также реализует более общий интерфейс <code>Node</code>, из которого происходит <code>Element</code>.</p> + +<p>Когда вы получаете ссылку на объект <code>table</code>, как в следующем примере, вы обычно используете все три интерфейса этого объекта, вероятно, даже не зная этого.</p> + +<pre class="brush: js">var table = document.getElementById("table"); +var tableAttrs = table.attributes; // Node/Element interface +for (var i = 0; i < tableAttrs.length; i++) { + // HTMLTableElement interface: border attribute + if(tableAttrs[i].nodeName.toLowerCase() == "border") + table.border = "1"; +} +// HTMLTableElement interface: summary attribute +table.summary = "note: increased border";</pre> + +<h3 id="Основные_интерфейсы_в_DOM_Core_interfaces_in_the_DOM">Основные интерфейсы в DOM (Core interfaces in the DOM)</h3> + +<p>Этот раздел перечисляет несколько самых распространенных интерфейсов в DOM. Идея не в том чтобы описать, что делают эти методы API, но в том чтобы дать вам несколько мыслей насчет видов методов и свойств, которые вы будете часто видеть, используя DOM. Эти распространенные части API использованы в большинстве примеров раздела <a href="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference/Examples">DOM Examples</a> в конце этой справки.</p> + +<p><code>Document, window</code> - это объекты, чьи интерфейсы вы, как правило, очень часто используете в программировании DOM. Говоря простыми словами, объект <code>window</code> представляет что-то вроде браузера, а объект <code>document</code> - корень самого документа. <code>Element</code> наследуется от общего интерфейса <code>Node</code>, и эти интерфейсы вместе предоставляют много методов и свойств, которые можно применять у отдельных элементов. Эти элементы также могут иметь отдельные интерфейсы для работы с типами данных, которые эти элементы содержат, как в примере с объектом <code>table</code> в предыдущем случае.</p> + +<p>Ниже представлен краткий список распространненых членов API, используемых в программировании веб- и XML-страниц с использованием DOM:</p> + +<ul> + <li><code><a href="/ru/docs/Web/API/Document/getElementById">document.getElementById</a>(id)</code></li> + <li><code><a href="/ru/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName</a>(name)</code></li> + <li><code><a href="/ru/docs/DOM/document.createElement">document.createElement</a>(name)</code></li> + <li><code>parentNode.<a href="/ru/docs/Web/API/Node/appendChild">appendChild</a>(node)</code></li> + <li><code>element.<a href="/ru/docs/Web/API/Element/innerHTML">innerHTML</a></code></li> + <li><code>element.<a href="/ru/docs/Web/API/HTMLElement/style">style</a>.left</code></li> + <li><code>element.<a href="/ru/docs/Web/API/Element/setAttribute">setAttribute</a></code></li> + <li><code>element.<a href="/ru/docs/Web/API/Element/getAttribute">getAttribute</a></code></li> + <li><code>element.<a href="/ru/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code></li> + <li><code><a href="/en-US/docs/DOM/window.content">window.content</a></code></li> + <li><code><a href="/en-US/docs/DOM/window.onload">window.onload</a></code></li> + <li><code><a href="/en-US/docs/DOM/window.dump">window.dump</a></code></li> + <li><code><a href="/ru/docs/Web/API/Window/scrollTo">window.scrollTo</a></code></li> +</ul> + +<h2 id="Тестирование_DOM_API">Тестирование DOM API</h2> + +<p>Этот документ содержит примеры для каждого интерфейса, который вы можете использовать в своей разработке. В некоторых случаях примеры - полноценные веб-страницы с доступом к DOM в элементе <code><script>,</code> также перечислены элементы, необходимые чтобы запустить скрипт в форме, и HTML-элементы, над которыми будут производиться операции DOM. Когда встречается такой случай, можно просто копировать и вставить пример в новый HTML-документ, сохранить и запустить его в браузере.</p> + +<p>Есть случаи, однако, где примеры более лаконичные. Чтобы запустить примеры, которые лишь демонстрируют основы взаимодействия интерфейсов с HTML-элементами, вы можете подготовить тестовую страницу, в которую будете помещать функции внутрь скриптов. Следующая очень простая веб-страница содержит элемент <code><script></code> в заголовке, в который вы можете поместить функции, чтобы протестировать интерфейс. Страница содержит несколько элементов с атрибутами, которые можно возвращать, устанавливать или, другими словами, манипулировать и содержит пользовательский интерфейс, необходимый, чтобы вызывать нужные функции из браузера.</p> + +<p>Вы можете использовать эту тестовую страницу или похожую для проверки интерфейсов DOM, которые вас интересуют и просмотра того, как они работают в браузерах. Вы можете обновить содержмое функции <code>test()</code> при необходимости, создать больше кнопок или добавить элементы при необходимости.</p> + +<pre><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>DOM Tests<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> + <span class="keyword token">function</span> <span class="function token">setBodyAttr</span><span class="punctuation token">(</span>attr<span class="punctuation token">,</span> value<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>document<span class="punctuation token">.</span>body<span class="punctuation token">)</span> <span class="function token">eval</span><span class="punctuation token">(</span><span class="string token">'document.body.'</span><span class="operator token">+</span>attr<span class="operator token">+</span><span class="string token">'="'</span><span class="operator token">+</span>value<span class="operator token">+</span><span class="string token">'"'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">else</span> <span class="function token">notSupported</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">.5</span>in<span class="punctuation token">;</span> <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">400</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tt</span><span class="punctuation token">></span></span>text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tt</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>text<span class="punctuation token">'</span>, + this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>black<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>black + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>darkblue<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>darkblue + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tt</span><span class="punctuation token">></span></span>bgColor<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tt</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>bgColor<span class="punctuation token">'</span>, + this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>white + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lightgrey<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>gray + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tt</span><span class="punctuation token">></span></span>link<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tt</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>link<span class="punctuation token">'</span>, + this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>blue + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>green<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>green + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>small</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.brownhen.com/dom_api_top.html<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sample<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + (sample link)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>small</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>version<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ver()<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<p>Чтобы протестировать много интерфейсов на одной странице, набор свойств, которые изменяют цвета веб-страницы, можно создать похожую веб-страницу с целой "консолью" кнопок, текстовых полей и других элементов. Следующий скриншот даёт идею, как интерфейсы могут быть сгруппированы вместе для тестирования</p> + +<p><img alt="" src="https://developer.mozilla.org/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif" style="height: 375px; width: 199px;"></p> + +<p>В этом примере выпадающее меню динамически обновляет доступные из DOM части веб-страницы (например, фоновый цвет, цвет ссылок и цвет текста). Однако при разработке тестовых страниц, тестирование интерфейсов, как вы об этом прочитали, важная часть изучения эффективной работы с DOM.</p> + +<h2 id="Другие_статьи">Другие статьи</h2> + +<ul> + <li><a href="/ru/docs/DOM/DOM_Reference">DOM Reference</a></li> + <li><a href="/ru/docs/DOM/DOM_Reference/Введение">Введение в DOM</a></li> + <li><a href="/ru/docs/DOM/DOM_Reference/Events">События и DOM (Events and the DOM)</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Примеры (Examples)</a></li> +</ul> diff --git a/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..0bdfd09bdc --- /dev/null +++ b/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,51 @@ +--- +title: Locating DOM elements using selectors +slug: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +original_slug: DOM/DOM_Reference/Locating_DOM_elements_using_selectors +--- +<div>{{ gecko_minversion_header("1.9.1") }}</div> + +<div>Selectors API предоставляет методы, с помощью которых можно быстро и просто получить доступ к узлам <code><a href="/en-US/docs/DOM/element">Element</a></code> из DOM путем сопоставления с набором селекторов. Это намного быстрее, чем прошлые техники, где надо было, например, использовать цикл в JS-коде, чтобы найти конкретные элементы.</div> + +<div> </div> + +<h2 id="Интерфейс_NodeSelector_(The_NodeSelector_interface)">Интерфейс NodeSelector (The NodeSelector interface)</h2> + +<p>Эта спецификация добавляет два новых метода к любым объектам, реализующим интерфейс <a class="internal" href="/en-US/docs/DOM/document" title="en-US/docs/DOM/Document"><code>Document</code></a>, <a class="internal" href="/en-US/docs/DOM/DocumentFragment" title="en-US/docs/DOM/DocumentFragment"><code>DocumentFragment</code></a>, или <a class="internal" href="/en-US/docs/DOM/element" title="en-US/docs/DOM/Element"><code>Element</code></a>:</p> + +<dl> + <dt><code>querySelector</code></dt> + <dd>Возвращает первый совпадающий узел <a class="internal" href="/en-US/docs/DOM/element" title="en-US/docs/DOM/Element"><code>Element</code></a> внутри поддерева. Если совпадающих узлов нет, будет возвращен <code>null</code>.</dd> + <dt><code>querySelectorAll</code></dt> + <dd>Возвращает <a class="internal" href="/en-US/docs/DOM/NodeList" title="en-US/docs/DOM/NodeList"><code>NodeList</code></a><code>, </code>содержащий все подходящие узлы <code>Element</code> внутри поддерева узлов. Или возвращает пустой <code>NodeList</code>, если совпадений не найдено.</dd> +</dl> + +<div class="note"><strong>Замечание: </strong><code><a class="internal" href="/en-US/docs/DOM/NodeList" title="en-US/docs/DOM/NodeList">NodeList</a></code>, возвращаемый методом <code><a class="internal" href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll">querySelectorAll()</a>, </code>не настоящий. Этот список отличается от других методов поиска DOM, которые возвращают настоящие (живые) узлы.</div> + +<p>Вы можете найти примеры и детали, прочитав документацию для методов <a class="internal" href="/en-US/docs/DOM/Element.querySelector" title="en-US/docs/DOM/Element.querySelector"><code>querySelector()</code></a> и <a class="internal" href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll"><code>querySelectorAll()</code></a><code>, </code>а также в статье <a class="internal" href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Code snippets for querySelector</a>.</p> + +<h2 id="Selectors">Selectors</h2> + +<p>Селекторные методы принимают один или больше селекторов, разделенных запятыми, чтобы определить, какие элементы должны быть возвращены. Например, чтобы все параграфы в документе, которые имеют классы <code>warning </code>или <code>note</code>, можно сделать следующее:</p> + +<pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre> + +<p>Также можно искать по ID. Например:</p> + +<pre><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre> + +<p>После выполнения кода выше, <code>el</code> будет содержать первый элемент в документе, чей ID <code>main, basic</code> или <code>exclamation</code></p> + +<p>Вы можете использовать любые CSS-селекторы в методах <code>querySelector(), querySelectorAll()</code></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li> + <li><a href="/en-US/docs/DOM/Element.querySelector" title="en-US/docs/DOM/Element.querySelector"><code>element.querySelector</code></a></li> + <li><a href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/element.querySelectorAll"><code>element.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelector" title="en-US/docs/DOM/document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="en-US/docs/DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> +</ul> diff --git a/files/ru/web/api/document/activeelement/index.html b/files/ru/web/api/documentorshadowroot/activeelement/index.html index 71db5bc678..4261eee4e9 100644 --- a/files/ru/web/api/document/activeelement/index.html +++ b/files/ru/web/api/documentorshadowroot/activeelement/index.html @@ -1,6 +1,6 @@ --- title: Document.activeElement -slug: Web/API/Document/activeElement +slug: Web/API/DocumentOrShadowRoot/activeElement tags: - API - Document @@ -9,6 +9,7 @@ tags: - Reference translation_of: Web/API/DocumentOrShadowRoot/activeElement translation_of_original: Web/API/Document/activeElement +original_slug: Web/API/Document/activeElement --- <p>{{ ApiRef() }}</p> diff --git a/files/ru/web/api/document/getselection/index.html b/files/ru/web/api/documentorshadowroot/getselection/index.html index c57695e055..ce4007b2f3 100644 --- a/files/ru/web/api/document/getselection/index.html +++ b/files/ru/web/api/documentorshadowroot/getselection/index.html @@ -1,8 +1,9 @@ --- title: Document.getSelection() -slug: Web/API/Document/getSelection +slug: Web/API/DocumentOrShadowRoot/getSelection translation_of: Web/API/DocumentOrShadowRoot/getSelection translation_of_original: Web/API/Document/getSelection +original_slug: Web/API/Document/getSelection --- <p>{{APIRef("DOM")}}</p> diff --git a/files/ru/web/api/element/blur_event/index.html b/files/ru/web/api/element/blur_event/index.html new file mode 100644 index 0000000000..3beea937a2 --- /dev/null +++ b/files/ru/web/api/element/blur_event/index.html @@ -0,0 +1,154 @@ +--- +title: blur (event) +slug: Web/API/Element/blur_event +tags: + - DOM + - DOM Events +translation_of: Web/API/Element/blur_event +original_slug: Web/Events/blur +--- +<p>Событие <code>blur</code> вызывается когда элемент теряет фокус. Главное отличие между этим событием и <a href="/en-US/docs/Mozilla_event_reference/focusout"><code>focusout</code></a> только в том что у последнего есть фаза всплытия.</p> + +<h2 id="Основная_информация">Основная информация</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Всплытие</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Отменяемый</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Цель</dt> + <dd style="margin: 0 0 0 120px;">Элемент</dd> + <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> +</dl> + +<p>{{NoteStart}}Значение {{domxref("Document.activeElement")}} меняется в зависимости от браузера во время выполнения этого события ({{bug(452307)}}): IE10 устанавливает его к элементу на который будет перемещен фокус, в то время как Firefox и Chrome обычно устанавливают его к <code>body</code> документа{{NoteEnd}}</p> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Event target (DOM element)</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM element)</td> + <td>null</td> + </tr> + </tbody> +</table> + +<h2 id="Делегирование_события">Делегирование события</h2> + +<p>Есть два способа реализовать делегирование этого события: использовать событие <code>focusout</code> в браузерах которые поддерживают его (все браузеры, Firefox с 52+), или установить параметр "useCapture" метода <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> на <code>true</code>:</p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush:html;"><form id="form"> + <input type="text" placeholder="text input"> + <input type="password" placeholder="password"> +</form></pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">var form = document.getElementById("form"); +form.addEventListener("focus", function( event ) { + event.target.style.background = "pink"; +}, true); +form.addEventListener("blur", function( event ) { + event.target.style.background = ""; +}, true);</pre> + +<p>{{EmbedLiveSample('Event_delegation')}}</p> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>6</td> + <td>12.1</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>53</td> + <td>{{CompatUnknown}}</td> + <td>10.0</td> + <td>12.1</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] В Gecko до 24 {{geckoRelease(24)}} интефейс для этого события был {{domxref("Event")}}, не {{domxref("FocusEvent")}}. Смотреть ({{bug(855741)}}).</p> + +<h2 id="Похожие_события">Похожие события</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/ru/web/api/element/error_event/index.html b/files/ru/web/api/element/error_event/index.html new file mode 100644 index 0000000000..716ebfef1d --- /dev/null +++ b/files/ru/web/api/element/error_event/index.html @@ -0,0 +1,96 @@ +--- +title: error +slug: Web/API/Element/error_event +tags: + - DOM + - UI события + - Видео + - Запись + - Медия + - Обработка ошибок + - Ошибки + - Событие + - аудио + - события +translation_of: Web/API/Element/error_event +original_slug: Web/Events/error +--- +<p>Событие <code>error</code> возникает, когда произошла какая-либо ошибка. Точные обстоятельства могут быть различными, потому что события с этим именем используются множеством различных API.</p> + +<h2 id="Общая_информация">Общая информация</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("UIEvent")}} если создается элементом пользовательского интерфейса, {{domxref("MediaRecorderErrorEvent")}} если генерируется API записи MediaStream, и {{domxref("Event")}} иначе.</dd> + <dt style="float: left; text-align: right; width: 120px;">Вплывающее</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Цель</dt> + <dd style="margin: 0 0 0 120px;">Элемент</dd> + <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>Цель события (наиболее верхлежащий элемент в DOM дереве).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>Тип события.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Является ли событие вплывающим в стандартных условиях или нет.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Является ли событие отменяемым или нет.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (свойство <code>window</code> объекта document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h3 id="Для_MediaStream_Recording_событий">Для MediaStream Recording событий</h3> + +<p>Эти события типа {{domxref("MediaRecorderErrorEvent")}}.</p> + +<p>{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>События отсылаются в {{domxref("Window.onerror")}} и {{domxref("Element.onerror")}}</dd> + <dt>{{domxref("HTMLMediaElement.onerror")}}</dt> + <dd>События отсылаются в {{domxref("HTMLMediaElement")}}, включая {{HTMLElement("audio")}} и {{HTMLElement("video")}}</dd> + <dt>{{domxref("MediaRecorder.onerror")}}</dt> + <dd>События отсылаются в {{domxref("MediaRecorder.onerror")}}, типа {{domxref("MediaRecorderErrorEvent")}}</dd> +</dl> diff --git a/files/ru/web/api/element/focusin_event/index.html b/files/ru/web/api/element/focusin_event/index.html new file mode 100644 index 0000000000..8a8b4f0608 --- /dev/null +++ b/files/ru/web/api/element/focusin_event/index.html @@ -0,0 +1,124 @@ +--- +title: focusin +slug: Web/API/Element/focusin_event +translation_of: Web/API/Element/focusin_event +original_slug: Web/Events/focusin +--- +<p>Событие focusin срабатывает, когда элемент получает фокус. Главное отличие от <code><a href="/en-US/docs/Mozilla_event_reference/focus_(event)">focus</a> </code>в том, что последний не всплывает.</p> + +<h2 id="Общая_информация">Общая информация</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None.</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Event target losing focus.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM element)</td> + <td>Event target receiving focus.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Событие пока что не поддерживается в Firefox, см. {{Bug("687787")}}. Вместо него можно использовать событие <code>focus</code>, которое <a href="/en-US/docs/Mozilla_event_reference/focus_(event)#Event_delegation">совместимо с</a> делегированием событий.</p> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/ru/web/api/element/focusout_event/index.html b/files/ru/web/api/element/focusout_event/index.html new file mode 100644 index 0000000000..38a4eed235 --- /dev/null +++ b/files/ru/web/api/element/focusout_event/index.html @@ -0,0 +1,127 @@ +--- +title: focusout +slug: Web/API/Element/focusout_event +translation_of: Web/API/Element/focusout_event +original_slug: Web/Events/focusout +--- +<p>Событие <code>focusout</code> вызывается перед потерей элементом фокуса. Главное отличие между этим событием и <a href="/en-US/docs/Mozilla_event_reference/blur_(event)"><code>blur</code></a> в том, что у последнего нет фазы всплытия.</p> + +<p> </p> + +<p>Основная информация</p> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Всплытие</dt> + <dd style="margin: 0 0 0 120px;">Да</dd> + <dt style="float: left; text-align: right; width: 120px;">Отменяемый</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Цель</dt> + <dd style="margin: 0 0 0 120px;">Элемент</dd> + <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt> + <dd style="margin: 0 0 0 120px;">Нет.</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Свойство</th> + <th scope="col">Тип</th> + <th scope="col">Описание</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Цель события, теряющая фокус.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Тип события.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Всплывает ли событие при нормальных условиях.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Возможно ли отменить событие.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM-элемент)</td> + <td>Цель события, получающая фокус.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(52)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(52)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> +</ul> diff --git a/files/ru/web/api/htmlelement/style/index.html b/files/ru/web/api/elementcssinlinestyle/style/index.html index 683bfa1101..95f9209797 100644 --- a/files/ru/web/api/htmlelement/style/index.html +++ b/files/ru/web/api/elementcssinlinestyle/style/index.html @@ -1,6 +1,6 @@ --- title: HTMLElement.style -slug: Web/API/HTMLElement/style +slug: Web/API/ElementCSSInlineStyle/style tags: - API - HTML DOM @@ -12,6 +12,7 @@ tags: - Свойство - Ссылки translation_of: Web/API/ElementCSSInlineStyle/style +original_slug: Web/API/HTMLElement/style --- <h2 id="Кратко">Кратко</h2> diff --git a/files/ru/web/api/eventtarget/attachevent/index.html b/files/ru/web/api/eventtarget/attachevent/index.html deleted file mode 100644 index a428f9724c..0000000000 --- a/files/ru/web/api/eventtarget/attachevent/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: EventTarget.attachEvent() -slug: Web/API/EventTarget/attachEvent -tags: - - Junk -translation_of: Web/API/EventTarget/addEventListener -translation_of_original: Web/API/EventTarget/attachEvent ---- -<p>{{DOMxRef("EventTarget.addEventListener","EventTarget.addEventListener()")}}</p> diff --git a/files/ru/web/api/eventtarget/detachevent/index.html b/files/ru/web/api/eventtarget/detachevent/index.html deleted file mode 100644 index 9a62ecb63c..0000000000 --- a/files/ru/web/api/eventtarget/detachevent/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: EventTarget.detachEvent() -slug: Web/API/EventTarget/detachEvent -translation_of: Web/API/EventTarget/removeEventListener -translation_of_original: Web/API/EventTarget/detachEvent ---- -<p>{{APIRef("DOM Events")}}</p> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="Кратко">Кратко</h2> - -<p>Это проприетарная альтернатива методу {{domxref("EventTarget.removeEventListener()")}} в Microsoft Internet Explorer.</p> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox"><em>target</em>.detachEvent(<em>eventNameWithOn</em>, <em>callback</em>) -</pre> - -<dl> - <dt>target</dt> - <dd>DOM елемент, для которого надо убрать обработчик.</dd> - <dt>eventNameWithOn</dt> - <dd>Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать <code>"onclick" для удаления обработчика для данного "click" ивента.</code></dd> - <dt>callback</dt> - <dd>Функция, которую стоит убрать.</dd> -</dl> - -<h2 id="Спецификация">Спецификация</h2> - -<p>Не является частью спецификации.</p> - -<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms536411(v=vs.85).aspx">содержит описание на MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6 thru 10 [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1]: <code>detachEvent()</code> больше не поддерживается в IE11+. {{domxref("EventTarget.removeEventListener()")}} поддерживается в IE9+.</p> - -<h2 id="Смотрите_так-же">Смотрите так-же</h2> - -<ul> - <li>{{ domxref("EventTarget.attachEvent()") }}</li> - <li>{{ domxref("EventTarget.fireEvent()") }}</li> -</ul> diff --git a/files/ru/web/api/file_and_directory_entries_api/введение/index.html b/files/ru/web/api/file_and_directory_entries_api/introduction/index.html index e5c76758c1..fba2cad5c7 100644 --- a/files/ru/web/api/file_and_directory_entries_api/введение/index.html +++ b/files/ru/web/api/file_and_directory_entries_api/introduction/index.html @@ -1,7 +1,8 @@ --- title: Введение в API файлов и каталогов -slug: Web/API/File_and_Directory_Entries_API/Введение +slug: Web/API/File_and_Directory_Entries_API/Introduction translation_of: Web/API/File_and_Directory_Entries_API/Introduction +original_slug: Web/API/File_and_Directory_Entries_API/Введение --- <div>{{DefaultAPISidebar("File System API")}}{{Non-standard_header}}</div> diff --git a/files/ru/web/api/fullscreen_api/index.html b/files/ru/web/api/fullscreen_api/index.html new file mode 100644 index 0000000000..74c429955a --- /dev/null +++ b/files/ru/web/api/fullscreen_api/index.html @@ -0,0 +1,199 @@ +--- +title: Fullscreen API +slug: Web/API/Fullscreen_API +translation_of: Web/API/Fullscreen_API +original_slug: DOM/Using_fullscreen_mode +--- +<div>{{DefaultAPISidebar("Fullscreen API")}}</div> + +<p>The <strong>Fullscreen API</strong> adds methods to present a specific {{DOMxRef("Element")}} (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until full-screen mode is shut off.</p> + +<p>See the article <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a> for details on how to use the API.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Support for this API varies somewhat across browsers, with many requiring vendor prefixes and/or not implementing the latest specification. See the {{anch("Browser compatibility")}} section below for details on support for this API. You may wish to consider using a library such as <a href="https://github.com/rafrex/fscreen">Fscreen</a> for vendor agnostic access to the Fullscreen API.</p> +</div> + +<h2 id="Interfaces">Interfaces</h2> + +<p><em>The Fullscreen API has no interfaces of its own. Instead, it augments several other interfaces to add the methods, properties, and event handlers needed to provide full-screen functionality. These are listed in the following sections.</em></p> + +<h2 id="Methods">Methods</h2> + +<p>The Fullscreen API adds methods to the {{DOMxRef("Document")}} and {{DOMxRef("Element")}} interfaces to allow turning off and on full-screen mode.</p> + +<h3 id="Methods_on_the_Document_interface">Methods on the Document interface</h3> + +<dl> + <dt>{{DOMxRef("Document.exitFullscreen()")}}</dt> + <dd>Requests that the {{Glossary("user agent")}} switch from full-screen mode back to windowed mode. Returns a {{jsxref("Promise")}} which is resolved once full-screen mode has been completely shut off.</dd> +</dl> + +<h3 id="Methods_on_the_Element_interface">Methods on the Element interface</h3> + +<dl> + <dt>{{DOMxRef("Element.requestFullscreen()")}}</dt> + <dd>Asks the user agent to place the specified element (and, by extension, its descendants) into full-screen mode, removing all of the browser's UI elements as well as all other applications from the screen. Returns a {{jsxref("Promise")}} which is resolved once full-screen mode has been activated.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>The {{DOMxRef("Document")}} interface provides properties that can be used to determine if full-screen mode is supported and available, and if full-screen mode is currently active, which element is using the screen.</em></p> + +<dl> + <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}</dt> + <dd>The <code>fullscreenElement</code> property tells you the {{DOMxRef("Element")}} that's currently being displayed in full-screen mode on the DOM (or shadow DOM). If this is <code>null</code>, the document is not in full-screen mode.</dd> + <dt>{{DOMxRef("Document.fullscreenEnabled")}}</dt> + <dd>The <code>fullscreenEnabled</code> property tells you whether or not it is possible to engage full-screen mode. This is <code>false</code> if full-screen mode is not available for any reason (such as the <code>"fullscreen"</code> feature not being allowed, or full-screen mode not being supported).</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<p><em>The Fullscreen API defines two events which can be used to detect when full-screen mode is turned on and off, as well as when errors occur during the process of changing between full-screen and windowed modes. Event handlers for these events are available on the {{DOMxRef("Document")}} and {{DOMxRef("Element")}} interfaces.</em></p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> These event handler properties are <em>not</em> available as HTML content attributes. In other words, you cannot specify event handlers for {{Event("fullscreenchange")}} and {{Event("fullscreenerror")}} in the HTML content. They must be added by JavaScript code.</p> +</div> + +<h4 id="Event_handlers_on_documents">Event handlers on documents</h4> + +<dl> + <dt>{{DOMxRef("Document.onfullscreenchange")}}</dt> + <dd>An event handler for the {{Event("fullscreenchange")}} event that's sent to a {{DOMxRef("Document")}} when that document is placed into full-screen mode, or when that document exits full-screen mode. This handler is called only when the entire document is presented in full-screen mode.</dd> + <dt>{{DOMxRef("Document.onfullscreenerror")}}</dt> + <dd>An event handler for the {{Event("fullscreenerror")}} event that gets sent to a {{DOMxRef("Document")}} when an error occurs while trying to enable or disable full-screen mode for the entire document.</dd> +</dl> + +<h4 id="Event_handlers_on_elements">Event handlers on elements</h4> + +<dl> + <dt>{{DOMxRef("Element.onfullscreenchange")}}</dt> + <dd>An event handler which is called when the {{Event("fullscreenchange")}} event is sent to the element, indicating that the element has been placed into, or removed from, full-screen mode.</dd> + <dt>{{DOMxRef("Element.onfullscreenerror")}}</dt> + <dd>An event handler for the {{Event("fullscreenerror")}} event when sent to an element which has encountered an error while transitioning into or out of full-screen mode.</dd> +</dl> + +<h3 id="Obsolete_properties">Obsolete properties</h3> + +<dl> + <dt>{{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}</dt> + <dd>A Boolean value which is <code>true</code> if the document has an element currently being displayed in full-screen mode; otherwise, this returns <code>false</code>. + <div class="note"><strong>Note:</strong> Use the {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} property on the {{DOMxRef("Document")}} or {{DOMxRef("ShadowRoot")}} instead; if it's not <code>null</code>, then it's an {{DOMxRef("Element")}} currently being displayed in full-screen mode.</div> + </dd> +</dl> + +<h2 id="Events" name="Events">Events</h2> + +<p><em>The Fullscreen API defines two events which can be used to detect when full-screen mode is turned on and off, as well as when errors occur during the process of changing between full-screen and windowed modes.</em></p> + +<dl> + <dt>{{Event("fullscreenchange")}}</dt> + <dd>Sent to a {{DOMxRef("Document")}} or {{DOMxRef("Element")}} when it transitions into or out of full-screen mode.</dd> + <dt>{{Event("fullscreenerror")}}</dt> + <dd>Sent to a <code>Document</code> or <code>Element</code> if an error occurs while attempting to switch it into or out of full-screen mode.</dd> +</dl> + +<h2 id="Dictionaries">Dictionaries</h2> + +<dl> + <dt>{{DOMxRef("FullscreenOptions")}}</dt> + <dd>Provides optional settings you can specify when calling {{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}}.</dd> +</dl> + +<h2 id="Controlling_access">Controlling access</h2> + +<p>The availability of full-screen mode can be controlled using <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>. The full-screen mode feature is identified by the string <code>"fullscreen"</code>, with a default allow-list value of <code>"self"</code>, meaning that full-screen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document.</p> + +<p>See <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a> to learn more about using Feature Policy to control access to an API.</p> + +<h2 id="Usage_notes" name="Usage_notes">Usage notes</h2> + +<p>Users can choose to exit full-screen mode simply by pressing the <kbd>ESC</kbd> (or <kbd>F11</kbd>) key, rather than waiting for the site or app to programmatically do so. Make sure you provide, somewhere in your user interface, appropriate user interface elements that inform the user that this option is available to them.</p> + +<div class="note"> +<p><strong>Note:</strong> Navigating to another page, changing tabs, or switching to another application using any application switcher (or <kbd>Alt</kbd>-<kbd>Tab</kbd>) will likewise exit full-screen mode.</p> +</div> + +<h2 id="Example">Example</h2> + +<p>In this example, a video is presented in a web page. Pressing the <kbd>Return</kbd> or <kbd>Enter</kbd> key lets the user toggle between windowed and full-screen presentation of the video.</p> + +<p><a href="/samples/domref/fullscreen.html">View Live Examples</a></p> + +<h3 id="Watching_for_the_Enter_key">Watching for the Enter key</h3> + +<p>When the page is loaded, this code is run to set up an event listener to watch for the <kbd>Enter</kbd> key.</p> + +<pre class="brush: js">document.addEventListener("keypress", function(e) { + if (e.keyCode === 13) { + toggleFullScreen(); + } +}, false); +</pre> + +<h3 id="Toggling_full-screen_mode">Toggling full-screen mode</h3> + +<p>This code is called by the event handler above when the user hits the <kbd>Enter</kbd> key.</p> + +<pre class="brush: js">function toggleFullScreen() { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } + } +}</pre> + +<p>This starts by looking at the value of the {{DOMxRef("Document", "document")}}'s <code>fullscreenElement</code> attribute. In a real-world deployment, at this time, you'll want to check for prefixed versions of this (<code>mozFullScreenElement</code>, <code>msFullscreenElement</code>, or <code>webkitFullscreenElement</code>, for example). If the value is <code>null</code>, the document is currently in windowed mode, so we need to switch to full-screen mode; otherwise, it's the element that's currently in full-screen mode. Switching to full-screen mode is done by calling {{DOMxRef("Element.requestFullscreen()")}} on the {{HTMLElement("video")}} element.</p> + +<p>If full-screen mode is already active (<code>fullscreenElement</code> is not <code>null</code>), we call {{DOMxRef("Document.exitFullscreen", "exitFullscreen()")}} on the <code>document</code> to shut off full-screen mode.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Fullscreen")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Initial version.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<h3 id="Document.fullscreen"><code>Document.fullscreen</code></h3> + +<div> + + +<p>{{Compat("api.Document.fullscreen")}}</p> +</div> + +<h3 id="Document.fullscreenEnabled"><code>Document.fullscreenEnabled</code></h3> + +<div> +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("api.Document.fullscreenEnabled")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fullscreen_API">Using full-screen mode</a></li> + <li>{{DOMxRef("Element.requestFullscreen()")}}</li> + <li>{{DOMxRef("Document.exitFullscreen()")}}</li> + <li>{{DOMxRef("Document.fullscreen")}}</li> + <li>{{DOMxRef("Document.fullscreenElement")}}</li> + <li>{{CSSxRef(":fullscreen")}}, {{CSSxRef("::backdrop")}}</li> + <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}}</li> +</ul> diff --git a/files/ru/web/api/geolocation/using_geolocation/index.html b/files/ru/web/api/geolocation_api/index.html index 39847dedc5..3082794454 100644 --- a/files/ru/web/api/geolocation/using_geolocation/index.html +++ b/files/ru/web/api/geolocation_api/index.html @@ -1,11 +1,12 @@ --- title: Использование геолокации -slug: Web/API/Geolocation/Using_geolocation +slug: Web/API/Geolocation_API tags: - Geolocation API - Guide - Intermediate translation_of: Web/API/Geolocation_API +original_slug: Web/API/Geolocation/Using_geolocation --- <div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div> diff --git a/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html b/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html index 5fa1055292..c945a1ba55 100644 --- a/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html +++ b/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html @@ -1,11 +1,12 @@ --- title: Использование Geolocation API -slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API +slug: Web/API/Geolocation_API/Using_the_Geolocation_API tags: - Geolocation API - Guide - Tutorial translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API +original_slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API --- <div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div> diff --git a/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html new file mode 100644 index 0000000000..0841bc211b --- /dev/null +++ b/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html @@ -0,0 +1,315 @@ +--- +title: Drag Operations +slug: Web/API/HTML_Drag_and_Drop_API/Drag_operations +translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations +original_slug: Web/Guide/HTML/Drag_and_drop/Drag_operations +--- +<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p> + +<p>Ниже описаны шаги, которые происходят при drag and drop операции.</p> + +<p class="note">Drag операции описываются в документе, используя {{domxref("DataTransfer")}} интерфейс. Этот документ не использует не{{domxref("DataTransferItem")}} интерфейс, не{{domxref("DataTransferItemList")}} интерфейс.</p> + +<h2 id="draggableattribute" name="draggableattribute"><code>draggable</code> атрибуты</h2> + +<p>На веб-странице, в некоторых случаях используется поведение drag (перетаскивания) по умолчанию. Включая выделенный текст, изображения и ссылки. Когда изображение иои ссылка переносятся, URL изображения или ссылки устанавливается в качестве данных drag и перетаскивание начинается. Для других элементов, они должны быть частью выделения для выполнения перетаскивания по умолчанию. Чтобы увидеть это в действии, выделите область веб-страницы, а затем нажмите и удерживайте кнопку мыши и перетащите выделение. Появится специфичный для ОС рендеринг выделенного фрагмента и будет следовать за указателем мыши при перетаскивании. Однако это поведение является только drag поведением по умолчанию, если нет слушателей, определяющих данные для перетаскивания.</p> + +<p>В HTML, кроме поведения по умолчанию изображений, ссылок и выделенных областей, ноикакие другие элементы по умолчанию не переносятся.</p> + +<p>Для перетаскивания других HTML-элементов, должны быть выполнены три пункта :</p> + +<ol> + <li>Установить <code>{{htmlattrxref("draggable")}}="</code><code>true"</code> на элемент, который вы хотите сделать перетаскиваемым.</li> + <li>Добавить слушатель события <code>{{event("dragstart")}}</code>.</li> + <li><a href="/en-US/docs/Web/API/DataTransfer/setData">Установить данные перетаскивания</a> в слушатель выше.</li> +</ol> + +<p>Вот пример, который позволяет перетаскивать часть содержимого.</p> + +<pre class="brush: html"><p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"> + This text <strong>may</strong> be dragged. +</p> +</pre> + +<p>Атрибут <code>{{htmlattrxref("draggable")}}</code> установлен в <code>"true"</code>, т.о. этот элемент становится перетаскиваемым. Если этот атрибут был опущен или установлен в <code>"false"</code>, то элемент не может быть перенесен, и вместо этого будет выбран текст.</p> + +<p>Атрибут <code>{{htmlattrxref("draggable")}}</code> может быть использован для любого элемента, включаяизображения и ссылки. Однако, для последних двух, значение по умолчанию - <code>true</code>, т.о. вы можете только использвать атрибут <code>{{htmlattrxref("draggable")}}</code> со значением <code>false</code> для отключение перетаскивания этих элементов.</p> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> Когда элемент становится перетаскиваемыми, tтекст или другие элементы в нем больше не могут быть выбраны обычным способом, щелкая и перетаскивая мышью. Вместо этого пользователь должен удерживать клавишу <kbd>Alt</kbd> чтобы выбрать текст с помощью мыши или клавиатуры.</p> +</div> + +<h2 id="dragstart" name="dragstart">Начало операции перетаскивания</h2> + +<p>В примере, слушатель добавлен для события {{event("dragstart")}} с использованием атрибута<code>{{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}</code>.</p> + +<pre class="brush: html"><p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"> + This text <strong>may</strong> be dragged. +</p> +</pre> + +<p>Когда пользователь начинает перетаскивание, запускается событиеdrag, the {{event("dragstart")}}.</p> + +<p>В этом примере слушатель {{event("dragstart")}} добавлен к самому перемещаемом элементу. Однако, вы можете слушать более высокого предка, так как событие перетаскивание высплывает вверх как и большинство событий.</p> + +<p>Внутри события {{event("dragstart")}}, вы можете указать <strong>drag данные</strong>, <strong>изображжение отклика</strong>, <strong>drag-эффекты</strong>, все это описано ниже. Однако, обязательны только <strong>drag данные</strong>. (Изображение и drag-эффекты по умолчанию, подходят в большинстве ситуаций)</p> + +<h2 id="dragdata" name="dragdata">Drag-данные</h2> + +<p>Все {{domxref("DragEvent","drag events")}} имеют свойство, называемое{{domxref("DragEvent.dataTransfer","dataTransfer")}}, которое содержит drag-данные (<code>dataTransfer</code> это {{domxref("DataTransfer")}} object).</p> + +<p>Когда происходит перетаскивание, данные должны быть связаны с перетаскиванием, которое определяет, что перетаскивается. Например, при перетаскивании выделенного текста в текстовое поле данные, связанные с элементом данных перетаскивания, являются самим текстом. Аналогично, при перетаскивании ссылки на веб-странице элемент данных перетаскивания является URL-адресом ссылки.</p> + +<p>{{domxref("DataTransfer","drag data")}} содержит два параметра, <strong>тип</strong> (или формат) данных, и <strong>значение </strong>данных. Формат это строковый тип (такой как <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code> текстовых данных), значение - строка текста. Когда начинается перетаскивание, вы добавляете данные, предоставляя тип и данные. Во время перетаскивания в слушателе события для событий <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code> , вы используете типы данных перетаскиваемых данных, чтобы проверить, разрешено ли удаление. Например, цель drop, которая принимает ссылки, будет проверять тип <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code>. В течение события drop, слушатель будет получать данные тащат и вставить его на место.</p> + +<p>Свойство {{domxref("DataTransfer","drag data's")}} {{domxref("DataTransfer.types","types")}} возвращает список MIME-типов {{domxref("DOMString")}}, таких как <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code> или <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#image" title="image/jpeg">image/jpeg</a></code>. Вы также можете создавать свои собственные типы. Большинство основные используемых типов описаны в <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="/en-US/docs/DragDrop/Recommended_Drag_Types">Recommended Drag Types</a>.</p> + +<p>Перетаскивание может включать элементы данных нескольких различных типов. Это позволяет предоставлять данные в более специфических типах, часто пользовательских, но по предоставляет резервные данные для drop, которые не поддерживают более специфические типы. Как правило, наименее специфичным типом будут обычные текстовые данные, использующие тип <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code>. Эти данные будут простым текстовым представлением.</p> + +<p>Установка элементов drag-данных {{domxref("DragEvent.dataTransfer","dataTransfer")}}, используя метод {{domxref("DataTransfer.setData","setData()")}}. Требуется два аргумента: тип данных и значение данных. Например:</p> + +<pre class="brush: js">event.dataTransfer.setData("text/plain", "Text to drag"); +</pre> + +<p>Здесь, значение - "Text to drag", формат - <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code>.</p> + +<p>Вы можете предусмотреть данные в нескольких форматах. Сделаем это, вызовем метод {{domxref("DataTransfer.setData","setData()")}} несколько раз с различными форматами. Вы должны вызывать его с форматами от большей специфичности к меньшей.</p> + +<pre class="brush: js">const dt = event.dataTransfer; +dt.setData("application/x.bookmark", bookmarkString); +dt.setData("text/uri-list", "https://www.mozilla.org"); +dt.setData("text/plain", "https://www.mozilla.org"); +</pre> + +<p>Добавлены данные трех различных форматов. Первый тип - <code>application/x.bookmark</code>, пользовательский тип.Другие приложения не поддерживают данный тип, но вы можете использовать пользовательский тип для перетаскивания между областями в одном приложениее или на одной странице.</p> + +<p>Предоставляя данные и в других типах, мы также можем поддерживать перетаскивание в другие приложения в менее специфичных формах. Тип <code>application/x.bookmark</code> может предоставлять данные с более подробной информацией для использования в приложении, в то время как другие типы могут включать только один URL-адрес или текстовую версию.</p> + +<p>Обратите внимание, что и <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code> и <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a></code> cодержат одни и те же данные в этом примере. Это часто бывает так, но это не обязательно.</p> + +<p>Если вы попытаетесь добавить данные дважды с тем же форматом, новые данные заменят старые данные, но в той же позиции в списке типов, что и старые данные.</p> + +<p>Вы можете очистить данные, используя метод {{domxref("DataTransfer.clearData","clearData()")}}, который принимает один аргумент: тип данных для удаления.</p> + +<pre class="brush: js">event.dataTransfer.clearData("text/uri-list"); +</pre> + +<p>Аргумент <code>type</code> в методе {{domxref("DataTransfer.clearData","clearData()")}} опционален. Если <code>type</code> не указан, данные, связанные со всеми типами, удаляются. Если перетаскивание не содержит элементов данных перетаскивания или все элементы были впоследствии очищены, то перетаскивание не произойдет.</p> + +<h2 id="dragfeedback" name="dragfeedback">Настройка изображения отклика drag</h2> + +<p>Когда происходит перетаскивание, полупрозрачное изображение генерируется из цели перетаскивания (событие "{{event("dragstart")}}" элемента срабатывает), и следует за указателем пользователя во время перетаскивания. Это изображение создается автоматически, поэтому вам не нужно создавать его самостоятельно. Однако вы можете использовать {{domxref("DataTransfer.setDragImage","setDragImage()")}} для задания пользовательского изображения отклика перетаскивания.</p> + +<pre class="brush: js">event.dataTransfer.setDragImage(image, xOffset, yOffset); +</pre> + +<p>Необходимы три аргумента. Первый - это ссылка на изображение. Эта ссылка обычно относится к элементу <code><img></code>, но также может относиться к элементу <code><canvas></code> или любому другому элементу. Изображение отклика будет генерироваться из того, как изображение выглядит на экране, для изображений они будут нарисованы в их первоначальном размере. Второй и третий аргументы метода {{domxref("DataTransfer.setDragImage","setDragImage()")}} - это смещения, в которых изображение должно появляться относительно указателя мыши.</p> + +<p>Также можно использовать изображения и canvas, которых нет в документе. Этот метод полезен при рисовании пользовательских изображений перетаскивания с помощью элемента canvas, как показано в следующем примере:</p> + +<pre class="brush: js">function dragWithCustomImage(event) { + const canvas = document.createElement("canvas"); + canvas.width = canvas.height = 50; + + const ctx = canvas.getContext("2d"); + ctx.lineWidth = 4; + ctx.moveTo(0, 0); + ctx.lineTo(50, 50); + ctx.moveTo(0, 50); + ctx.lineTo(50, 0); + ctx.stroke(); + + const dt = event.dataTransfer; + dt.setData('text/plain', 'Data to Drag'); + dt.setDragImage(canvas, 25, 25); +} +</pre> + +<p>В этом примере мы делаем один canvas перетаскивания. Поскольку размер холста составляет 50×50 пикселей, мы используем смещение половины этого (25), чтобы изображение было центрировано на указателе мыши.</p> + +<h2 id="drageffects" name="drageffects">Drag эффекты</h2> + +<p>При перетаскивании можно выполнить несколько операций. Операция <code>copy</code> используется для указания на то, что перетаскиваемые данные будут скопированы из текущего местоположения в место перетаскивания. Операция <code>move</code> используется для указания на то, что перетаскиваемые данные будут перемещены, а операция <code>link</code> используется для указания на то, что между исходным и удаляемым местоположениями будет создана некоторая форма связи или соединения.</p> + +<p>Вы можете указать, какая из трех операций разрешена для источника перетаскивания, установив свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} в слушателе событий<code>{{event("dragstart")}}</code>.</p> + +<pre class="brush: js">event.dataTransfer.effectAllowed = "copy"; +</pre> + +<p>В этом примере разрешена только <strong>копия</strong>.</p> + +<p>Вы можете комбинировать значения различными способами:</p> + +<dl> + <dt><code>none</code></dt> + <dd>никакая операция не разрешена</dd> + <dt><code>copy</code></dt> + <dd>только <code>copy</code></dd> + <dt><code>move</code></dt> + <dd>только <code>move</code></dd> + <dt><code>link</code></dt> + <dd>только <code>link</code></dd> + <dt><code>copyMove</code></dt> + <dd>только <code>copy</code> или <code>move</code></dd> + <dt><code>copyLink</code></dt> + <dd>только <code>copy</code> или <code>link</code></dd> + <dt><code>linkMove</code></dt> + <dd>только <code>link</code> или <code>move</code></dd> + <dt><code>all</code></dt> + <dd>только <code>copy</code>, <code>move</code>, или <code>link</code></dd> + <dt>uninitialized</dt> + <dd>Значение по умолчанию <code>all</code>.</dd> +</dl> + +<p>Обратите внимание, что эти значения должны использоваться так, как указано выше. Например, установка свойства {{domxref("DataTransfer.effectAllowed","effectAllowed")}} на <code>copyMove</code> позволяет выполнять операцию копирования или перемещения, но не позволяет пользователю выполнять операцию связывания. Если вы не измените свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}}, то любая операция разрешена, как и со значением '<code>all</code>'. Поэтому вам не нужно настраивать это свойство, если вы не хотите исключить определенные типы.</p> + +<p>Во время операции перетаскивания, слушатель для событий <code>{{event("dragenter")}}</code> или <code>{{event("dragover")}}</code> может проверить свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} , какие операции разрешены. Связанное свойство, {{domxref("DataTransfer.dropEffect","dropEffect")}}, должно быть установлено в пределах одного из этих событий, чтобы указать, какая единственная операция должна быть выполнена. Допустимые значения для {{domxref("DataTransfer.dropEffect","dropEffect")}} - <code>none</code>, <code>copy</code>, <code>move</code>, или <code>link</code>. Комбинированные значения для этого свойства не используются.</p> + +<p>С событиями <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code>, свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} инициализируется в соответствии с запросом пользователя. Пользователь может изменить желаемый эффект, нажав клавиши-модификаторы. Хотя точные используемые клавиши различаются в зависимости от платформы, обычно клавиши <kbd>Shift</kbd> и <kbd>Control</kbd> используются для переключения между копированием, перемещением и связыванием. Указатель мыши изменится, чтобы указать, какая операция требуется. Например, для <code>copy</code> курсор может появиться со знаком плюс рядом с ним.</p> + +<p>Вы можете изменять свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} во время событий <code>{{event("dragenter")}}</code> или <code>{{event("dragover")}}</code>, например, определенная drop-цель поддерживает только определенные операции. Вы можете изменить свойство {{domxref("DataTransfer.dropEffect","dropEffect")}}, чтобы переопределить действие пользователя, и обеспечить выполнение специфичной операции перетаскивания при ее наступлении. Обратите внимание, что этот эффект должен быть указан в списке свойств {{domxref("DataTransfer.effectAllowed","effectAllowed")}}. В противном случае ему будет присвоено другое допустимое значение.</p> + +<pre class="brush: js">event.dataTransfer.dropEffect = "copy"; +</pre> + +<p>В этом примере выполняется эффект копирования.</p> + +<p>Вы можете использовать значение <code>none</code>, чтобы указать, что в этом месте не допускается удаление, хотя в этом случае лучше не отменять событие.</p> + +<p>В событиях <code>{{event("drop")}}</code> и <code>{{event("dragend")}}</code>, yвы можете проверить свойства {{domxref("DataTransfer.dropEffect","dropEffect")}} для определения того, какой эффект был в конечном итоге выбран. Если выбран эффект "<code>move</code>",то исходные данные должны быть удалены из источника перетаскивания в событии<code>{{event("dragend")}}</code>.</p> + +<h2 id="droptargets" name="droptargets">Указание drop-целей</h2> + +<p>Слушатель для событий <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code> используются для указания допустимых drop-целей, то есть мест, где могут быть сброшены перетаскиваемые элементы. Большинство областей веб-страницы или приложения не являются допустимыми местами для сброса данных. Таким образом, обработка этих событий по умолчанию не допускает сброса перетаскиваемых данных.</p> + +<p>Если вы хотите разрешить сброс переносимых данных, вы должны предотвратить обработку по умолчанию, отменив оба события <code>dragenter</code> и <code>dragover</code>. Это можно сделать, либо вернув <code>false</code> из определенных атрибутом слушателя событий, либо вызвав метод {{domxref("Event.preventDefault","preventDefault()")}} событие. Последнее может быть более осуществимо в функции, определенной в отдельном скрипте.</p> + +<pre class="brush: html"><div ondragover="return false"> +<div ondragover="event.preventDefault()"> +</pre> + +<p>Вызывая метод {{domxref("Event.preventDefault","preventDefault()")}} во время обоих событий <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code> укажите, что падение разрешено в этом месте. Однако обычно вы захотите вызвать метод {{domxref("Event.preventDefault","preventDefault()")}} события только в определенных ситуациях (например, только при перетаскивании ссылки).</p> + +<p>Для этого вызовите функцию, которая проверяет условие и отменяет событие только при его выполнении. Если условие не выполнено, не отменяйте событие, и сброс перетаскиваемых данных не произойдет, если пользователь отпустит кнопку мыши.</p> + +<p>Наиболее распространенным является принятие или отклонение сброса в зависимости от типа данных перетаскивания при передаче данных — например, разрешение для изображений, ссылок или и того, и другого. Для этого вы можете проверить свойство {{domxref("DataTransfer.types","types")}} события {{domxref("DragEvent.dataTransfer","dataTransfer")}} (свойство). Свойство {{domxref("DataTransfer.types","types")}} возвращает массив из строк, добавленных при начале перетаскивания, в порядке от наиболее значимого к наименее значимому.</p> + +<pre class="brush: js">function doDragOver(event) { + const isLink = event.dataTransfer.types.includes("text/uri-list"); + if (isLink) { + event.preventDefault(); + } +}</pre> + +<p>В этом примере мы используем метод <code>includes</code> чтобы проверить, присутствует ли тип <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code> в списке типов. Если это так, мы отменим событие, так что сброс становится разрешен. Если перетаскиваемые данные не содержат ссылки, событие не будет отменено, и сброс не может произойти в этом месте.</p> + +<p>Вы также можете установить либо свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}}, либо свойство{{domxref("DataTransfer.dropEffect","dropEffect")}}, либо оба одновременно, если вы хотите указать более конкретные сведения о типе операции, которая будет выполнена. Естественно, изменение любого свойства не будет иметь никакого эффекта, если вы не отмените событие.</p> + +<h2 id="dropfeedback" name="dropfeedback">Drop Feedback</h2> + +<p>There are several ways in which you can indicate to the user that a drop is allowed at a certain location. The mouse pointer will update as necessary depending on the value of the {{domxref("DataTransfer.dropEffect","dropEffect")}} property.</p> + +<p>Although the exact appearance depends on the user's platform, typically a plus sign icon will appear for a '<code>copy</code>' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. This mouse pointer feedback is sufficient in many cases.</p> + +<p>However, you can also update the user interface with an insertion point or highlight as needed. For simple highlighting, you can use the <code>:-moz-drag-over</code> CSS pseudoclass on a drop target.</p> + +<pre class="brush: css">.droparea:-moz-drag-over { + outline: 1px solid black; +} +</pre> + +<p>In this example, the element with the class <code>droparea</code> will receive a 1 pixel black outline while it is a valid drop target, that is, if the {{domxref("Event.preventDefault","preventDefault()")}} method was called during the <code>{{event("dragenter")}}</code> event.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> You must cancel the <code>{{event("dragenter")}}</code> event for this pseudoclass to apply, as this state is not checked for the <code>{{event("dragover")}}</code> event.</p> +</div> + +<p>For more complex visual effects, you can also perform other operations during the <code>{{event("dragenter")}}</code> event. For example, by inserting an element at the location where the drop will occur. This might be an insertion marker, or an element that represents the dragged element in its new location. To do this, you could create an <a href="/en-US/docs/XUL/image" title="image">image</a> or <a href="/en-US/docs/XUL/separator" title="separator">separator</a> element and simply insert it into the document during the <code>{{event("dragenter")}}</code> event.</p> + +<p>The <code>{{event("dragover")}}</code> event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a <code>{{event("dragover")}}</code> event as well. You can use the event's {{domxref("MouseEvent.clientX","clientX")}} and {{domxref("MouseEvent.clientY","clientY")}} properties as with other mouse events to determine the location of the mouse pointer.</p> + +<p>Finally, the <code>{{event("dragleave")}}</code> event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the <code>:-moz-drag-over</code> pseudoclass will be removed automatically. The <code>{{event("dragleave")}}</code> event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.</p> + +<h2 id="drop" name="drop">Performing a Drop</h2> + +<p>When the user releases the mouse, the drag and drop operation ends.</p> + +<p>If the mouse is released over an element that is a valid drop target, that is, one that cancelled the last <code>{{event("dragenter")}}</code> or <code>{{event("dragover")}}</code> event, then the drop will be successful, and a <code>{{event("drop")}}</code> event will fire at the target. Otherwise, the drag operation is cancelled, and no <code>{{event("drop")}}</code> event is fired.</p> + +<p>During the <code>{{event("drop")}}</code> event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine which drag operation was desired.</p> + +<p>As with all drag-related events, the event's <code>{{domxref("DataTransfer","dataTransfer")}}</code> property will hold the data that is being dragged. The {{domxref("DataTransfer.getData","getData()")}} method may be used to retrieve the data again.</p> + +<pre class="brush: js">function onDrop(event) { + const data = event.dataTransfer.getData("text/plain"); + event.target.textContent = data; + event.preventDefault(); +} +</pre> + +<p>The {{domxref("DataTransfer.getData","getData()")}} method takes one argument, the type of data to retrieve. It will return the string value that was set when {{domxref("DataTransfer.setData","setData()")}} was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. (Naturally, though, you would likely know that the right type of data was available, as it was previously checked during a <code>{{event("dragover")}}</code> event.)</p> + +<p>In the example here, once the data has been retrieved, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a <code>p</code> or <code>div</code> element.</p> + +<p>In a web page, you should call the {{domxref("Event.preventDefault","preventDefault()")}} method of the event if you have accepted the drop, so that the browser's default handling is not triggered by the dropped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behavior will be prevented.</p> + +<p>You can retrieve other types of data as well. If the data is a link, it should have the type <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code>. You could then insert a link into the content.</p> + +<pre class="brush: js">function doDrop(event) { + const lines = event.dataTransfer.getData("text/uri-list").split("\n"); + lines.filter(line => !line.startsWith("#")) + .forEach(line => { + const link = document.createElement("a"); + link.href = line; + link.textContent = line; + event.target.appendChild(link); + }) + event.preventDefault(); +} +</pre> + +<p>This example inserts a link from the dragged data. As the name implies, the <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code> type actually may contain a list of URLs, each on a separate line. The above code uses <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="split">split</a></code> to break the string into lines, then iterates over the list of lines, and inserts each as a link into the document. (Note also that links starting with a number sign (<code>#</code>) are skipped, as these are comments.)</p> + +<p>For simple cases, you can use the special type <code>URL</code> just to retrieve the first valid URL in the list. For example:</p> + +<pre class="brush: js">const link = event.dataTransfer.getData("URL"); +</pre> + +<p>This eliminates the need to check for comments or iterate through lines yourself. However, it is limited to only the first URL in the list.</p> + +<p>The <code>URL</code> type is a special type. It is used only as a shorthand, and it does not appear within the list of types specified in the {{domxref("DataTransfer.types","types")}} property.</p> + +<p>Sometimes you may support some different formats, and you want to retrieve the data that is most specific that is supported. In the following example, three formats are supported by a drop target.</p> + +<p>The following example returns the data associated with the best-supported format:</p> + +<pre class="brush: js">function doDrop(event) { + const supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"]; + const types = event.dataTransfer.types.filter(type => supportedTypes.includes(type)); + if (types.length) { + const data = event.dataTransfer.getData(types[0]); + } + event.preventDefault(); +} +</pre> + +<h2 id="dragend" name="dragend">Окончание перетаскивания</h2> + +<p>Как только перетаскивание завершено, событие <code>{{event("dragend")}}</code> запускается в источнике перетаскивания (тот же элемент, который получил событие <code>{{event("dragstart")}}</code>). Это событие сработает, если перетаскивание было успешным<sup>[1]</sup> или если оно было отменено. Однако вы можете использовать свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} для определения, какая операция удаления произошла.</p> + +<p>Если свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} имеет значение <code>none</code> во время события <code>{{event("dragend")}}</code>, то перетаскивание было отменено. В противном случае эффект указывает, какая операция была выполнена. Источник может использовать эту информацию после операции перемещения для удаления перетаскиваемого элемента из старого расположения. Свойство {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} будет присвоено значение <code>true</code>, если пользователь отменил перетаскивание (нажав <kbd>Escape</kbd>), и <code>false</code> если перетаскивание было отменено по другим причинам, таким как недопустимая цель перетаскивания, или если оно было успешным.</p> + +<p>Сброс может произойти внутри того же окна или над другим приложением. Событие<code>{{event("dragend")}}</code>будет срабатывать всегда, независимо от этого. Свойство события {{domxref("MouseEvent.screenX","screenX")}} и {{domxref("MouseEvent.screenY","screenY")}} будут установлены в координаты экрана, где произошел сброс.</p> + +<p>Когда событие <code>{{event("dragend")}}</code> завершило распространение, операция перетаскивания завершена.</p> + +<p>[1]: В Gecko, {{event("dragend")}} не отправляется, если исходный узел движется или удаляется во время перетаскивания (например, при сбрасывании или {{event("dragover")}}). <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=460801" title="New D&D API: dragend is not dispatched if the source node was moved or removed during the drag session">Bug 460801</a></p> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a class="internal" href="/Web/API/HTML_Drag_and_Drop_API" title="HTML Drag and Drop API">HTML Drag and Drop API (Overview)</a></li> + <li><a class="internal" href="/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a></li> + <li><a class="internal" href="/Web/Guide/HTML/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li> +</ul> diff --git a/files/ru/web/api/html_drag_and_drop_api/index.html b/files/ru/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..1532a3573e --- /dev/null +++ b/files/ru/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,73 @@ +--- +title: Drag and drop +slug: Web/API/HTML_Drag_and_Drop_API +translation_of: Web/API/HTML_Drag_and_Drop_API +original_slug: Web/Guide/HTML/Drag_and_drop +--- +<p>Firefox и прочие приложения компании Mozilla имеют ряд возможностей для управления drag и drop. Это позволяет пользователю нажать и удерживая зажатой кнопку мыши над элементом, переместить его на другую позицию, отпустив кнопку мыши пользователь может оставить элемент на новой позиции. На протяжении всей операции перемещения полупрозрачное представление элемента следует за курсором мыши. Новая позиция элемента может располагаться в совершенно другом приложении. Веб сайты, и XUL приложения могут использовать эту функциональность для того, чтобы определить какие элементы страницы могут быть перемещены, а также определить элементы куда первые могут быть перемещены.</p> + +<div class="note">Эта часть покрывает функциональность drag и drop в Firefox 3.5 (Gecko 1.9.1) а также последующие версии. Для старого API для Firefox 3.0 и ранее, в котором нет соответствующей поддержки данной функциональности, смотрите <a href="/en-US/docs/Drag_and_Drop" title="Older Drag and Drop API">older API documentation</a>.</div> + +<h2 id="Основы_Drag_и_Drop">Основы Drag и Drop</h2> + +<p>Использование функциональности drag и drop подразумевает выполнения следующих шагов:</p> + +<ul> + <li>Определить переносимый элемент. Присвоить true атрибуту draggable элемента, который мы хотим перенести. Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute">The Draggable Attribute</a>.</li> + <li>Определить данные, которые могут быть перемещены, они могут быть разного формата. К примеру, текстовые данные, содержащие строку текста который может быть перемещен. Для детальной информации смотрите <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>.</li> + <li>(Необязательно) Определить изображение которое будет рядом с указателем мыши на протяжении всей операции перетаскивания. Если пользовательское изображение не будет определено, будет сгенерирована картинка по умолчанию, в зависимости от элемента, на котором была зажата кнопка мыши (что будет означать, что элемент переносят). Ознакомиться детально с установкой изображения перетаскивания можно по ссылке <a href="/en-US/docs/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Setting the Drag Feedback Image</a>.</li> + <li>Определить возможные эффекты переноса. Возможны три таких эффекта: <code>copy</code> показывает, что перемещаемые данные копируются из прежнего места расположения в новое, <code>move</code> показывает, что перемещаемые данные полностью переносятся на новое место, и <code>link</code> показывает, что создается некая форма взаимодействия или связи между исходной точкой и точкой назначения. На протяжении операции перемещения, картинка которая следует за курсором мыши может меняться в зависимости от того, может ли элемент быть перемещен в область под курсором. Если перенос разрешен, перемещение может быть произведено. Смотрите <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Drag Effects</a> для детальной информации.</li> + <li>Определить область назначения. По умолчанию браузер не позволяет перемещать что-либо на HTML элемент. Однако, чтобы сделать элемент активным для перемещения других элементов на него, просто отмените действие по умолчанию. То есть, подпишитесь на события "ondragenter" или "ondragover". Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets">Specifying Drop Targets</a>.</li> + <li>Обработать завершение переноса. Вы можете получить данные из переносимого элемента и произвести над ними необходимые операции. Для детальной информации, пожалуйста, смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drop">Performing a Drop</a>.</li> +</ul> + +<p>Mozilla и Firefox поддерживают ряд возможностей, которые выходят за рамку стандартной модели спецификации. Они позволяют пользователю перемещать несколько элементов и перемещать нестроковые данные. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a>.</p> + +<p>Для того, чтобы ознакомиться с общим списком данных поддерживаемых операцией drag and drop смотрите <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a>.</p> + +<p>Также доступны примеры с лучшей практикой использования операции drag and drop для перемещения данных разных типов:</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Recommended_Drag_Types#text" title="Text">Text</a></li> + <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="Links">Links</a></li> + <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#html" title="HTML and XML">HTML and XML</a></li> + <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#file" title="Files">Files</a></li> + <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#image" title="Images">Images</a></li> + <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#node" title="Document Nodes">Document Nodes</a></li> +</ul> + +<p>Смотри <a href="/en-US/docs/DragDrop/DataTransfer" title="DataTransfer">DataTransfer</a> для ссылки на объект DataTransfer.</p> + +<h2 id="events" name="events">События Drag</h2> + +<p>Ряд событий срабатывают на протяжении всей процедуры drag and drop. Запомните, что только drag-события срабатывают на протяжении операции перемещения; события мыши, такие как <code>mousemove</code> - нет. Также запомните, что события <code>dragstart и</code> <code>dragend</code> не срабатывают при попытке перенести файл из операционной системы в браузер.</p> + +<p>Свойство <a href="/en-US/docs/DragDrop/DataTransfer" title="dataTransfer">dataTransfer</a> всех событий перемещения содержит данные про все drag и drop операции.</p> + +<dl> + <dt><code>dragstart</code></dt> + <dd>Срабатывает когда элeмент начал перемещаться. В момент срабатывания события <code>dragstart</code> пользователь начинает перетаскивание элемента. Обработчик данного события может быть использован для сохранения информации о перемещаемом объекте, а также для изменения изображения, которое будет ассоциировано с перемещением. Дaнное событие не срабатывает, когда некоторый файл будет переноситься из операционной системы в браузер. Для детальной информации <a href="/en-US/docs/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">Starting a Drag Operation</a>.</dd> + <dt><code>dragenter</code></dt> + <dd>Срабатывает, когда перемещаемый элемент попадает на элемент-назначение. Обработчик этого события показывает, что элемент находится над объектом на который он может быть перенесен. Если же обработчика нет, либо он не совершает никаких действий перемещение по умолчанию запрещено. Это событие также используется для того, чтобы подсветить либо промаркировать объект над которым происходит перемещения в случае, если перемещение на данный элемент разрешено. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd> + <dt><code>dragover</code></dt> + <dd>Данное событие срабатывает каждые несколько сотен милисекунд, когда перемещаемый элемент оказывается над зоной, принимающей перетаскиваемые элементы. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd> + <dt><code>dragleave</code></dt> + <dd>Это событие запускается в момент перетаскивания, когда курсор мыши выходит за пределы элемента. Обработчикам следует убрать любую подсветку или иные индикаторы, указывавшие на присутствие курсора, чтобы тем самым обозначить реакцию на прекращение перетаскивания.</dd> + <dt><code>drag</code></dt> + <dd>Запускается при перемещении элемента или выделенного текста.</dd> + <dt><code>drop</code></dt> + <dd>Событие <code>drop</code> вызывается для элемента, над которым произошло "сбрасывание" перемещаемого элемента. Событие отвечает за извлечение "сброшенных" данных и их вставку. Событие будет срабатывать только при завершении операции перетаскивания, например, событие не сработает, если пользователь отменит перетаскивание нажатием Esc, или не донесет элемент, до цели. Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">Performing a Drop</a>.</dd> + <dt><code>dragend</code></dt> + <dd>Источник перетаскивания получит событие dragend, когда перетаскивание завершится, было оно удачным или нет. Это событие не вызывается при перетаскивании файла в браузер из ОС. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a>.</dd> +</dl> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a class="internal" href="/En/DragDrop/Drag_Operations" title="Drag and Drop">Drag Operations</a></li> + <li><a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items">Dragging and Dropping Multiple Items</a></li> + <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types">Recommended Drag Types</a></li> + <li><a class="internal" href="http://www.whatwg.org/specs/web-apps/current-work/#dnd" title="Drag and Drop">HTML5 Living Standard: Drag and Drop</a></li> + <li><a class="internal" href="/en-US/demos/tag/tech:dragndrop" title="Drag and Drop">DemoStudio: Drag and Drop</a></li> + <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDragService">nsIDragService</a></li> +</ul> diff --git a/files/ru/web/api/htmlaudioelement/audio()/index.html b/files/ru/web/api/htmlaudioelement/audio/index.html index 4d9e39dfab..56fb80134f 100644 --- a/files/ru/web/api/htmlaudioelement/audio()/index.html +++ b/files/ru/web/api/htmlaudioelement/audio/index.html @@ -1,9 +1,10 @@ --- title: Audio() -slug: Web/API/HTMLAudioElement/Audio() +slug: Web/API/HTMLAudioElement/Audio tags: - аудио translation_of: Web/API/HTMLAudioElement/Audio +original_slug: Web/API/HTMLAudioElement/Audio() --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/ru/web/api/element/accesskey/index.html b/files/ru/web/api/htmlelement/accesskey/index.html index 0230ecc9e0..01b872003b 100644 --- a/files/ru/web/api/element/accesskey/index.html +++ b/files/ru/web/api/htmlelement/accesskey/index.html @@ -1,8 +1,9 @@ --- title: Element.accessKey -slug: Web/API/Element/accessKey +slug: Web/API/HTMLElement/accessKey translation_of: Web/API/HTMLElement/accessKey translation_of_original: Web/API/Element/accessKey +original_slug: Web/API/Element/accessKey --- <div>{{APIRef("DOM")}}</div> diff --git a/files/ru/web/api/node/innertext/index.html b/files/ru/web/api/htmlelement/innertext/index.html index ef23b48d59..cb530097c2 100644 --- a/files/ru/web/api/node/innertext/index.html +++ b/files/ru/web/api/htmlelement/innertext/index.html @@ -1,7 +1,8 @@ --- title: Node.innerText -slug: Web/API/Node/innerText +slug: Web/API/HTMLElement/innerText translation_of: Web/API/HTMLElement/innerText +original_slug: Web/API/Node/innerText --- <div>{{APIRef("DOM")}}</div> diff --git a/files/ru/web/api/htmlelement/transitionend_event/index.html b/files/ru/web/api/htmlelement/transitionend_event/index.html new file mode 100644 index 0000000000..898af024d0 --- /dev/null +++ b/files/ru/web/api/htmlelement/transitionend_event/index.html @@ -0,0 +1,166 @@ +--- +title: transitionend +slug: Web/API/HTMLElement/transitionend_event +tags: + - CSS +translation_of: Web/API/HTMLElement/transitionend_event +original_slug: Web/Events/transitionend +--- +<p><span style="line-height: 1.5;">Событие </span><code style="font-style: normal; line-height: 1.5;">transitionend</code><span style="line-height: 1.5;"> срабатывает, когда</span><span style="line-height: 1.5;"> </span><a href="/en-US/docs/CSS/Using_CSS_transitions" style="line-height: 1.5;">CSS transition</a><span style="line-height: 1.5;"> закончил свое выполнение. В случае, когда анимация удаляется до ее завершения(например, если <a href="/en-US/docs/Web/CSS/transition-property">transition-property [en-US]</a> </span><span style="line-height: 1.5;">удаляется), то событие не срабатывает.</span></p> + +<h2 id="Общая_информация">Общая информация</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("TransitionEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Всплывает</dt> + <dd style="margin: 0 0 0 120px;">Да</dd> + <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt> + <dd style="margin: 0 0 0 120px;">Да</dd> + <dt style="float: left; text-align: right; width: 120px;">Элемент</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("document")}}, {{domxref("element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>propertyName</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The name of the CSS property associated with the transition.</td> + </tr> + <tr> + <td><code>elapsedTime</code> {{readonlyInline}}</td> + <td>Float</td> + <td>The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of <code>transition-delay</code>.</td> + </tr> + <tr> + <td><code>pseudoElement</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).</td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">/* + * Прослушивать событие <span style="font-size: 1rem;">transitionend на определенном элементе, т.е. </span><span style="font-size: 1rem;">#slidingMenu</span> + * Затем, вызвать определенную функцию, т.е. showMessage() + */ +function showMessage() { + alert('Transition закончил свое выполнение'); +} + +var element = document.getElementById("slidingMenu"); +element.addEventListener("transitionend", showMessage, false); +</pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transitions", "#transition-events", "transitionend")}}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 as <code>webkitTransitionEnd</code></td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>10.5 as <code>oTransitionEnd</code><br> + 12 as <code>otransitionend</code><br> + 12.10 as <code>transitionend</code></td> + <td>3.2 as <code>webkitTransitionEnd</code></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 as <code>webkitTransitionEnd</code></td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>10 as <code>oTransitionEnd</code><br> + 12 as <code>otransitionend</code><br> + 12.10 as <code>transitionend</code></td> + <td>3.2 as <code>webkitTransitionEnd</code></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Также">Также</h2> + +<ul> + <li>The {{ domxref("TransitionEvent") }} interface and the <a href="/en-US/docs/Mozilla_event_reference/transitionend" title="The 'transitionend' event"><code>transitionend</code></a> event.</li> +</ul> diff --git a/files/ru/web/api/htmlmediaelement/seeking_event/index.html b/files/ru/web/api/htmlmediaelement/seeking_event/index.html new file mode 100644 index 0000000000..145c72b01b --- /dev/null +++ b/files/ru/web/api/htmlmediaelement/seeking_event/index.html @@ -0,0 +1,81 @@ +--- +title: стримится +slug: Web/API/HTMLMediaElement/seeking_event +translation_of: Web/API/HTMLMediaElement/seeking_event +original_slug: Web/HTML/Element/video/seeking_event +--- +<p>Событие 'seeking' в случае, когда идет подгрузка видео</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/ru/web/api/htmlelement/dataset/index.html b/files/ru/web/api/htmlorforeignelement/dataset/index.html index 328b265afa..f69b78492a 100644 --- a/files/ru/web/api/htmlelement/dataset/index.html +++ b/files/ru/web/api/htmlorforeignelement/dataset/index.html @@ -1,7 +1,8 @@ --- title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset +slug: Web/API/HTMLOrForeignElement/dataset translation_of: Web/API/HTMLOrForeignElement/dataset +original_slug: Web/API/HTMLElement/dataset --- <p>{{ APIRef("HTML DOM") }}</p> diff --git a/files/ru/web/api/htmlelement/nonce/index.html b/files/ru/web/api/htmlorforeignelement/nonce/index.html index e47f3aea23..497dd8a6be 100644 --- a/files/ru/web/api/htmlelement/nonce/index.html +++ b/files/ru/web/api/htmlorforeignelement/nonce/index.html @@ -1,7 +1,8 @@ --- title: HTMLElement.nonce -slug: Web/API/HTMLElement/nonce +slug: Web/API/HTMLOrForeignElement/nonce translation_of: Web/API/HTMLOrForeignElement/nonce +original_slug: Web/API/HTMLElement/nonce --- <p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p> diff --git a/files/ru/web/api/htmlelement/tabindex/index.html b/files/ru/web/api/htmlorforeignelement/tabindex/index.html index fe41116fe4..5844679d21 100644 --- a/files/ru/web/api/htmlelement/tabindex/index.html +++ b/files/ru/web/api/htmlorforeignelement/tabindex/index.html @@ -1,7 +1,8 @@ --- title: HTMLElement.tabIndex -slug: Web/API/HTMLElement/tabIndex +slug: Web/API/HTMLOrForeignElement/tabIndex translation_of: Web/API/HTMLOrForeignElement/tabIndex +original_slug: Web/API/HTMLElement/tabIndex --- <div> <div>{{ APIRef("HTML DOM") }}</div> diff --git a/files/ru/web/api/mediatrackconstraints/эхоподавление/index.html b/files/ru/web/api/mediatrackconstraints/echocancellation/index.html index 3e8d1f1a4e..060a3d8b05 100644 --- a/files/ru/web/api/mediatrackconstraints/эхоподавление/index.html +++ b/files/ru/web/api/mediatrackconstraints/echocancellation/index.html @@ -1,6 +1,6 @@ --- title: MediaTrackConstraints.echoCancellation -slug: Web/API/MediaTrackConstraints/Эхоподавление +slug: Web/API/MediaTrackConstraints/echoCancellation tags: - API - Media Capture and Streams API @@ -13,6 +13,7 @@ tags: - Эхоподавление - справочник translation_of: Web/API/MediaTrackConstraints/echoCancellation +original_slug: Web/API/MediaTrackConstraints/Эхоподавление --- <div>{{APIRef("Media Capture and Streams")}}</div> diff --git a/files/ru/web/api/networkinformation/connection/index.html b/files/ru/web/api/navigator/connection/index.html index 607101a911..76f086052f 100644 --- a/files/ru/web/api/networkinformation/connection/index.html +++ b/files/ru/web/api/navigator/connection/index.html @@ -1,7 +1,8 @@ --- title: NetworkInformation.connection -slug: Web/API/NetworkInformation/connection +slug: Web/API/Navigator/connection translation_of: Web/API/Navigator/connection +original_slug: Web/API/NetworkInformation/connection --- <p>{{ apiref("Network Information API") }}</p> diff --git a/files/ru/web/api/navigatorgeolocation/index.html b/files/ru/web/api/navigatorgeolocation/index.html deleted file mode 100644 index 7287eee669..0000000000 --- a/files/ru/web/api/navigatorgeolocation/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: NavigatorGeolocation -slug: Web/API/NavigatorGeolocation -translation_of: Web/API/Geolocation -translation_of_original: Web/API/NavigatorGeolocation ---- -<div>{{APIRef("Geolocation API")}}</div> - -<p><code><strong>NavigatorGeolocation</strong></code> содержит метод, позволяющий объектам реализовывать его,, получая {{domxref("Geolocation")}} экземпляр объекта.</p> - -<p>Здесь нет объектов типа <code>NavigatorGeolocation</code>, но некоторые интерфейсы, например, {{domxref("Navigator")}} реализуют его.</p> - -<h2 id="Свойства">Свойства</h2> - -<p><em>Интерфейс <code>NavigatorGeolocation</code></em><em> не наследует каких-либо свойств.</em></p> - -<dl> - <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> - <dd>Возвращает объект {{domxref("Geolocation")}} позволяющий получить доступ к местоположению устройства.</dd> -</dl> - -<h2 id="Методы">Методы</h2> - -<p><em><code>Интерфейс </code></em><em><code>NavigatorGeolocation</code></em><em> ни реализует, ни наследует никаких методов.</em></p> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарий</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}</td> - <td>{{Spec2('Geolocation')}}</td> - <td>Изначальное описание</td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Свойство</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>5</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9</td> - <td>10.60<br> - {{CompatNo}} 15.0<br> - 16.0</td> - <td>5</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Свойство</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("4")}}</td> - <td>{{CompatUnknown}}</td> - <td>10.60</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li><a href="/en-US/docs/WebAPI/Using_geolocation">Использование геолокации.</a></li> -</ul> diff --git a/files/ru/web/api/node/baseuriobject/index.html b/files/ru/web/api/node/baseuriobject/index.html deleted file mode 100644 index 7f7dbfb782..0000000000 --- a/files/ru/web/api/node/baseuriobject/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Node.baseURIObject -slug: Web/API/Node/baseURIObject -translation_of: Web/API/Node -translation_of_original: Web/API/Node/baseURIObject ---- -<div>{{APIRef("DOM")}} {{Non-standard_header}}</div> - -<p>Свойство <code><strong>Node.baseURIObject</strong></code> возвращает {{Interface("nsIURI")}} представляющий базовый URL узла (обычно документ или элемент). Это похоже на {{domxref("Node.baseURI")}}, за исключением того, что возвращает nsIURI вместо строки.</p> - -<p>Это свойство существует на всех узлах (HTML, XUL, SVG, MathML, и т.д.), но только если скрипт пытается использовать его имея привилегии UniversalXPConnect.</p> - -<p>Смотрите {{domxref("Node.baseURI")}} для уточнения деталей что такое базовый URL.</p> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject -</pre> - -<h2 id="Notes" name="Notes">Примечания</h2> - -<p>Это свойство только для чтения; попытка записать информацию в него, будет сбрасывать исключения. <span id="result_box" lang="ru"><span class="hps">Кроме того,</span> <span class="hps">это свойство может</span> <span class="hps">быть</span> <span class="hps">доступно только для</span> <span class="hps">привилегированного</span> <span class="hps">кода.</span></span></p> - -<h2 id="Specification" name="Specification">Спецификация</h2> - -<p>Нет какой-либо спецификации.</p> diff --git a/files/ru/web/api/node/nodeprincipal/index.html b/files/ru/web/api/node/nodeprincipal/index.html deleted file mode 100644 index 11b342e6c3..0000000000 --- a/files/ru/web/api/node/nodeprincipal/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Node.nodePrincipal -slug: Web/API/Node/nodePrincipal -translation_of: Web/API/Node -translation_of_original: Web/API/Node/nodePrincipal ---- -<div> -<div>{{APIRef("DOM")}}</div> -{{Non-standard_header}} - -<p>Свойство <code><strong>Node.nodePrincipal</strong></code> только для чтения, возвращающее объект {{Interface("nsIPrincipal")}}, представляющий текущий контекст безопасности узла.</p> - -<p>{{Note("Это свойство существует во всех узлах (HTML, XUL, SVG, MathML, и т.д.), но только если скрипт пытается использовать chrome привилегии.")}}</p> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox"><em>principalObj</em> = element.nodePrincipal -</pre> - -<h2 id="Notes" name="Notes">Примечания</h2> - -<p>Это свойство только для чтения; пытаясь вводить информацию в него, будет сбрасывать исключение.<span id="result_box" lang="ru"><span class="hps">Кроме того,</span> <span class="hps">это свойство может</span> <span class="hps">быть</span> <span class="hps">доступно только для</span> <span class="hps">привилегированного</span> <span class="hps">кода.</span></span></p> - -<h2 id="Specification" name="Specification">Спецификация</h2> - -<p>Нет никакой спецификации.</p> -</div> - -<p> </p> diff --git a/files/ru/web/api/node.replacechild/index.html b/files/ru/web/api/node/replacechild/index.html index 6d69392c57..c1959cc322 100644 --- a/files/ru/web/api/node.replacechild/index.html +++ b/files/ru/web/api/node/replacechild/index.html @@ -1,6 +1,6 @@ --- title: Node.replaceChild -slug: Web/API/Node.replaceChild +slug: Web/API/Node/replaceChild tags: - API - DOM @@ -9,6 +9,7 @@ tags: - Method - Node translation_of: Web/API/Node/replaceChild +original_slug: Web/API/Node.replaceChild --- <div> {{ApiRef}}</div> diff --git a/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html b/files/ru/web/api/nondocumenttypechildnode/nextelementsibling/index.html index 84c40445d8..1e8d05c4c2 100644 --- a/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html +++ b/files/ru/web/api/nondocumenttypechildnode/nextelementsibling/index.html @@ -1,7 +1,8 @@ --- title: NonDocumentTypeChildNode.nextElementSibling -slug: Web/API/NonDocumentTypeChildNode/NonDocumentTypeChildNode.nextElementSibling +slug: Web/API/NonDocumentTypeChildNode/nextElementSibling translation_of: Web/API/NonDocumentTypeChildNode/nextElementSibling +original_slug: Web/API/NonDocumentTypeChildNode/NonDocumentTypeChildNode.nextElementSibling --- <div>{{APIRef("DOM")}}</div> diff --git a/files/ru/web/api/нотация/index.html b/files/ru/web/api/notation/index.html index a1f468a55d..d0343162fa 100644 --- a/files/ru/web/api/нотация/index.html +++ b/files/ru/web/api/notation/index.html @@ -1,9 +1,10 @@ --- title: Нотация -slug: Web/API/Нотация +slug: Web/API/Notation tags: - Нотация translation_of: Web/API/Notation +original_slug: Web/API/Нотация --- <div>{{APIRef("DOM")}}{{draft}}{{obsolete_header}}</div> diff --git a/files/ru/web/api/видимость_страницы_api/index.html b/files/ru/web/api/page_visibility_api/index.html index 9b181e92d1..9fc21bfaba 100644 --- a/files/ru/web/api/видимость_страницы_api/index.html +++ b/files/ru/web/api/page_visibility_api/index.html @@ -1,6 +1,6 @@ --- title: Видимость страницы API -slug: Web/API/Видимость_страницы_API +slug: Web/API/Page_Visibility_API tags: - API - DOM @@ -8,6 +8,7 @@ tags: - Показать страницу - Скрыть страницу translation_of: Web/API/Page_Visibility_API +original_slug: Web/API/Видимость_страницы_API --- <div>{{DefaultAPISidebar("Page Visibility API")}}</div> diff --git a/files/ru/web/api/push_api/using_the_push_api/index.html b/files/ru/web/api/push_api/using_the_push_api/index.html deleted file mode 100644 index 40086e4e91..0000000000 --- a/files/ru/web/api/push_api/using_the_push_api/index.html +++ /dev/null @@ -1,420 +0,0 @@ ---- -title: Использование Push API -slug: Web/API/Push_API/Using_the_Push_API -translation_of: Web/API/Push_API -translation_of_original: Web/API/Push_API/Using_the_Push_API ---- -<p class="summary"><span class="seoSummary">W3C <a href="/en-US/docs/Web/API/Push_API">Push API</a> предоставляет некоторый захватывающий новый функционал для разработчиков для использования в web-приложениях: эта статья предлагает вводную информацию о том, как настроить Push-уведомления и управлять ими, с помощью простого демо.</span></p> - -<p>Возможность посылать сообщения или уведомления от сервера клиенту в любое время — независимо от того, активно приложение или нет — было прерогативой нативных приложений некоторое время, и наконец пришло в Web! Поддерживается большинства возможностей Push сейчас возможна в браузерах Firefox 43+ и Chrome 42+ на настольных компьютерах, мобильные платформы, возможно, скоро присоединятся. {{domxref("PushMessageData")}} на данный момент экспериментально поддерживаются только в Firefox Nightly (44+), и реализация может меняться.</p> - -<div class="note"> -<p><strong>Примечание</strong>: Ранние версии Firefox OS использовали проприетарную версию этого API вызывая <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a>. Считается устаревшим по стандартам Push API.</p> -</div> - -<h2 id="Демо_основы_простого_сервера_чат-приложения">Демо: основы простого сервера чат-приложения</h2> - -<p>Демо, котрые мы создали, представляет начальное описание простого чат-приложения. Оно представляет собой форму, в которую вводятся данные, и кнопку для подписки на push-сообщения . Как только кнопка будет нажата, вы подпишитесь на push-сообщения, ваши данные будут записаны на сервере, а отправленное push-сообщение сообщит всем текущим подписчикам, что кто-то подписался.</p> - -<p>На данном этапе, имя нового подписчика появится в списке подписчиков, вместе с текстовым полем и кнопкой рассылки, чтобы позволить подписчику отправить сообщение.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p> - -<p>Чтобы запустить демо, следуйте инструкциям на странице <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. Заметте, что серверная компонента все еще нуждается в небольшой доработке для запуска в Chrome и в общем запусается более разумным путем. Но аспекты Push все еще могут быть полностью понятны; мы углубимся в это после того, как просмотрим технологии в процессе.</p> - -<h2 id="Обзор_технологии">Обзор технологии</h2> - -<p>Эта секция предоставляет описание того, какие технологии учавствуют в примере.</p> - -<p>Web Push-сообщения это часть семейства технологий <a href="/en-US/docs/Web/API/Service_Worker_API">сервис воркеров</a>; в первую очередь, для получения push-сообщений сервис воркер должен быть активирован на странице. Сервис воркер получает push-сообщения, и затем вы сами решаете, как уведомить об этом страницу. Вы можете:</p> - -<ul> - <li>Отправить <a href="/en-US/docs/Web/API/Notifications_API">Web-уведомление</a>, которое вызовет всплытие системного уведомления. Для этого необходимо подтверждение разрешения на отправку push-сообщений.</li> - <li>Отправить сообщение обратно главной странице через {{domxref("MessageChannel")}}.</li> -</ul> - -<p>Обычно необходима комбинация этих двух решений; демо внизу включает пример обоих.</p> - -<div class="note"> -<p><strong>Примечание</strong>: Вам необходим некоторый код, запущенный на сервере, для управления конечной точкой/шифроманием данных и отправки запросов push-сообщений. В нашем демо мы собрали на скорую руку сервер, используя <a href="https://nodejs.org/">NodeJS</a>.</p> -</div> - -<p>Сервис воркер так же должен подписаться на сервис push-сообщений. Каждой сессии предоставляется собственная уникальная конечная точка, когда она подписывается на сервис push-сообщений. Эта конечная точка получается из свойства ({{domxref("PushSubscription.endpoint")}}) объекта подписчика. Она может быть отправлена серверу и использоваться для пересылки сообщений активному сервис воркеру сессии. Каждый браузер имеет свой собсвтенный сервер push-сообщений для управления отправкой push-сообщений.</p> - -<h3 id="Шифрование">Шифрование</h3> - -<div class="note"> -<p><strong>Примечание</strong>: Для интерактивного краткого обзора, попробуйте JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p> -</div> - -<p>Для отправки данных с помошью push-сообщений необходимо шифрование. Для этого необходим публичный ключ, созданный с использованием метода {{domxref("PushSubscription.getKey()")}}, который основывается на некотором комплексе механизмов шифрования, которые выполняются на стороне сервера; читайте <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a>. Со временем появятся библиотеки для управления генерацией ключей и шифроманием/дешифрованием push-сообщений; для этого демо мы используем Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p> - -<div class="note"> -<p><strong>Примечание</strong>: Есть так же другая библиотека для управления шифрованием с помошью Node и Python, смотри <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p> -</div> - -<h3 id="Обобщение_рабочего_процесса_Push">Обобщение рабочего процесса Push</h3> - -<p>Общие сведения ниже это то, что необходимо для реализации push-сообщений. Вы можете найти больше информации о некоторых частях демо в последующих частях.</p> - -<ol> - <li>Запрос на разрешение web-уведомлений или что-то другое, что вы используете и для чего необходимо разрешение.</li> - <li>Регистрация сервис воркера для контроля над страницей с помошью вызова {{domxref("ServiceWorkerContainer.register()")}}.</li> - <li>Подписка на сервис push-уведомлений с помошью {{domxref("PushManager.subscribe()")}}.</li> - <li>Запрашивание конечной точки, соответствующей подписчику, и генерация публичного ключа клиента ({{domxref("PushSubscription.endpoint")}} и {{domxref("PushSubscription.getKey()")}}. Заметте, что <code>getKey()</code> на данный момент эксперементальная технологий и доступна только в Firefox.)</li> - <li>Отправка данных на сервер, чтобы тот мог присылать push-сообщения, когда необходимо. Это демо использует {{domxref("XMLHttpRequest")}}, но вы можете использовать <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>.</li> - <li>Если вы используете <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> для связи с сервис воркером, установите новый канал связи ({{domxref("MessageChannel.MessageChannel()")}}) и отправте <code>port2</code> сервис воркеру с помошью вызова {{domxref("Worker.postMessage()")}} для того, чтобы открыть канал связи. Вы так же должны настроить слушателя для ответов на сообщения, которые будут отправляться обратно с сервис воркера.</li> - <li>На стороне сервера сохраните конечную точку и все остальные необходимые данные, чтобы они были доступны, когда будет необходимо отправить push-сообщение добавленному подписчику (мы используем простой текстовый файл, но вы можете использовать базу данных или все что угодно на ваш вкус). В приложении на продакшене убедитесь, что скрываете эти данные, так что злоумышленники не смогут украсть конечную точку и разослать спам подписчикам в push-сообщениях.</li> - <li>Для отправки push-сообщений необходимо отослать HTTP <code>POST</code> конечному URL. Запрос должен включать <code>TTL</code> заголовок, который ограничивает время пребывания сообщения в очереди, если пользователь не в сети. Для добавления полезной информации в запросе, необходимо зашифровать ее (что включает публичнй ключ клиента). В нашем примере мы используем <a href="https://github.com/marco-c/web-push">web-push</a> модуль, который управляет всей тяжелой работой.</li> - <li>Поверх в сервис воркере настройте обработчик событий <code>push</code> для ответов на полученные push-сообщения. - <ol> - <li>Если вы хотите отвечать отправкой сообщения канала обратно основному контексту (смотри шаг 6), необходимо сначала получить ссылку на <code>port2,</code> который был отправлен контексту сервис воркера ({{domxref("MessagePort")}}). Это доступно в объекте {{domxref("MessageEvent")}}, передаваемого обработчику <code>onmessage </code>({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Конкретнее, он находится в свойстве <code>ports</code>, индекс 0. Когда это сделано, вы можете отправить сообщение обратно <code>port1</code>, используя {{domxref("MessagePort.postMessage()")}}.</li> - <li>Если вы хотитет ответить запуском системного уведомления, вы можете сделать это, вызвав {{domxref("ServiceWorkerRegistration.showNotification()")}}. Заметте, что в нашем коде мы вызываем его внутри метода {{domxref("ExtendableEvent.waitUntil()")}} — это растягивает время жизни события, пока уведомление не будет запущено, так что мы можем убедиться, что все, что мы хотели, чтобы произошло, действительно произошло.<span id="cke_bm_307E" style="display: none;"> </span></li> - </ol> - </li> -</ol> - -<h2 id="Сборка_демо">Сборка демо</h2> - -<p>Давайте пройдемся по коду для демо, чтобы понять, как все работает.</p> - -<h3 id="HTML_и_CSS">HTML и CSS</h3> - -<p>Нет ничего примечательного в HTML и CSS демо; HTML содержит простую форму для ввода данных для фхода в чат, кнопку для подписки на push-уведомления и двух списков, в которых перечислены подписчики и сообщения чата. После подписки появляются дополнительные средства для того, чтобы пользователь мог ввести сообщение в чат.</p> - -<p>CSS был оставлен очень минимальным, чтобы не отвлекать от объяснения того, как функционируют Push API.</p> - -<h3 id="Основной_файл_JavaScript">Основной файл JavaScript</h3> - -<p> JavaScript очевидно намного более существенный. Давайте взглянем на основной файл JavaScript.</p> - -<h4 id="Переменные_и_начальные_настройки">Переменные и начальные настройки</h4> - -<p>Для начала определим некоторые переменные, которые будем использовать в нашем приложении:</p> - -<pre class="brush: js">var isPushEnabled = false; -var useNotifications = false; - -var subBtn = document.querySelector('.subscribe'); -var sendBtn; -var sendInput; - -var controlsBlock = document.querySelector('.controls'); -var subscribersList = document.querySelector('.subscribers ul'); -var messagesList = document.querySelector('.messages ul'); - -var nameForm = document.querySelector('#form'); -var nameInput = document.querySelector('#name-input'); -nameForm.onsubmit = function(e) { - e.preventDefault() -}; -nameInput.value = 'Bob';</pre> - -<p>Сначала нам необходимо создать две булевы переменные, для того чтобы отслеживать подписку на push-сообщения и подтверждение разрешения на рассылку уведомлений.</p> - -<p>Далее, мы перехватываем ссылку на {{htmlelement("button")}} подписки/отписки и задаем переменные для сохранения ссылок на наши кнопку отправки сообщения/ввода (который создастся только после успешной подписки).<br> - <br> - Следующие переменные перехватывают ссылки на три основные {{htmlelement("div")}} элемента, так что мы можем включить в них элементы (к примеру, когда появится кнопка <em>Отправки Сообщения Чата</em> или сообщение появится с писке <em>Сообщений</em>).</p> - -<p>Finally we grab references to our name selection form and {{htmlelement("input")}} element, give the input a default value, and use <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> to stop the form submitting when the form is submitted by pressing return.</p> - -<p>Next, we request permission to send web notifications, using {{domxref("Notification.requestPermission","requestPermission()")}}:</p> - -<pre class="brush: js">Notification.requestPermission();</pre> - -<p>Now we run a section of code when <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> is fired, to start up the process of inialising the app when it is first loaded. First of all we add a click event listener to the subscribe/unsubscribe button that runs our <code>unsubscribe()</code> function if we are already subscribed (<code>isPushEnabled</code> is <code>true</code>), and <code>subscribe()</code> otherwise:</p> - -<pre class="brush: js">window.addEventListener('load', function() { - subBtn.addEventListener('click', function() { - if (isPushEnabled) { - unsubscribe(); - } else { - subscribe(); - } - });</pre> - -<p>Next we check to see if service workers are supported. If so, we register a service worker using {{domxref("ServiceWorkerContainer.register()")}}, and run our <code>initialiseState()</code> function. If not, we deliver an error message to the console.</p> - -<pre class="brush: js"> // Check that service workers are supported, if so, progressively - // enhance and add push messaging support, otherwise continue without it. - if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('sw.js').then(function(reg) { - if(reg.installing) { - console.log('Service worker installing'); - } else if(reg.waiting) { - console.log('Service worker installed'); - } else if(reg.active) { - console.log('Service worker active'); - } - - initialiseState(reg); - }); - } else { - console.log('Service workers aren\'t supported in this browser.'); - } -}); -</pre> - -<p>The next thing in the source code is the <code>initialiseState()</code> function — for the full commented code, look at the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>initialiseState()</code> source on Github</a> (we are not repeating it here for brevity's sake.)</p> - -<p><code>initialiseState()</code> first checks whether notifications are supported on service workers, then sets the <code>useNotifications</code> variable to <code>true</code> if so. Next, it checks whether said notifications are permitted by the user, and if push messages are supported, and reacts accordingly to each.</p> - -<p>Finally, it uses {{domxref("ServiceWorkerContainer.ready()")}} to wait until the service worker is active and ready to start doing things. Once its promise resolves, we retrieve our subscription to push messaging using the {{domxref("ServiceWorkerRegistration.pushManager")}} property, which returns a {{domxref("PushManager")}} object that we then call {{domxref("PushManager.getSubscription()")}} on. Once this second inner promise resolves, we enable the subscribe/unsubscribe button (<code>subBtn.disabled = false;</code>), and check that we have a subscription object to work with.</p> - -<p>If we do, then we are already subscribed. This is possible when the app is not open in the browser; the service worker can still be active in the background. If we're subscribed, we update the UI to show that we are subscribed by updating the button label, then we set <code>isPushEnabled</code> to <code>true</code>, grab the subscription endpoint from {{domxref("PushSubscription.endpoint")}}, generate a public key using {{domxref("PushSubscription.getKey()")}}, and run our <code>updateStatus()</code> function, which as you'll see later communicates with the server.</p> - -<p>As an added bonus, we set up a new {{domxref("MessageChannel")}} using the {{domxref("MessageChannel.MessageChannel()")}} constructor, grab a reference to the active service worker using {{domxref("ServiceworkerRegistration.active")}}, then set up a channel betweeen the main browser context and the service worker context using {{domxref("Worker.postMessage()")}}. The browser context receives messages on {{domxref("MessageChannel.port1")}}; whenever that happens, we run the <code>handleChannelMessage()</code> function to decide what to do with that data (see the {{anch("Handling channel messages sent from the service worker")}} section).</p> - -<h4 id="Subscribing_and_unsubscribing">Subscribing and unsubscribing</h4> - -<p>Let's now turn our attention to the <code>subscribe()</code> and <code>unsubscribe()</code> functions used to subscribe/unsubscribe to the push notification service.</p> - -<p>In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our <code>updateStatus()</code> function along with the update type (<code>subscribe</code>) to send the necessary details to the server.</p> - -<p>We also make the necessary updates to the app state (set <code>isPushEnabled</code> to <code>true</code>) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)</p> - -<p>The <code>unsubscribe()</code> function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.</p> - -<p>Appropriate error handling is also provided in both functions. </p> - -<p>We only show the <code>subscribe()</code> code below, for brevity; see the full <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">subscribe/unsubscribe code on Github</a>.</p> - -<pre class="brush: js">function subscribe() { - // Disable the button so it can't be changed while - // we process the permission request - - subBtn.disabled = true; - - navigator.serviceWorker.ready.then(function(reg) { - reg.pushManager.subscribe({userVisibleOnly: true}) - .then(function(subscription) { - // The subscription was successful - isPushEnabled = true; - subBtn.textContent = 'Unsubscribe from Push Messaging'; - subBtn.disabled = false; - - // Update status to subscribe current user on server, and to let - // other users know this user has subscribed - var endpoint = subscription.endpoint; - var key = subscription.getKey('p256dh'); - updateStatus(endpoint,key,'subscribe'); - }) - .catch(function(e) { - if (Notification.permission === 'denied') { - // The user denied the notification permission which - // means we failed to subscribe and the user will need - // to manually change the notification permission to - // subscribe to push messages - console.log('Permission for Notifications was denied'); - - } else { - // A problem occurred with the subscription, this can - // often be down to an issue or lack of the gcm_sender_id - // and / or gcm_user_visible_only - console.log('Unable to subscribe to push.', e); - subBtn.disabled = false; - subBtn.textContent = 'Subscribe to Push Messaging'; - } - }); - }); -}</pre> - -<h4 id="Updating_the_status_in_the_app_and_server">Updating the status in the app and server</h4> - -<p>The next function in our main JavaScript is <code>updateStatus()</code>, which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.</p> - -<p>The function does one of three different things, depending on the value of the <code>statusType</code> parameter passed into it:</p> - -<ul> - <li><code>subscribe</code>: The button and text input for sending chat messages are created and inserted into the UI, and an object is sent to the server via XHR containing the status type (<code>subscribe</code>), username of the subscriber, subscription endpoint, and client public key.</li> - <li><code>unsubscribe</code>: This basically works in the opposite way to subscribe — the chat UI elements are removed, and an object is sent to the server to tell it that the user has unsubscribed.</li> - <li><code>init</code>: This is run when the app is first loaded/initialised — it creates the chat UI elements, and sends an object to the server to tell it that which user has reinitialised (reloaded.)</li> -</ul> - -<p>Again, we have not included the entire function listing for brevity. Examine the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">full <code>updateStatus()</code> code on Github</a>.</p> - -<h4 id="Handling_channel_messages_sent_from_the_service_worker">Handling channel messages sent from the service worker</h4> - -<p>As mentioned earlier, when a <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a> is received from the service worker, our <code>handleChannelMessage()</code> function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:</p> - -<pre class="brush: js">channel.port1.onmessage = function(e) { - handleChannelMessage(e.data); -}</pre> - -<p>This occurs when the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js#L8">service worker sends a channel message over</a>.</p> - -<p>The <code>handleChannelMessage()</code> function looks like this:</p> - -<pre class="brush: js">function handleChannelMessage(data) { - if(data.action === 'subscribe' || data.action === 'init') { - var listItem = document.createElement('li'); - listItem.textContent = data.name; - subscribersList.appendChild(listItem); - } else if(data.action === 'unsubscribe') { - for(i = 0; i < subscribersList.children.length; i++) { - if(subscribersList.children[i].textContent === data.name) { - subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]); - } - } - nameInput.disabled = false; - } else if(data.action === 'chatMsg') { - var listItem = document.createElement('li'); - listItem.textContent = data.name + ": " + data.msg; - messagesList.appendChild(listItem); - sendInput.value = ''; - } -}</pre> - -<p>What happens here depends on what the <code>action</code> property on the <code>data</code> object is set to:</p> - -<ul> - <li><code>subscribe</code> or <code>init</code> (at both startup and restart, we need to do the same thing in this sample): An {{htmlelement("li")}} element is created, its text content is set to <code>data.name</code> (the name of the subscriber), and it is appended to the subscribers list (a simple {{htmlelement("ul")}} element) so there is visual feedback that a subscriber has (re)joined the chat.</li> - <li><code>unsubscribe</code>: We loop through the children of the subscribers list, find the one whose text content is equal to <code>data.name</code> (the name of the unsubscriber), and delete that node to provide visual feedback that someone has unsubscribed.</li> - <li><code>chatMsg</code>: In a similar manner to the first case, an {{htmlelement("li")}} element is created, its text content is set to <code>data.name + ": " + data.msg</code> (so for example "Chris: This is my message"), and it is appended to the chat messages list; this is how the chat messages appear on the UI for each user.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a> for more details.</p> -</div> - -<h4 id="Sending_chat_messages">Sending chat messages</h4> - -<p>When the <em>Send Chat Message</em> button is clicked, the content of the associated text field is sent as a chat message. This is handled by the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>sendChatMessage()</code> function</a> (again, not shown in full for brevity). This works in a similar way to the different parts of the <code>updateStatus()</code> function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a <code>statusType</code> of <code>chatMsg</code>.</p> - -<h3 id="The_server">The server</h3> - -<p>As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using <a href="http://nodejs.org/">NodeJS</a> (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js">server.js</a></code>), which handles the XHR requests sent by our client-side JavaScript code.</p> - -<p>It uses a text file (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>) to store subscription details; this file starts out empty. There are four different types of request, marked by the <code>statusType</code> property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:</p> - -<ul> - <li><code>subscribe</code>: The server adds the new subscriber's details into the subscription data store (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>), including the endpoint, and then sends a push message to all the endpoints it has stored to tell each subscriber that someone new has joined the chat.</li> - <li><code>unsubscribe</code>: The server finds the sending subscriber's details in the subscription store and removes it, then sends a push message to all remaining subscribers telling them the user has unsubscribed.</li> - <li><code>init</code>: The server reads all the current subscribers from the text file, and sends each one a push message to tell them a user has initialized (rejoined) the chat.</li> - <li><code>chatMsg</code>: Sent by a subscriber that wishes to deliver a message to all users; the server reads the list of all current subscribers from the subscription store file, then sends each one a push message containing the new chat message they should display.</li> -</ul> - -<p>A couple more things to note:</p> - -<ul> - <li>We are using the Node.js <a href="https://nodejs.org/api/https.html">https module</a> to create the server, because for security purposes, service workers only work on a secure connection. This is why we need to include the <code>.pfx</code> security cert in the app, and reference it when creating the server in the Node code.</li> - <li>When you send a push message without data, you simply send it to the endpoint URL using an HTTP <code>POST</code> request. However, when the push message contains data, you need to encrypt it, which is quite a complex process. As time goes on, libraries will appear to do this kind of thing for you; for this demo we used Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>. Have a look at the source code to get more of an idea of how the encryption is done (and read <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> for more details.) The library <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js#L43-L46">makes sending a push message simple</a>.</li> -</ul> - -<h3 id="The_service_worker">The service worker</h3> - -<p>Now let's have a look at the service worker code (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js">sw.js</a></code>), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's <code>action</code> property:</p> - -<ul> - <li><code>subscribe</code> or <code>unsubscribe</code>: We send a system notification via the <code>fireNotification()</code> function, but also send a message back to the main context on our {{domxref("MessageChannel")}} so we can update the subscriber list accordingly (see {{anch("Handling channel messages sent from the service worker")}} for more details).</li> - <li><code>init</code> or <code>chatMsg</code>: We just send a channel message back to the main context to handle the <code>init</code> and <code>chatMsg</code> cases (these don't need a system notification).</li> -</ul> - -<pre class="brush: js">self.addEventListener('push', function(event) { - var obj = event.data.json(); - - if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { - fireNotification(obj, event); - port.postMessage(obj); - } else if(obj.action === 'init' || obj.action === 'chatMsg') { - port.postMessage(obj); - } -});</pre> - -<p>Next, let's look at the <code>fireNotification()</code> function (which is blissfully pretty simple).</p> - -<pre class="brush: js">function fireNotification(obj, event) { - var title = 'Subscription change'; - var body = obj.name + ' has ' + obj.action + 'd.'; - var icon = 'push-icon.png'; - var tag = 'push'; - - event.waitUntil(self.registration.showNotification(title, { - body: body, - icon: icon, - tag: tag - })); -}</pre> - -<p>Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11855/subscribe-notification.png" style="display: block; height: 65px; margin: 0px auto; width: 326px;"></p> - -<p>Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. <code>waitUntil()</code> will extend the life cycle of the service worker until everything inside this method has completed.</p> - -<div class="note"> -<p><strong>Note</strong>: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as <code>Clients.openWindow()</code>) is properly implemented (see {{bug(1203324)}} for more details.)</p> -</div> - -<h2 id="Handling_premature_subscription_expiration">Handling premature subscription expiration</h2> - -<p>Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example. This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.</p> - -<pre class="brush: js language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'pushsubscriptionchange'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // do something, usually resubscribe to push and -</span> <span class="comment token"> // send the new subscription details back to the -</span> <span class="comment token"> // server via XHR or Fetch -</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.</p> - -<h2 id="Extra_steps_for_Chrome_support">Extra steps for Chrome support</h2> - -<p>To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.</p> - -<h3 id="Setting_up_Google_Cloud_Messaging">Setting up Google Cloud Messaging</h3> - -<p>To get this set up, follow these steps:</p> - -<ol> - <li>Navigate to the <a href="https://console.developers.google.com">Google Developers Console</a> and set up a new project.</li> - <li>Go to your project's homepage (ours is at <code>https://console.developers.google.com/project/push-project-978</code>, for example), then - <ol> - <li>Select the <em>Enable Google APIs for use in your apps</em> option.</li> - <li>In the next screen, click <em>Cloud Messaging for Android</em> under the <em>Mobile APIs</em> section.</li> - <li>Click the <em>Enable API</em> button.</li> - </ol> - </li> - <li>Now you need to make a note of your project number and API key because you'll need them later. To find them: - <ol> - <li><strong>Project number</strong>: click <em>Home</em> on the left; the project number is clearly marked at the top of your project's home page.</li> - <li><strong>API key</strong>: click <em>Credentials</em> on the left hand menu; the API key can be found on that screen.</li> - </ol> - </li> -</ol> - -<h3 id="manifest.json">manifest.json</h3> - -<p>You need to include a Google app-style <code>manifest.json</code> file in your app, which references the project number you made a note of earlier in the <code>gcm_sender_id</code> parameter. Here is our simple example <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/manifest.json">manifest.json</a>:</p> - -<pre class="brush: js">{ - "name": "Push Demo", - "short_name": "Push Demo", - "icons": [{ - "src": "push-icon.png", - "sizes": "111x111", - "type": "image/png" - }], - "start_url": "/index.html", - "display": "standalone", - "gcm_sender_id": "224273183921" -}</pre> - -<p>You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:</p> - -<pre class="brush: html"><link rel="manifest" href="manifest.json"></pre> - -<h3 id="userVisibleOnly">userVisibleOnly</h3> - -<p>Chrome requires you to set the <a href="/en-US/docs/Web/API/PushManager/subscribe#Parameters"><code>userVisibleOnly</code> parameter</a> to <code>true</code> when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L127">seen in action in our <code>subscribe()</code> function</a>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li> - <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in <a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>. Thanks for the awesome work, Matt!</p> -</div> diff --git a/files/ru/web/api/randomsource/index.html b/files/ru/web/api/randomsource/index.html deleted file mode 100644 index d56506a90a..0000000000 --- a/files/ru/web/api/randomsource/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: RandomSource -slug: Web/API/RandomSource -tags: - - API - - Interface - - NeedsTranslation - - RandomSource - - Reference - - TopicStub - - Web Crypto API -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: Web/API/RandomSource ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p><strong><code>RandomSource</code></strong> представляет собой источник криптографически безопасных случайных чисел. Он доступен через {{domxref("Crypto")}} объект глобального объекта: {{domxref("Window.crypto")}} на веб страницах, {{domxref("WorkerGlobalScope.crypto")}} для воркеров.</p> - -<p><code>RandomSource</code> не является интерфейсом и объект этого типа не может быть создан.</p> - -<h2 id="Свойства">Свойства</h2> - -<p><em><code>RandomSource</code> не объявляет и не наследует никаких свойств.</em></p> - -<dl> -</dl> - -<h2 id="Методы">Методы</h2> - -<dl> - <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> - <dd>Наполняет {{ domxref("ArrayBufferView") }} криптографически безопасными случайными числовыми значениями.</dd> -</dl> - -<h2 id="Specification" name="Specification">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Коммент</th> - </tr> - <tr> - <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td> - <td>{{Spec2('Web Crypto API')}}</td> - <td>Изначальное определение</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>11.0 {{ webkitbug("22049") }}</td> - <td>{{CompatGeckoDesktop(21)}} [1]</td> - <td>11.0</td> - <td>15.0</td> - <td>3.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{ CompatNo() }}</td> - <td>23</td> - <td>{{CompatGeckoMobile(21)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Although the transparent <code>RandomSource</code> is only available since Firefox 26, the feature was available in Firefox 21.</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{ domxref("Window.crypto") }} to get a {{domxref("Crypto")}} object.</li> - <li>{{jsxref("Math.random")}}, не криптографический источник случайных чисел.</li> -</ul> diff --git a/files/ru/web/api/slotable/index.html b/files/ru/web/api/slotable/index.html deleted file mode 100644 index af6ec4765c..0000000000 --- a/files/ru/web/api/slotable/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Slotable -slug: Web/API/Slotable -tags: - - миксины -translation_of: Web/API/Slottable -translation_of_original: Web/API/Slotable ---- -<p>{{APIRef("Shadow DOM")}}</p> - -<p>Миксин <code>Slotable</code> определяет возможности, которые позволяют нодам становиться контентом элемента {{htmlelement("slot")}} — следующие возможности включены в {{domxref("Element")}} и {{domxref("Text")}}.</p> - -<h2 id="Свойства">Свойства</h2> - -<dl> - <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt> - <dd>Возвращает {{htmlelement("slot")}}, в который вставлена нода.</dd> -</dl> - -<h2 id="Методы">Методы</h2> - -<p>Нет.</p> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Комментарии</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#slotable','Slotable')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Первое определение.</td> - </tr> - </tbody> -</table> - -<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> - - - -<p>{{Compat("api.Slotable")}}</p> diff --git a/files/ru/web/api/storage/localstorage/index.html b/files/ru/web/api/storage/localstorage/index.html deleted file mode 100644 index f0fab82609..0000000000 --- a/files/ru/web/api/storage/localstorage/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: LocalStorage -slug: Web/API/Storage/LocalStorage -translation_of: Web/API/Window/localStorage -translation_of_original: Web/API/Web_Storage_API/Local_storage ---- -<p><code>localStorage</code> это аналог <code><a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a></code>, с некоторыми same-origin правилами, но значения хранятся постоянно (в отличии от sessions). <code>localStorage</code> появился в Firefox 3.5.</p> - -<div class="note"><strong>Примечание:</strong> Когда браузер переходит в режим приватного просмотра, создается новое временное хранилище. Изначально оно пустое. После выхода из режима приватного просмотра временное хранилище очищается.</div> - -<pre class="brush:js" style="font-size: 14px;">// Сохраняет данные в текущий local store -localStorage.setItem("username", "John"); - -// Извлекает ранее сохраненные данные -alert( "username = " + localStorage.getItem("username"));</pre> - -<p class="note"><code>localStorage</code>'s позволяет постоянно хранить некоторую полезную информацию, включая счетчики посещения страницы, как показано в примере <a href="http://codepen.io/awesom3/pen/Hlfma">this tutorial on Codepen</a>.</p> - -<h4 id="Совместимость" style="line-height: 18px; font-size: 1.28571428571429rem;">Совместимость</h4> - -<p><code>Storage</code> objects недавно добавлен в стандарт. Он может отсутствовать в некоторых браузерах. Вы можете работать с этой технологией добавив в страницу один из двух скриптов, которые представлены ниже. <code>localStorage</code> object реализуется програмно, если нет встроенной реализации.</p> - -<p>Этот алгоритм является точной имитацией <code>localStorage</code> object, но для хранения использует cookies.</p> - -<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) { - Object.defineProperty(window, "localStorage", new (function () { - var aKeys = [], oStorage = {}; - Object.defineProperty(oStorage, "getItem", { - value: function (sKey) { return sKey ? this[sKey] : null; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "key", { - value: function (nKeyId) { return aKeys[nKeyId]; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "setItem", { - value: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "length", { - get: function () { return aKeys.length; }, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "removeItem", { - value: function (sKey) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "clear", { - value: function () { - if(!aKeys.length) { return; } - for (var sKey in aKeys) { - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - } - }, - writable: false, - configurable: false, - enumerable: false - }); - this.get = function () { - var iThisIndx; - for (var sKey in oStorage) { - iThisIndx = aKeys.indexOf(sKey); - if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } - else { aKeys.splice(iThisIndx, 1); } - delete oStorage[sKey]; - } - for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } - for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { - aCouple = aCouples[nIdx].split(/\s*=\s*/); - if (aCouple.length > 1) { - oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); - aKeys.push(iKey); - } - } - return oStorage; - }; - this.configurable = false; - this.enumerable = true; - })()); -} -</pre> - -<div class="note"><strong>Примечание:</strong> Максимальныйe размер данных, которые могут быть сохранены, ограничен возможностями cookies. Используйте functions <code>localStorage.setItem()</code> и <code>localStorage.removeItem()</code> для добавления, изменения, или удаления ключа. Использование прямого присвоения <code>localStorage.yourKey = yourValue;</code> и <code>delete localStorage.yourKey;</code> для установки и удаления ключа <strong>не безопасно с этим кодом</strong>. Вы также можете изменить это имя (вместо window.localStorage прописать другое имя) и использовать объект для управления document's cookies, не обращая внимания на localStorage object.</div> - -<div class="note"><strong>Примечание:</strong> Если изменить строку <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> на: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (и изменить имя объекта), он превратится в <code>sessionStorage</code> polyfill больше, чем в <code>localStorage</code> polyfill. Однако эта реализация будет хранить общие значения для всех вкладок и окон браузера (and will only be cleared when all browser windows have been closed), в то время как полностью совместимая <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> реализация хранит значения</span><span style="line-height: 1.5em;"> to the current browsing context only.</span></div> - -<p>Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer < 8 (<strong>tested and working even in Internet Explorer 6</strong>). It also makes use of cookies.</p> - -<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) { - window.localStorage = { - getItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return null; } - return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); - }, - key: function (nKeyId) { - return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); - }, - setItem: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - this.length = document.cookie.match(/\=/g).length; - }, - length: 0, - removeItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - this.length--; - }, - hasOwnProperty: function (sKey) { - return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); - } - }; - window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; -} -</pre> - -<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, and <code>localStorage.removeItem()</code> to get, add, change, or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set, or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> - -<div class="note"><strong>Note:</strong> By changing the string <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div> - -<h4 id="Compatibility_and_relation_with_globalStorage" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibility and relation with globalStorage</h4> - -<p class="note"><code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. For example, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is not able to access the same <code>localStorage</code> object as <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> but they can access the same <code>globalStorage</code> item. <code>localStorage</code> is a standard interface while <code>globalStorage</code> is non-standard so you shouldn't rely on these.</p> - -<p>Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items; only extending <code>StorageObsolete.prototype</code> does.</p> - -<h4 id="Storage_format">Storage format</h4> - -<p><code>Storage</code> keys and values are both stored in the UTF-16 <a href="/en-US/docs/Web/API/DOMString">DOMString</a> format, which uses 2 bytes per character.</p> - -<p> </p> diff --git a/files/ru/web/api/svgaelement/svgalement.target/index.html b/files/ru/web/api/svgaelement/svgalement.target/index.html deleted file mode 100644 index dcd76310d4..0000000000 --- a/files/ru/web/api/svgaelement/svgalement.target/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: SVGAElement.target -slug: Web/API/SVGAElement/SVGAlement.target -translation_of: Web/API/SVGAElement/target -translation_of_original: Web/API/SVGAElement/SVGAlement.target ---- -<p>{{APIRef("SVGAElement")}}</p> - -<p> </p> - -<p>Свойство <code><strong>SVGAElement.target</strong></code> для чтения только {{domxref ("SVGAElement")}} возвращает объект {{domxref ("SVGAnimatedString")}}, который указывает часть целевого окна, фрейма, панель, в которую открывается при активации ссылки.</p> - -<p>Это свойство используется, когда существует множество возможных целей для конечного ресурса, например, когда родительский документ является документом HTML или HTML-документом mlti-frame.</p> - -<p> </p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre><code><em>myLink</em>.target = '<em>value</em>';</code></pre> - -<h3 id="Стоимость">Стоимость</h3> - -<p>{{Domxref ("SVGAnimatedString")}}, указывающий конечную цель ресурса, которая открывает документ при активации ссылки.</p> - -<p>Значения для {{domxref ("target")}} можно увидеть <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElementTargetAttribute">here</a></p> - -<h2 id="Пример">Пример</h2> - -<p>Код взят из <a href="/en-US/docs/Web/API/SVGAElement#Example">"SVGAElement example code"</a></p> - -<pre class="brush: js">... -var linkRef = document.querySelector('a'); -linkRef.target ='_blank'; -...</pre> - -<h2 id="Характеристики">Характеристики</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td>Спецификация</td> - <td>Статус</td> - <td>Комментарий</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>9.0</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{ SVGAttr("target") }}</li> -</ul> diff --git a/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html deleted file mode 100644 index ea8ec86586..0000000000 --- a/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Проверка подлинности данных с паролем -slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password -tags: - - HMAC - - Web Crypto -translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password ---- -<p>{{APIRef("Web Crypto API")}}{{draft}}</p> - -<p>Проверка подлинности данных может быть выполнена с помощью Web Crypto API. В этой статье мы покажем как создавать и управлять подписями, используя хэш-функцию и пароль.</p> - -<p>HMAC алгоритм генерирует хэш на основе передаваемых ключа и данных, которые нужно подписать. Позже, идентичный хэш может быть вычислен заного любым пользователем, у которого имеется ключ. Необходимость ключа позволяет хранить данные и хэш вместе: злоумышленник не сможет создать хэш для измененных данных, не имея ключа.</p> - -<p>Стоит заметить, что алгоритм никак не связан с какой-либо другой информацией о владельце: знание ключа – необходимое и достаточное условие для изменения данных.</p> - -<p>Предположим, данные хранятся на компьютере. Чтобы получить доступ к записи или чтению, мы будем использовать <code>localforage.js</code> – библиотека-обертка над хранилищами браузера. Эта библиотека необязательна и используется в качестве примера для удобства, чтобы сосредоточиться на криптографии.</p> - -<p>Данные, доступ к которым мы хотим получить, имеют следующую форму:</p> - -<p> </p> - -<p>где <code>data</code><em> </em>– данные для подписания и <code>signature</code> – подпись, информация для проверки подлинности.</p> - -<p>Криптографические ключи невозможно выучить наизусть, а обычные пароли недостаточно безопасны. Чтобы решить эту проблему, криптографы создали алгоритмы для создания криптографических ключей из паролей. Знание пароля позволяет воссоздать ключ и использовать его.</p> - -<p>Запрашиваем пароль у пользователя для генерации ключа:</p> - -<pre> </pre> - -<p>С этим ключом мы можем вычислить хэш данных.</p> - -<pre> </pre> diff --git a/files/ru/web/api/web_workers_api/using_web_workers/index.html b/files/ru/web/api/web_workers_api/using_web_workers/index.html new file mode 100644 index 0000000000..8fd2faebd3 --- /dev/null +++ b/files/ru/web/api/web_workers_api/using_web_workers/index.html @@ -0,0 +1,872 @@ +--- +title: Использование Web Workers +slug: Web/API/Web_Workers_API/Using_web_workers +tags: + - воркер + - поток +translation_of: Web/API/Web_Workers_API/Using_web_workers +original_slug: DOM/Using_web_workers +--- +<div>{{DefaultAPISidebar("Web Workers API")}}</div> + +<p>Web Worker-ы предоставляют простое средство для запуска скриптов в фоновом потоке. Поток Worker'а может выполнять задачи без вмешательства в пользовательский интерфейс. К тому же, они могут осуществлять ввод/вывод, используя <code><a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">XMLHttpRequest</a></code> (хотя атрибуты <code>responseXML</code> и <code>channel</code> всегда будут равны null). Существующий Worker может отсылать сообщения JavaScript коду-создателю через обработчик событий, указанный этим кодом (и наоборот). Эта статья дает детальную инструкцию по использованию Web Workers.</p> + +<h2 id="Web_Workers_API">Web Workers API</h2> + +<p>Worker - это объект, создаваемый конструктором (например, {{domxref("Worker.Worker", "Worker()")}}) и запускающий именной JavaScript файл — этот файл содержит код, который будет выполнен в потоке Worker'а; объекты же Workers запускаются в другом глобальном контексте, отличающемся от текущего, - {{domxref("window")}}. Поэтому использование переменной {{domxref("window")}} для получения текущего глобального контекста (вместо {{domxref("window.self","self")}}) внутри {{domxref("Worker")}} вернет ошибку.</p> + +<p>Контекст Worker'а представлен объектом {{domxref("DedicatedWorkerGlobalScope")}} в случае выделенных Workers (обычные Workers используются одним скриптом; совместные Workers используют объект {{domxref("SharedWorkerGlobalScope")}}). Выделенный Worker доступен только из скрипта-родителя, в то время как совместные Workers могут быть доступны из нескольких сценариев.</p> + +<div class="note"> +<p><strong>Заметка</strong>: Смотрите <a href="/en-US/docs/Web/API/Web_Workers_API">страницу Web Workers API</a> для справки по Workers и прочие руководства.</p> +</div> + +<p>Вы можете запускать любой код внутри потока worker-а, за некоторыми исключениями. Например, вы не можете прямо манипулировать DOM внутри worker-а, или использовать некоторые методы по умолчанию и свойства объекта {{domxref("window")}}. Но вы можете использовать большой набор опций, доступный под <code>Window</code>, включая <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>, и механизмы хранения данных, таких как <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> и относящихся только к Firefox OS <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>. Для дополнительной информации смотрите <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a>.</p> + +<p>Данные передаются между worker-ами и главным потоком через систему сообщений — обе стороны передают свои сообщения, используя метод <code>postMessage()</code> и отвечают на сообщения при помощи обработчика событий <code>onmessage</code> (сообщение хранится в аттрибуте data события {{event("Message")}}). Данные при этом копируются, а не делятся.</p> + +<p>Объекты Workers могут, в свою очередь, создавать новые объекты workers, и так до тех пор, пока всё работает в рамках текущей страницы. Плюс к этому, объекты workers могут использовать <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> для сетевого ввода/вывода, но есть исключение - атрибуты <code>responseXML</code> и <code>channel</code> объекта <code>XMLHttpRequest</code> всегда возвращают <code>null</code>.</p> + +<h2 id="Выделенные_Workers">Выделенные Workers</h2> + +<p>Как уже упоминалось выше, выделенный Worker доступен только для скрипта, который его вызвал. В этом разделе речь пойдет о JavaScript, который можно найти в нашем <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">основном примере выделенного Worker</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">запустить скрипт</a>): этот пример позволяет ввести два числа для умножения. Эти числа отправляются в Worker, перемножаются, а результат возвращается на страницу и отображается.</p> + +<p>Этот пример достаточно тривиален, но для ознакомления с базовыми концепциями worker-ов мы решили его упростить. Более продвинутые детали описаны далее в статье.</p> + +<h3 id="Определение_поддержки_Worker">Определение поддержки Worker</h3> + +<p>Для большего контроля над ошибками и обратной совместимости, рекомендуется обернуть ваш код доступа к worker-у в следующий (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> + +<pre class="brush: js notranslate">if (window.Worker) { + + ... + +}</pre> + +<h3 id="Создание_выделенного_worker">Создание выделенного worker</h3> + +<p>Создание нового worker-а — это легко. Всё что вам нужно это вызвать конструктор {{domxref("Worker.Worker", "Worker()")}}, указав URI скрипта для выполнения в потоке worker-а (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> + +<div style="overflow: hidden;"> +<pre class="brush: js notranslate">var myWorker = new Worker("worker.js"); +</pre> +</div> + +<h3 id="Передача_сообщений_в_и_из_выделенного_worker">Передача сообщений в и из выделенного worker</h3> + +<p>Магия worker-ов происходит через {{domxref("Worker.postMessage", "postMessage()")}} метод и обработчик событий {{domxref("Worker.onmessage", "onmessage")}}. Когда вы хотите отправить сообщение в worker, вы доставляете сообщение к нему вот так (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> + +<pre class="brush: js notranslate">first.onchange = function() { + myWorker.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +} + +second.onchange = function() { + myWorker.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +}</pre> + +<p>В приведенном фрагменте кода мы имеем два {{htmlelement("input")}} элемента, представленных переменными <code>first</code> и <code>second</code>; когда значение любой из переменных изменяется,<code> myWorker.postMessage([first.value,second.value])</code> используется для отправки обоих значений, представленных в виде массива, в worker. Посредством аргумента <code>message</code> возможна передача практически любых данных в worker.</p> + +<p>Внутри worker-a мы можем обрабатывать сообщения и отвечать на них при помощи добавления обработчика события <code>onmessage</code> подобным образом (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>):</p> + +<pre class="brush: js notranslate">onmessage = function(e) { + console.log('Message received from main script'); + var workerResult = 'Result: ' + (e.data[0] * e.data[1]); + console.log('Posting message back to main script'); + postMessage(workerResult); +}</pre> + +<p>Обработчик <code>onmessage</code> позволяет нам запустить некий код всякий раз, когда получен пакет с сообщением, доступным в атрибуте <code>data</code> события <code>message</code>. В примере выше мы просто перемножаем вместе две цифры, после чего используем <code>postMessage()</code> снова, чтобы отправить полученный результат назад в основной поток.</p> + +<p>Возвращаясь в основной поток, мы используем <code>onmessage</code> снова, чтобы отреагировать на сообщение, отправленное нам назад из worker-а:</p> + +<pre class="brush: js notranslate">myWorker.onmessage = function(e) { + result.textContent = e.data; + console.log('Message received from worker'); +}</pre> + +<p>В примере выше мы берём данные из события сообщения и ставим их как <code>textContent</code> у результирующего абзаца, чтобы показать пользователю результат этой калькуляции.</p> + +<p class="note"><strong>Заметка</strong>: Обратите внимание, что <font face="consolas, Liberation Mono, courier, monospace"><code>onmessage()</code> и <code>postmessage()</code> должны вызываться из экземпляра Worker в главном потоке, но не в потоке worker-а. Это связано с тем, что внутри потока worker-а, worker выступает в качестве глобального объекта.</font></p> + +<p class="note"><strong>Заметка</strong>: При передаче сообщения между основным потоком и потоком worker-а, оно копируется или "передается" (перемещается), не делится между потоками. Читайте {{anch("Transferring data to and from workers: further details")}} для более подробного объяснения.</p> + +<h3 id="Завершение_работы_worker-а">Завершение работы worker-а</h3> + +<p>Прекращение работы worker-а главного потока достигается методом {{domxref("Worker", "terminate")}}:</p> + +<pre class="brush: js notranslate">myWorker.terminate();</pre> + +<p>Поток worker-а немедленно уничтожается.</p> + +<h3 id="Обработка_ошибок">Обработка ошибок</h3> + +<p>При ошибке во время выполнения worker-а, вызывается его обработчик событий <code>onerror</code>. Он принимает событие <code>error</code>, которое реализует интерфейс <code>ErrorEvent</code>.</p> + +<p>Событие не всплывает и его можно отменить. Для отмены действия по умолчанию, worker может вызвать метод <a class="internal" href="/en-US/docs/Web/API/Event/preventDefault"> <code>preventDefault()</code> </a> в обработчике события ошибки.</p> + +<p>У события ошибки есть три поля, которые представляют интерес:</p> + +<dl> + <dt><code>message</code></dt> + <dd>Сообщение об ошибке в читаемом виде.</dd> + <dt><code>filename</code></dt> + <dd>Имя файла со скриптом, в котором ошибка произошла.</dd> + <dt><code>lineno</code></dt> + <dd>Номер строки в файле, в котором произошла ошибка.</dd> +</dl> + +<h3 id="Создание_subworkers">Создание subworkers</h3> + +<p>Worker-ы могут запускать другие worker-ы. Так называемые sub-worker'ы должны быть того же происхождения (same-origin), что и родительский документ. Кроме того, URI для subworker-ов рассчитываются относительно родительского worker'а, а не родительского документа. Это позволяет worker-ам проще следить за тем, где находятся их зависимости.</p> + +<h3 id="Импорт_скриптов_и_библиотек">Импорт скриптов и библиотек</h3> + +<p>Worker потоки имеют доступ к глобальной функции, <code>importScripts()</code>, которая позволяет импортировать скрипты с того же домена в их область видимости. Функция принимает ноль и более URI параметров, как список ссылок на ресурсы для импорта; все нижеприведенные примеры верны:</p> + +<pre class="brush: js notranslate">importScripts(); /* imports nothing */ +importScripts('foo.js'); /* imports just "foo.js" */ +importScripts('foo.js', 'bar.js'); /* imports two scripts */ +</pre> + +<p>Браузер загружает каждый указанный скрипт и исполняет его. Любые глобальные объекты, создаваемые каждым скриптом могут быть использованы в worker'е. Если скрипт не удалось загрузить, будет брошена ошибка <code>NETWORK_ERROR</code>, и последующий код не будет исполнен. Тем не менее код, исполненный ранее (включая отложенный при помощи {{domxref("window.setTimeout()")}}) останется функционален. Объявления функций идущие <strong>после</strong> вызова метода <code>importScripts()</code> также будут доступны, т.к. объявления функций всегда обрабатываются перед остальным кодом.</p> + +<div class="note"><strong>Заметка</strong>: Скрипты могут быть загружены в произвольном порядке, но их исполнение будет в том порядке, в котором имена файлов были переданы в <code>importScripts()</code>. Функция выполняется синхронно; <code>importScripts()</code> не вернет исполнение, пока все скрипты не будут загружены и исполнены.</div> + +<h2 id="Разделяемые_worker-ы_Shared_workers">Разделяемые worker-ы (Shared workers)</h2> + +<p>Разделяемый worker доступен нескольким разным скриптам — даже если они находятся в разных окнах, фреймах или даже worker-ах. В этом разделе мы обсудим JavaScript, который можно найти в нашем <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">базовом примере разделяемых worker-ов</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">запустить разделяемый worker</a>): Он очень похож на базовый пример выделенных worker-ов, за исключением двух функций, которые доступны из разных скриптовых файлов: <em>умножение двух чисел</em> или <em>возведение числа в степень.</em> Оба скрипта используют один и тот же worker для необходимых вычислений.</p> + +<p>Здесь мы сосредоточимся на разнице между выделенными и раздялемыми worker-ами. Обратите внимание, что в данном примере есть две HTML страницы с JavaScript кодом, которые используют один и тот же файл worker-а.</p> + +<div class="note"> +<p><strong>Заметка</strong>: Если разделяемый worker может быть доступен из нескольких контекстов просмотра, то все они должны иметь одно и то же происхождение (одни и те же протокол, хост и порт).</p> +</div> + +<div class="note"> +<p><strong>Заметка: </strong>В Firefox разделяемый worker не может быть использован совместно документами в приватном и неприватном окне ({{bug(1177621)}}).</p> +</div> + +<h3 id="Создание_разделяемого_worker-а">Создание разделяемого worker-а</h3> + +<p>Запуск разделяемого worker-а очень похож на запуск выделенного worker-а, но используется другой конструктор (см. <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/index.html">index.html</a> и <a href="http://mdn.github.io/simple-shared-worker/index2.html">index2.html</a>) — в каждом документе необходимо поднять worker, для этого следует написать такой код:</p> + +<pre class="brush: js notranslate">var myWorker = new SharedWorker("worker.js");</pre> + +<p>Большая разница заключается в том, что с разделяемым worker-ом необходимо взаимодействовать через объект <code>port</code> — явно открыв порт, с помощью которого скрипты могут взаимодействовать с worker-ом (в случае выделенного worker-а это происходит неявно).</p> + +<p>Соединение с портом должно быть осуществлено либо неявно, используя обработчик событие <code>onmessage</code>, либо явно, вызвав метод <strong>start()</strong> перед тем, как отправлять любые сообщения. Вызов метода start() необходим только тогда, когда подписка на событие реализована через метод <code>addEventListener()</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Заметка: </strong>Когда используется метод <code>start()</code> чтобы открыть соединение с портом, его необходимо вызывать и в родительском потоке и в потоке worker-а, если необходима двухсторонняя коммуникация.</p> +</div> + +<pre class="brush: js notranslate">myWorker.port.start(); // в родительском потоке</pre> + +<pre class="brush: js notranslate">port.start(); // в потоке worker-а, где переменная <code>port</code> является ссылкой на порт</pre> + +<h3 id="Передача_сообщений_виз_разделяемого_worker-а">Передача сообщений в/из разделяемого worker-а</h3> + +<p>Теперь сообщения могут быть отправлены worker-у, как и прежде, но метод <code>postMessage()</code> должен вызываться из объекта <code>port</code> (еще раз, вы можете увидеть схожие кострукции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> + +<pre class="brush: js notranslate">squareNumber.onchange = function() { + myWorker.port.postMessage([squareNumber.value,squareNumber.value]); + console.log('Message posted to worker'); +}</pre> + +<p>Теперь на стороне worker-а. Здесь код немного сложнее (<a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a>):</p> + +<pre class="brush: js notranslate">self.addEventListener('connect', function(e) { // требуется addEventListener() + var port = e.ports[0]; + port.onmessage = function(e) { + var workerResult = 'Result: ' + (e.data[0] * e.data[1]); + port.postMessage(workerResult); + } + <s>port.start();</s> // вызов необязательный, т.к. используется обработчик событий onmessage +});</pre> + +<p>Первый этап состоит из события <code>onconnect</code>. Оно срабатывает, когда произошло подключение (т.е. когда в родительском потоке отработало событие <code>onmessage</code> или когда в нем был вызван метод <code>start()</code>).</p> + +<p>Мы используем атрибут события <code>ports</code>, чтобы получить порт и сохранить его в переменной.</p> + +<p>Второй этап — это обработчик события <code>message</code> на сохраненном порту. Он нужен для подсчета и вывода результата вычисления в основной поток. Установка обработчика <code>message</code> в потоке worker-а также открывает подключение к родительскому потоку, поэтому вызов на <code>port.start()</code> на самом деле не нужен (см. код обработчика <code>onconnect</code>).</p> + +<p>Последний этап — возвращение в основной поток и обработка сообщения от worker‑а (еще раз, вы можете увидеть схожие конструкции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> + +<pre class="brush: js notranslate">myWorker.port.onmessage = function(e) { + result2.textContent = e.data[0]; + console.log('Message received from worker'); +}</pre> + +<p>Когда сообщение приходит через порт от worker-а, мы проверяем тип результата вычислений и затем вставляем его в соответствующий абзац.</p> + +<h2 id="О_потоковой_безопасности">О потоковой безопасности</h2> + +<p>Интерфейс {{domxref("Worker")}} создаёт настоящие потоки на уровне операционной системы, что может смутить опытных программистов и навести их на мысли о проблемах, связанных с конфликтом доступа к общим объектам.</p> + +<p>На самом деле создать такие проблемы достаточно сложно, так как worker-ы жёстко контролируются. У них нет доступа к непотокобезопасным объектам DOM, а все данные между потоками передаются в качестве сериализованных объектов. Придётся очень постараться, чтобы вызывать проблемы потокобезопасности в вашем коде.</p> + +<h2 id="Передача_данных_в_и_из_worker-ов_другие_детали">Передача данных в и из worker-ов: другие детали</h2> + +<p>Передача данных между главной страницей и worker-ом происходит путем копирования, а не передачи по ссылке. Объекты сериализуются при передаче и затем десериализуются на другом конце. Страница и worker не используют совместно одни и те же экземпляры, для каждого создается свой. Большинство браузеров реализуют это структурированным клонированием (<a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a>).</p> + +<p>Для иллюстрации этого мы создадим функцию <code>emulateMessage()</code>, которая будет имитировать поведение значения, которое клонируется, но не используется совместно при переходе от worker-а к главной странице или наоборот.</p> + +<pre class="brush: js notranslate">function emulateMessage (vVal) { + return eval("(" + JSON.stringify(vVal) + ")"); +} + +// Tests + +// test #1 +var example1 = new Number(3); +console.log(typeof example1); // object +console.log(typeof emulateMessage(example1)); // number + +// test #2 +var example2 = true; +console.log(typeof example2); // boolean +console.log(typeof emulateMessage(example2)); // boolean + +// test #3 +var example3 = new String("Hello World"); +console.log(typeof example3); // object +console.log(typeof emulateMessage(example3)); // string + +// test #4 +var example4 = { + "name": "John Smith", + "age": 43 +}; +console.log(typeof example4); // object +console.log(typeof emulateMessage(example4)); // object + +// test #5 +function Animal (sType, nAge) { + this.type = sType; + this.age = nAge; +} +var example5 = new Animal("Cat", 3); +alert(example5.constructor); // Animal +alert(emulateMessage(example5).constructor); // Object</pre> + +<p>Значения, которые клонируются и совместно не используются, называются сообщениями. Как вы, возможно, знаете, сообщения могут быть отправлены в главную страницу и из нее, используя <code>postMessage()</code>, и {{domxref("MessageEvent.data", "data")}}, содержа данные, передаваемые из worker-а.</p> + +<p><strong>example.html</strong>: (главная страница):</p> + +<pre class="brush: js notranslate">var myWorker = new Worker("my_task.js"); + +myWorker.onmessage = function (oEvent) { + console.log("Worker said : " + oEvent.data); +}; + +myWorker.postMessage("ali");</pre> + +<p><strong>my_task.js</strong> (worker):</p> + +<pre class="brush: js notranslate">postMessage("I\'m working before postMessage(\'ali\')."); + +onmessage = function (oEvent) { + postMessage("Hi " + oEvent.data); +};</pre> + +<p>Алгоритм структурированного клонирования может принять JSON и некоторые вещи, которые JSON не может принять, например, циклические ссылки.</p> + +<h3 id="Примеры_передачи_данных">Примеры передачи данных</h3> + +<h4 id="Пример_1_Расширенная_передача_JSON_данных_и_создание_системы_коммутации">Пример #1: Расширенная передача JSON данных и создание системы коммутации</h4> + +<p>Если вам нужно передать сложные данные и вызвать множество различных функций как на главной странице, так и в worker-е, вы можете создать следующую систему.</p> + +<p>В первую очередь мы создаем класс QueryableWorker, который принимает url worker-а, стандартный обработчик событий (defaultListener) и обработчик ошибок. Этот класс будет отслеживать всех обработчиков и поможет нам общаться с воркером.</p> + +<pre class="brush: js notranslate"><code>function QueryableWorker(url, defaultListener, onError) { + var instance = this, + worker = new Worker(url), + listeners = {}; + + this.defaultListener = defaultListener || function() {}; + + if (onError) {worker.onerror = onError;} + + this.postMessage = function(message) { + worker.postMessage(message); + } + + this.terminate = function() { + worker.terminate(); + } +}</code> +</pre> + +<p>Затем мы добавляем методы добавления/удаления обработчиков.</p> + +<pre class="brush: js notranslate"><code>this.addListeners = function(name, listener) { + listeners[name] = listener; +} + +this.removeListeners = function(name) { + delete listeners[name]; +}</code> +</pre> + +<p>Здесь мы создадим у worker-а два простых события для примера: получение разницы двух чисел и создание оповещения через три секунды. Но сначала нам нужно реализовать метод sendQuery, который проверит есть ли вообще у worker-а обработчик, который мы собираемся вызвать.</p> + +<pre class="brush: js notranslate"><code>/* + Эта функция принимает по крайней мере один аргумент: имя метода, который мы хотим вызвать. + Далее мы можем передать методу необходимые ему аргументы. + */ +this.sendQuery = function() { + if (arguments.length < 1) { + throw new TypeError('QueryableWorker.sendQuery takes at least one argument'); + return; + } + worker.postMessage({ + 'queryMethod': arguments[0], + 'queryArguments': Array.prototype.slice.call(arguments, 1) + }); +}</code> +</pre> + +<p>Завершим QueryableWorker методом <code>onmessage</code>. Если worker имеет соответствующий метод, который мы запросили, он также должен вернуть соответствующий обработчик и аргументы, которые нам нужны. Останется лишь найти его в <code>listeners</code>:</p> + +<pre class="brush: js notranslate"><code>worker.onmessage = function(event) { + if (event.data instanceof Object && + event.data.hasOwnProperty('queryMethodListener') && + event.data.hasOwnProperty('queryMethodArguments')) { + listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments); + } else { + this.defaultListener.call(instance, event.data); + } +}</code> +</pre> + +<p>Теперь к самому worker-у. Сначала следует определить эти два простых метода:</p> + +<pre class="brush: js notranslate"><code>var queryableFunctions = { + getDifference: function(a, b) { + reply('printStuff', a - b); + }, + waitSomeTime: function() { + setTimeout(function() { + reply('doAlert', 3, 'seconds'); + }, 3000); + } +} + +function reply() { + if (arguments.length < 1) { + throw new TypeError('reply - takes at least one argument'); + return; + } + postMessage({ + queryMethodListener: arguments[0], + queryMethodArguments: Array.prototype.slice.call(arguments, 1) + }); +} + +/* This method is called when main page calls QueryWorker's postMessage method directly*/ +function defaultReply(message) { + // do something +}</code> +</pre> + +<p>И <code>onmessage</code>:</p> + +<pre class="brush: js notranslate"><code>onmessage = function(event) { + if (event.data instanceof Object && + event.data.hasOwnProperty('queryMethod') && + event.data.hasOwnProperty('queryMethodArguments')) { + queryableFunctions[event.data.queryMethod] + .apply(self, event.data.queryMethodArguments); + } else { + defaultReply(event.data); + } +}</code></pre> + +<p>Полный код примера:</p> + +<p><strong>example.html</strong> (основная страница):</p> + +<pre class="brush: html notranslate"><code><!doctype html> + <html> + <head> + <meta charset="UTF-8" /> + <title>MDN Example - Queryable worker</title> + <script type="text/javascript"> + /* + QueryableWorker instances methods: + * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function + * postMessage(string or JSON Data): see Worker.prototype.postMessage() + * terminate(): terminates the Worker + * addListener(name, function): adds a listener + * removeListener(name): removes a listener + QueryableWorker instances properties: + * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly + */ + function QueryableWorker(url, defaultListener, onError) { + var instance = this, + worker = new Worker(url), + listeners = {}; + + this.defaultListener = defaultListener || function() {}; + + if (onError) {worker.onerror = onError;} + + this.postMessage = function(message) { + worker.postMessage(message); + } + + this.terminate = function() { + worker.terminate(); + } + + this.addListener = function(name, listener) { + listeners[name] = listener; + } + + this.removeListener = function(name) { + delete listeners[name]; + } + + /* + This functions takes at least one argument, the method name we want to query. + Then we can pass in the arguments that the method needs. + */ + this.sendQuery = function() { + if (arguments.length < 1) { + throw new TypeError('QueryableWorker.sendQuery takes at least one argument'); + return; + } + worker.postMessage({ + 'queryMethod': arguments[0], + 'queryMethodArguments': Array.prototype.slice.call(arguments, 1) + }); + } + + worker.onmessage = function(event) { + if (event.data instanceof Object && + event.data.hasOwnProperty('queryMethodListener') && + event.data.hasOwnProperty('queryMethodArguments')) { + listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments); + } else { + this.defaultListener.call(instance, event.data); + } + } + } + + // your custom "queryable" worker + var myTask = new QueryableWorker('my_task.js'); + + // your custom "listeners" + myTask.addListener('printStuff', function (result) { + document.getElementById('firstLink').parentNode.appendChild(document.createTextNode('The difference is ' + result + '!')); + }); + + myTask.addListener('doAlert', function (time, unit) { + alert('Worker waited for ' + time + ' ' + unit + ' :-)'); + }); +</script> +</head> +<body> + <ul> + <li><a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li> + <li><a href="javascript:myTask.sendQuery('waitSomeTime');">Wait 3 seconds</a></li> + <li><a href="javascript:myTask.terminate();">terminate() the Worker</a></li> + </ul> +</body> +</html></code></pre> + +<p><strong>my_task.js</strong> (код worker-а):</p> + +<pre class="brush: js notranslate"><code>var queryableFunctions = { + // пример #1: получить разницу между двумя числами + getDifference: function(nMinuend, nSubtrahend) { + reply('printStuff', nMinuend - nSubtrahend); + }, + // пример #2: подождать три секунды + waitSomeTime: function() { + setTimeout(function() { reply('doAlert', 3, 'seconds'); }, 3000); + } +}; + +// системные функции + +function defaultReply(message) { + // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly + // do something +} + +function reply() { + if (arguments.length < 1) { throw new TypeError('reply - not enough arguments'); return; } + postMessage({ 'queryMethodListener': arguments[0], 'queryMethodArguments': Array.prototype.slice.call(arguments, 1) }); +} + +onmessage = function(oEvent) { + if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty('queryMethod') && oEvent.data.hasOwnProperty('queryMethodArguments')) { + queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments); + } else { + defaultReply(oEvent.data); + } +};</code> +</pre> + +<p>Можно переключать содержимое каждой главной страницы -> worker и worker -> сообщение главной страницы. И имена свойств "queryMethod", "queryMethodListeners", "queryMethodArguments" могут быть любыми пока они согласуются с <code>QueryableWorker</code> и <code>worker</code>.</p> + +<h3 id="Передача_данных_с_помощью_передачи_владения_передаваемые_объекты">Передача данных с помощью передачи владения (передаваемые объекты)</h3> + +<p>Google Chrome 17+ and Firefox 18+ имеют дополнительную возможность передачи определенных типов объектов (передаваемые объекты реализующие {{domxref("Transferable")}} интерфейс) к или из worker-а с высокой призводительностью. Эти объекты передаются из одного контекста в другой без операций копирования, что приводит к значительному повышению производительности при отправке больших наборов данных. Думайте об этом как о передаче по ссылке в мире C/C++. Однако в отличии от передачи по ссылке, "версия" из вызывающего контекста больше недоступна после передачи. Владельцем становится новый контекст. Для примера, после передачи {{domxref("ArrayBuffer")}} из главной страницы к worker-у, исходный {{domxref("ArrayBuffer")}} очищается и более недоступен для использования. Его содержание (в буквальном смысле) переносится в рабочий контекст.</p> + +<pre class="brush: js notranslate">// Create a 32MB "file" and fill it. +var uInt8Array = new Uint8Array(1024*1024*32); // 32MB +for (var i = 0; i < uInt8Array.length; ++i) { + uInt8Array[i] = i; +} + +worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); +</pre> + +<div class="note"> +<p><strong>Заметка</strong>: Для дополнительной информации о передаваемых объектах, производительности и поддержки для этого метода, читайте <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> на HTML5 Rocks.</p> +</div> + +<h2 id="Встроенные_worker-ы">Встроенные worker-ы</h2> + +<p>Не существует утвержденного способа встроить код worker-а в рамках веб-страницы, как элемент {{HTMLElement("script")}} делает для обычных скриптов. Но элемент {{HTMLElement("script")}}, который не имеет аттрибута <code>src</code> и аттрибута <code>type</code>, которому не назначен выполняемый MIME type, можно считать блоком данных для использования JavaScript. Блок данных "Data blocks" — это более общее свойство HTML5, может содержать любые текстовые данные. Так, worker может быть встроен следующим образом:</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>MDN Example - Embedded worker<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/js-worker<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> + <span class="comment token">// Этот script НЕ БУДЕТ анализироваться JS движками, потому что его MIME-тип text/js-worker.</span> + <span class="keyword token">var</span> myVar <span class="operator token">=</span> <span class="string token">'Hello World!'</span><span class="punctuation token">;</span> + <span class="comment token">// </span></span></span></code>Остальная часть кода вашего воркера идет сюда.<code class="language-html"><span class="script token"><span class="language-javascript token"> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> + <span class="comment token">// Этот script БУДЕТ проанализирован JS движкам, потому что его MIME-тип text/javascript.</span> + <span class="keyword token">function</span> <span class="function token">pageLog</span><span class="punctuation token">(</span><span class="parameter token">sMsg</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Use a fragment: browser will only render/reflow once.</span> + <span class="keyword token">var</span> oFragm <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createDocumentFragment</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + oFragm<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>sMsg<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + oFragm<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'br'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#logDisplay'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>oFragm<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/js-worker<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> + <span class="comment token">// Этот script НЕ БУДЕТ анализироваться JS движками, потому что его MIME-тип text/js-worker.</span> + <span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">oEvent</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">postMessage</span><span class="punctuation token">(</span>myVar<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + <span class="comment token">// </span></span></span></code>Остальная часть кода вашего воркера идет сюда.<code class="language-html"><span class="script token"><span class="language-javascript token"> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> + <span class="comment token">// Этот script БУДЕТ проанализирован JS движкам, потому что его MIME-тип text/javascript.</span> + + <span class="comment token">// В прошлом...:</span> + <span class="comment token">// blob builder существовал</span> + <span class="comment token">// ... но теперь мы используем Blob...:</span> + <span class="keyword token">var</span> blob <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Blob</span><span class="punctuation token">(</span><span class="class-name token">Array</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span><span class="function token">map</span><span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'script[type=\'text\/js-worker\']'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="parameter token">oScript</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> oScript<span class="punctuation token">.</span>textContent<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">,</span><span class="punctuation token">{</span>type<span class="punctuation token">:</span> <span class="string token">'text/javascript'</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">// Создание нового свойства document.worker, содержащего все наши "text/js-worker" скрипты.</span> + document<span class="punctuation token">.</span>worker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span><span class="constant token">URL</span><span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span>worker<span class="punctuation token">.</span><span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">oEvent</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">pageLog</span><span class="punctuation token">(</span><span class="string token">'Received: '</span> <span class="operator token">+</span> oEvent<span class="punctuation token">.</span>data<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + <span class="comment token">// Запуск воркера.</span> + window<span class="punctuation token">.</span><span class="function function-variable token">onload</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> document<span class="punctuation token">.</span>worker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="string token">''</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>logDisplay<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code> +</pre> + +<div id="logDisplay">Встраиваемый worker теперь внесен в новое custom свойство <code>document.worker</code></div> + +<div></div> + +<div>Также стоит отметить, что вы также можете преобразовать функцию в BLOB-объект, а затем сгенерировать URL объекта из этого BLOB-объекта. Например:</div> + +<pre class="notranslate">function fn2workerURL(fn) { + var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'}) + return URL.createObjectURL(blob) +} +</pre> + +<h2 id="Другие_примеры">Другие примеры</h2> + +<p>В этой секции представлено еще несколько примеров как использовать worker-ы.</p> + +<h3 id="Выполнение_вычислений_в_фоне">Выполнение вычислений в фоне</h3> + +<p>Worker-ы в основном полезны для того, чтобы позволить вашему коду выполнять ресурсоемкие вычисления, не блокируя поток пользовательского интерфейса. В этом примере, worker используется для вычисления числа Фибоначчи.</p> + +<h4 id="Код_JavaScript">Код JavaScript</h4> + +<p>Следующий код JavaScript хранится в файле "fibonacci.js", на который ссылается HTML в следующем разделе.</p> + +<pre class="brush: js notranslate">var results = []; + +function resultReceiver(event) { + results.push(parseInt(event.data)); + if (results.length == 2) { + postMessage(results[0] + results[1]); + } +} + +function errorReceiver(event) { + throw event.data; +} + +onmessage = function(event) { + var n = parseInt(event.data); + + if (n == 0 || n == 1) { + postMessage(n); + return; + } + + for (var i = 1; i <= 2; i++) { + var worker = new Worker("fibonacci.js"); + worker.onmessage = resultReceiver; + worker.onerror = errorReceiver; + worker.postMessage(n - i); + } + };</pre> + +<p>Worker устанавливает свойство <code>onmessage</code> для функции, которая будет получать сообщения, отправленные при вызове <code>postMessage()</code> рабочего объекта (обратите внимание, что это отличается от определения глобальной <em>переменной</em> с таким именем или определения <em>функции</em> с таким именем. <code>var onmessage</code> и <code>function onmessage</code> будет определять глобальные свойства с этими именами , но они не будут регистрировать функцию для получения сообщений, отправленных веб-страницей, которая создала worker). Это запускает рекурсию, порождая новые копии для обработки каждой итерации вычисления.</p> + +<h4 id="HTML_код">HTML код</h4> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Test threads fibonacci<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>result<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">language</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> + + <span class="keyword token">var</span> worker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span><span class="string token">'fibonacci.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + worker<span class="punctuation token">.</span><span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'result'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> event<span class="punctuation token">.</span>data<span class="punctuation token">;</span> + <span class="function token">dump</span><span class="punctuation token">(</span><span class="string token">'Got: '</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>data <span class="operator token">+</span> <span class="string token">'\n'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + worker<span class="punctuation token">.</span><span class="function function-variable token">onerror</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">error</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">dump</span><span class="punctuation token">(</span><span class="string token">'Worker error: '</span> <span class="operator token">+</span> error<span class="punctuation token">.</span>message <span class="operator token">+</span> <span class="string token">'\n'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">throw</span> error<span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + worker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="string token">'5'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + </span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<p>Веб-страница создает элемент <code>div</code> с ID <code>result</code> , который используется для отображения результата, а затем порождает worker. После порождения worker-а, обработчик <code>onmessage</code> настроен для отображения результатов путем установки содержимого элемента <code>div</code>, и обработчик <code>onerror</code> настроен на <a href="/en-US/docs/Debugging_JavaScript#dump.28.29">выброс</a> сообщения об ошибке.</p> + +<p>Наконец, сообщение отправляется worker-у, чтобы запустить его.</p> + +<p><a class="external" href="/samples/workers/fibonacci">Попробуйте этот пример</a>.</p> + +<h3 id="Выполнение_веб_IO_в_фоне">Выполнение веб I/O в фоне</h3> + +<p>Вы можете найти пример этого в статье <a class="internal" href="/en-US/docs/Using_workers_in_extensions">Использование worker-ов в расширениях</a>.</p> + +<h3 id="Разделение_задач_между_множественными_worker-ами">Разделение задач между множественными worker-ами</h3> + +<p>Поскольку многоядерные компьютеры становятся все более распространенными, часто бывает полезно разделить вычислительно сложные задачи между несколькими worker-ами, которые затем могут выполнить эти задачи на многопроцессорных ядрах.</p> + +<h2 id="Другие_типы_worker-ов">Другие типы worker-ов</h2> + +<p>В дополнение к выделенным и совместно используемым web worker-ам доступны другие типы worker-ов:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a>, по сути, действуют как прокси-серверы, которые размещаются между веб-приложениями, браузером и сетью (при наличии). Они предназначены (помимо прочего) для создания эффективного автономного взаимодействия, перехвата сетевых запросов и принятия соответствующих действий в зависимости от того, доступна ли сеть, и обновлены ли ресурсы на сервере. Они также разрешают доступ push-уведомлениям и API фоновой синхронизации.</li> + <li>Chrome Workers это worker типа Firefox-only, который вы можете использовать, если вы разрабатываете дополнения и хотите использовать worker-ы в расширениях и иметь доступ к <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> в вашем worker-е. Смотрите {{domxref("ChromeWorker")}} для более подробной информации.</li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> предоставляют возможность прямой обработки звука по сценарию в контексте web worker-а.</li> +</ul> + +<h2 id="Функции_и_интерфейсы_доступные_в_worker-ах">Функции и интерфейсы доступные в worker-ах</h2> + +<p>Внутри web worker-а вы можете использовать большинство стандартных функций JavaScript, включая:</p> + +<ul> + <li>{{domxref("Navigator")}}</li> + <li>{{domxref("XMLHttpRequest")}}</li> + <li>{{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, и {{jsxref("Global_Objects/String", "String")}}</li> + <li>{{domxref("Window.requestAnimationFrame")}}, {{domxref("WindowTimers.setTimeout")}}, и {{domxref("WindowTimers.setInterval")}}</li> +</ul> + +<p>Главное, что вы не можете сделать в Worker это напрямую повлиять на родительскую страницу. Это включает в себя манипулирование DOM и использование объектов этой страницы. Вы должны сделать это косвенно, отправив сообщение обратно основному сценарию через {{domxref("DedicatedWorkerGlobalScope.postMessage")}}, а затем выполнив изменения оттуда.</p> + +<div class="note"> +<p><strong>Заметка</strong>: Для знакомства с полным списком функций, доступных для worker-ов, смотрите статью <a href="/en-US/docs/Web/Reference/Functions_and_classes_available_to_workers">Функции и интерфейсы доступные worker-ам</a>.</p> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Без изменений {{SpecName("Web Workers")}}.</td> + </tr> + <tr> + <td>{{SpecName('Web Workers')}}</td> + <td>{{Spec2('Web Workers')}}</td> + <td>Начальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10.0</td> + <td>10.6<sup>[1]</sup></td> + <td>4<sup>[2]</sup></td> + </tr> + <tr> + <td>Shared workers</td> + <td>4<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(29)}}</td> + <td>{{CompatNo}}</td> + <td>10.6</td> + <td>5<br> + {{CompatNo}} 6.1<sup>[4]</sup></td> + </tr> + <tr> + <td>Passing data using <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td> + <td>13</td> + <td>{{CompatGeckoDesktop(8)}}</td> + <td>10.0</td> + <td>11.5</td> + <td>6</td> + </tr> + <tr> + <td>Passing data using <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td> + <td>17 {{property_prefix("webkit")}}<br> + 21</td> + <td>{{CompatGeckoDesktop(18)}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>6</td> + </tr> + <tr> + <td>Global {{domxref("window.URL", "URL")}}</td> + <td>10<sup>[3]</sup><br> + 23</td> + <td>{{CompatGeckoDesktop(21)}}</td> + <td>11</td> + <td>15</td> + <td>6<sup>[3]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4</td> + <td>4<sup>[1]</sup></td> + <td>3.5</td> + <td>1.0.1</td> + <td>10.0</td> + <td>11.5<sup>[1]</sup></td> + <td>5.1<sup>[2]</sup></td> + </tr> + <tr> + <td>Shared workers</td> + <td>{{CompatNo}}</td> + <td>4<sup>[1]</sup></td> + <td>8</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Passing data using <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td> + <td>{{CompatNo}}</td> + <td>4</td> + <td>8</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Passing data using <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>18</td> + <td>1.0.1</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Chrome и Opera выдают ошибку "<code>Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'.</code>" когда вы пытаетесь запустить worker локально. Нужно быть на надлежащем домене.</p> + +<p>[2] Начиная с Safari 7.1.2, вы можете вызывать <code>console.log</code> изнутри worker-а, но он ничего не выведет в консоль. Более старые версии Safari не ползволяют вызывать <code>console.log</code> изнутри worker-а</p> + +<p>[3] Эта функция реализована с префиксом как <code>webkitURL</code>.</p> + +<p>[4] Safari <a href="https://bugs.webkit.org/show_bug.cgi?id=116359">удалил поддержку SharedWorker</a>.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><code><a class="internal" href="/en-US/docs/Web/API/Worker">Worker</a></code> интерфейс</li> + <li><code><a class="internal" href="/en-US/docs/Web/API/SharedWorker">SharedWorker</a></code> интерфейс</li> + <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функции доступные для worker-ов</a></li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Продвинутые концепции и примеры</a></li> +</ul> diff --git a/files/ru/web/api/webgl_api/tutorial/создание_3d_объектов_с_помощью_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html index b5abccbe14..298613d533 100644 --- a/files/ru/web/api/webgl_api/tutorial/создание_3d_объектов_с_помощью_webgl/index.html +++ b/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html @@ -1,10 +1,11 @@ --- title: Создание 3D объектов с помощью WebGL -slug: Web/API/WebGL_API/Tutorial/Создание_3D_объектов_с_помощью_WebGL +slug: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL tags: - WebGL - Урок translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +original_slug: Web/API/WebGL_API/Tutorial/Создание_3D_объектов_с_помощью_WebGL --- <p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p> diff --git a/files/ru/web/api/webrtc_api/связь/index.html b/files/ru/web/api/webrtc_api/connectivity/index.html index 7c4f173c05..375f486aaa 100644 --- a/files/ru/web/api/webrtc_api/связь/index.html +++ b/files/ru/web/api/webrtc_api/connectivity/index.html @@ -1,7 +1,8 @@ --- title: WebRTC подключение -slug: Web/API/WebRTC_API/связь +slug: Web/API/WebRTC_API/Connectivity translation_of: Web/API/WebRTC_API/Connectivity +original_slug: Web/API/WebRTC_API/связь --- <p>{{WebRTCSidebar}}{{draft}}</p> diff --git a/files/ru/web/api/webrtc_api/протоколы/index.html b/files/ru/web/api/webrtc_api/protocols/index.html index df618ab083..5d2fab37d9 100644 --- a/files/ru/web/api/webrtc_api/протоколы/index.html +++ b/files/ru/web/api/webrtc_api/protocols/index.html @@ -1,7 +1,8 @@ --- title: Введение в протоколы WebRTC -slug: Web/API/WebRTC_API/протоколы +slug: Web/API/WebRTC_API/Protocols translation_of: Web/API/WebRTC_API/Protocols +original_slug: Web/API/WebRTC_API/протоколы --- <p>{{APIRef("WebRTC")}}{{draft}}</p> diff --git a/files/ru/web/api/webrtc_api/webrtc_basics/index.html b/files/ru/web/api/webrtc_api/webrtc_basics/index.html deleted file mode 100644 index 863dde7e14..0000000000 --- a/files/ru/web/api/webrtc_api/webrtc_basics/index.html +++ /dev/null @@ -1,351 +0,0 @@ ---- -title: Основы WebRTC -slug: Web/API/WebRTC_API/WebRTC_basics -translation_of: Web/API/WebRTC_API/Signaling_and_video_calling -translation_of_original: Web/API/WebRTC_API/WebRTC_basics ---- -<p>{{WebRTCSidebar}}</p> - -<p>{{Draft}}</p> - -<div class="summary"> -<p>После того, как вы понимаете <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Architecture" title="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">WebRTC architecture</a>, вы можете прочитать эту статью, которая сопроводит вас через создание кросс-браузерного RTC приложения. К концу этой документации, вы должны иметь рабочие каналы соединения равноправных узлов ЛВС и передачи данных средств массовой информации.</p> -</div> - -<h2 id="Полу-старое_содержание_из">Полу-старое содержание, из</h2> - -<h2 id="RTCPeerConnection">RTCPeerConnection</h2> - -<p>Материал здесь происходит от RTCPeerConnection; она может остаться здесь, или же может переместится в другое место.</p> - -<p><strong>Основы использования</strong><br> - Базовое использование RTCPeerConnection предполагает переговоры связь между локальной машиной и удаленной машиной один генерируя Session Description Protocol для обмена между ними. Вызывающая программа начинает процесс, отправив предложение на удаленное устройство, которое реагирует либо принять или отклонить запрос на соединение.</p> - -<p>Обе стороны (вызывающий и вызываемый абонент) необходимо настроить свои собственные экземпляры RTCPeerConnection, чтобы представить их конец соединения равноправных узлов ЛВС:</p> - -<pre class="brush: js notranslate">var pc = new RTCPeerConnection(); -pc.onaddstream = function(obj) { - var vid = document.createElement("video"); - document.appendChild(vid); - vid.srcObject = obj.stream; -} - -// функция помощник -function endCall() { - var videos = document.getElementsByTagName("video"); - for (var i = 0; i < videos.length; i++) { - videos[i].pause(); - } - - pc.<a href="#close()">close</a>(); - - -function error(err) { - endCall(); -} -</pre> - -<h3 id="При_инициализации_вызова">При инициализации вызова</h3> - -<p>Если вы один инициирующий вызов, вы будете использовать navigator.getUserMedia(), чтобы получить видеопоток, а затем добавить поток в RTCPeerConnection. Как только это было сделано, вызов RTCPeerConnection, чтобы создать предложение, настроить предложение, а затем отправить его на сервер, через соединение которое было создано.</p> - -<pre class="brush: js notranslate">// Получить список людей с сервера -// Пользователь выбирает список людей, чтобы установить соединение с нужным человеком -navigator.getUserMedia({video: true}, function(stream) { - // Добавление локального потока не вызовет onaddstream обратного вызова, - // так называют его вручную. - pc.onaddstream = e => video.src = URL.createObjectURL(e.stream); - pc.<a href="#addStream()">addStream</a>(stream); - - pc.<a href="#createOffer()">createOffer</a>(function(offer) { - pc.<a href="#setLocalDescription()">setLocalDescription</a>(offer, function() { - // send the offer to a server to be forwarded to the friend you're calling. - }, error); - }, error); -}); -</pre> - -<h3 id="Ответ_на_вызов">Ответ на вызов</h3> - -<p>На противоположном конце, друг получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение прибывает, {{domxref ("navigator.getUserMedia ()")}} вновь используется для создания потока, который добавляется к RTCPeerConnection. {{Domxref ("RTCSessionDescription")}} объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p> - -<p>Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p> - -<pre class="brush: js notranslate">var offer = getOfferFromFriend(); -navigator.getUserMedia({video: true}, function(stream) { - pc.onaddstream = e => video.src = URL.createObjectURL(e.stream); - pc.<a href="#addStream()">addStream</a>(stream); - - pc.setRemoteDescription(new <span class="nx">RTCSessionDescription</span>(offer), function() { - pc.<a href="#createAnswer()">createAnswer</a>(function(answer) { - pc.<a href="#setLocalDescription()">setLocalDescription</a>(answer, function() { - // send the answer to a server to be forwarded back to the caller (you) - }, error); - }, error); - }, error); -}); -</pre> - -<p><strong>Ответ на вызов</strong></p> - -<p>На противоположном конце, человек получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение принято, navigator.getUserMedia () вновь используется для создания потока, который добавляется к RTCPeerConnection. объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p> - -<p>Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p> - -<pre class="brush: js notranslate">// ПК был создан раньше, когда мы сделали первоначальное предложение -var offer = getResponseFromFriend(); -pc.<a href="#createAnswer()">setRemoteDescription</a>(new <span class="nx">RTCSessionDescription</span>(offer), function() { }, error);</pre> - -<h2 id="Old_content_follows!">Old content follows!</h2> - -<p>Все, что находится ниже этого пункта, потенциально устарело. Это по-прежнему находится в стадии рассмотрения и возможного включения в другие части документации, если они все еще актуальны.</p> - -<div class="note"> -<p><strong>Не используйте примеры на этой странице.</strong> Смотрите статью <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> для работы, актуальный пример с использованием WebRTC media.</p> -</div> - -<h3 id="Note">Note</h3> - -<p>Due to recent changes in the API there are many old examples that require fixing:</p> - -<ul> - <li><a href="http://louisstow.github.io/WebRTC/media.html">louisstow</a></li> - <li><a href="http://mozilla.github.io/webrtc-landing/">mozilla</a></li> - <li><a href="https://www.webrtc-experiment.com/">webrtc-experiment</a></li> -</ul> - -<p>The currently working example is:</p> - -<ul> - <li><a href="https://apprtc.appspot.com">apprtc</a> (<a href="https://github.com/webrtc/apprtc">source</a>)</li> -</ul> - -<p>Implementation may be inferred from the <a href="http://w3c.github.io/webrtc-pc/">specification</a>.</p> - -<p>This remainder of this page contains outdated information as <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1119285">noted on bugzilla</a>.</p> - -<h3 id="Shims">Shims</h3> - -<p>As you can imagine, with such an early API, you must use the browser prefixes and shim it to a common variable.</p> - -<pre class="brush: js notranslate">var RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; -var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate; -var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; -navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre> - -<h3 id="RTCPeerConnection_2">RTCPeerConnection</h3> - -<p>This is the starting point to creating a connection with a peer. It accepts configuration options about ICE servers to use to establish a connection.</p> - -<pre class="brush: js notranslate">var pc = new RTCPeerConnection(configuration);</pre> - -<h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3> - -<p>The {{domxref("RTCConfiguration")}} object contains information about which TURN and/or STUN servers to use for ICE. This is required to ensure most users can actually create a connection by avoiding restrictions in NAT and firewalls.</p> - -<pre class="brush: js notranslate">var configuration = { - iceServers: [ - {urls: "stun:23.21.150.121"}, - {urls: "stun:stun.l.google.com:19302"}, - {urls: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"} - ] -}</pre> - -<p>Google runs a <a href="https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list">public STUN server</a> that we can use. I also created an account at http://numb.viagenie.ca/ for a free TURN server to access. You may want to do the same and replace with your own credentials.</p> - -<h3 id="ICECandidate">ICECandidate</h3> - - - -<p>After creating the PeerConnection and passing in the available <a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_STUN.3F">STUN</a> and <a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_TURN.3F">TURN</a> servers, an event will be fired once the ICE framework has found some “candidates” that will allow you to connect with a peer. This is known as an ICE Candidate and will execute a callback function on <a href="/en-US/docs/Web/API/RTCPeerConnection.onicecandidate">PeerConnection#onicecandidate</a>.</p> - -<pre class="brush: js notranslate" lang="javascript">pc.onicecandidate = function (e) { - // candidate exists in e.candidate - if (!e.candidate) return; - send("icecandidate", JSON.stringify(e.candidate)); -};</pre> - -<p>When the callback is executed, we must use the signal channel to send the Candidate to the peer. On Chrome, multiple ICE candidates are usually found, we only need one so I typically send the first one then remove the handler. Firefox includes the Candidate in the Offer SDP.</p> - -<h3 id="Signal_Channel">Signal Channel</h3> - -<p>Now that we have an ICE candidate, we need to send that to our peer so they know how to connect with us. However this leaves us with a chicken and egg situation; we want PeerConnection to send data to a peer but before that we need to send them metadata…</p> - -<p>This is where the signal channel comes in. It’s any method of data transport that allows two peers to exchange information. In this article, we’re going to use <a href="http://firebase.com">FireBase</a> because it’s incredibly easy to setup and doesn't require any hosting or server-code.</p> - -<p>For now just imagine two methods exist: <code>send()</code> will take a key and assign data to it and <code>recv()</code> will call a handler when a key has a value.</p> - -<p>The structure of the database will look like this:</p> - -<pre class="brush: js notranslate" lang="json">{ - "": { - "candidate:": … - "offer": … - "answer": … - } -}</pre> - -<p>Connections are divided by a <code>roomId</code> and will store 4 pieces of information, the ICE candidate from the offerer, the ICE candidate from the answerer, the offer SDP and the answer SDP.</p> - -<h3 id="Offer">Offer</h3> - -<p>An Offer SDP (Session Description Protocol) is metadata that describes to the other peer the format to expect (video, formats, codecs, encryption, resolution, size, etc etc).</p> - -<p>An exchange requires an offer from a peer, then the other peer must receive the offer and provide back an answer.</p> - -<pre class="brush: js notranslate" lang="javascript">pc.createOffer(function (offer) { - pc.setLocalDescription(offer, function() { - send("offer", JSON.stringify(pc.localDescription); - }, errorHandler); -}, errorHandler, options);</pre> - -<h4 id="errorHandler"><strong><code>errorHandler</code></strong></h4> - -<p>If there was an issue generating an offer, this method will be executed with error details as the first argument.</p> - -<pre class="brush: js notranslate" lang="javascript">var errorHandler = function (err) { - console.error(err); -};</pre> - -<h5 id="options"><strong><code>options</code></strong></h5> - -<p>Options for the offer SDP.</p> - -<pre class="brush: js notranslate" lang="javascript">var options = { - offerToReceiveAudio: true, - offerToReceiveVideo: true -};</pre> - -<p><code>offerToReceiveAudio/Video</code> tells the other peer that you would like to receive video or audio from them. This is not needed for DataChannels.</p> - -<p>Once the offer has been generated we must set the local SDP to the new offer and send it through the signal channel to the other peer and await their Answer SDP.</p> - -<h3 id="Answer">Answer</h3> - -<p>An Answer SDP is just like an offer but a response; sort of like answering the phone. We can only generate an answer once we have received an offer.</p> - -<pre class="brush: js notranslate" lang="javascript">recv("offer", function (offer) { - offer = new SessionDescription(JSON.parse(offer)) - pc.setRemoteDescription(offer); - - pc.createAnswer(function (answer) { - pc.setLocalDescription(answer, function() { - send("answer", JSON.stringify(pc.localDescription)); - }, errorHandler); - }, errorHandler); -});</pre> - -<h3 id="DataChannel">DataChannel</h3> - -<p>I will first explain how to use PeerConnection for the DataChannels API and transferring arbitrary data between peers.</p> - -<p><em>Note: At the time of this article, interoperability between Chrome and Firefox is not possible with DataChannels. Chrome supports a similar but private protocol and will be supporting the standard protocol soon.</em></p> - -<pre class="brush: js notranslate" lang="javascript">var channel = pc.createDataChannel(channelName, channelOptions);</pre> - -<p>The offerer should be the peer who creates the channel. The answerer will receive the channel in the callback <code>ondatachannel</code> on PeerConnection. You must call <code>createDataChannel()</code> once before creating the offer.</p> - -<h4 id="channelName"><strong><code>channelName</code></strong></h4> - -<p>This is a string that acts as a label for your channel name. <em>Warning: Make sure your channel name has no spaces or Chrome will fail on <code>createAnswer()</code>.</em></p> - -<h4 id="channelOptions"><strong><code>channelOptions</code></strong></h4> - -<pre class="brush: js notranslate" lang="javascript">var channelOptions = {};</pre> - -<p>Currently these options are not well supported on Chrome so you can leave this empty for now. Check the <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html#attributes-7">RFC</a> for more information about the options.</p> - -<h4 id="Channel_Events_and_Methods">Channel Events and Methods</h4> - -<h5 id="onopen"><strong><code>onopen</code></strong></h5> - -<p>Executed when the connection is established.</p> - -<h5 id="onerror"><strong><code>onerror</code></strong></h5> - -<p>Executed if there is an error creating the connection. First argument is an error object.</p> - -<pre class="brush: js notranslate" lang="javascript">channel.onerror = function (err) { - console.error("Channel Error:", err); -};</pre> - -<h5 id="onmessage"><strong><code>onmessage</code></strong></h5> - -<pre class="brush: js notranslate" lang="javascript">channel.onmessage = function (e) { - console.log("Got message:", e.data); -}</pre> - -<p>The heart of the connection. When you receive a message, this method will execute. The first argument is an event object which contains the data, time received and other information.</p> - -<h5 id="onclose"><strong><code>onclose</code></strong></h5> - -<p>Executed if the other peer closes the connection.</p> - -<h4 id="Binding_the_Events"><strong>Binding the Events</strong></h4> - -<p>If you were the creator of the channel (meaning the offerer), you can bind events directly to the DataChannel you created with <code>createChannel</code>. If you are the answerer, you must use the <code>ondatachannel</code> callback on PeerConnection to access the same channel.</p> - -<pre class="brush: js notranslate" lang="javascript">pc.ondatachannel = function (e) { - e.channel.onmessage = function () { … }; -};</pre> - -<p>The channel is available in the event object passed into the handler as <code>e.channel</code>.</p> - -<h5 id="send"><strong><code>send()</code></strong></h5> - -<pre class="brush: js notranslate" lang="javascript">channel.send("Hi Peer!");</pre> - -<p>This method allows you to send data directly to the peer! Amazing. You must send either String, Blob, ArrayBuffer or ArrayBufferView, so be sure to stringify objects.</p> - -<h5 id="close"><strong><code>close()</code></strong></h5> - -<p>Close the channel once the connection should end. It is recommended to do this on page unload.</p> - -<h3 id="Media">Media</h3> - -<p>Now we will cover transmitting media such as audio and video. To display the video and audio you must include a <code><video></code> tag on the document with the attribute <code>autoplay</code>.</p> - -<h4 id="Get_User_Media">Get User Media</h4> - -<pre class="brush: js notranslate"><video id="preview" autoplay></video> - -var video = document.getElementById("preview"); -navigator.getUserMedia(constraints, function (stream) { - video.src = URL.createObjectURL(stream); -}, errorHandler);</pre> - -<p><strong><code>constraints</code></strong></p> - -<p>Constraints on what media types you want to return from the user.</p> - -<pre class="brush: js notranslate" lang="javascript">var constraints = { - video: true, - audio: true -};</pre> - -<p>If you just want an audio chat, remove the <code>video</code> member.</p> - -<h5 id="errorHandler_2"><strong><code>errorHandler</code></strong></h5> - -<p>Executed if there is an error returning the requested media.</p> - -<h4 id="Media_Events_and_Methods">Media Events and Methods</h4> - -<h5 id="addStream"><strong><code>addStream</code></strong></h5> - -<p>Add the stream from <code>getUserMedia</code> to the PeerConnection.</p> - -<pre class="brush: js notranslate" lang="javascript">pc.addStream(stream);</pre> - -<h5 id="onaddstream"><strong><code>onaddstream</code></strong></h5> - -<pre class="brush: js notranslate"><video id="otherPeer" autoplay></video> - -var otherPeer = document.getElementById("otherPeer"); -pc.onaddstream = function (e) { - otherPeer.src = URL.createObjectURL(e.stream); -};</pre> - -<p>Executed when the connection has been setup and the other peer has added the stream to the peer connection with <code>addStream</code>. You need another <code><video></code> tag to display the other peer's media.</p> - -<p>The first argument is an event object with the other peer's media stream.</p> diff --git a/files/ru/web/api/websockets_api/index.html b/files/ru/web/api/websockets_api/index.html new file mode 100644 index 0000000000..071d8b9a49 --- /dev/null +++ b/files/ru/web/api/websockets_api/index.html @@ -0,0 +1,59 @@ +--- +title: WebSockets +slug: Web/API/WebSockets_API +tags: + - NeedsBrowserCompatibility + - NeedsTranslation + - References + - TopicStub + - WebSockets +translation_of: Web/API/WebSockets_API +original_slug: WebSockets +--- +<p><strong>Вебсокеты</strong> это продвинутая технология, позволяющая открыть постоянное двунаправленное сетевое соединение между браузером пользователя и сервером. С помощью его API вы можете отправить сообщение на сервер и получить ответ без выполнения http запроса, причем этот процесс будет событийно-управляемым.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Документация</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="WebSockets/Writing WebSocket client applications">Writing WebSocket client applications</a></dt> + <dd>Учебник описывающий как написать WebSocket клиента работающего в браузере.</dd> + <dt><a href="/en-US/docs/WebSockets/WebSockets_reference" title="WebSockets/WebSockets reference">Справочник по WebSocket</a></dt> + <dd>A reference to the client-side WebSocket API.</dd> + <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers" title="WebSockets/Writing WebSocket servers">(TBD) Writing WebSocket servers</a></dt> + <dd>A guide to writing server-side code to handle the WebSocket protocol.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/WebSockets" title="tag/WebSockets">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Tools</h2> + +<ul> + <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: A powerful cross-platform WebSocket API for <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: A WebSocket server API implementation for <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a href="http://ajf.me/websocket/#libs" title="http://websocket.us/#libs">A more extensive list of frameworks and libraries here</a></li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + +<ul> + <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li> +</ul> +</div> +</div> + +<h2 id="Совместимость_с_браузерами"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Совместимость с браузерами</span></h2> + +<p>{{Compat("api.WebSocket")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - The WebSocket Protocol</a></li> + <li><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket API Specification</a></li> + <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></li> + <li><a class="external" href="http://websocket.us/">WebSocket.us</a> - a community-run, not-for-profit site about WebSocket</li> +</ul> diff --git a/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html new file mode 100644 index 0000000000..73c9a28e62 --- /dev/null +++ b/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,196 @@ +--- +title: Написание клиентских приложений с помощью вебсокетов +slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +original_slug: WebSockets/Writing_WebSocket_client_applications +--- +<p>{{ draft() }}</p> + +<p>Вебсокеты - технология, которя позволяет открыть интерактивную сессию общения между браузером пользователя и сервером. Соединяясь через вебсокеты, веб-приложения могут осуществлять взаимодействие в реальном времени вместо того, чтобы делать запросы к клиенту о входящих/исходящих изменениях.</p> + +<div class="note"><strong>Замечание: </strong>У нас есть работающий пример чата, части кода из которого используются в статье. Пример будет доступен, когда инфраструктура сайта сможет должным образом поддерживать хостинг примеров с использованием вебсокетов.</div> + +<h2 id="Доступность_вебсокетов">Доступность вебсокетов</h2> + +<p>API вебсокетов доступно в Javascript коде, область видимости которого включает объект DOM {{ domxref("Window") }} или любой объект, реализующий {{ domxref("WorkerUtils") }}; это означает, что вы можете использовать Web Workers.</p> + +<div class="note"><strong>Замечание:</strong> API вебсокетов (как и протокол лежащий в его основе) всё ещё проходят этап активной разработки; в настоящее время существует много проблем совместимости с разными браузерами (и даже с разными релизами одного и того же браузера).</div> + +<h2 id="Создание_объекта_WebSocket">Создание объекта WebSocket</h2> + +<p><code><font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif">Чтобы общаться через протокол вебсокетов необходимо создать объект </font><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket">WebSocket</a></code>; при его создании автоматически происходит попытка открыть соединение с сервером.</p> + +<p>Конструктор WebSocket принимает один обязательный и один необязательный параметр:</p> + +<pre>WebSocket WebSocket( + in DOMString url, + in optional DOMString protocols +); + +WebSocket WebSocket( + in DOMString url, + in optional DOMString[] protocols +); +</pre> + +<dl> + <dt><code>url</code></dt> + <dd>URL, с которым происходит соединение; это должен быть URL вебсокет-сервера.</dd> + <dt><code>protocols</code> {{ optional_inline() }}</dt> + <dd>Может быть одной строкой протокола или массивом таких строк. Эти строки используют для индикации под-протоколов; таким образом, один сервер может реализовывать несколько под-протоколов вебсокетов (к примеру, вам может потребоваться, чтобы сервер мог обрабатывать разные типы взаимодействий в зависимости от определённого под-протокола). Если вы не укажете строку протокола, то будет передана пустая строка.</dd> +</dl> + +<p>В конструкторе могут возникать следующие исключения:</p> + +<dl> + <dt><code>SECURITY_ERR</code></dt> + <dd>Порт, к которому проводится подключение, заблокирован.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Ошибки_подключения">Ошибки подключения</h3> + +<p><span style="line-height: 21px;">Если ошибка случается во время попытки подключения, то в объект </span><a href="https://developer.mozilla.org/en/WebSockets/WebSockets_reference/WebSocket" style="line-height: 21px;" title="WebSocket"><code style="font-style: inherit;">WebSocket</code></a><span style="line-height: 21px;"> сначала посылается простое событие с именем «error» (таким образом, задействуя обработчик </span><code style="font-size: 14px; line-height: 21px;">onerror</code><span style="line-height: 21px;">), потом - событие </span><a href="https://developer.mozilla.org/en/WebSockets/WebSockets_reference/CloseEvent" style="line-height: 21px;" title="CloseEvent"><code style="font-style: inherit;">CloseEvent</code></a><span style="line-height: 21px;"> </span><span style="line-height: 21px;"> (таким образом, задействуя обработчик </span><code style="font-size: 14px; line-height: 21px;">onclose</code><span style="line-height: 21px;">) чтобы обозначить причину закрытия соединения.</span></p> + +<p>Однако, начиная с версии Firefox 11, типичным является получение в консоль от платформы Mozilla расширенного сообщения об обшибке и кода завершения, как то определено в <a class="external" href="http://tools.ietf.org/html/rfc6455#section-7.4" title="RFC 6455 Section 7.4">RFC 6455, Section 7.4</a> посредством <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a>.</p> + +<h3 id="Примеры">Примеры</h3> + +<p>Этот простой пример создает новый WebSocket, подключаемый к серверу <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. В данном примере в конструктор сокета в качестве дополнительного параметра передается пользовательский протокол "protocolOne", хотя эта часть может быть опущена.</p> + +<pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); +</pre> + +<p>После выполнения функции, <code>exampleSocket</code>.<code>readyState</code> будет иметь значение <code>CONNECTING</code>. <code>readyState</code> изменится на <code>OPEN</code> как только соединение станет готовым к передаче данных.</p> + +<p>Если нужно открыть соединение, поддерживающее несколько протоколов, можно передать массив протоколов:</p> + +<pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]); +</pre> + +<p>Когда соединение установлено (что соответствует, <code>readyState</code> <code>OPEN</code>), <code>exampleSocket.protocol</code> сообщит, какой протокол выбрал сервер.</p> + +<p>In the above examples <code>ws</code> has replaced <code>http</code>, similarly <code>wss</code> replaces <code>https</code>. Establishing a WebSocket relies on the HTTP Upgrade mechanism, so the request for the protocol upgrade is implicit when we address the HTTP server as <code><span class="nowiki">ws://www.example.com</span></code> or <code><span class="nowiki">wss://www.example.com</span></code>.</p> + +<h2 id="Отправка_данных_на_сервер">Отправка данных на сервер</h2> + +<p>Однажды открыв соединение, вы можете передавать данные на сервер. Для осуществления этого, вызовите метод <a href="/en/WebSockets/WebSockets_reference/WebSocket#send()" title="en/WebSockets/WebSockets reference/WebSocket#send()"><code>send()</code></a> объекта <code>WebSocket</code> для каждого сообщение, которое желаете отправить:</p> + +<pre class="brush: js">exampleSocket.send("Here's some text that the server is urgently awaiting!"); +</pre> + +<p>Вы можете пересылать данные в виде строки, {{ domxref("Blob") }}, так и <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>.</p> + +<div class="note"><strong>Note:</strong> Prior to version 11, Firefox only supported sending data as a string.</div> + +<p>As establishing a connection is asynchronous and prone to failure there is no guarantee that calling the <code>send()</code> method immediately after creating a WebSocket object will be successful. We can at least be sure that attempting to send data only takes place once a connection is established by defining an <code>onopen</code> handler to do the work:</p> + +<pre class="brush: js">exampleSocket.onopen = function (event) { + exampleSocket.send("Here's some text that the server is urgently awaiting!"); +}; +</pre> + +<h3 id="Using_JSON_to_transmit_objects">Using JSON to transmit objects</h3> + +<p>One handy thing you can do is use <a href="/en/JSON" title="en/JSON">JSON</a> to send reasonably complex data to the server. For example, a chat program can interact with a server using a protocol implemented using packets of JSON-encapsulated data:</p> + +<pre class="brush: js">// Send text to all users through the server +function sendText() { + // Construct a msg object containing the data the server needs to process the message from the chat client. + var msg = { + type: "message", + text: document.getElementById("text").value, + id: clientID, + date: Date.now() + }; + + // Send the msg object as a JSON-formatted string. + exampleSocket.send(JSON.stringify(msg)); + + // Blank the text input element, ready to receive the next line of text from the user. + document.getElementById("text").value = ""; +} +</pre> + +<h2 id="Receiving_messages_from_the_server">Receiving messages from the server</h2> + +<p>WebSockets is an event-driven API; when messages are received, a "message" event is delivered to the <code>onmessage</code> function. To begin listening for incoming data, you can do something like this:</p> + +<pre class="brush: js">exampleSocket.onmessage = function (event) { + console.log(event.data); +} +</pre> + +<h3 id="Receiving_and_interpreting_JSON_objects">Receiving and interpreting JSON objects</h3> + +<p>Let's consider the chat client application first alluded to in {{ anch("Using JSON to transmit objects") }}. There are assorted types of data packets the client might receive, such as:</p> + +<ul> + <li>Login handshake</li> + <li>Message text</li> + <li>User list updates</li> +</ul> + +<p>The code that interprets these incoming messages might look like this:</p> + +<pre class="brush: js">exampleSocket.onmessage = function(event) { + var f = document.getElementById("chatbox").contentDocument; + var text = ""; + var msg = JSON.parse(event.data); + var time = new Date(msg.date); + var timeStr = time.toLocaleTimeString(); + + switch(msg.type) { + case "id": + clientID = msg.id; + setUsername(); + break; + case "username": + text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>"; + break; + case "message": + text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>"; + break; + case "rejectusername": + text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>" + break; + case "userlist": + var ul = ""; + for (i=0; i < msg.users.length; i++) { + ul += msg.users[i] + "<br>"; + } + document.getElementById("userlistbox").innerHTML = ul; + break; + } + + if (text.length) { + f.write(text); + document.getElementById("chatbox").contentWindow.scrollByPages(1); + } +}; +</pre> + +<p>Here we use <a href="/en/JavaScript/Reference/Global_Objects/JSON/parse" title="en/JavaScript/Reference/Global Objects/JSON/parse"><code>JSON.parse()</code></a> to convert the JSON object back into the original object, then examine and act upon its contents.</p> + +<h3 id="Text_data_format">Text data format</h3> + +<p>Text received over a WebSocket connection is in UTF-8 format.</p> + +<p>Prior to Gecko 9.0 {{ geckoRelease("9.0") }}, certain non-characters in otherwise valid UTF-8 text would cause the connection to be terminated. Now Gecko permits these values.</p> + +<h2 id="Closing_the_connection">Closing the connection</h2> + +<p>When you've finished using the WebSocket connection, call the WebSocket method <a href="/en/WebSockets/WebSockets_reference/WebSocket#close()" title="en/WebSockets/WebSockets reference/WebSocket#close()"><code>close()</code></a>:</p> + +<pre class="brush: js">exampleSocket.close(); +</pre> + +<p>It may be helpful to examine the socket's <code>bufferedAmount</code> attribute before attempting to close the connection to determine if any data has yet to be transmitted on the network.</p> + +<h2 id="Security_considerations">Security considerations</h2> + +<p>WebSockets should not be used in a mixed content environment; that is, you shouldn't open a non-secure WebSocket connection from a page loaded using HTTPS or vice-versa. In fact, some browsers explicitly forbid this, including Firefox 8 and later.</p> + +<p>{{ languages ( {"zh-tw": "zh_tw/WebSockets/Writing_WebSocket_client_applications"} ) }}</p> diff --git a/files/ru/web/api/window/domcontentloaded_event/index.html b/files/ru/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..8531476a12 --- /dev/null +++ b/files/ru/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,147 @@ +--- +title: DOMContentLoaded +slug: Web/API/Window/DOMContentLoaded_event +tags: + - события +translation_of: Web/API/Window/DOMContentLoaded_event +original_slug: Web/Events/DOMContentLoaded +--- +<p><code><font face="Open Sans, Arial, sans-serif">Событие </font>DOMContentLoaded</code> происходит когда весь HTML был полностью загружен и пройден парсером, не дожидаясь окончания загрузки таблиц стилей, изображений и фреймов. Значительно отличающееся от него событие <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> используется для отслеживания только полностью загруженной страницы. Широко распространённой ошибкой является использование <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> в ситуации когда <code>DOMContentLoaded</code> является более подходящим, будьте внимательны.</p> + +<p>{{Note("Синхронный JavaScript останавливает парсинг DOM.")}}</p> + +<p>{{Note("Существуют различные библиотеки, как общего назначения так и специализированные, предлагающие кросс-браузерные методы, позволяющие определить, что DOM готов к использованию.")}}</p> + +<h2 id="Ускорение_работы">Ускорение работы</h2> + +<p>Если вы хотите чтобы DOM был пройден парсером насколько возможно быстро, сразу после запроса пользователем страницы, вы можете попробовать выполнять <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript асинхронно </a>и <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">оптимизировать загрузку таблиц стилей</a> которые обычно замедляют загрузку документа поскольку загружаясь одновременно "крадут" трафик у основного документа.</p> + +<h2 id="Основная_информация">Основная информация</h2> + +<dl> + <dt style="width: 120px; text-align: right; float: left;">Спецификация</dt> + <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd> + <dt style="width: 120px; text-align: right; float: left;">Интерфейс </dt> + <dd style="margin: 0px 0px 0px 120px;">Event</dd> + <dt style="width: 120px; text-align: right; float: left;">Всплывает</dt> + <dd style="margin: 0px 0px 0px 120px;">Да</dd> + <dt style="width: 120px; text-align: right; float: left;">Отменяемое</dt> + <dd style="margin: 0px 0px 0px 120px;">Да (несмотря на то, что в спецификации указано как простое событие, которое не является отменяемым)</dd> + <dt style="width: 120px; text-align: right; float: left;">Цель </dt> + <dd style="margin: 0px 0px 0px 120px;">Document</dd> + <dt style="width: 120px; text-align: right; float: left;">Default Action</dt> + <dd style="margin: 0px 0px 0px 120px;">Нет.</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Свойство</th> + <th scope="col">Тип</th> + <th scope="col">Описание</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Тип события.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Возможно ли отменить событие.</td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<pre><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM fully loaded and parsed"); + }); +</script> +</pre> + +<pre><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM fully loaded and parsed"); + }); + +for(var i=0; i<1000000000; i++) +{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later. +</script> +</pre> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td> + <td>9.0<sup>[2]</sup></td> + <td>9.0</td> + <td>3.1<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<p>[1] Всплытие для этого события поддерживается как минимум с версий Gecko 1.9.2, Chrome 6, и Safari 4.</p> + +<p>[2] Internet Explorer 8 поддерживает событие <code>readystatechange</code>, которое можно использовать для определения готовности DOM. В более ранних версиях Internet Explorer,это событие можно определить циклическим выполнением <code>document.documentElement.doScroll("left");</code>, это событие будет выбрасывать ошибку если DOM не готов.</p> + +<h2 id="Связанные_события">Связанные события</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/ru/web/api/window/load_event/index.html b/files/ru/web/api/window/load_event/index.html new file mode 100644 index 0000000000..1574cedf21 --- /dev/null +++ b/files/ru/web/api/window/load_event/index.html @@ -0,0 +1,89 @@ +--- +title: load +slug: Web/API/Window/load_event +translation_of: Web/API/Window/load_event +original_slug: Web/Events/load +--- +<p>Событие <code>load</code> происходит когда ресурс и его зависимые ресурсы закончили загружаться.</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;">UIEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Всплывает</dt> + <dd style="margin: 0 0 0 120px;">Да</dd> + <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Цель</dt> + <dd style="margin: 0 0 0 120px;">Window</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">Нет.</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><script> + window.addEventListener("load", function(event) { + console.log("All resources finished loading!"); + }); +</script> +</pre> + +<p> </p> + +<h2 id="Связанные_события">Связанные события</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/ru/web/api/window/requestanimationframe/index.html b/files/ru/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..48d694a584 --- /dev/null +++ b/files/ru/web/api/window/requestanimationframe/index.html @@ -0,0 +1,93 @@ +--- +title: window.requestAnimationFrame() +slug: Web/API/window/requestAnimationFrame +tags: + - Анимация +translation_of: Web/API/window/requestAnimationFrame +original_slug: DOM/window.requestAnimationFrame +--- +<div>{{APIRef}}</div> + +<p><code><strong>window.requestAnimationFrame</strong></code> указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. В качестве параметра метод получает функцию, которая будет вызвана перед перерисовкой.</p> + +<div class="note"><strong>Заметка:</strong> Ваш callback метод сам должен вызвать <code>requestAnimationFrame()</code> иначе анимация остановится.</div> + +<p>Вы должны вызывать этот метод всякий раз, когда готовы обновить анимацию на экране, чтобы запросить планирование анимации. Обычно запросы происходят 60 раз в секунду, но чаще всего совпадают с частотой обновления экрана. В большинстве браузеров в фоновых вкладках или скрытых <code><iframe></code>, вызовы <code>requestAnimationFrame()</code> приостанавливаются, для того, чтобы повысить производительность и время работы батареи.</p> + +<p>Callback методу передаётся один аргумент, {{domxref("DOMHighResTimeStamp")}}, который содержит текущее время (количество миллисекунд, прошедших с момента <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin">time origin</a>). Когда callback-и, отправленные в очередь с помощью <code>requestAnimationFrame()</code> начинают вызывать несколько callback-ов в одном кадре, каждый получает одинаковый timestamp, хотя для вычисления каждого callback было затрачено время. Этот timestamp - десятичное число в миллисекундах, но с минимальной точностью в 1ms (1000 µs).</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="brush: js notranslate">window.requestAnimationFrame(callback);</pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функция, которая будет вызвана, когда придёт время обновить вашу анимацию на следующей перерисовке.</dd> + <dt><code>element</code> {{ optional_inline() }}</dt> + <dd>Необязательный параметр (не используется в Firefox или IE), определяющий элемент, который визуально содержит всю анимацию. Для canvas'а и WebGL'a им должен быть {{ HTMLElement("canvas") }}. Для других элементов вы можете опустить этот параметр для чуть лучшего пользовательского опыта.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p><code>requestID</code> — длинное целое, являющееся уникальным идентификатором для записи, содержащей callback. Оно не равно нулю, но других предположений о его значении делать не следует. Вы можете передать его в {{ domxref("window.cancelAnimationFrame()") }} для отмены вызова.</p> + +<h2 id="Notes" name="Notes">Пример</h2> + +<pre class="brush: js notranslate">var start = null; +var element = document.getElementById('SomeElementYouWantToAnimate'); + +function step(timestamp) { + if (!start) start = timestamp; + var progress = timestamp - start; + element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)'; + if (progress < 2000) { + window.requestAnimationFrame(step); + } +} + +window.requestAnimationFrame(step);</pre> + +<h2 id="Примечание">Примечание</h2> + +<p>В Edge версиях младше 17 и в Internet Explorer не надежно запускать <code>requestAnimationFrame</code> перед циклом рисования.</p> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Без изменений, заменяет предыдущую.</td> + </tr> + <tr> + <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td> + <td>{{Spec2('RequestAnimationFrame')}}</td> + <td>Первоначальное описание.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2> + +<p id="Specification">{{Compat("api.Window.requestAnimationFrame")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{ domxref("window.mozAnimationStartTime") }}</li> + <li>{{ domxref("window.cancelAnimationFrame()") }}</li> + <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li> + <li><a class="external" href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> + <li><a class="external" href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> + <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li> +</ul> diff --git a/files/ru/web/api/window/unhandledrejection_event/index.html b/files/ru/web/api/window/unhandledrejection_event/index.html new file mode 100644 index 0000000000..c32838dc9c --- /dev/null +++ b/files/ru/web/api/window/unhandledrejection_event/index.html @@ -0,0 +1,50 @@ +--- +title: unhandledrejection +slug: Web/API/Window/unhandledrejection_event +translation_of: Web/API/Window/unhandledrejection_event +original_slug: Web/Events/unhandledrejection +--- +<p>Событие <strong><code>unhandledrejection</code></strong> происходит, когда {{jsxref("Promise")}} завершен с ошибкой, но на данную ошибку не установлен обработчик.</p> + +<table class="properties"> + <tbody> + <tr> + <td>Всплытие</td> + <td>Нет</td> + </tr> + <tr> + <td>Возможность отмены</td> + <td>Нет</td> + </tr> + <tr> + <td>Target objects</td> + <td>defaultView</td> + </tr> + <tr> + <td>Интерфейс</td> + <td>{{domxref("PromiseRejectionEvent")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<pre class="brush:js;">window.addEventListener("unhandledrejection", function (event) { + console.warn("Внимание: Необработанная ошибка Promise. Позор вам! Причина: " + + event.reason); +}); +</pre> + +<h2 id="Inheritance">Inheritance</h2> + +<p>Событие <code>unhandledrejection</code> реализует {{domxref("PromiseRejectionEvent")}} интерфейс, который наследуется от {{domxref("Event")}}. Вы можете использовать свойства и методы, определенные в данных интерфейсах.</p> + +<p>{{InheritanceDiagram('','','', 'PromiseRejectionEvent')}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{Event("rejectionhandled")}}</li> + <li>{{domxref("PromiseRejectionEvent")}}</li> + <li>{{domxref("Promise")}}</li> +</ul> diff --git a/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html b/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html deleted file mode 100644 index b85f3671ef..0000000000 --- a/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Кодирование и декодирование в формате Base64 -slug: Web/API/WindowBase64/Base64_encoding_and_decoding -translation_of: Glossary/Base64 ---- -<p><strong>Base64</strong> - это группа cхожих <a href="https://en.wikipedia.org/wiki/Binary-to-text_encoding">binary-to-text encoding</a> схем, которые представляют двоичные данные в ASCII-формате методом перевода в radix-64 представление. Термин <em>Base64</em> происходит от a specific <a href="https://en.wikipedia.org/wiki/MIME#Content-Transfer-Encoding">MIME content transfer encoding</a>.</p> - -<p>Кодирование Base64 широко используется в случаях, когда требуется перекодировать двоичные данные для передачи по каналу приспособленному для передачи текстовых данных. Это делается с целью защиты двоичных данных от любых возможных повреждений при передаче. Base64 широко используется во многих приложениях, включая электронную почту (<a href="https://en.wikipedia.org/wiki/MIME">MIME</a>), и при сохранении больших объёмов данных в <a href="/en-US/docs/XML">XML</a>.</p> - -<p>В языке JavaScript существуют две функции, для кодирования и декодирования данных в/из формат Base64 соответственно:</p> - -<ul> - <li>{{domxref("WindowBase64.btoa","btoa()")}}</li> - <li>{{domxref("WindowBase64.atob","atob()")}}</li> -</ul> - -<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Функция </span></font>atob()</code> декодирует Base64-кодированную строку. В противоположность ей, функция <code>btoa()</code> создаёт Base64 кодированную ASCII строку из "строки" бинарных данных.</p> - -<p>Обе функции <code>atob()</code> и <code>btoa()</code> работают со строками. Если вам необходимо работать с <a href="/en-US/docs/Web/API/ArrayBuffer"><code>ArrayBuffers</code></a>, обратитесь к <a href="#">этому параграфу</a>.</p> - -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Документация</h2> - - <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/data_URIs" title="https://developer.mozilla.org/en-US/docs/data_URIs"><code>data</code> URIs</a></dt> - <dd><small><code>data</code> URIs, описанные в <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, позволяют создателям контента встроить в документ маленькие файлы в виде строки (инлайном).</small></dd> - <dt><a href="https://en.wikipedia.org/wiki/Base64" title="https://en.wikipedia.org/wiki/Base64">Base64</a></dt> - <dd><small>Wikipedia article about Base64 encoding.</small></dd> - <dt>{{domxref("WindowBase64.atob","atob()")}}</dt> - <dd><small>Decodes a string of data which has been encoded using base-64 encoding.</small></dd> - <dt>{{domxref("WindowBase64.btoa","btoa()")}}</dt> - <dd><small>Creates a base-64 encoded ASCII string from a "string" of binary data.</small></dd> - <dt><a href="#The_Unicode_Problem">The "Unicode Problem"</a></dt> - <dd><small>In most browsers, calling <code>btoa()</code> on a Unicode string will cause a <code>Character Out Of Range</code> exception. This paragraph shows some solutions.</small></dd> - <dt><a href="/en-US/docs/URIScheme" title="/en-US/docs/URIScheme">URIScheme</a></dt> - <dd><small>List of Mozilla supported URI schemes</small></dd> - <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a></dt> - <dd>In this article is published a library of ours whose aims are: - <ul> - <li>creating a <a class="external" href="http://en.wikipedia.org/wiki/C_%28programming_language%29" title="http://en.wikipedia.org/wiki/C_%28programming_language%29">C</a>-like interface for strings (i.e. array of characters codes —<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> in JavaScript) based upon the JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> interface,</li> - <li>creating a collection of methods for such string-like objects (since now: <code>stringView</code>s) which work <strong>strictly on array of numbers</strong> rather than on immutable JavaScript strings,</li> - <li>working with other Unicode encodings, different from default JavaScript's UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a>s,</li> - </ul> - </dd> - </dl> - - <p><span class="alllinks"><a href="/en-US/docs/tag/Base64">View All...</a></span></p> - </td> - <td> - <h2 class="Tools" id="Tools" name="Tools">Tools</h2> - - <ul> - <li><a href="#Solution_2_–_rewrite_the_DOMs_atob()_and_btoa()_using_JavaScript's_TypedArrays_and_UTF-8">Rewriting <code>atob()</code> and <code>btoa()</code> using <code>TypedArray</code>s and UTF-8</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - </ul> - - <p><span class="alllinks"><a href="/en-US/docs/tag/Base64">View All...</a></span></p> - - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> - - <ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed arrays</a></li> - <li><code><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a></code></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - <li><a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></li> - <li><a href="/en-US/docs/URI" title="/en-US/docs/URI"><code>URI</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a></li> - </ul> - </td> - </tr> - </tbody> -</table> - -<h2 id="The_Unicode_Problem">The "Unicode Problem"</h2> - -<p>Since <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a>s are 16-bit-encoded strings, in most browsers calling <code>window.btoa</code> on a Unicode string will cause a <code>Character Out Of Range</code> exception if a character exceeds the range of a 8-bit byte (0x00~0xFF). There are two possible methods to solve this problem:</p> - -<ul> - <li>the first one is to escape the whole string (with UTF-8, see {{jsxref("encodeURIComponent")}}) and then encode it;</li> - <li>the second one is to convert the UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> to an UTF-8 array of characters and then encode it.</li> -</ul> - -<p>Here are the two possible methods.</p> - -<h3 id="Solution_1_–_escaping_the_string_before_encoding_it">Solution #1 – escaping the string before encoding it</h3> - -<pre class="brush:js">function b64EncodeUnicode(str) { - // first we use encodeURIComponent to get percent-encoded UTF-8, - // then we convert the percent encodings into raw bytes which - // can be fed into btoa. - return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, - function toSolidBytes(match, p1) { - return String.fromCharCode('0x' + p1); - })); -} - -b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU=" -b64EncodeUnicode('\n'); // "Cg==" -</pre> - -<p>To decode the Base64-encoded value back into a String:</p> - -<pre class="brush: js">function b64DecodeUnicode(str) { - // Going backwards: from bytestream, to percent-encoding, to original string. - return decodeURIComponent(atob(str).split('').map(function(c) { - return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); - }).join('')); -} - -b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode" -b64DecodeUnicode('Cg=='); // "\n" -</pre> - -<p><a href="https://github.com/coolaj86/unibabel-js">Unibabel</a> implements common conversions using this strategy.</p> - -<h3 id="Solution_2_–_rewrite_the_DOMs_atob_and_btoa_using_JavaScripts_TypedArrays_and_UTF-8">Solution #2 – rewrite the DOMs <code>atob()</code> and <code>btoa()</code> using JavaScript's <code>TypedArray</code>s and UTF-8</h3> - -<p>Use a <a href="/en-US/docs/Web/API/TextEncoder">TextEncoder</a> polyfill such as <a href="https://github.com/inexorabletash/text-encoding">TextEncoding</a> (also includes legacy windows, mac, and ISO encodings), <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a>, combined with a <a href="https://github.com/feross/buffer">Buffer</a> and a Base64 implementation such as <a href="https://github.com/beatgammit/base64-js">base64-js</a>.</p> - -<p>When a native <code>TextEncoder</code> implementation is not available, the most light-weight solution would be to use <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a> with <a href="https://github.com/beatgammit/base64-js">base64-js</a>. Use the browser implementation when you can.</p> - -<p>The following function implements such a strategy. It assumes base64-js imported as <code><script type="text/javascript" src="base64js.min.js"/></code>. Note that TextEncoderLite only works with UTF-8.</p> - -<pre class="brush: js">function Base64Encode(str, encoding = 'utf-8') { - var bytes = new (TextEncoder || TextEncoderLite)(encoding).encode(str); - return base64js.fromByteArray(bytes); -} - -function Base64Decode(str, encoding = 'utf-8') { - var bytes = base64js.toByteArray(str); - return new (TextDecoder || TextDecoderLite)(encoding).decode(bytes); -} -</pre> diff --git a/files/ru/web/api/windowbase64/index.html b/files/ru/web/api/windowbase64/index.html deleted file mode 100644 index f51b72c102..0000000000 --- a/files/ru/web/api/windowbase64/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: WindowBase64 -slug: Web/API/WindowBase64 -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This helper neither defines nor inherits any properties.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This helper does not inherit any methods.</em></p> - -<dl> - <dt>{{domxref("WindowBase64.atob()")}}</dt> - <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt>{{domxref("WindowBase64.btoa()")}}</dt> - <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/ru/web/api/windowbase64/btoa/index.html b/files/ru/web/api/windoworworkerglobalscope/btoa/index.html index 06b76a6304..dd19e4cc27 100644 --- a/files/ru/web/api/windowbase64/btoa/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/btoa/index.html @@ -1,7 +1,8 @@ --- title: WindowBase64.btoa() -slug: Web/API/WindowBase64/btoa +slug: Web/API/WindowOrWorkerGlobalScope/btoa translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +original_slug: Web/API/WindowBase64/btoa --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ru/web/api/windowtimers/settimeout/index.html b/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html index 9e39020215..8fb8144b50 100644 --- a/files/ru/web/api/windowtimers/settimeout/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html @@ -1,7 +1,8 @@ --- title: WindowTimers.setTimeout() -slug: Web/API/WindowTimers/setTimeout +slug: Web/API/WindowOrWorkerGlobalScope/setTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +original_slug: Web/API/WindowTimers/setTimeout --- <div>{{ APIRef() }}</div> diff --git a/files/ru/web/api/windowtimers/index.html b/files/ru/web/api/windowtimers/index.html deleted file mode 100644 index ac80f42b5f..0000000000 --- a/files/ru/web/api/windowtimers/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -tags: - - API - - HTML DOM -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface do not define any property, nor inherit any.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface do not inherit any method.</em></p> - -<dl> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Schedules the execution of a function each X milliseconds.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Sets a delay for executing a function.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}}</td> - <td>1.0</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/ru/web/api/document/async/index.html b/files/ru/web/api/xmldocument/async/index.html index 2ff21f28af..73e02f4142 100644 --- a/files/ru/web/api/document/async/index.html +++ b/files/ru/web/api/xmldocument/async/index.html @@ -1,7 +1,8 @@ --- title: Document.async -slug: Web/API/Document/async +slug: Web/API/XMLDocument/async translation_of: Web/API/XMLDocument/async +original_slug: Web/API/Document/async --- <p>{{APIRef("DOM")}}{{Deprecated_header}} {{Non-standard_header}}</p> diff --git a/files/ru/web/api/xmlhttprequest/loadstart_event/index.html b/files/ru/web/api/xmlhttprequest/loadstart_event/index.html new file mode 100644 index 0000000000..4065e0f968 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/loadstart_event/index.html @@ -0,0 +1,90 @@ +--- +title: loadstart +slug: Web/API/XMLHttpRequest/loadstart_event +translation_of: Web/API/XMLHttpRequest/loadstart_event +original_slug: Web/Events/loadstart +--- +<p>Событие <code>loadstart</code> происходит, когда начинается загрузка.</p> + +<h2 id="Общая_информация">Общая информация</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/progress-events/">Progress</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;">ProgressEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Распространяется</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Цель</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>lengthComputable </code>{{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Specifies whether or not the total size of the transfer is known. Read only.</td> + </tr> + <tr> + <td><code>loaded</code> {{readonlyInline}}</td> + <td>unsigned long (long)</td> + <td>The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.</td> + </tr> + <tr> + <td><code>total</code> {{readonlyInline}}</td> + <td>unsigned long (long)</td> + <td>The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.</td> + </tr> + </tbody> +</table> + +<h2 id="Связанные_свойства">Связанные свойства</h2> + +<ul> + <li>{{event("loadstart")}}</li> + <li>{{event("progress")}}</li> + <li>{{event("error")}}</li> + <li>{{event("abort")}}</li> + <li>{{event("load")}}</li> + <li>{{event("loadend")}}</li> +</ul> + +<h2 id="См._также">См. также</h2> + +<ul> + <li><a href="/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">Отслеживание состояния загрузки</a></li> +</ul> |