From 74f1c3c85cf4f0ff1cc631d1320ed90c404c6ed7 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Sun, 11 Jul 2021 13:02:49 -0400 Subject: delete conflicting/orphaned docs in ru (#1426) --- .../ru/orphaned/web/api/abstractworker/index.html | 96 ------ .../web/api/ambient_light_events/index.html | 63 ---- .../orphaned/web/api/body/arraybuffer/index.html | 91 ----- files/ru/orphaned/web/api/body/formdata/index.html | 60 ---- files/ru/orphaned/web/api/body/index.html | 100 ------ files/ru/orphaned/web/api/body/json/index.html | 75 ----- files/ru/orphaned/web/api/childnode/index.html | 78 ----- .../orphaned/web/api/childnode/remove/index.html | 91 ----- .../web/api/childnode/replacewith/index.html | 114 ------- .../api/document_object_model/events/index.html | 81 ----- .../web/api/element/currentstyle/index.html | 51 --- .../web/api/elementcssinlinestyle/style/index.html | 79 ----- .../web/api/htmlhyperlinkelementutils/index.html | 179 ---------- .../api/htmlorforeignelement/dataset/index.html | 115 ------- .../api/htmlorforeignelement/tabindex/index.html | 87 ----- .../basic_concepts_behind_indexeddb/index.html | 214 ------------ .../orphaned/web/api/localmediastream/index.html | 23 -- .../orphaned/web/api/node/getuserdata/index.html | 64 ---- files/ru/orphaned/web/api/notation/index.html | 53 --- .../orphaned/web/api/parentnode/append/index.html | 135 -------- .../web/api/parentnode/children/index.html | 144 -------- .../api/parentnode/firstelementchild/index.html | 150 --------- files/ru/orphaned/web/api/parentnode/index.html | 91 ----- .../web/api/parentnode/lastelementchild/index.html | 162 --------- .../orphaned/web/api/parentnode/prepend/index.html | 134 -------- .../getdefaulticeservers/index.html | 57 ---- .../orphaned/web/api/serviceworkerstate/index.html | 47 --- .../checking_authenticity_with_password/index.html | 34 -- files/ru/orphaned/web/css/image-set()/index.html | 79 ----- .../orphaned/web/css/linear-gradient()/index.html | 213 ------------ .../orphaned/web/css/radial-gradient()/index.html | 170 ---------- .../web/css/repeating-linear-gradient()/index.html | 135 -------- .../index.html" | 7 - .../creating_and_triggering_events/index.html | 93 ----- .../web/guide/events/event_handlers/index.html | 167 --------- files/ru/orphaned/web/guide/events/index.html | 60 ---- .../web/guide/events/media_events/index.html | 270 --------------- .../overview_of_events_and_handlers/index.html | 131 -------- .../html/html5/constraint_validation/index.html | 342 ------------------- files/ru/orphaned/web/guide/html/html5/index.html | 172 ---------- .../html/html5/introduction_to_html5/index.html | 27 -- .../using_html_sections_and_outlines/index.html | 374 --------------------- .../index.html | 58 ---- .../orphaned/web/html/element/element/index.html | 113 ------- .../web/html/global_attributes/dropzone/index.html | 41 --- .../web/html/preloading_content/index.html | 241 ------------- .../index.html" | 69 ---- .../typed_array_invalid_arguments/index.html | 79 ----- .../global_objects/array/prototype/index.html | 168 --------- .../asyncfunction/prototype/index.html | 56 --- .../global_objects/map/@@species/index.html | 64 ---- .../reference/global_objects/map/clear/index.html | 72 ---- .../reference/global_objects/map/delete/index.html | 77 ----- .../global_objects/map/entries/index.html | 76 ----- .../global_objects/map/foreach/index.html | 95 ------ .../reference/global_objects/map/get/index.html | 69 ---- .../reference/global_objects/map/has/index.html | 72 ---- .../reference/global_objects/map/index.html | 286 ---------------- .../reference/global_objects/map/keys/index.html | 66 ---- .../reference/global_objects/map/set/index.html | 89 ----- .../reference/global_objects/map/size/index.html | 65 ---- .../reference/global_objects/map/values/index.html | 65 ---- .../index.html" | 137 -------- .../operators/pipeline_operator/index.html | 78 ----- .../orphaned/web/manifest/serviceworker/index.html | 88 ----- .../orphaned/web/mathml/element/mglyph/index.html | 72 ---- files/ru/orphaned/web/reference/api/index.html | 66 ---- files/ru/orphaned/web/reference/index.html | 41 --- .../information_security_basics/index.html | 31 -- .../orphaned/web/svg/attribute/onload/index.html | 6 - 70 files changed, 7348 deletions(-) delete mode 100644 files/ru/orphaned/web/api/abstractworker/index.html delete mode 100644 files/ru/orphaned/web/api/ambient_light_events/index.html delete mode 100644 files/ru/orphaned/web/api/body/arraybuffer/index.html delete mode 100644 files/ru/orphaned/web/api/body/formdata/index.html delete mode 100644 files/ru/orphaned/web/api/body/index.html delete mode 100644 files/ru/orphaned/web/api/body/json/index.html delete mode 100644 files/ru/orphaned/web/api/childnode/index.html delete mode 100644 files/ru/orphaned/web/api/childnode/remove/index.html delete mode 100644 files/ru/orphaned/web/api/childnode/replacewith/index.html delete mode 100644 files/ru/orphaned/web/api/document_object_model/events/index.html delete mode 100644 files/ru/orphaned/web/api/element/currentstyle/index.html delete mode 100644 files/ru/orphaned/web/api/elementcssinlinestyle/style/index.html delete mode 100644 files/ru/orphaned/web/api/htmlhyperlinkelementutils/index.html delete mode 100644 files/ru/orphaned/web/api/htmlorforeignelement/dataset/index.html delete mode 100644 files/ru/orphaned/web/api/htmlorforeignelement/tabindex/index.html delete mode 100644 files/ru/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html delete mode 100644 files/ru/orphaned/web/api/localmediastream/index.html delete mode 100644 files/ru/orphaned/web/api/node/getuserdata/index.html delete mode 100644 files/ru/orphaned/web/api/notation/index.html delete mode 100644 files/ru/orphaned/web/api/parentnode/append/index.html delete mode 100644 files/ru/orphaned/web/api/parentnode/children/index.html delete mode 100644 files/ru/orphaned/web/api/parentnode/firstelementchild/index.html delete mode 100644 files/ru/orphaned/web/api/parentnode/index.html delete mode 100644 files/ru/orphaned/web/api/parentnode/lastelementchild/index.html delete mode 100644 files/ru/orphaned/web/api/parentnode/prepend/index.html delete mode 100644 files/ru/orphaned/web/api/rtcpeerconnection/getdefaulticeservers/index.html delete mode 100644 files/ru/orphaned/web/api/serviceworkerstate/index.html delete mode 100644 files/ru/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html delete mode 100644 files/ru/orphaned/web/css/image-set()/index.html delete mode 100644 files/ru/orphaned/web/css/linear-gradient()/index.html delete mode 100644 files/ru/orphaned/web/css/radial-gradient()/index.html delete mode 100644 files/ru/orphaned/web/css/repeating-linear-gradient()/index.html delete mode 100644 "files/ru/orphaned/web/guide/ajax/\321\201_\321\207\320\265\320\263\320\276_\320\275\320\260\321\207\320\260\321\202\321\214_question_/index.html" delete mode 100644 files/ru/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/ru/orphaned/web/guide/events/event_handlers/index.html delete mode 100644 files/ru/orphaned/web/guide/events/index.html delete mode 100644 files/ru/orphaned/web/guide/events/media_events/index.html delete mode 100644 files/ru/orphaned/web/guide/events/overview_of_events_and_handlers/index.html delete mode 100644 files/ru/orphaned/web/guide/html/html5/constraint_validation/index.html delete mode 100644 files/ru/orphaned/web/guide/html/html5/index.html delete mode 100644 files/ru/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/ru/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/ru/orphaned/web/guide/localizations_and_character_encodings/index.html delete mode 100644 files/ru/orphaned/web/html/element/element/index.html delete mode 100644 files/ru/orphaned/web/html/global_attributes/dropzone/index.html delete mode 100644 files/ru/orphaned/web/html/preloading_content/index.html delete mode 100644 "files/ru/orphaned/web/javascript/guide/\320\276\320\261_\321\215\321\202\320\276\320\274_\321\200\321\203\320\272\320\276\320\262\320\276\320\264\321\201\321\202\320\262\320\265/index.html" delete mode 100644 files/ru/orphaned/web/javascript/reference/errors/typed_array_invalid_arguments/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/array/prototype/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/map/@@species/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/map/clear/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/map/delete/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/map/entries/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/map/foreach/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/map/get/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/map/has/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/map/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/map/keys/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/map/set/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/map/size/index.html delete mode 100644 files/ru/orphaned/web/javascript/reference/global_objects/map/values/index.html delete mode 100644 "files/ru/orphaned/web/javascript/reference/global_objects/math/\320\274\320\265\321\202\320\276\320\264_math.max()_/index.html" delete mode 100644 files/ru/orphaned/web/javascript/reference/operators/pipeline_operator/index.html delete mode 100644 files/ru/orphaned/web/manifest/serviceworker/index.html delete mode 100644 files/ru/orphaned/web/mathml/element/mglyph/index.html delete mode 100644 files/ru/orphaned/web/reference/api/index.html delete mode 100644 files/ru/orphaned/web/reference/index.html delete mode 100644 files/ru/orphaned/web/security/information_security_basics/index.html delete mode 100644 files/ru/orphaned/web/svg/attribute/onload/index.html (limited to 'files/ru/orphaned/web') diff --git a/files/ru/orphaned/web/api/abstractworker/index.html b/files/ru/orphaned/web/api/abstractworker/index.html deleted file mode 100644 index 24a8af3b19..0000000000 --- a/files/ru/orphaned/web/api/abstractworker/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: AbstractWorker -slug: orphaned/Web/API/AbstractWorker -tags: - - API - - AbstractWorker - - Interface - - SharedWorker - - Web Workers - - Web Workers API - - Worker - - Абстрактный - - Интерфейс -translation_of: Web/API/AbstractWorker -original_slug: Web/API/AbstractWorker ---- -
{{ APIRef("Web Workers API") }}
- -
Интерфейс AbstractWorker (абстрактный воркер) , как часть Web Workers API - это абстрактный интерфейс, который определяет общие свойства и методы для всех типов воркеров: для базового {{domxref("Worker")}} и также для {{domxref("ServiceWorker")}} и {{domxref("SharedWorker")}}. Вы напрямую не взаимодействует с AbstractWorker, как и с абстрактным классом.
- -

Свойства

- -

Интерфейс AbstractWorker не наследует никаких свойств

- -

Обработчики событий

- -
-
{{domxref("AbstractWorker.onerror")}}
-
{{ domxref("EventListener") }}, который вызывается каждый раз, когда {{domxref("ErrorEvent")}} с типом error всплывает через воркер.
-
- -

Методы

- -

Интерфейс AbstractWorker не наследует и не реализует никаких свойств

- -

Пример

- -

Прямого использования AbstractWorker не будет в коде, так как это абстрактный интерфейс. Вместо этого, взаимодействие будет происходить либо с {{domxref("Worker")}}, либо с {{domxref("SharedWorker")}}, оба из которых наследуют свойства от AbstractWorker.

- -

Ниже фрагмент кода, который демонстрирует создание нового Worker с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}; ещё здесь показан способ как послать сообщению воркеру.

- -
var myWorker = new Worker('worker.js');
-
-first.onchange = function() {
-  myWorker.postMessage([first.value, second.value]);
-  console.log('Message posted to worker');
-}
- -

Код воркера загружается из файла "worker.js". В данном коде предполагается, что есть элемент {{HTMLElement("input")}}, его определяет переменная first. Для события {{domxref("change")}} элемента создаётся обработчик, поэтому когда пользователь изменяет значение для first, отправляется сообщение в воркер для уведомления его об данных изменениях.

- -

Вы можете найти больше примеров в репозитории MDN Web Docs на GitHub:

- - - -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName("HTML WHATWG", "#abstractworker", "AbstractWorker")}}{{Spec2("HTML WHATWG")}}Без изменений {{SpecName("Web Workers")}}.
{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2("Web Workers")}}Начальное определение.
- -

Совместимость с браузерами

- -
- - -

{{Compat("api.AbstractWorker")}}

-
- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/ambient_light_events/index.html b/files/ru/orphaned/web/api/ambient_light_events/index.html deleted file mode 100644 index 9cacc1fffa..0000000000 --- a/files/ru/orphaned/web/api/ambient_light_events/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Ambient Light Events -slug: orphaned/Web/API/Ambient_Light_Events -tags: - - Освещённость -translation_of: Web/API/Ambient_Light_Events -original_slug: Web/API/Ambient_Light_Events ---- -
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
- -

События "окружающего света" -  удобный способ уведомить веб-страницу или приложение о каком-либо изменении интенсивности света. Это позволяет им реагировать на такое изменение, например, путём изменения цветового контраста пользовательского интерфейса (UI) или путём изменения экспозиции, необходимой для фотографирования.

- -

Световые события

- -

Когда датчик света устройства обнаруживает изменение уровня освещённости, он уведомляет браузер об этом изменении. Когда браузер получает такое уведомление, он вызывает {{domxref("DeviceLightEvent")}} событие, которое предоставляет информацию о точной интенсивности света.

- -

Это событие может быть захвачено на уровне объектом окна, используя метод {{domxref("EventTarget.addEventListener","addEventListener")}}  (используя имя события {{event("devicelight")}} ) или путём присоединения обработчика событий к свойству {{domxref("window.ondevicelight")}}.

- -

После того, как захвачен объект события даёт доступ к интенсивности света, выраженного в lux через свойство {{domxref("DeviceLightEvent.value")}}.

- -

Пример

- -
window.addEventListener('devicelight', function(event) {
-  var html = document.getElementsByTagName('html')[0];
-
-  if (event.value < 50) {
-    html.classList.add('darklight');
-    html.classList.remove('brightlight');
-  } else {
-    html.classList.add('brightlight');
-    html.classList.remove('darklight');
-  }
-});
- -

Характеристики

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("AmbientLight", "", "Ambient Light Events")}}{{Spec2("AmbientLight")}}Initial definition
- -

Поддержка браузерами

- -

