aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/window
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:51:05 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:51:05 +0100
commitc058fa0fb22dc40ef0225b21a97578cddd0aaffa (patch)
treedf20f8b4c724b61cb9c34cdb450a7ac77d690bd0 /files/ru/web/api/window
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.gz
translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.bz2
translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.zip
unslug ru: move
Diffstat (limited to 'files/ru/web/api/window')
-rw-r--r--files/ru/web/api/window/domcontentloaded_event/index.html146
-rw-r--r--files/ru/web/api/window/load_event/index.html88
-rw-r--r--files/ru/web/api/window/requestanimationframe/index.html92
-rw-r--r--files/ru/web/api/window/unhandledrejection_event/index.html49
4 files changed, 375 insertions, 0 deletions
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..7702dcfd24
--- /dev/null
+++ b/files/ru/web/api/window/domcontentloaded_event/index.html
@@ -0,0 +1,146 @@
+---
+title: DOMContentLoaded
+slug: Web/Events/DOMContentLoaded
+tags:
+ - события
+translation_of: Web/API/Window/DOMContentLoaded_event
+---
+<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>&lt;script&gt;
+ document.addEventListener("DOMContentLoaded", function(event) {
+  console.log("DOM fully loaded and parsed");
+ });
+&lt;/script&gt;
+</pre>
+
+<pre>&lt;script&gt;
+ document.addEventListener("DOMContentLoaded", function(event) {
+  console.log("DOM fully loaded and parsed");
+ });
+
+for(var i=0; i&lt;1000000000; i++)
+{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
+&lt;/script&gt;
+</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..a8d456806d
--- /dev/null
+++ b/files/ru/web/api/window/load_event/index.html
@@ -0,0 +1,88 @@
+---
+title: load
+slug: Web/Events/load
+translation_of: Web/API/Window/load_event
+---
+<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">&lt;script&gt;
+ window.addEventListener("load", function(event) {
+  console.log("All resources finished loading!");
+ });
+&lt;/script&gt;
+</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..d451cae62f
--- /dev/null
+++ b/files/ru/web/api/window/requestanimationframe/index.html
@@ -0,0 +1,92 @@
+---
+title: window.requestAnimationFrame()
+slug: DOM/window.requestAnimationFrame
+tags:
+ - Анимация
+translation_of: Web/API/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>&lt;iframe&gt;</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 &lt; 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..5248e75748
--- /dev/null
+++ b/files/ru/web/api/window/unhandledrejection_event/index.html
@@ -0,0 +1,49 @@
+---
+title: unhandledrejection
+slug: Web/Events/unhandledrejection
+translation_of: Web/API/Window/unhandledrejection_event
+---
+<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>