diff options
Diffstat (limited to 'files/ru/orphaned/web/guide')
11 files changed, 0 insertions, 1701 deletions
diff --git a/files/ru/orphaned/web/guide/ajax/с_чего_начать_question_/index.html b/files/ru/orphaned/web/guide/ajax/с_чего_начать_question_/index.html deleted file mode 100644 index 7fbfff4658..0000000000 --- a/files/ru/orphaned/web/guide/ajax/с_чего_начать_question_/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: С чего начать? -slug: orphaned/Web/Guide/AJAX/С_чего_начать? -original_slug: Web/Guide/AJAX/С_чего_начать? ---- -<p>IKFIA -</p> diff --git a/files/ru/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/ru/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 8744c80e01..0000000000 --- a/files/ru/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Создание и вызов событий -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - DOM - - JavaScript - - events - - события -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -<p>Эта статья демонстрирует, как создавать и вызывать пользовательские DOM-события. Такие события часто называют <strong>искусственными</strong> событиями, по отношению к событиям, производимым браузером.</p> - -<h2 id="Создание_собственных_событий">Создание собственных событий</h2> - -<p>События могут быть созданы с помощью конструктора <code><a href="/ru/docs/Web/API/Event">Event</a></code>:</p> - -<pre class="brush: js">var event = new Event('build'); - -// Подписываемся на событие -elem.addEventListener('build', function (e) { ... }, false); - -// Вызываем событие -elem.dispatchEvent(event);</pre> - -<p>Этот конструктор поддерживается во всех современных браузерах (кроме Internet Explorer). Более подробную информацию смотрите ниже <a href="#The_old-fashioned_way">"Старомодный способ"</a>.</p> - -<h3 id="Добавление_пользовательских_данных_–_CustomEvent()">Добавление пользовательских данных – CustomEvent()</h3> - -<p>Чтобы добавить больше данных к объекту event, существует интерфейс <a href="/ru/docs/Web/API/CustomEvent">CustomEvent</a>, и вы можете использовать свойство <u><strong>detail</strong></u>, чтобы передать собственные данные. Например, событие может быть создано так:</p> - -<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre> - -<p>Это позволит вам получить доступ к дополнительным данным в обработчике:</p> - -<pre class="brush: js">function eventHandler(e) { - log('The time is: ' + e.detail); -} -</pre> - -<h3 id="Старомодный_способ"><a id="The_old-fashioned_way" name="The_old-fashioned_way">Старомодный способ</a></h3> - -<p>Старый способ создать событие использует API в стиле Java. Пример:</p> - -<pre class="brush: js">// Создание события -var event = document.createEvent('Event'); - -// Назначить имя событию -event.initEvent('build', true, true); - -// Слушаем событие -document.addEventListener('build', function (e) { - // e.target соответствует объекту document -}, false); - -// target события может быть любой элемент -document.dispatchEvent(event); - -</pre> - -<h2 id="Вызов_встроенных_событий">Вызов встроенных событий</h2> - -<p>Этот пример показывает симуляцию клика (программно сгенерированное событие клика) по галочке чекбокса, используя DOM-методы. <a class="external" href="/samples/domref/dispatchEvent.html">Просмотр действующих примеров.</a></p> - -<pre class="brush: js">function simulateClick() { - var event = new MouseEvent('click', { - 'view': window, - 'bubbles': true, - 'cancelable': true - }); - var cb = document.getElementById('checkbox'); - var canceled = !cb.dispatchEvent(event); - if (canceled) { - // A handler called preventDefault. - alert("canceled"); - } else { - // None of the handlers called preventDefault. - alert("not canceled"); - } -}</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Совместимость с браузерами</h2> - -<p>{{Compat("api.Event.Event")}}</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> diff --git a/files/ru/orphaned/web/guide/events/event_handlers/index.html b/files/ru/orphaned/web/guide/events/event_handlers/index.html deleted file mode 100644 index c30df7b474..0000000000 --- a/files/ru/orphaned/web/guide/events/event_handlers/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: DOM onevent handlers -slug: orphaned/Web/Guide/Events/Event_handlers -translation_of: Web/Guide/Events/Event_handlers -original_slug: Web/Guide/Events/Event_handlers ---- -<p>Веб-платформа предоставляет несколько способов получения уведомлений о событиях DOM. Два общих подхода - это {{domxref ("EventTarget.addEventListener", " addEventListener ()")}} и конкретные обработчики <span class="seoSummary"><code>on<em>event</em></code> </span> . Эта страница посвящена тому, как работают последние.</p> - -<h2 id="Регистрация_обработчиков_onevent">Регистрация обработчиков onevent</h2> - -<p>Обработчики <strong><code>on<em>event</em></code></strong> - это свойства определённых элементов DOM, позволяющие управлять тем, как этот элемент реагирует на события. Элементы могут быть интерактивными (ссылки, кнопки, изображения, формы и т. д.) или неинтерактивными (например, элемент base <body>). События - это такие действия, как:</p> - -<ul> - <li>Клик мышкой</li> - <li>Нажатие клавиш</li> - <li>Получение фокуса</li> -</ul> - -<p>Обработчик on-event обычно называется с именем события, на которое он реагирует, например <code>on<em>click</em></code> , <code>on<em>keypress</em></code> , <code>on<em>focus</em></code> и т. д.</p> - -<p>Вы можете указать обработчик событий on<...> для конкретного события (например, {{event("click")}}) для данного объекта различными способами:</p> - -<ul> - <li>Добавление HTML элемента {{Glossary("attribute")}} с событием <code>on<em><eventtype></em></code>:<br> - <code><button <strong>onclick="handleClick()"</strong>></code>,</li> - <li>Или установив соответствующий параметр {{Glossary("property/JavaScript", "property")}} из JavaScript:<br> - <code>document.querySelector("button")<strong>.onclick = function(event) { … }</strong></code>.</li> -</ul> - -<p>Свойство обработчика событий <code>on<em>event</em></code> служит своего рода заполнителем, которому может быть назначен один обработчик событий. Чтобы разрешить установку нескольких обработчиков для одного и того же события на данном объекте, вы можете вызвать метод {{domxref("EventTarget.addEventListener", " addEventListener ()")}} , который управляет списком обработчиков для данного события на объекте. Затем обработчик можно удалить из объекта, вызвав его функцию {{domxref ("EventTarget.removeEventListener", "removeEventListener()")}} .</p> - -<p>Когда происходит событие, которое применяется к элементу, каждый из его обработчиков событий вызывается, чтобы позволить им обрабатывать это событие один за другим. Вам не нужно вызывать их самостоятельно, хотя вы можете сделать это во многих случаях, чтобы легко имитировать происходящее событие. Например, учитывая объект кнопки <code>myButton</code> , вы можете сделать <code>myButton.onclick(myEventObject)</code> для прямого вызова обработчика событий. Если обработчик событий не имеет доступа к каким-либо данным из объекта event, вы можете пропустить это событие при вызове функции <code>onclick()</code> .</p> - -<p>This continues until every handler has been called, unless one of the event handlers explicitly halts the processing of the event by calling {{domxref("Event.stopPropagation", "stopPropagation()")}} on the event object itself.</p> - -<p>Это продолжается до тех пор, пока не будет вызван каждый обработчик, если только один из обработчиков событий явно не остановит обработку события, вызвав {{domxref("Event.stopPropagation", " stopPropagation ()")}} на самом объекте события.</p> - -<h3 id="Non-element_objects">Non-element objects</h3> - -<p>Event handlers can also be set with properties on non-element objects that generate events, like {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others. For example, for the <code>progress</code> event on instances of <code>XMLHttpRequest</code>:</p> - -<pre class="brush: js">const xhr = new XMLHttpRequest(); -xhr.onprogress = function() { … };</pre> - -<h2 id="HTML_onevent_attributes">HTML onevent attributes</h2> - -<p>HTML elements have attributes named <code>on<em>event</em></code> which can be used to register a handler for an event directly within the HTML code. When the element is built from the HTML, the value of its <code>on<em>event</em></code> attributes are copied to the DOM object that represents the element, so that accessing the attributes' values using JavaScript will get the value set in the HTML.</p> - -<p>Further changes to the HTML attribute value can be done via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute"><code>setAttribute</code> </a>method; Making changes to the JavaScript property will have no effect.</p> - -<h3 id="HTML">HTML</h3> - -<p>Given this HTML document:</p> - -<pre class="brush: html"><p>Demonstrating quirks of <code>on<em>event</em></code> HTML attributes on - <a onclick="log('Click!')">these three words</a>. -</p> - -<div></div></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<p>Then this JavaScript demonstrates that the value of the HTML attribute is unaffected by changes to the JavaScript object's property.</p> - -<pre class="brush: js">let logElement = document.querySelector('div'); -let el = document.querySelector("a"); - -function log(msg) { logElement.innerHTML += `${msg}<br>` }; -function anchorOnClick(event) { log("Changed onclick handler") }; - -// Original Handler -log(`Element's onclick as a JavaScript property: <code> ${el.onclick.toString()} </code>`); - -//Changing handler using .onclick -log('<br>Changing onclick handler using <strong> onclick property </strong> '); - -el.onclick = anchorOnClick; - -log(`Changed the property to: <code> ${el.onclick.toString()} </code>`); -log(`But the HTML attribute is unchanged: <code> ${el.getAttribute("onclick")} </code><br>`); - -//Changing handler using .setAttribute -log('<hr/><br> Changing onclick handler using <strong> setAttribute method </strong> '); -el.setAttribute("onclick", 'anchorOnClick(event)'); - -log(`Changed the property to: <code> ${el.onclick.toString()} </code>`); -log(`Now even the HTML attribute has changed: <code> ${el.getAttribute("onclick")} </code><br>`);</pre> - -<h3 id="Result">Result</h3> - -<p>{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}</p> - -<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements instead set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">onblur</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onerror">onerror</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">onfocus</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onscroll">onscroll</a></code>.)</p> - -<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3> - -<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p> - -<ul> - <li><code>event</code> — for all event handlers except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li> - <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as a string.</li> -</ul> - -<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_inline_event_handler">the <code>this</code> keyword documentation</a>.</p> - -<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event; for details, see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> - -<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3> - -<div class="blockIndicator note"> -<p>TBD (non-capturing listener)</p> -</div> - -<h3 id="Terminology">Terminology</h3> - -<p>The term <strong>event handler</strong> may refer to:</p> - -<ul> - <li>Any function or object that is registered to be notified of events</li> - <li>Or more specifically, to the mechanism of registering event listeners via <code>on…</code> attributes in HTML or properties in Web APIs, such as <code><button onclick="alert(this)"></code> or <code>window.onload = function() { … }</code>.</li> -</ul> - -<p>When discussing the various methods of listening to events:</p> - -<ul> - <li><strong>Event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}}</li> - <li><strong>Event handler</strong> refers to a function registered via <code>on…</code> attributes or properties</li> -</ul> - -<h2 id="Specifications" name="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', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> - -<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4> - -<p>You can detect the presence of an event handler property with the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p> - -<pre class="brush: js">if ("onsomenewfeature" in window) { - /* do something amazing */ -} -</pre> - -<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4> - -<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects. That means you can't, for example, change <code>Window.prototype.onload</code>. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p> diff --git a/files/ru/orphaned/web/guide/events/index.html b/files/ru/orphaned/web/guide/events/index.html deleted file mode 100644 index 955e0d2d21..0000000000 --- a/files/ru/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Руководство разработчика событий -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - NeedsUpdate - - TopicStub -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -<p>{{draft()}}</p> - -<p>События связаны с:</p> - -<ul> - <li>Шаблонами проектирования, использующимися для асинхронной обработки инцидентов, возникающих в жизненном цикле веб страницы</li> - <li>Именованием, характеризацией и использованием большого количества инцидентов различного типа</li> -</ul> - -<p>Статья <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">Overview page</a> содержит в краткой манере описание шаблонов проектирования и типов определяемых современными браузерами инцидентов</p> - -<div></div> - -<p><a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">Custom events page</a> <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>, испускаемые от</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 class="hps">и вызова</span> <span class="hps">события</span> <span class="hps">в коде</span> <span class="hps">пользователя</span><span>.</span></span></p> - -<p><span id="result_box" lang="ru"><span class="hps">Остальные</span> <span class="hps">страницы описывают</span><span>, как использовать</span> <span class="hps">события разных</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>,</span> <span class="atn 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 class="hps">характеристикам</span> <span class="hps">событий</span> <span class="hps">встроенным</span> <span class="hps">или</span> <span class="hps">определённым</span> в <span class="atn hps">современных веб-</span><span>браузерах.</span></span></p> - -<p><span id="result_box" lang="ru"><span><strong>Устройство</strong>, на котором</span> <span class="atn hps">работа веб-</span><span>браузера</span> <span class="hps">может спровоцировать</span> <span class="hps">событие</span><span>, например</span> <span class="hps">связанное с</span> <span class="hps">изменением его</span> <span class="hps">положения и ориентации</span> <span class="hps">в реальном мире</span><span>,</span> <span class="hps">частично описано</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> и <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. Они<span id="result_box" lang="ru"> <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></p> - -<p><span id="result_box" lang="ru"><strong><span>Окно в котором</span> <span class="hps">отображается</span> <span class="hps">браузер</span></strong> <span class="hps">может вызвать</span> <span class="hps">события</span><span>, к примеру</span><span>,</span> <span class="hps">изменить размер</span><span>, если пользователь</span> <span class="hps">максимизирует</span> <span class="hps">окно или</span> <span class="hps">изменит его размер</span><span>.</span></span></p> - -<p><span id="result_box" lang="ru"><strong><span>Процесс загрузки</span></strong> <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 class="hps">в</span> <span class="hps">загрузки,</span> анализирования <span class="hps">и перевода</span> <span class="hps">веб-страниц</span> <span class="hps">отображаемых пользователю</span><span>.</span></span></p> - -<p><span id="result_box" lang="ru"><span><strong>Взаимодействие пользователя</strong> с</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 class="hps">пользователя</span> <span class="hps">развивались</span> <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 class="hps">и</span> <span class="hps">манера, в которой</span> <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 class="hps">событиями:</span></span></p> - -<ul> - <li>обычное событие при нажатии,</li> - <li>событие, активированное мышью,</li> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">событие жеста мышью</a>,</li> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">события нажатия на экран</a> и устаревшие <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">экспериментальные события нажатия на экран (от Mozilla)</a>.</li> -</ul> - -<p><span id="result_box" lang="ru"><strong><span>Модификация</span> <span class="hps">в структуре веб-страницы</span> <span class="hps">или содержании</span></strong> <span class="hps">может быть</span> <span class="hps">вызвано некоторым</span> <span class="hps">событием</span><span>, </span> <span class="hps">описанным в</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a><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> <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> подхода.</p> - -<p><span id="result_box" lang="ru"><strong><span class="hps">Потоки</span> <span class="hps">Медиа</span></strong>, <span class="hps">встроенный</span> <span class="hps">в</span> <span class="hps">HTML</span> <span class="hps">документа,</span> <span class="hps">может</span> <span class="hps">вызвать некоторые</span> <span class="hps">события</span><span>,</span> <span class="hps">страница описания</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a>.</p> - -<p><span id="result_box" lang="ru"><strong><span class="hps">Сетевые</span> </strong><span class="hps"><strong>запросы</strong>, сделанные</span> <span class="atn hps">веб-</span><span>страницей, могут</span> <span class="hps">вызвать некоторые</span> <span class="hps">события</span><span>.</span></span></p> - -<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></p> - -<div class="note"> -<p><span id="result_box" lang="ru"><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>Структура должна</span> <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 class="hps"> знаете и должны знать</span> <span class="hps">о событиях</span> <span class="hps">будет опубликовано</span> <span class="hps">здесь.</span></span></p> -</div> - -<h2 id="Docs">Docs</h2> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/ru/orphaned/web/guide/events/media_events/index.html b/files/ru/orphaned/web/guide/events/media_events/index.html deleted file mode 100644 index 44116bc573..0000000000 --- a/files/ru/orphaned/web/guide/events/media_events/index.html +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: События в медиа (audio, video) объектах -slug: orphaned/Web/Guide/Events/Media_events -tags: - - Видео - - Медиа - - аудио - - события -translation_of: Web/Guide/Events/Media_events -original_slug: Web/Guide/Events/Media_events ---- -<p>Встроенные с помощью HTML тегов {{ HTMLElement("audio") }} или {{ HTMLElement("video") }} медиа объекты генерируют различные события. В этом разделе приведён их список и описание.</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Название события</th> - <th>Описание</th> - </tr> - <tr> - <td><code>abort</code></td> - <td>Отправляется, когда воспроизведение прерывается; Например, если воспроизведение медиа прерывается и начинается с самого начала, это событие будет отправлено.</td> - </tr> - <tr> - <td><code>{{event("canplay")}}</code></td> - <td>Отправляется, когда доступно достаточно данных для того, что бы медиа могло воспроизвестись, по крайней мере, в течение нескольких кадров. Соответствует состоянию (readyState) HAVE_ENOUGH_DATA.</td> - </tr> - <tr> - <td><code>{{event("canplaythrough")}}</code></td> - <td>Отправляется, когда состояние готовности изменяется к CAN_PLAY_THROUGH. Указывает, что медиа может быть полностью воспроизведено без перерыва, предполагая, что скорость загрузки остаётся, по крайней мере на нынешнем уровне. Примечание: Ручная установка CURRENTTIME вызовет событие canplaythrough в Firefox. В других браузерах это может не произойти.</td> - </tr> - <tr> - <td><code>{{event("durationchange")}}</code></td> - <td>Метаданные были загружены или изменены, что указывает на изменение в продолжительности медиа. Может быть отправлено, например, когда медиа загружено достаточно для того, чтобы продолжительность уже была известна.</td> - </tr> - <tr> - <td><code>{{event("emptied")}}</code></td> - <td>Медиа стало пустым. Например, это событие отправляется, если медиа уже загружено (или частично загружено), и метод <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="en/nsIDOMHTMLMediaElement"><code>load()</code></a> был вызван что бы его перезагрузить.</td> - </tr> - <tr> - <td>encrypted <span style="line-height: 1.5;">{{experimental_inline}}</span></td> - <td>The user agent has encountered initialization data in the media data.</td> - </tr> - <tr> - <td><code>ended</code></td> - <td>Отправляется, когда воспроизведение завершено.</td> - </tr> - <tr> - <td><code>error</code></td> - <td>Отправляется, когда произошла ошибка. Атрибут <code>error</code> медиа объекта содержит более подробную информацию об ошибке. Смотрите <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Error_handling">Error handling</a>, что бы узнать подробнее.</td> - </tr> - <tr> - <td><code>interruptbegin</code></td> - <td>Отправляется, когда воспроизведение на Firefox OS устройстве прервано по любой из причин - например, если приложение ушло в фон или аудио с большим приоритетом начало воспроизведение. См. <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a>.</td> - </tr> - <tr> - <td><code>interruptend</code></td> - <td>Отправляется, когда ранее прерванное воспроизведение на Firefox OS устройстве продолжает воспроизведение. См. <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td> - </tr> - <tr> - <td><code>{{event("loadeddata")}}</code></td> - <td>Завершена загрузка первого кадра (frame) медиа.</td> - </tr> - <tr> - <td><code>{{event("loadedmetadata")}}</code></td> - <td>Метаданные медиа были загружены; все атрибуты теперь содержат максимум информации.</td> - </tr> - <tr> - <td><code>{{event("loadstart")}}</code></td> - <td>Отправляется, когда начинается загрузка медиа.</td> - </tr> - <tr> - <td><code>mozaudioavailable</code></td> - <td>Sent when an audio buffer is provided to the audio layer for processing; the buffer contains raw audio samples that may or may not already have been played by the time you receive the event.</td> - </tr> - <tr> - <td><code>{{event("pause")}}</code></td> - <td>Отправляется, когда воспроизведение приостановлено.</td> - </tr> - <tr> - <td><code>{{event("play")}}</code></td> - <td>Отправляется, когда воспроизведение медиа начинается после того, как было приостановлено; то есть, когда воспроизведение возобновляется после паузы.</td> - </tr> - <tr> - <td><code>{{event("playing")}}</code></td> - <td>Отправляется, когда начинается воспроизведение медиа (в первый раз, после паузы или после перезапуска).</td> - </tr> - <tr> - <td><code>{{event("progress")}}</code></td> - <td>Отправляется периодически для информирования о прогрессе скачивания медиа файла. Информация об объёме загруженных данных доступна в атрибуте "buffered" элемента медиа.</td> - </tr> - <tr> - <td><code>{{event("ratechange")}}</code></td> - <td>Отправляется, когда изменяется скорость воспроизведения.</td> - </tr> - <tr> - <td><code>{{event("seeked")}}</code></td> - <td>Отправляется, когда операция поиска завершена.</td> - </tr> - <tr> - <td><code>{{event("seeking")}}</code></td> - <td>Отправляется, когда начинается операция поиска.</td> - </tr> - <tr> - <td><code>{{event("stalled")}}</code></td> - <td>Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> - </tr> - <tr> - <td><code>{{event("suspend")}}</code></td> - <td>Отправляется, когда загрузка медиа приостановлена. Это может произойти как потому, что загрузка была завершена, так и по другим причинам.</td> - </tr> - <tr> - <td><code>{{event("timeupdate")}}</code></td> - <td>Отправляется, когда изменяется значение атрибута <code>currentTime.</code></td> - </tr> - <tr> - <td><code>{{event("volumechange")}}</code></td> - <td>Отправляется, когда изменяется громкость звука (также когда звук включён или выключен).</td> - </tr> - <tr> - <td><code>{{event("waiting")}}</code></td> - <td>Отправляется, когда операция (напр. воспроизведение) была отложена до завершение другой операции (напр. поиск).</td> - </tr> - </tbody> -</table> - -<p>Вы можете легко следить за этими событиями, используя следующий код:</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true); -v.currentTime = 10.0; -</pre> - -<p>В этом примере первый элемент получает видео и вешает на него событие "seeked". Обработчик вызывает метод элемента play(), который начинает воспроизведение.</p> - -<p>Затем, в строке 3 примера, устанавливается атрибут currentTime элемента в значение 10.0, что инициирует переход к десятой секунде видео. Это приводит к отправлению события "seeking" после начала операции, и события "seeked" после её завершения.</p> - -<p>Другими словами, этот пример пытается перейти к 10-секундной видео, после чего начинает воспроизведение.</p> - -<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</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }} (Prior to Gecko 2.0, media events bubbled.)</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>encrypted</td> - <td> - <p class="p1">{{CompatChrome(42.0)}}</p> - </td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - </tr> - <tr> - <td>load</td> - <td>{{ CompatUnknown() }}</td> - <td>Removed in {{ CompatGeckoDesktop("1.9.2") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>mozaudioavailable {{ non-standard_inline() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>suspend</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.2") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - </tr> - <tr> - <td>encrypted</td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatNo }}</span></td> - <td>{{CompatChrome(43.0)}}</td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - <td> - <p class="p1">{{CompatChrome(42.0)}}</p> - </td> - </tr> - <tr> - <td>load</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - </tr> - <tr> - <td>mozaudioavailable {{ non-standard_inline() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoMobile("2.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - </tr> - <tr> - <td>suspend</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td> - </tr> - </tbody> -</table> -</div> - -<p> </p> diff --git a/files/ru/orphaned/web/guide/events/overview_of_events_and_handlers/index.html b/files/ru/orphaned/web/guide/events/overview_of_events_and_handlers/index.html deleted file mode 100644 index ea9b25b46d..0000000000 --- a/files/ru/orphaned/web/guide/events/overview_of_events_and_handlers/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Обзор событий и обработчиков -slug: orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers -translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers -original_slug: Web/Guide/Events/Overview_of_Events_and_Handlers ---- -<div class="summary"> -<p>Эта обзорная статья о событиях и их обработчиках описывает шаблон проектирования кода, который используется для реагирования на события, возникающие, когда браузер получает доступ к web-странице, и содержит подборку типов подобных событий, которые современные браузеры могут обрабатывать.</p> -</div> - -<p>События и их обработчики представляют собой основную технику в JavaScript для реагирования на события, возникающие, когда браузер получает доступ к web-странице, включая события о подготовке страницы к отображению, взаимодействии с её содержимым, в зависимости от устройства, на котором браузер был запущен, и многие другие случаи, такие как воспроизведение потоковой медиа-информации или расчёт времени анимации.</p> - -<p>События и обработчики событий заняли центральное место в web-программировании с добавлением языка в браузеры, сопровождая смену архитектуры рендеринга от перехвата и загрузки страницы к управлению с помощью событий, основанном на перекомпоновке (reflow). Сначала браузер ожидает, пока он получит все ресурсы, связанные со страницей, чтобы проанализировать, обработать, отрисовать и предоставить страницу пользователю. Отрисованная страница остаётся неизменной, пока браузер не запросит новую. С изменением в подходе к рендерингу динамической страницы, браузер непрерывно зацикливается между обработкой, отрисовкой, представлением содержимого и ожиданием некоторого нового триггера события. Триггеры событий включают, например, завершение загрузки ресурса по сети<em>,</em> скачивание изображений, которые теперь могут быть отрисованы на экране, завершение браузером анализа ресурса, обработку HTML-содержимого страницы, взаимодействие пользователя с содержимым страницы<em>,</em> нажатия кнопок. Дуглас Крокфорд хорошо объясняет это изменение в нескольких лекциях, особенно своей речи <em>"Неудобные API: Теория DOM",</em> которая описывает изменения в потоке изначального потока браузера от управляемого событиями браузера.</p> - -<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div> - -<p>Второй подход изменяет последние шаги, переходя от простого потока к бесконечному циклу, где ожидание и обработка возникновения новых событий следует за отрисовкой. Введение динамического подхода позволяет странице быть частично отрендериной, даже когда браузер ещё не закончил извлечение всех ресурсов; это так же разрешено для действий, управляемыми событиями, которые JavaScript использует. (Речь доступна на нескольких ресурсах, включая <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">этот</a>.) На данный момент, все среды исполнения JavaScript используют события и их обработчики.</p> - -<h2 id="Шаблон_проектирования_событий">Шаблон проектирования событий</h2> - -<p>Система событий, по своей сути, простой программный шаблон проектирования. Он начинается с соглашения о виде события и:</p> - -<ul> - <li>имени-строки, используемой для события,</li> - <li>типа структуры данных, используемых для представления ключевых свойств события,</li> - <li>объекта JavaScript, который будет 'вызывать' это событие.</li> -</ul> - -<p>Шаблон реализуется с помощью:</p> - -<ul> - <li>определение JavaScript-функции, которая принимает в качестве аргумента структуру данных, которая была согласована ранее, и</li> - <li>регистрации функции с помощью имени-строки через объект, который будет вызывать событие.</li> -</ul> - -<p>Функция считается "обработчиком", где оба именами взаимозаменяемы. Этому шаблону можно легко следовать с использованием полностью пользовательского кода, как объяснено в <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">статье о пользовательских событиях</a>. Шаблон так же используется современными web-браузерами, определяющими множество событий, которые вызываются в ответ на пользовательский ввод или активность браузера.</p> - -<p>Современные браузеры следуют событийному шаблону, используя стандартизированный подход. В качестве структуры данных для свойств события они применяют объект, полученный от объекта <code>EventPrototype</code>. Для регистратрации функции, которая будет обрабатывать эту структуру данных, используется метод, называемый <code>addEventListener</code>, который ожидает в качестве аргумента имя-строку, соответствующую типу события, и функцию-обработчика. В итоге, браузеры определяют огромное число объектов источников событий и широкое разнообразие типов событий, сформированных объектами.</p> - -<h2 id="Button_Event_Handler" name="Button_Event_Handler">Пример обработчика события кнопки</h2> - -<p>К примеру, браузерный элемент <code>button</code> предназначен для вызова события с именем <code>'click'</code> в ответ на нажатие кнопки мыши или прикосновение пальца к чувствительной части экрана. В HTML мы можем определить <code>button</code> как:</p> - -<pre class="brush: html"><button id="buttonOne">Click here to emit a 'click' event</button></pre> - -<p>и, в коде JavaScript, мы можем сначала определить функцию для обработки этого события <code>'click'</code> :</p> - -<pre class="brush: js">var example_click_handler = function (ev){ - var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype"; - alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind ); -};</pre> - -<p>и затем зарегистрировать свою функцию с помощью объекта <code>Button</code> или со стороны скрипта, используя представление DOM (Document Object Model) на HTML-странице:</p> - -<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne'); -buttonDOMElement.addEventListener('click', example_click_handler);</pre> - -<p>или на самой HTML-странице, добавив функцию как значение атрибута <code>'onclick'</code>, хотя этот вариант обычно используется на очень простых web-страницах.</p> - -<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p> - -<p>Этот код полагается на соглашение о том, что существует некоторый вид события, называемый <code>'click'</code> , который вызовет все функции-обработчики (или 'обработчик') с объектом-аргументом <code>Event</code> (на данный момент, в этом случае производный от объекта <code>MouseEvent</code> ) и будет запущен после манипуляций пользователя с элементами <code>button</code> на HTML-странице. Код не имеет видимого воздействия, пока пользователь не использует кнопки, наводит указатель мыши на элемент HTML и нажимает на левую кнопку или устанавливает палец или стилус на некоторое место на экране, выше кнопки; когда это произойдёт, <code>buttonDOMElement</code> объекта JavaScript вызовет функцию <code>example_click_handler</code> с объектом <code>Event</code> в качестве аргумента. Функция, в свою очередь, исполнит любые действия, описанные программистом, в данном случае отрыв диалоговое окно HTML. Заметим, что обработчик имеет доступ к объекту <code>ev</code>, так как тот передаётся в качестве аргумента; объект содержит информацию о событие, в частности время его возникновения.</p> - -<p>Во втором варианте, интегрирован в web-страницу намного более современный JavaScript обёрнут в событийный вызов функции, чтобы убедиться, что код будет выполнен только тогда, когда HTML будет обработан и доступен для изменения или декорирования. Например, код может быть объявлен так:</p> - -<pre class="brush: js">var funcInit = function(){ - // user code goes here and can safely address all the HTML elements from the page - // since the document has successfully been 'loaded' -} -document.addEventListener('DOMContentLoaded', funcInit); -</pre> - -<p>так что этот код будет вызван только после того, как объект <code>document</code> вызовет событие <code>'DOMContentLoaded'</code>, потому что HTML был проанализирован и были созданы объекты Javasript, представляющие каждый узел HTML-документа. Заметим, что в этом примере, код даже не передаёт аргумент события в функцию, потому что тому никогда не понадобится использовать данные, описанные в нем; скорее, код всего лишь нужно подождать, пока не случится событие.</p> - -<p>Шаблон легко изучить и внедрить. Сложность с событиями возникает из-за необходимости изучить большое разнообразие событий, которые представлены в современных web-браузерах. Так же есть некоторая сложность в понимании, как писать обработчики, так как данный код работает асинхронно и потенциально может быть вызван несколько раз подряд, но в немного другой ситуации.</p> - -<h2 id="Важные_события">Важные события</h2> - -<p>Web-браузеры определяют большое число событий, поэтому не практично описывать их все. <a href="/en-US/docs/Web/Reference/Events">Event Reference</a> призван содержать список стандартных событий, используемых в современных браузерах.</p> - -<p>В общем случае, события различного вида выделяют, основываясь на объекте, который вызывает данное событие, включая:</p> - -<ul> - <li>объект <code>window</code>, на случай изменения размера браузера,</li> - <li>объект <code>window.screen</code>, на случай изменения положения устройства,</li> - <li>объект <code>document</code>, включая загрузку, модификацию, пользовательское взаимодействие и разгрузку страницы,</li> - <li>объект в DOM (объектная модель документа) дереве, включая пользовательское взаимодействие или изменения,</li> - <li>объект <code>XMLHttpRequest</code>, используемый для запросов сети, и</li> - <li>медиа-объекты, такие как <code>audio</code> и <code>video</code>, когда медиа-потоковые плееры изменяют состояние.</li> -</ul> - -<p>хотя этот список на данный момент неполный.</p> - -<p>Некоторые события, которые стоит отметить:</p> - -<div class="note"> -<p><strong>Примечание:</strong> Этот список событий будет нуждаться в доработке, чтобы соответствовать действительности; эта работа ожидает некоторой глобальной реорганизации в документе. Так же нужно найти хорошее объяснение событий, включая события во время загрузки страницы, таких, как частично описанных в <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload">этой статье</a> или <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">этом вопросе на Stack Overflow</a>. </em></p> -</div> - -<ul> - <li>глобальный объект <a href="/en-US/docs/Web/API/Window"><code>window</code></a> вызывает событие, называемое <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a>, когда страница закончила рендеринг, подразумевая, что все ресурсы были скачаны и применены, так что скрипт был выполнен и изображения отображены,</li> - <li>глобальный объект <a href="/en-US/docs/Web/API/Window"><code>window</code></a> вызывает событие, называемое <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a>, когда высота или ширина окна браузера была изменена пользователем,</li> - <li>объект DOM <a href="/en-US/docs/Web/API/Document"><code>document</code></a>, представляющий HTML-документ, вызывает событие, называемое <code><a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code>, когда документ закончил загрузку,</li> - <li>объект узла DOM, такой как <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> или <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a>, вызывающий событие, называемое <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a>, когда пользователь нажимает кнопку мыши, пока её указатель находится поверх узла DOM на HTML-странице.</li> -</ul> - - - -<h2 id="Иерархия_объекта_событий">Иерархия объекта событий</h2> - -<p>Web-браузер определяет множество событий различного вида. Каждое описание включает, как структуру данных, передающуюся в обработчика, объект, который наследуется от объекта <code>EventPrototype</code>.</p> - -<p>Частичная диаграмма иерархии класса объекта событий:</p> - -<div class="note"> -<p><strong>Примечание:</strong> Эта диаграмма неполная.</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p> - -<p>Web API Документация содержит <a href="/en-US/docs/Web/API/Event">страницу, описывающую объект событий</a>, который так же включает известные события DOM, подклассы объекта <code>Event</code>.</p> - -<h2 id="Документации">Документации</h2> - -<p>Три ресурса на MDN (Mozilla Developer Network) частично полезные для программистов, желающих работать с событиями:</p> - -<ul> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events">Гайд по событиям</a>, который является частью <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>,</li> - <li><a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li> - <li>Web API Документация по объекту <a href="/en-US/docs/Web/API/Event"><code>Event</code></a>.</li> -</ul> diff --git a/files/ru/orphaned/web/guide/html/html5/constraint_validation/index.html b/files/ru/orphaned/web/guide/html/html5/constraint_validation/index.html deleted file mode 100644 index 7d1f9fecd8..0000000000 --- a/files/ru/orphaned/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,342 +0,0 @@ ---- -title: Constraint validation -slug: orphaned/Web/Guide/HTML/HTML5/Constraint_validation -tags: - - Селекторы -translation_of: Web/Guide/HTML/HTML5/Constraint_validation -original_slug: Web/Guide/HTML/HTML5/Constraint_validation ---- -<p>Создание веб форм всегда было комплексной задачей. В то время как сама по себе разметка формы - задача не сложная, проверка каждого поля на валидность - сложнее, а информирование пользователя о проблеме - может стать головной болью. Стандарт <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="en/HTML/HTML5">HTML5</a> предоставил новые механизмы для форм: были добавлены новые семантические типы для элемента {{ HTMLElement("input") }} и <em>обязательная валидация, </em>чтобы облегчить работу по проверке содержимого формы на стороне браузера. Проще говоря, обычная проверка может быть выполнена без JavaScript, простой установкой новых атрибутов; более сложные ограничения могут быть реализованы через HTML5 <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation_API" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation API">Constraint Validation API</a>.</p> - -<div class="note"><strong>Внимание:</strong> HTML5 Constraint validation не отменяет валидацию <em>на стороне сервера</em>. Несмотря на то что на сервер будет отправляться меньше запросов с невалидными данными, такие запросы всё ещё могут быть отправлены менее "сговорчивыми" браузерами (например, браузерами без поддержки HTML5 и без JavaScript) или плохими парнями, пытающимися взломать ваше веб-приложение. Следовательно, как и в случае с HTML4, вам всё ещё нужно проверять ввод на стороне сервера, таким образом, чтобы это было согласовано с валидацией на стороне клиента.</div> - -<h2 id="Внутренние_и_базовые_ограничения">Внутренние и базовые ограничения</h2> - -<p>В HTML5, базовые ограничения описываются двумя способами:</p> - -<ul> - <li>Использованием наиболее семантически подходящего значения для {{ htmlattrxref("type", "input") }} атрибута элемента {{ HTMLElement("input") }}, например, выбор типа <span style="font-family: courier new;">email</span> автоматически создаёт ограничение, которое проверяет, является ли значение e-mail адресом.</li> - <li>Установкой значений для атрибутов, связанных с валидацией, описывая базовые ограничения без использования JavaScript.</li> -</ul> - -<h3 id="Семантические_типы_input-ов">Семантические типы input-ов</h3> - -<p>Атрибуты, присущие элементам {{ htmlattrxref("type", "input") }}:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Input type</th> - <th scope="col">Определение ограничения</th> - <th scope="col">Связанное с этим нарушение</th> - </tr> - </thead> - <tbody> - <tr> - <td><span style="font-family: courier new;"><input type="URL"></span></td> - <td>Значение должно быть абсолютным URL, одним из: - <ul> - <li>валидным URI (как описано в <a class="external" href="http://www.ietf.org/rfc/rfc3986.txt" title="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a>)</li> - <li>валидным IRI, без query компонента (как описано в <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>валидным IRI, без query компонента и без неэкранированных не-ASCII символов (как описано в <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>валидным IRI, при условии, что кодировка документа UTF-8 или UTF-16 (как описано в <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - </ul> - </td> - <td><strong>Type mismatch </strong>constraint violation</td> - </tr> - <tr> - <td> <span style="font-family: courier new;"><input type="email"></span></td> - <td>Значение должно следовать <a class="external" href="http://www.ietf.org/rfc/std/std68.txt" title="http://www.ietf.org/rfc/std/std68.txt">ABNF</a>: <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> где: - <ul> - <li><code>atext</code> (описан в <a class="external" href="http://tools.ietf.org/html/rfc5322" title="http://tools.ietf.org/html/rfc5322">RFC 5322</a>) - US-ASCII символ (<span style="font-family: courier new;">A</span> to <span style="font-family: courier new;">Z</span> and <span style="font-family: courier new;">a</span>-<span style="font-family: courier new;">z</span>), цифра (от <span style="font-family: courier new;">0</span> до <span style="font-family: courier new;">9</span>) или один из следующих: <br> - <span style="font-family: courier new;">! # $ % & ' * + - / = ? ` { } | ~ </span>специальных символов,</li> - <li><code>ldh-str</code> (описан в <a class="external" href="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5" title="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5">RFC 1034</a>) - US-ASCII символы, цифры и "<span style="font-family: courier new;">-"</span>, сгруппированы по словам и разделённые точкой (<span style="font-family: courier new;">.</span>).</li> - </ul> - - <div class="note"><strong>Внимание:</strong> если установлен атрибут {{ htmlattrxref("multiple", "input") }}, в поле могут быть вписаны несколько e-mail адресов, разделённых запятыми. Если любое из этих условий не выполнено, будет вызвано <strong>Type mismatch </strong>constraint violation.</div> - </td> - <td><strong>Type mismatch </strong>constraint violation</td> - </tr> - </tbody> -</table> - -<p>Следует учесть, что большинство типов input не имеют "нативных" ограничений, а некоторые из них просто лишены валидации или имеют автоматическую корректировку невалидных значений по умолчанию. </p> - -<h3 id="Атрибуты_валидации">Атрибуты валидации</h3> - -<p>Ниже перечислены атрибуты, которые описывают базовые ограничения:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Атрибут</th> - <th scope="col">Типы input с поддержкой атрибута</th> - <th scope="col">Возможные значения</th> - <th scope="col">Описание ограничения</th> - <th scope="col">Связанное нарушение</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ htmlattrxref("pattern", "input") }}</td> - <td>text, search, url, tel, email, password</td> - <td><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions">Регулярное выражение JavaScript</a> (по стандарту <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" title="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a>, флаги <code title="">global</code>, <code title="">ignoreCase</code>, и <code title="">multiline</code> <em>отключены)</em></td> - <td>Значение должно подходить под паттерн</td> - <td><strong>Pattern mismatch</strong> constraint violation</td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("min", "input") }}</td> - <td>range, number</td> - <td>Валидное число</td> - <td rowspan="3">Значение поля должно быть больше или равно значению атрибута</td> - <td rowspan="3"><strong>Underflow</strong> constraint violation</td> - </tr> - <tr> - <td>date, month, week</td> - <td>Валидная дата</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>Валидная дата и время</td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("max", "input") }}</td> - <td>range, number</td> - <td>Валидное число</td> - <td rowspan="3">Значение поля должно быть меньше или равно значению атрибута</td> - <td rowspan="3"><strong>Overflow</strong> constraint violation</td> - </tr> - <tr> - <td>date, month, week</td> - <td>Валидная дата</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>Валидная дата и время</td> - </tr> - <tr> - <td>{{ htmlattrxref("required", "input") }}</td> - <td>text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the {{ HTMLElement("select") }} and {{ HTMLElement("textarea") }} elements</td> - <td><em>никакое</em> так как это Boolean атрибут: его присутствие означает <em>true</em>, а отсутствие - <em>false</em></td> - <td>Значение должно быть не пустым (если установлено).</td> - <td><strong>Missing</strong> constraint violation</td> - </tr> - <tr> - <td rowspan="5">{{ htmlattrxref("step", "input") }}</td> - <td>date</td> - <td>Целое число дней</td> - <td rowspan="5">Пока в атрибут <code>step</code> не установлен <em>любой</em> литерал, значение может быть <strong>min</strong> + любое число, красное шагу.</td> - <td rowspan="5"><strong>Step mismatch </strong>constraint violation</td> - </tr> - <tr> - <td>month</td> - <td>Целое число месяцев</td> - </tr> - <tr> - <td>week</td> - <td>Целое число недель</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>Целое число секунд</td> - </tr> - <tr> - <td>range, number</td> - <td>Целое число</td> - </tr> - <tr> - <td>{{ htmlattrxref("maxlength", "input") }}</td> - <td>text, search, url, tel, email, password; также на элементе {{ HTMLElement("textarea") }}</td> - <td>Длина (целое число)</td> - <td>Количество символов (знаков) не должно превышать значение атрибута.</td> - <td><strong>Too long</strong> constraint violation</td> - </tr> - </tbody> -</table> - -<h2 id="Процесс_валидации_ограничений"><span class="author-g-by4vjwmiwjiydpj7">Процесс валидации ограничений</span></h2> - -<p>Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:</p> - -<ul> - <li>By a call to the checkValidity() method of a form-related <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> interface (<code><a href="/en-US/docs/Web/API/HTMLInputElement" title="en/DOM/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/en-US/docs/Web/API/HTMLSelectElement" title="en/DOM/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/en-US/docs/Web/API/HTMLButtonElement" title="en/DOM/HTMLButtonElement">HTMLButtonElement</a></code> or <code><a href="/en-US/docs/Web/API/HTMLTextAreaElement" title="en/DOM/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), which evaluates the constraints only on this element, allowing a script to get this information. (This is typically done by the user-agent when determining which of the <a href="/en-US/docs/Web/CSS" title="en/CSS">CSS</a> pseudo-classes, {{ Cssxref(":valid") }} or {{ Cssxref(":invalid") }}, applies.)</li> - <li>By a call to the checkValidity() function on the <code><a href="/en-US/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code> interface, which is called <em>statically validating the constraints</em>.</li> - <li>By submitting the form itself, which is called <em>interactively validating the constraints</em>.</li> -</ul> - -<div class="note"><strong>Note: </strong> - -<ul> - <li>If the {{ htmlattrxref("novalidate", "form") }} attribute is set on the {{ HTMLElement("form") }} element, interactive validation of the constraints doesn't happen.</li> - <li>Calling the send() method on the <a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a> interface doesn't trigger a constraint validation. In other words, this method sends the form data to the server even if doesn't satisfy the constraints.</li> -</ul> -</div> - -<h2 id="Complex_constraints_using_HTML5_Constraint_API"><span class="author-g-by4vjwmiwjiydpj7">Complex constraints using HTML5 Constraint API</span></h2> - -<p><span class="author-g-by4vjwmiwjiydpj7">Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.</span></p> - -<p><span class="author-g-by4vjwmiwjiydpj7">Basically, the idea is to trigger JavaScript on some form field event (like <strong>onchange</strong>) to calculate whether the constraint is violated, and then to use the method <code><em>field</em>.setCustomValidity()</code> to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.</span></p> - -<h3 id="Constraint_combining_several_fields_Postal_code_validation">Constraint combining several fields: Postal code validation</h3> - -<p>The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like <code>D-</code> in Germany, <code>F- </code> in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.</p> - -<div class="note"> -<p><strong>Note: </strong>This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. </p> -</div> - -<p><span style="line-height: 1.5;">As an example, we will add a script checking the constraint validation for this simple form:</span></p> - -<pre class="brush: html"><form> - <label for="ZIP">ZIP : </label> - <input type="text" id="ZIP"> - <label for="Country">Country : </label> - <select id="Country"> - <option value="ch">Switzerland</option> - <option value="fr">France</option> - <option value="de">Germany</option> - <option value="nl">The Netherlands</option> - </select> - <input type="submit" value="Validate"> -</form></pre> - -<p>This displays the following form: </p> - -<p><label>Postal Code: </label><input> <label>Country: </label><select><option value="ch">Switzerland</option><option value="fr">France</option><option value="de">Germany</option><option value="nl">The Netherlands</option></select></p> - -<p>First, we write a function checking the constraint itself:</p> - -<pre class="brush: js">function checkZIP() { - // For each country, defines the pattern that the ZIP has to follow - var constraints = { - ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ], - fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ], - de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ], - nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$', - "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ] - }; - - // Read the country id - var country = document.getElementById("Country").value; - - // Get the NPA field - var ZIPField = document.getElementById("ZIP"); - - // Build the constraint checker - var constraint = new RegExp(constraints[country][0], ""); - console.log(constraint); - - - // Check it! - if (constraint.test(ZIPField.value)) { - // The ZIP follows the constraint, we use the ConstraintAPI to tell it - ZIPField.setCustomValidity(""); - } - else { - // The ZIP doesn't follow the constraint, we use the ConstraintAPI to - // give a message about the format required for this country - ZIPField.setCustomValidity(constraints[country][1]); - } -} -</pre> - -<p>Then we link it to the <strong>onchange</strong> event for the {{ HTMLElement("select") }} and the <strong>oninput</strong> event for the {{ HTMLElement("input") }}:</p> - -<pre class="brush: js">window.onload = function () { - document.getElementById("Country").onchange = checkZIP; - document.getElementById("ZIP").oninput = checkZIP; -}</pre> - -<p>You can see a <a href="/@api/deki/files/4744/=constraint.html" title="https://developer.mozilla.org/@api/deki/files/4744/=constraint.html">live example</a> of the postal code validation. </p> - -<h3 id="Limiting_the_size_of_a_file_before_its_upload">Limiting the size of a file before its upload</h3> - -<p>Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint API, and especially the field.setCustomValidity() method, with another JavaScript API, here the HTML5 File API.</p> - -<p>Here is the HTML part:</p> - -<pre class="brush: html"><label for="FS">Select a file smaller than 75 kB : </label> -<input type="file" id="FS"></pre> - -<p>This displays:</p> - -<p>{{EmbedLiveSample("Limiting_the_size_of_a_file_before_its_upload")}}</p> - -<p>The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:</p> - -<pre class="brush: js">function checkFileSize() { - var FS = document.getElementById("FS"); - var files = FS.files; - - // If there is (at least) one file selected - if (files.length > 0) { - if (files[0].size > 75 * 1024) { // Check the constraint - FS.setCustomValidity("The selected file must not be larger than 75 kB"); - return; - } - } - // No custom constraint violation - FS.setCustomValidity(""); -}</pre> - -<p> </p> - -<p>Finally we hook the method with the correct event:</p> - -<pre class="brush: js">window.onload = function () { - document.getElementById("FS").onchange = checkFileSize; -}</pre> - -<p>You can see a <a href="/@api/deki/files/4745/=fileconstraint.html" title="https://developer.mozilla.org/@api/deki/files/4745/=fileconstraint.html">live example</a> of the File size constraint validation.</p> - -<h2 id="Visual_styling_of_constraint_validation"><span class="author-g-by4vjwmiwjiydpj7">Visual styling of constraint validation</span></h2> - -<p>Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.</p> - -<h3 id="Controlling_the_look_of_elements">Controlling the look of elements</h3> - -<p>The look of elements can be controlled via CSS pseudo-classes.</p> - -<h4 id="required_and_optional_CSS_pseudo-classes">:required and :optional CSS pseudo-classes</h4> - -<p>The <a href="/en-US/docs/Web/CSS/:required" title=":required"><code>:required</code></a> and <a href="/en-US/docs/Web/CSS/:optional" title=":optional"><code>:optional</code></a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.</p> - - -<h4 id="-moz-placeholder_CSS_pseudo-class">:-moz-placeholder CSS pseudo-class</h4> - -<p>See <a href="/en-US/docs/Web/CSS/:-moz-placeholder" title="/en-US/docs/Web/CSS/:-moz-placeholder">:-moz-placeholder</a>.</p> - -<h4 id="valid_invalid_CSS_pseudo-classes">:valid :invalid CSS pseudo-classes</h4> - -<p>The <a href="/en-US/docs/Web/CSS/:valid" title="/en-US/docs/Web/CSS/:valid">:valid</a> and <a href="/en-US/docs/Web/CSS/:invalid" title="/en-US/docs/Web/CSS/:invalid?redirectlocale=en-US&redirectslug=CSS%2F%3Ainvalid">:invalid</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes?redirectlocale=en-US&redirectslug=CSS%2FPseudo-classes">pseudo-classes</a> are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.</p> - -<h4 id="Default_styles">Default styles</h4> - -<h3 id="Controlling_the_text_of_constraints_violation">Controlling the text of constraints violation</h3> - -<h4 id="The_x-moz-errormessage_attribute">The x-moz-errormessage attribute</h4> - -<p>The x-moz-errormessage attribute is a Mozilla extension that allows you to specify the error message to display when a field does not successfully validate.</p> - -<div class="note"> -<p style="margin-left: 40px;">Note: This extension is non-standard.</p> -</div> - -<h4 id="Constraint_API's_element.setCustomValidity()">Constraint API's element.setCustomValidity()</h4> - -<p>The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted. The method works by taking a string parameter error. If error is a non-empty string, the method assumes validation was unsuccessful and displays error as an error message. If error is an empty string, the element is considered validated and resets the error message.</p> - -<h4 id="Constraint_API's_ValidityState_object"><span class="author-g-by4vjwmiwjiydpj7">Constraint API's ValidityState object</span></h4> - -<p>The DOM <a href="/en-US/docs/Web/API/ValidityState" title="/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a> interface represents the <em>validity states</em> that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.</p> - -<h3 id="Examples_of_personalized_styling"><span class="author-g-by4vjwmiwjiydpj7">Examples of personalized styling</span></h3> - -<h3 id="HTML4_fallback"><span class="author-g-by4vjwmiwjiydpj7">HTML4 fallback</span></h3> - -<h4 id="Trivial_fallback"><span class="author-g-by4vjwmiwjiydpj7">Trivial fallback</span></h4> - -<h4 id="JS_fallback"><span class="author-g-by4vjwmiwjiydpj7">JS fallback</span></h4> - -<h2 id="Conclusion"><span class="author-g-by4vjwmiwjiydpj7">Conclusion</span></h2> diff --git a/files/ru/orphaned/web/guide/html/html5/index.html b/files/ru/orphaned/web/guide/html/html5/index.html deleted file mode 100644 index 41c9d4a443..0000000000 --- a/files/ru/orphaned/web/guide/html/html5/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: HTML5 -slug: orphaned/Web/Guide/HTML/HTML5 -tags: - - HTML5 -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/Guide/HTML/HTML5 ---- -<p><span class="seoSummary"><strong>HTML5</strong> — последняя версия стандарта <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>. </span>Термин имеет два определения:</p> - -<ul> - <li>Новая версия <em>языка</em> HTML, с новыми элементами, атрибутами и новым поведением.</li> - <li>Набор технологий, позволяющий создавать разнообразные сайты и Web-приложения.</li> -</ul> - -<p><span class="seoSummary">Эта страница создана в помощь всем разработчикам Open Web и ссылается на множество материалов, сгруппированных по функциям:</span></p> - -<ul> - <li><em>Семантика: </em>позволяет точнее описывать, что из себя представляет ваш контент;</li> - <li><em>Связь:</em> новые способы общения с сервером;</li> - <li><em>Офлайн и Хранилище:</em> методы, позволяющие сохранять информацию локально на стороне клиента;</li> - <li><em>Мультимедиа:</em>создание и взаимодействие с видео и звуком;</li> - <li><em>2D/3D Графика и эффекты:</em> способы значительно разнообразить представление;</li> - <li><em>Доступ к устройствам:</em> использование разных устройств для ввода и вывода информации;</li> - <li><em>Стилизация:</em> создание изощрённых и совершенных тем.</li> -</ul> - -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 id="СЕМАНТИКА" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">СЕМАНТИКА</h2> - - <dl> - <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Секции и контуры в HTML5</a></dt> - <dd>Контурные и секционные элементы в HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.</dd> - <dt><a href="/ru/docs/HTML/%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Использование HTML5 audio и video</a></dt> - <dd>{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.</dd> - <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Формы в HTML5</a></dt> - <dd>Взгляд на улучшение форм в HTML5: API валидации, несколько новых атрибутов, новые значения для атрибута {{ htmlattrxref("type", "input") }} тега {{ HTMLElement("input") }} и новый элемент {{ HTMLElement("output") }}.</dd> - <dt>Новые семантические элементы</dt> - <dd>Кроме секций, медиа и форм, множество новых тегов, такие как {{ HTMLElement("mark") }}, {{ HTMLElement("figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("data") }}, {{ HTMLElement("time") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} и {{ HTMLElement("meter") }}, увеличено количество <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="/en-US/docs/HTML/HTML5/HTML5_element_list">валидных HTML5 элементов</a>.</dd> - <dt>Улучшение {{HTMLElement("iframe")}}</dt> - <dd>Использование атрибутов {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe") }}, разработчики могут задать нужный уровень безопасности и осуществить рендеринг тега {{HTMLElement("iframe")}}.</dd> - <dt><a href="/en-US/docs/MathML" title="/en-US/docs/MathML">MathML</a></dt> - <dd>Позволяет вставлять математические формулы.</dd> - <dt><a href="/ru/docs/HTML/HTML5/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML5" title="/en-US/docs/HTML/HTML5/Introduction_to_HTML5">Введение в HTML5</a></dt> - <dd>Эта статья знакомит вас с тем, как указать на то, что вы используете HTML5 в вашем веб-дизайне или веб-приложении.</dd> - <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-совместимый парсер</a></dt> - <dd>Анализатор, который превращает байты HTML документа в DOM, был расширен и точно определяет поведение, чтобы даже в случае неверного HTML, исход был предсказуемым и одинаков во всех HTML5-совместимых браузерах.</dd> - <dt></dt> - </dl> - - <h2 id="СВЯЗЬ" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">СВЯЗЬ</h2> - - <dl> - <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> - <dd>Позволяет создать постоянное соединение между страницей и сервером и обмениваться данными через него.</dd> - <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Server-sent события</a></dt> - <dd>Позволяет серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.</dd> - <dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt> - <dd>Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.</dd> - </dl> - - <h2 id="ОФФЛАЙН_И_ХРАНИЛИЩЕ" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ОФФЛАЙН И ХРАНИЛИЩЕ</h2> - - <dl> - <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Офлайн-ресурсы: кеш приложения</a></dt> - <dd>Firefox полностью поддерживает спецификацию HTML5 по офлайн-ресурсам. Другие браузеры также имеют поддержку спецификации на должном уровне</dd> - <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> - <dd>Firefox 3 поддерживает WHATWG online и offline события, которые позволяют приложениям и расширениям обнаружить есть ли активное подключение к Интернет, а также определить, когда соединение портится или улучшается.</dd> - <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG сессионное или постоянное хранилище (aka DOM Storage)</a></dt> - <dd>Постоянное или сессионное хранилище позволяет веб-приложениям хранить структурированные данные на стороне клиента.</dd> - <dt><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt> - <dd>Веб-стандарт для хранения значительных количеств структурированных данных в браузере и для быстрого их поиска, используя индексы.</dd> - <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt> - <dd>Поддержка HTML5 File API была добавлена в Gecko, сделав возможным веб-приложениям иметь доступ к файлам, выбираемых пользователем. Это включает поддержку множества файлов, используя <span style="font-family: monospace;">{{ HTMLElement("input") }} с</span> <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>типом</strong></a> <span style="font-family: courier new;">file</span>, имеющих атрибут <strong><a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple">multiple</a>.</strong> Ещё это <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> - </dl> - - <h2 id="МУЛЬТИМЕДИА" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">МУЛЬТИМЕДИА</h2> - - <dl> - <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Использование HTML5 audio и video</a></dt> - <dd>{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.</dd> - <dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt> - <dd>Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.</dd> - <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Использование Camera API</a></dt> - <dd>Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.</dd> - </dl> - - <h2 id="ГРАФИКА_И_ЭФФЕКТЫ" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ГРАФИКА И ЭФФЕКТЫ</h2> - - <dl> - <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt> - <dd><code>Узнайте о элементе {{ HTMLElement("canvas") }}</code> и узнайте, как рисовать графику и другие элементы в Firefox.</dd> - <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API для <code><canvas></code></a></dt> - <dd>HTML5 text API сейчас поддерживается в {{ HTMLElement("canvas") }}.</dd> - <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>WebGL приносит 3D в веб, соответствует OpenGL ES 2.0, может использоваться в HTML5 через {{ HTMLElement("canvas") }}.</dd> - <dt><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a></dt> - <dd>Основанный на XML формат векторных изображений, который может быть непосредственно вставлен в HTML.</dd> - </dl> - - <dl> - <dt></dt> - </dl> - </td> - <td> - <h2 id="производительность_и_интеграция" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">производительность и интеграция</h2> - - <dl> - <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>Позволяет делегировать выполнение JavaScript в фоновые потоки, это позволит предотвратить замедление интерактивных событий.</dd> - <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> - <dd>Позволяет извлечь асинхронно некоторые части страницы, что позволяет отобразить динамический контент, изменяющейся время от времени или от действий пользователя. Это технология, лежащая в основе <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a>.</dd> - <dt>JIT-компилирование движков JavaScript</dt> - <dd>Новое поколение движков JavaScript гораздо более мощных, приводящих к большей производительности.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>Позволяет управлять историей браузера. Это особенно полезно страниц, интерактивно загружающих новую информацию.</dd> - <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable атрибут: трансформируйте свой сайт в википедию!</a></dt> - <dd>HTML5 стандартизировал атрибут contentEditable. Узнайте больше об этой фиче.</dd> - <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt> - <dd>HTML5 drag and drop API позволяет перетаскивать элементы по сайту или на него. Также простейшее API для использования расширениями или иными приложениями.</dd> - <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Управление фокусом в HTML</a></dt> - <dd>Поддержка новый атрибутов HTML5 <code>activeElement</code> and <code>hasFocus</code>.</dd> - <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Обработчики протоколов для Web</a></dt> - <dd><code>Вы можете зарегистровать веб-приложения, как обработчики протоколов, используя метод navigator.registerProtocolHandler()</code>.</dd> - <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> - <dd>Контролирует анимации для обеспечения оптимальной производительности.</dd> - <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="/en-US/docs/DOM/Using_full-screen_mode">Fullscreen API</a></dt> - <dd>Позволяет использовать весь экран для веб-приложения, без отображения UI браузера.</dd> - <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a></dt> - <dd>Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.</dd> - <dt><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">Online and offline events</a></dt> - <dd>Для того, чтобы построить хорошую офлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернётся в сеть.</dd> - </dl> - - <h2 id="доступ_к_устройствам" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">доступ к устройствам</h2> - - <dl> - <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Использование Camera API</a></dt> - <dd>Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.</dd> - <dt><a href="/en-US/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">Touch события</a></dt> - <dd>Обрабатывает события, создаваемые нажатиями пользователя по тач скрину.</dd> - <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Геолокация</a></dt> - <dd>Позволяет браузерам получать местоположение пользователя.</dd> - <dt><a href="/en-US/docs/Detecting_device_orientation" title="/en-US/docs/Detecting_device_orientation">Определение ориентации устройства</a></dt> - <dd>Позволяет среагировать, когда устройство, на котором работает браузер, меняет ориентацию. Это может быть использовано в качестве устройства ввода (например, чтобы сделать игры, которые реагируют на положение устройства) или адаптировать компоновку страницы с ориентацией экрана (вертикальная или горизонтальная).</dd> - <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a></dt> - <dd>Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.</dd> - </dl> - - <h2 id="стилизация" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">стилизация</h2> - - <p><a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> был расширен, чтобы дать возможность стилизировать элементы наиболее оптимальным способом. Его часто называют CSS3, хотя CSS больше не является монолитной спецификацией и различные модули, не все на уровне 3: некоторые на уровне 1, а некоторые на уровне 4, с промежуточными уровнями.</p> - - <dl> - <dt>Новые способы стилизирования фона</dt> - <dd>Новая возможность задать тень элемента, используя {{ cssxref("box-shadow") }} или установление <a href="/en-US/docs/CSS/Multiple_backgrounds" title="/en-US/docs/CSS/Multiple_backgrounds">множественных фонов</a>.</dd> - <dt>Лучшие границы</dt> - <dd>Не только изображения можно использовать для стилизирования границы, используя {{ cssxref("border-image") }} или его длинные формы записи, а скруглить уголки можно свойством {{ cssxref("border-radius") }}.</dd> - <dt>Анимируйте свой стиль</dt> - <dd>Используйте <a href="/en-US/docs/CSS/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">CSS Переходы</a>, чтобы анимировать изменение состояния элемента или <a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">CSS Анимации</a> для анимации частей страницы без запуска событий, вы теперь можете контролировать мобильные элементы на вашей странице.</dd> - <dt>Улучшение типографии</dt> - <dd>Авторы могут лучше контролировать типографию. Например, они могут контролировать {{ cssxref("text-overflow") }} и <a href="/en-US/docs/CSS/hyphens" title="/en-US/docs/CSS/hyphens">перенос слов</a>, а также <a href="/en-US/docs/CSS/text-shadow" title="/en-US/docs/CSS/text-shadow">тень текста</a> и его <a href="/en-US/docs/CSS/text-decoration" title="/en-US/docs/SVG/Attribute/text-decoration">декорирование</a>. Могут загрузить и применить другой шрифт правилом {{ cssxref("@font-face") }}.</dd> - <dt>Новые презентационные макеты</dt> - <dd>Для того, чтобы улучшить гибкость дизайна, добавили: <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">CSS мульти-колоночный макет</a> и <a href="/en-US/docs/CSS/Flexbox" title="/en-US/docs/CSS/Flexbox">CSS отзывчивый блочный макет</a>.</dd> - </dl> - </td> - </tr> - </tbody> -</table> diff --git a/files/ru/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/ru/orphaned/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index fc4bfc2bd9..0000000000 --- a/files/ru/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Введение в HTML5 -slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - DOCTYPE - - HTML5 - - HTML5 парсер -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> - пятая редакция и самая новая версия стандарта HTML. Она предлагает новые возможности, которые предоставляют не только богатую поддержку медиа, но и также расширяет возможности для создания веб-приложений, которые могут взаимодействовать с пользователем, его локальными данными, и серверами проще и эффективнее, чем это было раньше.</p> -<p>Because HTML5 is still being developed, changes to the specifications are inevitable. Therefore, not all of its features are supported by all browsers yet. However, Gecko, and by extension, Firefox, has very good initial support for HTML5, and work continues toward supporting more of its features. Gecko began supporting some HTML5 features in version 1.8.1. You can find a list of all of the HTML5 features that Gecko currently supports on the <a href="/en/HTML/HTML5" title="en/HTML/HTML5">main HTML5 page</a>. For detailed information about multiple browsers' support of HTML5 features, refer to the <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> website.</p> -<h2 id="Declaring_that_the_document_contains_HTML5_mark-up_with_the_HTML5_doctype">Declaring that the document contains HTML5 mark-up with the HTML5 doctype</h2> -<p>The doctype for HTML5 is very simple. To indicate that your HTML content uses HTML5, simply use:</p> -<pre class="brush:html;"><!DOCTYPE html> -</pre> -<p>Doing so will cause even browsers that don't presently support HTML5 to enter into standards mode, which means that they'll interpret the long-established parts of HTML in an HTML5-compliant way while ignoring the new features of HTML5 they don't support.</p> -<p>This is much simpler than the former doctypes, and shorter, making it easier to remember and reducing the amount of bytes that must be downloaded.</p> -<h2 id="Декларация_кодировки_с_помощью_<meta_charset>">Декларация кодировки с помощью <code><meta charset></code></h2> -<p>The first thing done on a page is usually indicating the character set that is used. In previous versions of HTML, it was done using a very complex {{HTMLElement("meta")}} element. Now, it is very simple:</p> -<pre class="brush:html;"><meta charset="UTF-8"></pre> -<p>Place this right after your {{HTMLElement("head") }}, as some browsers restart the parsing of an HTML document if the declared charset is different from what they had anticipated. Also, if you are not currently using UTF-8, it's recommended that you switch to it in your Web pages, as it simplifies character handling in documents using different scripts.</p> -<p>Note that HTML5 restricts the valid charset to that compatible with ASCII and using at least 8 bits. This was done to tighten security and prevent some types of attacks.</p> -<h2 id="Использование_нового_HTML5_парсера">Использование нового HTML5 парсера</h2> -<p>The parsing rule of HTML5, which analyzes the meaning of mark-up, has been more precisely defined in HTML5. Until the introduction of HTML5, only the meaning of <em>valid</em> mark-up was defined, meaning that as soon as one small error was made in the mark-up (most Web sites have at least one), the behavior was undefined. Essentially, it meant that all browsers behaved differently, which is no longer the case. Now, faced with errors in the mark-up, all compliant browsers must behave exactly in the same way.</p> -<p>This requirement helps Web developers quite a bit. While it is true that all modern browsers now use these HTML5 parsing rules, non-HTML5-compliant browsers are still used by some. Keep in mind that it's still highly recommended that one write valid mark-up, as such code is easier to read and maintain, and it greatly decreases the prominence of incompatibilities that exists in various older browsers.</p> -<p>Не волнуйтесь - вам не придётся ничего менять на вашем веб-сайте - разработчики веб-браузерах сделали все для вас!</p> diff --git a/files/ru/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/ru/orphaned/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index fc0c5e000f..0000000000 --- a/files/ru/orphaned/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,374 +0,0 @@ ---- -title: Использование разделов и создание структуры HTML документа -slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -tags: - - HTML5 - - Веб - - Для опытных разработчиков - - Обзор - - Пример - - Разделы - - Руководство - - Структура -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -<div class="warning"> -<p><strong>Важно</strong>: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрён в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм <a href="http://www.w3.org/TR/html5/sections.html#outline">построения структуры</a> нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели <a href="http://www.w3.org/TR/html5/sections.html#rank">степень важности</a> заголовков (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>).</p> -</div> - -<p>Спецификация HTML5 предлагает разработчикам несколько новых элементов, позволяющих описывать структуру веб-документа с помощью стандартной семантики. В настоящей статье описываются эти элементы и способы их использования для создания требуемой структуры любого документа.</p> - -<h2 id="Структура_документа_в_HTML_4">Структура документа в HTML 4</h2> - -<p>Структура документа, т. е. семантическая структура контента, заключённого в теги <code><body></code> и <code></body></code>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включёнными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.</p> - -<p>Так, следующая разметка:</p> - -<div style="overflow: hidden;"> -<pre class="brush:xml notranslate"><div class="section" id="forest-elephants" > - <h1>Лесные слоны</h1> - <p>В данном разделе мы поговорим о малоизвестных лесных слонах. - ...продолжение данного раздела... - <div class="subsection" id="forest-habitat" > - <h2>Среда обитания</h2> - <p>Лесные слоны живут не на деревьях, а под ними. - ...продолжение данного подраздела... - </div> -</div> -</pre> -</div> - -<p>обеспечивает следующую структуру:</p> - -<pre class="notranslate">1. Лесные слоны - 1.1 Среда обитания -</pre> - -<p>Для задания нового раздела не обязательно использовать элементы {{HTMLElement("div")}}. Для этого достаточно наличия элемента заголовка. Поэтому, разметка</p> - -<pre class="brush:xml notranslate"><h1>Лесные слоны</h1> - <p>В данном разделе мы поговорим о малоизвестных лесных слонах. - ...продолжение данного раздела... - <h2>Среда обитания</h2> - <p>Лесные слоны живут не на деревьях, а под ними. - ...продолжение данного подраздела... - <h2>Рацион</h2> -<h1>Монгольская песчанка</h1> -</pre> - -<p>обеспечивает следующую структуру:</p> - -<pre class="notranslate">1. Лесные слоны - 1.1 Среда обитания - 1.2 Рацион -2. Монгольская песчанка -</pre> - -<h2 id="Какие_проблемы_решает_HTML5">Какие проблемы решает HTML5</h2> - -<p>Определение структуры документа и неявный алгоритм создания структуры в HTML 4 не отличаются чёткостью, что порождает множество проблем:</p> - -<ol> - <li>Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов <strong>class</strong> не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не даёт точного определения разделу и чётких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">реабилитационными технологиями</a>, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.</li> - <li>Объединить несколько документов в один непросто: включение подчинённого документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.</li> - <li>В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент {{HTMLElement("aside")}}, позволяющий исключить такие разделы из основной структуры.</li> - <li>Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: {{HTMLElement("nav")}} для наборов ссылок, например, оглавления, {{HTMLElement("footer")}} и {{HTMLElement("header")}} для информации, касающейся всего сайта. Обратите внимание, что {{HTMLElement("header")}} и {{HTMLElement("footer")}} не создают разделы как {{HTMLElement("section")}}, а, скорее, обеспечивают семантическую разметку частей раздела.</li> -</ol> - -<p>В общем, HTML5 обеспечивает большую точность при задании разделов и оглавлений, позволяя строить более предсказуемую структуру документа, что даёт браузерам возможность более качественно обслуживать пользователей.</p> - -<h2 id="Алгоритм_создания_структуры_HTML5">Алгоритм создания структуры HTML5</h2> - -<h3 id="Задание_разделов_в_HTML5">Задание разделов в HTML5</h3> - -<p>Весь контент, находящийся внутри {{HTMLElement("body")}}, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом {{HTMLElement("body")}}, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}}. </p> - -<div class="note"><strong>Note: </strong>Каждый раздел может иметь собственную иерархию заголовков. Следовательно, даже вложенный раздел может иметь {{HTMLElement("h1")}}. См. <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">«Задание заголовков в HTML5»</a>.</div> - -<p>Например:</p> - -<pre class="brush:xml notranslate"><section> - <h1>Лесные слоны</h1> - <section> - <h1>Введение</h1> - <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p> - </section> - <section> - <h1>Среда обитания</h1> - <p>Лесные слоны живут не на деревьях, а под ними.</p> - </section> - <aside> - <p>рекламный блок</p> - </aside> -</section> -<footer> - <p>(c) 2010 The Example company</p> -</footer></pre> - -<p>Данный фрагмент HTML задаёт раздел верхнего уровня:</p> - -<pre class="notranslate"><span style="color: red;"><section> - <h1>Лесные слоны</h1> - <section> - <h1>Введение</h1> - <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p> - </section> - <section> - <h1>Среда обитания</h1> - <p>Лесные слоны живут не на деревьях, а под ними.</p> - </section> - <aside> - <p>рекламный блок</p> - </aside> -</section></span> -<footer> - <p>(c) 2010 The Example company</p> -</footer></pre> - -<p>Данный раздел имеет три подраздела:</p> - -<pre class="notranslate"><section> - <h1>Лесные слоны</h1> - - <span style="color: red;"><section> - <h1>Введение</h1> - <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p> - </section></span> - - <span style="color: green;"><section> - <h1>Среда обитания</h1> - <p>Лесные слоны живут не на деревьях, а под ними.</p> - </section></span> - - <span style="color: blue;"><aside> - <p>рекламный блок</p> - </aside></span> -</section> - -<footer> - <p>(c) 2010 The Example company</p> -</footer></pre> - -<p>В результате получаем следующую структуру:</p> - -<pre class="notranslate">1. Лесные слоны - 1.1 Введение - 1.2 Среда обитания -</pre> - -<h3 id="Задание_заголовков_в_HTML5">Задание заголовков в HTML5</h3> - -<p>Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задаёт заголовок текущего раздела.</p> - -<p>Элемент заголовка имеет определённую <em>степень важности,</em> определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет <em>максимальную</em> степень важности, а {{HTMLElement("h6")}} <em>минимальную</em>. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:</p> - -<pre class="brush:xml notranslate"><section> - <h1>Лесные слоны</h1> - <p>В данном разделе мы поговорим о малоизвестных лесных слонах. - ...продолжение данного раздела... - <section> - <h2>Среда обитания</h2> - <p>Лесные слоны живут не на деревьях, а под ними. - ...продолжение данного подраздела... - </section> -</section> -<section> - <h3>Монгольская песчанка</h3> - <p>В данном разделе мы расскажем о монгольской песчанке. - ...продолжение данного раздела... -</section></pre> - -<p>приводит к следующей структуре:</p> - -<pre class="notranslate">1. Лесные слоны - 1.1 Среда обитания -2. Монгольская песчанка</pre> - -<p>Обратите внимание, что степень важности элемента заголовка (в данном примере {{HTMLElement("h1")}} для первого раздела верхнего уровня, {{HTMLElement("h2")}} для подраздела {{HTMLElement("h3")}} для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)</p> - -<h3 id="Неявное_задание_разделов">Неявное задание разделов</h3> - -<p>Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется <em>неявным заданием разделов</em>.</p> - -<p>Элементы заголовков ({{HTMLElement("h1")}} — {{HTMLElement("h6")}}) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел располагается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:</p> - -<pre class="brush:xml notranslate"><section> - <h1>Лесные слоны</h1> - <p>В данном разделе мы поговорим о малоизвестных лесных слонах. - ...продолжение данного раздела... - <h3 class="implicit subsection">Среда обитания</h3> - <p>Лесные слоны живут не на деревьях, а под ними. - ...продолжение данного подраздела... -</section></pre> - -<p>приводит к следующей структуре:</p> - -<pre class="notranslate">1. Лесные слоны - 1.1 Среда обитания <em>(неявно задано элементом h3)</em> -</pre> - -<p>Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне: </p> - -<pre class="brush:xml notranslate"><section> - <h1>Лесные слоны</h1> - <p>В данном разделе мы поговорим о малоизвестных лесных слонах. - ...продолжение данного раздела... - <h1 class="implicit section">Монгольская песчанка</h1> - <p>Монгольская песчанка – это небольшое симпатичное млекопитающее. - ...продолжение данного раздела... -</section></pre> - -<p>приводит к следующей структуре:</p> - -<pre class="notranslate">1. Лесные слоны -2. Монгольская песчанка <em>(неявно задано элементом h1, который одновременно закрывает предыдущий раздел)</em> -</pre> - -<p>Если степень важности такого заголовка выше, чем у предыдущего заголовка, он закрывает предыдущий раздел и открывает новый неявно заданный раздел на более высоком уровне:</p> - -<pre class="brush:xml notranslate"><body> - <h1>Млекопитающие</h1> - <h2>Киты</h2> - <p>В данном разделе мы поговорим о китах. - ...продолжение данного раздела... - <section> - <h3>Лесные слоны</h3> - <p>В данном разделе мы поговорим о малоизвестных лесных слонах. - ...продолжение данного раздела... - <h3>Монгольская песчанка</h3> - <p>Песчанки распространились далеко за пределы Монголии. - ...продолжение данного подраздела... - <h2>Рептилии</h2> - <p>Рептилии – это холоднокровные животные. - ...продолжение данного раздела... - </section> -</body></pre> - -<p>приводит к следующей структуре:</p> - -<pre class="notranslate">1. Млекопитающие - 1.1 <em>Киты (неявно задаётся элементом h2)</em> - 1.2 Лесные слоны <em>(явным образом задаётся элементом раздела)</em> - 1.3 Монгольская песчанка <em>(неявно задаётся элементом h3, который одновременно закрывает предыдущий раздел)</em> -2. <em>Рептилии (неявно задаётся элементом h2, который одновременно закрывает предыдущий раздел)</em> -</pre> - -<p>Эта не та структура, которую можно было бы ожидать, бегло просмотрев теги заголовков. Чтобы разметка стала понятна человеку, а также чтобы степень важности заголовка соответствовала уровню вложенности раздела, рекомендуется использовать наглядные теги для открытия и закрытия разделов. Однако спецификация HTML5 этого не требует. Поэтому, если браузеры отображают структуру документа не так, как ожидалось, проверьте, нет ли в документе разделов, не явно закрытых элементами заголовков.</p> - -<p>Исключение из общего правила соответствия степени важности тега уровню вложенности раздела делается для разделов, которые могут использоваться в нескольких документах. Например, раздел может храниться в системе управления контентом и добавляться в документы при их генерировании. В этом случае рекомендуется начинать с {{HTMLElement("h1")}} в качестве главного заголовка многократно используемого раздела. Уровень вложенности многократно используемого раздела будет определяться иерархией разделов документа, в который он добавляется. Теги для явного задания разделов по-прежнему останутся полезными и в этом конкретном случае.</p> - -<h3 id="Корни_задания_разделов"><a name="sectioning_root">Корни задания разделов</a></h3> - -<p> <a id="sectioning root" name="sectioning root">Корень задания разделов</a> – это элемент HTML, который может иметь собственную структуру, однако входящие в неё разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.</p> - -<p>Например:</p> - -<pre class="brush:xml notranslate"><section> - <h1>Лесные слоны</h1> - <section> - <h2>Введение</h2> - <p>В данном разделе мы поговорим о малоизвестных лесных слонах</p> - </section> - <section> - <h2>Среда обитания</h2> - <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят учёные в «<cite>Лесной слон на Борнео</cite>»:</p> - <blockquote> - <h1>Борнео</h1> - <p>Лесной слон живёт на Борнео...</p> - </blockquote> - </section> -</section> -</pre> - -<p>Данный пример приводит к следующей структуре:</p> - -<pre class="notranslate">1. Лесные слоны - 1.1 Введение - 1.2 Среда обитания</pre> - -<p>Данная структура не включает внутреннюю структуру элемента {{HTMLElement("blockquote")}}, который, будучи внешней цитатой, является корнем задания разделов и изолирует свою внутреннюю структуру.</p> - -<h3 id="Разделы_не_входящие_в_структуру">Разделы, не входящие в структуру</h3> - -<p> HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:</p> - -<ol> - <li>Элемент вспомогательного раздела {{HTMLElement("aside")}} задаёт раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.</li> - <li>Элемент навигационного раздела {{HTMLElement("nav")}} задаёт раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.</li> -</ol> - -<h3 id="Шапки_и_подвалы">Шапки и подвалы</h3> - -<p>HTML5 также добавляет два новых элемента, которые могут использоваться для разметки верхнего и нижнего колонтитулов страниц:</p> - -<ol> - <li>Элемент шапки {{HTMLElement("header")}} задаёт шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.</li> - <li>Элемент подвала ({{HTMLElement("footer")}}) задаёт нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.</li> -</ol> - -<p>Эти элементы не создают новые разделы в структуре, а скорее используются для разметки контента внутри разделов страницы.</p> - -<h2 id="Адреса_в_элементах_задания_разделов">Адреса в элементах задания разделов</h2> - -<p>Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента {{HTMLElement("address")}}, расширенного в HTML5.</p> - -<p>Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создаётся не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.</p> - -<h2 id="Использование_элементов_HTML5_в_браузерах_не_поддерживающих_HTML5">Использование элементов HTML5 в браузерах, не поддерживающих HTML5</h2> - -<p>Элементы разделов и заголовков должны работать в большинстве браузеров, не поддерживающих HTML5. Хотя они и не поддерживаются, они не требуют специального интерфейса DOM, им требуется лишь особый стиль CSS, поскольку к неизвестным элементам по умолчанию применяется стиль <code>display:inline</code>:</p> - -<pre class="brush: css notranslate">section, article, aside, footer, header, nav, hgroup { - display:block; -} -</pre> - -<p>Конечно, веб-разработчик может применить к ним любой другой стиль, однако следует помнить в браузерах, не поддерживающих HTML5, по умолчанию используется не тот стиль, который требуется для таких элементов. Также обратите внимание на отсутствие в перечне элемента {{HTMLElement("time")}}, поскольку по умолчанию к нему применяется одинаковый стиль как в браузерах, не поддерживающих HTML5, так и в браузерах, совместимых с HTML5.</p> - -<p>Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:</p> - -<pre class="brush:xml notranslate"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> -<![endif]--></pre> - -<p>Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включённой поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержка скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:</p> - -<pre class="brush:xml notranslate"><noscript> - <strong>Внимание!</strong> - Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript. - Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу. -</noscript></pre> - -<p>This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:</p> - -<pre class="brush:xml notranslate"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> - <noscript> - <strong>Внимание!</strong> - Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript. - Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу. - </noscript> -<![endif]--></pre> - -<h2 id="Заключение">Заключение</h2> - -<p>Новые семантические элементы, добавленные в HTML5, обеспечивают стандартизацию описания структуры веб-документа. Они облегчают жизнь пользователям с ограниченными возможностями, просты в использовании, могут без особых проблем поддерживаться в старых браузерах и поэтому настоятельно рекомендуются к применению.</p> diff --git a/files/ru/orphaned/web/guide/localizations_and_character_encodings/index.html b/files/ru/orphaned/web/guide/localizations_and_character_encodings/index.html deleted file mode 100644 index e40c707ea0..0000000000 --- a/files/ru/orphaned/web/guide/localizations_and_character_encodings/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Локализация и кодировка символов -slug: orphaned/Web/Guide/Localizations_and_character_encodings -translation_of: Web/Guide/Localizations_and_character_encodings -original_slug: Web/Guide/Localizations_and_character_encodings ---- -<p>По умолчанию браузер обрабатывает текст в кодировке Юникод (Unicode). При этом, при передаче информации через сеть (network) к браузеру символы кодируются байтами (см. <a href="https://en.wikipedia.org/wiki/Character_encoding">кодирование символов</a>). <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">Стандартом HTML</a> рекомендуется использовать кодировку UTF-8 (which can represent all of Unicode) and regardless of the encoding used requires Web content to declare what encoding was used.</p> - -<p>The {{HTMLElement("meta")}} element's {{htmlattrxref("charset", "meta")}} attribute is used to specify the page's character encoding. It <strong>must</strong> be used within a {{HTMLElement("head")}} block.</p> - -<p>To specify that a page is using, for example, the UTF-8 character encoding (as per the recommendation), simply place the following line in the {{HTMLElement("head")}} block:</p> - -<pre class="brush: html notranslate"><meta charset="utf-8"> -</pre> - -<h2 id="Details_and_browser_internals">Details and browser internals</h2> - -<p>When the encoding is declared by Web content like the HTML specification requires, Firefox will use that encoding for turning the bytes into the internal representation. Unfortunately, using UTF-8 and declaring that UTF-8 was used was not always the prevalent way of offering Web content. In the 1990s, it was common to leave the encoding undeclared and to use a region-specific encoding that wasn't able to represent all of Unicode.</p> - -<p>Firefox needs a fallback encoding that it uses for non-conforming legacy content that doesn't declare its encoding. For most locales, the fallback encoding is windows-1252 (often called ISO-8859-1), which was the encoding emitted by most Windows applications in the 1990s and a superset of the encoding emitted by most UNIX applications in the 1990s as a deployed in the America has and in Western Europe. However, there are locales where Web publishing was common already in the 1990s but the windows-1252 encoding was not suitable for the local language. In these locales, legacy content that doesn't declare its encoding is typically encoded using a legacy encoding other than windows-1252. In order to work with legacy content, some Firefox localizations need a non-windows-1252 fallback encoding.</p> - -<p>Unfortunately, this means that the Web-exposed functionality of Firefox differs by locale and it is hard to read legacy content across locales with different fallback encodings. To avoid introducing this problem in locales where Web publishing took off after the adoption of UTF-8, locales that don't have a non-windows-1252 legacy encoding arising from the practices of the 1990s, should leave the fallback encoding at windows-1252 to facilitate reading content cross-locale from the old locales whose fallback encoding is windows-1252. New-authored locale-native UTF-8 content is expected to declare its encoding, in which case the fallback encoding does not participate in the processing of content.</p> - -<p>Additionally, there is a small number of locales where in the 1990s there wasn't an obvious single region-specific encoding and heuristic detection among multiple legacy encodings was introduced to Web browsers. This has then had the effect that Web authors have depended on heuristic detection being present, so Firefox still has heuristic detection in these locales.</p> - -<h2 id="Finding_canonical_encoding_names">Finding canonical encoding names</h2> - -<p>The text below refers to canonical names of encodings. The canonical names are the values to the right of the equals sign in <a href="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties" title="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties">unixcharset.properties</a>.</p> - -<h2 id="Specifying_the_fallback_encoding">Specifying the fallback encoding</h2> - -<p><strong>As of Firefox 28, this section is obsolete, since the preference <code>intl.charset.default</code> no longer exists. The mapping from locales onto fallback encodings is now built into Gecko itself.</strong></p> - -<p>The fallback encoding is specified by the preference <code>intl.charset.default</code> in <code>intl.properties</code>. It should be set to the canonical name of the legacy encoding that users of the localizations are most likely to encounter when browsing non-conforming legacy Web content that doesn't declare its encoding. Note that the fallback encoding as defined by the previous sentence does not necessarily need to be able to represent the characters needed for the language of the localization!</p> - -<p>The fallback encoding should be left to windows-1252 for Western European locales, North, Central and South American locales, African locales, Central Asian locales and Oceanian locales. It typically needs to be set to something other than windows-1252 for Central and Eastern European locales, Middle Eastern locales and East Asian locales.</p> - -<p>In order to avoid the problem of Web authors creating new UTF-8 content without declaring that the content uses UTF-8 and in order to maximize the ability of users to read content cross-locale, <em>do not</em> set the fallback encoding to UTF-8 for any newly-introduced localization. Note that Firefox no longer sends the <code>Accept-Charset</code> HTTP header, so there is no need to consider what gets advertised in <code>Accept-Charset</code> when setting the fallback encoding.</p> - -<p>For locales where the fallback encoding is currently ISO-8859-1, it should be changed to windows-1252. ISO-8859-1 is decoded in the exact same way as windows-1252, but Firefox is moving to treating windows-1252 as the preferred label for this encoding in accordance with the <a href="http://encoding.spec.whatwg.org/" title="http://encoding.spec.whatwg.org/">Encoding Standard</a>.</p> - -<p>For locales where Internet Explorer has more market share than Firefox, the fallback encoding should typically be set to the same value as in Internet Explorer. You can see the fallback encoding a particular browser has by loading a <a href="http://hsivonen.iki.fi/test/moz/check-charset.htm" title="http://hsivonen.iki.fi/test/moz/check-charset.htm">test page</a>. (Be sure to use a browser installation that has its settings left to the defaults when investigating!)</p> - -<p>For locales where Firefox has more market share than Internet Explorer, it's probably best not to change the fallback encoding even if it doesn't follow the guidance given above. (For example, the fallback encoding for the Polish, Hungarian and Czech locales should probably continue to be ISO-8859-2 even though IE has a different fallback encoding.)</p> - -<p>When in doubt, use windows-1252 as the fallback encoding.</p> - -<h2 id="Specifying_the_heuristic_detection_mode">Specifying the heuristic detection mode</h2> - -<p>The heuristic detection mode is specified by the preference <code>intl.charset.detector</code> in <code>intl.properties</code>. The setting <em>must</em> be left blank for all locales other than Russian, Ukrainian and Japanese. Do not under any circumstances specify the "universal" detector. It is <em>not actually universal</em> despite its name!</p> - -<h2 id="Exception_for_minority_languages">Exception for minority languages</h2> - -<p>If the localization is for minority language and the users are typically literate in the majority language of the region and read Web content written in the majority language very often, it is appropriate to specify the fallback encoding and the heuristic detection mode to be the same as for the localization for the majority language of the region. For example, for a localization for minority language in Russia, it is appropriate to copy the settings from the Russian localization.</p> - -<h2 id="Setting_some_encodings_to_be_more_easily_selectable_from_the_character_encoding_menu">Setting some encodings to be more easily selectable from the character encoding menu</h2> - -<p>The preference <code>intl.charsetmenu.browser.static</code> in <code>intl.properties</code> makes some character encodings more easily available in the Character Encoding menu in the browser. The value should be a comma-separated list of canonical encoding names. The list should include at least the fallback encoding, windows-1252 and UTF-8. For locales where there are multiple common legacy encodings, all those encodings should be included. For example, the fallback encoding for Japanese is Shift_JIS, but there are other legacy encodings: ISO-2022-JP and EUC-JP. Therefore, it makes sense for the list to be Shift_JIS, EUC-JP, ISO-2022-JP, windows-1252, UTF-8.</p> |