{{Compat("api.DeviceLightEvent")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/body/arraybuffer/index.html b/files/ru/orphaned/web/api/body/arraybuffer/index.html deleted file mode 100644 index 8c2e092cf3..0000000000 --- a/files/ru/orphaned/web/api/body/arraybuffer/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Body.arrayBuffer() -slug: orphaned/Web/API/Body/arrayBuffer -tags: - - API - - Экспериментальный - - справочник -translation_of: Web/API/Body/arrayBuffer -original_slug: Web/API/Body/arrayBuffer ---- -
{{APIRef("Fetch")}}
- -

Метод arrayBuffer() из примеси(mixin) {{domxref("Body")}} берёт поток(stream) {{domxref("Response")}} и читает его до завершения. Он возвращает промис, который будет успешно завершён с помощью {{domxref("ArrayBuffer")}}.

- -

Синтаксис

- -
response.arrayBuffer().then(function(buffer) {
-  // можно сделать что либо с буфером
-});
- -

Параметры

- -

Нат параметров.

- -

Возвращаемое значение

- -

Промис, который содержит {{domxref("ArrayBuffer")}}.

- -

Пример

- -

В нашем примере живой загрузки с array buffer есть кнопка Play. При нажатии на кнопку вызывается функция getData(). Стоит учесть что до проигрывания аудио файл будет скачан целиком. Если вам необходимо начать воспроизведение файла ogg во время загрузки (стримить аудио) - то лучше рассмотреть  {{domxref("HTMLAudioElement")}}:

- -
new Audio(music.ogg).play()
-
- -

В функции getData() мы создаём новый запрос используя конструктор {{domxref("Request.Request")}}, после этого используем его чтобы загрузить OGG звук. Мы также используем {{domxref("AudioContext.createBufferSource")}} чтобы создать ресурс аудиобуффера. При успешном завершении запроса, мы считываем {{domxref("ArrayBuffer")}} из ответа используя arrayBuffer(), декодируем аудио с помощью {{domxref("AudioContext.decodeAudioData")}}, устанавливаем раскодированные данные как ресурс аудио буфера (source.buffer), затем используем данные этого ресурса в  {{domxref("AudioContext.destination")}}.

- -

Когда функция getData() заканчивает своё выполнение, мы стартуем проигрывание аудио ресурса функцией start(0), потом блокируем кнопку проигрывания для предотвращения повторного проигрывания (это может привести к ошибкам)

- -
function getData() {
-  source = audioCtx.createBufferSource();
-
-  var myRequest = new Request('viper.ogg');
-
-  fetch(myRequest).then(function(response) {
-    return response.arrayBuffer();
-  }).then(function(buffer) {
-    audioCtx.decodeAudioData(buffer, function(decodedData) {
-      source.buffer = decodedData;
-      source.connect(audioCtx.destination);
-    });
-  });
-};
-
-// навешиваем обработчики старт и стоп на кнопку
-play.onclick = function() {
-  getData();
-  source.start(0);
-  play.setAttribute('disabled', 'disabled');
-}
- -

Спецификация

- - - - - - - - - - - - - - -
СпецификацияСтатусКомментарии
{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}{{Spec2('Fetch')}} 
- -

Поддержка браузерами

- - - -

{{Compat("api.Body.arrayBuffer")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/body/formdata/index.html b/files/ru/orphaned/web/api/body/formdata/index.html deleted file mode 100644 index 5e04b96274..0000000000 --- a/files/ru/orphaned/web/api/body/formdata/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Body.formData() -slug: orphaned/Web/API/Body/formData -translation_of: Web/API/Body/formData -original_slug: Web/API/Body/formData ---- -
{{APIRef("Fetch")}}
- -

Метод formData() из {{domxref("Body")}} принимает поток ответа {{domxref("Response")}} и считывает его до завершения. Он возвращает промис, который разрешается с помощью объекта {{domxref("FormData")}}.

- -
-

Примечание:  Это в основном относится к service workers. Если пользователь отправляет форму а service worker перехватывает запрос,  можно, например, вызвать formData() чтобы получить набор данных в формате ключ-значение, изменить некоторые поля, а затем отправить форму на сервер, или использовать её локально.

-
- -

Синтаксис

- -
response.formData()
-.then(function(formdata) {
-  // do something with your formdata
-});
- -

Параметры

- -

Нет.

- -

Возвращаемое значение

- -

{{domxref("Promise")}} которое разрешается с помощью объекта {{domxref("FormData")}}.

- -

Пример

- -

Нужно добавить.

- -

Спецификации

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-formdata','formData()')}}{{Spec2('Fetch')}} 
- -

Браузерная совместимость

-

{{Compat("api.Body.formData")}}

- -

Также смотрите

- - diff --git a/files/ru/orphaned/web/api/body/index.html b/files/ru/orphaned/web/api/body/index.html deleted file mode 100644 index 0794ac997e..0000000000 --- a/files/ru/orphaned/web/api/body/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - Interface - - NeedsTranslation - - Reference - - TopicStub - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -
{{ APIRef("Fetch") }}
- -

The Body {{glossary("mixin")}} of the Fetch API represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.

- -

Body is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated body (a stream), a used flag (initially unset), and a MIME type (initially the empty byte sequence).

- -

Properties

- -
-
{{domxref("Body.body")}} {{readonlyInline}}
-
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
-
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
-
A {{domxref("Boolean")}} that indicates whether the body has been read.
-
- -

Methods

- -
-
{{domxref("Body.arrayBuffer()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
-
{{domxref("Body.blob()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
-
{{domxref("Body.formData()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
-
{{domxref("Body.json()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.
-
{{domxref("Body.text()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is always decoded using UTF-8.
-
- -

Examples

- -

The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.

- -

HTML Content

- -
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
-
- -

JS Content

- -
var myImage = document.querySelector('.my-image');
-fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
-	.then(res => res.blob())
-	.then(res => {
-		var objectURL = URL.createObjectURL(res);
-		myImage.src = objectURL;
-});
- -

{{ EmbedLiveSample('Examples', '100%', '250px') }}

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}} 
- -

Browser compatibility

- - - -

{{Compat("api.Body")}}

- -

See also

- - - -

 

diff --git a/files/ru/orphaned/web/api/body/json/index.html b/files/ru/orphaned/web/api/body/json/index.html deleted file mode 100644 index ae8657f9bb..0000000000 --- a/files/ru/orphaned/web/api/body/json/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Body.json() -slug: orphaned/Web/API/Body/json -tags: - - Fetch-запрос - - Справка - - метод -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json ---- -
{{APIRef("Fetch")}}
- -

Метод json() , определён на миксине {{domxref("Body")}}, который включён в объектах Request и Response, принимает и читает тело {{domxref("Response")}} stream. Возвращает промис, который, когда ответ будет получен, вызовет колбэк с результатом парсинга тела ответа в {{jsxref("JSON")}} объект.

- -

Синтаксис

- -
response.json().then(function(data) {
-  // do something with your data
-});
- -

Аргументы

- -

Нет.

- -

Возвращает

- -

Промис, который, когда ответ будет получен, вызовет колбэк с результатом парсинга тела ответа в JSON объект. Этим может быть что угодно, что может быть представлено как JSON объект — объект, массив, строка, число...

- -

Пример

- -

В нашем fetch json примере (запустите fetch json live), мы создаём новый запрос, используя {{domxref("Request.Request")}} конструктор, в последствии мы используем его (запрос) для получения .json файла. Когда fetch запрос будет выполнен, мы прочтём и спарсим данные, используя json(), а далее вставим значения из полученного объекта в list элементы списка для отображения данных по нашему продукту.

- -
var myList = document.querySelector('ul');
-
-var myRequest = new Request('products.json');
-
-fetch(myRequest)
-  .then(function(response) { return response.json(); })
-  .then(function(data) {
-    for (var i = 0; i < data.products.length; i++) {
-      var listItem = document.createElement('li');
-      listItem.innerHTML = '<strong>' + data.products[i].Name + '</strong> can be found in ' +
-                           data.products[i].Location +
-                           '. Cost: <strong>£' + data.products[i].Price + '</strong>';
-      myList.appendChild(listItem);
-    }
-  });
- -

Спецификации

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-json','json()')}}{{Spec2('Fetch')}} 
- -

Совместимость с браузерами

-

{{Compat("api.Body.json")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/childnode/index.html b/files/ru/orphaned/web/api/childnode/index.html deleted file mode 100644 index e150876787..0000000000 --- a/files/ru/orphaned/web/api/childnode/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: ChildNode -slug: orphaned/Web/API/ChildNode -tags: - - API - - DOM - - Experimental - - Expérimental(2) - - NeedsTranslation - - TopicStub -translation_of: Web/API/ChildNode -original_slug: Web/API/ChildNode ---- -

{{APIRef("DOM")}}

- -

Интерфейс ChildNode  содержит методы, специфичные для объектов  {{domxref("Node")}}, которые имеют родителя.

- -

ChildNode это просто интерфейс и ни один объект этого типа не может быть создан; он реализуется объектами {{domxref("Element")}}, {{domxref("DocumentType")}} и {{domxref("CharacterData")}}.

- -

Properties

- -

There is neither inherited, nor specific property.

- -

Methods

- -

Отсутствуют унаследованные методы.

- -
-
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
-
Удаляет данный ChildNode из списка потомков его родителя.
-
{{domxref("ChildNode.before()")}} {{experimental_inline}}
-
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just before this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
-
{{domxref("ChildNode.after()")}} {{experimental_inline}}
-
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just after this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
-
{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}
-
Заменяет ChildNode  в списке потомков его родителя набором {{domxref("Node")}} или {{domxref("DOMString")}} объектов. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}{{Spec2('DOM WHATWG')}}Интерфейс ElementTraversal  разделён на {{domxref("ParentNode")}} и ChildNode. Свойства previousElementSibling и nextElementSibling теперь определены в последнем.
- The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces.
- Добавлены методы remove(), before(), after() и replaceWith().
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
- -

Polyfill

- -

External on github: childNode.js

- -

Browser compatibility

- -

{{Compat("api.ChildNode")}}

- -

See also

- - diff --git a/files/ru/orphaned/web/api/childnode/remove/index.html b/files/ru/orphaned/web/api/childnode/remove/index.html deleted file mode 100644 index 2f39c5641a..0000000000 --- a/files/ru/orphaned/web/api/childnode/remove/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Node.remove() -slug: orphaned/Web/API/ChildNode/remove -translation_of: Web/API/ChildNode/remove -original_slug: Web/API/ChildNode/remove ---- -

Метод Node.remove() удаляет узел из дерева DOM

- -

 

- -

То, что элемент удалён из DOM, ещё не значит, что он удалён совсем! 

- -

Он остался объектом и исчезнет только тогда, когда исчезнут все ссылки на него.

- -

 

- -

Синтаксис

- -
Node.remove();
-
- - - -

Пример

- -

Использование remove()

- -
<div id="box">
-   <div id="one"></div>
-   <div id="two"></div>
-</div>
- -
var elem = document.querySelector("#one");
-elem.remove();
-alert(document.querySelector("#box").innerHTML); //Исчез блок #one
-alert(elem); //Но как видите, сам объект ещё жив
- -

Полифил

- -

Можно создать полифил для IE 9 и выше, используя следующий код:

- -
(function() {
-  var arr = [window.Element, window.CharacterData, window.DocumentType];
-  var args = [];
-
-  arr.forEach(function (item) {
-    if (item) {
-      args.push(item.prototype);
-    }
-  });
-
-  // from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
-  (function (arr) {
-    arr.forEach(function (item) {
-      if (item.hasOwnProperty('remove')) {
-        return;
-      }
-      Object.defineProperty(item, 'remove', {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: function remove() {
-          this.parentNode.removeChild(this);
-        }
-      });
-    });
-  })(args);
-})();
- -

Спецификация

- - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Поддержка браузерами

- -

{{Compat("api.ChildNode.remove")}}

diff --git a/files/ru/orphaned/web/api/childnode/replacewith/index.html b/files/ru/orphaned/web/api/childnode/replacewith/index.html deleted file mode 100644 index 0ee9091325..0000000000 --- a/files/ru/orphaned/web/api/childnode/replacewith/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: ChildNode.replaceWith() -slug: orphaned/Web/API/ChildNode/replaceWith -translation_of: Web/API/ChildNode/replaceWith -original_slug: Web/API/ChildNode/replaceWith ---- -
{{APIRef("DOM")}}
- -

Метод ChildNode.replaceWith() заменяет ChildNode в списке детей их родителя множеством {{domxref("Node")}} или {{domxref("DOMString")}} объектов. {{domxref("DOMString")}} объекты вставляются как эквивалент нод {{domxref("Text")}}.

- -

Синтаксис

- -
[Throws, Unscopable]
-void ChildNode.replaceWith((Node or DOMString)... nodes);
-
- -

Параметры

- -
-
nodes
-
Множество заменяемых {{domxref("Node")}} или {{domxref("DOMString")}} объектов.
-
- -

Исключения

- - - -

Примеры

- -

Использование replaceWith()

- -
var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-var span = document.createElement("span");
-
-child.replaceWith(span);
-
-console.log(parent.outerHTML);
-// "<div><span></span></div>"
-
- -

ChildNode.replaceWith() не выполним

- -

Метод replaceWith() не входит в область видимости оператора with. Смотрите {{jsxref("Symbol.unscopables")}} для дополнительной информации.

- -
with(node) {
-  replaceWith("foo");
-}
-// ReferenceError: replaceWith is not defined
- -

Полифил

- -

Вы можете заполнить метод replaceWith() в Internet Explorer 10+ и выше следующим кодом:

- -
function ReplaceWithPolyfill() {
-  'use-strict'; // For safari, and IE > 10
-  var parent = this.parentNode, i = arguments.length, currentNode;
-  if (!parent) return;
-  if (!i) // if there are no arguments
-    parent.removeChild(this);
-  while (i--) { // i-- decrements i and returns the value of i before the decrement
-    currentNode = arguments[i];
-    if (typeof currentNode !== 'object'){
-      currentNode = this.ownerDocument.createTextNode(currentNode);
-    } else if (currentNode.parentNode){
-      currentNode.parentNode.removeChild(currentNode);
-    }
-    // the value of "i" below is after the decrement
-    if (!i) // if currentNode is the first argument (currentNode === arguments[0])
-      parent.replaceChild(currentNode, this);
-    else // if currentNode isn't the first
-      parent.insertBefore(currentNode, this.nextSibling);
-  }
-}
-if (!Element.prototype.replaceWith)
-    Element.prototype.replaceWith = ReplaceWithPolyfill;
-if (!CharacterData.prototype.replaceWith)
-    CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
-if (!DocumentType.prototype.replaceWith)
-    DocumentType.prototype.replaceWith = ReplaceWithPolyfill;
- -

Спецификация

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Совместимость с браузерами

- - - -

{{Compat("api.ChildNode.replaceWith")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/document_object_model/events/index.html b/files/ru/orphaned/web/api/document_object_model/events/index.html deleted file mode 100644 index 3bdc87fe96..0000000000 --- a/files/ru/orphaned/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Events and the DOM -slug: orphaned/Web/API/Document_Object_Model/Events -translation_of: Web/API/Document_Object_Model/Events -original_slug: Web/API/Document_Object_Model/Events ---- -

Вступление

- -

Вступление

- -

В этой главе описывается модель событий DOM. Топ скрыть Интерфейс сам по себе описано, а также интерфейсы для регистрации событий на узлах в DOM, Также а обработчики события Главного , Также а Несколько больше Примеры, которые показывают, как Различные интерфейсы связаны друг события Главного с другом.

- -

Существует отличная диаграмма, которая чётко объясняет события трёх этапов через DOM в проекте DOM Level 3 Events .

- -

Также см. Пример 5: Распространение событий в главе «Примеры» для более подробного примера.

- -

Регистрация обработчиков событий

- -

Есть 3 способа регистрации обработанных событий для элемента DOM.

- -

EventTarget.addEventListener

- -
// Предполагая, что myButton является элементом кнопки
-myButton.addEventListener ('click', greet, false);
-function greet (event) {
-    // распечатать и посмотреть на объект события
-    // всегда печатать аргументы в случае пропуска любых других аргументов
-    console.log ('greet:', arguments);
-    оповещение («Привет, мир»);
-}
-
- -

Это метод, который вы должны использовать на современных веб-страницах.

- -

Примечание. Internet Explorer 6-8 не поддерживает этот метод, предлагая аналогичный {{domxref ("EventTarget.attachEvent")}} API. Для кросс-браузерной совместимости используйте одну из множества доступных библиотек JavaScript.

- -

Дополнительную информацию можно найти на справочной странице {{domxref ("EventTarget.addEventListener")}}.

- -

Атрибут HTML

- -
<button onclick = "alert ('Hello world!')">
-
- -

Код JavaScript в атрибуте передаётся объекту Event через eventпараметр. Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML .

- -

Этого пути следует избегать. Это делает разметку больше и менее читаемой. Проблемы содержания / структуры и поведения плохо разделены, что затрудняет поиск ошибки.

- -

Свойства элемента DOM

- -
// Предполагая, что myButton является элементом кнопки
-myButton.onclick = function(event){alert('Hello world');};
-
- -

Функция может быть определена для получения eventпараметра. Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML .

- -

Проблема этого метода в том, что для каждого элемента и для каждого события может быть установлен только один обработчик.

- -

Доступ к интерфейсам событий

- -

Обработчики событий могут быть присоединены к различным объектам, включая элементы DOM, документ, объект окна и т. Д. Когда происходит событие, объект события создаётся и последовательно передаётся обработчикам события.

- -

Интерфейс {{domxref ("Event")}} доступен из функции-обработчика через объект события, переданный в качестве первого аргумента. В следующем простом примере показано, как объект события передаётся в функцию-обработчик события и может использоваться из одной такой функции.

- -
function print(evt) {
-  // параметру evt автоматически назначается объект события
-  // позаботимся о различиях в console.log и alert
-  console.log('print:', evt);
-  alert(evt);
-}
-// любая функция должна иметь подходящее имя, это то, что называется семантическим
-table_el.onclick = print; 
-
- - - - diff --git a/files/ru/orphaned/web/api/element/currentstyle/index.html b/files/ru/orphaned/web/api/element/currentstyle/index.html deleted file mode 100644 index f98340d418..0000000000 --- a/files/ru/orphaned/web/api/element/currentstyle/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Element.currentStyle -slug: orphaned/Web/API/Element/currentStyle -tags: - - API - - NeedsExample - - Non-standard - - Property -translation_of: Web/API/Element/currentStyle -original_slug: Web/API/Element/currentStyle ---- -

{{Non-standard_header}}

- -

Element.currentStyle является собственностью, похожей на стандартизированную {{DOMxRef("window.getComputedStyle()")}} method. Он доступен в старых версиях Microsoft Internet Explorer. Однако, он возвращает единицы, установленные в CSS в то время как window.getComputedStyle()возвращает значения в пикселях.

- -

Polyfill

- -
-

Эта polyfill возвращает значения в пикселях и, скорее всего, будет довольно медленным, так как оно должно называться {{domxref("window.getComputedStyle()")}} каждый раз, когда читается его значение.

-
- -
/* Любое авторское право посвящено Общественному достоянию.
- * http://creativecommons.org/publicdomain/zero/1.0/ */
-
-if (!("currentStyle" in Element.prototype)) {
-  Object.defineProperty(Element.prototype, "currentStyle", {
-    get: function() {
-      return window.getComputedStyle(this);
-    }
-  });
-}
-
- -

Спецификации

- -

Не входит ни в какие спецификации.

- -

Microsoft had a description on MSDN.

- -

Совместимость с браузерами

- -

{{Compat("api.Element.currentStyle")}}

- -

Смотрите также

- - - -
{{APIRef("DOM")}}
diff --git a/files/ru/orphaned/web/api/elementcssinlinestyle/style/index.html b/files/ru/orphaned/web/api/elementcssinlinestyle/style/index.html deleted file mode 100644 index 72bae0ee34..0000000000 --- a/files/ru/orphaned/web/api/elementcssinlinestyle/style/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: HTMLElement.style -slug: orphaned/Web/API/ElementCSSInlineStyle/style -tags: - - API - - HTML DOM - - HTMLElement - - NeedsBrowserAgnosticism - - NeedsBrowserCompatibility - - NeedsMarkupWork - - NeedsSpecTable - - Свойство - - Ссылки -translation_of: Web/API/ElementCSSInlineStyle/style -original_slug: Web/API/ElementCSSInlineStyle/style ---- -

Кратко

- -
-
{{ APIRef("HTML DOM") }}
-
- -

Свойство HTMLElement.style используется для получения и установки инлайновых стилей. При получении возвращается объект CSSStyleDeclaration , который содержит список из всех свойств стилей для этого элемента с значениями заданными  для атрибутов , что определённы  в инлайновом стиле (см. атрибут стиля) элемента. См. CSS Properties Reference для получения списка CSS свойств применимых вместе со style.  

- -

Настройка стилей

- -

Свойство style имеет тот же приоритет (и выше) в каскаде CSS как и прямая декларация стиля через атрибут style, полезен для настройки стиля отдельного специфичного элемента.

- -

Стили не следует устанавливать непосредственно через свойство style (например elt.style = "color: blue;"), поскольку оно считается доступным только для чтения и атрибут style возвращает объект CSSStyleDeclaration который доступен только для чтения. Вместо этого стили могут быть установлены путём присвоения значений свойствам style. Для добавления определённых стилей для элемента без изменения других свойств стилей предпочтительно использовать отдельные свойства style (например elt.style.color = '...'). -При использовании
elt.style.cssText = '...' или elt.setAttribute('style','...') устанавливаются стили перезаписывая уже существующие. Обратите внимание, что имена свойств стилей задаются в camel-case а не в kebab-case elt.style.<property> (т.е., elt.style.fontSize, а не elt.style.font-size).

- -

Объявленные стили сбрасываются присваиванием значения null,
elt.style.color = null

- -

Примеры

- -
// Устанавливает несколько стилей в одном выражении
-elt.style.cssText = "color: blue; border: 1px solid black";
-// Или
-elt.setAttribute("style", "color:red; border: 1px solid blue;");
-
-// Устанавливает определённый стиль оставляя другие значения стиля нетронутыми
-elt.style.color = "blue";
- -

Получение стиль-информации

- -

Свойство style в основном не имеет пользы в части информации о стиле элемента, оно только олицетворяет собой набор CSS деклараций атрибутов style элемента, а не тех которые проистекают из стиль-правил откуда-либо ещё, таких как стилевые правила раздела {{HTMLElement("head")}}, или внешней таблицы стилей. Для получения значений всех CSS свойств элемента вы должны использовать вместо этого {{domxref("window.getComputedStyle()")}}.

- -
-
var div = document.getElementById("div1");
-div.style.marginTop = ".25in";
-
- -

Следующий код показывает имена всех свойств стиля, значений, заданных явно для элемента elt и унаследованных "рассчитанных" значений:

- -
var elt = document.getElementById("elementIdHere");
-var out = "";
-var st = elt.style;
-var cs = window.getComputedStyle(elt, null);
-for (x in st) {
-  out += "  " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";
-}
- -

Спецификация

- -

DOM Level 2 Style: ElementCSSInlineStyle.style

- -

CSSOM: ElementCSSInlineStyle

- -

Совместимость

- - - -

{{Compat("api.HTMLElement.style")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/htmlhyperlinkelementutils/index.html b/files/ru/orphaned/web/api/htmlhyperlinkelementutils/index.html deleted file mode 100644 index 2ee02cdbfd..0000000000 --- a/files/ru/orphaned/web/api/htmlhyperlinkelementutils/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: HTMLHyperlinkElementUtils -slug: orphaned/Web/API/HTMLHyperlinkElementUtils -tags: - - API - - Experimental - - Mixin - - NeedsTranslation - - TopicStub - - URL API -translation_of: Web/API/HTMLHyperlinkElementUtils -original_slug: Web/API/HTMLHyperlinkElementUtils ---- -

{{ApiRef("URL API")}}{{SeeCompatTable}}

- -

The HTMLHyperlinkElementUtils mixin defines utility methods and properties to work with {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}}. These utilities allow to deal with common features like URLs.

- -

There are no objects of this type, but several objects {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}} implement it.

- -

Properties

- -

This interface doesn't inherit any property.

- -
-
{{domxref("HTMLHyperlinkElementUtils.href")}}
-
Is a {{domxref("USVString")}} containing the whole URL.
-
{{domxref("HTMLHyperlinkElementUtils.protocol")}}
-
Is a {{domxref("USVString")}} containing the protocol scheme of the URL, including the final ':'.
-
{{domxref("HTMLHyperlinkElementUtils.host")}}
-
Is a {{domxref("USVString")}} containing the host, that is the hostname, and then, if the port of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a ':', and the port of the URL.
-
{{domxref("HTMLHyperlinkElementUtils.hostname")}}
-
Is a {{domxref("USVString")}} containing the domain of the URL.
-
{{domxref("HTMLHyperlinkElementUtils.port")}}
-
Is a {{domxref("USVString")}} containing the port number of the URL.
-
{{domxref("HTMLHyperlinkElementUtils.pathname")}}
-
Is a {{domxref("USVString")}} containing an initial '/' followed by the path of the URL.
-
{{domxref("HTMLHyperlinkElementUtils.search")}}
-
Is a {{domxref("USVString")}} containing a '?' followed by the parameters of the URL.
-
{{domxref("HTMLHyperlinkElementUtils.hash")}}
-
Is a {{domxref("USVString")}} containing a '#' followed by the fragment identifier of the URL.
-
{{domxref("HTMLHyperlinkElementUtils.username")}}
-
Is a {{domxref("USVString")}} containing the username specified before the domain name.
-
{{domxref("HTMLHyperlinkElementUtils.password")}}
-
Is a {{domxref("USVString")}} containing the password specified before the domain name.
-
{{domxref("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}
-
Returns a {{domxref("USVString")}} containing the origin of the URL, that is its scheme, its domain and its port.
-
- -

Methods

- -

This interface doesn't inherit any method.

- -
-
{{domxref("HTMLHyperlinkElementUtils.toString()")}}
-
Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("HTMLHyperlinkElementUtils.href")}}, though it can't be used to modify the value.
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}}{{Spec2('HTML WHATWG')}}Initial definition
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
username and password{{CompatUnknown}}{{CompatGeckoDesktop("26")}} [2]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin {{CompatVersionUnknown()}}{{CompatGeckoDesktop("26")}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [2]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
username and password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}} [2]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin {{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Though not grouped in a single abstract interface, these methods are directly available on the interfaces that implement it, if this interface is supported.

- -

[2] This mixin was called URLUtils before Firefox 45, and was also implemented to other by other interfaces, like {{domxref("Location")}}. From Firefox 45, the other interfaces implements their own version of the properties and methods they need.

- -

See also

- - - -
-
 
-
diff --git a/files/ru/orphaned/web/api/htmlorforeignelement/dataset/index.html b/files/ru/orphaned/web/api/htmlorforeignelement/dataset/index.html deleted file mode 100644 index a0e0c95bcd..0000000000 --- a/files/ru/orphaned/web/api/htmlorforeignelement/dataset/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: HTMLElement.dataset -slug: orphaned/Web/API/HTMLOrForeignElement/dataset -translation_of: Web/API/HTMLOrForeignElement/dataset -original_slug: Web/API/HTMLOrForeignElement/dataset ---- -

{{ APIRef("HTML DOM") }}

- -

Свойство HTMLElement.dataset предоставляет доступ как для чтения, так и для изменения всех пользовательских дата-атрибутов custom data attributes (data-*) , установленных у элемента. Это map of DOMString, одна запись для каждого пользовательского атрибута данных. Обратите внимание, свойство dataset доступно только для чтения. Для записи должны использоваться  его "свойства", которые представлены data-атрибутами. Также обратите внимание, что HTML data-атрибут и соответствующий ему DOM-dataset.property не имеют одно и то же имя, но они всегда похожи:

- - - -

Преобразование имён

- -

dash-style в camelCase: имя пользовательского дата-атрибута преобразуется в ключ для {{ domxref("DOMStringMap") }} по следующим правилам:

- - - -

camelCase в dash-style: обратное преобразование ключа в имя атрибута производится по следующим правилам:

- - - -

Ограничение в правилах гарантирует, что эти два преобразования являются обратными друг другу.

- -

Например, атрибуту data-abc-def соответствует ключ abcDef.

- -

Доступ к значениям

- - - -

Синтаксис

- - - -

Примеры

- -
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
-
-let el = document.querySelector('#user');
-
-// el.id == 'user'
-// el.dataset.id === '1234567890'
-// el.dataset.user === 'johndoe'
-// el.dataset.dateOfBirth === ''
-
-el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
-
-// 'someDataAttr' in el.dataset === false
-el.dataset.someDataAttr = 'mydata';
-// 'someDataAttr' in el.dataset === true
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
- -

Совместимость с браузерами

- -

{{Compat("api.HTMLElement.dataset")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/htmlorforeignelement/tabindex/index.html b/files/ru/orphaned/web/api/htmlorforeignelement/tabindex/index.html deleted file mode 100644 index adc75c26ba..0000000000 --- a/files/ru/orphaned/web/api/htmlorforeignelement/tabindex/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: HTMLElement.tabIndex -slug: orphaned/Web/API/HTMLOrForeignElement/tabIndex -translation_of: Web/API/HTMLOrForeignElement/tabIndex -original_slug: Web/API/HTMLOrForeignElement/tabIndex ---- -
-
{{ APIRef("HTML DOM") }}
-
- -

Свойство HTMLElement.tabIndex предоставляет возможность вызова по кнопке Tab текущего элемента.

- -
-
Вызов по табуляции происходит в следующем порядке:
- -
    -
  1. элементы с положительным tabIndex. Элементы, имеющие одинаковое значение tabIndex вызываются в порядке появления в коде.  Переход осуществляется от меньших tabIndex до больших tabIndex. 
    2. -
  2. Элементы, которые не поддерживают атрибут tabIndex или поддерживают но tabIndex установлен в "0", выбираются по Tab в порядке их появления в коде.
    3. -
- -
Элементы для которых установлена блокировка (disabled) не могут быть выбраны кнопкой Tab и не могут быть в фокусе.
- -
 
- -
Значения могут начинаться с любого числа, могут быть отрицательными и могут быть непоследовательными, однако разные браузеры могут неправильно сработать при очень больших значениях.
- -
 
-
- -

Синтаксис

- -
elt.tabIndex = index;
-var index = elt.tabIndex;
-
- - - -

Пример

- -
var b1 = document.getElementById("button1");
-
-b1.tabIndex = 1;
-
- -

Спецификация

- -

 

- - - - - - - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', '#dom-tabindex', 'tabindex')}}{{Spec2('HTML WHATWG')}}Не было изменений с {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-40676705', 'tabindex')}}{{Spec2('DOM2 HTML')}}Не было изменений с {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-40676705', 'tabindex')}}{{Spec2('DOM1')}}Начальное определение
- -

Поддержка в браузерах

- -

{{Compat("api.HTMLElement.tabIndex")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/ru/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html deleted file mode 100644 index 0e9312398c..0000000000 --- a/files/ru/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: Basic concepts -slug: orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -original_slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -

{{DefaultAPISidebar("IndexedDB")}}

- -
-

IndexedDB обеспечивает возможность постоянного хранения данных посредством браузера пользователя. Поскольку это наделяет создаваемые web-приложения с расширенными возможностями независимостью от доступа к сети, такие приложения получают возможность работы как online, так и offline. IndexedDB полезна для приложений, хранящих большое количество данных (например, каталог DVD библиотеки проката) и не нуждающихся в постоянном подключении к Интернету (например, почтовые клиенты, перечни запланированного to-do и заметки на память).

-
- -

Об этом документе

- -

В этом введении рассматриваются основные концепции и термины в IndexedDB. Оно содержит общую картину и объясняет ключевые понятия.

- -

Оно может стать полезным для:

- - - -

Обзор IndexedDB

- -

IndexedDB позволяет сохранять и извлекать объекты, проиндексированные с помощью "ключа". Все манипуляции над базой данных происходят при помощи транзакций. Как и большинство решений для web-хранилищ, IndexedDB следует same-origin policy. Поэтому, если получить доступ к сохранённым данным в пределах домена можно, то вне его - нет.

- -

IndexedDB - асинхронное API, которое может быть использовано в большинстве контекстов, включая Web Workers. Раньше оно включало синхронную версию, для использования в web workers, но это было удалено из спецификации в связи с недостатком интереса внутри web-сообщества.

- -

Существует так же конкурирующая с IndexedDB спецификация, WebSQL Database, но W3C исключила её 18 ноября 2010. Хотя IndexedDB и WebSQL оба являются решением для хранилищ, они предоставляют различный функционал. WebSQL Database - реляционная система доступа к базам данных, когда IndexedDB - система индексированной таблицы.

- -

Big concepts

- -

Если у вас есть опыт работы с другими типами баз данных, то вы можете быть сбиты с толку в процессе работы с IndexedDB. Поэтому имейте в виду следующие важные понятия:

- - - -

Definitions

- -

This section defines and explains terms used in the IndexedDB API.

- -

Database

- -
-
database
-
A repository of information, typically comprising one or more object stores. Each database must have the following: -
    -
  • Name. This identifies the database within a specific origin and stays constant throughout its lifetime. The name can be any string value (including an empty string).
    • -
  • -

    Current version. When a database is first created, its version is the integer 1 if not specified otherwise. Each database can have only one version at any given time.

    -
    • -
-
-
durable
-
-

In Firefox, IndexedDB used to be durable, meaning that in a readwrite transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk.

- -

As of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}), which is the same behaviour as other IndexedDB-supporting browsers. In this case the {{Event("complete")}} event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare, most consumers should not need to concern themselves further.

- -
-

Note: In Firefox, if you wish to ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see {{domxref("IDBDatabase.transaction")}}.) This is currently experimental, and can only be used if the dom.indexedDB.experimental pref is set to true in about:config.

-
-
-
object store
-
-

The mechanism by which data is stored in the database. The object store persistently holds records, which are key-value pairs. Records within an object store are sorted according to the keys in an ascending order.

- -

Every object store must have a name that is unique within its database. The object store can optionally have a key generator and a key path. If the object store has a key path, it is using in-line keys; otherwise, it is using out-of-line keys.

- -

For the reference documentation on object store, see {{domxref("IDBObjectStore")}}.

-
-
version
-
When a database is first created, its version is the integer 1. Each database has one version at a time; a database can't exist in multiple versions at once. The only way to change the version is by opening it with a greater version than the current one. This will start a versionchange transaction and fire an upgradeneeded event. The only place where the schema of the database can be updated is inside the handler of that event.
-
Note: This definition describes the most recent specification, which is only implemented in up-to-date browsers. Old browsers implemented the now deprecated and removed IDBDatabase.setVersion() method.
-
database connection
-
An operation created by opening a database. A given database can have multiple connections at the same time.
-
transaction
-
-

An atomic set of data-access and data-modification operations on a particular database. It is how you interact with the data in a database. In fact, any reading or changing of data in the database must happen in a transaction.

- -

A database connection can have several active transactions associated with it at a time, so long as the writing transactions do not have overlapping scopes. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the flyingMonkey object store, you can start a second transaction with a scope of the unicornCentaur and unicornPegasus object stores. As for reading transactions, you can have several of them — even overlapping ones.

- -

Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.

- -

The three modes of transactions are: readwrite, readonly, and versionchange. The only way to create and delete object stores and indexes is by using a versionchange transaction. To learn more about transaction types, see the reference article for IndexedDB.

- -

Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see {{domxref("IDBTransaction")}}, which also has reference documentation.

-
-
request
-
The operation by which reading and writing on a database is done. Every request represents one read or write operation.
-
index
-
-

An index is a specialized object store for looking up records in another object store, called the referenced object store. The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refer to the object store are automatically updated.

- -

Alternatively, you can also look up records in an object store using the key.

- -

To learn more on using indexes, see Using IndexedDB. For the reference documentation on index, see IDBKeyRange.

-
-
- -

Key and value

- -
-
key
-
-

A data value by which stored values are organized and retrieved in the object store. The object store can derive the key from one of three sources: a key generator, a key path, or an explicitly specified value. The key must be of a data type that has a number that is greater than the one before it. Each record in an object store must have a key that is unique within the same store, so you cannot have multiple records with the same key in a given object store.

- -

A key can be one of the following types: string, date, float, a binary blob, and array. For arrays, the key can range from an empty value to infinity. And you can include an array within an array.

- -

Alternatively, you can also look up records in an object store using the index.

-
-
key generator
-
A mechanism for producing new keys in an ordered sequence. If an object store does not have a key generator, then the application must provide keys for records being stored. Generators are not shared between stores. This is more a browser implementation detail, because in web development, you don't really create or access key generators.
-
in-line key
-
A key that is stored as part of the stored value. It is found using a key path. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.
-
out-of-line key
-
A key that is stored separately from the value being stored.
-
key path
-
Defines where the browser should extract the key from in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods or an array containing any of those. It cannot include spaces.
-
value
-
-

Each record has a value, which could include anything that can be expressed in JavaScript, including boolean, number, string, date, object, array, regexp, undefined, and null.

- -

When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.

- -

Blobs and files can be stored, cf. specification.

-
-
- -

Range and scope

- -
-
scope
-
The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.
-
cursor
-
A mechanism for iterating over multiple records with a key range. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see {{domxref("IDBCursor")}}.
-
key range
-
-

A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.

- -

For the reference documentation on key range, see {{domxref("IDBKeyRange")}}.

-
-
- -

Limitations

- -

IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:

- - - -

In addition, be aware that browsers can wipe out the database, such as in the following conditions:

- - - -

The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.

- -

Next steps

- -

With these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see Using IndexedDB.

- -

See also

- - diff --git a/files/ru/orphaned/web/api/localmediastream/index.html b/files/ru/orphaned/web/api/localmediastream/index.html deleted file mode 100644 index 4349f96b4a..0000000000 --- a/files/ru/orphaned/web/api/localmediastream/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: LocalMediaStream -slug: orphaned/Web/API/LocalMediaStream -translation_of: Web/API/LocalMediaStream -original_slug: Web/API/LocalMediaStream ---- -
{{APIRef("WebRTC")}} {{SeeCompatTable}}
- -

Интерфейс LocalMediaStream представляет собой поток медиа-контента извлечённый из локального источника данных. Этот интерфейс возвращается из getUserMedia().

- -

Methods

- -
-
{{domxref("LocalMediaStream.stop()")}}
-
Останавливает поток. Когда источником потока является подключённое устройство (например, камера или микрофон), останавливает захват на устройстве. 
-
- -

See Also

- - diff --git a/files/ru/orphaned/web/api/node/getuserdata/index.html b/files/ru/orphaned/web/api/node/getuserdata/index.html deleted file mode 100644 index 949bc17fd7..0000000000 --- a/files/ru/orphaned/web/api/node/getuserdata/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Node.getUserData() -slug: orphaned/Web/API/Node/getUserData -translation_of: Web/API/Node/getUserData -original_slug: Web/API/Node/getUserData ---- -

{{APIRef("DOM")}}{{ obsolete_header() }}

- -

Метод Node.getUserData() возвращает любого пользователя {{domxref("DOMUserData")}} установленного предварительно на данном узле через {{domxref("Node.setUserData()")}}.

- -
-

Методы Node.setUserData и {{domxref("Node.getUserData")}} больше не доступны для веб-контента. {{domxref("Element.dataset")}} или WeakMap могут быть использованы вместо него.

-
- -

Синтаксис

- -
userData = someNode.getUserData(userKey);
- -

Параметры

- - - -

Пример

- -
var d = document.setUserData('key', 15, null);
-alert(document.getUserData('key')); // 15
- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Удалено из спецификации
{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}{{Spec2('DOM3 Core')}}Изначальное описание
- -

Совместимость с браузерами

- -

{{Compat("api.Node.getUserData")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/notation/index.html b/files/ru/orphaned/web/api/notation/index.html deleted file mode 100644 index e5f51b30d7..0000000000 --- a/files/ru/orphaned/web/api/notation/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Нотация -slug: orphaned/Web/API/Notation -tags: - - Нотация -translation_of: Web/API/Notation -original_slug: Web/API/Notation ---- -
{{APIRef("DOM")}}{{draft}}{{obsolete_header}}
- -

Представляет нотацию DTD (только для чтения). Может объявлять формат неразобранного объекта или формально объявлять цели инструкции по обработке документа. Наследует методы и свойства от Node. Его nodeName - это имя нотации. Не имеет родителя.

- -

Свойства

- -
-
{{domxref("Notation.publicId")}} {{ReadOnlyInline}}
-
Это {{domxref("DOMString")}}.
-
{{domxref("Notation.systemId")}} {{ReadOnlyInline}}
-
Это {{domxref("DOMString")}}.
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарии
{{SpecName("DOM3 Core", "core.html#ID-5431D1B9", "Notation")}}{{Spec2("DOM3 Core")}}Без изменений
{{SpecName("DOM2 Core", "core.html#ID-5431D1B9", "Notation")}}{{Spec2("DOM2 Core")}}Без изменений
{{SpecName('DOM1', 'level-one-core.html#ID-5431D1B9', 'Notation')}}{{Spec2('DOM1')}}Первое определение
- -

Поддержка браузерами

- - - -

{{Compat("api.Notation")}}

diff --git a/files/ru/orphaned/web/api/parentnode/append/index.html b/files/ru/orphaned/web/api/parentnode/append/index.html deleted file mode 100644 index e35894dd86..0000000000 --- a/files/ru/orphaned/web/api/parentnode/append/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: ParentNode.append() -slug: orphaned/Web/API/ParentNode/append -translation_of: Web/API/ParentNode/append -original_slug: Web/API/ParentNode/append ---- -
{{APIRef("DOM")}} {{SeeCompatTable}}
- -

Метод ParentNode.append добавляет набор объектов {{domxref("Node")}} или {{domxref("DOMString")}} в конец (после последнего потомка) ParentNode. {{domxref("DOMString")}} объекты добавляются как {{domxref("Text")}}.

- -

Отличия от {{domxref("Node.appendChild()")}}:

- - - -

Синтаксис

- -
[Throws, Unscopable]
-void ParentNode.append((Node или DOMString)... nodes);
-
- -

Параметры

- -
-
nodes
-
Набор объектов {{domxref("Node")}} или {{domxref("DOMString")}}, которые будут добавлены.
-
- -

Исключения

- - - -

Примеры

- -

Добавление элемента

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append(p);
-
-console.log(parent.childNodes); // NodeList [ <p> ]
-
- -

Добавление строки

- -
var parent = document.createElement("div");
-parent.append("Любой текст");
-
-console.log(parent.textContent); // "Любой текст"
- -

Добавление элемента или строки

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append("Любой текст", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Любой текст", <p> ]
- -

ParentNode.append() не имеет области видимости

- -

Метод append() не имеет области видимости с директивой with. Больше информации в {{jsxref("Symbol.unscopables")}}.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  append("foo");
-}
-// ReferenceError: append is not defined
- -

Полифил

- -

Вы можете использовать полифил для метода append() в Internet Explorer 9 и выше:

- -
// Источник: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('append')) {
-      return;
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function append() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.appendChild(docFrag);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

Спецификация

- - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Поддержка браузерами

- - - -

{{Compat("api.ParentNode.append")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/parentnode/children/index.html b/files/ru/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index b380d55fde..0000000000 --- a/files/ru/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Node.children -slug: orphaned/Web/API/ParentNode/children -tags: - - API - - DOM - - ParentNode - - Property - - Reference -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children ---- -

{{ APIRef("DOM") }}

- -

Описание

- -

Свойство children {{domxref("ParentNode")}} является свойством только для чтения, которое возвращает {{domxref("HTMLCollection")}}, содержащее все дочерние {{domxref("Element", "elements")}} узла, на котором он был вызван.

- -

Синтаксис

- -
var elList = elementNodeReference.children;
- -

В результате, elList - живая коллекция, состоящая из дочерних элементов узла elementNodeReference, и стоит подметить, что если у узла детей нет, она будет пустой. Определить это можно, обратившись к свойству length, которое содержит в себе количество элементов в коллекции.

- -

Пример

- -
<ul>
-   <li>1 пункт</li>
-   <li>2 пункт</li>
-</ul>
-
-<script type="text/javascript">
-
-   var elementChildrens = document.querySelector("ul").children;
-   for (var i=0, child; child=elementChildrens[i]; i++) {
-        // elementChildrens - коллекция детей списка
-        // child - последовательно, каждый из элементов elementChildrens
-        alert(child.innerHTML);
-   }
-
-</script>
-
-
- -

Спецификация

- - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Начальное определение.
- -

Поддержка браузерами

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка {{domxref("Element")}}1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]10.04.0
-

Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}

- 		29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
Поддержка {{domxref("SVGElement")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка {{domxref("Element")}}{{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -

Internet Explorer 6, 7 и 8 поддерживают данное свойство, но ошибочно включают в коллекцию комментарии ({{domxref("Comment")}}) в HTML-коде.

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/parentnode/firstelementchild/index.html b/files/ru/orphaned/web/api/parentnode/firstelementchild/index.html deleted file mode 100644 index 21fb90f963..0000000000 --- a/files/ru/orphaned/web/api/parentnode/firstelementchild/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: ParentNode.firstElementChild -slug: orphaned/Web/API/ParentNode/firstElementChild -tags: - - API - - DOM - - ParentNode - - Property - - Reference -translation_of: Web/API/ParentNode/firstElementChild -original_slug: Web/API/ParentNode/firstElementChild ---- -

{{ APIRef("DOM") }}

- -

Доступное только для чтения свойство ParentNode.firstElementChild возвращает первый дочерний элемент объекта ({{domxref("Element")}}) или null если дочерних элементов нет.

- -
-

This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, firstElementChild moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.

-
- -

Синтаксис

- -
var childNode = elementNodeReference.firstElementChild;
-
- -

Пример

- -
<p id="para-01">
-  <span>First span</span>
-</p>
-
-<script type="text/javascript">
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstElementChild.nodeName)
-</script>
- -

В этом примере alert показывает 'span', что является именем тега первого дочернего узла элемента p.

- -

Polyfill для Internet Explorer 8

- -

Это свойство не поддерживается браузером Internet Explorer вплоть до 9 версии, поэтому следующий сниппет может быть использован для добавления поддержки IE8:

- -
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
-if(!("firstElementChild" in document.documentElement)){
-    Object.defineProperty(Element.prototype, "firstElementChild", {
-        get: function(){
-            for(var nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i)
-                if(n = nodes[i], 1 === n.nodeType) return n;
-            return null;
-        }
-    });
-}
- -

Спецификация

- - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. This method is now defined on the latter.
- The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Added its initial definition to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
- -

Совместимость с браузерами

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка ({{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка ({{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/parentnode/index.html b/files/ru/orphaned/web/api/parentnode/index.html deleted file mode 100644 index 1c4e7e2040..0000000000 --- a/files/ru/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API - - DOM - - NeedsTranslation - - Tab - - TopicStub -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -

{{ APIRef("DOM") }}

- -

Интерфейс ParentNode содержит методы, которые относятся к {{domxref("Node")}} объектам , у которых могут быть потомки.

- -

ParentNode является сырым интерфейсом и объекты с данным типом создать нельзя; данный интерфейс имеется у {{domxref("Element")}}, {{domxref("Document")}}, и {{domxref("DocumentFragment")}} объектов.

- -

Свойства

- -
-
{{domxref("ParentNode.children")}} {{experimental_inline}} {{readonlyInline}}
- Возвращает живую  {{domxref("HTMLCollection")}}, которая содержит все объекты типа {{domxref("Element")}}, которые являются потомками данного ParentNode.
-
- {{domxref("ParentNode.firstElementChild")}} {{experimental_inline}} {{readonlyInline}}
- Возвращает {{domxref("Element")}} , который является первым потомком данного ParentNode, или null, если таковой отсутствует.
-
- {{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}
- Возвращает {{domxref("Element")}}, который является последним из потомков данного ParentNode, или null, если таковой отсутствует.
-
- {{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}
- Возвращает unsigned long с количеством потомков, которые есть у объекта.
-
- -

Методы

- -
-
{{domxref("ParentNode.append()")}} {{experimental_inline}}
-
Вставляет набор объектов типа {{domxref("Node")}} или {{domxref("DOMString")}} после последнего потомка ParentNode. {{domxref("DOMString")}} объекты вставлены как эквивалент {{domxref("Text")}} узлы.
-
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
-
Вставляет набор объектов типа {{domxref("Node")}} или {{domxref("DOMString")}} перед первым потомком ParentNode. {{domxref("DOMString")}} объекты вставлены как эквивалент {{domxref("Text")}} узлы.
-
{{domxref("ParentNode.querySelector()")}}
-
Возвращает первый {{domxref("Element")}} с текущим элементом в качестве источника, который совпадает с определённой группой селекторов.
-
{{domxref("ParentNode.querySelectorAll()")}}
-
Возвращает {{domxref("NodeList")}}, который представляет собой список элементов с текущим элементом в качестве источника, который совпадает с определённой группой селекторов.
-
- -

Спецификация

- - - - - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}Добавлены методы append() и prepend().
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. The firstElementChild, lastElementChild, and childElementCount properties are now defined on the latter.
- The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
- Added the children property.
- Added the append() and prepend() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}'{{Spec2('Element Traversal')}}Добавлено изначальное определение свойств в ElementTraversal чистый интерфейс и использование его в {{domxref("Element")}}.
- -

Совместимость с браузерами

- -

{{Compat("api.ParentNode")}}

- -

 

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/parentnode/lastelementchild/index.html b/files/ru/orphaned/web/api/parentnode/lastelementchild/index.html deleted file mode 100644 index 8df658ceb5..0000000000 --- a/files/ru/orphaned/web/api/parentnode/lastelementchild/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: ParentNode.lastElementChild -slug: orphaned/Web/API/ParentNode/lastElementChild -tags: - - API - - DOM - - ParentNode - - Property - - Reference -translation_of: Web/API/ParentNode/lastElementChild -original_slug: Web/API/ParentNode/lastElementChild ---- -

{{ APIRef("DOM") }}

- -

Свойство ParentNode.lastElementChild только для чтения. Возвращает последний дочерний элемент объекта или null если нет дочерних элементов.

- -
-

This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, lastElementChild moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.

-
- -

Синтаксис

- -
var element = node.lastElementChild;
- -

Пример

- -
<ul id="foo">
-  <li>First  (1)</li>
-  <li>Second (2)</li>
-  <li>Third  (3)</li>
-</ul>
-
-<script>
-var foo = document.getElementById('foo');
-// yields: Third  (3)
-console.log(foo.lastElementChild.textContent);
-</script>
-
- -

Polyfill for IE8, IE9 and Safari

- -
// Overwrites native 'lastElementChild' prototype.
-// Adds Document & DocumentFragment support for IE9 & Safari.
-// Returns array instead of HTMLCollection.
-;(function(constructor) {
-    if (constructor &&
-        constructor.prototype &&
-        constructor.prototype.lastElementChild == null) {
-        Object.defineProperty(constructor.prototype, 'lastElementChild', {
-            get: function() {
-                var node, nodes = this.childNodes, i = nodes.length - 1;
-                while (node = nodes[i--]) {
-                    if (node.nodeType === 1) {
-                        return node;
-                    }
-                }
-                return null;
-            }
-        });
-    }
-})(window.Node || window.Element);
-
- -

Спецификация

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. This method is now defined on the latter.
- The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}{{Spec2('Element Traversal')}}Added its initial definition to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
- -

Совместимость с браузерами

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- - - -

Так же смотрите

- - diff --git a/files/ru/orphaned/web/api/parentnode/prepend/index.html b/files/ru/orphaned/web/api/parentnode/prepend/index.html deleted file mode 100644 index 489d85a390..0000000000 --- a/files/ru/orphaned/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: ParentNode.prepend() -slug: orphaned/Web/API/ParentNode/prepend -translation_of: Web/API/ParentNode/prepend -original_slug: Web/API/ParentNode/prepend ---- -
{{APIRef("DOM")}}
- -

Метод ParentNode.prepend() вставляет множество объектов {{domxref("Node")}} или {{domxref("DOMString")}} в начало (перед первым потомком) {{domxref("ParentNode")}}. Объекты {{domxref("DOMString")}} вставляются как {{domxref("Text")}}.

- -

Синтаксис

- -
ParentNode.prepend(...nodesToPrepend);
-
- -

Параметры

- -
-
nodesToPrepend
-
Один или болле узлов, которые вставляются перед первым дочерним узлом в  ParentNode. Каждый узел может быть определён либо как {{domxref("Node")}} - объект, либо как строка; строки вставляются как новые узлы типа {{domxref("Text")}}.
-
- -

Возвращаемое значение

- -

undefined.

- -

Исключения

- - - -

Примеры

- -

Добавление элемента в начало

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-var span = document.createElement("span");
-parent.append(p);
-parent.prepend(span);
-
-console.log(parent.childNodes); // NodeList [ <span>, <p> ]
-
- -

Добавление текста в начало

- -
var parent = document.createElement("div");
-parent.append("Some text");
-parent.prepend("Headline: ");
-
-console.log(parent.textContent); // "Headline: Some text"
- -

Добавление элемента и текста

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.prepend("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.prepend() не имеет области видимости

- -

Метод prepend() не входит в область видимости оператора with. Смотрите {{jsxref("Symbol.unscopables")}} для детальной информации.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  prepend("foo");
-}
-// ReferenceError: prepend is not defined
- -

Полифил

- -

Вы можете использовать полифил, если метод prepend() не доступный:

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('prepend')) {
-      return;
-    }
-    Object.defineProperty(item, 'prepend', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function prepend() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.insertBefore(docFrag, this.firstChild);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

Спецификация

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Поддержка браузерами

- - - -

{{Compat("api.ParentNode.prepend")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/rtcpeerconnection/getdefaulticeservers/index.html b/files/ru/orphaned/web/api/rtcpeerconnection/getdefaulticeservers/index.html deleted file mode 100644 index d02bdfae84..0000000000 --- a/files/ru/orphaned/web/api/rtcpeerconnection/getdefaulticeservers/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: RTCPeerConnection.getDefaultIceServers() -slug: orphaned/Web/API/RTCPeerConnection/getDefaultIceServers -translation_of: Web/API/RTCPeerConnection/getDefaultIceServers -original_slug: Web/API/RTCPeerConnection/getDefaultIceServers ---- -

{{APIRef("WebRTC")}}{{SeeCompatTable}}

- -

Метод getDefaultIceServers() интерфейса {{domxref("RTCPeerConnection")}} , возвращает массив объектов  {{domxref("RTCIceServer")}}, который указывает, какие серверы ICE браузер будет использовать по умолчанию, если они не указаны в параметре {{domxref("RTCConfiguration")}} конструктора {{domxref("RTCPeerConnection")}} 

- -

Синтаксис

- -
 var defaultIceServers = RTCPeerConnection.getDefaultIceServers();
- -

Возвращаемое значение

- -

Массив  ICE серверов, определяемые как объекты класса  {{domxref("RTCIceServer")}} , которые браузер будет использовать для соединения, если иное не определено в параметре -  объекте конфигурации конструктора  {{domxref("RTCPeerConnection")}}. Если в браузере нет значений по умолчанию, массив будет пуст. Значение свойства не может быть  null.

- -

Пример

- -
var pc = new RTCPeerConnection();
-var iceServers = pc.getDefaultIceServers();
-
-if (iceServers.length === 0) {
-  // Решить проблему отсутствия серверов ICE по умолчанию, возможно, используя наши собственные настройки по умолчанию.
- -

Спецификации

- - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
WebRTC Extensions
- -

Совместимость с браузерами

- - - -

{{Compat("api.RTCPeerConnection.getDefaultIceServers")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/serviceworkerstate/index.html b/files/ru/orphaned/web/api/serviceworkerstate/index.html deleted file mode 100644 index 7b6b3f87c2..0000000000 --- a/files/ru/orphaned/web/api/serviceworkerstate/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: ServiceWorkerState -slug: orphaned/Web/API/ServiceWorkerState -translation_of: Web/API/ServiceWorkerState -original_slug: Web/API/ServiceWorkerState ---- -
{{APIRef("Service Workers API")}}
- -

ServiceWorkerState показывает состояние {{DOMxRef("ServiceWorker")}}'а.

- -

Значения

- -
-
installing
-
Service worker устанавливается. В этом состоянии, метод {{DOMxRef("ExtendableEvent.waitUntil()")}} может быть вызван в обработчике события install для продления установки до успешного завершения переданного промиса. Как правило, данный метод используется для того, чтобы избежать активации service worker'а до завершения настройки его кеша.
-
installed
-
Service worker находится в состоянии ожидания и будет активирован после закрытия всех страниц его источника, использующих предыдущую версию service worker'а.
-
activating
-
Service worker в данном состоянии считается активным. В этом состоянии, метод {{DOMxRef("ExtendableEvent.waitUntil()")}} может быть вызван в обработчике события onactivate для продления этапа активации до успешного завершения переданного промиса. Service worker не начнёт обрабатывать события до перехода в состояние activated.
-
activated
-
Service worker в данном состоянии активен и готов обрабатывать события.
-
redundant
-
Новый service worker заменяет данный либо service worker удаляется из-за ошибки при его установке.
-
- -

Спецификации

- - - - - - - - - - - - - - -
СпецификацияСтатусКомментарии
{{SpecName("Service Workers", "#service-worker-state-enum", "ServiceWorkerState")}}{{Spec2("Service Workers")}}Изначальное определение.
- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/ru/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html deleted file mode 100644 index 903e7cc7a2..0000000000 --- a/files/ru/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Проверка подлинности данных с паролем -slug: orphaned/Web/API/Web_Crypto_API/Checking_authenticity_with_password -tags: - - HMAC - - Web Crypto -translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password -original_slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password ---- -

{{APIRef("Web Crypto API")}}{{draft}}

- -

Проверка подлинности данных может быть выполнена с помощью Web Crypto API. В этой статье мы покажем как создавать и управлять подписями, используя хэш-функцию и пароль.

- -

HMAC алгоритм генерирует хэш на основе передаваемых ключа и данных, которые нужно подписать. Позже, идентичный хэш может быть вычислен заново любым пользователем, у которого имеется ключ. Необходимость ключа позволяет хранить данные и хэш вместе: злоумышленник не сможет создать хэш для изменённых данных, не имея ключа.

- -

Стоит заметить, что алгоритм никак не связан с какой-либо другой информацией о владельце: знание ключа – необходимое и достаточное условие для изменения данных.

- -

Предположим, данные хранятся на компьютере. Чтобы получить доступ к записи или чтению, мы будем использовать localforage.js – библиотека-обёртка над хранилищами браузера. Эта библиотека необязательна и используется в качестве примера для удобства, чтобы сосредоточиться на криптографии.

- -

Данные, доступ к которым мы хотим получить, имеют следующую форму:

- -

 

- -

где data – данные для подписания и signature – подпись, информация для проверки подлинности.

- -

Криптографические ключи невозможно выучить наизусть, а обычные пароли недостаточно безопасны. Чтобы решить эту проблему, криптографы создали алгоритмы для создания криптографических ключей из паролей. Знание пароля позволяет воссоздать ключ и использовать его.

- -

Запрашиваем пароль у пользователя для генерации ключа:

- -
 
- -

С этим ключом мы можем вычислить хэш данных.

- -
 
diff --git a/files/ru/orphaned/web/css/image-set()/index.html b/files/ru/orphaned/web/css/image-set()/index.html deleted file mode 100644 index d17756359a..0000000000 --- a/files/ru/orphaned/web/css/image-set()/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: image-set() -slug: orphaned/Web/CSS/image-set() -translation_of: Web/CSS/image-set() -original_slug: Web/CSS/image-set() ---- -
{{cssref}}
- -

CSS функция image-set() это способ позволить браузеру выбрать наиболее подходящее изображение CSS из заданного набора, в первую очередь для экранов с высокой плотностью пикселей.

- -

Разрешение экрана и пропускная способность могут отличаться в зависимости от устройства и доступа к сети. Функция image-set()  обеспечивает наиболее подходящее разрешение изображения для устройства пользователя, предоставляя набор параметров изображения — каждый с соответствующим объявлением разрешения — из которых браузер выбирает наиболее подходящее для устройства и настроек. Разрешение может использоваться в качестве прокси для размера файла — клиент на медленном мобильном соединении с экраном высокого разрешения может предпочесть получать изображения с более низким разрешением, а не ждать загрузки изображения с более высоким разрешением.

- -

image-set() позволяет автору предоставлять параметры, а не определять, что нужно каждому отдельному пользователю.

- -

Синтаксис

- -
image-set() = image-set( <image-set-option># )
-где <image-set-option> = [ <image> | <string> ] <resolution> и
-      <string> в качестве <url>
-
- -

Значения

- -

Чаще всего вы можете увидеть значение url() как <string>, но <image> может быть любым типом изображения, кроме набора изображений. Функция image-set() не может быть вложена в другую функцию image-set().

- -

Блоки <resolution> включают в себя x или ddpx, для точек на пиксель, dpi для точек на дюйм, и dpcm для точек на сантиметр. Каждое изображение в наборе image-set() должно иметь уникальное разрешение.

- -

Примеры

- -
background-image: image-set( "cat.png" 1x,
-                             "cat-2x.png" 2x,
-                             "cat-print.png" 600dpi);
- -

Этот пример демонстрирует использование image-set() для обеспечения двух альтернативных {{cssxref("background-image")}} свойств, из которых будет выбрано более подходящее по разрешению: обычная версия и версия с высоким разрешением.

- -

Вопросы доступности

- -

Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своём присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать её семантически в документе.

- - - -

Спецификации

- - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}} 
- -

Поддержка браузерами

- - - -

{{Compat("css.types.image.image-set")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/css/linear-gradient()/index.html b/files/ru/orphaned/web/css/linear-gradient()/index.html deleted file mode 100644 index d2d6fd3bf9..0000000000 --- a/files/ru/orphaned/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: linear-gradient() -slug: orphaned/Web/CSS/linear-gradient() -tags: - - Градиент - - Линейный градиент -translation_of: Web/CSS/linear-gradient() -original_slug: Web/CSS/linear-gradient() ---- -
{{CSSRef}}
- -

CSS-функция linear-gradient() создаёт изображение, состоящее из постепенного перехода между двумя или более цветами вдоль прямой линии. Её результатом является объект типа данных {{CSSxRef("<gradient>")}}, являющийся особым видом {{CSSxRef("<image>")}}.

- -
{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}
- - - -

Как и в случае с любым градиентом, линейный градиент не имеет внутренних размеров; т. е., он не имеет ни естественного или предпочтительного размера, ни предпочтительного соотношения сторон. Его фактический размер будет совпадать с размеров элемента, к которому он применён.

- -

Для создания линейного градиента, повторяющегося таким образом, что он заполняет содержащий его элемент, лучше используйте функцию {{CSSxRef("repeating-linear-gradient")}}.

- -

Так как <gradient>ы относятся к типу данных <image>, они могут использоваться только там, где может использоваться <image>. По этой причине, linear-gradient() не будет работать в качестве {{CSSxRef("background-color")}} и других свойств, использующих тип данных {{CSSxRef("<color>")}}.

- -

Создание линейного градиента

- -

Линейный градиент определяется осью — линией градиента — и двумя или более точками остановки цвета. Каждая точка на оси – это определённый цвет; для создания плавного градиента функция linear-gradient() рисует серию цветных линий, перпендикулярных линии градиента, каждая из них соответствует цвету точки, в которой она пересекает линию градиента.

- -

linear-gradient.png

- -

Линия градиента определена центром блока, содержащего изображение градиента, и углом. Цвета градиента задаются двумя или более точками: начальной точкой, конечной точкой, и необязательными точками остановки цвета между ними.

- -

Начальная точка – это место на линии градиента, где начинается первый цвет. Конечная точка – это точка, на которой заканчивается последний цвет. Каждая из этих двух точек определяется пересечением линии градиента с перпендикулярной линией, проходящей от угла, находящегося в том же квадранте блока. Конечную точку можно просто считать как точку, симметричную начальной точке. Эти несколько сложные определения приводят к интересному эффекту, иногда называемому магическими углами: углы, ближайшие к начальной и конечной точке, имеют те же цвета, что и соответствующая им начальная или конечная точка.

- -

Настройка градиентов

- -

Добавляя больше точек остановки цвета на линию градиента, вы можете точно задавать переходы между разными цветами. Позиции остановок цвета могут быть явно заданы использованием значений типа {{CSSxRef("<length>")}} или {{CSSxRef("<percentage>")}}. Если вы не определите расположение цвета, он будет расположен посередине между предыдущим и следующим цветом. Следующие два градиента эквивалентны.

- -
linear-gradient(red, orange, yellow, green, blue);
-linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
- -

По умолчанию цвета переходят плавно от цвета на одной точке остановки до цвета на следующей точке остановки, по середине которого – точка, являющаяся половиной перехода от одного цвета к другому. Вы можете двигать эту среднюю точку в любую позицию между двумя точками остановки цвета, добавляя цветовую подсказку в виде значения в % между двумя цветами для того, чтобы обозначить, где должна находиться середина цветового перехода. В следующем примере показан чисто красный цвет от начала до отметки 10% и чисто синий от 90% до конца. Между 10% и 90% цвет переходит от красного до синего, однако середина цветового перехода находится на отметке 30%, а не на 50%, как было бы без добавления цветовой подсказки 30%.

- -
linear-gradient(red 10%, 30%, blue 90%);
- -

Если две или более точки остановки цвета находятся в одной и той же позиции, переход будет в виде чёткой линии между первым и последним цветом, объявленным на этой позиции.

- -

Точки остановки цвета должны быть перечислены в порядке возрастания. Соседние точки остановки цвета с меньшим значением переопределят значение предыдущей точки остановки цвета, создавая резкий переход. В примере ниже на позиции 30% происходит замена красного на жёлтый, и затем идёт переход от жёлтого до синего на протяжении 35% длины градиента.

- -
linear-gradient(red 40%, yellow 30%, blue 65%);
-
- -

Допустимо использовать многопозиционную остановку цвета. Цвет может быть объявлен как две смежных точки остановки цвета, если включить его в обе позиции в CSS-объявлении. Следующие три градиента эквивалентны:

- -
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
-linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
-linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
- -

По умолчанию, если на остановку 0% не задан цвет, то на этой точке будет располагаться первый объявленный цвет. Аналогично, последний цвет будет продолжаться до отметки 100%, или будет на отметке 100%, если на этой последней остановке не было объявлено никакой длины.

- -

Синтаксис

- -
/* Градиент наклонён на 45 градусов,
-   начинается с синего, заканчивается красным */
-linear-gradient(45deg, blue, red);
-
-/* Градиент идёт от правого нижнего до левого верхнего угла,
-   от синего до красного */
-linear-gradient(to left top, blue, red);
-
-/* Остановка цвета: градиент идёт снизу вверх,
-   начинается синим, становится зелёным на 40% своей длины,
-   и заканчивается красным */
-linear-gradient(0deg, blue, green 40%, red);
-
-/* Цветовая подсказка: градиент идёт слева направо,
-   начинается с красного, достигает среднего цвета
-   на 10% пути длины градиента,
-   занимая оставшиеся 90% длины переходом в синий */
-linear-gradient(.25turn, red, 10%, blue);
-
-/* Многопозиционная остановка цвета: градиент повёрнут на 45 градусов,
-   с красной нижней левой половиной, синей верхней правой половиной,
-   с чёткой линией на месте перехода градиента из красного в синий */
-linear-gradient(45deg, red 0 50%, blue 50% 100%);
- -

Значения

- -
-
<side-or-corner>
-
Позиция начальной точки линии градиента. Если указана, то должна состоять из слова to и максимум до двух ключевых слов включительно: одно обозначает горизонтальную сторону (left или right), а другое – вертикальную сторону (top или bottom). Порядок ключевых слов не важен. Если не определено, то принимает значение to bottom.
-
Значения to top, to bottom, to left и to right эквивалентны углам 0deg, 180deg, 270deg и 90deg, соответственно. Другие значения переводятся в значение угла.
-
{{CSSxRef("<angle>")}}
-
Угол направления линии градиента. Значение 0deg эквивалентно to top; увеличение значения увеличивает угол поворота по часовой стрелке от этой позиции.
-
<linear-color-stop>
-
Значение точки остановки цвета {{CSSxRef("<color>")}}, с последующими одной или двумя необязательными точками остановки (имеющими значение типа {{CSSxRef("<percentage>")}} или {{CSSxRef("<length>")}} вдоль оси градиента).
-
<color-hint>
-
Цветовая подсказка – это подсказка для перехода, определяющая, как градиент продвигается между соседними точками остановки цвета. Длина определяет, на какой точке между двумя точками остановки цвет градиента должен достичь среднего значения цветового перехода. Если не указано, средней точкой цветового перехода будет середина между двумя точками остановки цвета.
-
-
-

Примечание: Отрисовка цветовых остановок в CSS-градиентах следует тем же правилам, что и цветовые остановки в SVG-градиентах.

-
-
-
- -

Формальный синтаксис

- -
linear-gradient(
-  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
-  \---------------------------------/ \----------------------------/
-      Определение линии градиента         Список остановок цвета
-
-где <side-or-corner> = [ left | right ] || [ top | bottom ]
-  и <color-stop-list> = [ <linear-color-stop> [, <color-hint> ]? ]#, <linear-color-stop>
-  и <linear-color-stop> = <color> [ <color-stop-length> ]?
-  и <color-stop-length> = [ <percentage> | <length> ]{1,2}
-  и <color-hint> = [ <percentage> | <length> ]
- -

Примеры

- -

Градиент под углом 45 градусов

- - - -
body {
-  background: linear-gradient(45deg, red, blue);
-}
-
- -

{{EmbedLiveSample("Градиент_под_углом_45_градусов", 120, 120)}}

- -

Градиент, начинающийся на 60% линии градиента

- - - -
body {
-  background: linear-gradient(135deg, orange, orange 60%, cyan);
-}
- -

{{EmbedLiveSample("Градиент_начинающийся_на_60_линии_градиента", 120, 120)}}

- -

Градиент с многопозиционными остановками цвета

- -

Этот пример использует многопозиционные остановки цвета, и со смежными цветами, имеющими те же точки остановки цвета, создаёт полосатый эффект.

- - - -
body {
-  background: linear-gradient(to right,
-     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
-}
- -

{{EmbedLiveSample("Градиент_с_многопозиционными_остановками_цвета", 120, 120)}}

- -
-

Примечание: Больше примеров смотрите на странице Использование CSS-градиентов.

-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Добавлены подсказки по переходам
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Первоначальное определение
- -

Совместимость с браузерами

- - - -
{{Compat("css.types.image.gradient.linear-gradient")}}
- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/css/radial-gradient()/index.html b/files/ru/orphaned/web/css/radial-gradient()/index.html deleted file mode 100644 index 8af2698d29..0000000000 --- a/files/ru/orphaned/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: radial-gradient() -slug: orphaned/Web/CSS/radial-gradient() -translation_of: Web/CSS/radial-gradient() -original_slug: Web/CSS/radial-gradient() ---- -
{{CSSRef}}
- -

CSS функция radial-gradient() создаёт картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.

- -
{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}
- - - -

Как и любой градиент, радиальный градиент не имеет внутренних размеров, то есть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применён.

- -

Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию {{cssxref("repeating-radial-gradient")}}.

- -

Поскольку <gradient>ы относятся к типу <image>, они могут быть использованы только там где используется тип <image>. По этой причине radial-gradient() не будет работать совместно с {{Cssxref("background-color")}} и другими свойствами, которые используют тип {{cssxref("<color>")}}.

- -

Композиция свойства

- -

Радиальный градиент задаётся позицией центра, конечной формой, и двумя или более точками изменения цвета.

- -

Чтобы создать плавный градиент, функция radial-gradient() рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.

- -

Точки изменения цвета расположены на виртуальном луче градиента, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является 100%. Цвет каждой такой формы задаётся цветом на пересечении луча градиента и этой формы.

- -

Синтаксис

- -
/* Градиент в центре контейнера,
-   переход от красного к синему и после к зелёному */
-radial-gradient(circle at center, red 0, blue, green 100%)
- -

Параметры

- -
-
{{cssxref("<position>")}}
-
Позицию начала градиента можно рассматривать как {{cssxref("background-position")}} или {{cssxref("transform-origin")}}. По умолчанию позиция равна center.
-
<shape>
-
Форма градиента. Может принимать значение circle (подразумевается что формой является круг с постоянным радиусом) или ellipse (форма является эллипсом, выровненным по оси). По умолчанию имеет значение ellipse.
-
<extent-keyword>
-
Параметр определяющий размер конечной формы. Возможные значения:
-
- - - - - - - - - - - - - - - - - - - - - - - -
ЗначениеОписание
closest-sideКонечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).
closest-cornerКонечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра.
farthest-sideСхоже с closest-side, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон)
farthest-cornerКонечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра.
- -
-

Примечание: Ранние реализации этой функции включают в себя другие значения свойства (cover and contain) которые являются синонимами farthest-corner и closest-side, соответственно. Рекомендуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.

-
-
-
<color-stop>
-
{{cssxref("<color>")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("<percentage>")}} или {{cssxref("<length>")}} вдоль оси градиента). Значения 0%, или 0 представляют центр градиента; значение 100% представляет собой виртуальное пересечение конечной формы с виртуальным лучом градиента. Процентные значения будут линейно расположены на луче градиента.
-
- -

Синтаксис

- -
radial-gradient(
-  [ [ circle || <length> ]                         [ at <position> ]? , |
-    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
-    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
-    at <position> ,
-  ]?
-  <color-stop> [ , <color-stop> ]+
-)
-где <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
-  и <color-stop>     = <color> [ <percentage> | <length> ]?
-
- -

Примеры

- -

Простой градиент

- - - -
.radial-gradient {
-  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
-}
- -

{{EmbedLiveSample('Простой_градиент', 120, 120)}}

- -

Градиент со смещённым центром

- - - -
.radial-gradient {
-  background-image: radial-gradient(farthest-corner at 40px 40px,
-      #f35 0%, #43e 100%);
-}
- -

{{EmbedLiveSample('Градиент_со_смещённым_центром', 240, 120)}}

- -
-

Примечание: Дополнительные примеры можно найти в Использование CSS градиентов.

-
- -

Спецификация

- - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарии
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
- -

Совместимость с браузерами

- -

{{Compat("css.types.image.gradient.radial-gradient")}}

-

Сноски к Quantum CSS

- - - -

Смотрите также

- - diff --git a/files/ru/orphaned/web/css/repeating-linear-gradient()/index.html b/files/ru/orphaned/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index 1e7a560ae3..0000000000 --- a/files/ru/orphaned/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: repeating-linear-gradient() -slug: orphaned/Web/CSS/repeating-linear-gradient() -translation_of: Web/CSS/repeating-linear-gradient() -original_slug: Web/CSS/repeating-linear-gradient() ---- -
{{CSSRef}}
- -

CSS функция repeating-linear-gradient() создаёт изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.

- -
/* Повторяющийся градиент с углом наклона 45 градусов,
-   начинающийся с синего и заканчивающийся красным цветом */
-repeating-linear-gradient(45deg, blue, red);
-
-/* Повторяющийся градиент идущий от нижнего правого угла к верхнему левому,
-   начинающийся с синего и заканчивающийся красным цветом */
-repeating-linear-gradient(to left top, blue, red);
-
-/* Повторяющийся градиент идущий от низа к верху,
-   начинающийся с синего, переходящего в зелёный на 40%,
-   и заканчивающийся красным цветом */
-repeating-linear-gradient(0deg, blue, green 40%, red);
-
- -

С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведёт к резкому визуальному переходу.

- -

Повторяющийся линейный градиент (как и любой прочий градиент) не имеет размерностей по умолчанию; т.е. у него нет предопределённого размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применён.

- -
-

Примечание: Поскольку <gradient> относится к типу данных <image> , он может быть использован только там где применим тип <image>. По этой причине repeating-linear-gradient() не будет работать с {{Cssxref("background-color")}} и прочими свойствами использующими тип данных {{cssxref("<color>")}}.

-
- -

Синтаксис

- -

Значения

- -
-
<сторона-или-угол>
-
Положение точки начала линии градиента. Начинается со слова to и максимум двух ключевых слов: одно определяет сторону по горизонтали (left или right), и другое сторону по вертикали (top или bottom). Порядок ключевых слов определяющих сторону не важен. Если они не определены, по умолчанию используется to bottom.
-
Значения to top, to bottom, to left, и to right эквивалентны углам 0deg, 180deg, 270deg, и 90deg соответственно. Прочие значения транслируются в угол.
-
{{cssxref("<angle>", "<угол>")}}
-
Угол наклона линии направления градиента. Значение 0deg эквивалентно to top; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (0deg).
-
<цвет-позиция>
-
Значение {{cssxref("<color>", "<цвета>")}} с последующей (необязательной) его позицией (либо в {{cssxref("<percentage>", "<процентах>")}}, либо в единицах {{cssxref("<length>", "<длины>")}} вдоль оси градиента).
-
-
-

Примечание: Рендер перехода цветов в CSS градиентах следует тем же правилам что и в SVG градиентах.

-
-
-
- -

Formal syntax

- -
repeating-linear-gradient(  [ <угол> | to <сторона-или-угол> ,]? <цвет-позиция> [, <цвет-позиция>]+ )
-                            \---------------------------------/ \----------------------------/
-                              Определение линии градиента         Список цветов и их позиций
-
-где <сторона-или-угол> = [left | right] || [top | bottom]
-   и <цвет-позиция>    = <цвет> [ <процент> | <длина> ]?
-
- -

Примеры

- -

Полоски зебры

- - - -
body {
-  background-image: repeating-linear-gradient(-45deg,
-      transparent,
-      transparent 20px,
-      black 20px,
-      black 40px);
-}
-
- -

{{EmbedLiveSample('Полоски_зебры', 120, 120)}}

- -

Повторяющиеся горизонтальные полосы

- - - -
body {
-  background-image: repeating-linear-gradient(to bottom,
-      rgb(26,198,204),
-      rgb(26,198,204) 7%,
-      rgb(100,100,100) 10%);
-}
-
- -

{{EmbedLiveSample('Повторяющиеся_горизонтальные_полосы', 120, 120)}}

- -
-

Примечание: Для дополнительных примеров пожалуйста обратитесь к статье Using CSS gradients.

-
- -

Спецификации

- - - - - - - - - - - - - - - - -
СпецификацияСтатусПримечание
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
- -

Совместимость с браузерами

- -
{{Compat("css.types.image.gradient.repeating-linear-gradient")}}
- -

Дополнительно

- - diff --git "a/files/ru/orphaned/web/guide/ajax/\321\201_\321\207\320\265\320\263\320\276_\320\275\320\260\321\207\320\260\321\202\321\214_question_/index.html" "b/files/ru/orphaned/web/guide/ajax/\321\201_\321\207\320\265\320\263\320\276_\320\275\320\260\321\207\320\260\321\202\321\214_question_/index.html" deleted file mode 100644 index 7fbfff4658..0000000000 --- "a/files/ru/orphaned/web/guide/ajax/\321\201_\321\207\320\265\320\263\320\276_\320\275\320\260\321\207\320\260\321\202\321\214_question_/index.html" +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: С чего начать? -slug: orphaned/Web/Guide/AJAX/С_чего_начать? -original_slug: Web/Guide/AJAX/С_чего_начать? ---- -

IKFIA -

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 ---- -

Эта статья демонстрирует, как создавать и вызывать пользовательские DOM-события. Такие события часто называют искусственными событиями, по отношению к событиям, производимым браузером.

- -

Создание собственных событий

- -

События могут быть созданы с помощью  конструктора Event:

- -
var event = new Event('build');
-
-// Подписываемся на событие
-elem.addEventListener('build', function (e) { ... }, false);
-
-// Вызываем событие
-elem.dispatchEvent(event);
- -

Этот конструктор поддерживается во всех современных браузерах (кроме Internet Explorer). Более подробную информацию смотрите ниже "Старомодный способ".

- -

Добавление пользовательских данных – CustomEvent()

- -

Чтобы добавить больше данных к объекту event, существует интерфейс CustomEvent, и вы можете использовать свойство detail, чтобы передать собственные данные. Например, событие может быть создано так:

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

Это позволит вам получить доступ к дополнительным данным в обработчике:

- -
function eventHandler(e) {
-  log('The time is: ' + e.detail);
-}
-
- -

Старомодный способ

- -

Старый способ создать событие использует API в стиле Java. Пример:

- -
// Создание события
-var event = document.createEvent('Event');
-
-// Назначить имя событию
-event.initEvent('build', true, true);
-
-// Слушаем событие
-document.addEventListener('build', function (e) {
-  // e.target соответствует объекту document
-}, false);
-
-// target события может быть любой элемент
-document.dispatchEvent(event);
-
-
- -

Вызов встроенных событий

- -

Этот пример показывает симуляцию клика (программно сгенерированное событие клика) по галочке чекбокса, используя DOM-методы. Просмотр действующих примеров.

- -
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");
-  }
-}
- -

Совместимость с браузерами

- -

{{Compat("api.Event.Event")}}

- -

Смотрите также

- - 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 ---- -

Веб-платформа предоставляет несколько способов получения уведомлений о событиях DOM. Два общих подхода - это {{domxref ("EventTarget.addEventListener", " addEventListener ()")}} и конкретные обработчики onevent . Эта страница посвящена тому, как работают последние.

- -

Регистрация обработчиков onevent

- -

Обработчики onevent - это свойства определённых элементов DOM, позволяющие управлять тем, как этот элемент реагирует на события. Элементы могут быть интерактивными (ссылки, кнопки, изображения, формы и т. д.) или неинтерактивными (например, элемент base <body>). События - это такие действия, как:

- - - -

Обработчик on-event обычно называется с именем события, на которое он реагирует, например onclick , onkeypress , onfocus и т. д.

- -

Вы можете указать обработчик событий on<...> для конкретного события (например, {{event("click")}}) для данного объекта различными способами:

- - - -

Свойство обработчика событий onevent  служит своего рода заполнителем, которому может быть назначен один обработчик событий. Чтобы разрешить установку нескольких обработчиков для одного и того же события на данном объекте, вы можете вызвать метод {{domxref("EventTarget.addEventListener", " addEventListener ()")}} , который управляет списком обработчиков для данного события на объекте. Затем обработчик можно удалить из объекта, вызвав его функцию {{domxref ("EventTarget.removeEventListener", "removeEventListener()")}} .

- -

Когда происходит событие, которое применяется к элементу, каждый из его обработчиков событий вызывается, чтобы позволить им обрабатывать это событие один за другим. Вам не нужно вызывать их самостоятельно, хотя вы можете сделать это во многих случаях, чтобы легко имитировать происходящее событие. Например, учитывая объект кнопки myButton , вы можете сделать myButton.onclick(myEventObject) для прямого вызова обработчика событий. Если обработчик событий не имеет доступа к каким-либо данным из объекта event, вы можете пропустить это событие при вызове функции onclick() .

- -

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.

- -

Это продолжается до тех пор, пока не будет вызван каждый обработчик, если только один из обработчиков событий явно не остановит обработку события, вызвав {{domxref("Event.stopPropagation", " stopPropagation ()")}} на самом объекте события.

- -

Non-element objects

- -

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 progress event on instances of XMLHttpRequest:

- -
const xhr = new XMLHttpRequest();
-xhr.onprogress = function() { … };
- -

HTML onevent attributes

- -

HTML elements have attributes named onevent 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 onevent 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.

- -

Further changes to the HTML attribute value can be done via the setAttribute method; Making changes to the JavaScript property will have no effect.

- -

HTML

- -

Given this HTML document:

- -
<p>Demonstrating quirks of <code>on<em>event</em></code> HTML attributes on
-   <a onclick="log('Click!')">these three words</a>.
-</p>
-
-<div></div>
- -

JavaScript

- -

Then this JavaScript demonstrates that the value of the HTML attribute is unaffected by changes to the JavaScript object's property.

- -
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>`);
- -

Result

- -

{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}

- -

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: onblur, onerror, onfocus, onload, and onscroll.)

- -

Event handler's parameters, this binding, and the return value

- -

When the event handler is specified as an HTML attribute, the specified code is wrapped into a function with the following parameters:

- - - -

When the event handler is invoked, the this keyword inside the handler is set to the DOM element on which the handler is registered. For more details, see the this keyword documentation.

- -

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 "The event handler processing algorithm" in the HTML specification.

- -

When the event handler is invoked

- -
-

TBD (non-capturing listener)

-
- -

Terminology

- -

The term event handler may refer to:

- - - -

When discussing the various methods of listening to events:

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML5 W3C')}}
- -

Browser compatibility

- -

Detecting the presence of event handler properties

- -

You can detect the presence of an event handler property with the JavaScript in operator. For example:

- -
if ("onsomenewfeature" in window) {
-  /* do something amazing */
-}
-
- -

Event handlers and prototypes

- -

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 Window.prototype.onload. In the past, event handlers (onload, 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.

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 ---- -

{{draft()}}

- -

События связаны с:

- - - -

Статья Overview page содержит в краткой манере описание шаблонов проектирования и типов определяемых современными браузерами инцидентов

- -
- -

Custom events page описывает, как шаблон кода события может быть использован в пользовательском коде, чтобы определить новые типы событий, испускаемые от пользовательских объектов, зарегистрируйтесь функции слушателядля обработки этих событий, и вызова события в коде пользователя.

- -

Остальные страницы описывают, как использовать события разных видов, определённых в веб-браузерах. К сожалению, эти события были определены по частям, веб-браузеры развивались таким образом, что нет удовлетворения систематическим характеристикам событий встроенным или определённым в современных веб-браузерах.

- -

Устройство, на котором работа веб-браузера может спровоцировать событие, например связанное с изменением его положения и ориентации в реальном мире, частично описано page on orientation coordinate systems и page on the use of 3D transforms. Они разные, но похожи, с изменённой вертикальной ориентации устройства.

- -

Окно в котором отображается браузер может вызвать события, к примеру, изменить размер, если пользователь максимизирует окно или изменит его размер.

- -

Процесс загрузки веб-страницы может вызвать ответное событие на завершение различных этапов загрузки, анализирования и перевода веб-страниц отображаемых пользователю.

- -

Взаимодействие пользователя с содержимым веб-страницы может вызвать события. События, вызванные взаимодействием пользователя развивались в первые годы проектирования браузера, и включают в себя сложную систему, определяющую последовательность, в которой будет вызываться событие и манера, в которой эта последовательность может быть контролируемой. Различные типы взаимодействия пользователя с управляемыми событиями:

- - - -

Модификация в структуре веб-страницы или содержании может быть вызвано некоторым событием,  описанным в mutation events page, но их использование устарело в пользу более лёгкого Mutation Observer подхода.

- -

Потоки Медиа, встроенный в HTML документа, может вызвать некоторые события, страница описания media events.

- -

Сетевые запросы, сделанные веб-страницей, могут вызвать некоторые события.

- -

Есть много других источников событий, определённых в веб-браузере, страницы которых пока не доступны в данном руководстве.

- -
-

Примечание: Это руководство событие Разработчика нуждается в существенной работе.Структура должна быть реорганизована и страницы переписаны. Мы надеемся, что все, что вы знаете и должны знать о событиях будет опубликовано здесь.

-
- -

Docs

- -

{{LandingPageListSubpages}}

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 ---- -

Встроенные с помощью HTML тегов {{ HTMLElement("audio") }} или {{ HTMLElement("video") }} медиа объекты генерируют различные события. В этом разделе приведён их список и описание.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Название событияОписание
abortОтправляется, когда воспроизведение прерывается; Например, если воспроизведение медиа прерывается и начинается с самого начала, это событие будет отправлено.
{{event("canplay")}}Отправляется, когда доступно достаточно данных для того, что бы медиа могло воспроизвестись, по крайней мере, в течение нескольких кадров. Соответствует состоянию (readyState) HAVE_ENOUGH_DATA.
{{event("canplaythrough")}}Отправляется, когда состояние готовности изменяется к CAN_PLAY_THROUGH. Указывает, что медиа может быть полностью воспроизведено без перерыва, предполагая, что скорость загрузки остаётся, по крайней мере на нынешнем уровне. Примечание: Ручная установка CURRENTTIME вызовет событие canplaythrough в Firefox. В других браузерах это может не произойти.
{{event("durationchange")}}Метаданные были загружены или изменены, что указывает на изменение в продолжительности медиа. Может быть отправлено, например, когда медиа загружено достаточно для того, чтобы продолжительность уже была известна.
{{event("emptied")}}Медиа стало пустым. Например, это событие отправляется, если медиа уже загружено (или частично загружено), и метод load() был вызван что бы его перезагрузить.
encrypted {{experimental_inline}}The user agent has encountered initialization data in the media data.
endedОтправляется, когда воспроизведение завершено.
errorОтправляется, когда произошла ошибка.  Атрибут error медиа объекта содержит более подробную информацию об ошибке. Смотрите Error handling, что бы узнать подробнее.
interruptbeginОтправляется, когда воспроизведение на Firefox OS устройстве прервано по любой из причин - например, если приложение ушло в фон или аудио с большим приоритетом начало воспроизведение. См. Using the AudioChannels API.
interruptendОтправляется, когда ранее прерванное воспроизведение на Firefox OS устройстве продолжает воспроизведение. См. Using the AudioChannels API
{{event("loadeddata")}}Завершена загрузка первого кадра (frame) медиа.
{{event("loadedmetadata")}}Метаданные медиа были загружены; все атрибуты теперь содержат максимум информации.
{{event("loadstart")}}Отправляется, когда начинается загрузка медиа.
mozaudioavailableSent 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.
{{event("pause")}}Отправляется, когда воспроизведение приостановлено.
{{event("play")}}Отправляется, когда воспроизведение медиа начинается после того, как было приостановлено; то есть, когда воспроизведение возобновляется после паузы.
{{event("playing")}}Отправляется, когда начинается воспроизведение медиа (в первый раз, после паузы или после перезапуска).
{{event("progress")}}Отправляется периодически для информирования о прогрессе скачивания медиа файла. Информация об объёме загруженных данных доступна в атрибуте "buffered" элемента медиа.
{{event("ratechange")}}Отправляется, когда изменяется скорость воспроизведения.
{{event("seeked")}}Отправляется, когда операция поиска завершена.
{{event("seeking")}}Отправляется, когда начинается операция поиска.
{{event("stalled")}}Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{event("suspend")}}Отправляется, когда загрузка медиа приостановлена. Это может произойти как потому, что загрузка была завершена, так и по другим причинам.
{{event("timeupdate")}}Отправляется, когда изменяется значение атрибута currentTime.
{{event("volumechange")}}Отправляется, когда изменяется громкость звука (также когда звук включён или выключен).
{{event("waiting")}}Отправляется, когда операция (напр. воспроизведение) была отложена до завершение другой операции (напр. поиск).
- -

Вы можете легко следить за этими событиями, используя следующий код:

- -
var v = document.getElementsByTagName("video")[0];
-v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
-v.currentTime = 10.0;
-
- -

В этом примере первый элемент получает видео и вешает на него событие "seeked". Обработчик вызывает метод элемента play(), который начинает воспроизведение.

- -

Затем, в строке 3 примера, устанавливается атрибут currentTime элемента в значение 10.0, что инициирует переход к десятой секунде видео. Это приводит к отправлению события "seeking" после начала операции, и события "seeked" после её завершения.

- -

Другими словами, этот пример пытается перейти к 10-секундной видео, после чего начинает воспроизведение.

- -

Совместимость

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatUnknown() }}{{ CompatGeckoDesktop("1.9.1") }} (Prior to Gecko 2.0, media events bubbled.){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
encrypted -

{{CompatChrome(42.0)}}

- 		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
load{{ CompatUnknown() }}Removed in {{ CompatGeckoDesktop("1.9.2") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
mozaudioavailable {{ non-standard_inline() }}{{ CompatNo() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
suspend{{ CompatUnknown() }}{{ CompatGeckoDesktop("1.9.2") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
encrypted{{ CompatNo }}{{CompatChrome(43.0)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }} -

{{CompatChrome(42.0)}}

-
load{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
mozaudioavailable {{ non-standard_inline() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("2.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
suspend{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

 

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 ---- -
-

Эта обзорная статья о событиях и их обработчиках описывает шаблон проектирования кода, который используется для реагирования на события, возникающие, когда браузер получает доступ к web-странице, и содержит подборку типов подобных событий, которые современные браузеры могут обрабатывать.

-
- -

События и их обработчики представляют собой основную технику в JavaScript для реагирования на события, возникающие, когда браузер получает доступ к web-странице, включая события о подготовке страницы к отображению, взаимодействии с её содержимым, в зависимости от устройства, на котором браузер был запущен, и многие другие случаи, такие как воспроизведение потоковой медиа-информации или расчёт времени анимации.

- -

События и обработчики событий заняли центральное место в web-программировании с добавлением языка в браузеры, сопровождая смену архитектуры рендеринга от перехвата и загрузки страницы к управлению с помощью событий, основанном на перекомпоновке (reflow). Сначала браузер ожидает, пока он получит все ресурсы, связанные со страницей, чтобы проанализировать, обработать, отрисовать и предоставить страницу пользователю. Отрисованная страница остаётся неизменной, пока браузер не запросит новую. С изменением в подходе к рендерингу динамической страницы, браузер непрерывно зацикливается между обработкой, отрисовкой, представлением содержимого и ожиданием некоторого нового триггера события. Триггеры событий включают, например, завершение загрузки ресурса по сети, скачивание изображений, которые теперь могут быть отрисованы на экране, завершение браузером анализа ресурса, обработку HTML-содержимого страницы, взаимодействие пользователя с содержимым страницы, нажатия кнопок. Дуглас Крокфорд хорошо объясняет это изменение в нескольких лекциях, особенно своей речи "Неудобные API: Теория DOM", которая описывает изменения в потоке изначального потока браузера от управляемого событиями браузера.

- -
A comparison of the sequential and event-driven browser load sequences.
- -

Второй подход изменяет последние шаги, переходя от простого потока к бесконечному циклу, где ожидание и обработка возникновения новых событий следует за отрисовкой. Введение динамического подхода позволяет странице быть частично отрендериной, даже когда браузер ещё не закончил извлечение всех ресурсов; это так же разрешено для действий, управляемыми событиями, которые JavaScript использует. (Речь доступна на нескольких ресурсах, включая этот.) На данный момент, все среды исполнения JavaScript используют события и их обработчики.

- -

Шаблон проектирования событий

- -

Система событий, по своей сути, простой программный шаблон проектирования. Он начинается с соглашения о виде события и:

- - - -

Шаблон реализуется с помощью:

- - - -

Функция считается "обработчиком", где оба именами взаимозаменяемы. Этому шаблону можно легко следовать с использованием полностью пользовательского кода, как объяснено в статье о пользовательских событиях. Шаблон так же используется современными web-браузерами, определяющими множество событий, которые вызываются в ответ на пользовательский ввод или активность браузера.

- -

Современные браузеры следуют событийному шаблону, используя стандартизированный подход. В качестве структуры данных для свойств события они применяют объект, полученный от объекта EventPrototype. Для регистратрации функции, которая будет обрабатывать эту структуру данных, используется метод, называемый addEventListener, который ожидает в качестве аргумента имя-строку, соответствующую типу события, и функцию-обработчика. В итоге, браузеры определяют огромное число объектов источников событий и широкое разнообразие типов событий, сформированных объектами.

- -

Пример обработчика события кнопки

- -

К примеру, браузерный элемент button предназначен для вызова события с именем  'click' в ответ на нажатие кнопки мыши или прикосновение пальца к чувствительной части экрана. В HTML мы можем определить  button как:

- -
<button id="buttonOne">Click here to emit a 'click' event</button>
- -

и, в коде JavaScript, мы можем сначала определить функцию для обработки этого события 'click' :

- -
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 );
-};
- -

и затем зарегистрировать свою функцию с помощью объекта Button или со стороны скрипта, используя представление DOM (Document Object Model) на HTML-странице:

- -
var buttonDOMElement = document.querySelector('#buttonOne');
-buttonDOMElement.addEventListener('click', example_click_handler);
- -

или на самой HTML-странице, добавив функцию как значение атрибута 'onclick', хотя этот вариант обычно используется на очень  простых web-страницах.

- -

{{ EmbedLiveSample('Button_Event_Handler') }}

- -

Этот код полагается на соглашение о том, что существует некоторый вид события, называемый 'click' , который вызовет все функции-обработчики (или 'обработчик') с объектом-аргументом Event (на данный момент, в этом случае производный от объекта MouseEvent ) и будет запущен после манипуляций пользователя с элементами button на HTML-странице. Код не имеет видимого воздействия, пока пользователь не использует кнопки, наводит указатель мыши на элемент HTML и нажимает на левую кнопку или устанавливает палец или стилус на некоторое место на экране, выше кнопки; когда это произойдёт, buttonDOMElement объекта JavaScript вызовет функцию example_click_handler с объектом Event в качестве аргумента. Функция, в свою очередь, исполнит любые действия, описанные программистом, в данном случае отрыв диалоговое окно HTML. Заметим, что обработчик имеет доступ к объекту ev, так как тот передаётся в качестве аргумента; объект содержит информацию о событие, в частности время его возникновения.

- -

Во втором варианте, интегрирован в web-страницу намного более современный JavaScript обёрнут в событийный вызов функции, чтобы убедиться, что код будет выполнен только тогда, когда HTML будет обработан и доступен для изменения или декорирования. Например, код может быть объявлен так:

- -
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);
-
- -

так что этот код будет вызван только после того, как объект document вызовет событие 'DOMContentLoaded', потому что HTML был проанализирован и были созданы объекты Javasript,   представляющие каждый узел HTML-документа. Заметим, что в этом примере, код даже не передаёт аргумент события в функцию, потому что тому никогда не понадобится использовать данные, описанные в нем; скорее, код всего лишь нужно подождать, пока не случится событие.

- -

Шаблон легко изучить и внедрить. Сложность с событиями возникает из-за необходимости изучить большое разнообразие событий, которые представлены в современных web-браузерах. Так же есть некоторая сложность в понимании, как писать обработчики, так как данный код работает асинхронно и потенциально может быть вызван несколько раз подряд, но в немного другой ситуации.

- -

Важные события

- -

Web-браузеры определяют большое число событий, поэтому не практично описывать их все. Event Reference призван содержать список стандартных событий, используемых в современных браузерах.

- -

В общем случае, события различного вида выделяют, основываясь на объекте, который вызывает данное событие, включая:

- - - -

хотя этот список на данный момент неполный.

- -

Некоторые события, которые стоит отметить:

- -
-

Примечание: Этот список событий будет нуждаться в доработке, чтобы соответствовать действительности; эта работа ожидает некоторой глобальной реорганизации в документе. Так же нужно найти хорошее объяснение событий, включая события во время загрузки страницы, таких, как частично описанных в этой статье  или  этом вопросе на  Stack Overflow.

-
- - - - - -

Иерархия объекта событий

- -

Web-браузер определяет множество событий различного вида. Каждое описание включает, как структуру данных, передающуюся в обработчика, объект, который наследуется от объекта EventPrototype.

- -

Частичная диаграмма иерархии класса объекта событий:

- -
-

Примечание: Эта диаграмма неполная.

-
- -

- -

Web API Документация содержит страницу, описывающую объект событий, который так же включает известные события DOM, подклассы объекта Event.

- -

Документации

- -

Три ресурса на MDN (Mozilla Developer Network) частично полезные для программистов, желающих работать с событиями:

- - 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 ---- -

Создание веб форм всегда было комплексной задачей. В то время как сама по себе разметка формы - задача не сложная, проверка каждого поля на валидность - сложнее, а информирование пользователя о проблеме - может стать головной болью. Стандарт HTML5 предоставил новые механизмы для форм: были добавлены новые семантические типы для элемента {{ HTMLElement("input") }} и обязательная валидация, чтобы облегчить работу по проверке содержимого формы на стороне браузера. Проще говоря, обычная проверка может быть выполнена без JavaScript, простой установкой новых атрибутов; более сложные ограничения могут быть реализованы через HTML5 Constraint Validation API.

- -
Внимание: HTML5 Constraint validation не отменяет валидацию на стороне сервера. Несмотря на то что на сервер будет отправляться меньше запросов с невалидными данными, такие запросы всё ещё могут быть отправлены менее "сговорчивыми" браузерами (например, браузерами без поддержки HTML5 и без JavaScript) или плохими парнями, пытающимися взломать ваше веб-приложение. Следовательно, как и в случае с HTML4, вам всё ещё нужно проверять ввод на стороне сервера, таким образом, чтобы это было согласовано с валидацией на стороне клиента.
- -

Внутренние и базовые ограничения

- -

В HTML5, базовые ограничения описываются двумя способами:

- - - -

Семантические типы input-ов

- -

Атрибуты, присущие элементам {{ htmlattrxref("type", "input") }}:

- - - - - - - - - - - - - - - - - - - - - -
Input typeОпределение ограниченияСвязанное с этим нарушение
<input type="URL">Значение должно быть абсолютным URL, одним из: -
    -
  • валидным URI (как описано в RFC 3986)
    • -
  • валидным IRI, без query компонента (как описано в RFC 3987)
    • -
  • валидным IRI, без query компонента и без неэкранированных не-ASCII символов (как описано в RFC 3987)
    • -
  • валидным IRI, при условии, что кодировка документа UTF-8 или UTF-16 (как описано в RFC 3987)
    • -
- 		Type mismatch constraint violation
 <input type="email">Значение должно следовать ABNF: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) где: -
    -
  • atext (описан в RFC 5322) - US-ASCII символ (A to Z and a-z), цифра (от 0 до 9) или один из следующих: 
    - ! # $ % & ' * + - / = ? ` { } | ~ специальных символов,
    • -
  • ldh-str (описан в RFC 1034) - US-ASCII символы, цифры и "-", сгруппированы по словам и разделённые точкой (.).
    • -
- -
Внимание: если установлен атрибут {{ htmlattrxref("multiple", "input") }}, в поле могут быть вписаны несколько e-mail адресов, разделённых запятыми. Если любое из этих условий не выполнено, будет вызвано Type mismatch constraint violation.
- 		Type mismatch constraint violation
- -

Следует учесть, что большинство типов input не имеют "нативных" ограничений, а некоторые из них просто лишены валидации или имеют автоматическую корректировку невалидных значений по умолчанию. 

- -

Атрибуты валидации

- -

Ниже перечислены атрибуты, которые описывают базовые ограничения:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
АтрибутТипы input с поддержкой атрибутаВозможные значенияОписание ограниченияСвязанное нарушение
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordРегулярное выражение JavaScript (по стандарту ECMAScript 5, флаги global, ignoreCase, и multiline отключены)Значение должно подходить под паттернPattern mismatch constraint violation
{{ htmlattrxref("min", "input") }}range, numberВалидное числоЗначение поля должно быть больше или равно значению атрибутаUnderflow constraint violation
date, month, weekВалидная дата
datetime, datetime-local, timeВалидная дата и время
{{ htmlattrxref("max", "input") }}range, numberВалидное числоЗначение поля должно быть меньше или равно значению атрибутаOverflow constraint violation
date, month, weekВалидная дата
datetime, datetime-local, timeВалидная дата и время
{{ htmlattrxref("required", "input") }}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никакое так как это Boolean атрибут: его присутствие означает true, а отсутствие - falseЗначение должно быть не пустым (если установлено).Missing constraint violation
{{ htmlattrxref("step", "input") }}dateЦелое число днейПока в атрибут step не установлен любой литерал, значение может быть min + любое число, красное шагу.Step mismatch constraint violation
monthЦелое число месяцев
weekЦелое число недель
datetime, datetime-local, timeЦелое число секунд
range, numberЦелое число
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; также на элементе {{ HTMLElement("textarea") }}Длина (целое число)Количество символов (знаков) не должно превышать значение атрибута.Too long constraint violation
- -

Процесс валидации ограничений

- -

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:

- - - -
Note: - - -
- -

Complex constraints using HTML5 Constraint API

- -

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.

- -

Basically, the idea is to trigger JavaScript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setCustomValidity() 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.

- -

Constraint combining several fields: Postal code validation

- -

The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like D- in Germany, F- 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.

- -
-

Note: This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. 

-
- -

As an example, we will add a script checking the constraint validation for this simple form:

- -
<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>
- -

This displays the following form: 

- -

- -

First, we write a function checking the constraint itself:

- -
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]);
-  }
-}
-
- -

Then we link it to the onchange event for the {{ HTMLElement("select") }} and the oninput event for the {{ HTMLElement("input") }}:

- -
window.onload = function () {
-    document.getElementById("Country").onchange = checkZIP;
-    document.getElementById("ZIP").oninput = checkZIP;
-}
- -

You can see a live example of the postal code validation.  

- -

Limiting the size of a file before its upload

- -

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.

- -

Here is the HTML part:

- -
<label for="FS">Select a file smaller than 75 kB : </label>
-<input type="file" id="FS">
- -

This displays:

- -

{{EmbedLiveSample("Limiting_the_size_of_a_file_before_its_upload")}}

- -

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:

- -
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("");
-}
- -

 

- -

Finally we hook the method with the correct event:

- -
window.onload = function () {
-  document.getElementById("FS").onchange = checkFileSize;
-}
- -

You can see a live example of the File size constraint validation.

- -

Visual styling of constraint validation

- -

Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.

- -

Controlling the look of elements

- -

The look of elements can be controlled via CSS pseudo-classes.

- -

:required and :optional CSS pseudo-classes

- -

The :required and :optional pseudo-classes allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.

- - -

:-moz-placeholder CSS pseudo-class

- -

See :-moz-placeholder.

- -

:valid :invalid CSS pseudo-classes

- -

The :valid and :invalid pseudo-classes 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.

- -

Default styles

- -

Controlling the text of constraints violation

- -

The x-moz-errormessage attribute

- -

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.

- -
-

Note: This extension is non-standard.

-
- -

Constraint API's element.setCustomValidity()

- -

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.

- -

Constraint API's ValidityState object

- -

The DOM ValidityState interface represents the validity states 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.

- -

Examples of personalized styling

- -

HTML4 fallback

- -

Trivial fallback

- -

JS fallback

- -

Conclusion

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 ---- -

HTML5 — последняя версия стандарта HTML. Термин имеет два определения:

- - - -

Эта страница создана в помощь всем разработчикам Open Web и ссылается на множество материалов, сгруппированных по функциям:

- - - - - - - - - - -
-

СЕМАНТИКА

- -
-
Секции и контуры в HTML5
-
Контурные и секционные элементы в HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
-
Использование HTML5 audio и video
-
{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.
-
Формы в HTML5
-
Взгляд на улучшение форм в HTML5: API валидации, несколько новых атрибутов, новые значения для атрибута {{ htmlattrxref("type", "input") }} тега {{ HTMLElement("input") }} и новый элемент {{ HTMLElement("output") }}.
-
Новые семантические элементы
-
Кроме секций, медиа и форм, множество новых тегов, такие как {{ HTMLElement("mark") }}, {{ HTMLElement("figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("data") }}, {{ HTMLElement("time") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} и {{ HTMLElement("meter") }}, увеличено количество валидных HTML5 элементов.
-
Улучшение {{HTMLElement("iframe")}}
-
Использование атрибутов {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe") }}, разработчики могут задать нужный уровень безопасности и осуществить рендеринг тега {{HTMLElement("iframe")}}.
-
MathML
-
Позволяет вставлять математические формулы.
-
Введение в HTML5
-
Эта статья знакомит вас с тем, как указать на то, что вы используете HTML5 в вашем веб-дизайне или веб-приложении.
-
HTML5-совместимый парсер
-
Анализатор, который превращает байты HTML документа в DOM, был расширен и точно определяет поведение, чтобы даже в случае неверного HTML, исход был предсказуемым и одинаков во всех HTML5-совместимых браузерах.
-
-
- -

СВЯЗЬ

- -
-
Web Sockets
-
Позволяет создать постоянное соединение между страницей и сервером и обмениваться данными через него.
-
Server-sent события
-
Позволяет серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.
-
WebRTC
-
Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
-
- -

ОФФЛАЙН И ХРАНИЛИЩЕ

- -
-
Офлайн-ресурсы: кеш приложения
-
Firefox полностью поддерживает спецификацию HTML5 по офлайн-ресурсам. Другие браузеры также имеют поддержку спецификации на должном уровне
-
Online and offline events
-
Firefox 3 поддерживает WHATWG online и offline события, которые позволяют приложениям и расширениям обнаружить есть ли активное подключение к Интернет, а также определить, когда соединение портится или улучшается.
-
WHATWG сессионное или постоянное хранилище (aka DOM Storage)
-
Постоянное или сессионное хранилище позволяет веб-приложениям хранить структурированные данные на стороне клиента.
-
IndexedDB
-
Веб-стандарт для хранения значительных количеств структурированных данных в браузере и для быстрого их поиска, используя индексы.
-
Using files from web applications
-
Поддержка HTML5 File API была добавлена в Gecko, сделав возможным веб-приложениям иметь доступ к файлам, выбираемых пользователем. Это включает поддержку множества файлов, используя {{ HTMLElement("input") }} с типом file, имеющих атрибут multiple. Ещё это FileReader.
-
- -

МУЛЬТИМЕДИА

- -
-
Использование HTML5 audio и video
-
{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.
-
WebRTC
-
Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
-
Использование Camera API
-
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.
-
- -

ГРАФИКА И ЭФФЕКТЫ

- -
-
Canvas Tutorial
-
Узнайте о элементе {{ HTMLElement("canvas") }} и узнайте, как рисовать графику и другие элементы в Firefox.
-
HTML5 text API для <canvas>
-
HTML5 text API сейчас поддерживается в {{ HTMLElement("canvas") }}.
-
WebGL
-
WebGL приносит 3D в веб, соответствует OpenGL ES 2.0, может использоваться в HTML5 через {{ HTMLElement("canvas") }}.
-
SVG
-
Основанный на XML формат векторных изображений, который может быть непосредственно вставлен в HTML.
-
- -
-
-
- 		-

производительность и интеграция

- -
-
Web Workers
-
Позволяет делегировать выполнение JavaScript в фоновые потоки, это позволит предотвратить замедление интерактивных событий.
-
XMLHttpRequest Level 2
-
Позволяет извлечь асинхронно некоторые части страницы, что позволяет отобразить динамический контент, изменяющейся время от времени или от действий пользователя. Это технология, лежащая в основе AJAX.
-
JIT-компилирование движков JavaScript
-
Новое поколение движков JavaScript гораздо более мощных, приводящих к большей производительности.
-
History API
-
Позволяет управлять историей браузера. Это особенно полезно страниц, интерактивно загружающих новую информацию.
-
contentEditable атрибут: трансформируйте свой сайт в википедию!
-
HTML5 стандартизировал атрибут contentEditable. Узнайте больше об этой фиче.
-
Drag and drop
-
HTML5 drag and drop API позволяет перетаскивать элементы по сайту или на него. Также простейшее API для использования расширениями или иными приложениями.
-
Управление фокусом в HTML
-
Поддержка новый атрибутов HTML5 activeElement and hasFocus.
-
Обработчики протоколов для Web
-
Вы можете зарегистровать веб-приложения, как обработчики протоколов, используя метод navigator.registerProtocolHandler().
-
requestAnimationFrame
-
Контролирует анимации для обеспечения оптимальной производительности.
-
Fullscreen API
-
Позволяет использовать весь экран для веб-приложения, без отображения UI браузера.
-
Pointer Lock API
-
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.
-
Online and offline events
-
Для того, чтобы построить хорошую офлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернётся в сеть.
-
- -

доступ к устройствам

- -
-
Использование Camera API
-
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.
-
Touch события
-
Обрабатывает события, создаваемые нажатиями пользователя по тач скрину.
-
Геолокация
-
Позволяет браузерам получать местоположение пользователя.
-
Определение ориентации устройства
-
Позволяет среагировать, когда устройство, на котором работает браузер, меняет ориентацию. Это может быть использовано в качестве устройства ввода (например, чтобы сделать игры, которые реагируют на положение устройства) или адаптировать компоновку страницы с ориентацией экрана (вертикальная или горизонтальная).
-
Pointer Lock API
-
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.
-
- -

стилизация

- -

CSS был расширен, чтобы дать возможность стилизировать элементы наиболее оптимальным способом. Его часто называют CSS3, хотя CSS больше не является монолитной спецификацией и различные модули, не все на уровне 3: некоторые на уровне 1, а некоторые на уровне 4, с промежуточными уровнями.

- -
-
Новые способы стилизирования фона
-
Новая возможность задать тень элемента, используя {{ cssxref("box-shadow") }} или установление множественных фонов.
-
Лучшие границы
-
Не только изображения можно использовать для стилизирования границы, используя {{ cssxref("border-image") }} или его длинные формы записи, а скруглить уголки можно свойством {{ cssxref("border-radius") }}.
-
Анимируйте свой стиль
-
Используйте CSS Переходы, чтобы анимировать изменение состояния элемента или CSS Анимации для анимации частей страницы без запуска событий, вы теперь можете контролировать мобильные элементы на вашей странице.
-
Улучшение типографии
-
Авторы могут лучше контролировать типографию. Например, они могут контролировать {{ cssxref("text-overflow") }} и перенос слов, а также тень текста и его декорирование. Могут загрузить и применить другой шрифт правилом {{ cssxref("@font-face") }}.
-
Новые презентационные макеты
-
Для того, чтобы улучшить гибкость дизайна, добавили: CSS мульти-колоночный макет и CSS отзывчивый блочный макет.
-
-
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 ---- -

HTML5 - пятая редакция и самая новая версия стандарта HTML. Она предлагает новые возможности, которые предоставляют не только богатую поддержку медиа, но и также расширяет возможности для создания веб-приложений, которые могут взаимодействовать с пользователем, его локальными данными, и серверами проще и эффективнее, чем это было раньше.

-

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 main HTML5 page. For detailed information about multiple browsers' support of HTML5 features, refer to the CanIUse website.

-

Declaring that the document contains HTML5 mark-up with the HTML5 doctype

-

The doctype for HTML5 is very simple. To indicate that your HTML content uses HTML5, simply use:

-
<!DOCTYPE html>
-
-

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.

-

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.

-

Декларация кодировки с помощью <meta charset>

-

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:

-
<meta charset="UTF-8">
-

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.

-

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.

-

Использование нового HTML5 парсера

-

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 valid 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.

-

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.

-

Не волнуйтесь - вам не придётся ничего менять на вашем веб-сайте - разработчики веб-браузерах сделали все для вас!

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 ---- -
-

Важно: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрён в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм построения структуры нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели степень важности заголовков (h1-h6).

-
- -

Спецификация HTML5 предлагает разработчикам несколько новых элементов, позволяющих описывать структуру веб-документа с помощью стандартной семантики. В настоящей статье описываются эти элементы и способы их использования для создания требуемой структуры любого документа.

- -

Структура документа в HTML 4

- -

Структура документа, т. е. семантическая структура контента, заключённого в теги  <body> и </body>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включёнными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.

- -

Так, следующая разметка:

- -
-
<div class="section" id="forest-elephants" >
-  <h1>Лесные слоны</h1>
-  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <div class="subsection" id="forest-habitat" >
-    <h2>Среда обитания</h2>
-    <p>Лесные слоны живут не на деревьях, а под ними.
-     ...продолжение данного подраздела...
-  </div>
-</div>
-
-
- -

обеспечивает следующую структуру:

- -
1. Лесные слоны
-   1.1 Среда обитания
-
- -

Для задания нового раздела не обязательно использовать элементы {{HTMLElement("div")}}. Для этого достаточно наличия элемента заголовка. Поэтому, разметка

- -
<h1>Лесные слоны</h1>
- <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <h2>Среда обитания</h2>
-  <p>Лесные слоны живут не на деревьях, а под ними.
-    ...продолжение данного подраздела...
-  <h2>Рацион</h2>
-<h1>Монгольская песчанка</h1>
-
- -

обеспечивает следующую структуру:

- -
1. Лесные слоны
-   1.1 Среда обитания
-   1.2 Рацион
-2. Монгольская песчанка
-
- -

Какие проблемы решает HTML5

- -

Определение структуры документа и неявный алгоритм создания структуры в HTML 4 не отличаются чёткостью, что порождает множество проблем:

- -
    -
  1. Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов class не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не даёт точного определения разделу и чётких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с реабилитационными технологиями, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.
    2. -
  2. Объединить несколько документов в один непросто: включение подчинённого документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.
    3. -
  3. В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент {{HTMLElement("aside")}}, позволяющий исключить такие разделы из основной структуры.
    4. -
  4. Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: {{HTMLElement("nav")}} для наборов ссылок, например, оглавления, {{HTMLElement("footer")}} и {{HTMLElement("header")}} для информации, касающейся всего сайта. Обратите внимание, что {{HTMLElement("header")}} и {{HTMLElement("footer")}} не создают разделы как {{HTMLElement("section")}}, а, скорее, обеспечивают семантическую разметку частей раздела.
    5. -
- -

В общем, HTML5 обеспечивает большую точность при задании разделов и оглавлений, позволяя строить более предсказуемую структуру документа, что даёт браузерам возможность более качественно обслуживать пользователей.

- -

Алгоритм создания структуры HTML5

- -

Задание разделов в HTML5

- -

Весь контент, находящийся внутри {{HTMLElement("body")}}, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом {{HTMLElement("body")}}, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} и {{HTMLElement("nav")}}. 

- -
Note: Каждый раздел может иметь собственную иерархию заголовков. Следовательно, даже вложенный раздел может иметь {{HTMLElement("h1")}}. См. «Задание заголовков в HTML5».
- -

Например:

- -
<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>
- -

Данный фрагмент HTML задаёт раздел верхнего уровня:

- -
<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>
- -

Данный раздел имеет три подраздела:

- -
<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>
- -

В результате получаем следующую структуру:

- -
1. Лесные слоны
-   1.1 Введение
-   1.2 Среда обитания
-
- -

Задание заголовков в HTML5

- -

Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задаёт заголовок текущего раздела.

- -

Элемент заголовка имеет определённую степень важности, определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет максимальную степень важности, а {{HTMLElement("h6")}} минимальную. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <section>
-    <h2>Среда обитания</h2>
-    <p>Лесные слоны живут не на деревьях, а под ними.
-        ...продолжение данного подраздела...
-  </section>
-</section>
-<section>
-  <h3>Монгольская песчанка</h3>
-  <p>В данном разделе мы расскажем о монгольской песчанке.
-     ...продолжение данного раздела...
-</section>
- -

приводит к следующей структуре:

- -
1. Лесные слоны
-   1.1 Среда обитания
-2. Монгольская песчанка
- -

Обратите внимание, что степень важности элемента заголовка (в данном примере {{HTMLElement("h1")}} для первого раздела верхнего уровня, {{HTMLElement("h2")}} для подраздела {{HTMLElement("h3")}} для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)

- -

Неявное задание разделов

- -

Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется неявным заданием разделов.

- -

Элементы заголовков ({{HTMLElement("h1")}} — {{HTMLElement("h6")}}) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел располагается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <h3 class="implicit subsection">Среда обитания</h3>
-  <p>Лесные слоны живут не на деревьях, а под ними.
-    ...продолжение данного подраздела...
-</section>
- -

приводит к следующей структуре:

- -
1. Лесные слоны
-   1.1 Среда обитания (неявно задано элементом h3)
-
- -

Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне: 

- -
<section>
-  <h1>Лесные слоны</h1>
-  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-  <h1 class="implicit section">Монгольская песчанка</h1>
-  <p>Монгольская песчанка – это небольшое симпатичное млекопитающее.
-    ...продолжение данного раздела...
-</section>
- -

приводит к следующей структуре:

- -
1. Лесные слоны
-2. Монгольская песчанка (неявно задано элементом h1, который одновременно закрывает предыдущий раздел)
-
- -

Если степень важности такого заголовка выше, чем у предыдущего заголовка, он закрывает предыдущий раздел и открывает новый неявно заданный раздел на более высоком уровне:

- -
<body>
-  <h1>Млекопитающие</h1>
-  <h2>Киты</h2>
-  <p>В данном разделе мы поговорим о китах.
-    ...продолжение данного раздела...
-  <section>
-    <h3>Лесные слоны</h3>
-    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
-    ...продолжение данного раздела...
-    <h3>Монгольская песчанка</h3>
-      <p>Песчанки распространились далеко за пределы Монголии.
-         ...продолжение данного подраздела...
-    <h2>Рептилии</h2>
-      <p>Рептилии – это холоднокровные животные.
-          ...продолжение данного раздела...
-  </section>
-</body>
- -

приводит к следующей структуре:

- -
1. Млекопитающие
-   1.1 Киты (неявно задаётся элементом h2)
-   1.2 Лесные слоны (явным образом задаётся элементом раздела)
-   1.3 Монгольская песчанка (неявно задаётся элементом h3, который одновременно закрывает предыдущий раздел)
-2. Рептилии (неявно задаётся элементом h2, который одновременно закрывает предыдущий раздел)
-
- -

Эта не та структура, которую можно было бы ожидать, бегло просмотрев теги заголовков. Чтобы разметка стала понятна человеку, а также чтобы степень важности заголовка соответствовала уровню вложенности раздела, рекомендуется использовать наглядные теги для открытия и закрытия разделов. Однако спецификация HTML5 этого не требует. Поэтому, если браузеры отображают структуру документа не так, как ожидалось, проверьте, нет ли в документе разделов, не явно закрытых элементами заголовков.

- -

Исключение из общего правила соответствия степени важности тега уровню вложенности раздела делается для разделов, которые могут использоваться в нескольких документах. Например, раздел может храниться в системе управления контентом и добавляться в документы при их генерировании. В этом случае рекомендуется начинать с {{HTMLElement("h1")}} в качестве главного заголовка многократно используемого раздела. Уровень вложенности многократно используемого раздела будет определяться иерархией разделов документа, в который он добавляется. Теги для явного задания разделов по-прежнему останутся полезными и в этом конкретном случае.

- -

Корни задания разделов

- -

 Корень задания разделов – это элемент HTML, который может иметь собственную структуру, однако входящие в неё разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.

- -

Например:

- -
<section>
-  <h1>Лесные слоны</h1>
-  <section>
-    <h2>Введение</h2>
-    <p>В данном разделе мы поговорим о малоизвестных лесных слонах</p>
-  </section>
-  <section>
-    <h2>Среда обитания</h2>
-    <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят учёные в «<cite>Лесной слон на Борнео</cite>»:</p>
-    <blockquote>
-       <h1>Борнео</h1>
-       <p>Лесной слон живёт на Борнео...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

Данный пример приводит к следующей структуре:

- -
1. Лесные слоны
-   1.1 Введение
-   1.2 Среда обитания
- -

Данная структура не включает внутреннюю структуру элемента {{HTMLElement("blockquote")}}, который, будучи внешней цитатой, является корнем задания разделов и изолирует свою внутреннюю структуру.

- -

Разделы, не входящие в структуру

- -

 HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:

- -
    -
  1. Элемент вспомогательного раздела {{HTMLElement("aside")}} задаёт раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.
    2. -
  2. Элемент навигационного раздела {{HTMLElement("nav")}} задаёт раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.
    3. -
- -

Шапки и подвалы

- -

HTML5 также добавляет два новых элемента, которые могут использоваться для разметки верхнего и нижнего колонтитулов страниц:

- -
    -
  1. Элемент шапки {{HTMLElement("header")}} задаёт шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.
    2. -
  2. Элемент подвала ({{HTMLElement("footer")}}) задаёт нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.
    3. -
- -

Эти элементы не создают новые разделы в структуре, а скорее используются для разметки контента внутри разделов страницы.

- -

Адреса в элементах задания разделов

- -

Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента {{HTMLElement("address")}}, расширенного в HTML5.

- -

Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создаётся не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.

- -

Использование элементов HTML5 в браузерах, не поддерживающих HTML5

- -

Элементы разделов и заголовков должны работать в большинстве браузеров, не поддерживающих HTML5. Хотя они и не поддерживаются, они не требуют специального интерфейса DOM, им требуется лишь особый стиль CSS, поскольку к неизвестным элементам по умолчанию применяется стиль display:inline:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

Конечно, веб-разработчик может применить к ним любой другой стиль, однако следует помнить в браузерах, не поддерживающих HTML5, по умолчанию используется не тот стиль, который требуется для таких элементов. Также обратите внимание на отсутствие в перечне элемента {{HTMLElement("time")}}, поскольку по умолчанию к нему применяется одинаковый стиль как в браузерах, не поддерживающих HTML5, так и в браузерах, совместимых с HTML5.

- -

Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:

- -
<!--[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]-->
- -

Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включённой поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержка скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:

- -
<noscript>
-   <strong>Внимание!</strong>
-   Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
-   Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
-</noscript>
- -

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:

- -
<!--[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]-->
- -

Заключение

- -

Новые семантические элементы, добавленные в HTML5, обеспечивают стандартизацию описания структуры веб-документа. Они облегчают жизнь пользователям с ограниченными возможностями, просты в использовании, могут без особых проблем поддерживаться в старых браузерах и поэтому настоятельно рекомендуются к применению.

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 ---- -

По умолчанию браузер обрабатывает текст в кодировке Юникод (Unicode). При этом, при передаче информации через сеть (network) к браузеру символы кодируются байтами (см. кодирование символов). Стандартом HTML рекомендуется использовать кодировку UTF-8 (which can represent all of Unicode) and regardless of the encoding used requires Web content to declare what encoding was used.

- -

The {{HTMLElement("meta")}} element's {{htmlattrxref("charset", "meta")}} attribute is used to specify the page's character encoding. It must be used within a {{HTMLElement("head")}} block.

- -

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:

- -
<meta charset="utf-8">
-
- -

Details and browser internals

- -

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.

- -

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.

- -

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.

- -

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.

- -

Finding canonical encoding names

- -

The text below refers to canonical names of encodings. The canonical names are the values to the right of the equals sign in unixcharset.properties.

- -

Specifying the fallback encoding

- -

As of Firefox 28, this section is obsolete, since the preference intl.charset.default no longer exists. The mapping from locales onto fallback encodings is now built into Gecko itself.

- -

The fallback encoding is specified by the preference intl.charset.default in intl.properties. 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!

- -

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.

- -

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, do not set the fallback encoding to UTF-8 for any newly-introduced localization. Note that Firefox no longer sends the Accept-Charset HTTP header, so there is no need to consider what gets advertised in Accept-Charset when setting the fallback encoding.

- -

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 Encoding Standard.

- -

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 test page. (Be sure to use a browser installation that has its settings left to the defaults when investigating!)

- -

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.)

- -

When in doubt, use windows-1252 as the fallback encoding.

- -

Specifying the heuristic detection mode

- -

The heuristic detection mode is specified by the preference intl.charset.detector in intl.properties. The setting must be left blank for all locales other than Russian, Ukrainian and Japanese. Do not under any circumstances specify the "universal" detector. It is not actually universal despite its name!

- -

Exception for minority languages

- -

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.

- -

Setting some encodings to be more easily selectable from the character encoding menu

- -

The preference intl.charsetmenu.browser.static in intl.properties 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.

diff --git a/files/ru/orphaned/web/html/element/element/index.html b/files/ru/orphaned/web/html/element/element/index.html deleted file mode 100644 index aab57c9a94..0000000000 --- a/files/ru/orphaned/web/html/element/element/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: -slug: orphaned/Web/HTML/Element/element -translation_of: Web/HTML/Element/element -original_slug: Web/HTML/Element/element ---- -

{{obsolete_header}}

- -
-

Примечание: Этот элемент удалён из спецификации. Смотри здесь больше дополнительной информации от редактора спецификации.

-
- -

Краткая информация

- -

HTML <element> element используется для определения новых пользовательских элементов DOM.

- - - - - - - - - - - - - - - - - - - - - - - - -
Категория контентаПрозрачный контент.
Разрешённый контент???
Недопустимые теги{{no_tag_omission}}
Разрешённые родительские элементы???
DOM интерфейс{{domxref("HTMLElement")}}
- -

Атрибуты

- -

Этот элемент включает глобальные атрибуты.

- -

Примеры

- -

Текст здесь.

- -
Больше текста здесь.
-
- -

Характеристики

- -

Элемент <element> ранее был в черновике спецификации Настраиваемых Элементов, но был удалён.

- -

Совместимость с браузером

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Смотрите также

- - - -
{{HTMLRef}}
diff --git a/files/ru/orphaned/web/html/global_attributes/dropzone/index.html b/files/ru/orphaned/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 354ff7e37f..0000000000 --- a/files/ru/orphaned/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: dropzone -slug: orphaned/Web/HTML/Global_attributes/dropzone -translation_of: Web/HTML/Global_attributes/dropzone -original_slug: Web/HTML/Global_attributes/dropzone ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

Глобальный атрибут dropzone является перечисляемым атрибутом, указывающем, какие типы содержимого могут быть опущены в элементе, используя {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. Может иметь следующие значения:

- - - -

Спецификации

- - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Снимок {{SpecName('HTML WHATWG')}}, начальное определение
- -

Поддержка браузерами

-

{{Compat("html.global_attributes.dropzone")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/html/preloading_content/index.html b/files/ru/orphaned/web/html/preloading_content/index.html deleted file mode 100644 index b5acc487a6..0000000000 --- a/files/ru/orphaned/web/html/preloading_content/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Предзагрузчик контента - rel="preload" -slug: orphaned/Web/HTML/Preloading_content -translation_of: Web/HTML/Preloading_content -original_slug: Web/HTML/Preloading_content ---- -

Значение preload атрибута {{htmlattrxref("rel", "link")}} в элементе {{htmlelement("link")}} позволяет вам запросить данные через {{htmlelement("head")}} вашего HTML, указав необходимые вашей странице ресурсы ещё в начале её жизненного цикла, - до того, как сработает основной механизм отрисовки браузера. Это гарантирует, что предзагрузчик нужных ресурсов с меньшей вероятностью заблокирует отрисовку страницы, тем самым улучшая её производительность.

- -

В этой статье приведено основное руководство про работе с <link rel="preload">.

- -

Основы

- -

Чаще всего вы используете простой <link> элемент, когда загружаете CSS файлы со стилем вашей страницы:

- -
<link rel="stylesheet" href="styles/main.css">
- -

Однако, здесь мы будем использовать значение preload для атрибута rel, которое превратит тег <link> в предзагрузчик для любого ресурса, который мы пожелаем. Для этого необходимо будет указать:

- - - -

Простой пример может выглядеть так: (смотрите наш JS и CSS пример из источника, и живой пример):

- -
<head>
-  <meta charset="utf-8">
-  <title>Пример пред-загрузки JS и CSS</title>
-
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
-
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <h1>прыгающие шарики</h1>
-  <canvas></canvas>
-
-  <script src="main.js"></script>
-</body>
- -

Мы сделали предзагрузку наших файлов CSS и JavaScript, чтобы они стали доступны для рендеринга страницы сразу же, как это потребуется. Этот пример отчасти банален, поскольку браузер, вероятнее всего, обнаружит элементы <link rel="stylesheet"> и <script> в одном чанке (блоке) с основным HTML, но преимущества более явно проявятся, если далее по странице будут обнаружены более объёмные ресурсы. Это могут быть:

- - - -

preload имеет и другие преимущества. Использование атрибута as для указания типа содержимого пред-загрузки позволит браузеру:

- - - -

Какие типы контента могут быть предзагружены?

- -

Разного типа контент можно предзагрузить. Вот основные атрибуты значения as:

- - - -
-

Примечание: вы можете прочитать немного больше об этих значениях и веб-функциях, которыми они будут пользоваться, в спецификации Предзагрузка — расширения элементов ссылок. Также обратите внимание, что полный список значений атрибут as может принимать в зависимости от определений в спецификации Fetch — запрос направления.

-
- -

Включение MIME-типов

- -

Элементы <link> могут принимать атрибут {{htmlattrxref("type", "link")}}, содержащий MIME-тип ресурса целевого элемента. Это особенно полезно при пред-загрузке ресурсов. Браузер использует значение атрибута type и начнёт его загрузку, если поддержка ресурса определена, иначе проигнорирует его.

- -

См. полный исходный код, (а также пример живой версии видео).

- -
<head>
-  <meta charset="utf-8">
-  <title>Пример пред-загрузки видео</title>
-
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
-</head>
-<body>
-  <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p> Ваш браузер не поддерживает видео в формате HTML5.
-        Взамен - <a href="sintel-short.mp4"> ссылка на видео </a>.</p>
-  </video>
-</body>
- -

В этом случае браузеры, поддерживающие MP4, будут пред-загружать и использовать MP4, что, как мы надеемся, сделает видеоплеер плавное/отзывчивее для пользователей. Браузеры, не поддерживающие MP4, могут загружать версию WebM, при этом не получая преимуществ пред-загрузки. Это показывает, как пред-загрузка контента может сочетаться с философией прогрессивного улучшения.

- -

Выборки из разных источников

- -

Если настройки CORS ваших сайтов правильные, вы можете успешно пред-загрузить ресурсы разных источников, установив атрибут {{htmlattrxref("crossorigin", "link")}} в элементе <link>.

- -

Один из интересных случаев, когда это применимо, даже если выборка не из разных источников, - это файлы шрифтов. По разным причинам они должны быть получены с использованием анонимного режима CORS (см. Требования к выборке шрифтов, если вас заинтересуют все подробности).

- -

Используем этот случай в качестве примера, во-первых, загрузка шрифтов - действительно хороший вариант использования пред-загрузки, а во-вторых, - это проще, чем настраивать пример запроса с перекрёстным источником. Полный пример исходного кода есть на GitHub (также смотрите его вживую):

- -
<head>
-  <meta charset="utf-8">
-  <title>Примеры веб-шрифтов</title>
-
-  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
-
-  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
-
-  <link href="style.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  ...
-</body>
- -

Легко узреть, что мы не только предоставляем подсказки типа MIME в атрибутах типа, но также предоставляем атрибут crossorigin для решения проблемы CORS.

- -

Including media

- -

One nice feature of <link> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

- -

Давайте посмотрим на очень простой пример (см. его на GitHub - исходный код и живой пример):

- -
<head>
-  <meta charset="utf-8">
-  <title>Пример адаптивной предзагрузки</title>
-
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
-</head>
-<body>
-  <header>
-    <h1>Мой сайт</h1>
-  </header>
-
-  <script>
-    var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
-
-    if(mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
-    } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
-    }
-  </script>
-</body>
- -

Вы видите, что мы включаем media-атрибуты в наши элементы <link> так, чтобы узкое изображение пред-загружалось на устройство пользователя с узким экраном, а более широкое - на устройство с более широким экраном. Чтобы изображение к заголовку было в зависимости от результата - мы используем {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (подробности см. в разделе Тест медиавыражений).

- -

Это увеличивает вероятность того, что шрифт будет доступен к моменту завершения рендеринга страницы, что сокращает количество проблем с FOUT (вспышка нестилизованного текста).

- -

Обратите внимание, что это не должно ограничиваться изображениями или даже файлами одного типа - думайте масштабно! Возможно, вы могли бы предварительно загрузить, а затем отобразить простую диаграмму SVG, если пользователь находится на узком экране, где пропускная способность и ЦП потенциально более ограничены, или предзагрузить сложный фрагмент JavaScript, а затем использовать его для рендеринга интерактивной 3D-модели, если ресурсы пользователя более многочисленны.

- -

Скрипты и предзагрузки

- -

Ещё одна полезная вещь в этих предзагрузках, это то, что вы можете выполнять их полностью со скриптами, если необходимо. Например, мы сейчас создаём  экземпляр {{domxref("HTMLLinkElement")}}, затем включим её в DOM:

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

Подразумевается, что браузер загрузит JavaScript файл, но, пока не будет его применять.

- -

Чтобы выполнить его, вы можете использовать следующую конструкцию:

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

Это полезно, когда вы хотите загрузить скрипт в кеш, но применять его только тогда, когда это необходимо.

- -

Другие механизмы предзагрузки ресурсов

- -

Существуют и другие функции предварительной загрузки, но ни одна из них не подходит так, как <link rel="preload">:

- - - -

Характеристики

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Further details of preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Definition of rel=preload.
- -

Совместимость с браузером

-

{{Compat("html.elements.link.rel.preload")}}

- -

Смотрите также

- - - -

{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}

diff --git "a/files/ru/orphaned/web/javascript/guide/\320\276\320\261_\321\215\321\202\320\276\320\274_\321\200\321\203\320\272\320\276\320\262\320\276\320\264\321\201\321\202\320\262\320\265/index.html" "b/files/ru/orphaned/web/javascript/guide/\320\276\320\261_\321\215\321\202\320\276\320\274_\321\200\321\203\320\272\320\276\320\262\320\276\320\264\321\201\321\202\320\262\320\265/index.html" deleted file mode 100644 index 68ff635c0b..0000000000 --- "a/files/ru/orphaned/web/javascript/guide/\320\276\320\261_\321\215\321\202\320\276\320\274_\321\200\321\203\320\272\320\276\320\262\320\276\320\264\321\201\321\202\320\262\320\265/index.html" +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Об этом руководстве -slug: orphaned/Web/JavaScript/Guide/Об_этом_руководстве -original_slug: Web/JavaScript/Guide/Об_этом_руководстве ---- -

 

-

JavaScript является кросс-платформенным, объектно-ориентированный язык сценариев. Это руководство объясняет все, что нужно знать об использовании JavaScript.

-

Новые возможности в версиях JavaScript

-
/* Note: To add a link to new JavaScript version description
-add version number to versionList variable below. The page linked to
-must reside in /en/JavaScript/New_in_JavaScript/N, where N is version number. */
-
-var versionList = ["1.5", "1.6", "1.7", "1.8", "1.8.1", "1.8.5"];
-var s = "";
-<ul>
-  foreach (var i in versionList){
-    let s = "/en/JavaScript/New_in_JavaScript/" .. i;
-    <li>web.link(s, wiki.getPage(s).title)</li>;
-  }
-</ul>;
-
-

То, что вы должны уже знать

-

This guide assumes you have the following basic background:

- -

Некоторый опыт программирования на языках, таких как C или Visual Basic, полезен, но не обязателен.

-

Версии JavaScript

- -
Таблица №1 версии JavaScript и веб-браузера Navigator
JavaScript version Navigator version
JavaScript 1.0 Navigator 2.0
JavaScript 1.1 Navigator 3.0
JavaScript 1.2 Navigator 4.0-4.05
JavaScript 1.3 Navigator 4.06-4.7x
JavaScript 1.4  
JavaScript 1.5 Navigator 6.0
Mozilla (браузер с открытым исходным кодом)
JavaScript 1.6 Firefox 1.5, other Mozilla 1.8-based products
JavaScript 1.7 Firefox 2, other Mozilla 1.8.1-based products
JavaScript 1.8 Firefox 3, other Gecko 1.9-based products
-

 

-
Каждая версия Netscape Enterprise Server, также поддерживает различные версии JavaScript. Чтобы помочь вам писать сценарии, которые совместимы с несколькими версиями Enterprise Server, это руководство использует аббревиатуру для обозначения версии сервера, в котором каждая функция была реализована.
-
- -
Таблица №2 Аббревиатуры в версиях Netscape Enterprise Server
Аббревиатура Версия Server Enterprise
NES 2.0 Netscape Enterprise Server 2.0
NES 3.0 Netscape Enterprise Server 3.0
-

Где найти информацию о JavaScript

-

JavaScript документация включает в себя следующие книги:

- -

Если вы новичок в JavaScript, начните с руководства JavaScript. Если у вас есть твёрдое понимание основы, вы можете использовать Справочник по JavaScript чтобы получить более подробную информацию на отдельных объектах и ​​операторах.

-

Советы для изучения JavaScript

-

Начало работы с JavaScript очень просто: все, что вам нужно, это современный веб-браузер. Это руководство включает в себя некоторые функции JavaScript, которые только в настоящее время доступна в последней версии Firefox (и других браузеров с движком Gecko), поэтому рекомендуется использование самых последних версий Firefox.

-

Интерактивный интерпретатор

-

Диалоговый JavaScript незамедлительно - неоценимая помощь изучению языка, так как это предоставляет вам возможность пробовать вещи в интерактивном режиме без необходимости сохранить файл и обновить страницу. Ошибочная Консоль Firefox, доступная через меню Инструменты, обеспечивает простой путь пробовать диалоговый JavaScript: Только вводят линию кода и щёлкают кнопку "Evaluate".

-

Image:ErrorConsole.png

-

Firebug

-

Более передовой диалоговый незамедлительно - доступный использующий Firebug, дополнение к Firefox. Выражения, которые вы печатаете, интерпретируются как объекты и связанные с другими частями Firebug. Например, вы можете добавить 5 плюс 5, изменять регистр строки, get a clickable link to the document, or get a link to an element:

-

-

Использование стрелки на правом нижнем углу даёт команду редактор для многострочного сценариев.

-

Firebug also provides an advanced DOM inspector, a JavaScript debugger, a profiling tool and various other utilities. JavaScript code running in a Web page can call, console.log(), a function that prints its arguments to the Firebug console.

-

Many of the examples in this guide use alert() to show messages as they execute. If you have Firebug installed you can use console.log() in place of alert() when running these examples.

-

Document conventions

-

JavaScript applications run on many operating systems; the information in this book applies to all versions. File and directory paths are given in Windows format (with backslashes separating directory names). For Unix versions, the directory paths are the same, except that you use slashes instead of backslashes to separate directories.

-

This guide uses uniform resource locators (URLs) of the following form:

-

http://server.domain/path/file.html

-

In these URLs, server represents the name of the server on which you run your application, such as research1 or www; domain represents your Internet domain name, such as netscape.com or uiuc.edu; path represents the directory structure on the server; and file.html represents an individual file name. In general, items in italics in URLs are placeholders and items in normal monospace font are literals. If your server has Secure Sockets Layer (SSL) enabled, you would use https instead of http in the URL.

-

This guide uses the following font conventions:

- -
autoPreviousNext("JSGChapters");
-wiki.languages({
-  "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/關於",
-  "es": "es/Gu\u00eda_JavaScript_1.5/Acerca_de_esta_gu\u00eda",
-  "fr": "fr/Guide_JavaScript_1.5/\u00c0_propos",
-  "ja": "ja/Core_JavaScript_1.5_Guide/About",
-  "ko": "ko/Core_JavaScript_1.5_Guide/About",
-  "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/O_tym_przewodniku",
-  "zh-cn": "cn/Core_JavaScript_1.5_Guide/\u5173\u4e8e"
-})
-
diff --git a/files/ru/orphaned/web/javascript/reference/errors/typed_array_invalid_arguments/index.html b/files/ru/orphaned/web/javascript/reference/errors/typed_array_invalid_arguments/index.html deleted file mode 100644 index ab6bcf3748..0000000000 --- a/files/ru/orphaned/web/javascript/reference/errors/typed_array_invalid_arguments/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: 'TypeError: invalid arguments' -slug: orphaned/Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments -tags: - - Error - - Errors - - JavaScript - - TypeError - - Ошибки -translation_of: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments -original_slug: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments ---- -
{{jsSidebar("Errors")}}
- -

Сообщение

- -
TypeError: invalid arguments (Firefox)
- -

Тип ошибки

- -

{{jsxref("TypeError")}}

- -

Что не так?

- -

Конструкторы типизированных массивов требуют либо

- - - -

чтобы создать новый типизированный массив. Другие аргументы конструктора не создают допустимый типизированный массив.

- -

Примеры

- -

Типизированные массивы, например {{jsxref("Uint8Array")}}, не могут быть построены из строки. На самом деле строки вообще не могут быть в типизированных массивах.

- -
var ta = new Uint8Array("nope");
-// TypeError: invalid arguments
-
- -

Различные способы создания допустимого {{jsxref("Uint8Array")}}:

- -
 // From a length
-var uint8 = new Uint8Array(2);
-uint8[0] = 42;
-console.log(uint8[0]); // 42
-console.log(uint8.length); // 2
-console.log(uint8.BYTES_PER_ELEMENT); // 1
-
-// From an array
-var arr = new Uint8Array([21,31]);
-console.log(arr[1]); // 31
-
-// From another TypedArray
-var x = new Uint8Array([21, 31]);
-var y = new Uint8Array(x);
-console.log(y[0]); // 21
-
-// From an ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Uint8Array(buffer, 1, 4);
-
-// From an iterable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uint8 = new Uint8Array(iterable);
-// Uint8Array[1, 2, 3]
-
- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index 01e209e17e..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Array.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array - - JavaScript - - Property - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -
{{JSRef("Global_Objects", "Array")}}
- -

Сводка

- -

Свойство Array.prototype представляет прототип для конструктора {{jsxref("Global_Objects/Array", "Array", "массива")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Описание

- -

Экземпляры Array наследуются от Array.prototype. Как и с остальными конструкторами, вы можете изменять прототип конструктора объекта для применения изменений ко всем экземплярам класса Array.

- -

Небольшой факт: Array.prototype сам является экземпляром Array:

- -
Array.isArray(Array.prototype); // true
- -

Свойства

- -
-
Array.prototype.constructor
-
Определяет функцию, создающую прототип объекта.
-
{{jsxref("Array.prototype.length")}}
-
Отражает количество элементов в массиве.
-
- -

Методы

- -

Методы изменения

- -

Эти методы изменяют массив:

- -
-
{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}
-
Копирует последовательность элементов массива внутри массива.
-
{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}
-
Заполняет все элементы массива от начального индекса до конечного индекса указанным значением.
-
{{jsxref("Array.prototype.pop()")}}
-
Удаляет последний элемент из массива и возвращает его.
-
{{jsxref("Array.prototype.push()")}}
-
Добавляет один или более элементов в конец массива и возвращает новую длину массива.
-
{{jsxref("Array.prototype.reverse()")}}
-
Переворачивает порядок элементов в массиве — первый элемент становится последним, а последний — первым.
-
{{jsxref("Array.prototype.shift()")}}
-
Удаляет первый элемент из массива и возвращает его.
-
{{jsxref("Array.prototype.sort()")}}
-
Сортирует элементы массива на месте и возвращает отсортированный массив.
-
{{jsxref("Array.prototype.splice()")}}
-
Добавляет и/или удаляет элементы из массива.
-
{{jsxref("Array.prototype.unshift()")}}
-
Добавляет один или более элементов в начало массива и возвращает новую длину массива.
-
- -

Методы доступа

- -

Эти методы не изменяют массив, а просто возвращают его в ином представлении.

- -
-
{{jsxref("Array.prototype.concat()")}}
-
Возвращает новый массив, состоящий из данного массива, соединённого с другим массивом и/или значением (списком массивов/значений).
-
{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}
-
Определяет, содержится ли в массиве указанный элемент, возвращая, соответственно, true или false.
-
{{jsxref("Array.prototype.join()")}}
-
Объединяет все элементы массива в строку.
-
{{jsxref("Array.prototype.slice()")}}
-
Извлекает диапазон значений и возвращает его в виде нового массива.
-
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
-
Возвращает литеральное представление указанного массива; вы можете использовать это значение для создания нового массива. Переопределяет метод {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Array.prototype.toString()")}}
-
Возвращает строковое представление массива и его элементов. Переопределяет метод {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Array.prototype.toLocaleString()")}}
-
Возвращает локализованное строковое представление массива и его элементов. Переопределяет метод {{jsxref("Object.prototype.toLocaleString()")}}.
-
{{jsxref("Array.prototype.indexOf()")}}
-
Возвращает первый (наименьший) индекс элемента внутри массива, равный указанному значению; или -1, если значение не найдено.
-
{{jsxref("Array.prototype.lastIndexOf()")}}
-
Возвращает последний (наибольший) индекс элемента внутри массива, равный указанному значению; или -1, если значение не найдено.
-
- -

Методы обхода

- -

Некоторые методы принимают в качестве аргументов функции, вызываемые при обработке массива. Когда вызываются эти методы, достаётся длина массива, и любой элемент, добавленный свыше этой длины изнутри колбэк-функции не посещается. Другие изменения в массиве (установка значения или удаление элемента) могут повлиять на результаты операции, если изменённый элемент метод посещает после изменения. Хотя специфическое поведение этих методов в таких случаях хорошо определено, вы не должны на него полагаться, чтобы не запутывать других людей, читающих ваш код. Если вам нужно изменить массив, лучше вместо этого скопируйте его в новый массив.

- -
-
{{jsxref("Array.prototype.forEach()")}}
-
Вызывает функцию для каждого элемента в массиве.
-
{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}
-
Возвращает новый объект итератора массива Array Iterator, содержащий пары ключ / значение для каждого индекса в массиве.
-
{{jsxref("Array.prototype.every()")}}
-
Возвращает true, если каждый элемент в массиве удовлетворяет условию проверяющей функции.
-
{{jsxref("Array.prototype.some()")}}
-
Возвращает true, если хотя бы один элемент в массиве удовлетворяет условию проверяющей функции.
-
{{jsxref("Array.prototype.filter()")}}
-
Создаёт новый массив со всеми элементами этого массива, для которых функция фильтрации возвращает true.
-
{{jsxref("Array.prototype.find()")}} {{experimental_inline}}
-
Возвращает искомое значение в массиве, если элемент в массиве удовлетворяет условию проверяющей функции или {{jsxref("Global_Objects/undefined", "undefined")}}, если такое значение не найдено.
-
{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}
-
Возвращает искомый индекс в массиве, если элемент в массиве удовлетворяет условию проверяющей функции или -1, если такое значение не найдено.
-
{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}
-
Возвращает новый итератор массива, содержащий ключи каждого индекса в массиве.
-
{{jsxref("Array.prototype.map()")}}
-
Создаёт новый массив с результатами вызова указанной функции на каждом элементе данного массива.
-
{{jsxref("Array.prototype.reduce()")}}
-
Применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению.
-
{{jsxref("Array.prototype.reduceRight()")}}
-
Применяет функцию к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению.
-
{{jsxref("Array.prototype.values()")}} {{experimental_inline}}
-
Возвращает новый объект итератора массива Array Iterator, содержащий значения для каждого индекса в массиве.
-
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}
-
Возвращает новый объект итератора массива Array Iterator, содержащий значения для каждого индекса в массиве.
-
- -

Общие методы

- -

Многие методы JavaScript-массива спроектированы таким образом, чтобы иметь возможность применяться ко всем объектам, «выглядящим похоже» на массивы. То есть, они могут использоваться на любом объекте, имеющим свойство length и к элементам которого можно получить доступ через числовые имена свойств (как при индексации: array[5]). TODO: предоставить примеры с Array.prototype.forEach.call и добавлением методов к объекту, как сделано для {{jsxref("Global_Objects/JavaArray", "JavaArray")}} или {{jsxref("Global_Objects/String", "String")}}. Некоторые методы, например {{jsxref("Array.join", "join")}}, только читают свойство length и числовые свойства объекта, на котором они вызываются. Другие, вроде {{jsxref("Array.reverse", "reverse")}} требуют, чтобы числовые свойства и свойство length объекта были изменяемыми; эти методы не могут вызываться на объектах вроде {{jsxref("Global_Objects/String", "String")}}, которые не позволяют установку своего свойства length или синтезирование числовых свойств.

- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
ECMAScript 1-е издание.СтандартИзначальное определение.
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}} 
- -

Совместимость с браузерами

- -

 

- -

{{Compat("javascript.builtins.Array.prototype")}}

- -

 

- -
 
- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html deleted file mode 100644 index 5a3e01d354..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: AsyncFunction.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype ---- -
{{JSRef}}
- -

Свойство AsyncFunction.prototype представляет прототип объекта  {{jsxref("AsyncFunction")}} .

- -

Описание

- -

Объект {{jsxref("AsyncFunction")}} наследуется от AsyncFunction.prototype. AsyncFunction.prototype не может быть модифицирован.

- -

Свойства

- -
-
AsyncFunction.constructor
-
Начальное значение {{jsxref("AsyncFunction")}}.
-
AsyncFunction.prototype[@@toStringTag]
-
Возвращает "AsyncFunction".
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}{{Spec2('ESDraft')}}Initial definition in ES2017.
- -

Browser compatibility

- -
- - -

{{Compat("javascript.builtins.AsyncFunction.prototype")}}

-
- -

See also

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/map/@@species/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/map/@@species/index.html deleted file mode 100644 index fb101362a7..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/map/@@species/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: get Map[@@species] -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@species -translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@species -original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@species ---- -
{{JSRef}}
- -

Акцессор свойства Map[@@species] возвращает Map конструктор.

- -

Синтаксис

- -
Map[Symbol.species]
-
- -

Описание

- -

Акцессор свойства species, возвращает конструктор по умолчанию для Map объектов. Конструкторы подклассов могут переопределить его, чтобы изменить поведение конструктора.

- -

Примеры

- -

Свойство species возвращает конструктор по умолчанию, который является конструктором Map для Map объектов:

- -
Map[Symbol.species]; // функция Map()
- -

В производном объекте коллекции (например, ваша пользовательская карта MyMap), MyMap species является MyMap конструктором. Однако, вы можете захотеть переопределить это, что бы вернуть родительский Map в методах вашего производного класса:

- -
class MyMap extends Map {
-  // Перезаписываем MyMap species на родительский Map конструктор
-  static get [Symbol.species]() { return Map; }
-}
- -

Спецификации

- - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('ES2015', '#sec-get-map-@@species', 'get Map [ @@species ]')}}{{Spec2('ES2015')}}Исходное определение.
{{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}}{{Spec2('ESDraft')}} 
- -

Поддержка браузерами

- -

{{Compat}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/map/clear/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/map/clear/index.html deleted file mode 100644 index 5d9c518a05..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/map/clear/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Map.prototype.clear() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -tags: - - ECMAScript6 - - JavaScript - - Map - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear -original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear ---- -
{{JSRef}}
- -

Метод clear() удаляет все элементы из объекта Map.

- -

Синтаксис

- -
myMap.clear();
- -

Возвращаемое значение

- -

{{jsxref("undefined")}}.

- -

Примеры

- -

Использование метода clear

- -
var myMap = new Map();
-myMap.set('bar', 'baz');
-myMap.set(1, 'foo');
-
-myMap.size;       // 2
-myMap.has('bar'); // true
-
-myMap.clear();
-
-myMap.size;       // 0
-myMap.has('bar')  // false
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ES2015')}}Изначальное определение.
{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ESDraft')}} 
- -

Совместимость с браузерами

- -

{{Compat}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/map/delete/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/map/delete/index.html deleted file mode 100644 index 7f52de0c89..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/map/delete/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Map.prototype.delete() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Ссылка - - метод - - прототип -translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete -original_slug: Web/JavaScript/Reference/Global_Objects/Map/delete ---- -
{{JSRef}}
- -

Метод delete() удаляет указанный элемент из объекта {{jsxref("Map")}}.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}
- - - -

Синтаксис

- -
myMap.delete(key);
- -

Параметры

- -
-
key
-
Ключ элемента удаляемого из объекта {{jsxref("Map")}}
-
- -

Возвращаемое значение

- -

true если элемент существовал в {{jsxref("Map")}} и он был удалён или false если элемента с таким ключом не было.

- -

Примеры

- -

Использование метода delete

- -
var myMap = new Map();
-myMap.set('bar', 'foo');
-
-myMap.delete("bar"); // Возвращает true. Успешно удалён.
-myMap.has("bar");    // Возвращает false. Элемента "bar" больше нет.
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ES2015')}}Изначальное определение.
{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ESDraft')}}
- -

Совместимость с браузерами

-

{{Compat("javascript.builtins.Map.delete")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/map/entries/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/map/entries/index.html deleted file mode 100644 index c1d3faf3d3..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/map/entries/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Map.prototype.entries() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries -original_slug: Web/JavaScript/Reference/Global_Objects/Map/entries ---- -
{{JSRef}}
- -

Метод entries() возвращает новый Итератор, содержащий пары [key, value] для каждого элемента объекта {{jsxref("Map")}} в том порядке, в котором они были заведены.

- -

Исходный код всех примеров для  {{jsxref("Map")}} сохранён на GitHub https://github.com/mdn/interactive-examples/tree/master/live-examples/js-examples/map.

- -

Вы можете внести свой вклад, для этого: 

- -

1. Клонируйте https://github.com/mdn/interactive-examples

- -

2. Ознакомьтесь с руководством https://github.com/mdn/interactive-examples/blob/master/CONTRIBUTING.md

- -

3. Напишите свой пример и отправьте нам запрос на извлечение.

- -

Синтаксис

- -
myMap.entries()
- -

Возвращаемое значение

- -

Новый итератор объекта {{jsxref("Map")}}.

- -

Примеры

- -

Использование entries()

- -
var myMap = new Map();
-myMap.set('0', 'foo');
-myMap.set(1, 'bar');
-myMap.set({}, 'baz');
-
-var mapIter = myMap.entries();
-
-console.log(mapIter.next().value); // ["0", "foo"]
-console.log(mapIter.next().value); // [1, "bar"]
-console.log(mapIter.next().value); // [Object, "baz"]
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ESDraft')}}
- -

Поддержка браузерами

- -

{{Compat}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/map/foreach/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/map/foreach/index.html deleted file mode 100644 index b2f99f9f47..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/map/foreach/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Map.prototype.forEach() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach -original_slug: Web/JavaScript/Reference/Global_Objects/Map/forEach ---- -
{{JSRef}}
- -

Метод forEach() выполняет переданную функцию единожды для каждой пары ключ/значение объекта Map в порядке их вставки.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}
- -

Синтаксис

- -
myMap.forEach(callback[, thisArg])
- -

Параметры

- -
-
callback
-
Функция, которая будет выполнена для каждого элемента.
-
thisArg
-
Значение, которое будет использовано в качестве текущего при выполнении callback.
-
- -

Возвращаемое значение

- -

{{jsxref("undefined")}}.

- -

Описание

- -

Метод forEach выполняет переданный ему callback по разу для каждого фактически существующего ключа в наборе. Callback не вызывается для ключей, которые были удалены. Однако, он выполняется для элементов со значением undefined.

- -

При вызове callback используются три аргумента:

- - - -

Если аргумент thisArg указан для forEach, то при вызове callback он будет передан в качестве значения this.  В противном случае для this будет передано undefined. Значение this, в конечном итоге наблюдаемое в функции callback, определяется в соответствии c обычными правилами определения this в функции.

- -

Каждое значение посещается один раз, за исключением случая, когда оно было удалено и добавлено снова до завершения forEach. callback не вызывается для значений, удалённых до их посещения. Новые значения будут посещены, если они добавлены до завершения forEach.

- -

forEach исполняет функцию callback один раз для каждого элемента в объекте Map; не возвращает значение.

- -

Примеры

- -

Вывод содержимого объекта Map

- -

Следующий код выводит в консоль строку для каждого элемента в объекте Map:

- -
function logMapElements(value, key, map) {
-    console.log("m[" + key + "] = " + value);
-}
-new Map([["foo", 3], ["bar", {}], ["baz", undefined]]).forEach(logMapElements);
-// logs:
-// "m[foo] = 3"
-// "m[bar] = [object Object]"
-// "m[baz] = undefined"
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('ES6', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ESDraft')}} 
- -

Совместимость с браузерами

- -

{{Compat("javascript.builtins.Map.forEach")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/map/get/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/map/get/index.html deleted file mode 100644 index 8f91194549..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/map/get/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Map.prototype.get() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -translation_of: Web/JavaScript/Reference/Global_Objects/Map/get -original_slug: Web/JavaScript/Reference/Global_Objects/Map/get ---- -
{{JSRef}}
- -

Метод get() возвращает указанный элемент объекта {{jsxref("Map")}}.

- -

Синтаксис

- -
myMap.get(key);
- -

Параметры

- -
-
key
-
Обязательный. Ключ элемента объекта {{jsxref("Map")}}.
-
- -

Возвращаемое значение

- -

Возвращает элемент связанный с указанным ключом или undefined, если ключ не был найден в объекте {{jsxref("Map")}}​​​​.

- -

Примеры

- -

Использование метода get()

- -
var myMap = new Map();
-myMap.set('bar', 'foo');
-
-myMap.get('bar');  // Вернёт "foo".
-myMap.get('baz');  // Вернёт undefined.
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ESDraft')}}
- -

Поддержка браузерами

- -

{{Compat("javascript.builtins.Map.get")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/map/has/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/map/has/index.html deleted file mode 100644 index ce4cae29b7..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/map/has/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Map.prototype.has() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -translation_of: Web/JavaScript/Reference/Global_Objects/Map/has -original_slug: Web/JavaScript/Reference/Global_Objects/Map/has ---- -
{{JSRef}}
- -

Метод has() возвращает тип Boolean, указывающий существует ли элемент с указанным ключом или нет.

- -

Синтаксис

- -
myMap.has(key);
- -

Параметры

- -
-
key
-
Обязательный параметр. Ключ элемента для проверки существования в объекте Map.
-
- -

Возвращаемое значение

- -
-
Boolean
-
Возвращает true, если элемент с указанным ключом существует в объекте Map; в противном случае возвращает false.
-
- -

Примеры

- -

Использование метода has

- -
var myMap = new Map();
-myMap.set('bar', "foo");
-
-myMap.has('bar');  // возвращает true
-myMap.has('baz');  // возвращает false
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}{{Spec2('ES2015')}}Первоначальное определение.
{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}{{Spec2('ESDraft')}} 
- -

Совместимость с браузерами

- -

{{Compat}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/map/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index 4ea24c2ad6..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: Map -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map -tags: - - ECMAScript 2015 - - JavaScript - - Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map ---- -
{{JSRef}}
- -

Объект Map содержит пары ключ-значение и сохраняет порядок вставки. Любое значение (как объекты, так и {{Glossary("Primitive", "примитивы")}}) могут быть использованы в качестве ключей.

- -

Синтаксис

- -
new Map([iterable])
- -

Параметры

- -
-
iterable
-
Массив или любой другой итерируемый объект чьими элементами являются пары ключ-значение (массивы из двух элементов, например [[ 1, 'one' ],[ 2, 'two' ]]). Все пары ключ-значение будут добавлены в новый экземпляр Map; null расценивается как undefined.
-
- -

Описание

- -

Объект Map итерируется в порядке вставки его элементов — цикл {{jsxref("Statements/for...of", "for...of")}} будет возвращать массив [key, value] на каждой итерации.

- -

Key equality

- -

Сравнение ключей основано на алгоритме "{{Glossary("SameValueZero", "SameValueZero")}}": NaN равно NaN (несмотря на то, что NaN !== NaN), все другие значения рассматриваются равными исходя из семантики оператора строгого равенства ===. В текущей спецификации ECMAScript -0 и +0 принимаются равными, но в ранних версиях обсуждения это было не так (см. "Value equality for -0 and 0" в таблице совместимости с браузерами).

- -

Сравнение Объектов и Map

- -

Объекты похожи на Map в том, что оба позволяют устанавливать значения по ключам, получать эти значения, удалять ключи и проверять их наличие. В связи с этим (и потому, что не было встроенных альтернатив), {{jsxref("Object", "Объекты")}} исторически использовались как Map. Однако, у них есть ряд отличий, который даёт преимущества Map в ряде случаев:

- - - -

Свойства

- -
-
Map.length
-
Значение свойства length всегда равно 0.
-
Чтобы узнать количество элементов в Map - используйте {{jsxref("Map.prototype.size")}}.
-
{{jsxref("Map.@@species", "get Map[@@species]")}}
-
Функция-конструктор которая используется для создания производных объектов.
-
{{jsxref("Map.prototype")}}
-
Представляет прототип конструктора Map. Позволяет добавлять свойства всем объектам типа Map.
-
- -

Экземпляры Map

- -

Все экземпляры Map наследуются от {{jsxref("Map.prototype")}}.

- -

Свойства

- -
-
Map.prototype.constructor
-
Возвращает функцию, которая создала прототип экземпляра. Это функция Map по умолчанию.
-
Map.prototype.size
-
Возвращает количество пар ключ/значение в объекте Map.
-
- -

Методы

- -
-
Map.prototype.clear()
-
Удаляет все пары ключ / значение из объекта Map.
-
Map.prototype.delete(key)
-
Возвращает true, если элемент в объекте Map существовал и был удалён, или false, если элемент не существует. Map.prototype.has(key) вернёт false позже.
-
Map.prototype.entries()
-
Возвращает новый объект Iterator который содержит массив [key, value] для каждого элемента в объекте Map в порядке вставки.
-
Map.prototype.forEach(callbackFn[, thisArg])
-
Вызывает callbackFn один раз для каждой пары ключ-значение, присутствующей в объекте Map, в порядке вставки. Если для thisArg предоставляется параметр для forEach, он будет использоваться как значение this для каждого колбэка.
-
Map.prototype.get(key)
-
Возвращает значение связанное с key, или undefined если его нет.
-
Map.prototype.has(key)
-
Возвращает логическое значение, подтверждающее, было ли значение связано с key в объекте Map или нет.
-
Map.prototype.keys()
-
Возвращает новый объект Iterator содержащий ключи для каждого элемента в объекте Map в порядке вставки.
-
Map.prototype.set(key, value)
-
Устанавливает значение для key в объекте Map. Возвращает объект Map.
-
Map.prototype.values()
-
Возвращает новый объект Iterator который содержит значения для каждого элемента в объекте Map в порядке вставки.
-
Map.prototype[@@iterator]()
-
Возвращает новый объект Iterator который содержит массив [key, value] для каждого элемента в объекте Map в порядке вставки.
-
- -

Примеры

- -

Использование объекта Map

- -
const myMap = new Map();
-
-const keyObj = {},
-    keyFunc = function () {},
-    keyString = 'a string';
-
-// задание значений
-myMap.set(keyString, 'value associated with “a string”');
-myMap.set(keyObj, 'value associated with keyObj');
-myMap.set(keyFunc, 'value associated with keyFunc');
-
-myMap.size; // 3
-
-// получение значений
-myMap.get(keyString);    // value associated with “a string”
-myMap.get(keyObj);       // value associated with keyObj
-myMap.get(keyFunc);      // value associated with keyFunc
-
-myMap.get('a string');   // "value associated with 'a string'"
-                         // потому что keyString === 'a string'
-myMap.get({});           // undefined, потому что keyObj !== {} ({} — это литеральная нотация конструктора класса Object)
-myMap.get(function() {}) // undefined, потому что keyFunc !== function () {}
-
- -

Использование NaN в качестве ключей Map

- -

NaN может быть использован в качестве ключа. Несмотря на то, что NaN не равен самому себе (NaN !== NaN вернёт true), следующий пример работает, потому что NaN обрабатывается особым образом:

- -
const myMap = new Map();
-myMap.set(NaN, 'not a number');
-
-myMap.get(NaN); // not a number
-
-const otherNaN = Number('foo');
-myMap.get(otherNaN); // not a number
-
- -

Итерация Map при помощи for..of

- -

Map может быть итерирован с помощью for..of:

- -
const myMap = new Map();
-myMap.set(0, 'zero');
-myMap.set(1, 'one');
-for (var [key, value] of myMap) {
-  console.log(key + ' = ' + value);
-}
-// 0 = zero
-// 1 = one
-
-for (var key of myMap.keys()) {
-  console.log(key);
-}
-// 0
-// 1
-
-for (var value of myMap.values()) {
-  console.log(value);
-}
-// zero
-// one
-
-for (var [key, value] of myMap.entries()) {
-  console.log(key + ' = ' + value);
-}
-// 0 = zero
-// 1 = one
-
- -

Итерация Map при помощи forEach()

- -

Map может быть итерирован с помощью метода forEach():

- -
myMap.forEach(function(value, key) {
-  console.log(`${key} => ${value}`);
-});
-// 0 => zero
-// 1 => one
-
- -

Взаимоотношения с объектом Array

- -
const kvArray = [['key1', 'value1'], ['key2', 'value2']];
-
-// Используйте конструктор Map для преобразования двумерных массивов в Map
-const myMap = new Map(kvArray);
-
-myMap.get('key1'); // вернёт “value1”
-
-// Используйте функцию Array.from для трансформации Map в двумерный key-value массив
-console.log(Array.from(myMap)); // Выведет точно такой же массив как kvArray
-
-// Или используйте итераторы  keys или values чтобы преобразовать ключи или значения в массивы
-console.log(Array.from(myMap.keys())); // Выведет ['key1', 'key2']
-
- -

Клонирование и слияние Map

- -

 Равно как и {{jsxref("Array", "Массивы")}}, Map могут быть клонированы:

- -
const original = new Map([
-  [1, 'one']
-]);
-
-const clone = new Map(original);
-
-console.log(clone.get(1)); // one
-console.log(original === clone); // false.
- -

Следует помнить, что данные не клонируются.

- -

Map могут быть слиты, с сохранением уникальности ключей:

- -
const first = new Map([
-  [1, 'one'],
-  [2, 'two'],
-  [3, 'three'],
-]);
-
-const second = new Map([
-  [1, 'uno'],
-  [2, 'dos']
-]);
-
-// Слияние двух Map. Взят будет последний повторившийся ключ.
-// Оператор Spread по сути преобразует Map в массив
-const merged = new Map([...first, ...second]);
-
-console.log(merged.get(1)); // uno
-console.log(merged.get(2)); // dos
-console.log(merged.get(3)); // three
- -

Map могут быть слиты и с {{jsxref("Array", "Массивами")}}:

- -
const first = new Map([
-  [1, 'one'],
-  [2, 'two'],
-  [3, 'three'],
-]);
-
-const second = new Map([
-  [1, 'uno'],
-  [2, 'dos']
-]);
-
-// Слияние Map и массива. Как и при слиянии двух Map - взят будет последний повторившийся ключ.
-const merged = new Map([...first, ...second, [1, 'eins']]);
-
-console.log(merged.get(1)); // eins
-console.log(merged.get(2)); // dos
-console.log(merged.get(3)); // three
- -

Спецификации

- - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('ES2015', '#sec-map-objects', 'Map')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}{{Spec2('ESDraft')}}
- -

Совместимость с браузерами

-

{{Compat("javascript.builtins.Map")}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/map/keys/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/map/keys/index.html deleted file mode 100644 index aeb0f7f568..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/map/keys/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Map.prototype.keys() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys -translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys -original_slug: Web/JavaScript/Reference/Global_Objects/Map/keys ---- -
{{JSRef}}
- -

Метод keys() возвращает новый Итератор, содержащий ключи каждого элемента объекта {{jsxref("Map")}} в том порядке, в котором они были заведены.

- -

Синтаксис

- -
myMap.keys()
- -

Возвращаемое значение

- -

Новый итератор объекта {{jsxref("Map")}}.

- -

Примеры

- -

Использование метода keys()

- -
var myMap = new Map();
-myMap.set('0', 'foo');
-myMap.set(1, 'bar');
-myMap.set({}, 'baz');
-
-var mapIter = myMap.keys();
-
-console.log(mapIter.next().value); // "0"
-console.log(mapIter.next().value); // 1
-console.log(mapIter.next().value); // Object
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('ES2015', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ESDraft')}} 
- -

Поддержка браузерами

- -

{{Compat}}

- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/map/set/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/map/set/index.html deleted file mode 100644 index ae605adefd..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/map/set/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Map.prototype.set() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -translation_of: Web/JavaScript/Reference/Global_Objects/Map/set -original_slug: Web/JavaScript/Reference/Global_Objects/Map/set ---- -
{{JSRef}}
- -

Метод set() добавляет объекту {{jsxref("Map")}} новый элемент или обновляет существующий с указанными значениями key и value.

- -

Синтаксис

- -
myMap.set(key, value);
- -

Параметры

- -
-
key
-
Ключ добавляемого элемента.
-
value
-
Значение добавляемого элемента.
-
- -

Возвращаемое значение

- -

Объект {{jsxref("Map")}}.

- -

Примеры

- -

Использование метода set()

- -
var myMap = new Map();
-
-// Добавление нового элемента объекту Map
-myMap.set('bar', 'foo');
-myMap.set(1, 'foobar');
-
-// Обновление существующего элемента
-myMap.set('bar', 'baz');
-
- -

Последовательное использование метода set()

- -

Так как метод set() возвращает объект Map, вы можете последовательно применять метод set() как в примере ниже:

- -
// Последовательно добавляет новые элементы в myMap:
-myMap.set('bar', 'foo')
-     .set(1, 'foobar')
-     .set(2, 'baz');
- -

Спецификации

- - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ESDraft')}}
- -

Поддержка браузерами

- -

{{Compat}}

- -

Примечание к поддержке браузерами

- - - -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/map/size/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/map/size/index.html deleted file mode 100644 index 243f05f282..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/map/size/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Map.prototype.size -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -translation_of: Web/JavaScript/Reference/Global_Objects/Map/size -original_slug: Web/JavaScript/Reference/Global_Objects/Map/size ---- -
{{JSRef}}
- -

Геттер size возвращает количество элементов в объекте {{jsxref("Map")}}.

- -

{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}

- -

Описание

- -

Значение size - целое число, описывающее, сколько элементов имеет объект Map. У свойства size не определён сеттер: переопределить его нельзя.

- -

Примеры

- -

Использование size

- -
var myMap = new Map();
-myMap.set("a", "альфа");
-myMap.set("b", "бета");
-myMap.set("g", "гамма");
-
-myMap.size // 3
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ES2015')}}Первое определение
{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ESDraft')}}
- -

Совместимость с браузерами

- -

{{Compat}}

- -

Замечания для Gecko

- - - -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/global_objects/map/values/index.html b/files/ru/orphaned/web/javascript/reference/global_objects/map/values/index.html deleted file mode 100644 index 0cdf90c670..0000000000 --- a/files/ru/orphaned/web/javascript/reference/global_objects/map/values/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Map.prototype.values() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/values -translation_of: Web/JavaScript/Reference/Global_Objects/Map/values -original_slug: Web/JavaScript/Reference/Global_Objects/Map/values ---- -
{{JSRef}}
- -

Метод values() возвращает новый Итератор, содержащий значения каждого элемента в объекте {{jsxref("Map")}} в том порядке, в котором они были заведены.

- -

Синтаксис

- -
myMap.values()
- -

Возвращаемое значение

- -

Новый итератор объекта {{jsxref("Map")}}.

- -

Примеры

- -

Использование values()

- -
var myMap = new Map();
-myMap.set('0', 'foo');
-myMap.set(1, 'bar');
-myMap.set({}, 'baz');
-
-var mapIter = myMap.values();
-
-console.log(mapIter.next().value); // "foo"
-console.log(mapIter.next().value); // "bar"
-console.log(mapIter.next().value); // "baz"
- -

Спецификации

- - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ESDraft')}} 
- -

Поддержка браузерами

- -

{{Compat}}

- -

Смотрите также

- - diff --git "a/files/ru/orphaned/web/javascript/reference/global_objects/math/\320\274\320\265\321\202\320\276\320\264_math.max()_/index.html" "b/files/ru/orphaned/web/javascript/reference/global_objects/math/\320\274\320\265\321\202\320\276\320\264_math.max()_/index.html" deleted file mode 100644 index 56c70fde75..0000000000 --- "a/files/ru/orphaned/web/javascript/reference/global_objects/math/\320\274\320\265\321\202\320\276\320\264_math.max()_/index.html" +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Метод Math.max() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Math/Метод_Math.max()_ -tags: - - JavaScript - - Math - - Method - - Reference -original_slug: Web/JavaScript/Reference/Global_Objects/Math/Метод_Math.max()_ ---- -
{{JSRef("Global_Objects", "Math")}}
- -
 
- -

Сводка

- -

Метод Math.max() возвращает наибольшее из нуля или более чисел.

- -

Синтаксис

- -
Math.max([value1[, value2[, ...]]])
- -

Параметры

- -
-
value1, value2, ...
-
Числа.
-
- -

Описание

- -

Поскольку метод max() является статическим методом объекта Math, вы всегда должны использовать его как Math.max(), а не пытаться вызывать метод на созданном экземпляре объекта Math (поскольку объект Math не является конструктором).

- -

При вызове без аргументов результатом вызова будет значение -{{jsxref("Global_Objects/Infinity", "Infinity")}}.

- -

Если хотя бы один из аргументов не может быть преобразован в число, результатом будет {{jsxref("Global_Objects/NaN", "NaN")}}.

- -

Примеры

- -

Пример: использование метода Math.max()

- -
Math.max(10, 20);   //  20
-Math.max(-10, -20); // -10
-Math.max(-10, 20);  //  20
-
- -

Следующая функция использует метод {{jsxref("Function.prototype.apply()")}} для нахождения максимального элемента в числовом массиве. Вызов getMaxOfArray([1, 2, 3]) эквивалентен вызову Math.max(1, 2, 3), однако вы можете использовать функцию getMaxOfArray() вместе с программно сконструированными массивами любого размера.

- -
function getMaxOfArray(numArray) {
-  return Math.max.apply(null, numArray);
-}
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарии
ECMAScript 1-е издание.СтандартИзначальное определение. Реализована в JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.max', 'Math.max')}}{{Spec2('ES6')}} 
- -

Совместимость с браузерами

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/javascript/reference/operators/pipeline_operator/index.html b/files/ru/orphaned/web/javascript/reference/operators/pipeline_operator/index.html deleted file mode 100644 index 808573314a..0000000000 --- a/files/ru/orphaned/web/javascript/reference/operators/pipeline_operator/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Конвейерный оператор -slug: orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator -tags: - - Experimental - - JavaScript - - Operator - - Оператор - - Экспериментальный -translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator -original_slug: Web/JavaScript/Reference/Operators/Pipeline_operator ---- -
{{jsSidebar("Operators")}} {{SeeCompatTable}}
- -

Экспериментальный конвейерный оператор |> (в настоящее время на этапе 1) позволяет создавать читаемые цепочки вызовов функций. В основном, конвейерный оператор предоставляет возможность вызова функции с одним аргументом, и позволяет написать:

- -
let url = "%21" |> decodeURI;
-
- -

Эквивалентный вызов в традиционном синтаксисе выглядит следующим образом:

- -
let url = decodeURI("%21");
-
- -

Синтаксис

- -
выражение |> функция
- -

Значение указанного выражения передаётся в функцию в качестве единственного параметра.

- -

Примеры

- -

Цепочки вызовов функций

- -

Конвейерный оператор позволяет улучшить читаемость кода, в случае когда встречается цепочка из нескольких функций.

- -
const double = (n) => n * 2;
-const increment = (n) => n + 1;
-
-// без конвейерного оператора
-double(increment(double(double(5)))); // 42
-
-// с конвейерным оператором
-5 |> double |> double |> increment |> double; // 42
-
- -

Спецификации

- - - - - - - - - - - - - - - - -
СпецификацияСтатусComment
Pipeline operator draftЭтап 1Ещё не включён в спецификацию ECMAScript.
- -

Совместимость с браузерами

- -
- - -

{{Compat("javascript.operators.pipeline")}}

-
- -

Смотрите также

- - diff --git a/files/ru/orphaned/web/manifest/serviceworker/index.html b/files/ru/orphaned/web/manifest/serviceworker/index.html deleted file mode 100644 index 6a106855f1..0000000000 --- a/files/ru/orphaned/web/manifest/serviceworker/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: serviceworker -slug: orphaned/Web/Manifest/serviceworker -tags: - - Manifest - - ServiceWorker - - Web -translation_of: Web/Manifest/serviceworker -original_slug: Web/Manifest/serviceworker ---- -
{{QuickLinksWithSubpages("/ru/docs/Web/Manifest")}}
- -
{{obsolete_header}}
- - - - - - - - - - - - - - - - -
TypeObject
MandatoryNo
Example - 
-"serviceworker": {
-  "src": "./serviceworker.js"
-}
-
- -

serviceworker описывает {{domxref('Service_Worker_API', 'рабочий сервис')}}, который разработчик намеревается установить для управления PWA.

- -

Examples

- -
"serviceworker": {
-  "src": "./serviceworker.js",
-  "scope": "/app",
-  "type": "",
-  "update_via_cache": "none"
-}
-
- -

Значения

- -

Сервисный работник может содержать следующие значения (требуется только src):

- - - - - - - - - - - - - - - - - - - - - - - - - - -
ПараметрОписание
src -

URL-адрес для загрузки сценария рабочего сервиса. Это единственный обязательный параметр для serviceworker.

-
scope -

Строка, представляющая URL, который определяет область регистрации рабочего сервиса; то есть, какой диапазон URL-адресов может контролировать рабочий сервис. Обычно это относительный URL-адрес, относительно базового URL-адреса приложения. По умолчанию в качестве области действия для регистрации рабочего сервиса задан каталог, в котором находится сценарий рабочий сервис.

-
type?
update_via_cache -

Нужно ли обходить кеш пользовательского агента при получении рабочего сервиса.

-
- -

Browser compatibility

- -

{{Compat("html.manifest.serviceworker")}}

diff --git a/files/ru/orphaned/web/mathml/element/mglyph/index.html b/files/ru/orphaned/web/mathml/element/mglyph/index.html deleted file mode 100644 index 1ebf808bba..0000000000 --- a/files/ru/orphaned/web/mathml/element/mglyph/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: -slug: orphaned/Web/MathML/Element/mglyph -tags: - - MathML - - MathML:Element - - Глиф - - Символ -translation_of: Web/MathML/Element/mglyph -original_slug: Web/MathML/Element/mglyph ---- -
{{MathMLRef}}
- -

Элемент <mglyph> разметки MathML используется для отображения нестандартных символов там, где существующих символы Unicode недоступны. Его можно использовать в элементах-токенах.

- -

Атрибуты

- -
-
alt
-
Этот атрибут определяет альтернативный текст, описывающий изображение. Пользователи увидят этот текст, если URL адрес изображения неправильный, изображение не в одном из поддерживаемых форматов или пока изображение не будет загружено.
-
class, id, style
-
Предусмотрено для использования с таблицами стилей.
-
height
-
Высота изображения.
-
href
-
Используется для установки гиперссылки на указанный URI.
-
mathbackground
-
Цвет фона (если изображение имеет прозрачность). Вы можете использовать #rgb, #rrggbb и имена цветов HTML.
-
src
-
URL изображения.
-
valign
-
Задаёт вертикальное выравнивание относительно текущей базовой линии.
-
width
-
Ширина изображения.
-
- -

Пример

- -
<math>
-  <mi><mglyph src="my-glyph.png" alt="my glyph"/></mi>
-</math>
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{ SpecName('MathML3', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML3') }}Текущая спецификация
{{ SpecName('MathML2', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML2') }}Начальная спецификация
- -

Совместимость с браузерами

- - - -

{{Compat("mathml.elements.mglyph")}}

diff --git a/files/ru/orphaned/web/reference/api/index.html b/files/ru/orphaned/web/reference/api/index.html deleted file mode 100644 index 8546d57b3c..0000000000 --- a/files/ru/orphaned/web/reference/api/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Руководство Web API -slug: orphaned/Web/Reference/API -tags: - - API - - Web - - Руководство - - Справка -translation_of: Web/Reference/API -original_slug: Web/Reference/API ---- -

Веб предлагает широкий спектр интерфейсов для выполнения различных полезных задач. Они могут быть доступны с помощью кода JavaScript, и путём внесения незначительных корректив в объекты {{domxref("window")}}  или {{domxref("element")}}.  Для создания сложной графики и аудио эффектов используются такие интерфейсы как WebGL и Web Audio.

- -

Описание всех интерфейсов (APIs).

- -

Описание  доступных событий (events).

- -
-
-
-
Объектная модель документа (DOM).
-
DOM имеет интерфейс (API) который предоставляет возможность доступа к любой части документа. Эта модель позволяет осуществлять манипуляции над целыми разделами документа {{domxref("Node")}} и отдельными элементами {{domxref("Element")}}. Такие форматы как: HTML, XML и SVG используют её для решения своих специфических задач.
-
Аппаратные интерфейсы
-
Этот набор методов позволяет получить доступ из веб-страницы или приложения к различным датчикам устройства. Например: Ambient Light Sensor API, Battery Status API, Geolocation API, Pointer Lock API, Proximity API, Device Orientation API, Screen Orientation API, Vibration API.
-
Интерфейсы связи
-
Эти интерфейсы обеспечивают коммуникацию между веб-страницами и приложениями с другими страницами или устройствами. Такие как, Network Information API, Web Notifications, Simple Push API.
-
Интерфейсы управления данными
-
Пользовательские данные могут храниться и управляться этими интерфейсами. Например, FileHandle API, IndexedDB.
-
- -

В дополнение к описанным возможностям,  которые доступны для любого веб-сайта или приложения, существует более мощная функциональность Mozilla, доступная для привилегированных и сертифицированных приложений.

- -
-
Привилегированные интерфейсы
-
При установке приложения от пользователя потребуется дать приложению специфичные права. Включают в себя: TCP Socket API, Contacts API, Device Storage API, Browser API, Camera API.
-
- -
-
Сертифицированная функциональность
-
Сертифицированное приложение является приложением низкого уровня выполнения критических операций на операционной системе как Firefox OS. Менее привилегированные взаимодействуют с приложениями использующими Web Activities.  Сертифицированные API, включают в себя: Bluetooth API, Mobile Connection API, Network Stats API, Telephony, WebSMS, WiFi Information API, Camera API, Power Management API, Settings API, Idle API, Permissions API, Time/Clock API.
-
-
- -
-

Сообщество

- -

Присоединяйтесь к Web API сообществу в нашем списке рассылки или группе новостей:

- - - -

Кроме того, убедитесь, что участвуете в живой дискуссии в #webapi направление IRC.

- - - -

Эти темы также могут вас заинтересовать:

- - -
-
diff --git a/files/ru/orphaned/web/reference/index.html b/files/ru/orphaned/web/reference/index.html deleted file mode 100644 index a0526e8ca1..0000000000 --- a/files/ru/orphaned/web/reference/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Справочник по веб-технологиям -slug: orphaned/Web/Reference -tags: - - Русский -translation_of: Web/Reference -original_slug: Web/Reference ---- -

{{draft()}}

- -

Открытая сеть построена с использованием ряда технологий. Ниже вы найдёте ссылки на наши справочные материалы по каждому из них.

- -
-
-

Основные веб-технологии

- -
-
Ссылка на веб-интерфейс API
-
Справочные материалы для каждого из интерфейсов, которые составляют API-интерфейсы Интернета, включая DOM и все связанные API и интерфейсы, которые вы можете использовать для создания веб-контента и приложений. Этот список охватывает все интерфейсы, расположенные в алфавитном порядке.
-
Web APIs
-
Список различных интерфейсов и набора технологий,
- которые составляют общий Веб API.
-
HTML
-
Язык гипертекстовой разметки — это язык, используемый для определения структуры и описания содержания веб-страницы в структурированной форме.
-
CSS
-
Каскадные таблицы стилей используются для описания внешнего вида веб-контента.
-
SVG
-
Масштабируемая векторная графика позволяет вам описать изображение как набор векторов (линий) и фигур, что позволяет масштабировать такую графику плавно независимо от размеров, в которых она нарисована без потерь качества.
-
MathML
-
Математический язык разметки позволяет отображать сложные математические уравнения и синтаксис.
-
-
- -
-

Другие технологии

- -

Скоро будет завершено...

-
-
- -

 

diff --git a/files/ru/orphaned/web/security/information_security_basics/index.html b/files/ru/orphaned/web/security/information_security_basics/index.html deleted file mode 100644 index b958b29047..0000000000 --- a/files/ru/orphaned/web/security/information_security_basics/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Основы по информационной безопасности -slug: orphaned/Web/Security/Information_Security_Basics -translation_of: Web/Security/Information_Security_Basics -original_slug: Web/Security/Information_Security_Basics ---- -

Базовое понимание информационной безопасности, поможет обезопасить ваше программное обеспечение и сайты от уязвимостей открывающим доступ к финансовым махинациям и прочим противоправным действиям. Из этих статей вы сможете узнать всё что для этого необходимо. Вооружившись этой информацией, вы поймёте роль и важность безопасности начиная от цикла веб-разработки вплоть до размещения вашего контента. 

- -
-
Конфиденциальность, целостность и доступность
-
Статья описывает фундаментальные понятия по главным задачам безопасности
-
Уязвимости
-
Определяет основные категории уязвимостей и рассказывает о их существовании в программном обеспечении
-
Угрозы
-
Вкратце знакомит с основными принципами угроз
-
Контроль безопасности 
-
Определяет основные категории контроля безопасности и рассказывает о их потенциальных слабостях
-
Безопасность TCP/IP
-
Обзор TCP/IP модели, с упором на вопросы безопасности для SSL
-
- -

Смотрите также

- - - -

{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}

diff --git a/files/ru/orphaned/web/svg/attribute/onload/index.html b/files/ru/orphaned/web/svg/attribute/onload/index.html deleted file mode 100644 index 8c73972cde..0000000000 --- a/files/ru/orphaned/web/svg/attribute/onload/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: onload -slug: orphaned/Web/SVG/Attribute/onload -original_slug: Web/SVG/Attribute/onload ---- -

Link not exist

-- cgit v1.2.3-54-g00ecf