From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/uk/web/api/ambient_light_events/index.html | 66 --- files/uk/web/api/angle_instanced_arrays/index.html | 83 --- files/uk/web/api/blob/index.html | 230 -------- files/uk/web/api/canvas_api/index.html | 166 ------ .../api/canvas_api/tutorial/basic_usage/index.html | 152 ----- .../hit_regions_and_accessibility/index.html | 109 ---- files/uk/web/api/canvas_api/tutorial/index.html | 63 --- files/uk/web/api/console/dir/index.html | 104 ---- files/uk/web/api/console/index.html | 278 ---------- files/uk/web/api/console/log/index.html | 173 ------ files/uk/web/api/customevent/index.html | 96 ---- .../web/api/customevent/initcustomevent/index.html | 120 ---- files/uk/web/api/document/index.html | 470 ---------------- .../api/document/visibilitychange_event/index.html | 82 --- files/uk/web/api/domstring/index.html | 45 -- files/uk/web/api/element/getclientrects/index.html | 219 -------- files/uk/web/api/element/index.html | 490 ----------------- files/uk/web/api/event/index.html | 189 ------- files/uk/web/api/event/target/index.html | 135 ----- files/uk/web/api/globaleventhandlers/index.html | 273 --------- .../api/globaleventhandlers/onkeydown/index.html | 93 ---- .../web/api/globaleventhandlers/onkeyup/index.html | 95 ---- .../api/globaleventhandlers/onmouseover/index.html | 71 --- files/uk/web/api/headers/index.html | 133 ----- files/uk/web/api/history_api/index.html | 122 ----- files/uk/web/api/html_dom_api/index.html | 472 ---------------- .../api/html_dom_api/microtask_guide/index.html | 324 ----------- files/uk/web/api/htmlcanvaselement/index.html | 264 --------- files/uk/web/api/htmlelement/index.html | 486 ---------------- files/uk/web/api/htmlelement/offsettop/index.html | 60 -- files/uk/web/api/htmlformelement/index.html | 245 --------- files/uk/web/api/htmlformelement/reset/index.html | 70 --- files/uk/web/api/htmlimageelement/image/index.html | 117 ---- files/uk/web/api/htmlimageelement/index.html | 401 -------------- .../api/htmlmediaelement/abort_event/index.html | 69 --- files/uk/web/api/index.html | 26 - .../web/api/intersection_observer_api/index.html | 610 --------------------- .../web/api/mediaquerylist/addlistener/index.html | 82 --- files/uk/web/api/mediaquerylist/index.html | 109 ---- .../uk/web/api/network_information_api/index.html | 87 --- files/uk/web/api/networkinformation/index.html | 88 --- files/uk/web/api/node/contains/index.html | 112 ---- files/uk/web/api/node/index.html | 508 ----------------- files/uk/web/api/page_visibility_api/index.html | 202 ------- files/uk/web/api/promiserejectionevent/index.html | 95 ---- .../api/promiserejectionevent/promise/index.html | 76 --- .../promiserejectionevent/index.html | 89 --- .../api/promiserejectionevent/reason/index.html | 66 --- .../web/api/svganimatedstring/animval/index.html | 44 -- files/uk/web/api/svganimatedstring/index.html | 60 -- files/uk/web/api/urlsearchparams/index.html | 171 ------ files/uk/web/api/web_workers_api/index.html | 215 -------- files/uk/web/api/webgl_api/index.html | 238 -------- files/uk/web/api/websocket/index.html | 330 ----------- files/uk/web/api/window/confirm/index.html | 69 --- files/uk/web/api/window/console/index.html | 56 -- .../api/window/domcontentloaded_event/index.html | 153 ------ files/uk/web/api/window/history/index.html | 63 --- files/uk/web/api/window/index.html | 460 ---------------- files/uk/web/api/window/localstorage/index.html | 147 ----- .../api/window/rejectionhandled_event/index.html | 85 --- files/uk/web/api/window/self/index.html | 70 --- .../api/window/unhandledrejection_event/index.html | 120 ---- files/uk/web/api/windoweventhandlers/index.html | 105 ---- .../onrejectionhandled/index.html | 52 -- .../onunhandledrejection/index.html | 56 -- .../web/api/windoworworkerglobalscope/index.html | 189 ------- .../settimeout/index.html | 429 --------------- files/uk/web/api/xmlhttprequest/index.html | 178 ------ 69 files changed, 12005 deletions(-) delete mode 100644 files/uk/web/api/ambient_light_events/index.html delete mode 100644 files/uk/web/api/angle_instanced_arrays/index.html delete mode 100644 files/uk/web/api/blob/index.html delete mode 100644 files/uk/web/api/canvas_api/index.html delete mode 100644 files/uk/web/api/canvas_api/tutorial/basic_usage/index.html delete mode 100644 files/uk/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html delete mode 100644 files/uk/web/api/canvas_api/tutorial/index.html delete mode 100644 files/uk/web/api/console/dir/index.html delete mode 100644 files/uk/web/api/console/index.html delete mode 100644 files/uk/web/api/console/log/index.html delete mode 100644 files/uk/web/api/customevent/index.html delete mode 100644 files/uk/web/api/customevent/initcustomevent/index.html delete mode 100644 files/uk/web/api/document/index.html delete mode 100644 files/uk/web/api/document/visibilitychange_event/index.html delete mode 100644 files/uk/web/api/domstring/index.html delete mode 100644 files/uk/web/api/element/getclientrects/index.html delete mode 100644 files/uk/web/api/element/index.html delete mode 100644 files/uk/web/api/event/index.html delete mode 100644 files/uk/web/api/event/target/index.html delete mode 100644 files/uk/web/api/globaleventhandlers/index.html delete mode 100644 files/uk/web/api/globaleventhandlers/onkeydown/index.html delete mode 100644 files/uk/web/api/globaleventhandlers/onkeyup/index.html delete mode 100644 files/uk/web/api/globaleventhandlers/onmouseover/index.html delete mode 100644 files/uk/web/api/headers/index.html delete mode 100644 files/uk/web/api/history_api/index.html delete mode 100644 files/uk/web/api/html_dom_api/index.html delete mode 100644 files/uk/web/api/html_dom_api/microtask_guide/index.html delete mode 100644 files/uk/web/api/htmlcanvaselement/index.html delete mode 100644 files/uk/web/api/htmlelement/index.html delete mode 100644 files/uk/web/api/htmlelement/offsettop/index.html delete mode 100644 files/uk/web/api/htmlformelement/index.html delete mode 100644 files/uk/web/api/htmlformelement/reset/index.html delete mode 100644 files/uk/web/api/htmlimageelement/image/index.html delete mode 100644 files/uk/web/api/htmlimageelement/index.html delete mode 100644 files/uk/web/api/htmlmediaelement/abort_event/index.html delete mode 100644 files/uk/web/api/index.html delete mode 100644 files/uk/web/api/intersection_observer_api/index.html delete mode 100644 files/uk/web/api/mediaquerylist/addlistener/index.html delete mode 100644 files/uk/web/api/mediaquerylist/index.html delete mode 100644 files/uk/web/api/network_information_api/index.html delete mode 100644 files/uk/web/api/networkinformation/index.html delete mode 100644 files/uk/web/api/node/contains/index.html delete mode 100644 files/uk/web/api/node/index.html delete mode 100644 files/uk/web/api/page_visibility_api/index.html delete mode 100644 files/uk/web/api/promiserejectionevent/index.html delete mode 100644 files/uk/web/api/promiserejectionevent/promise/index.html delete mode 100644 files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html delete mode 100644 files/uk/web/api/promiserejectionevent/reason/index.html delete mode 100644 files/uk/web/api/svganimatedstring/animval/index.html delete mode 100644 files/uk/web/api/svganimatedstring/index.html delete mode 100644 files/uk/web/api/urlsearchparams/index.html delete mode 100644 files/uk/web/api/web_workers_api/index.html delete mode 100644 files/uk/web/api/webgl_api/index.html delete mode 100644 files/uk/web/api/websocket/index.html delete mode 100644 files/uk/web/api/window/confirm/index.html delete mode 100644 files/uk/web/api/window/console/index.html delete mode 100644 files/uk/web/api/window/domcontentloaded_event/index.html delete mode 100644 files/uk/web/api/window/history/index.html delete mode 100644 files/uk/web/api/window/index.html delete mode 100644 files/uk/web/api/window/localstorage/index.html delete mode 100644 files/uk/web/api/window/rejectionhandled_event/index.html delete mode 100644 files/uk/web/api/window/self/index.html delete mode 100644 files/uk/web/api/window/unhandledrejection_event/index.html delete mode 100644 files/uk/web/api/windoweventhandlers/index.html delete mode 100644 files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html delete mode 100644 files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html delete mode 100644 files/uk/web/api/windoworworkerglobalscope/index.html delete mode 100644 files/uk/web/api/windoworworkerglobalscope/settimeout/index.html delete mode 100644 files/uk/web/api/xmlhttprequest/index.html (limited to 'files/uk/web/api') diff --git a/files/uk/web/api/ambient_light_events/index.html b/files/uk/web/api/ambient_light_events/index.html deleted file mode 100644 index 3c5d48cc76..0000000000 --- a/files/uk/web/api/ambient_light_events/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Ambient Light Events -slug: Web/API/Ambient_Light_Events -translation_of: Web/API/Ambient_Light_Events ---- -
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
- -

Ambient Light Events - це зручний спосіб реагувати на будь-які зміни інтенсивності світла, наприклад, змінюючи кольорову контрастність інтерфейсу користувача (UI) або змінюючи експозицію, необхідну для фотографування.

- -

Опис події

- -

Коли датчик освітленості пристрою виявляє зміну рівня освітленості, він повідомляє браузер про цю зміну. Браузер, після отримання такого сповіщення, запускає подію {{domxref ("DeviceLightEvent")}}, яка надає інформацію про точну інтенсивність світла (в одиницях люкс).

- -

Цю подію можна перехопити на рівні об'єкту window за допомогою методу {{domxref ("EventTarget.addEventListener", "addEventListener")}} (використовуючи назву події {{event ("devicelight")}}) або прикріпивши обробку події як властивість {{domxref ("window.ondevicelight")}}.

- -

Після перехоплення об'єкт події надає доступ до інтенсивності світла, вираженої у {{interwiki ("wikipedia", "lux")}} через властивість {{domxref ("DeviceLightEvent.value")}}.

- -

Приклад

- -
if ('ondevicelight' in window) {
-  window.addEventListener('devicelight', function(event) {
-    var body = document.querySelector('body');
-    if (event.value < 50) {
-      body.classList.add('darklight');
-      body.classList.remove('brightlight');
-    } else {
-      body.classList.add('brightlight');
-      body.classList.remove('darklight');
-    }
-  });
-} else {
-  console.log('Подія devicelight не підтримується');
-}
-
- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName("AmbientLight", "", "Ambient Light Events")}}{{Spec2("AmbientLight")}}Initial definition
- -

Сумісність

- - - -

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

- -

Дивіться також

- - diff --git a/files/uk/web/api/angle_instanced_arrays/index.html b/files/uk/web/api/angle_instanced_arrays/index.html deleted file mode 100644 index db1d1906ff..0000000000 --- a/files/uk/web/api/angle_instanced_arrays/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: ANGLE_instanced_arrays -slug: Web/API/ANGLE_instanced_arrays -translation_of: Web/API/ANGLE_instanced_arrays ---- -
{{APIRef("WebGL")}}
- -

ANGLE_instanced_arrays розширення є частиною WebGL API і дозволяє малювати один і той же об'єкт або групи подібних об'єктів кілька разів, якщо вони поділяють однакові вершинні дані, лічильник примітиву і тип.

- -

Розширення WebGL доступні за допомогою метода{{domxref("WebGLRenderingContext.getExtension()")}} . Для отримання додаткової інформації див Using Extensions в WebGL tutorial.

- -
-

Доступність: Це розширення доступне лише для {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} контексті. В {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}, функціональність цього розширення доступна на WebGL2 контекст за замовчуванням і константи і методи доступні без суфіксу  "ANGLE".

- -

Незважаючи на назву "ANGLE", це розширення працює на будь-якому пристрої, якщо його підтримує апаратне забезпечення, а не тільки на Windows, коли використовується бібліотека ANGLE.  "ANGLE" просто вказує, що це розширення було написано авторами бібліотеки ANGLE.

-
- -

Константи

- -

Це розширення виставляє одну нову константу, яку можна використовувати метод {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} :

- -
-
ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE
-
Повертає {{domxref("GLint")}} опису частотного дільника, використовуваного для інтрадерного візуалізації при використанні в {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} як параметр pname .
-
- -

Methods

- -

This extension exposes three new methods.

- -
-
{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}
-
-

Behaves identically to {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} except that multiple instances of the range of elements are executed, and the instance advances for each iteration.

-
-
{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}
-
-

Behaves identically to {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} except that multiple instances of the set of elements are executed and the instance advances between each set.

-
-
{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}
-
-

Modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}} and {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}.

-
-
- -

Examples

- -

Enabling the extension:

- -
var ext = gl.getExtension('ANGLE_instanced_arrays');
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ANGLE_instanced_arrays', '', 'ANGLE_instanced_arrays')}}{{Spec2('ANGLE_instanced_arrays')}}Initial definition.
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/uk/web/api/blob/index.html b/files/uk/web/api/blob/index.html deleted file mode 100644 index 3cdfbcf46a..0000000000 --- a/files/uk/web/api/blob/index.html +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Blob -slug: Web/API/Blob -translation_of: Web/API/Blob ---- -
{{APIRef("File API")}}
- -

Об'єкт Blob являє собою файло-подібний об'єкт незмінних, початкових даних. Blob представляє дані, що не обов'язкові у нативному форматі JavaScript. Вигляд {{domxref("File")}} заснований на Blob, наслідує функціонал Blob та доповнює його для підтримки файлів з файлової системи користувача.

- -

Для формування Blob з інших не-blob об'єктів й даних використовується конструктор {{domxref("Blob.Blob", "Blob()")}}. Для створення Blob, що міститиме підмножину інших даних Blob, викликається метод {{domxref("Blob.slice()", "slice()")}}. Для отримання Blob для файла з файлової системи користувача перегляньте документацію до {{domxref("File")}}.

- -

API, що працюють з  Blob, також перелічені у документації {{domxref("File")}}.

- -
-

Зауваження: Метод slice() другим парметром приймає початкову довжину для індикації кількості байтів, які будуть скопійовані у новий Blob. Якщо вказувати змінні таким чином: початковій індекс + довижина, що привищує розмір джерела Blob, повератємий Blob буде містити дані від початкового індексу до кінця джерела Blob.

-
- -
Зауваження: Майте на увазі, що метод slice() має вендорні префікси у деяких браузерах и версіях: blob.mozSlice() для Firefox 12 та попередніх й blob.webkitSlice() у Safari. Стара версія методу slice(), без вендорних префіксів, має іншу семантику та вважається застарілою. Підтримка blob.mozSlice() була припинена з Firefox 30.
- -

Конструктор

- -
-
{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}
-
Повертає новостворенний об'єкт Blob, чий контент складається з ланцюга масивів значень вхідних парметрів.
-
- -

Властивості

- -
-
{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}
-
Булєве значення, що вказує, чи був метод {{domxref("Blob.close()")}} викликан на Blob. Закритий Blob не може бути прочитаний.
-
{{domxref("Blob.size")}} {{readonlyinline}}
-
Розмір, у байтах, даних, що міститься у об'єкті Blob.
-
{{domxref("Blob.type")}} {{readonlyinline}}
-
Строка, що вказує MIME тип даних, що містяться у Blob. Якщо тип невідомий, ця строка порожня.
-
- -

Методи

- -
-
{{domxref("Blob.close()")}} {{experimental_inline}}
-
Закриває об'єкт Blob, можливо, звілняючи використовувані ресурси.
-
{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
-
Повертає новий об'єкт Blob, що містить дані у вказаному диапазоні байтів джерела Blob.
-
- -

Приклади

- -

Приклад використання конструктора Blob

- -

{{domxref("Blob.Blob", "Blob() constructor")}} дозволяє створювати Blob з інших об'єктів. Наприклад, щоб сконструювати Blob із стрічки:

- -
var debug = {hello: "world"};
-var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
- -
-

До того, як конструктор Blob став доступний, це можна було зробити за допомогою {{domxref("BlobBuilder")}} API, яка зараз вважається застарілою:

- -
var builder = new BlobBuilder();
-var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
-builder.append(fileParts[0]);
-var myBlob = builder.getBlob('text/xml');
-
-
- -

Приклад створення URL типізованого масиву з використанням Blob

- -

Наступний код:

- -
var typedArray = GetTheTypedArraySomehow();
-var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
-var url = URL.createObjectURL(blob);
-// url буде виглядати наступним чином: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
-// тепер ви можете використовувати url у будь-якому контексті, де можуть бути використані звичайні URLs, наприклад img.src, тощо.
-
- -

Приклад отримання даних з Blob

- -

Єдиний шлях для отримання даних з Blob це використовуючи {{domxref("FileReader")}}. Наступиний код зчитує дані з Blob у вигляді типізованого масиву.

- -
var reader = new FileReader();
-reader.addEventListener("loadend", function() {
-   // reader.result містить контент Blob у вигляді типізованого масиву
-});
-reader.readAsArrayBuffer(blob);
- -

Вікористовуючи інші методи {{domxref("FileReader")}}, можна прочитати контент Blob у вигляді строки або URL.

- -

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

- - - - - - - - - - - - - - -
СпецифікацияСтатусКоментар
{{SpecName('File API','#blob','Blob')}}{{Spec2('File API')}}Initial definition
- -

Сумісність з браузерами

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support5[1]4[2]1011.10[1]5.1[1]
slice()10 {{property_prefix("webkit")}}
- 21		5 {{property_prefix("moz")}}[3]
- 13		10125.1 {{property_prefix("webkit")}}
Blob() constructor20{{CompatGeckoDesktop("13.0")}}1012.106
close() and isClosed{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("13.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
slice(){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Blob() constructor{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
close() and isClosed{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] A version of slice() taking the length as second argument was implemented in WebKit and Opera 11.10. However, since that syntax differed from {{jsxref("Array/slice", "Array.slice()")}} and {{jsxref("String/slice", "String.slice()")}}, WebKit removed support and added support for the new syntax as Blob.webkitSlice().

- -

[2] A version of slice() taking the length as second argument was implemented in Firefox 4. However, since that syntax differed from {{jsxref("Array/slice", "Array.slice()")}} and {{jsxref("String/slice", "String.slice()")}}, Gecko removed support and added support for the new syntax as mozSlice().

- -

[3] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, there was a bug that affected the behavior of slice(); it did not work for start and end positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.

- -

[4] See {{bug("1048325")}}

- -

Gecko notes: availability in privileged code

- -

To use from chrome code, JSM and Bootstrap scope, you have to import it like this:

- -
Cu.importGlobalProperties(['Blob']);
-
- -

Blob is available in Worker scopes.

- -

See also

- - diff --git a/files/uk/web/api/canvas_api/index.html b/files/uk/web/api/canvas_api/index.html deleted file mode 100644 index 70dbbf1f8d..0000000000 --- a/files/uk/web/api/canvas_api/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Canvas API -slug: Web/API/Canvas_API -tags: - - API - - Canvas - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/API/Canvas_API ---- -
{{CanvasSidebar}}
- -

Доданий в HTML5, елемент HTML {{HTMLElement("canvas")}} призначений для створення графіки засобами JavaScript. Для прикладу, його використовують для малювання графіків, створення композиції фотографій, створення анімацій, і навіть для обробки та рендерингу відео в реальному часі.

- -

Mozilla applications gained support for <canvas> starting with Gecko 1.8 (i.e. Firefox 1.5). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <canvas> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <canvas> by including a script from Google's Explorer Canvas project. Google Chrome and Opera 9 also support <canvas>.

- -

The <canvas> element is also used by WebGL to draw hardware-accelerated 3D graphics on web pages.

- -

Example

- -

This is just a simple code snippet which uses the {{domxref("CanvasRenderingContext2D.fillRect()")}} method.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 100, 100);
-
- -

Edit the code below and see your changes update live in the canvas:

- - - -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

- -

Reference

- -
- -
- -

The interfaces related to the WebGLRenderingContext are referenced under WebGL.

- -

Guides and tutorials

- -
-
Canvas tutorial
-
A comprehensive tutorial covering both the basic usage of <canvas> and its advanced features.
-
Code snippets: Canvas
-
Some extension developer-oriented code snippets involving <canvas>.
-
Demo: A basic ray-caster
-
A demo of ray-tracing animation using canvas.
-
Drawing DOM objects into a canvas
-
How to draw DOM content, such as HTML elements, into a canvas.
-
Manipulating video using canvas
-
Combining {{HTMLElement("video")}} and {{HTMLElement("canvas")}} to manipulate video data in real time.
-
- -

Resources

- -

Generic

- - - -

Libraries

- - - -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
- -

See also

- - diff --git a/files/uk/web/api/canvas_api/tutorial/basic_usage/index.html b/files/uk/web/api/canvas_api/tutorial/basic_usage/index.html deleted file mode 100644 index e57e9fe4a0..0000000000 --- a/files/uk/web/api/canvas_api/tutorial/basic_usage/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Базове використання canvas -slug: Web/API/Canvas_API/Tutorial/Basic_usage -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
- -
-

Давайте почнемо цей урок з розгляду елемента  {{HTMLElement("canvas")}} {{Glossary("HTML")}} як такого. Наприкінці ви дізнаєтесь, як задати canvas 2D context та  зможете намалювати перший приклад в соєму браузері.

-
- -

Елемент <canvas>

- -
<canvas id="tutorial" width="150" height="150"></canvas>
-
- -

Елемент {{HTMLElement("canvas")}} схожий на елемент {{HTMLElement("img")}} , з єдиною видимою різницею - він не має атрибутів src та alt attributes. Дійсно, <canvas> має лише два атрибути, {{htmlattrxref("width", "canvas")}} та{{htmlattrxref("height", "canvas")}}. Обидва вони не є обов'язковими, та можуть бути задані за допомогою {{Glossary("DOM")}} властивостей. Коли значення width та height не встановлені, canvas за замовчуванням буде 300 пікселів шириною, та 150 пікселів у висоту. Також можливо задати довільні розміри за допомогою  {{Glossary("CSS")}}, але під час ренедерингу зображення буде масштабуватися згідно з його розмірами: якщо задані в CSS параметри не відповідають початковому співвідношенню сторін canvas, воно буде викривленим. 

- -
-

Примітка: Якщо ваше зображення здається викривленимб спробуйте задати атрибути width and height атрибути в тегу <canvas> не використовуючи CSS.

-
- -

Атрибут id не специфіцний для  <canvas>, проте це один з global HTML attributes які можна викростивувати для  HTML елементів (наприклад, class). Використання id завжди є хорошим рішенням, тому що полегшує ідентифікацію елемента в скрипті. .

- -

<canvas> може бути стилізований так само, як і будь-яке звичайне зображення ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Ці правила, однак, не впливають на фактичний малюнок на canvas. Ми побачимо, як це робиться в спеціальній главі цього підручника. Якщо до canvas не застосовуються правила стилізації, воно за замовчуванням буде повністю прозорим.

- -
-

Резервний вміст

- -

<canvas> відрізняється від {{HTMLElement("img")}} тим, щоя як і для {{HTMLElement("video")}}, {{HTMLElement("audio")}}, або {{HTMLElement("picture")}} елементів, легко визначити деякий резервний вміст, котрий буде відображатися в старих браузерах, що не підтримують <canvas>, таких, як версії Internet Explorer до 9ї версії чи  текстових браузерах. Ви завжди повинні задавати резервний вміст, який буде відображатися в таких браузерах.

- -

Задати резервний вміст дуже просто, достатнь просто вставити альтернативний контент всередину елемента <canvas>. Браузери, які його не підтримують, проігноруюьб контейнер та відобразять альтернативний вміст замість нього. Браузери, які підтримують, пропустять вміст <canvas> і просто покажуть зображення нормально.

- -

наприклад, ми можемо задати текстовий опис вмісту  canvas чи використати статичне зображення динамічно створюваного контентуge of the dynamically rendered content. This can look something like this:

- -
<canvas id="stockGraph" width="150" height="150">
-  current stock price: $3.15 + 0.15
-</canvas>
-
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
-
- -

Рекомендація користувачу встановити інший браузер, що підтримує canvas,  не допомогає тим з них, хто не може взагалі прочтитати вміст canvas, наприклад. Використання резервного вмісту або додаткового DOM допомогає make the canvas more accessible.

- -

Обов'язковий тег </canvas> 

- -

Як наслідок способу надання резервного вмісту,  на відміну від елемента {{HTMLElement("img")}}, {{HTMLElement("canvas")}} вимагає  закриваючого тега (</canvas>). у випадку його відстусності, весь документ після  </canvas> буде розглядатися як резервний вміст та не буде показаний.

- -

Якщо резервний вміст не потрібен, простий <canvas id="foo" ...></canvas> повністю сумісний з усіма браузерами, що підтримують canvas.

- -

The rendering context

- -

The {{HTMLElement("canvas")}} element creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. In this tutorial, we focus on the 2D rendering context. Other contexts may provide different types of rendering; for example, WebGL uses a 3D context based on OpenGL ES.

- -

The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it. The {{HTMLElement("canvas")}} element has a method called {{domxref("HTMLCanvasElement.getContext", "getContext()")}}, used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context. For 2D graphics, such as those covered by this tutorial, you specify "2d" to get a {{domxref("CanvasRenderingContext2D")}}.

- -
var canvas = document.getElementById('tutorial');
-var ctx = canvas.getContext('2d');
-
- -

The first line in the script retrieves the node in the DOM representing the {{HTMLElement("canvas")}} element by calling the {{domxref("document.getElementById()")}} method. Once you have the element node, you can access the drawing context using its getContext() method.

- -
-

Checking for support

- -

The fallback content is displayed in browsers which do not support {{HTMLElement("canvas")}}. Scripts can also check for support programmatically by simply testing for the presence of the getContext() method. Our code snippet from above becomes something like this:

- -
var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext) {
-  var ctx = canvas.getContext('2d');
-  // drawing code here
-} else {
-  // canvas-unsupported code here
-}
-
-
-
- -

A skeleton template

- -

Here is a minimalistic template, which we'll be using as a starting point for later examples.

- -
-

Note: it is not good practice to embed a script inside HTML. We do it here to keep the example concise.

-
- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>Canvas tutorial</title>
-    <script type="text/javascript">
-      function draw() {
-        var canvas = document.getElementById('tutorial');
-        if (canvas.getContext) {
-          var ctx = canvas.getContext('2d');
-        }
-      }
-    </script>
-    <style type="text/css">
-      canvas { border: 1px solid black; }
-    </style>
-  </head>
-  <body onload="draw();">
-    <canvas id="tutorial" width="150" height="150"></canvas>
-  </body>
-</html>
-
- -

The script includes a function called draw(), which is executed once the page finishes loading; this is done by listening for the {{event("load")}} event on the document. This function, or one like it, could also be called using {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, or any other event handler, as long as the page has been loaded first.

- -

Here is how a template would look in action. As shown here, it is initially blank.

- -

{{EmbedLiveSample("A_skeleton_template", 160, 160)}}

- -

A simple example

- -

To begin, let's take a look at a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.

- -
<!DOCTYPE html>
-<html>
- <head>
-  <meta charset="utf-8"/>
-  <script type="application/javascript">
-    function draw() {
-      var canvas = document.getElementById('canvas');
-      if (canvas.getContext) {
-        var ctx = canvas.getContext('2d');
-
-        ctx.fillStyle = 'rgb(200, 0, 0)';
-        ctx.fillRect(10, 10, 50, 50);
-
-        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
-        ctx.fillRect(30, 30, 50, 50);
-      }
-    }
-  </script>
- </head>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
-</html>
-
- -

This example looks like this:

- -

{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}

diff --git a/files/uk/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/uk/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html deleted file mode 100644 index e02e218fa5..0000000000 --- a/files/uk/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Чутливі ділянки та доступність -slug: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility -tags: - - Canvas - - Графіка - - Полотно - - Підручник -translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility -original_slug: Web/API/Canvas_API/Tutorial/Чутливі_ділянки_та_доступність ---- -
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
- -
Власне HTML-елемент {{HTMLElement("canvas")}} являє собою лише множину кольорових точок і не містить жодних відомостей про намальовані об'єкти. Вміст полотна жодним чином не розкривається інструментам доступності, як це передбачено для семантичного HTML. Тож загалом, слід уникати використання полотен в застосунках або сайтах, від яких вимагається підтримка доступності. Проте наведені нижче настанови допоможуть все ж дещо уприступнити вміст полотен.
- -

Запасний вміст

- -

Вміст між тегами <canvas> … </canvas> може відігравати роль запасного варіанту для тих {{glossary("Browser", "переглядачів")}}, що не мають підтримки полотен. Він також вельми корисний тоді, коли користувач потребує допоміжних засобів (як-от екранний диктор), які можуть читати дерево DOM всередині. Чудовий приклад з html5accessibility.com показує, як це можна здійснити:

- -
<canvas>
-  <h2>Shapes</h2>
-  <p>A rectangle with a black border.
-   In the background is a pink circle.
-   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
-   Partially overlaying the circle is a green
-   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
-   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
-   both of which are semi-opaque, so the full circle can be seen underneath.</p>
-</canvas>
- -

Перегляньте відео від Стіва Фолкнера про те, як екранний диктор NVDA читає цей приклад.

- -

Правила ARIA

- -

Accessible Rich Internet Applications (ARIA) визначає способи того, як зробити веб-застосунки та вміст доступнішими для людей з певними вадами. Можна вжити ARIA-атрибути для описання поведінки й призначення HTML-елемента полотна:

- -
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
-
- -

Дивіться ARIA та Використання ARIA, щоб дізнатись більше.

- -

Чутливі ділянки

- -

Однією з поширених задач є з'ясування того, чи належать координати миші до певної ділянки на полотні. Відповідний API уможливлює створення певних чутливих ділянок на полотні та дає інші можливості розкрити взаємодіяльний вміст полотна інструментам доступності. Він дозволяє полегшити виявлення влучень (належності координат миші певній ділянці) та доправити відповідні події до елементів DOM. Цей API має такі три методи (досі лишаються дослідними в сучасних переглядачах, тож перевіряйте таблиці сумісності):

- -
-
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
-
Створює чутливу ділянку на полотні.
-
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
-
Видаляє з полотна чутливу ділянку із зазначеним id .
-
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
-
Видаляє з полотна всі чутливі ділянки.
-
- -

Створюючи новий контур з допомогою {{domxref("CanvasRenderingContext2D.beginPath()")}} можна перетворити його на чутливу ділянку, а тоді, перевіряючи значення властивості {{domxref("MouseEvent.region")}}, з'ясовувати, чи влучає миша у вказану область:

- -

HTML

- -
<canvas id="canvas"></canvas>
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
-ctx.fill();
-ctx.addHitRegion({id: 'circle'});
-
-canvas.addEventListener('mousemove', function(event) {
-  if (event.region) {
-    console.log('Влучив у ділянку: ' + event.region);  // Влучив у ділянку: circle
-  }
-});
-
- -

Крім того, метод addHitRegion() може також приймати параметр control, що вказує елемент (має бути нащадком елемента canvas), до якого доправлятимуться події:

- -
ctx.addHitRegion({control: element});
- -

Наприклад, це може стати в нагоді для доправлення подій до елементів {{HTMLElement("input")}}.

- -

Облямівки фокуса

- -

Для роботи з клавіатури, облямівки фокуса є зручними індикаторами, що полегшують пересування сторінкою. Щоб намалювати облямівку фокуса навколо малюнка (контура) на полотні, можна скористатися методом drawFocusIfNeeded().

- -
-
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
-
Якщо відповідний елемент перебуває у фокусі, цей метод намалює облямівку навколо контура.
-
- -

Крім того, можна використати метод scrollPathIntoView(), щоб зробити елемент видимим на екрані, якщо він перебуває у фокусі, наприклад.

- -
-
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
-
Гортає поточний чи вказаний контур до видимої області.
-
- -

Див. також

- - - -
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/uk/web/api/canvas_api/tutorial/index.html b/files/uk/web/api/canvas_api/tutorial/index.html deleted file mode 100644 index f712d8ed88..0000000000 --- a/files/uk/web/api/canvas_api/tutorial/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Canvas tutorial -slug: Web/API/Canvas_API/Tutorial -tags: - - Canvas - - Graphics - - Guide - - HTML - - HTML5 - - Intermediate - - NeedsTranslation - - TopicStub - - Web -translation_of: Web/API/Canvas_API/Tutorial ---- -
{{CanvasSidebar}}
- -

- -
-

<canvas> is an HTML element which can be used to draw graphics using scripting (usually JavaScript). This can, for instance, be used to draw graphs, make photo composition or simple (and not so simple) animations. The images on this page show examples of <canvas> implementations which will be created in this tutorial.

-
- -

This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.

- -

First introduced in WebKit by Apple for the OS X Dashboard, <canvas> has since been implemented in browsers. Today, all major browsers support it.

- -

Before you start

- -

Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The <canvas> element is not supported in some older browsers, but is supported in recent versions of all major browsers. The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML height and width property. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

- -

In this tutorial

- - - -

See also

- - - -

A note to contributors

- -

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.

- -
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
diff --git a/files/uk/web/api/console/dir/index.html b/files/uk/web/api/console/dir/index.html deleted file mode 100644 index 1f697b7b5e..0000000000 --- a/files/uk/web/api/console/dir/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Console.dir() -slug: Web/API/Console/dir -translation_of: Web/API/Console/dir ---- -
{{APIRef("Console API")}}{{Non-standard_header}}
- -

Відображає інтерактивний перелік властивостей заданого JavaScript об'єкту. Кінцеві дані показуються у вигляді ієрархічного списку з трикутниками, клікнувши на які мишкою Ви можете переглянути вміст дочірніх об'єктів.

- -

{{AvailableInWorkers}}

- -

console-dir.png

- -

Синтакс

- -
console.dir(object);
-
- -

Параметри

- -
-
object
-
Об'єкт JavaScript, властивості якого ви хочете переглянути.
-
- -

Сумісність із браузерами

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("8.0")}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Дивіться також

- - diff --git a/files/uk/web/api/console/index.html b/files/uk/web/api/console/index.html deleted file mode 100644 index 8a19610a53..0000000000 --- a/files/uk/web/api/console/index.html +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: Console -slug: Web/API/Console -tags: - - API - - Debugging - - Interface - - NeedsCompatTable - - NeedsTranslation - - Reference - - TopicStub - - console - - web console -translation_of: Web/API/Console ---- -
{{APIRef("Console API")}}
- -

The Console object provides access to the browser's debugging console (e.g., the Web Console in Firefox). The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.

- -

The Console object can be accessed from any global object, {{domxref("Window")}} on browsing scopes, {{domxref("WorkerGlobalScope")}}, and its specific variants in workers via property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply console. For example:

- -
console.log("Failed to open the specified link")
- -

This page documents the {{anch("Methods")}} available on the Console object and gives a few {{anch("Usage")}} examples.

- -

{{AvailableInWorkers}}

- -

Methods

- -
-
{{domxref("Console.assert()")}}
-
Log a message and stack trace to console if first argument is false.
-
{{domxref("Console.clear()")}}
-
Clear the console.
-
{{domxref("Console.count()")}}
-
Log the number of times this line has been called with the given label.
-
{{domxref("Console.debug()")}}
-
An alias for log() - starting with Chromium 58 this method is a no-op on Chromium browsers.
-
{{domxref("Console.dir()")}} {{Non-standard_inline}}
-
Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.
-
{{domxref("Console.dirxml()")}} {{Non-standard_inline}}
-
-

Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not.

-
-
{{domxref("Console.error()")}}
-
Outputs an error message. You may use string substitution and additional arguments with this method.
-
{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
-
An alias for error()
-
{{domxref("Console.group()")}}
-
Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().
-
{{domxref("Console.groupCollapsed()")}}
-
Creates a new inline group, indenting all following output by another level; unlike group(), this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call groupEnd().
-
{{domxref("Console.groupEnd()")}}
-
Exits the current inline group.
-
{{domxref("Console.info()")}}
-
Informative logging information. You may use string substitution and additional arguments with this method.
-
{{domxref("Console.log()")}}
-
For general output of logging information. You may use string substitution and additional arguments with this method.
-
{{domxref("Console.profile()")}} {{Non-standard_inline}}
-
Starts the browser's build-in profiler (for example, the Firefox performance tool). You can specify an optional name for the profile.
-
{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
-
Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the Firefox performance tool).
-
{{domxref("Console.table()")}}
-
Displays tabular data as a table.
-
{{domxref("Console.time()")}}
-
Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
-
{{domxref("Console.timeEnd()")}}
-
Stops the specified timer and logs the elapsed time in seconds since its start.
-
{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
-
Adds a marker to the browser's Timeline or Waterfall tool.
-
{{domxref("Console.trace()")}}
-
Outputs a stack trace.
-
{{domxref("Console.warn()")}}
-
Outputs a warning message. You may use string substitution and additional arguments with this method.
-
- - -

Usage

- -

Outputting text to the console

- -

The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods. Each of these results in output that's styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.

- -

There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.

- -

Outputting a single object

- -

The simplest way to use the logging methods is to output a single object:

- -
var someObject = { str: "Some text", id: 5 };
-console.log(someObject);
-
- -

The output looks something like this:

- -
[09:27:13.475] ({str:"Some text", id:5})
- -

Outputting multiple objects

- -

You can also output multiple objects by simply listing them when calling the logging method, like this:

- -
var car = "Dodge Charger";
-var someObject = {str:"Some text", id:5};
-console.info("My first car was a", car, ". The object is: ", someObject);
- -

This output will look like this:

- -
[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
-
- -

Using string substitutions

- -

Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:

- - - - - - - - - - - - - - - - - - - - - - - - -
Substitution stringDescription
%o or %OOutputs a JavaScript object. Clicking the object name opens more information about it in the inspector.
%d or %iOutputs an integer. Number formatting is supported, for example  console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01
%sOutputs a string.
%fOutputs a floating-point value. Formatting is supported, for example  console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10
- -

Each of these pulls the next argument after the format string off the parameter list. For example:

- -
for (var i=0; i<5; i++) {
-  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
-}
-
- -

The output looks like this:

- -
[13:14:13.481] Hello, Bob. You've called me 1 times.
-[13:14:13.483] Hello, Bob. You've called me 2 times.
-[13:14:13.485] Hello, Bob. You've called me 3 times.
-[13:14:13.487] Hello, Bob. You've called me 4 times.
-[13:14:13.488] Hello, Bob. You've called me 5 times.
-
- -

Styling console output

- -

You can use the "%c" directive to apply a CSS style to console output:

- -
console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
- -
The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.
- -
 
- -
- -
 
- -
-

Note: Quite a few CSS properties are supported by this styling; you should experiment and see which ones provide useful.

-
- -
 
- -
{{h3_gecko_minversion("Using groups in the console", "9.0")}}
- -

You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call console.group(). The console.groupCollapsed() method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.

- -
Note: Collapsed groups are not supported yet in Gecko; the groupCollapsed() method is the same as group() at this time.
- -

To exit the current group, simply call console.groupEnd(). For example, given this code:

- -
console.log("This is the outer level");
-console.group();
-console.log("Level 2");
-console.group();
-console.log("Level 3");
-console.warn("More of level 3");
-console.groupEnd();
-console.log("Back to level 2");
-console.groupEnd();
-console.debug("Back to the outer level");
-
- -

The output looks like this:

- -

nesting.png

- -
{{h3_gecko_minversion("Timers", "10.0")}}
- -

In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the console object. To start a timer, call the console.time() method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the console.timeEnd() method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.

- -

For example, given this code:

- -
console.time("answer time");
-alert("Click to continue");
-console.timeEnd("answer time");
-
- -

will log the time needed by the user to discard the alert box:

- -

timerresult.png

- -

Notice that the timer's name is displayed both when the timer is started and when it's stopped.

- -
Note: It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.
- -

Stack traces

- -

The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:

- -
function foo() {
-  function bar() {
-    console.trace();
-  }
-  bar();
-}
-
-foo();
-
- -

The output in the console looks something like this:

- -

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Initial definition.
- -

Notes

- - - -

See also

- - - -

Other implementations

- - diff --git a/files/uk/web/api/console/log/index.html b/files/uk/web/api/console/log/index.html deleted file mode 100644 index 8155ab780b..0000000000 --- a/files/uk/web/api/console/log/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Console.log() -slug: Web/API/Console/log -translation_of: Web/API/Console/log ---- -
{{APIRef("Console API")}}
- -

Виводить повідомлення  у веб консоль.

- -

Повідомлення може бути одним рядком (з необов'язковими значеннями заміщення) або може бути будь-яким одним або декількома об'єктами JavaScript.

- -

{{AvailableInWorkers}}

- -

Синтаксис

- -
console.log(obj1 [, obj2, ..., objN]);
-console.log(msg [, subst1, ..., substN]);
-
- -

Параметри

- -
-
obj1 ... objN
-
Перелік  JavaScript об'єктів для відображення. Представлення  кожного з цих об'єктів  об'єднаних разом та відображених в порядку переліку. Будьте обачливі, якщо ви вносите об'єкти в логи у останніх версіях Chrome та Firefox, адже те, що ви отримуєте у логах в консолі - це посилання на об'єкти, які не обов'язково є "значенням" даного об'єкту на момент виклику console.log(), але точно є значенням об'єкту в момент кліку по ньому, щоб відкрити.
-
msg
-
 JavaScript рядок містить нуль або більше  символів підміни.
-
subst1 ... substN
-
JavaScript об'єкти за допомогою яких можливо заміняти символи підміни в межах msg. Це надає додатковий контроль формату виводу.
-
- -

Дивіться Вивід тексту в консоль у документації {{domxref("console")}} більш детально.

- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName("Console API", "#log", "console.log()")}}{{Spec2("Console API")}}Initial definition
- -

Сумісність із браузерами

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ОзнакаChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базова підтримка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}8{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Рядки заміщення{{CompatVersionUnknown}}
- {{CompatChrome(28)}}[1]		{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}10[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Доступність для "воркерів"{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ОзнакаAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базова підтримка{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Рядки заміщення{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Доступність для "воркерів"{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Якщо від`ємне значення прямує до %d, воно буде заокруглене до найближчого від`ємного цілого, тому -0.1 стає -1.

- -

[2] %c не підтримується, %d буде візуалізоване, як 0, якщо це не є числом.

- -

Різниця із console.dir()

- -

Ви можете запитати себе, яка ж відмінність між console.dir() та console.log().

- -

Інша корисна відмінність існує у Chrome, коли відбувається надсилання DOM- елементів до консолі.

- -

- -

Помітимо:

- - - -

Зокрема, console.log надає спеціальну обробку для DOM - елементів, тоді як console.dir цього не робить. Це часто виявляється корисним при спробі отримати повне уявлення про об`єкти DOM JS.

- -

Більше інформації про ці та інші функції можна отримати за посиланням: Chrome Console API.

- -

Також перегляньте:

- - diff --git a/files/uk/web/api/customevent/index.html b/files/uk/web/api/customevent/index.html deleted file mode 100644 index 76b8aeef1a..0000000000 --- a/files/uk/web/api/customevent/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: CustomEvent -slug: Web/API/CustomEvent -tags: - - API - - DOM - - Interface - - NeedsCompatTable - - NeedsExample - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/CustomEvent ---- -

{{APIRef("DOM")}} Інтерфейс CustomEvent являє собою події, ініціалізовані додатком для будь-яких цілей.

- -

{{AvailableInWorkers}}

- -

Конструктор

- -
-
{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
-
Створює CustomEvent.
-
- -

Властивості

- -
-
{{domxref("CustomEvent.detail")}} {{readonlyinline}}
-
Будь-які дані, передані при ініціалізації події.
-
- -

Цей інтерфейс успадковує властивості від батьків, {{domxref("Event")}}:

- -

{{Page("/en-US/docs/Web/API/Event", "Properties")}}

- -

Методи

- -
-
{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}
-
-

Ініціалізує об'єкт CustomEvent. Якщо подія вже відправлена, цей метод нічого не робить.

-
-
- -

Цей інтерфейс успадковує властивості від батьків, {{domxref("Event")}}:

- -

{{Page("/en-US/docs/Web/API/Event", "Methods")}}

- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКомертарі
{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}{{Spec2('DOM WHATWG')}}Початкове визначення.
- -

Браузерна сумісність

- - - -

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

- -

Firing from privileged code to non-privileged code

- -

When firing a CustomEvent from privileged code (i.e. an extension) to non-privileged code (i.e. a webpage), security issues should be considered. Firefox and other Gecko applications restrict an object created in one context from being directly used for another, which will automatically prevent security holes, but these restrictions may also prevent your code from running as expected.

- -

While creating a CustomEvent object, you must create the object from the same window. The detail attribute of your CustomEvent will be subjected to the same restrictions. String and Array values will be readable by the content without restrictions, but custom Objects will not. While using a custom Object, you will need to define the attributes of that object that are readable from the content script using Components.utils.cloneInto().

- -
// doc is a reference to the content document
-function dispatchCustomEvent(doc) {
-  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
-  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
-  doc.dispatchEvent(myEvent);
-}
- -

But one needs to keep in mind that exposing a function will allow the content script to run it with chrome privileges, which can open a security vulnerability.

- -

Дивіться також

- - diff --git a/files/uk/web/api/customevent/initcustomevent/index.html b/files/uk/web/api/customevent/initcustomevent/index.html deleted file mode 100644 index 84ea6d6a28..0000000000 --- a/files/uk/web/api/customevent/initcustomevent/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: CustomEvent.initCustomEvent() -slug: Web/API/CustomEvent/initCustomEvent -translation_of: Web/API/CustomEvent/initCustomEvent ---- -

{{APIRef("DOM")}}{{deprecated_header}}

- -

Метод CustomEvent.initCustomEvent() ініціалізує  CustomEvent об'єкт. Якщо на момент ініціалізації event-об'єкт вже був переданий(dispatched), то виклик метода {{ domxref("CustomEvent.initCustomEvent()") }} не матиме ніякого ефекту.

- -

Події,ініціалізовані у такий спосіб, повинні бути створені за допомогою метода {{domxref("Document.createEvent()") }}.Вказаний метод має бути викликаний для створення події до того, як вона буде передана за допомогою {{ domxref("EventTarget.dispatchEvent()") }}. Як тільки подія є переданою, ніяких дій цей метод більше не виконує. 

- -
-

Більше не використовуйте цей метод, оскільки він засуджується.

- -

Натомість, використовуйте спеціальні конструктори подій, наприклад {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. Сторінка про  Creating and triggering events містить більше інформації про способи їхнього використання.

-
- -

Синтаксис

- -
event.initCustomEvent(type, canBubble, cancelable, detail);
-
- -

Параметри

- -
-
type
-
Це {{domxref("DOMString")}} , що містить назву події
-
canBubble
-
Це {{jsxref("Boolean")}} , що вказує чи подія виринає вгору(bubbles up) крізь DOM чи ні.
-
cancelable
-
Це {{jsxref("Boolean")}} , що вказує чи подія є cancelable.
-
detail
-
Дані, передані під час ініціалізації події
-
- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусОпис
{{SpecName('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}}{{Spec2('DOM WHATWG')}}Початкове визначення, однак, вже вважається небажаним, натомість, рекомендується використання конструктора,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
- -

Браузерна сумісність

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
ОписChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
-

Базова підтримка

- 		{{ CompatVersionUnknown() }}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop(6)}}9115.1 (533.3)
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
ОписAndroid WebviewChrome для AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базова підтримка{{ CompatVersionUnknown() }}[1]{{ CompatVersionUnknown() }}[1]{{CompatVersionUnknown}}{{CompatGeckoMobile(6)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

[1] Починаючи з Chrome 59, canBubble, cancelable, та detail є необов'язковими параметрами , які за замовчуванням містять значення false, false, та null відповідно.

- -

Дивіться також

- - diff --git a/files/uk/web/api/document/index.html b/files/uk/web/api/document/index.html deleted file mode 100644 index 491eaa618e..0000000000 --- a/files/uk/web/api/document/index.html +++ /dev/null @@ -1,470 +0,0 @@ ---- -title: Document -slug: Web/API/Document -tags: - - API - - DOM - - Інтерфейс - - Документ - - Посилання -translation_of: Web/API/Document ---- -
{{APIRef}}
- -
 
- -

Document інтерфейс представляє будь-яку веб-сторінку, завантажену в браузер і яка слугує точкою входу в контент веб-сторінки, чим є DOM tree. DOM tree включає елементи такі як {{HTMLElement("body")}} і {{HTMLElement("table")}}, серед багатьох інших. Це забезпечує глобальну функціональність для документу, таку як отримувати URL сторінки і створювати нові елементи в документі.

- -

{{inheritanceDiagram}}

- -

Інтерфейс Document описує загальні властивості і методи для будь-якого типу документу. Залежно від типу документу (e.g. HTML, XML, SVG, …), більший API доступний: HTML-документи, які подаються з text/html типом контенту, також реалізовують {{domxref("HTMLDocument")}} інтерфейс, тоді як XML і SVG документи реалізовують {{domxref("XMLDocument")}} інтерфейс.

- -

Конструктор

- -
-
{{domxref("Document.Document","Document()")}}{{non-standard_inline}}
-
Створює новий Document об'єкт.
-
- -

Властивості

- -

Цей інтерфейс також розширює {{domxref("Node")}} і {{domxref("EventTarget")}} інтерфейси.

- -
-
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
-
Забезпечує доступ до всіх елементів в документі. Це застарілий, нестандартний інтерфейс і він не повинен використовуватись.
-
{{domxref("Document.async")}} {{Deprecated_inline}}
-
Використовується з {{domxref("Document.load")}} щоб вказати асинхронний запит.
-
{{domxref("Document.body")}}
-
Повертає {{HTMLElement("body")}}, або {{htmlelement("frameset")}} вузол поточного документу.
-
{{domxref("Document.characterSet")}} {{readonlyinline}}
-
Повертає кодування, яке використовується в документі.
-
{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}
-
Псевдонім для {{domxref("Document.characterSet")}}. Використовуй цю властивість взамін.
-
{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}
-
Вказує чи документ інтерпретується в quirks чи strict режимі.
-
{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}
-
Повертає Content-Type з MIME-заголовку поточного документу.
-
{{domxref("Document.doctype")}} {{readonlyinline}}
-
Повертає Визначення Типу Документу (DTD) поточного документу.
-
{{domxref("Document.documentElement")}} {{readonlyinline}}
-
Повертає {{domxref("Element")}}, який є прямим нащадком document. Для HTML-документів, це, як правило, {{domxref("HTMLElement")}} елемент.
-
{{domxref("Document.documentURI")}} {{readonlyinline}}
-
Повертає розміщення документу у вигляді стрічки.
-
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
-
Повинна повертати {{domxref("DOMConfiguration")}} об'єкт.
-
{{domxref("Document.fullscreen")}} {{obsolete_inline}}
-
true,якщо документ в {{domxref("Using_full-screen_mode","full-screen mode")}}.
-
{{domxref("Document.hidden")}} {{readonlyinline}}
-
…
-
{{domxref("Document.implementation")}} {{readonlyinline}}
-
Повертає DOM реалізацію, асоційовану з поточним документом.
-
{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}
-
Псевдонім для {{domxref("Document.characterSet")}}. Використовуй цю властивість взамін.
-
{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}
-
Повертає ім'я набору стилів, які були останніми включені.  Має значення null, аж поки таблиця стилів змінена встановленням значення {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
-
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
-
Повертає {{jsxref("Boolean")}}, яким є true лише якщо цей документ є синтетичним, таким як окреме зображення, відео-, аудіо-файл, або т. п.
-
{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
-
Елемент, який зараз є в повноекранному режимі для цього документу.
-
{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
-
true, якщо виклик {{domxref("Element.mozRequestFullscreen()")}} буде успішним в поточному документі.
-
{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}
-
Повертає бажаний набір стилів, як вказано автором сторінки.
-
{{domxref("Document.scrollingElement")}} {{readonlyinline}}
-
Повертає посилання на {{domxref("Element")}} ,який прокручує документ.
-
{{domxref("Document.selectedStyleSheetSet")}}
-
Повертає набір стилів, який зараз у використанні.
-
{{domxref("Document.styleSheetSets")}} {{readonlyinline}}
-
Повертає список наборів стилів, доступних для документу.
-
{{domxref("Document.timeline")}} {{readonlyinline}}
-
…
-
{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}
-
…
-
{{domxref("Document.visibilityState")}} {{readonlyinline}}
-
-

Повертає string, яка виражає видимість стану документу. Можливими значеннями є visible,  hidden,  prerender, і unloaded.

-
-
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
-
Повертає кодування, як визначено XML-оголошенням.
-
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
-
Повертає true, якщо оголошення XML  вказує документу бути автономним (e.g., Зовнішня частина DTD впливає на контент документу), або false.
-
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
-
Повертає номер версії, як вказано в XML-оголошенні, або "1.0", якщо оголошення відсутнє.
-
- -

Document інтерфейс розширюється {{domxref("ParentNode")}} інтерфейсом:

- -

{{page("/en-US/docs/Web/API/ParentNode","Properties")}}

- -

 Розширення для HTML-документу

- -

Інтерфейс Document для HTML-документів розширює {{domxref("HTMLDocument")}} інтерфейс, або, починаючи з HTML5,  розширюється для таких документів.

- -
-
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
-
Повертає або встановлює колір активних посилань в тілі документу.
-
{{domxref("Document.anchors")}}
-
Повертає список всіх якорів в документі.
-
{{domxref("Document.applets")}} {{Deprecated_inline}}
-
Повертає впорядкований список апплетів в межах документу.
-
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
-
Отримує/встановлює фоновий колір поточного документу.
-
{{domxref("Document.cookie")}}
-
Повертає список куків, розділених крапкою з комою, для того документу або встановлює одиничний кукі.
-
{{domxref("Document.defaultView")}} {{readonlyinline}}
-
Повертає посилання на об'єкт window.
-
{{domxref("Document.designMode")}}
-
Отримує/встановлює можливість редагування цілого документу.
-
{{domxref("Document.dir")}} {{readonlyinline}}
-
Отримує/встановлює направленість (rtl - справа наліво/ltr зліва направо) документу.
-
{{domxref("Document.domain")}}
-
Отримує/встановлює домен поточного документу.
-
{{domxref("Document.embeds")}} {{readonlyinline}}
-
Повертає список вбудованих {{HTMLElement('embed')}} елементів в межах поточного документу.
-
{{domxref("document.fgColor")}} {{Deprecated_inline}}
-
Отримує/встановлює колір переднього плану, або колір тексту поточного документу.
-
{{domxref("Document.forms")}} {{readonlyinline}}
-
Повертає список {{HTMLElement("form")}} елементів в межах поточного документу.
-
{{domxref("Document.head")}} {{readonlyinline}}
-
Повертає {{HTMLElement("head")}} елемент поточного документу.
-
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
-
Отримує/встановлює висоту поточного документу.
-
{{domxref("Document.images")}} {{readonlyinline}}
-
Повертає список зображень в поточному документі.
-
{{domxref("Document.lastModified")}} {{readonlyinline}}
-
Повертає дату, коли документ був востаннє змінений.
-
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
-
Отримує/встановлює колір гіперпосилань в документі.
-
{{domxref("Document.links")}} {{readonlyinline}}
-
Повертає список всіх гіперпосилань в документі.
-
{{domxref("Document.location")}} {{readonlyinline}}
-
Повертає URI поточного документу.
-
{{domxref("Document.plugins")}} {{readonlyinline}}
-
Повертає список доступних плагінів.
-
{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}
-
Повертає статус завантаження документу.
-
{{domxref("Document.referrer")}} {{readonlyinline}}
-
Повертає URI сторінки, яка прив'язана до цієї сторінки.
-
{{domxref("Document.scripts")}} {{readonlyinline}}
-
Повертає всі {{HTMLElement("script")}} елементи в документі.
-
{{domxref("Document.title")}}
-
Встановлює або отримує назву поточного документу.
-
{{domxref("Document.URL")}} {{readonlyInline}}
-
Повертає розміщення документу у вигляді стрічки.
-
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
-
Отримує/встановлює колір відвіданих гіперпосилань.
-
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
-
Повертає ширину поточного документу.
-
- -

Властивості, включені з DocumentOrShadowRoot

- -

Інтерфейс Document включає наступні властивості, визначені в {{domxref("DocumentOrShadowRoot")}} міксині. Зверни увагу, що це, на даний час, реалізовано в Chrome; інші браузери все ще реалізують їх безпосередньо через {{domxref("Document")}} інтерфейс.

- -
-
{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}
-
Returns the {{domxref('Element')}} within the shadow tree that has focus.
-
{{domxref("Document.fullscreenElement")}} {{readonlyinline}}
-
The element that's currently in full screen mode for this document.
-
{{domxref("DocumentOrShadowRoot.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}
-
Returns the element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another document.
-
{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}
-
Returns a {{domxref('StyleSheetList')}} of {{domxref('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.
-
- -

Event handlers

- -
-
{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}
-
Represents the event handling code for the {{event("afterscriptexecute")}} event.
-
{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}
-
Represents the event handling code for the {{event("beforescriptexecute")}} event.
-
{{domxref("Document.oncopy")}} {{non-standard_inline}}
-
Represents the event handling code for the {{event("copy")}} event.
-
{{domxref("Document.oncut")}} {{non-standard_inline}}
-
Represents the event handling code for the {{event("cut")}} event.
-
{{domxref("Document.onfullscreenchange")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.
-
{{domxref("Document.onfullscreenerror")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.
-
{{domxref("Document.onpaste")}} {{non-standard_inline}}
-
Represents the event handling code for the {{event("paste")}} event.
-
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
-
Represents the event handling code for the {{event("pointerlockchange")}} event.
-
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
-
Represents the event handling code for the {{event("pointerlockerror")}} event.
-
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
-
Represents the event handling code for the {{event("readystatechange")}} event.
-
{{domxref("Document.onselectionchange")}} {{experimental_inline}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
-
{{domxref("Document.onvisibilitychange")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("visibilitychange")}} event is raised.
-
{{domxref("Document.onwheel")}} {{non-standard_inline}}
-
Represents the event handling code for the {{event("wheel")}} event.
-
- -

The Document interface is extended with the {{domxref("GlobalEventHandlers")}} interface:

- -

{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}

- -

Методи

- -

Цей інтерфейс також розширює {{domxref("Node")}} і {{domxref("EventTarget")}} інтерфейси.

- -
-
{{domxref("Document.adoptNode()")}}
-
Приймає вузол із зовнішнього документу.
-
{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}
-
Дивись {{domxref("Window.captureEvents")}}.
-
{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}
-
Отримує об'єкт {{Domxref("Range")}} для фрагмента документу у відповідності до вказаних координат.
-
{{domxref("Document.createAttribute()")}}
-
Створює новий об'єкт {{domxref("Attr")}} і повертає його.
-
{{domxref("Document.createAttributeNS()")}}
-
Створює  новий вузол атрибута в заданому просторі імен і повертає його.
-
{{domxref("Document.createCDATASection()")}}
-
Створює новий вузол CDATA і повертає його.
-
{{domxref("Document.createComment()")}}
-
 Створює новий вузол коментаря і повертає його.
-
{{domxref("Document.createDocumentFragment()")}}
-
Створює новий фрагмент документу.
-
{{domxref("Document.createElement()")}}
-
Створює новий елемент із заданим ім'ям тега.
-
{{domxref("Document.createElementNS()")}}
-
Створює новий елемент із заданим ім'ям тега і URI простором імен.
-
{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}
-
Створює нове посилання на об'єкт і повертає його.
-
{{domxref("Document.createEvent()")}}
-
Створює об'єкт події.
-
{{domxref("Document.createNodeIterator()")}}
-
Створює об'єкт {{domxref("NodeIterator")}}.
-
{{domxref("Document.createProcessingInstruction()")}}
-
Створює новий об'єкт {{domxref("ProcessingInstruction")}}.
-
{{domxref("Document.createRange()")}}
-
Створює об'єкт {{domxref("Range")}}.
-
{{domxref("Document.createTextNode()")}}
-
Створює текстовий вузол.
-
{{domxref("Document.createTouch()")}} {{Deprecated_inline}}
-
Створює об'єкт {{domxref("Touch")}}.
-
{{domxref("Document.createTouchList()")}}
-
Створює об'єкт {{domxref("TouchList")}}.
-
{{domxref("Document.createTreeWalker()")}}
-
 Створює об'єкт{{domxref("TreeWalker")}}.
-
{{domxref("Document.enableStyleSheetsForSet()")}}
-
Вмикає таблиці стилів для вказаного набору таблиць стилів.
-
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
-
Звільняє блокування вказівника.
-
{{domxref("Document.getAnimations()")}} {{experimental_inline}}
-
Повертає масив всіх об'єктів {{domxref("Animation")}}, які діють на даний момент, чиї цільові елементи є нащадками document.
-
{{domxref("Document.getElementsByClassName()")}}
-
Повертає список елементів із заданим ім'ям класу.
-
{{domxref("Document.getElementsByTagName()")}}
-
Повертає список елементів із заданим ім'ям тега.
-
{{domxref("Document.getElementsByTagNameNS()")}}
-
Повертає список елементів із заданим ім'ям тега і простором імен.
-
{{domxref("Document.importNode()")}}
-
Повертає клон вузла з зовнішнього документу.
-
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
-
Заміняє сутності, нормалізує текстові вузли, і т. д.
-
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
-
Звільняє поточний захват мишки, якщо він знаходиться на елементі в цьому документі.
-
{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}
-
Дивись {{domxref("Window.releaseEvents()")}}.
-
{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}
-
Дивись {{domxref("Window.routeEvent()")}}.
-
{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
-
Дозволяє змінити елемент, який використовуєтья в якості фонового зображення для вказаного ідентифікатора елемента. 
-
- -

Інтерфейс Document розширюється інтерфейсом {{domxref("ParentNode")}}:

- -
-
{{domxref("document.getElementById","document.getElementById(String id)")}}
-
Повертає посилання на об'єкт визначеного елемента.
-
{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
-
Повертає перший Element-вузол в межах документу, в порядку документу, який співпадає зі вказаними селекторами.
-
{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
-
Повертає список всіх Element-вузлів в межах документу, які співпадають з вказаними селекторами.
-
- -

Інтерфейс Document розширюється інтерфейсом {{domxref("XPathEvaluator")}}:

- -
-
{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}
-
Компілює XPathExpression який може тоді бути використаний для (повторюваних) оцінювань.
-
{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}
-
Створює об'єкт {{domxref("XPathNSResolver")}}.
-
{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
-
Вираховує вираз XPath.
-
- -

Розширення для HTML-документів

- -

інтерфейс Document для HTML-документів наслідується від інтерфейсу {{domxref("HTMLDocument")}} або, починаючи з HTML5,  розширюється для таких документів:

- -
-
{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
-
In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.
-
{{domxref("document.close()")}}
-
Closes a document stream for writing.
-
{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}
-
On an editable document, executes a formating command.
-
{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}
-
Returns a list of elements with the given name.
-
{{domxref("document.hasFocus()")}}
-
Returns true if the focus is currently located anywhere inside the specified document.
-
{{domxref("document.open()")}}
-
Opens a document stream for writing.
-
{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}
-
Returns true if the formating command can be executed on the current range.
-
{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}
-
Returns true if the formating command is in an indeterminate state on the current range.
-
{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}
-
Returns true if the formating command has been executed on the current range.
-
{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}
-
Returns true if the formating command is supported on the current range.
-
{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}
-
Returns the current value of the current range for a formating command.
-
{{domxref("document.write","document.write(String text)")}}
-
Writes text in a document.
-
{{domxref("document.writeln","document.writeln(String text)")}}
-
Writes a line of text in a document.
-
- -

Methods included from DocumentOrShadowRoot

- -

The Document interface includes the following methods defined on the {{domxref("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the {{domxref("Document")}} interface.

- -
-
{{domxref("DocumentOrShadowRoot.getSelection()")}}
-
Returns a {{domxref('Selection')}} object representing the range of text selected by the user, or the current position of the caret.
-
{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}
-
Returns the topmost element at the specified coordinates.
-
{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}
-
Returns an array of all elements at the specified coordinates.
-
{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}
-
Returns a {{domxref('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}{{Spec2('Page Visibility API')}}Adds onvisibilitychange.
{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectstart and onselectionchange.
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Initial definition for the interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Turn the {{domxref("HTMLDocument")}} interface into a Document extension.
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Define the {{domxref("XPathEvaluator")}} interface which extend document.
{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}{{Spec2('Page Visibility API')}}Extend the Document interface with the visibilityState and hidden attributes
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Extend the Document interface
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Extend the Document interface
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Extend the Document interface
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extend the Document interface
- -

Browser compatibility notes

- -

Firefox notes

- -

Mozilla defines a set of non-standard properties made only for XUL content:

- -
-
{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
-
Returns the {{HTMLElement("script")}} element that is currently executing.
-
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
-
(Mozilla add-ons only!) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).
-
{{domxref("document.popupNode")}}
-
Returns the node upon which a popup was invoked.
-
{{domxref("document.tooltipNode")}}
-
Returns the node which is the target of the current tooltip.
-
- -

Mozilla also define some non-standard methods:

- -
-
{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
-
This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
-
{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}
-
Use the {{domxref("Element.getBoundingClientRect()")}} method instead.
-
{{domxref("document.loadOverlay")}}
-
Loads a XUL overlay dynamically. This only works in XUL documents.
-
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
-
This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
-
- -

Internet Explorer notes

- -

Microsoft defines some non-standard properties:

- -
-
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
-
Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See MSDN.
-
Internet Explorer does not support all methods from the Node interface in the Document interface:
-
- -
-
{{domxref("document.contains")}}
-
As a work-around, document.body.contains() can be used.
-
diff --git a/files/uk/web/api/document/visibilitychange_event/index.html b/files/uk/web/api/document/visibilitychange_event/index.html deleted file mode 100644 index be68d28a48..0000000000 --- a/files/uk/web/api/document/visibilitychange_event/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 'Документ: зміна видимості' -slug: Web/API/Document/visibilitychange_event -tags: - - API - - API відображення сторінки - - visibilitychange - - відображення сторінки - - фоновий режим -translation_of: Web/API/Document/visibilitychange_event ---- -
{{APIRef}}
- -

Подія  visibilitychange запускається в документі, коли вміст його вкладки змінився, став видимим або прихованим.

- - - - - - - - - - - - - - - - - - - - -
БульбашкиТак
СкасовуєтьсяНі
Інтерфейс{{domxref("event")}}
Свойство обработчика события{{domxref("Document.onvisibilitychange", "onvisibilitychange")}}
- -

Інформація про використання

- -

У подію не включено оновлення статусу видимості документа, але цю інформацію можна отримати з властивості {{domxref ("Document.visibilityState", "visibilityState")}} документа.

- -

Приклади

- -

У цьому прикладі починається відтворення музичного запису, коли документ стає видимим, і призупиняється відтворення музики, коли документ більше не видно.

- -
document.addEventListener("visibilitychange", function() {
-  if (document.visibilityState === 'visible') {
-    backgroundMusic.play();
-  } else {
-    backgroundMusic.pause();
-  }
-});
-
- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('Page Visibility API','#sec-visibilitychange-event','visibilitychange')}}{{Spec2('Page Visibility API')}}
- -

Сумісність з браузерами

- -

{{Compat("api.Document.visibilitychange")}}

- -

Дивись також

- - diff --git a/files/uk/web/api/domstring/index.html b/files/uk/web/api/domstring/index.html deleted file mode 100644 index 54ba0dee57..0000000000 --- a/files/uk/web/api/domstring/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: DOMString -slug: Web/API/DOMString -translation_of: Web/API/DOMString ---- -
{{APIRef("DOM")}}
- -

DOMString  є 16-бітовою послідовністю безнакових цілих, типово інтерпретуєтьсят як UTF-16 code units. Це точно відповідає до JavaScript примітивному типу String. Коли DOMString застосовється у JavaScript, це напряму відображує відповідну {{jsxref("String")}}.

- -

When a Web API accepts a DOMString, the value provided will be stringified, using the ToString abstract operation. (For types other than Symbol, this has the same behavior as the {{jsxref("String/String", "String()")}} function.)

- -

Certain Web APIs accepting a DOMString have an additional legacy behavior, where passing {{jsxref("null")}} stringifies to the empty string instead of the usual "null".

- -

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

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}{{Spec2('WebIDL')}}
{{SpecName('WebIDL', '#es-DOMString')}}{{Spec2('WebIDL')}}This defines how JavaScript values are converted to DOMString and vice versa.
- -

Також дивися:

- - diff --git a/files/uk/web/api/element/getclientrects/index.html b/files/uk/web/api/element/getclientrects/index.html deleted file mode 100644 index 5a88f0321c..0000000000 --- a/files/uk/web/api/element/getclientrects/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: Element.getClientRects() -slug: Web/API/Element/getClientRects -translation_of: Web/API/Element/getClientRects ---- -
{{APIRef("DOM")}}
- -

getClientRects() метод {{domxref("Element")}} інтерфейсу повертає колекцію {{DOMxRef("DOMRect")}} об'єктів, які позначають границі прямокутників для кожної CSS border box в клієнта.

- -

Syntax

- -
let rectCollection = object.getClientRects();
- -

Return value

- -

Повернене значення є колекцією {{DOMxRef("DOMRect")}} об'єктів, один для кожної CSS border box асоційованої з елементом. Кожен {{DOMxRef("DOMRect")}} об'єкт містить лише для читання left, top, right і bottom властивості, які описують border box, в пікселях, з top-left відносно до top-left видимої області веб-сторінки. For tables with captions, the caption is included even though it's outside the border box of the table. When called on SVG elements other than an outer-<svg>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rectangles are also transformed by the outer-<svg>'s viewBox transform, if any).

- -

Originally, Microsoft intended this method to return a TextRectangle object for each line of text. However, the CSSOM working draft specifies that it returns a {{DOMxRef("DOMRect")}} for each border box. For an inline element, the two definitions are the same. But for a block element, Mozilla will return only a single rectangle.

- -

{{Fx_MinVersion_Note(3.5, "Firefox 3.5 adds width and height properties to the TextRectangle object.")}}

- -

The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the rectangles.

- -

The returned rectangles do not include the bounds of any child elements that might happen to overflow.

- -

For HTML {{HtmlElement("area")}} elements, SVG elements that do not render anything themselves, display:none elements, and generally any elements that are not directly rendered, an empty list is returned.

- -

Rectangles are returned even for CSS boxes that have empty border-boxes. The left, top, right, and bottom coordinates can still be meaningful.

- -

Fractional pixel offsets are possible.

- -

Examples

- -

These examples draw client rects in various colors. Note that the JavaScript function that paints the client rects is connected to the markup via the class withClientRectsOverlay.

- -

HTML

- -

Example 1: This HTML creates three paragraphs with a <span> inside, each embedded in a <div> block. Client rects are painted for the paragraph in the second block, and for the <span> element in the third block.

- -
<h3>A paragraph with a span inside</h3>
-<p>Both the span and the paragraph have a border set. The
-  client rects are in red. Note that the p has onlyone border
-  box, while the span has multiple border boxes.</p>
-
-<div>
-  <strong>Original</strong>
-  <p>
-    <span>Paragraph that spans multiple lines</span>
-  </p>
-</div>
-
-<div>
-  <strong>p's rect</strong>
-  <p class="withClientRectsOverlay">
-    <span>Paragraph that spans multiple lines</span>
-  </p>
-</div>
-
-<div>
-  <strong>span's rect</strong>
-  <p>
-    <span class="withClientRectsOverlay">Paragraph that spans multiple lines</span>
-  </p>
-</div>
- -

Example 2: This HTML creates three ordered lists. Client rects are painted for the <ol> in the second block, and for each <li> element in the third block.

- -
<h3>A list</h3>
-<p>Note that the border box doesn't include the number, so
-  neither do the client rects.</p>
-
-<div>
-  <strong>Original</strong>
-  <ol>
-    <li>Item 1</li>
-    <li>Item 2</li>
-  </ol>
-</div>
-
-<div>
-  <strong>ol's rect</strong>
-  <ol class="withClientRectsOverlay">
-    <li>Item 1</li>
-    <li>Item 2</li>
-  </ol>
-</div>
-
-<div>
-  <strong>each li's rect</strong>
-  <ol>
-    <li class="withClientRectsOverlay">Item 1</li>
-    <li class="withClientRectsOverlay">Item 2</li>
-  </ol>
-</div>
- -

Example 3: This HTML creates two tables with captions. Client rects are painted for the <table> in the second block.

- -
<h3>A table with a caption</h3>
-<p>Although the table's border box doesn't include the
-  caption, the client rects do include the caption.</p>
-
-<div>
-  <strong>Original</strong>
-  <table>
-    <caption>caption</caption>
-    <thead>
-      <tr><th>thead</th></tr>
-    </thead>
-    <tbody>
-      <tr><td>tbody</td></tr>
-    </tbody>
-  </table>
-</div>
-
-<div>
-  <strong>table's rect</strong>
-  <table class="withClientRectsOverlay">
-    <caption>caption</caption>
-    <thead>
-      <tr><th>thead</th></tr>
-    </thead>
-    <tbody>
-      <tr><td>tbody</td></tr>
-    </tbody>
-  </table>
-</div>
- -

CSS

- -

The CSS draws borders around the paragraph and the <span> inside each <div> block for the first example, around the <ol> and li for the second example, and around <table>, <th>, and <td> elements for the third example.

- -
strong {
-  text-align: center;
-}
-div {
-  display: inline-block;
-  width: 150px;
-}
-div p, ol, table {
-  border: 1px solid blue;
-}
-span, li, th, td {
-  border: 1px solid green;
-}
- -

JavaScript

- -

The JavaScript code draws the client rects for all HTML elements that have CSS class withClientRectsOverlay assigned.

- -
function addClientRectsOverlay(elt) {
-  /* Absolutely position a div over each client rect so that its border width
-     is the same as the rectangle's width.
-     Note: the overlays will be out of place if the user resizes or zooms. */
-  var rects = elt.getClientRects();
-  for (var i = 0; i != rects.length; i++) {
-    var rect = rects[i];
-    var tableRectDiv = document.createElement('div');
-    tableRectDiv.style.position = 'absolute';
-    tableRectDiv.style.border = '1px solid red';
-    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
-    tableRectDiv.style.margin = tableRectDiv.style.padding = '0';
-    tableRectDiv.style.top = (rect.top + scrollTop) + 'px';
-    tableRectDiv.style.left = (rect.left + scrollLeft) + 'px';
-    // We want rect.width to be the border width, so content width is 2px less.
-    tableRectDiv.style.width = (rect.width - 2) + 'px';
-    tableRectDiv.style.height = (rect.height - 2) + 'px';
-    document.body.appendChild(tableRectDiv);
-  }
-}
-
-(function() {
-  /* Call function addClientRectsOverlay(elt) for all elements with
-     assigned class "withClientRectsOverlay" */
-  var elt = document.getElementsByClassName('withClientRectsOverlay');
-  for (var i = 0; i < elt.length; i++) {
-    addClientRectsOverlay(elt[i]);
-  }
-})();
- -

Result

- -

{{EmbedLiveSample('Examples', 680, 650)}}

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}{{Spec2("CSSOM View")}}Initial definition
- -

Notes

- -

getClientRects() was first introduced in the MS IE DHTML object model.

- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/uk/web/api/element/index.html b/files/uk/web/api/element/index.html deleted file mode 100644 index aa007c48e7..0000000000 --- a/files/uk/web/api/element/index.html +++ /dev/null @@ -1,490 +0,0 @@ ---- -title: Element -slug: Web/API/Element -tags: - - API - - DOM - - DOM Reference - - Element - - Interface - - NeedsTranslation - - Reference - - TopicStub - - Web API -translation_of: Web/API/Element ---- -
{{APIRef("DOM")}}
- -

Elementце найбільш загальний базовий классз якого наслідуються всі об'єкти {{DOMxRef("Document")}} .  Тільки він має методи та властивості, загальні для всіх видів елементів. Більшість специфічних классів наслідуються з Element. Наприклад, {{DOMxRef("HTMLElement")}} інтерфейс є базовим інтерфейсом для HTML елементів, тоді як {{DOMxRef("SVGElement")}} інтерфейс є базовим для усіх SVG елементів. Більшість функціональності визначається ще далі у ієрархії классу.

- -

Мови за межами сфери Web платформ, такі як XUL, через інтерфейс XULElement , також застосовують Element.

- -

{{InheritanceDiagram}}implement

- -

Properties

- -

Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.

- -
-
{{DOMxRef("Element.attributes")}} {{readOnlyInline}}
-
Returns a {{DOMxRef("NamedNodeMap")}} object containing the assigned attributes of the corresponding HTML element.
-
{{DOMxRef("Element.classList")}} {{readOnlyInline}}
-
Returns a {{DOMxRef("DOMTokenList")}} containing the list of class attributes.
-
{{DOMxRef("Element.className")}}
-
Is a {{DOMxRef("DOMString")}} representing the class of the element.
-
{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}
-
Returns a {{jsxref("Number")}} representing the inner height of the element.
-
{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}
-
Returns a {{jsxref("Number")}} representing the width of the left border of the element.
-
{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}
-
Returns a {{jsxref("Number")}} representing the width of the top border of the element.
-
{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}
-
Returns a {{jsxref("Number")}} representing the inner width of the element.
-
{{DOMxRef("Element.computedName")}} {{readOnlyInline}}
-
Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.
-
{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}
-
Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. 
-
{{DOMxRef("Element.id")}}
-
Is a {{DOMxRef("DOMString")}} representing the id of the element.
-
{{DOMxRef("Element.innerHTML")}}
-
Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.
-
{{DOMxRef("Element.localName")}} {{readOnlyInline}}
-
A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.
-
{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}
-
The namespace URI of the element, or null if it is no namespace. -
-

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}

-
-
-
{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}
-
Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or null if there's no sibling node.
-
{{DOMxRef("Element.outerHTML")}}
-
Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.
-
{{DOMxRef("Element.prefix")}} {{readOnlyInline}}
-
A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or null if no prefix is specified.
-
{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}
-
Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or null if there is no sibling element.
-
{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}
-
Returns a {{jsxref("Number")}} representing the scroll view height of an element.
-
{{DOMxRef("Element.scrollLeft")}}
-
Is a {{jsxref("Number")}} representing the left scroll offset of the element.
-
{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
-
Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.
-
{{DOMxRef("Element.scrollTop")}}
-
A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.
-
{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
-
Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.
-
{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}
-
Returns a {{jsxref("Number")}} representing the scroll view width of the element.
-
{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}
-
Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.
-
{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
-
Returns the shadow root that is hosted by the element, regardless if its open or closed. Available only to WebExtensions.
-
{{DOMxRef("Element.slot")}} {{Experimental_Inline}}
-
Returns the name of the shadow DOM slot the element is inserted in.
-
{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}
-
Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.
-
{{DOMxRef("Element.tagName")}} {{readOnlyInline}}
-
Returns a {{jsxref("String")}} with the name of the tag for the given element.
-
{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}
-
Returns the {{DOMxRef("UndoManager")}} associated with the element.
-
{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}
-
Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.
-
- -
-

Note: DOM Level 3 defined namespaceURI, localName and prefix on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to Element.

- -

This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.

-
- -

Properties included from Slotable

- -

The Element interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.

- -
-
{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}
-
Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.
-
- -

Event handlers

- -
-
{{domxref("Element.onfullscreenchange")}}
-
An event handler for the {{event("fullscreenchange")}} event, which is sent when the element enters or exits full-screen mode. This can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is running in the background.
-
{{domxref("Element.onfullscreenerror")}}
-
An event handler for the {{event("fullscreenerror")}} event, which is sent when an error occurs while attempting to change into full-screen mode.
-
- -

Methods

- -

Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.

- -
-
{{DOMxRef("EventTarget.addEventListener()")}}
-
Registers an event handler to a specific event type on the element.
-
{{DOMxRef("Element.attachShadow()")}}
-
Attaches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.
-
{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}
-
A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
-
{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}
-
Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.
-
{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
-
Creates a shadow DOM on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.
-
{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
-
Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.
-
{{DOMxRef("EventTarget.dispatchEvent()")}}
-
Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.
-
{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}
-
Returns an array of Animation objects currently active on the element.
-
{{DOMxRef("Element.getAttribute()")}}
-
Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.
-
{{DOMxRef("Element.getAttributeNames()")}}
-
Returns an array of attribute names from the current element.
-
{{DOMxRef("Element.getAttributeNS()")}}
-
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.
-
{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}
-
Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.
-
{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}
-
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.
-
{{DOMxRef("Element.getBoundingClientRect()")}}
-
Returns the size of an element and its position relative to the viewport.
-
{{DOMxRef("Element.getClientRects()")}}
-
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
-
{{DOMxRef("Element.getElementsByClassName()")}}
-
Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.
-
{{DOMxRef("Element.getElementsByTagName()")}}
-
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.
-
{{DOMxRef("Element.getElementsByTagNameNS()")}}
-
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.
-
{{DOMxRef("Element.hasAttribute()")}}
-
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.
-
{{DOMxRef("Element.hasAttributeNS()")}}
-
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.
-
{{DOMxRef("Element.hasAttributes()")}}
-
Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.
-
{{DOMxRef("Element.hasPointerCapture()")}}
-
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
-
{{DOMxRef("Element.insertAdjacentElement()")}}
-
Inserts a given element node at a given position relative to the element it is invoked upon.
-
{{DOMxRef("Element.insertAdjacentHTML()")}}
-
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
-
{{DOMxRef("Element.insertAdjacentText()")}}
-
Inserts a given text node at a given position relative to the element it is invoked upon.
-
{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}
-
Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.
-
{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}
-
Returns a {{DOMxRef("CSSPseudoElement")}} representing the child pseudo-element matched by the specified pseudo-element selector.
-
{{DOMxRef("Element.querySelector()")}}
-
Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.
-
{{DOMxRef("Element.querySelectorAll()")}}
-
Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.
-
{{DOMxRef("Element.releasePointerCapture()")}}
-
Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.
-
{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}
-
Removes the element from the children list of its parent.
-
{{DOMxRef("Element.removeAttribute()")}}
-
Removes the named attribute from the current node.
-
{{DOMxRef("Element.removeAttributeNS()")}}
-
Removes the attribute with the specified name and namespace, from the current node.
-
{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}
-
Removes the node representation of the named attribute from the current node.
-
{{DOMxRef("EventTarget.removeEventListener()")}}
-
Removes an event listener from the element.
-
{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
-
Asynchronously asks the browser to make the element full-screen.
-
{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
-
Allows to asynchronously ask for the pointer to be locked on the given element.
-
- -
-
{{domxref("Element.scroll()")}}
-
Scrolls to a particular set of coordinates inside a given element.
-
{{domxref("Element.scrollBy()")}}
-
Scrolls an element by the given amount.
-
{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}
-
Scrolls the page until the element gets into the view.
-
{{domxref("Element.scrollTo()")}}
-
Scrolls to a particular set of coordinates inside a given element.
-
{{DOMxRef("Element.setAttribute()")}}
-
Sets the value of a named attribute of the current node.
-
{{DOMxRef("Element.setAttributeNS()")}}
-
Sets the value of the attribute with the specified name and namespace, from the current node.
-
{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}
-
Sets the node representation of the named attribute from the current node.
-
{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}
-
Sets the node representation of the attribute with the specified name and namespace, from the current node.
-
{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}
-
Sets up mouse event capture, redirecting all mouse events to this element.
-
{{DOMxRef("Element.setPointerCapture()")}}
-
Designates a specific element as the capture target of future pointer events.
-
{{DOMxRef("Element.toggleAttribute()")}}
-
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.
-
- -

Events

- -

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

- -
-
{{domxref("Element/cancel_event", "cancel")}}
-
Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the Esc key or clicks a "Close dialog" button which is part of the browser's UI.
- Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.
-
error
-
Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
- Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.
-
{{domxref("Element/scroll_event", "scroll")}}
-
Fired when the document view or an element has been scrolled.
- Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.
-
{{domxref("Element/select_event", "select")}}
-
Fired when some text has been selected.
- Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.
-
{{domxref("Element/show_event", "show")}}
-
Fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute. {{deprecated_inline}}
- Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.
-
{{domxref("Element/wheel_event","wheel")}}
-
Fired when the user rotates a wheel button on a pointing device (typically a mouse).
- Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} property.
-
- -

Clipboard events

- -
-
{{domxref("Element/copy_event", "copy")}}
-
Fired when the user initiates a copy action through the browser's user interface.
- Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.
-
{{domxref("Element/cut_event", "cut")}}
-
Fired when the user initiates a cut action through the browser's user interface.
- Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.
-
{{domxref("Element/paste_event", "paste")}}
-
Fired when the user initiates a paste action through the browser's user interface.
- Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.
-
- -

Composition events

- -
-
{{domxref("Element/compositionend_event", "compositionend")}}
-
Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.
-
{{domxref("Element/compositionstart_event", "compositionstart")}}
-
Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.
-
{{domxref("Element/compositionupdate_event", "compositionupdate")}}
-
Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.
-
- -

Focus events

- -
-
{{domxref("Element/blur_event", "blur")}}
-
Fired when an element has lost focus.
- Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.
-
{{domxref("Element/focus_event", "focus")}}
-
Fired when an element has gained focus.
- Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property
-
{{domxref("Element/focusin_event", "focusin")}}
-
Fired when an element is about to gain focus.
-
{{domxref("Element/focusout_event", "focusout")}}
-
Fired when an element is about to lose focus.
-
- -

Fullscreen events

- -
-
{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
-
Sent to an {{domxref("Element")}} when it transitions into or out of full-screen mode.
- Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}  property.
-
{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
-
Sent to an Element if an error occurs while attempting to switch it into or out of full-screen mode.
- Also available via the {{domxref("Element.onfullscreenerror", "onfullscreenerror")}} property.
-
- -

Keyboard events

- -
-
{{domxref("Element/keydown_event", "keydown")}}
-
Fired when a key is pressed.
- Also available via the {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} property.
-
{{domxref("Element/keypress_event", "keypress")}}
-
Fired when a key that produces a character value is pressed down. {{deprecated_inline}}
- Also available via the {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} property.
-
{{domxref("Element/keyup_event", "keyup")}}
-
Fired when a key is released.
- Also available via the {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} property.
-
- -

Mouse events

- -
-
{{domxref("Element/auxclick_event", "auxclick")}}
-
Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.
- Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.
-
{{domxref("Element/click_event", "click")}}
-
Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.
- Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.
-
{{domxref("Element/contextmenu_event", "contextmenu")}}
-
Fired when the user attempts to open a context menu.
- Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.
-
{{domxref("Element/dblclick_event", "dblclick")}}
-
Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.
- Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.
-
{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}
-
Occurs when an element is activated, for instance, through a mouse click or a keypress.
-
{{domxref("Element/mousedown_event", "mousedown")}}
-
Fired when a pointing device button is pressed on an element.
- Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.
-
{{domxref("Element/mouseenter_event", "mouseenter")}}
-
Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
- Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.
-
{{domxref("Element/mouseleave_event", "mouseleave")}}
-
Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.
- Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.
-
{{domxref("Element/mousemove_event", "mousemove")}}
-
Fired when a pointing device (usually a mouse) is moved while over an element.
- Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.
-
{{domxref("Element/mouseout_event", "mouseout")}}
-
Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.
- Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.
-
{{domxref("Element/mouseover_event", "mouseover")}}
-
Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.
- Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.
-
{{domxref("Element/mouseup_event", "mouseup")}}
-
Fired when a pointing device button is released on an element.
- Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.
-
{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}
-
Fired each time the amount of pressure changes on the trackpadtouchscreen.
-
{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}
-
Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".
-
{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}
-
Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.
-
{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}
-
Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".
-
- -

Touch events

- -
-
{{domxref("Element/touchcancel_event", "touchcancel")}}
-
Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).
- Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.
-
{{domxref("Element/touchend_event", "touchend")}}
-
Fired when one or more touch points are removed from the touch surface.
- Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property
-
{{domxref("Element/touchmove_event", "touchmove")}}
-
Fired when one or more touch points are moved along the touch surface.
- Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property
-
{{domxref("Element/touchstart_event", "touchstart")}}
-
Fired when one or more touch points are placed on the touch surface.
- Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property
-
- -
-
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS4 Pseudo-Elements", '#window-interface', 'Element')}}{{Spec2("CSS4 Pseudo-Elements")}}Added the pseudo() method.
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Added the getAnimations() method.
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Added the undoScope and undoManager properties.
{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events 2')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
- Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
- Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Added the following methods: querySelector() and querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Added the requestPointerLock() method.
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Added the requestFullscreen() method.
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Added the following properties: innerHTML, and outerHTML.
- Added the following method: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Added the following properties: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
- Added the following methods: getClientRects(), getBoundingClientRect(), scroll(), scrollBy(), scrollTo() and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Added the following methods: closest(), insertAdjacentElement() and insertAdjacentText().
- Moved hasAttributes() from the Node interface to this one.
{{SpecName("DOM4", "#interface-element", "Element")}}{{Spec2("DOM4")}}Removed the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
- Modified the return value of getElementsByTagName() and getElementsByTagNameNS().
- Removed the schemaTypeInfo property.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Added the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). These methods were never implemented and have been removed in later specifications.
- Added the schemaTypeInfo property. This property was never implemented and has been removed in later specifications.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}The normalize() method has been moved to {{DOMxRef("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Initial definition.
- -

Browser compatibility

- - - -

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

diff --git a/files/uk/web/api/event/index.html b/files/uk/web/api/event/index.html deleted file mode 100644 index 34a2a8e9e9..0000000000 --- a/files/uk/web/api/event/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Подія -slug: Web/API/Event -translation_of: Web/API/Event -original_slug: Web/API/Подія ---- -

{{APIRef("DOM")}}

- -

Event інтерфейс представляє подію, що відбувається в DOM. Подія може бути ініційована дією користувача, наприклад, кліком мишки або натисканням клавіши на клавіатурі, або згенерована API, щоб показати прогрес асинхронного завдання, тощо. Це може бути також ініційовано програмно викликом HTMLElement.click() методу елемента, або створенням екземпляру події, потім відправленням його до вказаного цільового елементу, використовуючи EventTarget.dispatchEvent().

- -

Існує багато різновидів подій, деякі з котрих використовують інші інтерфейси, основані на головному інтерфейсі Event. Сам по собі Event вміщає можливості та методи, спільні для всіх подій.

- -

Багато елементів DOM можуть бути налаштовані прийняти (або "почути") ці події та виконати код у відповідь на процес їхньої обробки. Хендлери подій звичайно пов'язані або додаються до різноманітних HTML elements (таких як <button>, <div>, <span>, і т.п.) при використанні EventTarget.addEventListener(), а це, як правило, замінює використання атрибутів хендлера подій старого HTML. Надалі за необхідності додавання, такі хендлери також можна відключати, якщо потрібно, використовуючи removeEventListener().  

- -

Примітка: один елемент може мати декілька таких хендлерів, навіть для однієї й тієї ж події - особливо якщо окремо, незалежні модулі коду прикріплять їх, кожний для власних незалежних цілей. (Наприклад, вебсторінка з рекламним модулем та статичним модулем, обидва з яких забезпечують моніторинг перегляду відео.) 

- -

Коли є багато вкладених елементів, кожний зі своїм особистим хендлером (хендлерами), обробка подій може стати дуже складною - особливо там, де батьківський елемент отримує ту ж саму подію, що й її дочірній елемент, тому що "просторово" вони перетинаються і таким чином подія технічно з'являється в них обох, а порядок обробки таких подій залежить від параметрів вспливаючих подій та захоплення кожного обробника.

- -

Інтерфейси на основі Event

- -

Нижче надано список інтерфейсів, які існують на основі головного Event інтерфейсу, із ссилками на відповідну документацію в довіднику MDN API.

- -

Зверніть увагу, що всі інтерфейси подій мають назви із закінченням "Event".

- - - -
- -
- -

Конструктор

- -
-
{{domxref("Event.Event", "Event()")}}
-
Створює  Event об'єкт та повертає його абоненту.
-
- -

Властивості

- -
-
{{domxref("Event.bubbles")}} {{readonlyinline}}
-
Булевий вираз вказує на те, чи вспливає подія через DOM.
-
{{domxref("Event.cancelBubble")}}
-
Історичний псевдонім {{domxref("Event.stopPropagation()")}}. Встановлення його значення true  перед поверненням з обробника події запобігає поширенню події.
-
{{domxref("Event.cancelable")}} {{readonlyinline}}
-
Булевий вираз вказує на те, чи скасовується подія.
-
{{domxref("Event.composed")}} {{ReadOnlyInline}}
-
Булевий вираз вказує на те, чи може подія всплити через межу між  тінню DOM та черговим DOM.
-
{{domxref("Event.currentTarget")}} {{readonlyinline}}
-
Посилання на зареєстровану зараз ціль події. Це об'єкт, на котрий наразі планується відіслати подію. Можливо, це змінилося по дорозі через retargeting.
-
{{domxref("Event.deepPath")}} {{non-standard_inline}}
-
 {{jsxref("Array")}} of DOM {{domxref("Node")}}, через який всплила подія.
-
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
-
Вказує, чи виклик {{domxref("event.preventDefault()")}}  скасував подію.
-
{{domxref("Event.eventPhase")}} {{readonlyinline}}
-
Вказує, яка фаза потоку подій обробляється.
-
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
-
Явна оригінальна мета події (Mozilla-specific).
-
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
-
Початкова ціль події перед будь-якими ретаргетингами. (Mozilla-specific).
-
{{domxref("Event.returnValue")}}
-
Історична властивість, представлена Internet Explorer і згодом прийнята в специфікацію DOM для того, щоб забезпечити продовження  роботи існуючих сайтів. В ідеалі, вам слід спробувати використати {{domxref("Event.preventDefault()")}} та {{domxref("Event.defaultPrevented")}} замість нього, але ви можете використовувати returnValue, якщо ви  вирішите це зробити.
-
{{domxref("Event.returnValue")}} {{non-standard_inline}}
-
Нестандартний псевдонім (зі старої версії Microsoft Internet Explorer) для {{domxref("Event.target")}}. Деякі інші браузери починають підтримувати його для веб-сумісності.
-
{{domxref("Event.target")}} {{readonlyinline}}
-
Посилання на ціль, до якої спочатку була відправлена подія.
-
{{domxref("Event.timeStamp")}} {{readonlyinline}}
-
Час, коли було створено подію (в мілісекундах).  За специфікацією, це значення - час з епохи - але насправді визначення браузерів різняться.Крім того, ведеться робота, щоб змінити його на {{domxref("DOMHighResTimeStamp")}} .
-
{{domxref("Event.isTrusted")}} {{readonlyinline}}
-
Вказує, чи  була подія ініційована браузером (наприклад, після натискання клавіши на клавіатурі користувачем) або за сценарієм (використовуючи метод створення подій, наприклад {{domxref("Event.initEvent")}}).
-
Застарілі властивості
-
- -

{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}

- -

Застарілі; використовуйте замість них {{domxref("Event.composed", "composed")}}. ({{jsxref("Boolean")}} вказує, чи вспливе дана подія через тіньовий корінь у стандарт DOM.)

- -

Методи

- -
-
{{domxref("Event.createEvent()")}} {{deprecated_inline}}
-
Створює нову подію, котра повинна бути ініційована викликом її  initEvent() методу.
-
{{domxref("Event.composedPath()")}}
-
Повертає шлях події (об'єкти, на які слухачі будуть викликані). Це не включає вузли через тіньові дерева, якщо тіньовий корінь було створено із закритим {{domxref("ShadowRootmode")}}.
-
{{domxref("Event.preventDefault()")}}
-
Скасовує подію, (якщо її можливо скасувати).
-
{{domxref("Event.stopImmediatePropagation()")}}
-
Для цієї конкретної події не дозволяйте викликати всіх інших слухачів. Сюди входять слухачі, приєднані до одного й того ж елемента, а також ті, що додаються до елементів, які буде прищеплено пізніше (наприклад, під час фази введення).
-
{{domxref("Event.stopPropagation()")}}
-
Зупиняє розповсюдження подій далі у DOM.
-
Застарілі методи
-
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
-
Нестандартний. Використовуйте замість нього {{domxref("Event.defaultPrevented")}}.  (Повертає значення {{domxref("Event.defaultPrevented")}}.)
-
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
-
Застарілий; використовуйте замість нього {{domxref("event.stopPropagation")}}. (Захищає подію від вспливання).
-
{{domxref("Event.preventcapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
-
Застарілий; використовуйте замість нього {{domxref("event.stopPropagation")}}.
-
- -

Технічні характеристики

- - - - - - - - - - - - - - -
ХарактеристикаСтатусКоментар
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}}
- -

Сумісність з браузером

- -

приховано

- -

Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо ви захочете побачити її, будь ласка, перевірте та відправте нам запит https://github/com/mdn/browser-compat-data

- - - -

Дивіться також

- - diff --git a/files/uk/web/api/event/target/index.html b/files/uk/web/api/event/target/index.html deleted file mode 100644 index c9a09ca3e9..0000000000 --- a/files/uk/web/api/event/target/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Event.target -slug: Web/API/Event/target -translation_of: Web/API/Event/target -original_slug: Web/API/Подія/target ---- -

{{ApiRef("DOM")}}

- -

Властивість target інтерфейсу {{domxref("Event")}} є посиланням на об'єкт який відправив подію. Він відрізняється від {{domxref("Event.currentTarget")}} коли обробник події викликається в фазі спливання або фіксації події.

- -

Синтаксис

- -
var theTarget = event.target;
- -

Приклад

- -

Властивість event.target може бути використана для реалізації делегування події.

- -
// Зробити список
-var ul = document.createElement('ul');
-document.body.appendChild(ul);
-
-var li1 = document.createElement('li');
-var li2 = document.createElement('li');
-ul.appendChild(li1);
-ul.appendChild(li2);
-
-function hide(e){
-  // e.target вказує на елемент <li> на якому було натиснуто
-  // Це відрізняється від e.currentTarget який буде посилатися на батьківський <ul> в даному контексті
-  e.target.style.visibility = 'hidden';
-}
-
-// Приєднання слухача подій до списка
-// Він запуститься при натисканні кожного <li>
-ul.addEventListener('click', hide, false);
-
- -

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

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Initial definition
- -

Сумісність з браузерами

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Нотатки про сумісність

- -

В браузерах IE 6-8 використовується інша модель подій. Слухачі подій приєднуються з використанням нестандартного методу {{domxref('EventTarget.attachEvent')}}. В цій моделі, об'єкт події має {{domxref('Event.srcElement')}} властивість, замість властивості target, і воно має ту ж саму семантику як event.target.

- -
function hide(e) {
-  // Підтримка IE6-8
-  var target = e.target || e.srcElement;
-  target.style.visibility = 'hidden';
-}
-
- -

Читати також

- - diff --git a/files/uk/web/api/globaleventhandlers/index.html b/files/uk/web/api/globaleventhandlers/index.html deleted file mode 100644 index 982d3d2ca3..0000000000 --- a/files/uk/web/api/globaleventhandlers/index.html +++ /dev/null @@ -1,273 +0,0 @@ ---- -title: GlobalEventHandlers -slug: Web/API/GlobalEventHandlers -tags: - - API - - GlobalEventHandlers - - HTML DOM - - Mixin - - NeedsTranslation - - Reference - - TopicStub - - events -translation_of: Web/API/GlobalEventHandlers ---- -
{{ApiRef("HTML DOM")}}
- -

The GlobalEventHandlers mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}. Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.

- -
-

Note: GlobalEventHandlers is a mixin and not an interface; you can't actually create an object of type GlobalEventHandlers.

-
- -

Properties

- -

This interface doesn't include any properties except for the event handlers listed below.

- -

Event handlers

- -

These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.

- -
-
-
{{domxref("GlobalEventHandlers.onabort")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{domxref("HTMLMediaElement/abort_event", "abort")}} event is raised.
-
{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
-
An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running CSS animation has been canceled.
-
{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
-
An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a CSS animation has stopped playing.
-
{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}
-
An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a CSS animation has begun playing a new iteration of the animation sequence.
-
{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}
-
An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a CSS animation has started playing.
-
{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}
-
An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).
-
{{domxref("GlobalEventHandlers.onblur")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.
-
{{domxref("GlobalEventHandlers.onerror")}}
-
Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.
-
{{domxref("GlobalEventHandlers.onfocus")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.
-
{{domxref("GlobalEventHandlers.oncancel")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.
-
{{domxref("GlobalEventHandlers.oncanplay")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.
-
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.
-
{{domxref("GlobalEventHandlers.onchange")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.
-
{{domxref("GlobalEventHandlers.onclick")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.
-
{{domxref("GlobalEventHandlers.onclose")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.
-
{{domxref("GlobalEventHandlers.oncontextmenu")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.
-
{{domxref("GlobalEventHandlers.oncuechange")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondblclick")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondrag")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondragend")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondragenter")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondragexit")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondragleave")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondragover")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondragstart")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondrop")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondurationchange")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.
-
{{domxref("GlobalEventHandlers.onemptied")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.
-
{{domxref("GlobalEventHandlers.onended")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.
-
{{domxref("GlobalEventHandlers.onformdata")}}
-
Is an {{domxref("EventHandler")}} for processing {{event("formdata")}} events, fired after the entry list representing the form's data is constructed.
-
{{domxref("GlobalEventHandlers.ongotpointercapture")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type is raised.
-
{{domxref("GlobalEventHandlers.oninput")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.
-
{{domxref("GlobalEventHandlers.oninvalid")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.
-
{{domxref("GlobalEventHandlers.onkeydown")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.
-
{{domxref("GlobalEventHandlers.onkeypress")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.
-
{{domxref("GlobalEventHandlers.onkeyup")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.
-
{{domxref("GlobalEventHandlers.onload")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.
-
{{domxref("GlobalEventHandlers.onloadeddata")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.
-
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.
-
{{domxref("GlobalEventHandlers.onloadend")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)
-
{{domxref("GlobalEventHandlers.onloadstart")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)
-
{{domxref("GlobalEventHandlers.onlostpointercapture")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type is raised.
-
{{domxref("GlobalEventHandlers.onmousedown")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmouseenter")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmouseleave")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmousemove")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmouseout")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmouseover")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmouseup")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised. Deprecated. Use onwheel instead.
-
{{ domxref("GlobalEventHandlers.onwheel") }}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpause")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.
-
{{domxref("GlobalEventHandlers.onplay")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.
-
{{domxref("GlobalEventHandlers.onplaying")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerdown")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointermove")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerup")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointercancel")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerover")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerout")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerenter")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerenter")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerleave")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.
-
{{domxref("GlobalEventHandlers.onprogress")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.
-
{{domxref("GlobalEventHandlers.onratechange")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.
-
{{domxref("GlobalEventHandlers.onreset")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.
-
{{domxref("GlobalEventHandlers.onresize")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.
-
{{domxref("GlobalEventHandlers.onscroll")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.
-
{{domxref("GlobalEventHandlers.onseeked")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.
-
{{domxref("GlobalEventHandlers.onseeking")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.
-
{{domxref("GlobalEventHandlers.onselect")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.
-
{{domxref("GlobalEventHandlers.onselectstart")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.
-
{{domxref("GlobalEventHandlers.onselectionchange")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.
-
{{domxref("GlobalEventHandlers.onshow")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.
-
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.
-
{{domxref("GlobalEventHandlers.onstalled")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.
-
{{domxref("GlobalEventHandlers.onsubmit")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.
-
{{domxref("GlobalEventHandlers.onsuspend")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.
-
{{domxref("GlobalEventHandlers.ontimeupdate")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.
-
{{domxref("GlobalEventHandlers.onvolumechange")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.
-
{{domxref("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.
-
{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.
-
{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.
-
{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.
-
{{domxref("GlobalEventHandlers.ontransitioncancel")}}
-
An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a CSS transition has been cancelled.
-
{{domxref("GlobalEventHandlers.ontransitionend")}}
-
An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a CSS transition has finished playing.
-
{{domxref("GlobalEventHandlers.ontransitionrun")}}
-
An {{domxref("EventHandler")}} called when a {{event("transitionrun")}} event is sent, indicating that a CSS transition is running, though not nessarilty started.
-
{{domxref("GlobalEventHandlers.ontransitionstart")}}
-
An {{domxref("EventHandler")}} called when a {{event("transitionstart")}} event is sent, indicating that a CSS transition has started transitioning.
-
{{domxref("GlobalEventHandlers.onwaiting")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.
-
-
- -

Methods

- -

This interface defines no methods.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectionchange.
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}{{Spec2('Pointer Lock')}}Adds onpointerlockchange and onpointerlockerror on {{domxref("Document")}}. It is experimentally implemented on GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onsort since the {{SpecName("HTML5 W3C")}} snapshot.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of GlobalEventHandlers (properties where on the target before it).
- -

Browser compatibility

- -
- - -

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

-
- -

See also

- - diff --git a/files/uk/web/api/globaleventhandlers/onkeydown/index.html b/files/uk/web/api/globaleventhandlers/onkeydown/index.html deleted file mode 100644 index 535fd8b0a0..0000000000 --- a/files/uk/web/api/globaleventhandlers/onkeydown/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: GlobalEventHandlers.onkeydown -slug: Web/API/GlobalEventHandlers/onkeydown -tags: - - HTML DOM - - Обробник подій - - клавіатура - - події клавіатури -translation_of: Web/API/GlobalEventHandlers/onkeydown ---- -
{{ApiRef("HTML DOM")}}
- -

Властивість onkeydown спільно з GlobalEventHandlers є EventHandler обробляє події {{event("keydown")}}.

- -

Подія keydown спрацьовує, коли користувач натискає клавішу клавіатури.

- -

Синтаксис

- -
target.onkeydown = functionRef;
- -

Значення

- -

functionRef це ім'я функції або вираз функції. В якості єдиного аргументу функція отримує об'єкт {{domxref("KeyboardEvent")}}.

- -

Приклад

- -

У цьому прикладі виводитимуться значення {{domxref("KeyboardEvent.code")}} щоразу, коли ви натискаете клавішу всередині елемента  {{HtmlElement("input")}}.

- -

HTML

- -
<input>
-<p id="log"></p>
- -

JavaScript

- -
const input = document.querySelector('input');
-const log = document.getElementById('log');
-
-input.onkeydown = logKey;
-
-function logKey(e) {
-  log.textContent += ` ${e.code}`;
-}
- -

Підсумок

- -

{{EmbedLiveSample("Example")}}

- -

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

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}{{Spec2('HTML WHATWG')}}
- -

Сумісність з браузерами 

- - - -

{{Compat("api.GlobalEventHandlers.onkeydown")}}

- -

Нотатки щодо сумісності

- -

Так якб Firefox 65 події клавіатури і ключа тепер запускаються під час складання IME, для поліпшення крос-браузерної сумісності для користувачів CJKT (bug 354358, також більш детальну інформацію дивіться keydown and keyup події наразі запускаються під час складання IME. Щоб проігнорувати всі події keyup , зробіть щось на зразок цього (229 це спеціальний набір значень для keyCode що відноситься до читу, який був використаний IME):

- -
eventTarget.addEventListener("keydown", event => {
-  if (event.isComposing || event.keyCode === 229) {
-    return;
-  }
-  // зробити що-небудь    });
-
- -

See also

- - diff --git a/files/uk/web/api/globaleventhandlers/onkeyup/index.html b/files/uk/web/api/globaleventhandlers/onkeyup/index.html deleted file mode 100644 index d429593327..0000000000 --- a/files/uk/web/api/globaleventhandlers/onkeyup/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: GlobalEventHandlers.onkeyup -slug: Web/API/GlobalEventHandlers/onkeyup -tags: - - HTML DOM - - Обробник подій - - клавіатура - - події клавіатури -translation_of: Web/API/GlobalEventHandlers/onkeyup ---- -
{{ApiRef("HTML DOM")}}
- -
- -

Властивість onkeyup спільно з {{domxref("GlobalEventHandlers")}} є {{domxref("EventHandler")}} обробляє події  {{event("keyup")}} .

- -

Подія keyup спрацьовує, коли користувач відпускає раніше натиснуту клавішу клавіатури.

- -

Синтаксис

- -
target.onkeyup = functionRef;
- -

Значення

- -

functionRef це ім'я функції або вираз функції. В якості єдиного аргументу функція отримує об'єкт {{domxref("KeyboardEvent")}}.

- -

Приклад

- -

У цьому прикладі виводитимуться значення {{domxref ("KeyboardEvent.code")}} щоразу, коли ви відпускаєте клавішу всередині елемента {{HtmlElement ("input")}}.

- -

HTML

- -
<input>
-<p id="log"></p>
- -

JavaScript

- -
const input = document.querySelector('input');
-const log = document.getElementById('log');
-
-input.onkeyup = logKey; //
-
-function logKey(e) {
-  log.textContent += ` ${e.code}`; //Видає у тегу <p> ключ натиснутої клавіші
-}
- -

Підсумок

- -

{{EmbedLiveSample("Example")}}

- -

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

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeyup','onkeyup')}}{{Spec2('HTML WHATWG')}}
- -

Сумісність з браузерами

- - - -

{{Compat("api.GlobalEventHandlers.onkeyup")}}

- -

Нотатки щодо сумісності

- -

Так як Firefox 65, події клавіатури і ключа тепер запускаються під час складання IME, для поліпшення крос-браузерної сумісності для користувачів CJKT ({{bug (354358)}}, також більш детальну інформацію дивіться keydown and keyup події наразі запускаються під час складання IME. Щоб проігнорувати всі події keyup , зробіть щось на зразок цього (229 це спеціальний набір значень для keyCode що відноситься до читу, який був використаний IME):

- -
eventTarget.addEventListener("keyup", event => {
-  if (event.isComposing || event.keyCode === 229) {
-    return;
-  }
-  // зробити що-небудь
-});
- -

Див. також

- - diff --git a/files/uk/web/api/globaleventhandlers/onmouseover/index.html b/files/uk/web/api/globaleventhandlers/onmouseover/index.html deleted file mode 100644 index b3d98e075e..0000000000 --- a/files/uk/web/api/globaleventhandlers/onmouseover/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Обробник_глобальних_подій.onmouseover -slug: Web/API/GlobalEventHandlers/onmouseover -tags: - - Event Handler - - onmouseover - - Обробник глобальних подій - - Подія мищі -translation_of: Web/API/GlobalEventHandlers/onmouseover ---- -
{{ApiRef("HTML DOM")}}
- -

Властивістю onmouseover мікшіна {{domxref("GlobalEventHandlers")}} є {{domxref("EventHandler")}} , який обробляє події наведення миші {{event("mouseover")}}.

- -

Подія mouseover запускається, коли користувач переміщує курсор на певний елемент. 

- -

Синтаксис

- -
element.onmouseover = function;
-
- -

Приклад

- -

Цей приклад додає onmouseover та onmouseout подіі до параграфу. Спробуйте перемістити мишу до елементу.

- -

HTML

- -
<p>Test your mouse on me!</p>
- -

JavaScript

- -
const p = document.querySelector('p');
-p.onmouseover = logMouseOver;
-p.onmouseout = logMouseOut;
-
-function logMouseOver() {
-  p.innerHTML = 'Виявлено MOUSE OVER';
-}
-
-function logMouseOut() {
-  p.innerHTML = 'Виявлено MOUSE OUT';
-}
- -

Результат

- -

{{EmbedLiveSample("Example")}}

- -

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

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseover','onmouseover')}}{{Spec2('HTML WHATWG')}}
- -

Сумісність з браузерами

- -
- - -

{{Compat("api.GlobalEventHandlers.onmouseover")}}

-
diff --git a/files/uk/web/api/headers/index.html b/files/uk/web/api/headers/index.html deleted file mode 100644 index 529712ef22..0000000000 --- a/files/uk/web/api/headers/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Заголовки -slug: Web/API/Headers -tags: - - API - - Fetch - - Fetch API - - Headers - - Інтерфейс - - Заголовки -translation_of: Web/API/Headers ---- -
{{ APIRef("Fetch") }}
- -

Інтерфейс Headers  Fetch API дозволяє вам виконувати різні дії з  HTTP запитами і заголовками відповідей. Ці дії включають отримання налаштування, додавання і видалення . Об'єкт Headers має асоціативний список заголовків, який по замовчуванню пустий і містить ноль чи більше пар імен і значень. Ви можете додавати то цього списку, використовуючи метод типу {{domxref("Headers.append","append()")}}. У всіх методах цього інтерфейсу імена заголовків знаходяться по  не чутливим до реєсту запитам . 

- -

З метою безпеки деякі заголовки можуть контролюватись тільки за допомогою user agent. Ці заголовки включають: {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  і {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.

- -

Об'єкт заголовку також має associated guard, що приймає значення: immutable, request, request-no-cors, response чи none. Це впливає на те чи меоди: {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, і {{domxref("Headers.append","append()")}} змінюватимуть заголовок. Для більшої інформації дивіться {{Glossary("Guard")}}.

- -

Ви можете отримати об'єкт Headers  через властивості {{domxref("Request.headers")}} і{{domxref("Response.headers")}}, і створити новий об'єкт  Headers, використовуючи конструктор {{domxref("Headers.Headers()")}}.

- -

Об'єкт, що імплементує Headers може напряму використовуватись в структурі {{jsxref("Statements/for...of", "for...of")}} замість{{domxref('Headers.entries()', 'entries()')}}: for (var p of myHeaders)тотожний for (var p of myHeaders.entries()).

- -
-

Нотатка: Ви можете знайти більше про доступні заголовки прочитавши довідку по HTTP headers.

-
- -

Конструктор

- -
-
{{domxref("Headers.Headers()")}}
-
Створює новий об'єкт заголовку Headers.
-
- -

Методи

- -
-
{{domxref("Headers.append()")}}
-
Додає нове значення до існуючого заголовка в об'єкті Headers, або додає заголовок якщо той не існує.
-
{{domxref("Headers.delete()")}}
-
Видаляє заголовок з об'єкта Headers.
-
{{domxref("Headers.entries()")}}
-
Повертає {{jsxref("Iteration_protocols","iterator")}}, дозволяючи проводити через всі пари ключ/значення, що знаходяться в об'єкті.
-
{{domxref("Headers.forEach()")}}
-
Виконує вказану функцію для кожного елементу масива.
-
{{domxref("Headers.get()")}}
-
Повертає {{domxref("ByteString")}} послідовність всіх значеннях заголовків об'єкта Headers з заданим іменем.
-
{{domxref("Headers.has()")}}
-
Повертає логічне значення чи має обєкт Headers певний заголовок
-
{{domxref("Headers.keys()")}}
-
Повертає {{jsxref("Iteration_protocols", "iterator")}}, що дозволяє вам пройтись по всім ключам пар ключ/значення, що містяться в об'єкті.
-
{{domxref("Headers.set()")}}
-
Задає нове значення існуючого заголовку всередині об'єкта Headers, або додає заголовок, якщо той не існує.
-
{{domxref("Headers.values()")}}
-
Повертає {{jsxref("Iteration_protocols", "iterator")}}, що дозволяє вам проходитись по всім значенням пар ключ/значення, які містяться в цьому об'єкті.
-
- -
-

Нотатка:  Різниця між {{domxref("Headers.set()")}} і {{domxref("Headers.append()")}} в тому, що якщо вказаний заголовок уже існує і допускає багато значень, {{domxref("Headers.set()")}} перезаписуватиме існуючі значення новим., тоді як {{domxref("Headers.append()")}} буде додавати нове значення в кінець набору значень. Дивіться їх сторінки для прикладу кода.

-
- -
-

Нотатка: Всі методи Headers видаватимуть помилку TypeError якщо ви спробуєте передати не Валідне ім'я заголовку. Операції зміни заголовку видаватимуть TypeError, якщо заголовок  незмінний {{Glossary("Guard")}}. У разі інших невдач, вийняток не виникатиме.

-
- -
-

Нотатка: Коли значення Header повторюються вони автоматично сортуються в лексикографічному порядку і значення дубльованих заголовків комбінуються.

-
- -

Застарілі методи

- -
-
{{domxref("Headers.getAll()")}}
-
Використовується для повернення масиву всіх значень заголовка з заданим іменем в об'єкті Headers ; цей метод - видалений із специфікації і натомість тепер {{domxref("Headers.get()")}} повертає всі значення замість одного.
-
- -

Приклади

- -

В наступномуIn the following фрагменті ми створили новий заголовок, використавши конструктор Headers() constructor, додали новий заголовок за допомогою append(), потім повернули значення цього заголовку, використовуючи get():

- -
var myHeaders = new Headers();
-
-myHeaders.append('Content-Type', 'text/xml');
-myHeaders.get('Content-Type') // should return 'text/xml'
-
- -

Те ж можна досягнути передаванням масиву масивів чи літералу об'єкта до конструктора:

- -
var myHeaders = new Headers({
-    'Content-Type': 'text/xml'
-});
-
-// or, using an array of arrays:
-myHeaders = new Headers([
-    ['Content-Type', 'text/xml']
-]);
-
-myHeaders.get('Content-Type') // should return 'text/xml'
-
- -

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

- - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('Fetch','#headers-class','Headers')}}{{Spec2('Fetch')}} 
- -

Підтримка браузерів

- - - -

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

- -

See also

- - - -

 

diff --git a/files/uk/web/api/history_api/index.html b/files/uk/web/api/history_api/index.html deleted file mode 100644 index 47dc8cad03..0000000000 --- a/files/uk/web/api/history_api/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: History API -slug: Web/API/History_API -translation_of: Web/API/History_API ---- -
{{DefaultAPISidebar("History API")}}
- -

Об'єкт DOM {{DOMxRef("Window")}} надає доступ до сеансу історії браузера через об'єкт {{DOMxRef("Window.history","history")}}. Він має корисні методи та властивості, які дозволяють відкривати попередні і наступні сторінки з історії користувача та впливати на вміст стеку історії.

- -

Концепція та використання

- -

Навігація по історії користувача здійснюється за допомогою методів {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}} та {{DOMxRef("History.go","go()")}}.

- -

Навігація вперед і назад

- -

Щоб відкрити попередню сторінку:

- -
window.history.back()
-
- -

Цей метод діє так само, ніби реальний користувач натиснув кнопку Назад на панелі інструментів свого браузера.

- -

Подібним чином можна відкрити наступну сторінку (кнопка Вперед на панелі інструментів):

- -
window.history.forward()
-
- -

Перехід до певної точки в історії

- -

Щоб завантажити певну сторінку з історії сеансу використовується метод {{DOMxRef("History.go","go()")}}, передаючи як аргумент відносне положення до поточної сторінки (позиція поточної сторінки дорівнює 0.)

- -

Щоб повернутися на одну сторінку назад (еквівалент виклику {{DOMxRef("History.back","back()")}}):

- -
window.history.go(-1)
-
- -

Перехід на сторінку вперед, подібно до виклику {{DOMxRef("History.forward","forward()")}}:

- -
window.history.go(1)
-
- -

Подібним чином можна рухатись на 2 сторінки вперед, передаючи як аргумент 2 тощо.

- -

Ще одне застосування методу go() – оновлення поточної сторінки, використовуючи для цього аргумент 0, або викликаючи метод без аргументу:

- -
// Наступний код
-// оновить поточну сторінку
-window.history.go(0)
-window.history.go()
-
- -

Кількість сторінок у стеку історії визначається значенням властивості length:

- -
let numberOfEntries = window.history.length
-
- -

Інтерфейси

- -
-
{{domxref("History")}}
-
Дозволяє управляти історією сеансу браузера (відвіданими сторінками у вкладці або фреймі, куди завантажується поточна сторінка).
-
- -

Приклади

- -

В наступному прикладі призначається обробка подій через властивість onpopstate щоб проілюструвати деякі методи об’єкта історії для додавання, заміни та переміщення в історії браузера в поточній вкладці.

- -
window.onpopstate = function(event) {
-  console.log(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
-}
-
-history.pushState({page: 1}, "title 1", "?page=1")
-history.pushState({page: 2}, "title 2", "?page=2")
-history.replaceState({page: 3}, "title 3", "?page=3")
-history.back() // виведе в консоль "location: http://example.com/example.html?page=1, state: {"page":1}"
-history.back() // виведе в консоль "location: http://example.com/example.html, state: null"
-history.go(2)  // виведе в консоль "location: http://example.com/example.html?page=3, state: {"page":3}"
- -

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

- - - - - - - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}{{Spec2("HTML5 W3C")}}Initial definition.
- -

Сумісність

- - - -

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

- -

Дивіться також

- -

Довідка

- - - -

Посібник

- - diff --git a/files/uk/web/api/html_dom_api/index.html b/files/uk/web/api/html_dom_api/index.html deleted file mode 100644 index 4f94294e96..0000000000 --- a/files/uk/web/api/html_dom_api/index.html +++ /dev/null @@ -1,472 +0,0 @@ ---- -title: The HTML DOM API -slug: Web/API/HTML_DOM_API -tags: - - API - - Beginner - - DOM - - Documents - - Elements - - HTML DOM - - HTML DOM API - - NeedsTranslation - - Nodes - - Overview - - TopicStub - - Web - - Windows - - hierarchy -translation_of: Web/API/HTML_DOM_API ---- -

{{DefaultAPISidebar("HTML DOM")}}

- -

The HTML DOM API is made up of the interfaces that define the functionality of each of the {{Glossary("element", "elements")}} in {{Glossary("HTML")}}, as well as any supporting types and interfaces they rely upon.

- -

The functional areas included in the HTML DOM API include:

- - - -

HTML DOM concepts and usage

- -

In this article, we'll focus on the parts of the HTML DOM that involve engaging with HTML elements. Discussion of other areas, such as Drag and Drop, WebSockets, Web Storage, etc. can be found in the documentation for those APIs.

- -

Structure of an HTML document

- -

The Document Object Model ({{Glossary("DOM")}}) is an architecture that describes the structure of a {{domxref("document")}}; each document is represented by an instance of the interface {{domxref("Document")}}. A document, in turn, consists of a hierarchical tree of nodes, in which a node is a fundamental record representing a single object within the document (such as an element or text node).

- -

Nodes may be strictly organizational, providing a means for grouping other nodes together or for providing a point at which a hierarchy can be constructed; other nodes may represent visible components of a document. Each node is based on the {{domxref("Node")}} interface, which provides properties for getting information about the node as well as methods for creating, deleting, and organizing nodes within the DOM.

- -

Nodes don't have any concept of including the content that is actually displayed in the document. They're empty vessels. The fundamental notion of a node that can represent visual content is introduced by the {{domxref("Element")}} interface. An Element object instance represents a single element in a document created using either HTML or an {{glossary("XML")}} vocabulary such as {{glossary("SVG")}}.

- -

For example, consider a document with two elements, one of which has two more elements nested inside it:

- -

Structure of a document with elements inside a document in a window

- -

While the {{domxref("Document")}} interface is defined as part of the DOM specification, the HTML specification significantly enhances it to add information specific to using the DOM in the context of a web browser, as well as to using it to represent HTML documents specifically.

- -

Among the things added to Document by the HTML standard are:

- - - -

HTML element interfaces

- -

The Element interface has been further adapted to represent HTML elements specifically by introducing the {{domxref("HTMLElement")}} interface, which all more specific HTML element classes inherit from. This expands the Element class to add HTML-specific general features to the element nodes. Properties added by HTMLElement include for example {{domxref("HTMLElement.hidden", "hidden")}} and {{domxref("HTMLElement.innerText", "innerText")}}. HTMLElement also adds all the global event handlers.

- -

An {{Glossary("HTML")}} document is a DOM tree in which each of the nodes is an HTML element, represented by the {{domxref("HTMLElement")}} interface. The HTMLElement class, in turn, implements Node, so every element is also a node (but not the other way around). This way, the structural features implemented by the {{domxref("Node")}} interface are also available to HTML elements, allowing them to be nested within each other, created and deleted, moved around, and so forth.

- -

The HTMLElement interface is generic, however, providing only the functionality common to all HTML elements such as the element's ID, its coordinates, the HTML making up the element, information about scroll position, and so forth.

- -

In order to expand upon the functionality of the core HTMLElement interface to provide the features needed by a specific element, the HTMLElement class is subclassed to add the needed properties and methods. For example, the {{HTMLElement("canvas")}} element is represented by an object of type {{domxref("HTMLCanvasElement")}}. HTMLCanvasElement augments the HTMLElement type by adding properties such as {{domxref("HTMLCanvasElement.height", "height")}} and methods like {{domxref("HTMLCanvasElement.getContext", "getContext()")}} to provide canvas-specific features.

- -

The overall inheritance for HTML element classes looks like this:

- -

Hierarchy of interfaces for HTML elements

- -

As such, an element inherits the properties and methods of all of its ancestors. For example, consider a {{HTMLElement("a")}} element, which is represented in the DOM by an object of type {{domxref("HTMLAnchorElement")}}. The element, then, includes the anchor-specific properties and methods described in that class's documentation, but also those defined by {{domxref("HTMLElement")}} and {{domxref("Element")}}, as well as from {{domxref("Node")}} and, finally, {{domxref("EventTarget")}}.

- -

Each level defines a key aspect of the utility of the element. From Node, the element inherits concepts surrounding the ability for the element to be contained by another element, and to contain other elements itself. Of special importance is what is gained by inheriting from EventTarget: the ability to receive and handle events such as mouse clicks, play and pause events, and so forth.

- -

There are elements that share commonalities and thus have an additional intermediary type. For example, the {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements both present audiovisual media. The corresponding types, {{domxref("HTMLAudioElement")}} and {{domxref("HTMLVideoElement")}}, are both based upon the common type {{domxref("HTMLMediaElement")}}, which in turn is based upon {{domxref("HTMLElement")}} and so forth. HTMLMediaElement defines the methods and properties held in common between audio and video elements.

- -

These element-specific interfaces make up the majority of the HTML DOM API, and are the focus of this article. To learn more about the actual structure of the DOM, see Introduction to the DOM.

- -

HTML DOM target audience

- -

The features exposed by the HTML DOM are among the most commonly-used APIs in the web developer's arsenal. All but the most simple web applications will use some features of the HTML DOM.

- -

HTML DOM API interfaces

- -

The majority of the interfaces that comprise the HTML DOM API map almost one-to-one to individual HTML elements, or to a small group of elements with similar functionality. In addition, the HTML DOM API includes a few interfaces and types to support the HTML element interfaces.

- -

HTML element interfaces

- -

These interfaces represent specific HTML elements (or sets of related elements which have the same properties and methods associated with them).

- -
- -
- -

Web app and browser integration interfaces

- -

These interfaces offer access to the browser window and document that contain the HTML, as well as to the browser's state, available plugins (if any), and various configuration options.

- -
- -
- -

Form support interfaces

- -

These interfaces provide structure and functionality required by the elements used to create and manage forms, including the {{HTMLElement("form")}} and {{HTMLElement("input")}} elements.

- -
- -
- -

Canvas and image interfaces

- -

These interfaces represent objects used by the Canvas API as well as the {{HTMLElement("img")}} element and {{HTMLElement("picture")}} elements.

- -
- -
- -

Media interfaces

- -

The media interfaces provide HTML access to the contents of the media elements: {{HTMLElement("audio")}} and {{HTMLElement("video")}}.

- -
- -
- -

Drag and drop interfaces

- -

These interfaces are used by the HTML Drag and Drop API to represent individual draggable (or dragged) items, groups of dragged or draggable items, and to handle the drag and drop process.

- -
- -
- -

Page history interfaces

- -

The History API interfaces let you access information about the browser's history, as well as to shift the browser's current tab forward and backward through that history.

- -
- -
- -

Web Components interfaces

- -

These interfaces are used by the Web Components API to create and manage the available custom elements.

- -
- -
- -

Miscellaneous and supporting interfaces

- -

These supporting object types are used in a variety of ways in the HTML DOM API; in addition, {{domxref("PromiseRejectionEvent")}} represents the event delivered when a {{Glossary("JavaScript")}} {{jsxref("Promise")}} is rejected.

- -
- -
- -

Interfaces belonging to other APIs

- -

There are several interfaces which are technically defined in the HTML specification while actually being part of other APIs.

- -

Web storage interfaces

- -

The Web Storage API provides the ability for web sites to store data either temporarily or permanently on the user's device for later re-use.

- -
- -
- -

Web Workers interfaces

- -

These interfaces are used by the Web Workers API both to establish the ability for workers to interact with an app and its content, but also to support messaging between windows or apps.

- -
- -
- -

WebSocket interfaces

- -

These interfaces, defined by the HTML specification, are used by the WebSocket API.

- -
- -
- -

Server-sent events interfaces

- -

The {{domxref("EventSource")}} interface represents the source which sent or is sending server-sent events.

- -
- -
- -

Examples

- -

In this example, an {{HTMLElement("input")}} element's {{domxref("HTMLInputElement.input_event", "input")}} event is monitored in order to update the state of a form's "submit" button based on whether or not a given field currently has a value.

- -

JavaScript

- -
const nameField = document.getElementById("userName");
-const sendButton = document.getElementById("sendButton")
-
-sendButton.disabled = true;
-// [note: this is disabled since it causes this article to always load with this example focused and scrolled into view]
-//nameField.focus();
-
-nameField.addEventListener("input", event => {
-  const elem = event.target;
-  const valid = elem.value.length != 0;
-
-  if (valid && sendButton.disabled) {
-    sendButton.disabled = false;
-  } else if (!valid && !sendButton.disabled) {
-    sendButton.disabled = true;
-  }
-});
- -

This code uses the {{domxref("Document")}} interface's {{domxref("Document.getElementById", "getElementById()")}} method to get the DOM object representing the {{HTMLElement("input")}} elements whose IDs are userName and sendButton.  With these, we can access the properties and methods that provide information about and grant control over these elements.

- -

The {{domxref("HTMLInputElement")}} object for the "Send" button's {{domxref("HTMLInputElement.disabled", "disabled")}} property is set to true, which disables the "Send" button so it can't be clicked. In addition, the user name input field is made the active focus by calling the {{domxref("HTMLElement.focus", "focus()")}} method it inherits from {{domxref("HTMLElement")}}.

- -

Then {{domxref("EventTarget.addEventListener", "addEventListener()")}} is called to add a handler for the input event to the user name input. This code looks at the length of the current value of the input; if it's zero, then the "Send" button is disabled if it's not already disabled. Otherwise, the code ensures that the button is enabled.

- -

With this in place, the "Send" button is always enabled whenever the user name input field has a value, and disabled when it's empty.

- -

HTML

- -

The HTML for the form looks like this:

- -
<p>Please provide the information below. Items marked with "*" are required.</p>
-<form action="" method="get">
-  <p>
-    <label for="userName" required>Your name:</label>
-    <input type="text" id="userName"> (*)
-  </p>
-  <p>
-    <label for="email">Email:</label>
-    <input type="email" id="userEmail">
-  </p>
-  <input type="submit" value="Send" id="sendButton">
-</form>
-
- -

Result

- -

{{EmbedLiveSample("Examples", 640, 300)}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG')}}{{Spec2('HTML WHATWG')}}WHATWG HTML Specification
{{SpecName('HTML5 W3C')}}{{Spec2('HTML5 W3C')}}No change from {{SpecName("DOM2 HTML")}}
{{SpecName('DOM2 HTML')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName("DOM1")}}.
{{SpecName('DOM1')}}{{Spec2('DOM1')}}Initial definition.
- -

Browser compatibility

- -
- - -

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

-
- -

See also

- -
-
References
-
- -
-
Guides
-
- -
-
diff --git a/files/uk/web/api/html_dom_api/microtask_guide/index.html b/files/uk/web/api/html_dom_api/microtask_guide/index.html deleted file mode 100644 index 7b02378a59..0000000000 --- a/files/uk/web/api/html_dom_api/microtask_guide/index.html +++ /dev/null @@ -1,324 +0,0 @@ ---- -title: Використання мікрозадач у JavaScript за допомогою queueMicrotask() -slug: Web/API/HTML_DOM_API/Microtask_guide -tags: - - API - - JavaScript - - ServiceWorker - - SharedWorker - - Window - - Worker - - queueMicrotask - - Довідник - - асинхронний - - мікрозадача - - пакет - - черга -translation_of: Web/API/HTML_DOM_API/Microtask_guide ---- -

{{APIRef("HTML DOM")}}

- -

Мікрозадача - це коротка функція, яка виконується після того, як функція чи програма, яка її створила, завершується, та тільки якщо стек виконання JavaScript порожній, але перед поверненням контролю до циклу подій {{Glossary("user agent", "користувацького агента")}} для керування середовищем виконання скрипта. Даний цикл подій може бути або головним циклом подій веб-переглядача, або циклом подій, що керує веб-виконавцем. Це дозволяє даній функції виконуватись без ризику втрутитись у виконання іншого скрипта, в той же час гарантує, що мікрозадача виконається до того, як користувацький агент матиме змогу відреагувати на дії, виконані цією мікрозадачею.

- -

Проміси JavaScript та Mutation Observer API використовують чергу мікрозадач для виконання своїх зворотніх викликів, але бувають інші випадки, коли здатність відкласти роботу до завершення поточного проходу циклу подій може бути корисна. Щоб дозволити стороннім бібліотекам, фреймворкам та поліфілам використовувати мікрозадачі, метод {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} доступний у інтерфейсах {{domxref("Window")}} та {{domxref("Worker")}} через домішку {{domxref("WindowOrWorkerGlobalScope")}}.

- -

Задачі та мікрозадачі

- -

Щоб належно обговорювати мікрозадачі, насамперед, корисно знати, що таке задача JavaScript та чим мікрозадачі відрізняються від задач. Це швидке, спрощене пояснення, але якщо вам потрібно більше подробиць, ви можете їх дізнатись у статті В подробицях: мікрозадачі та середовище виконання JavaScript.

- -

Задачі

- -

Задача - це будь-який код JavaScript, що запланований до запуску стандартними механізмами, такими як початковий запуск програми, запуск зворотного виклику для події, або запуск таймера чи інтервалу. Всі вони розташовуються у черзі задач.

- -

Задачі додаються до черги задач, коли:

- - - -

Цикл подій, що керує вашим кодом, обробляє ці задачі одна за одною, в тому порядку, в якому вони були додані у чергу. Лише ті задачі, які вже знаходились у черзі задач, коли почався прохід циклу подій, будуть виконані протягом поточної ітерації. Решті доведеться зачекати наступної ітерації.

- -

Мікрозадачі

- -

Спершу різниця між мікрозадачами та задачами здається незначною. І вони дійсно схожі; і те, й інше - код JavaScript, який розміщується у черзі та запускається у належний час. Однак, в той час, як цикл подій запускає лише задачі, наявні у черзі на момент початку ітерації, одна за одною, з мікрозадачами він поводиться зовсім по-іншому.

- -

Є дві ключові відмінності.

- -

По-перше, кожен раз, коли задача завершується, цикл подій перевіряє, чи задача повертає контроль іншому коду JavaScript. Якщо ні, він запускає всі мікрозадачі з черги мікрозадач. Таким чином, черга мікрозадач обробляється багаторазово протягом однієї ітерації циклу подій, в тому числі після обробки подій та інших зворотних викликів.

- -

По-друге, якщо мікрозадача додає інші мікрозадачі до черги, викликаючи метод {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, ці додані мікрозадачі виконуються перед запуском наступної задачі. Все тому, що цикл подій викликатиме мікрозадачі, доки у черзі не залишиться жодної, навіть якщо при цьому додаються нові.

- -
-

Застереження: Оскільки мікрозадачі можуть ставити у чергу інші мікрозадачі, а цикл подій продовжуватиме обробляти мікрозадачі, доки черга не спорожніє, існує реальний ризик спричинити нескінченну обробку мікрозадач циклом подій. Будьте обережні, додаючи мікрозадачі рекурсивно.

-
- -

Використання мікрозадач

- -

Перед тим, як продовжити, важливо зазначити ще раз, що більшість програмістів нечасто використовують мікрозадачі, якщо взагалі використовують. Це вузькоспеціалізована функціональність сучасної JavaScript-розробки для переглядачів, що дозволяє вам запланувати виконання коду попереду чогось іншого у довгому списку речей, що чекають на виконання комп'ютером користувача. Зловживання цією можливістю призведе до проблем з продуктивністю.

- -

Додавання мікрозадач у чергу

- -

Таким чином, вам варто використовувати мікрозадачі лише тоді, коли немає іншого рішення, або при створенні фреймворків чи бібліотек, які мають використовувати мікрозадачі для створення функціональності, яку реалізують. Хоча раніше існували трюки, які дозволяли ставити мікрозадачі в чергу (наприклад, створення проміса, який негайно вирішується), введення методу {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} додає стандартний спосіб створення мікрозадач безпечно та без допомоги трюків.

- -

Введення методу queueMicrotask() дозволяє уникнути вивертів, що трапляються під час такого проникнення у чергу мікрозадач за допомогою промісів. Наприклад, при використанні промісів для створення мікрозадач, винятки, викинуті зворотним викликом, повідомляються як відхилені проміси, а не як стандартні винятки. Також, створення та знищення промісів потребує додаткових витрат як часу, так і пам'яті, цього уникає функція, яка належним чином ставить мікрозадачі у чергу.

- -

Просто передайте {{jsxref("Function","функцію")}} JavaScript, яку треба викликати, коли контекст обробляє мікрозадачі, у метод queueMicrotask(), доступний у глобальному контексті, як визначено у інтерфейсі {{domxref("Window")}} або {{domxref("Worker")}}, в залежності від поточного контексту виконання.

- -
queueMicrotask(() => {
-  /* тут код, який виконує мікрозадача */
-});
-
- -

Сама функція мікрозадачі не приймає параметрів та не повертає значення.

- -

Коли використовувати мікрозадачі

- -

У цьому розділі ми розглянемо сценарії, в яких мікрозадачі є особливо корисними. Загалом, мова йде про отримання та перевірку результатів, або прибирання, після того, як головне тіло контексту виконання JavaScript завершується, але перед тим, як опрацьовуються будь-які обробники подій, таймери та інтервали, чи інші зворотні виклики.

- -

Коли це корисно?

- -

Головна причина використання мікрозадач проста: забезпечити послідовний порядок виконання задач, навіть коли результати чи дані доступні синхронно, одночасно знижуючи ризик помітних користувачу затримок у операціях.

- -

Забезпечення порядку виконання при використанні промісів в умовних конструкціях

- -

Одна з ситуацій, в якій можуть використовуватись мікрозадачі - це забезпечення завжди послідовного порядку виконання у ситуації, коли проміси використовуються у одному блоці конструкції if...else (чи іншої умовної конструкції), але не в іншому блоці. Розглянемо наступний код:

- -
customElement.prototype.getData = url => {
-  if (this.cache[url]) {
-    this.data = this.cache[url];
-    this.dispatchEvent(new Event("load"));
-  } else {
-    fetch(url).then(result => result.arrayBuffer()).then(data => {
-      this.cache[url] = data;
-      this.data = data;
-      this.dispatchEvent(new Event("load"));
-    });
-  }
-};
- -

Проблема тут полягає в тому, що, використовуючи задачу в одній гілці конструкції if...else (у випадку, коли зображення доступне з кешу), але маючи проміси у блоці else, ми отримуємо ситуацію, в якій порядок операцій може бути різним; наприклад, як показано нижче.

- -
element.addEventListener("load", () => console.log("Завантажені дані"));
-console.log("Отримання даних...");
-element.getData();
-console.log("Дані отримано");
-
- -

Виконання цього коду два рази підряд дає результати, наведені у таблиці:

- - - - - - - - - - - - - - - -
Результати, коли дані не кешовані (зліва) та коли дані знайдені в кеші
Дані не кешованіДані кешовані
- 
-Отримання даних
-Дані отримано
-Завантажені дані
-
- 		- 
-Отримання даних
-Завантажені дані
-Дані отримано
-
-
- -

Навіть гірше, іноді властивість елементів data буде встановлена, а іноді не буде, на той момент, коли цей код завершує виконання.

- -

Ми можемо забезпечити послідовний порядок цих операцій використанням мікрозадачі у блоці if, щоб збалансувати два блоки:

- -
customElement.prototype.getData = url => {
-  if (this.cache[url]) {
-    queueMicrotask(() => {
-      this.data = this.cache[url];
-      this.dispatchEvent(new Event("load"));
-    });
-  } else {
-    fetch(url).then(result => result.arrayBuffer()).then(data => {
-      this.cache[url] = data;
-      this.data = data;
-      this.dispatchEvent(new Event("load"));
-    });
-  }
-};
- -

Це збалансовує два блоки, бо тепер в обох ситуаціях встановлення значення data та запуск події load відбувається всередині мікрозадачі (за допомогою queueMicrotask() у блоці if та за допомогою промісів, що використовуються методом {{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}}, у блоці else).

- -

Пакетне виконання операцій

- -

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

- -

Фрагмент коду, наведений нижче, створює функцію, яка збирає множину повідомлень у масив, використовуючи мікрозадачу, щоб відправити їх як єдиний об'єкт по завершенні контексту.

- -
const messageQueue = [];
-
-let sendMessage = message => {
-  messageQueue.push(message);
-
-  if (messageQueue.length === 1) {
-    queueMicrotask(() => {
-      const json = JSON.stringify(messageQueue);
-      messageQueue.length = 0;
-      fetch("url-of-receiver", json);
-    });
-  }
-};
-
- -

Коли викликається sendMessage(), вказане повідомлення спочатку додається у масив черги повідомлень. А далі відбувається цікаве.

- -

Якщо повідомлення, яке ми додали до масиву, є першим, ми додаємо мікрозадачу, яка відправлятиме пакет. Мікрозадача виконається, як завжди, коли шлях виконання JavaScript сягне верхнього рівня, одразу перед зворотними викликами. Це означає, що будь-які подальші виклики sendMessage(), зроблені в цей час, додадуть свої повідомлення до черги повідомлень, але, завдяки перевірці довжини масиву перед додаванням мікрозадачі, нових мікрозадач у чергу не буде додано.

- -

Коли запускається мікрозадача, то вона має масив, потенційно, багатьох повідомлень, які на неї очікують. Вона починається кодуванням його як JSON за допомогою методу {{jsxref("JSON.stringify()")}}. Після цього вміст масиву більше не потрібний, а отже, ми спорожнюємо масив messageQueue. Нарешті, ми використовуємо метод {{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}}, щоб відправити рядок JSON на сервер.

- -

Це дозволяє кожному виклику sendMessage(), зробленому під час тієї самої ітерації циклу подій, додавати свої повідомлення до тієї самої операції fetch(), без потенційних затримок трансмісії іншими задачами, такими як таймери та подібні.

- -

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

- -

Приклади

- -

Простий приклад мікрозадачі

- -

У цьому простому прикладі ми бачимо, що додавання мікрозадачі у чергу спричиняє запуск зворотного виклику мікрозадачі після того, як тіло цього скрипта верхнього рівня завершує виконання.

- - - -

JavaScript

- - - -

У наступному коді ми бачимо виклик {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, що використовується для планування запуску мікрозадачі. Цей виклик оточують виклики log(), користувацької функції, яка просто виводить текст на екран.

- -
log("До розміщення мікрозадачі в черзі");
-queueMicrotask(() => {
-  log("Мікрозадача запустилась.")
-});
-log("Після розміщення мікрозадачі в черзі");
- -

Результат

- -

{{EmbedLiveSample("Простий_приклад_мікрозадачі", 640, 80)}}

- -

Таймер та приклад мікрозадачі

- -

У цьому прикладі встановлюється таймер для запуску через нуль мілісекунд (або "якомога швидше"). Це демонструє різницю між тим, що означає "якомога швидше" при плануванні нової задачі (наприклад, при використанні setTimeout()) у порівнянні з використанням мікрозадачі.

- - - -

JavaScript

- - - -

У наступному коді ми бачимо виклик {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, який використовується для планування запуску мікрозадачі. Цей виклик розташований між викликами log(), користувацької функції, яка просто виводить текст на екран.

- -

Наступний код встановлює таймер, який має запуститися через нуль мілісекунд, після чого додає у чергу мікрозадачу. Він оточений викликами log() для виводу додаткових повідомлень.

- -
let callback = () => log("Запустився звичайний зворотний виклик таймера");
-
-let urgentCallback = () => log("*** О, ні! Запустився терміновий зворотний виклик!");
-
-log("Початок головної програми");
-setTimeout(callback, 0);
-queueMicrotask(urgentCallback);
-log("Кінець головної програми");
- -

Результат

- -

{{EmbedLiveSample("Таймер_та_приклад_мікрозадачі", 640, 100)}}

- -

Зауважте, що текст, який виводиться головною програмою, з'являється першим, далі текст, виведений мікрозадачею, а за ним текст зворотного виклику таймера. Все тому, що, коли задача, що керує виконанням головної програми, завершується, черга мікрозадач обробляється раніше черги задач, в якій розташований зворотний виклик таймера. Знання того, що задачі та мікрозадачі розташовуються у різних чергах, і те, що мікрозадачі виконуються першими, допомагає легше в цьому розібратись.

- -

Мікрозадача з функції

- -

Цей приклад трохи розширює попередній додаванням функції, яка виконує певну роботу. Ця функція використовує queueMicrotask(), щоб додати мікрозадачу. Важливий момент, який варто з нього винести - мікрозадача не виконується, коли завершується функція, а тільки коли завершується головна програма.

- - - -

JavaScript

- - - -

Код головної програми наступний. Функція doWork() викликає queueMicrotask(), але мікрозадача не запускається, доки вся програма не завершується, оскільки саме тоді завершується задача і не залишається нічого іншого у стеку виконання.

- -
let callback = () => log("Запустився звичайний зворотний виклик таймера");
-
-let urgentCallback = () => log("*** О, ні! Запустився терміновий зворотний виклик!");
-
-let doWork = () => {
-  let result = 1;
-
-  queueMicrotask(urgentCallback);
-
-  for (let i=2; i<=10; i++) {
-    result *= i;
-  }
-  return result;
-};
-
-log("Початок головної програми");
-setTimeout(callback, 0);
-log(`10! дорівнює ${doWork()}`);
-log("Кінець головної програми");
- -

Результат

- -

{{EmbedLiveSample("Мікрозадача_з_функції", 640, 100)}}

- -

Див. також

- - diff --git a/files/uk/web/api/htmlcanvaselement/index.html b/files/uk/web/api/htmlcanvaselement/index.html deleted file mode 100644 index 9f1a6452ed..0000000000 --- a/files/uk/web/api/htmlcanvaselement/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: HTMLCanvasElement -slug: Web/API/HTMLCanvasElement -tags: - - API - - Canvas - - HTML DOM - - Interface - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/HTMLCanvasElement ---- -
-
{{APIRef("Canvas API")}}
-
- -

The HTMLCanvasElement interface provides properties and methods for manipulating the layout and presentation of canvas elements. The HTMLCanvasElement interface also inherits the properties and methods of the {{domxref("HTMLElement")}} interface.

- -

{{InheritanceDiagram}}

- -

Properties

- -

Inherits properties from its parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLCanvasElement.height")}}
-
Is a positive integer reflecting the {{htmlattrxref("height", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 150 is used.
-
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
-
Is a {{jsxref("Boolean")}} reflecting the {{htmlattrxref("moz-opaque", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized.
-
{{domxref("HTMLCanvasElement.width")}}
-
Is a positive integer reflecting the {{htmlattrxref("width", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used.
-
{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}
-
Is a function that is Initially null, Web content can set this to a JavaScript function that will be called if the page is printed. This function can then redraw the canvas at a higher resolution that is suitable for the printer being used. See this blog post.
-
- -

Methods

- -

Inherits methods from its parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
-
Returns a {{domxref("CanvasCaptureMediaStream")}} that is a real-time video capture of the surface of the canvas.
-
{{domxref("HTMLCanvasElement.getContext()")}}
-
Returns a drawing context on the canvas, or null if the context ID is not supported. A drawing context lets you draw on the canvas. Calling getContext with "2d" returns a {{domxref("CanvasRenderingContext2D")}} object, whereas calling it with "experimental-webgl" (or "webgl") returns a {{domxref("WebGLRenderingContext")}} object. This context is only available on browsers that implement WebGL.
-
{{domxref("HTMLCanvasElement.toDataURL()")}}
-
Returns a data-URL containing a representation of the image in the format specified by the type parameter (defaults to png). The returned image is in a resolution of 96dpi.
-
{{domxref("HTMLCanvasElement.toBlob()")}}
-
Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
-
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
-
Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.
-
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified name. If type is not specified, the image type is image/png.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}}Adds the method captureStream().
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}The method getContext() now returns a {{domxref("RenderingContext")}} rather than an opaque object.
- The methods probablySupportsContext(), setContext() and transferControlToProxy()have been added.
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Initial definition.
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2D context)4.0{{CompatVersionUnknown}}{{CompatGeckoDesktop('1.9.2')}}9.09.0 [1]3.1
toBlob()50{{CompatNo}}{{CompatGeckoDesktop('19')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
- setContext(),
- transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2D context)2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}10.0 [1]3.2
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} as experimental-webgl{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
toBlob(){{CompatNo}} (bug 67587)50{{CompatNo}}{{CompatGeckoMobile('18')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
- setContext(),
- transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Opera Mini 5.0 and later has partial support.

- -

[2] Support for the third parameter, has been added in Gecko 25 only: when used with the "image/jpeg" type, this argument specifies the image quality.

- -

[3] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

- -

See also

- - diff --git a/files/uk/web/api/htmlelement/index.html b/files/uk/web/api/htmlelement/index.html deleted file mode 100644 index 02de0c792e..0000000000 --- a/files/uk/web/api/htmlelement/index.html +++ /dev/null @@ -1,486 +0,0 @@ ---- -title: HTMLElement -slug: Web/API/HTMLElement -tags: - - API - - HTML DOM - - Interface - - NeedsMobileBrowserCompatibility - - NeedsNewLayout - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/HTMLElement ---- -
-
{{ APIRef("HTML DOM") }}
-
- -
 
- -

The HTMLElement interface represents any HTML element. Some elements directly implement this interface, others implement it via an interface that inherits it.

- -

{{InheritanceDiagram}}

- -

Properties

- -

Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.

- -
-
{{domxref("HTMLElement.accessKey")}}
-
Is a {{domxref("DOMString")}} representing the access key assigned to the element.
-
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
-
Returns a {{domxref("DOMString")}} containing the element's assigned access key.
-
{{domxref("HTMLElement.contentEditable")}}
-
Is a {{domxref("DOMString")}}, where a value of "true" means the element is editable and a value of "false" means it isn't.
-
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
-
Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.
-
{{domxref("HTMLElement.contextMenu")}}
-
Is a {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be null.
-
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}
-
Returns a {{domxref("DOMStringMap")}} with which script can read and write the element's custom data attributes (data-*) .
-
{{domxref("HTMLElement.dir")}}
-
Is a {{domxref("DOMString")}}, reflecting the dir global attribute, representing the directionality of the element. Possible values are "ltr", "rtl", and "auto".
-
{{domxref("HTMLElement.draggable")}}
-
Is a {{jsxref("Boolean")}} indicating if the element can be dragged.
-
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
-
Returns a {{domxref("DOMSettableTokenList")}} reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation.
-
{{domxref("HTMLElement.hidden")}}
-
Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.
-
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
-
Is a {{jsxref("Boolean")}} representing the item scope.
-
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("DOMSettableTokenList")}}…
-
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
-
Is a {{domxref("DOMString")}} representing the item ID.
-
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("DOMSettableTokenList")}}…
-
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("DOMSettableTokenList")}}…
-
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
-
Returns a {{jsxref("Object")}} representing the item value.
-
{{domxref("HTMLElement.lang")}}
-
Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.
-
{{domxref("HTMLElement.noModule")}}
-
Is a {{jsxref("Boolean")}} indicating wether an import script can be executed in user agents that support module scripts.
-
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a double containing the height of an element, relative to the layout.
-
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
-
Returns a double, the distance from this element's left border to its offsetParent's left border.
-
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("Element")}} that is the element from which all offset calculations are currently computed.
-
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
-
Returns a double, the distance from this element's top border to its offsetParent's top border.
-
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
-
Returns a double containing the width of an element, relative to the layout.
-
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("HTMLPropertiesCollection")}}…
-
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
-
Is a {{jsxref("Boolean")}} that controls spell-checking. It is present on all HTML elements, though it doesn't have an effect on all of them.
-
{{domxref("HTMLElement.style")}}
-
Is a {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.
-
{{domxref("HTMLElement.tabIndex")}}
-
Is a long representing the position of the element in the tabbing order.
-
{{domxref("HTMLElement.title")}}
-
Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.
-
{{domxref("HTMLElement.translate")}} {{experimental_inline}}
-
Is a {{jsxref("Boolean")}} representing the translation.
-
- -

Event handlers

- -

Most event handler properties, of the form onXYZ, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}} interfaces and implemented by HTMLElement. In addition, the following handlers are specific to HTMLElement.

- -
-
{{ domxref("HTMLElement.oncopy") }}  {{ non-standard_inline() }}
-
Returns the event handling code for the copy event ({{bug("280959")}}).
-
{{ domxref("HTMLElement.oncut") }}  {{ non-standard_inline() }}
-
Returns the event handling code for the cut event ({{bug("280959")}}).
-
{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
-
Returns the event handling code for the paste event ({{bug("280959")}}).
-
{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchstart")}} event.
-
{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchend")}} event.
-
{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchmove")}} event.
-
{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchenter")}} event.
-
{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchleave")}} event.
-
{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchcancel")}} event.
-
- -

Methods

- -

Inherits methods from its parent, {{domxref("Element")}}.

- -
-
{{domxref("HTMLElement.blur()")}}
-
Removes keyboard focus from the currently focused element.
-
{{domxref("HTMLElement.click()")}}
-
Sends a mouse click event to the element.
-
{{domxref("HTMLElement.focus()")}}
-
Makes the element the current keyboard focus.
-
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
-
Runs the spell checker on the element's contents.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Added the following properties: offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Added the following properties: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, and itemValue.
- Added the following method: forceSpellcheck().
- Moved the onXYZ attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Added the following properties: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, and all the onXYZ properties.
- Moved the id and className properties to the {{domxref("Element")}} interface.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoDesktop("5.0")}}{{CompatChrome(17)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}6.0
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoDesktop("8.0")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{WebkitBug(72715)}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}9{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoDesktop("5.0")}}{{CompatChrome(9)}}{{CompatVersionUnknown}}9{{CompatUnknown}}6.0
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}{{CompatChrome(8)}}{{CompatVersionUnknown}}1111.105.1
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}9{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.contentEditable", "contentEditable")}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5.59{{CompatVersionUnknown}}
{{domxref("HTMLElement.spellcheck", "spellcheck")}}{{CompatGeckoDesktop("1.8.1")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.style", "style")}}{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.draggable", "draggable")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}12.0{{CompatUnknown}}
{{domxref("HTMLElement.dropzone", "dropzone")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}12.0{{CompatNo}}
{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.onModule")}}{{CompatUnknown}}{{CompatChrome(60)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(47)}}{{CompatUnknown}}
{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}11.60
- (Removed in Opera 15)		{{CompatNo}}
{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoDesktop("1.9")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)Android WebviewChrome for AndroidEdgeIE MobileOpera MobileSafari Mobile
Basic support -

{{CompatGeckoMobile("1.0")}}

- 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoMobile("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoMobile("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoMobile("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoMobile("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoMobile("6.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoMobile("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.onModule", "onModule()")}}{{CompatUnknown}}{{CompatChrome(60)}}{{CompatChrome(60)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(47)}}{{CompatUnknown}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoMobile("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

See also

- - diff --git a/files/uk/web/api/htmlelement/offsettop/index.html b/files/uk/web/api/htmlelement/offsettop/index.html deleted file mode 100644 index 9bafdc485c..0000000000 --- a/files/uk/web/api/htmlelement/offsettop/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: HTMLElement.offsetTop -slug: Web/API/HTMLElement/offsetTop -translation_of: Web/API/HTMLElement/offsetTop ---- -
-
{{ APIRef("HTML DOM") }}
- -
Властивість лише для зчитування HTMLElement.offsetTop повертає відстань від поточного елемента відносно верху {{domxref("HTMLelement.offsetParent","offsetParent")}} .
-
- -

Синтакс

- -
topPos = element.offsetTop;
-
- -

Параметри

- - - -

Приклад

- -
var d = document.getElementById("div1");
-var topPos = d.offsetTop;
-
-if (topPos > 10) {
-  // object is offset more
-  // than 10 pixels from its parent
-}
- -

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

- - - - - - - - - - - - - - - - -
СпецифіуаціяСтатусКоментар
{{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}{{Spec2('CSSOM View')}} 
- -

Браузерна сумісність

- - - -

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

- -

In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".

- -

This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)

diff --git a/files/uk/web/api/htmlformelement/index.html b/files/uk/web/api/htmlformelement/index.html deleted file mode 100644 index 537c56b222..0000000000 --- a/files/uk/web/api/htmlformelement/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: HTMLFormElement -slug: Web/API/HTMLFormElement -tags: - - API - - Form Element - - Forms - - HTML DOM - - HTML forms - - HTMLFormElement - - Interface - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/HTMLFormElement ---- -
{{APIRef("HTML DOM")}}
- -

The HTMLFormElement interface represents a {{HTMLElement("form")}} element in the DOM; it allows access to and in some cases modification of aspects of the form, as well as access to its component elements.

- -

{{InheritanceDiagram(600,120)}}

- -

Properties

- -

This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLFormElement.elements")}} {{ReadOnlyInline}}
-
A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.
-
{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}
-
A long reflecting  the number of controls in the form.
-
{{domxref("HTMLFormElement.name")}}
-
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.
-
{{domxref("HTMLFormElement.method")}}
-
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.
-
{{domxref("HTMLFormElement.target")}}
-
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.
-
{{domxref("HTMLFormElement.action")}}
-
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.
-
{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}
-
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two properties are synonyms.
-
{{domxref("HTMLFormElement.acceptCharset")}}
-
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.
-
{{domxref("HTMLFormElement.autocomplete")}}
-
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.
-
{{domxref("HTMLFormElement.noValidate")}}
-
A {{jsxref("Boolean")}} reflecting the value of the form's  {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.
-
- -

Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named action will have its action property return that input instead of the form's {{ htmlattrxref("action", "form") }} HTML attribute).

- -

Methods

- -

This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLFormElement.checkValidity", "checkValidity()")}}
-
Returns true if the element's child controls are subject to constraint validation and satisfy those contraints; returns false if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to false.
-
{{domxref("HTMLFormElement.reportValidity", "reportValidity()")}}
-
Returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.
-
{{domxref("HTMLFormElement.requestSubmit", "requestSubmit()")}}
-
Requests that the form be submitted using the specified submit button and its corresponding configuration.
-
{{domxref("HTMLFormElement.reset", "reset()")}}
-
Resets the form to its initial state.
-
{{domxref("HTMLFormElement.submit", "submit()")}}
-
Submits the form to the server.
-
- -

Deprecated methods

- -
-
{{domxref("HTMLFormElement.requestAutocomplete()")}} {{deprecated_inline}}
-
Triggers a native browser interface to assist the user in completing the fields which have an autofill field name value that is not off or on. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem.
-
- -

Events

- -

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

- -
-
formdata
-
The formdata event fires after the entry list representing the form's data is constructed.
- Also available via the onformdata property.
-
reset
-
The reset event fires when a form is reset.
- Also available via the onreset property.
-
submit
-
The submit event fires when a form is submitted.
- Also available via the onsubmit property.
-
- -

Usage notes

- -

Obtaining a form element object

- -

To obtain an HTMLFormElement object, you can use a CSS selector with {{domxref("ParentNode.querySelector", "querySelector()")}}, or you can get a list of all of the forms in the document using its {{domxref("Document.forms", "forms")}} property.

- -

{{domxref("Document.forms")}} returns an array of HTMLFormElement objects listing each of the forms on the page. You can then use any of the following syntaxes to get an individual form:

- -
-
document.forms[index]
-
Returns the form at the specified index into the array of forms.
-
document.forms[id]
-
Returns the form whose ID is id.
-
document.forms[name]
-
Returns the form whose {{domxref("Element.name", "name")}} attribute's value is name.
-
- -

Accessing the form's elements

- -

You can access the list of the form's data-containing elements by examining the form's {{domxref("HTMLFormElement.elements", "elements")}} property. This returns an {{domxref("HTMLFormControlsCollection")}} listing all of the form's user data entry elements, both those which are descendants of the <form> and those which are made members of the form using their form attributes.

- -

You can also get the form's element by using its name attribute as a key of the form, but using elements is a better approach — it contains only the form's elements, and it cannot be mixed with other attributes of the form.

- -

Elements that are considered form controls

- -

The elements which are included by HTMLFormElement.elements and HTMLFormElement.length are:

- - - -

No other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.

- -

Examples

- -

Creating a new form element, modifying its attributes, then submitting it:

- -
var f = document.createElement("form");// Create a form
-document.body.appendChild(f);          // Add it to the document body
-f.action = "/cgi-bin/some.cgi";        // Add action and method attributes
-f.method = "POST";
-f.submit();                            // Call the form's submit method
-
- -

Extract information from a form element and set some of its attributes:

- -
<form name="formA" action="/cgi-bin/test" method="post">
- <p>Press "Info" for form details, or "Set" to change those details.</p>
- <p>
-  <button type="button" onclick="getFormInfo();">Info</button>
-  <button type="button" onclick="setFormInfo(this.form);">Set</button>
-  <button type="reset">Reset</button>
- </p>
-
- <textarea id="form-info" rows="15" cols="20"></textarea>
-</form>
-
-<script>
-  function getFormInfo(){
-    // Get a reference to the form via its name
-    var f = document.forms["formA"];
-    // The form properties we're interested in
-    var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ];
-    // Iterate over the properties, turning them into a string that we can display to the user
-    var info = properties.map(function(property) { return property + ": " + f[property] }).join("\n");
-
-    // Set the form's <textarea> to display the form's properties
-    document.forms["formA"].elements['form-info'].value = info; // document.forms["formA"]['form-info'].value would also work
-  }
-
-  function setFormInfo(f){ // Argument should be a form element reference.
-    f.action = "a-different-url.cgi";
-    f.name   = "a-different-name";
-  }
-</script>
-
- -

Submit a form into a new window:

- -
<!doctype html>
-<html>
-<head>
-<meta charset="utf-8">
-<title>Example new-window form submission</title>
-</head>
-<body>
-
-<form action="test.php" target="_blank">
-  <p><label>First name: <input type="text" name="firstname"></label></p>
-  <p><label>Last name: <input type="text" name="lastname"></label></p>
-  <p><label><input type="password" name="pwd"></label></p>
-
-  <fieldset>
-   <legend>Pet preference</legend>
-    <p><label><input type="radio" name="pet" value="cat"> Cat</label></p>
-    <p><label><input type="radio" name="pet" value="dog"> Dog</label></p>
-  </fieldset>
-
-  <fieldset>
-    <legend>Owned vehicles</legend>
-
-    <p><label><input type="checkbox" name="vehicle" value="Bike">I have a bike</label></p>
-    <p><label><input type="checkbox" name="vehicle" value="Car">I have a car</label></p>
-  </fieldset>
-
-  <p><button>Submit</button></p>
-</form>
-
-</body>
-</html>
- -

Submitting forms and uploading files using XMLHttpRequest

- -

If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read this paragraph.

- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#htmlformelement", "HTMLFormElement")}}{{Spec2('HTML WHATWG')}}The following method has been added: requestAutocomplete().
{{SpecName('HTML5 W3C', "sec-forms.html#htmlformelement", "HTMLFormElement")}}{{Spec2('HTML5 W3C')}}The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change. The following method has been added: checkValidity(). The following properties have been added: autocomplete, noValidate, and encoding.
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/uk/web/api/htmlformelement/reset/index.html b/files/uk/web/api/htmlformelement/reset/index.html deleted file mode 100644 index 9917055250..0000000000 --- a/files/uk/web/api/htmlformelement/reset/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: HTMLFormElement.reset() -slug: Web/API/HTMLFormElement/reset -tags: - - скидання форми -translation_of: Web/API/HTMLFormElement/reset ---- -
{{APIRef("HTML DOM")}}
- -

Метод HTMLFormElement.reset() відновлює значення елемента форми за замовчуванням.  Цей метод робить те ж саме, що і натискання кнопки скидання форми. 

- -

Якщо елемент управління форми (наприклад, кнопка скидання) має ім'я або ідентифікатор скидання, він маскує метод скидання форми. Він не скидає інші атрибути input елемента, наприклад, disabled.

- -

Синтаксис

- -
HTMLFormElement.reset()
-
- -

Приклад

- -
<form>
-    <input type="text" size="350" value="Приймеш синю пігулку - і казці кінець. Ти прокинешся у своєму ліжку і повіриш, що це був сон. Приймеш червону пігулку - увійдеш до країни чудес. Я покажу тобі, чи глибока кроляча нора."/>
-    <input type="reset" value="Reset">
-    <button type="reset">Red</button>
-    <div id="test">Blue</div>
-</form>
-
-<script>
-  // тут ми будем зберігати елемент, при нажатті на який ініціювало reset подію
-  let resetElement = undefined;
-
-  // додамо прослуховувач click події до елементів, які дозволяють скинути значення форми
-  document.querySelectorAll("*[type=reset], #test").forEach(element => element.addEventListener("click", e => {
-    resetElement = e.target;
-  }));
-
-  // при активації клік події виклечемо .reset() на FORM елементі
-  document.querySelector("#test").addEventListener("click", e => e.target.parentNode.reset());
-
- // переконаємося в тому, що .reset() ініціює подію
- window.addEventListener("reset", e => {
-    console.log(e.type, " has been initiated by: ", resetElement.tagName);
-    resetElement = undefined;
-  })
-</script>
- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', '#dom-form-reset', 'HTMLFormElement: reset')}}{{Spec2('HTML WHATWG')}}
- -

Сумісність з веб-переглядачами

- - - -

{{Compat("api.HTMLFormElement.reset")}}

diff --git a/files/uk/web/api/htmlimageelement/image/index.html b/files/uk/web/api/htmlimageelement/image/index.html deleted file mode 100644 index 1477430aae..0000000000 --- a/files/uk/web/api/htmlimageelement/image/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Image() -slug: Web/API/HTMLImageElement/Image -tags: - - Constructor - - DOM - - HTML DOM - - HTMLImageElement - - Довідка -translation_of: Web/API/HTMLImageElement/Image ---- -
{{ APIRef("HTML DOM") }}
- -
Конструктор Image() створює новий примірник {{domxref("HTMLImageElement")}}. Наслідком є те саме, що й для {{domxref("Document.createElement()", "document.createElement('img')")}}.
- -

Синтаксис

- -
new Image(width, height)
- -

Параметри

- -
-
width {{optional_inline}}
-
Ширина зображення (визначає значення атрибута {{htmlattrxref("width", "img")}}).
-
height {{optional_inline}}
-
Висота зображення (визначає значення атрибута {{htmlattrxref("height", "img")}}).
-
- -

Приклади

- -

У наведеному прикладі створюється елемент <img> завбільшки 100x200, до нього завантажується якесь зображення та додається до тіла документа:

- -
var image = new Image(100, 200);
-image.onload = function() {
-  // Додати у DOM
-  document.body.appendChild(image);
-};
-image.src = '/assets/зразок.png';
- -

Того ж можна досягти оголошенням такого HTML-елемента просто всередині {{htmlelement("body")}}:

- -
<img width="100" height="200" src="/assets/зразок.png">
- -

Але перевагою створення <img> за допомогою конструктора Image() є можливість додати зображення у DOM лише після його завантаження (завдяки обробникові події load).

- -

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

- - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}{{spec2("HTML WHATWG")}} 
- -

Підтримка веб-переглядачами

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}
-
- -

 

diff --git a/files/uk/web/api/htmlimageelement/index.html b/files/uk/web/api/htmlimageelement/index.html deleted file mode 100644 index 0f227e69f3..0000000000 --- a/files/uk/web/api/htmlimageelement/index.html +++ /dev/null @@ -1,401 +0,0 @@ ---- -title: HTMLImageElement -slug: Web/API/HTMLImageElement -tags: - - API - - HTML DOM - - HTMLImageElement - - Interface - - NeedsTranslation - - Reference - - TopicStub - - img -translation_of: Web/API/HTMLImageElement ---- -
{{APIRef("HTML DOM")}}
- -

The HTMLImageElement interface provides special properties and methods  for manipulating the layout and presentation of {{HTMLElement("img")}} elements.

- -

Properties

- -

Inherits properties from its parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} indicating the alignment of the image with respect to the surrounding context.
-
{{domxref("HTMLImageElement.alt")}}
-
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("alt", "img")}} HTML attribute,  thus indicating fallback context for the image.
-
{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} that is responsible for the width of the border surrounding the image. This is now deprecated and the CSS {{cssxref("border")}} property should be used instead.
-
{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}
-
Returns a {{domxref("Boolean")}} that is true if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no {{domxref("HTMLImageElement.src", "src")}} value.
-
{{domxref("HTMLImageElement.crossOrigin")}}
-
Is a {{domxref("DOMString")}} representing the CORS setting for this image element. See CORS settings attributes for further details.
-
{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("DOMString")}} representing the URL to the currently displayed image (which may change, for example in response to media queries).
-
{{domxref("HTMLImageElement.height")}}
-
Is a unsigned long that reflects the {{htmlattrxref("height", "img")}} HTML attribute, indicating the rendered height of the image in CSS pixels.
-
{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}
-
Is a long representing the space on either side of the image.
-
{{domxref("HTMLImageElement.isMap")}}
-
Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.
-
{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} representing the URI of a long description of the image.
-
{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} that refers to a low-quality (but faster to load) copy of the image.
-
{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} representing the name of the element.
-
{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}
-
Returns a unsigned long representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows 0.
-
{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}
-
Returns a unsigned long representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show 0.
-
{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}
-
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "img")}} HTML attribute indicating which referrer to use in order to fetch the image.
-
{{domxref("HTMLImageElement.src")}}
-
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "img")}} HTML attribute, containing the full URL of the image including base URI.
-
{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}
-
Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("sizes", "img")}} HTML attribute.
-
{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}
-
Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("srcset", "img")}} HTML attribute, containing a list of candidate images, separated by a comma (',', U+002C COMMA). A candidate image is a URL followed by a 'w' with the width of the images, or an 'x' followed by the pixel density.
-
{{domxref("HTMLImageElement.useMap")}}
-
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.
-
{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}
-
Is a long representing the space above and below the image.
-
{{domxref("HTMLImageElement.width")}}
-
Is a unsigned long that reflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.
-
{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a long representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior.
-
{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}
-
Returns a long representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.
-
- -

Methods

- -

Inherits properties from its parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLImageElement.Image()", "Image()")}}
-
The Image() constructor, taking two optional unsigned long, which are the width and the height of the resource, creates an instance of HTMLImageElement , not inserted in a DOM tree.
-
- -

Errors

- -

If an error occurs while trying to load or render the image, and an {{htmlattrxref("onerror")}} event handler has been configured to handle the {{event("error")}} event, that event handler will get called. This can happen in a number of situations, including:

- - - -

Example

- -
var img1 = new Image(); // HTML5 Constructor
-img1.src = 'image1.png';
-img1.alt = 'alt';
-document.body.appendChild(img1);
-
-var img2 = document.createElement('img'); // use DOM HTMLImageElement
-img2.src = 'image2.jpg';
-img2.alt = 'alt text';
-document.body.appendChild(img2);
-
-// using first image in the document
-alert(document.images[0].src);
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrerPolicy property.
{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}{{Spec2('CSSOM View')}}Added the x and y properties.
{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML WHATWG')}}The following properties have been added: srcset, currentSrc and sizes.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML5 W3C')}}A constructor (with 2 optional parameters) has been added.
- The following properties are now obsolete: name, border, align, hspace, vspace, and longdesc.
- The following properties are now unsigned long, instead of long: height, and width.
- The following properties have been added: crossorigin, naturalWidth, naturalHeight, and complete.
{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM2 HTML')}}The lowSrc property has been removed.
- The following properties are now long, instead of DOMString: height, width, hspace, and vspace.
{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM1')}}Initial definition.
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
naturalWidth, naturalHeight{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
crossorigin{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
complete{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5[4]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
srcset {{experimental_inline}}{{CompatChrome(34)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(32)}}[2]{{CompatNo}}21{{CompatSafari(7.1)}}
currentSrc {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(32)}}[2]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
sizes {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(33)}}[3]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
x and y{{CompatVersionUnknown}}{{CompatVersionUnknown}}14[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerPolicy {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onerror event handler{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(51)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
naturalWidth, naturalHeight{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}9{{CompatUnknown}}{{CompatVersionUnknown}}
crossorigin{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
complete{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
srcset {{experimental_inline}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile(32)}}[2]{{CompatNo}}{{CompatNo}}iOS 8
currentSrc {{experimental_inline}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile(32)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
sizes {{experimental_inline}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile(33)}}[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
x and y{{CompatVersionUnknown}}{{CompatVersionUnknown}}14[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerPolicy {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onerror event handler{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(51)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Though, these x and y properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but later, they were restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.

- -

[2] This feature is behind the dom.image.srcset.enabled preference, defaulting to false.

- -

[3] This feature is behind the dom.image.picture.enabled preference, defaulting to false.

- -

[4] IE reports false for broken images.

- -

See also

- - diff --git a/files/uk/web/api/htmlmediaelement/abort_event/index.html b/files/uk/web/api/htmlmediaelement/abort_event/index.html deleted file mode 100644 index d6141f3ed7..0000000000 --- a/files/uk/web/api/htmlmediaelement/abort_event/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: abort -slug: Web/API/HTMLMediaElement/abort_event -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort -original_slug: Web/Events/abort ---- -

Подія abort спрацьовує коли завантаження ресурсу було перервано.

- -

Загальна інформація

- -
-
Специфікація
-
DOM L3
-
Interface
-
UIEvent if generated from a user interface, Event otherwise.
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
Element
-
Default Action
-
None
-
- -

Властивості

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
diff --git a/files/uk/web/api/index.html b/files/uk/web/api/index.html deleted file mode 100644 index 60714ca304..0000000000 --- a/files/uk/web/api/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Список Web API -slug: Web/API -translation_of: Web/API ---- -

Під час написання коду розробнику доступна велика кількість Web API (Application Programming Interface, інтерфейс програмування застосунків). Нижче наведено перелік усіх API та інтерфейсів, які ви можете використовувати під час розробки веб-застосунку чи сайту.

- -

Web API зазвичай використовуються JavaScript, хоча і не обмежені саме цією мовою програмування.

- -

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

- -

Нижче наведено список усіх доступних API.

- -
{{ListGroups}}
- -

Інтерфейси

- -

Нижче наведено список усіх доступних інтерфейсів.

- -
{{APIListAlpha}}
- -

Дивіться також

- - diff --git a/files/uk/web/api/intersection_observer_api/index.html b/files/uk/web/api/intersection_observer_api/index.html deleted file mode 100644 index 49a9ce1d06..0000000000 --- a/files/uk/web/api/intersection_observer_api/index.html +++ /dev/null @@ -1,610 +0,0 @@ ---- -title: Intersection Observer API -slug: Web/API/Intersection_Observer_API -tags: - - API - - Clipping - - Intersection - - Intersection Observer API - - IntersectionObserver - - Overview - - Performance - - Reference - - Web - - Швидкодія -translation_of: Web/API/Intersection_Observer_API ---- -
{{DefaultAPISidebar("Intersection Observer API")}}
- -

Intersection Observer API дозволяє веб-застосункам асинхронно стежити за зміною перетину елемента з його батьком чи областю видимості документа {{Glossary("viewport")}}.

- -

Історично склалося так, що виявлення видимості окремого елемента чи видимості двох елементів по відношенню один до одного було непростою задачею. Варіанти вирішення цієї задачі були ненадійними і сповільнювали роботу браузера. На жаль, з "дорослішанням" вебу, необхідність у вирішенні цієї проблеми тільки зростала, з різних причин, таких як:

- - - -

Раніше реалізація виявлення пересічення елементів означала використання обробників подій і циклів, викликаючих методи типу {{domxref("Element.getBoundingClientRect()")}}, щоб зібрати необхідну інформацію про кожен зачеплений елемент. Оскільки весь цей код працює в основному потоці, виникають проблеми з продуктивністю.

- -

Розглянемо веб-сторінку з безкінечним скролом. На сторінці використовується бібліотека для керування періодично розміщуваною по всій сторінці рекламою, всюди анімована графіка, а також бібліотека для відображення спливаючих вікон. І всі ці речі використовують свої власні правила для визначення перетинів, і всі вони запущені в основному потоці. Автор сайту може навіть не підозрювати про цю проблему, а також може не знати, як працюють сторонні бібліотеки зсередини. В той же час користувач по ходу прокрутки сторінки стикається з тим, що робота сайта сповільнюється постійним спрацьовуванням виявлення перетинів, що в підсумку призводить до того, що користувач не задоволений браузером, сайтом і своїм комп'ютером.

- -

Intersection Observer API дає можливість зареєструвати callback-функцію, яка виконається при перетині спостережуваним елементом кордонів іншого елемента (чи області видимості документа {{Glossary("viewport")}}), або при зміні величини перетину на визначене значення. Таким чином, більше немає необхідності вираховувати перетин елементів в основному потоці, і браузер може оптимізовувати ці процеси на свій погляд.

- -

Observer API не дозволить дізнатися точне число пікселів чи визначати конкретні пікселі в перетині; проте, його використання покриває найбільш поширені випадки, наприклад "Якщо елементи перетинаються на N%, зроби це і це".

- -

Основні поняття і використання Intersection Observer API 

- -

Intersection Observer API дозволяє вказати функцію, яка буде викликана щоразу для елемента (target) при перетині його з областю видимості документа (по-замовчуванню) чи заданим елементом (root).

- -

Зазвичай, використовується відстеження перетину елементу з областю видимості (необхідно вказати  null в якості кореневого елементу).

- -

Чи використовуємо ми область видимості чи інший елемент в якості кореневого, API працює однаково, викликаючи задану вами функцію зворотнього виклику, щоразу, коли видимість цільового елементу змінюється так, що вона перетинає в потрібному ступені кореневий елемент.

- -

Ступінь перетину цільового і кореневого елементу задається в діапазоні від 0.0 до 1.0, де 1.0 це повний перетин цільовим елементом кордонів кореневого.

- -

Створення intersection observer

- -

Для початку з допомогою конструктору потрібно створити об'єкт-спостерігач, вказати для нього функцію для виклику і налаштування відстеження:

- -
let options = {
-  root: document.querySelector('#scrollArea'),
-  rootMargin: '0px',
-  threshold: 1.0
-}
-
-let observer = new IntersectionObserver(callback, options);
-
- -

Параметр threshold зі значенням 1.0 означає що функція буде викликана при 100% перетину об'єкта (за яким ми стежимо) з об'єктом root.

- -

Налаштування Intersection observer

- -

The options object passed into the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor let you control the circumstances under which the observer's callback is invoked. It has the following fields:

- -
-
root
-
Елемент який використовується в якості області перегляду для перевірки видимості цільового елементу. Повинен бути батьком цільового елементу. По замовчуванню використовується область видимості браузера якщо не визначений або має значення  null.
-
rootMargin
-
-

Відступи навколо root. Можуть мати значення як властивість css margin: 10px 20px 30px 40px" (top, right, bottom, left). Значення можна задавати у відсотках. По замовчуванню всі параметри встановлені в нулі.

-
-
threshold
-
Число чи масив чисел, який вказує, при якому відсотку видимості цільового елементу повинен спрацювати callback. Наприклад, в цьому випадку callback функція буде викликатися при появі в зоні видимості кожні 25% цільового елементу: [0, 0.25, 0.5, 0.75, 1]. Дефолтне значення 0 (як тільки хоча б один піксель стане видимим, то буде викликаний колбек). Значення 1.0 означає, що увесь елемент повністю має стати видимим перед тим, як буде викликано колбек.
-
- -

Цільовий елемент, який буде спостерігатися

- -

Після того, як ви створили спостерігача, вам потрібно дати йому цільовий елемент для перегляду:

- -
let target = document.querySelector('#listItem');
-observer.observe(target);
-
-// the callback we setup for the observer will be executed now for the first time
-// it waits until we assign a target to our observer (even if the target is currently not visible)
-
- -

Щоразу, коли ціль досягає порогового значення, вказаного для IntersectionObserver, викликається функція зворотнього виклику callback. Де callback отримує список об'єктів IntersectionObserverEntry і спостерігача:

- -
let callback = (entries, observer) => {
-  entries.forEach(entry => {
-    // Each entry describes an intersection change for one observed
-    // target element:
-    //   entry.boundingClientRect
-    //   entry.intersectionRatio
-    //   entry.intersectionRect
-    //   entry.isIntersecting
-    //   entry.rootBounds
-    //   entry.target
-    //   entry.time
-  });
-};
-
- -

Зверніть увагу, що функція зворотнього виклику запускається в головному потоці і повинна виконуватися якнайшвидше, тому якщо щось забирає багато часу, то використовуйте {{domxref("Window.requestIdleCallback()")}}.

- -

Також зверніть увагу, що якщо ви вказали опцію root, цільовий елемент повинен бути потомком кореневого елементу. 

- -

How intersection is calculated

- -

All areas considered by the Intersection Observer API are rectangles; elements which are irregularly shaped are considered as occupying the smallest rectangle which encloses all of the element's parts. Similarly, if the visible portion of an element is not rectangular, the element's intersection rectangle is construed to be the smallest rectangle that contains all the visible portions of the element.

- -

It's useful to understand a bit about how the various properties provided by {{domxref("IntersectionObserverEntry")}} describe an intersection.

- -

The intersection root and root margin

- -

Before we can track the intersection of an element with a container, we need to know what that container is. That container is the intersection root, or root element. This can be either a specific element in the document which is an ancestor of the element to be observed, or null to use the document's viewport as the container.

- -

The root intersection rectangle is the rectangle used to check against the target or targets. This rectangle is determined like this:

- - - -

The root intersection rectangle can be adjusted further by setting the root margin, rootMargin, when creating the {{domxref("IntersectionObserver")}}. The values in rootMargin define offsets added to each side of the intersection root's bounding box to create the final intersection root bounds (which are disclosed in {{domxref("IntersectionObserverEntry.rootBounds")}} when the callback is executed).

- -

Thresholds

- -

Rather than reporting every infinitesimal change in how much a target element is visible, the Intersection Observer API uses thresholds. When you create an observer, you can provide one or more numeric values representing percentages of the target element which are visible. Then, the API only reports changes to visibility which cross these thresholds.

- -

For example, if you want to be informed every time a target's visibility passes backward or forward through each 25% mark, you would specify the array [0, 0.25, 0.5, 0.75, 1] as the list of thresholds when creating the observer. You can tell which direction the visibility changed in (that is, whether the element became more visible or less visible) by checking the value of the {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} property on the {{domxref("IntersectionObserverEntry")}} passed into the callback function at the time of the visibility change. If isIntersecting is true, the target element has become at least as visible as the threshold that was passed. If it's false, the target is no longer as visible as the given threshold.

- -

To get a feeling for how thresholds work, try scrolling the box below around. Each colored box within it displays the percentage of itself that's visible in all four of its corners, so you can see these ratios change over time as you scroll the container. Each box has a different set of thresholds:

- - - - - -

{{EmbedLiveSample("Threshold_example", 500, 500)}}

- -

Clipping and the intersection rectangle

- -

The browser computes the final intersection rectangle as follows; this is all done for you, but it can be helpful to understand these steps in order to better grasp exactly when intersections will occur.

- -
    -
  1. The target element's bounding rectangle (that is, the smallest rectangle that fully encloses the bounding boxes of every component that makes up the element) is obtained by calling {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} on the target. This is the largest the intersection rectangle may be. The remaining steps will remove any portions that don't intersect.
    2. -
  2. Starting at the target's immediate parent block and moving outward, each containing block's clipping (if any) is applied to the intersection rectangle. A block's clipping is determined based on the intersection of the two blocks and the clipping mode (if any) specified by the {{cssxref("overflow")}} property. Setting overflow to anything but visible causes clipping to occur.
    3. -
  3. If one of the containing elements is the root of a nested browsing context (such as the document contained in an {{HTMLElement("iframe")}}, the intersection rectangle is clipped to the containing context's viewport, and recursion upward through the containers continues with the container's containing block. So if the top level of an <iframe> is reached, the intersection rectangle is clipped to the frame's viewport, then the frame's parent element is the next block recursed through toward the intersection root.
    4. -
  4. When recursion upward reaches the intersection root, the resulting rectangle is mapped to the intersection root's coordinate space.
    5. -
  5. The resulting rectangle is then updated by intersecting it with the root intersection rectangle.
    6. -
  6. This rectangle is, finally, mapped to the coordinate space of the target's {{domxref("document")}}.
    7. -
- -

Intersection change callbacks

- -

When the amount of a target element which is visible within the root element crosses one of the visibility thresholds, the {{domxref("IntersectionObserver")}} object's callback is executed. The callback receives as input an array of all of IntersectionObserverEntry objects, one for each threshold which was crossed, and a reference to the IntersectionObserver object itself.

- -

Each entry in the list of thresholds is an {{domxref("IntersectionObserverEntry")}} object describing one threshold that was crossed; that is, each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, and the direction in which the transition occurred.

- -

The code snippet below shows a callback which keeps a counter of how many times elements transition from not intersecting the root to intersecting by at least 75%.

- -
intersectionCallback(entries) => {
-  entries.forEach(entry => {
-    if (entry.isIntersecting) {
-      let elem = entry.target;
-
-      if (entry.intersectionRatio >= 0.75) {
-        intersectionCounter++;
-      }
-    }
-  });
-}
-
- -

Інтерфейси

- -
-
{{domxref("IntersectionObserver")}}
-
Основний інтерфейс для API Intersection Observer. Надає методи для створення і керування observer, який може спостерігати будь-яку кількість цільових елементів для однієї і тієї ж конфігурації перетину. Кожен observer може асинхронно спостерігати зміни в перетині між одним чи кількома цільовими елементами і спільним елементом-батьком чи з їх верхнім рівнем Document's viewport. Батько чи область перегляду згадується як root.
-
{{domxref("IntersectionObserverEntry")}}
-
-

Описує перетин між цільовим елементом і його кореневим контейнером в певний момент переходу. Об'єкти цього типу можуть бути отримані тільки двома способами: в якості вхідних даних для вашого зворотнього виклику IntersectionObserver чи шляхом виклику {{domxref("IntersectionObserver.takeRecords()")}}.

-
-
- -

A simple example

- -

This simple example causes a target element to change its color and transparency as it becomes more or less visible. At Timing element visibility with the Intersection Observer API, you can find a more extensive example showing how to time how long a set of elements (such as ads) are visible to the user and to react to that information by recording statistics or by updating elements..

- -

HTML

- -

The HTML for this example is very short, with a primary element which is the box that we'll be targeting (with the creative ID "box") and some contents within the box.

- -
<div id="box">
-  <div class="vertical">
-    Welcome to <strong>The Box!</strong>
-  </div>
-</div>
- -

CSS

- -

The CSS isn't terribly important for the purposes of this example; it lays out the element and establishes that the {{cssxref("background-color")}} and {{cssxref("border")}} attributes can participate in CSS transitions, which we'll use to affect the changes to the element as it becomes more or less obscured.

- -
#box {
-  background-color: rgba(40, 40, 190, 255);
-  border: 4px solid rgb(20, 20, 120);
-  transition: background-color 1s, border 1s;
-  width: 350px;
-  height: 350px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-}
-
-.vertical {
-  color: white;
-  font: 32px "Arial";
-}
-
-.extra {
-  width: 350px;
-  height: 350px;
-  margin-top: 10px;
-  border: 4px solid rgb(20, 20, 120);
-  text-align: center;
-  padding: 20px;
-}
- -

JavaScript

- -

Finally, let's take a look at the JavaScript code that uses the Intersection Observer API to make things happen.

- -

Setting up

- -

First, we need to prepare some variables and install the observer.

- -
const numSteps = 20.0;
-
-let boxElement;
-let prevRatio = 0.0;
-let increasingColor = "rgba(40, 40, 190, ratio)";
-let decreasingColor = "rgba(190, 40, 40, ratio)";
-
-// Set things up
-window.addEventListener("load", (event) => {
-  boxElement = document.querySelector("#box");
-
-  createObserver();
-}, false);
- -

The constants and variables we set up here are:

- -
-
numSteps
-
A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.
-
prevRatio
-
This variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible.
-
increasingColor
-
A string defining a color we'll apply to the target element when the visibility ratio is increasing. The word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured.
-
decreasingColor
-
Similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing.
-
- -

We call {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} to start listening for the {{event("load")}} event; once the page has finished loading, we get a reference to the element with the ID "box" using {{domxref("Document.querySelector", "querySelector()")}}, then call the createObserver() method we'll create in a moment to handle building and installing the intersection observer.

- -

Creating the intersection observer

- -

The createObserver() method is called once page load is complete to handle actually creating the new {{domxref("IntersectionObserver")}} and starting the process of observing the target element.

- -
function createObserver() {
-  let observer;
-
-  let options = {
-    root: null,
-    rootMargin: "0px",
-    threshold: buildThresholdList()
-  };
-
-  observer = new IntersectionObserver(handleIntersect, options);
-  observer.observe(boxElement);
-}
- -

This begins by setting up an options object containing the settings for the observer. We want to watch for changes in visibility of the target element relative to the document's viewport, so root is null. We need no margin, so the margin offset, rootMargin, is specified as "0px". This causes the observer to watch for changes in the intersection between the target element's bounds and those of the viewport, without any added (or subtracted) space.

- -

The list of visibility ratio thresholds, threshold, is constructed by the function buildThresholdList(). The threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjustable.

- -

Once options is ready, we create the new observer, calling the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor, specifying a function to be called when intersection crosses one of our thresholds, handleIntersect(), and our set of options. We then call {{domxref("IntersectionObserver.observe", "observe()")}} on the returned observer, passing into it the desired target element.

- -

We could opt to monitor multiple elements for visibility intersection changes with respect to the viewport by calling observer.observe() for each of those elements, if we wanted to do so.

- -

Building the array of threshold ratios

- -

The buildThresholdList() function, which builds the list of thresholds, looks like this:

- -
function buildThresholdList() {
-  let thresholds = [];
-  let numSteps = 20;
-
-  for (let i=1.0; i<=numSteps; i++) {
-    let ratio = i/numSteps;
-    thresholds.push(ratio);
-  }
-
-  thresholds.push(0);
-  return thresholds;
-}
- -

This builds the array of thresholds—each of which is a ratio between 0.0 and 1.0, by pushing the value i/numSteps onto the thresholds array for each integer i between 1 and numSteps. It also pushes 0 to include that value. The result, given the default value of numSteps (20), is the following list of thresholds:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Ratio#Ratio
10.05110.55
20.1120.6
30.15130.65
40.2140.7
50.25150.75
60.3160.8
70.35170.85
80.4180.9
90.45190.95
100.5201.0
- -

We could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing. But this example leaves room for adding configuration controls to adjust the granularity, for example.

- -

Handling intersection changes

- -

When the browser detects that the target element (in our case, the one with the ID "box") has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, handleIntersect():

- -
function handleIntersect(entries, observer) {
-  entries.forEach((entry) => {
-    if (entry.intersectionRatio > prevRatio) {
-      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
-    } else {
-      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
-    }
-
-    prevRatio = entry.intersectionRatio;
-  });
-}
- -

For each {{domxref("IntersectionObserverEntry")}} in the list entries, we look to see if the entry's {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is going up; if it is, we set the target's {{cssxref("background-color")}} to the string in increasingColor (remember, it's "rgba(40, 40, 190, ratio)"), replaces the word "ratio" with the entry's intersectionRatio. The result: not only does the color get changed, but the transparency of the target element changes, too; as the intersection ratio goes down, the background color's alpha value goes down with it, resulting in an element that's more transparent.

- -

Similarly, if the intersectionRatio is going down, we use the string decreasingColor and replace the word "ratio" in that with the intersectionRatio before setting the target element's background-color.

- -

Finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable prevRatio.

- -

Result

- -

Below is the resulting content. Scroll this page up and down and notice how the appearance of the box changes as you do so.

- -

{{EmbedLiveSample('A_simple_example', 400, 400)}}

- -

There's an even more extensive example at Timing element visibility with the Intersection Observer API.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('IntersectionObserver')}}{{Spec2('IntersectionObserver')}}
- -

Browser compatibility

- - - -

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

- -

See also

- - - -
-
-
diff --git a/files/uk/web/api/mediaquerylist/addlistener/index.html b/files/uk/web/api/mediaquerylist/addlistener/index.html deleted file mode 100644 index f908e9cf49..0000000000 --- a/files/uk/web/api/mediaquerylist/addlistener/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: MediaQueryList.addListener() -slug: Web/API/MediaQueryList/addListener -tags: - - API - - MediaQueryList - - Довідка - - Медіа-запити - - метод -translation_of: Web/API/MediaQueryList/addListener ---- -
{{APIRef("CSSOM View")}}
- -

Метод addListener() інтерфейсу {{domxref("MediaQueryList")}} додає слухача до MediaQueryListener, який викличе вказану функцію щойно стан медіа-запиту зміниться.

- -

Цей метод є простим скороченням для {{domxref("EventTarget.addEventListener()")}} задля зворотньої сумісності. В старших веб-переглядачах доводиться використовувати addListener замість addEventListener, тоді як в нових MediaQueryList просто успадковує EventTarget.

- -

Синтаксис

- -
MediaQueryList.addListener(func)
- -

Параметри

- -
-
func
-
Функція-слухач, яку буде викликано щораз, як зміниться стан медіа-запиту. В первинній реалізації слухачем був об'єкт {{domxref("MediaQueryListListener")}}, а в новій вже використано звичайний механізм подій, тож слухач — це звичайна функція, а об'єкт події {{domxref("MediaQueryListEvent")}} успадковано від {{domxref("Event")}}.
-
- -

Вертає

- -

Нічого.

- -

Приклади

- -
var mql = window.matchMedia('(max-width: 600px)');
-
-function screenTest(e) {
-  if (e.matches) {
-    // Вікно є вужчим за 600 пікселів (або ж точно 600)
-    para.textContent = 'Маємо вузький екран, щонайбільше 600px';
-    document.body.style.backgroundColor = 'red';
-  } else {
-    // Вікно є ширшим за 600 пікселів
-    para.textContent = 'Маємо широкий екран — понад 600px завширшки';
-    document.body.style.backgroundColor = 'blue';
-  }
-}
-
-mql.addListener(screenTest);
- -

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

- - - - - - - - - - - - - - -
СпецифікаціяСтатусПримітка
{{SpecName("CSSOM View", "#dom-mediaquerylist-addlistener", "addListener")}}{{Spec2("CSSOM View")}}Початкова виознака
- -

Підтримка веб-переглядачами

- - - -

{{Compat("api.MediaQueryList.addListener")}}

- -

Див. також

- - diff --git a/files/uk/web/api/mediaquerylist/index.html b/files/uk/web/api/mediaquerylist/index.html deleted file mode 100644 index 7e22ce652e..0000000000 --- a/files/uk/web/api/mediaquerylist/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: MediaQueryList -slug: Web/API/MediaQueryList -tags: - - API - - CSSOM View - - Interface - - MediaQueryList - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/MediaQueryList ---- -
{{APIRef("CSSOM View")}} {{SeeCompatTable}}
- -

A MediaQueryList object stores information on a media query applied to a document, and handles sending notifications to listeners when the media query state change (i.e. when the media query test starts or stops evaluating to true).

- -

This makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, and allows you to programmatically make changes to a document based on media query status.

- -

Properties

- -

The new version of the MediaQueryList interface inherits properties from its parent interface, {{domxref("EventTarget")}}.

- -
-
{{domxref("MediaQueryList.matches")}} {{readonlyInline}}
-
A {{domxref("Boolean")}} that returns true if the {{domxref("document")}} currently matches the media query list, or false if not.
-
{{domxref("MediaQueryList.media")}} {{readonlyInline}}
-
A {{domxref("DOMString")}} representing a serialized media query.
-
- -

Event handlers

- -
-
{{domxref("MediaQueryList.onchange")}}
-
An event handler property representing a function that is invoked when the {{event("change")}} event fires, i.e when the status of media query support changes. The event object is a {{domxref("MediaQueryListEvent")}} instance, which is recognised as a MediaListQuery instance in older browsers, for backwards compatibility purposes.
-
- -

Methods

- -

The new version of the MediaQueryList interface inherits methods from its parent interface, {{domxref("EventTarget")}}.

- -
-
{{domxref("MediaQueryList.addListener()")}}
-
Adds a listener to the MediaQueryListener that will run a custom callback function in response to the media query status changing. This is basically an alias for {{domxref("EventTarget.addEventListener()")}}, for backwards compatibility purposes.
-
{{domxref("MediaQueryList.removeListener()")}}
-
Removes a listener from the MediaQueryListener. This is basically an alias for {{domxref("EventTarget.removeEventListener()")}}, for backwards compatibility purposes.
-
- -
-
- -

Examples

- -

This simple example creates a MediaQueryList and then sets up a listener to detect when the media query status changes, running a custom function when it does to change the appearence of the page.

- -
var para = document.querySelector('p');
-
-var mql = window.matchMedia('(max-width: 600px)');
-
-function screenTest(e) {
-  if (e.matches) {
-    /* the viewport is 600 pixels wide or less */
-    para.textContent = 'This is a narrow screen — less than 600px wide.';
-    document.body.style.backgroundColor = 'red';
-  } else {
-    /* the viewport is more than than 600 pixels wide */
-    para.textContent = 'This is a wide screen — more than 600px wide.';
-    document.body.style.backgroundColor = 'blue';
-  }
-}
-
-mql.addListener(screenTest);
- -
-

Note: You can find this example on GitHub (see the source code, and also see it running live).

-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSSOM View", "#the-mediaquerylist-interface", "MediaQueryList")}}{{Spec2("CSSOM View")}}Initial definition
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/uk/web/api/network_information_api/index.html b/files/uk/web/api/network_information_api/index.html deleted file mode 100644 index 0afabb53ad..0000000000 --- a/files/uk/web/api/network_information_api/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Network Information API -slug: Web/API/Network_Information_API -translation_of: Web/API/Network_Information_API ---- -

{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}

- -

Network Information API надає інформацію про мережеве підключення в загальних термінах ('wifi', 'cellular' тощо). Ця інформація може бути використана для вибору якості і розміру вмісту на основі підключення користувача. Весь API складається з інтерфейсу {{domxref ("NetworkInformation")}} та однієї властивості до інтерфейсу {{domxref ("Navigator")}}: {{domxref ("Navigator.connection")}} .

- -

{{AvailableInWorkers}}

- -

Приклади

- -

Виявлення зміни підключення

- -

В цьому прикладі ми стежимо за змінами підключення користувача.

- -
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
-var type = connection.effectiveType;
-
-function updateConnectionStatus() {
-  console.log("Тип підключення було змінено з " + type + " на " + connection.effectiveType);
-  type = connection.effectiveType;
-}
-
-connection.addEventListener('change', updateConnectionStatus);
-
- -

Попереднє завантаження великих ресурсів

- -

Об'єкт підключення {{domxref ("Navigator.connection")}} корисний для визначення необхідності попереднього завантажування ресурсів, що мають великий розмір. Перевірка типу підключення буде викликана незабаром після завантаження сторінки. Якщо з'єднання визначено як стільниковий зв’язок, то прапорець preloadVideo буде встановлено у значення false. Для простоти та наочності цей приклад перевіряє лише один тип підключення. На практиці використовується оператор switch або інший метод для перевірки всіх можливих значень {{domxref ("NetworkInformation.type")}}. Незалежно від значення type ви можете оцінити швидкість з'єднання через властивість {{domxref ("NetworkInformation.effectiveType")}}.

- -
let preloadVideo = true;
-var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
-if (connection) {
-  if (connection.effectiveType === 'slow-2g') {
-    preloadVideo = false;
-  }
-}
- -

Інтерфейси

- -
-
{{domxref("NetworkInformation")}}
-
Надає інформацію про з’єднання, яке пристрій використовує для зв’язку з мережею, та забезпечує сповіщення, якщо тип з’єднання змінюється. Інтерфейс NetworkInformation  не може бути створено як екземпляр. Натомість доступ до нього здійснюється через інтерфейс {{domxref ("Navigator")}}.
-
- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('Network Information', '', 'Network Information API')}}{{Spec2('Network Information')}}Initial specification
- -

Сумісність

- -

NetworkInformation

- - - -

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

- - - - - -

{{Compat("api.Navigator.connection")}}

- -

Дивіться також

- - diff --git a/files/uk/web/api/networkinformation/index.html b/files/uk/web/api/networkinformation/index.html deleted file mode 100644 index f1bff837d6..0000000000 --- a/files/uk/web/api/networkinformation/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: NetworkInformation -slug: Web/API/NetworkInformation -translation_of: Web/API/NetworkInformation ---- -
{{APIRef("Network Information API")}}{{SeeCompatTable}}
- -

Інтерфейс NetworkInformation надає інформацію про з’єднання, яке пристрій використовує для зв’язку з мережею, та забезпечує засоби для сповіщень, якщо тип підключення змінюється. Інтерфейс NetworkInformation не може бути створено як екземпляр. Натомість доступ до нього здійснюється через властивість з'єднання інтерфейсу {{domxref("Navigator")}}.

- -

{{AvailableInWorkers}}

- -

Властивості

- -

Цей інтерфейс також успадковує властивості свого батьківського елементу, {{domxref("EventTarget")}}.

- -
-
-
    -
-
-
{{domxref("NetworkInformation.downlink")}} {{readonlyinline}}
-
Повертає приблизне значення ефективної пропускної здатності в мегабітах в секунду. Значення округлено до найближчого кратного до 25 кілобіт на секунду.
-
{{domxref("NetworkInformation.downlinkMax")}} {{readonlyinline}}
-
Повертає максимальну швидкість, в мегабітах в секунду (Mbps), для поточного з'єднання.
-
{{domxref("NetworkInformation.effectiveType")}} {{readonlyinline}}
-
Повертає діючий тип з'єднання в значенні 'slow-2g', '2g', '3g', або '4g'.
-
{{domxref("NetworkInformation.rtt")}} {{readonlyinline}}
-
Повертає оцінку часу зворотного зв'язку (RTT) поточного з'єднання, округлену до найближчого кратного до 25 мілісекунд.
-
{{domxref("NetworkInformation.saveData")}} {{readonlyinline}}
-
Повертає true, якщо користувач встановив параметр зменшеного використання даних.
-
{{domxref("NetworkInformation.type")}} {{readonlyinline}}
-
Повертає тип підключення, яке використовує пристрій для зв’язку з мережею. Існуючі значення: -
    -
  • bluetooth
    • -
  • cellular
    • -
  • ethernet
    • -
  • none
    • -
  • wifi
    • -
  • wimax
    • -
  • other
    • -
  • unknown
    • -
-
-
- -

Обробники подій

- -
-
{{domxref("NetworkInformation.onchange")}}
-
Подія, яка запускається, коли змінюється інформація про з’єднання, і {{event("change")}} запускається на цьому об’єкті.
-
- -

Методи

- -

Цей інтерфейс також успадковує властивості свого батьківського елементу, {{domxref("EventTarget")}}.

- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('Network Information', '#networkinformation-interface', 'NetworkInformation')}}{{Spec2('Network Information')}}Initial definition
- -

Сумісність

- - - -

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

- -

Дивіться також

- - diff --git a/files/uk/web/api/node/contains/index.html b/files/uk/web/api/node/contains/index.html deleted file mode 100644 index db187f1462..0000000000 --- a/files/uk/web/api/node/contains/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Node.contains() -slug: Web/API/Node/contains -tags: - - API - - DOM - - Method - - Node - - Вузол - - метод -translation_of: Web/API/Node/contains ---- -
{{APIRef("DOM")}}
- -

Метод Node.contains() повертає значення {{jsxref("Boolean")}}, яке вказує, чи переданий вузол є нащадком заданого вузла чи ні.

- -

Синтаксис

- -
node.contains( otherNode )
-
- -

Приклад

- -

Ця функція перевіряє, чи елемент знаходиться в тілі сторінки. А також визначає чи тіло сторінки включає само себе. Якщо включає само себе, то відповідно метод isInPage буде повертати false. В іншому випадку буде повертатися true або false в залежності від того, чи елемент існує всередині тіла сторінки.

- -
function isInPage(node) {
-  return (node === document.body) ? false : document.body.contains(node);
-}
- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}{{Spec2("DOM WHATWG")}}Початкове визначення
- -

Сумісність із браузерами

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
ОсобливістьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базова підтримка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}5.0[1]{{CompatVersionUnknown}}3.0[2]
-
- -
- - - - - - - - - - - - - - - - - - - - - -
ОсобливістьAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базова підтримка{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Internet Explorer лише підтримує метод contains() для елементів.

- -

[2] Safari 2.x реалізувала метод contains() неправильно.

- -

Дивитися також

- - diff --git a/files/uk/web/api/node/index.html b/files/uk/web/api/node/index.html deleted file mode 100644 index 961f62fd56..0000000000 --- a/files/uk/web/api/node/index.html +++ /dev/null @@ -1,508 +0,0 @@ ---- -title: Node -slug: Web/API/Node -tags: - - API - - DOM - - DOM Reference - - Interface - - NeedsTranslation - - Node - - Reference - - TopicStub -translation_of: Web/API/Node ---- -
{{APIRef("DOM")}}
- -

A Node is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.

- -

The following interfaces all inherit from Node its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}

- -

These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.

- -

Properties

- -

Inherits properties from its parents {{domxref("EventTarget")}}.[1]

- -
-
{{domxref("Node.baseURI")}} {{readonlyInline}}
-
Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last '/'.
-
{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}}
-
(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.
-
{{domxref("Node.childNodes")}} {{readonlyInline}}
-
Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the Node change, the {{domxref("NodeList")}} object is automatically updated.
-
{{domxref("Node.firstChild")}} {{readonlyInline}}
-
Returns a {{domxref("Node")}} representing the first direct child node of the node, or null if the node has no child.
-
{{domxref("Node.lastChild")}} {{readonlyInline}}
-
Returns a {{domxref("Node")}} representing the last direct child node of the node, or null if the node has no child.
-
{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
-
Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. -
-

Note: In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{gecko_minversion_inline("1.9.2")}}

-
-
-
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
-
The namespace URI of this node, or null if it is no namespace. -
-

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the https://www.w3.org/1999/xhtml/ namespace in both HTML and XML trees. {{gecko_minversion_inline("1.9.2")}}

-
-
-
{{domxref("Node.nextSibling")}} {{readonlyInline}}
-
Returns a {{domxref("Node")}} representing the next node in the tree, or null if there isn't such node.
-
{{domxref("Node.nodeName")}} {{readonlyInline}}
-
Returns a {{domxref("DOMString")}} containing the name of the Node. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like 'audio' for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the '#text' string, or a {{domxref("Document")}} node will have the '#document' string.
-
{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}
-
A {{ Interface("nsIPrincipal") }} representing the node principal.
-
{{domxref("Node.nodeType")}}{{readonlyInline}}
-
Returns an unsigned short representing the type of the node. Possible values are: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline()}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline()}}4
ENTITY_REFERENCE_NODE {{deprecated_inline()}}5
ENTITY_NODE {{deprecated_inline()}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline()}}12
-
-
{{domxref("Node.nodeValue")}}
-
Returns / Sets the value of the current node
-
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
-
Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns null.
-
{{domxref("Node.parentNode")}} {{readonlyInline}}
-
Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns null.
-
{{domxref("Node.parentElement")}} {{readonlyInline}}
-
Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns null.
-
{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
-
Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
-
{{domxref("Node.previousSibling")}} {{readonlyInline}}
-
Returns a {{domxref("Node")}} representing the previous node in the tree, or null if there isn't such node.
-
{{domxref("Node.rootNode")}} {{readOnlyInline}}
-
Returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This is found by walking backward along {{domxref("Node.parentNode")}} until the top is reached.
-
{{domxref("Node.textContent")}}
-
Returns / Sets the textual content of an element and all its descendants.
-
- -

Methods

- -

Inherits methods from its parent, {{domxref("EventTarget")}}.[1]

- -
-
{{domxref("Node.appendChild()")}}
-
Adds the specified childNode argument as the last child to the current node.
- If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
-
{{domxref("Node.cloneNode()")}}
-
Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.
-
{{domxref("Node.compareDocumentPosition()")}}
-
{{domxref("Node.contains()")}}
-
{{domxref("Node.getFeature()")}} {{obsolete_inline}}
-
{{domxref("Node.getRootNode()")}}
-
Returns the context objects root which optionally includes the shadow root if it is available. 
-
{{domxref("Node.getUserData()")}} {{obsolete_inline}}
-
Allows a user to get some {{domxref("DOMUserData")}} from the node.
-
{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
-
Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.
-
{{domxref("Node.hasChildNodes()")}}
-
Returns a {{jsxref("Boolean")}} indicating if the element has any child nodes, or not.
-
{{domxref("Node.insertBefore()")}}
-
Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.
-
{{domxref("Node.isDefaultNamespace()")}}
-
{{domxref("Node.isEqualNode()")}}
-
Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.
-
{{domxref("Node.isSameNode()")}}
-
Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).
-
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
-
Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
-
{{domxref("Node.lookupPrefix()")}}
-
{{domxref("Node.lookupNamespaceURI()")}}
-
{{domxref("Node.normalize()")}}
-
Clean up all the text nodes under this element (merge adjacent, remove empty).
-
{{domxref("Node.removeChild()")}}
-
Removes a child node from the current element, which must be a child of the current node.
-
{{domxref("Node.replaceChild()")}}
-
Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.
-
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
-
Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.
-
- -

Examples

- -

Browse all child nodes

- -

The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).

- -
function DOMComb (oParent, oCallback) {
-  if (oParent.hasChildNodes()) {
-    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
-      DOMComb(oNode, oCallback);
-    }
-  }
-  oCallback.call(oParent);
-}
- -

Syntax

- -
DOMComb(parentNode, callbackFunction);
- -

Description

- -

Recursively cycle all child nodes of parentNode and parentNode itself and execute the callbackFunction upon them as this objects.

- -

Parameters

- -
-
parentNode
-
The parent node (Node Object).
-
callbackFunction
-
The callback function (Function).
-
- -

Sample usage

- -

The following example send to the console.log the text content of the body:

- -
function printContent () {
-  if (this.nodeValue) { console.log(this.nodeValue); }
-}
-
-onload = function () {
-  DOMComb(document.body, printContent);
-};
- -

Remove all children nested within a node

- -
Element.prototype.removeAll = function () {
-  while (this.firstChild) { this.removeChild(this.firstChild); }
-  return this;
-};
- -

Sample usage

- -
/* ... an alternative to document.body.innerHTML = "" ... */
-document.body.removeAll();
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
- Removed the following methods: isSupported(), hasAttributes(), getFeature(), setUserData(), and getUserData().
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM3 Core')}}The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{domxref("Document")}}.
- The normalize() method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.
- Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
- Added the following properties: baseURI and textContent.
{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM2 Core')}}The ownerDocument property was slightly modified so that {{domxref("DocumentFragment")}} also returns null.
- Added the following properties: namespaceURI, prefix, and localName.
- Added the following methods: normalize(), isSupported() and hasAttributes().
{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}{{Spec2('DOM1')}}Initial definition
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - {{CompatNo}}{{CompatGeckoDesktop("22.0")}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]
getFeature(){{obsolete_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
- {{CompatNo}}{{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
getUserData(), setUserData() and hasAttributes() {{deprecated_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
- {{CompatNo}}{{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSameNode(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
- Removed in {{CompatGeckoDesktop("10")}}
- Returned in {{CompatGeckoDesktop("48")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSupported() {{obsolete_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
- 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
attributes{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
- {{CompatNo}}{{CompatGeckoDesktop("22.0")}}[2]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
rootNode(){{CompatUnknown}}{{CompatUnknown}}CompatGeckoDesktop(48)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
namespaceURI, localName, prefix {{obsolete_inline}}{{CompatVersionUnknown}}
- {{CompatNo}}46.0[3]		{{CompatUnknown}}{{CompatVersionUnknown}}
- {{CompatNo}}48.0[3]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
getRootNode{{CompatChrome(54.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(41)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]
getFeature(){{obsolete_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("1.0")}}
- {{CompatNo}}{{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getUserData(), setUserData() and hasAttributes() {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
isSameNode(){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}} -

{{CompatGeckoDesktop("1.0")}}
- Removed in {{CompatGeckoDesktop("10")}}
- Returned in {{CompatGeckoDesktop("48")}}

- 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
isSupported() {{obsolete_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
attributes{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
rootNode(){{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(48)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
namespaceURI, localName, prefix {{obsolete_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
- {{CompatNo}}48.0[3]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
getRootNode(){{CompatNo}}{{CompatChrome(54.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(41)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
-
- -

[1] WebKit and old versions of Blink incorrectly do not make Node inherit from {{domxref("EventTarget")}}.

- -

[2] In Gecko 22.0 {{geckoRelease("22.0")}} the attributes property was moved to {{domxref("Element")}}.

- -

[3] The properties were moved to the {{domxref("Element")}} and {{domxref("Attr")}} APIs according to the DOM4 standard.

diff --git a/files/uk/web/api/page_visibility_api/index.html b/files/uk/web/api/page_visibility_api/index.html deleted file mode 100644 index 2cf8077bd9..0000000000 --- a/files/uk/web/api/page_visibility_api/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: API відображення сторінки -slug: Web/API/Page_Visibility_API -tags: - - API - - API відображення сторінки - - visibilityState - - visibilitychange - - відображення сторінки - - процеси скритої закладки - - фоновий режим -translation_of: Web/API/Page_Visibility_API -original_slug: Web/API/API_відображення_сторінки ---- -
{{DefaultAPISidebar("Page Visibility API")}}
- -
- -

При перегляді сайту за допомогою вкладок існує ймовірність того, що будь-яка з веб-сторінок знаходиться в фоновому режимі і тому користувач її не бачить. API відображення сторінки надає події, які ви можете відстежити, щоб дізнатися, коли документ стає видимим або прихованим, а також дозволяє отримати поточний стан прихованості/видимості сторінки.

- -
-

Примітка: API відображення сторінки є особливо корисним для економії ресурсів та підвищення продуктивності, дозволяючи сторінці уникнути виконання непотрібних завдань, коли документ не є видимим.

-
- -

Коли користувач згортає вікно або перемикається на іншу вкладку, API посилає подію {{event("visibilitychange")}}, щоб передати слухачам інформацію про зміну стану сторінки. Ви можете виявити подію і виконати деякі дії або нічого не виконувати. Наприклад, якщо ваш веб-додаток програє відео, він може поставити відео на паузу, коли користувач переміщує вкладку у фоновий режим, і відновити відтворення, коли користувач повернеться до цієї вкладки. Користувач не втрачає миті у відео, звук відео не заважає аудіо в новій вкладці на передньому плані, і користувач не пропустить жодного моменту в них.

- -

Стан видимості {{HTMLElement ("iframe")}} збігаються зі станом батьківського документа. Приховування <iframe> за допомогою властивостей CSS (таких як {{cssxref ("display", "display: none;")}}) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.

- -

Випадки використання

- -

Розглянемо декілька прикладів використання API видимості сторінки.

- - - -

Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд {{event("blur")}} і {{event("focus")}} подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.

- -
-

Примітка: У той час як {{domxref ("GlobalEventHandlers.onblur", "onblur")}} та {{domxref ("GlobalEventHandlers.onfocus", "onfocus")}} скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.

-
- -

Політика позиціонування, як сприяння продуктивності фонової сторінки

- -

Окремо від API відображення сторінки агенти  користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:

- - - -

Деякі процеси виключені з цього гасящего режиму. У цих випадках ви також можете використовувати API видимості сторінки, щоб зменшити вплив на продуктивність.

- - - -

Приклад

- -

Подивіться живий приклад (відео зі звуком).

- -

Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:

- -
   // Встановіть ім'я властивості hidden і події зміни для видимості.
-
-var hidden, visibilityChange;
-if (typeof document.hidden !== "undefined") { // Opera 12.10 і Firefox 18 і більше пізніша підтримка
-  hidden = "hidden";
-  visibilityChange = "visibilitychange";
-} else if (typeof document.msHidden !== "undefined") {
-  hidden = "msHidden";
-  visibilityChange = "msvisibilitychange";
-} else if (typeof document.webkitHidden !== "undefined") {
-  hidden = "webkitHidden";
-  visibilityChange = "webkitvisibilitychange";
-}
-
-var videoElement = document.getElementById("videoElement");
-
-// Якщо сторінка прихована, зупиніть відео;
-// Якщо сторінка відображається, відтворіть відеозображення;
-
-function handleVisibilityChange() {
-  if (document[hidden]) {
-    videoElement.pause();
-  } else {
-    videoElement.play();
-  }
-}
-
-      // Попереджаємо, якщо браузер не підтримує addEventListener або Page Visibility API
-if (typeof document.addEventListener === "undefined" || hidden === undefined) {
-  console.log("Для цього демонстрування потрібен браузер, наприклад, Google Chrome або Firefox, який підтримує API для перегляду сторінок.");
-} else {
-      // Зміна видимості сторінки
-  document.addEventListener(visibilityChange, handleVisibilityChange, false);
-
-     // Коли відео призупиняється, встановлюємо назву.
-     // Це свідчитеме про паузу.
-  videoElement.addEventListener("pause", function(){
-      document.title = 'Paused';
-  }, false);
-
-  // Коли відео відтворюється, встановлюємо назву.
-  videoElement.addEventListener("play", function(){
-      document.title = 'Playing';
-  }, false);
-
-}
-
- -

Властивості, використані в інтерфейсі документа

- -

API Видимість сторінки додає наступні властивості до інтерфейсу {{domxref("Document")}} :

- -
-
{{domxref("Document.hidden")}} {{ReadOnlyInline}}
-
Повертає true , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і false якщо навпаки.
-
{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}
-
 {{domxref ("DOMString")}} вказує на поточний стан видимості документа. Можливі значення: -
-
visible
-
Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.
-
hidden
-
Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.
-
prerender
-
Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження. -
Примітка: Не всі браузери підтримують попереднє завантаження.
-
-
unloaded
-
Сторінка перебуває в процесі вивантаження з пам'яті. -
Примітка: Не всі браузери підтримують це значення.
-
-
-
-
{{domxref("Document.onvisibilitychange")}}
-
 {{domxref("EventListener")}} задає код, який буде викликатися при виникненні події {{event("visibilitychange")}} .
-
- -
//startSimulation та pauseSimulation визначені в іншому місці
-function handleVisibilityChange() {
-  if (document.hidden) {
-    pauseSimulation();
-  } else  {
-    startSimulation();
-  }
-}
-
-document.addEventListener("visibilitychange", handleVisibilityChange, false);
-
- -

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

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}Початкове значення.
- -

Працює з браузерами

- -
-

Document.visibilityState

- -
- - -

{{Compat("api.Document.visibilityState")}}

-
-
- -

Дивись також

- - diff --git a/files/uk/web/api/promiserejectionevent/index.html b/files/uk/web/api/promiserejectionevent/index.html deleted file mode 100644 index 897a97a97a..0000000000 --- a/files/uk/web/api/promiserejectionevent/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: PromiseRejectionEvent -slug: Web/API/PromiseRejectionEvent -tags: - - API - - HTML DOM - - Interface - - JavaScript - - PromiseRejectionEvent - - Promises - - Reference - - events - - події - - проміси -translation_of: Web/API/PromiseRejectionEvent ---- -
{{APIRef("HTML DOM")}}
- -

Інтерфейс PromiseRejectionEvent відображає події, які надсилаються у глобальний контекст скрипта, коли об'єкти JavaScript {{jsxref("Promise")}} відхиляються. Ці події особливо корисні для цілей телеметрії та налагоджування.

- -

Щоб дізнатись більше про події відхилення промісів, дивіться {{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}.

- -

Конструктор

- -
-
{{domxref("PromiseRejectionEvent.PromiseRejectionEvent", "PromiseRejectionEvent()")}}
-
Створює подію PromiseRejectionEvent, отримуючи тип події (unhandledrejection або rejectionhandled) та інші деталі.
-
- -

Властивості

- -

Також успадковує властивості від батьківського інтерфейсу {{domxref("Event")}}.

- -
-
{{domxref("PromiseRejectionEvent.promise")}} {{readonlyInline}}
-
Об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений.
-
{{domxref("PromiseRejectionEvent.reason")}} {{readOnlyInline}}
-
Значення чи {{jsxref("Object","об'єкт")}}, що вказує причину відхилення проміса, як вона передається у {{jsxref("Promise.відхилено","Promise.reject()")}}.
-
- -

Методи

- -

Цей інтерфейс не має унікальних методів; він успадковує методи від батьківського інтерфейсу {{domxref("Event")}}.

- -

Події

- -
-
rejectionhandled
-
Запускається, коли об'єкт JavaScript {{jsxref("Promise")}} відхиляється, і після того, як відхилення було оброблене кодом для обробки відхилення проміса.
-
unhandledrejection
-
Запускається, коли об'єкт JavaScript {{jsxref("Promise")}} відхиляється, але немає обробника, який зреагував би на відхилення.
-
- -

Приклади

- -

Цей простий приклад перехоплює необроблені відхилення промісів та логує їх з метою відлагодження.

- -
window.onunhandledrejection = function(e) {
-  console.log(e.reason);
-}
- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#promiserejectionevent', 'PromiseRejectionEvent')}}{{ Spec2('HTML WHATWG') }}Початкове визначення.
- -

Сумісність з веб-переглядачами

- - - -

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

- -

Див. також

- - diff --git a/files/uk/web/api/promiserejectionevent/promise/index.html b/files/uk/web/api/promiserejectionevent/promise/index.html deleted file mode 100644 index a9874092ad..0000000000 --- a/files/uk/web/api/promiserejectionevent/promise/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: PromiseRejectionEvent.promise -slug: Web/API/PromiseRejectionEvent/promise -tags: - - API - - HTML DOM - - JavaScript - - Promise - - PromiseRejectionEvent - - Властивість - - Проміс - - події -translation_of: Web/API/PromiseRejectionEvent/promise ---- -
{{APIRef("HTML DOM") }}
- -

Властивість promise інтерфейсу {{domxref("PromiseRejectionEvent")}}, доступна лише для читання, вказує об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений. Ви можете дослідити властивість події {{domxref("PromiseRejectionEvent.reason")}}, щоб дізнатись, чому проміс був відхилений.

- -

Синтаксис

- -
promise = PromiseRejectionEvent.promise
- -

Значення

- -

Об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений, і чиє відхилення пройшло необробленим.

- -

Приклади

- -

Цей приклад прослуховує необроблені проміси, і, якщо властивість {{domxref("PromiseRejectionEvent.reason", "reason")}} є об'єктом з полем code, що містить текст "Модуль не готовий", він встановлює функцію зворотного виклику, що виконується під час неактивності переглядача, яка буде повторно запускати невиконану задачу, щоб виконати її правильно.

- -

Метод {{domxref("event.preventDefault()")}} викликається, щоб зазначити, що проміс тепер був оброблений.

- -
window.onunhandledrejection = function(event) {
-  if (event.reason.code && event.reason.code == "Модуль не готовий") {
-    window.requestIdleCallback(function(deadline) {
-      loadModule(event.reason.moduleName)
-        .then(performStartup);
-    });
-    event.preventDefault();
-  }
-}
- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#dom-promiserejectionevent-promise', 'PromiseRejectionEvent.promise')}}{{ Spec2('HTML WHATWG') }}Початкове визначення.
- -

Сумісність з веб-переглядачами

- - - -

{{Compat("api.PromiseRejectionEvent.promise")}}

- -

Див. також

- - diff --git a/files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html b/files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html deleted file mode 100644 index a7ae3616a8..0000000000 --- a/files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: PromiseRejectionEvent() -slug: Web/API/PromiseRejectionEvent/PromiseRejectionEvent -tags: - - API - - HTML DOM - - JavaScript - - Promise - - PromiseRejectionEvent - - Конструктор - - Проміс - - події -translation_of: Web/API/PromiseRejectionEvent/PromiseRejectionEvent ---- -
{{APIRef("HTML DOM")}}
- -

Конструктор PromiseRejectionEvent() створює та вертає {{domxref("PromiseRejectionEvent")}}, що відображає події, запущені, коли об'єкт JavaScript {{jsxref("Promise")}} був відхилений. З подіями відхилення промісів стає можливим виявляти та повідомляти про проміси, чиє неуспішне завершення пройшло непоміченим. Також стає легше писати глобальні обробники для помилок.

- -

Існують два типи подій PromiseRejectionEvent: unhandledrejection надсилається середовищем виконання JavaScript, коли проміс був відхилений, але відхилення не було оброблене. Подія rejectionhandled видається, якщо проміс був відхилений, але відхилення було перехоплене обробником відхилень.

- -

Синтаксис

- -
promiseRejectionEvent = PromiseRejectionEvent(type, options);
-
- -

Параметри

- -

Конструктор PromiseRejectionEvent() також успадковує параметри від {{domxref("Event.Event", "Event()")}}.

- -
-
type
-
Рядок, що відображає ім'я типу події PromiseRejectionEvent. Він чутливий до регістру, і повинен мати значення "rejectionhandled" або "unhandledrejection", щоб відповідати іменам можливих (не штучно створених) подій {{domxref("PromiseRejectionEvent")}}, які можуть запустити програмні агенти).
-
options
-
{{jsxref("Object","Об'єкт")}}, що визначає деталі відхилення: -
-
promise
-
{{jsxref("Promise","Проміс")}}, що був відхилений.
-
reason
-
Будь-яке значення чи {{jsxref("Object","об'єкт")}}, що відображає причину відхилення проміса. Це може бути що завгодно, від числового коду помилки, до помилки {{domxref("DOMString")}} та об'єкта, який містить детальну інформацію, що описує ситуацію, яка призвела до відхилення проміса.
-
-
-
- -

Значення, що повертається

- -

Нова подія PromiseRejectionEvent, що має конфігурацію, визначену параметрами.

- -

Приклади

- -

Цей приклад створює нову подію unhandledrejection для проміса myPromise з причиною-рядком "Мій будинок горить". Параметр reason (причина) міг так само легко бути числом, чи навіть об'єктом з детальною інформацією, що містить адрес будинку, чи опис того, наскільки сильний вогонь, і номер телефону людини, яку потрібно повідомити.

- -
let myRejectionEvent = new PromiseRejectionEvent("unhandledrejection", {
-  promise : myPromise,
-  reason : "Мій будинок горить"
-});
- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', '#the-promiserejectionevent-interface', 'the PromiseRejectionEvent interface')}}{{Spec2('HTML WHATWG')}}Початкове визначення.
- -

Сумісність з веб-переглядачами

- - - -

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

- -

Див. також

- - diff --git a/files/uk/web/api/promiserejectionevent/reason/index.html b/files/uk/web/api/promiserejectionevent/reason/index.html deleted file mode 100644 index b12a2480c1..0000000000 --- a/files/uk/web/api/promiserejectionevent/reason/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: PromiseRejectionEvent.reason -slug: Web/API/PromiseRejectionEvent/reason -tags: - - API - - HTML DOM - - JavaScript - - Promise - - PromiseRejectionEvent - - reason - - Властивість - - Проміс - - події -translation_of: Web/API/PromiseRejectionEvent/reason ---- -

{{APIRef("HTML DOM")}}

- -

Властивість reason інтерфейсу {{domxref("PromiseRejectionEvent")}}, доступна лише для читання, є будь-яким значенням JavaScript чи {{jsxref("Object","об'єктом")}}, що надає причину, яка передається у {{jsxref("Promise.відхилено","Promise.reject()")}}. Це, в теорії, надає інформацію щодо причини відхилення проміса.

- -

Синтаксис

- -
reason = PromiseRejectionEvent.reason
- -

Значення

- -

Значення або об'єкт, що надає інформацію, якою ви можете скористатись, щоб зрозуміти, чому був відхилений проміс. Це може бути що завгодно, від коду помилки до об'єкта з текстом, посиланнями та всім, що ви захочете в нього додати.

- -

Приклади

- -
window.onunhandledrejection = function(e) {
-  console.log(e.reason);
-}
- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#dom-promiserejectionevent-reason', 'PromiseRejectionEvent.reason')}}{{ Spec2('HTML WHATWG') }}Початкове визначення.
- -

Сумісність з веб-переглядачами

- - - -

{{Compat("api.PromiseRejectionEvent.reason")}}

- -

Див. також

- - diff --git a/files/uk/web/api/svganimatedstring/animval/index.html b/files/uk/web/api/svganimatedstring/animval/index.html deleted file mode 100644 index 46f2c2a3d2..0000000000 --- a/files/uk/web/api/svganimatedstring/animval/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: SVGAnimatedString.animVal -slug: Web/API/SVGAnimatedString/animVal -translation_of: Web/API/SVGAnimatedString/animVal ---- -

{{APIRef("SVG")}}

- -

Атрибут AnimVal або властивість animVal містить те саме значення, що і властивість baseVal. Якщо атрибут або властивість анімований, він буде містити поточне анімоване значення атрибута або властивості. Якщо даний атрибут або властивість в даний час не анімовані, то він містить те саме значення, що і baseVal

- -
-

Властивість animVal доступна лише для зчитування значення. Internet Explorer 9 підтримує анімацію SVG, але не підтримує анімацію SVG на основі декларативних баз даних. В результаті, властивість animVal містить те саме значення, що і властивість baseVal.

-
- -

Синтакс

- -
var = object.animVal
- -

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

- - - - - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментарі
{{SpecName('SVG1.1', 'types.html#__svg__SVGAnimatedString__animVal')}}{{Spec2('SVG1.1')}} 
{{SpecName('SVG2', 'types.html#__svg__SVGAnimatedString__animVal')}}{{Spec2('SVG2')}} 
- -

Сумісність браузерів

- - - -

{{Compat("api.SVGAnimatedString.animVal")}}

diff --git a/files/uk/web/api/svganimatedstring/index.html b/files/uk/web/api/svganimatedstring/index.html deleted file mode 100644 index bca995b90e..0000000000 --- a/files/uk/web/api/svganimatedstring/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: SVGAnimatedString -slug: Web/API/SVGAnimatedString -tags: - - API - - NeedsExample - - NeedsTranslation - - Reference - - Référence(2) - - SVG - - SVG DOM - - TopicStub -translation_of: Web/API/SVGAnimatedString ---- -
{{APIRef("SVG")}}
- -
 
- -

The SVGAnimatedString interface represents string attributes which can be animated from each SVG declaration. You need to create SVG attribute before doing anything else, everything should be declared inside this.

- -

Properties

- -
-
{{domxref("SVGAnimatedString.animVal")}} {{readonlyInline}}
-
This is a {{domxref("DOMString")}} representing the animation value. If the given attribute or property is being animated it contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, it contains the same value as baseVal.
-
{{domxref("SVGAnimatedString.baseVal")}}
-
This is a {{domxref("DOMString")}} representing the base value. The base value of the given attribute before applying any animations. Setter throws DOMException.
-
- -

Methods

- -

The SVGAnimatedString interface do not provide any specific methods.

- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('SVG1.1', '#InterfaceSVGAnimatedString')}}{{Spec2('SVG1.1')}} 
{{SpecName('SVG2', 'types.html#InterfaceSVGAnimatedString')}}{{Spec2('SVG2')}} 
- -

Browser compatibility

- - - -

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

diff --git a/files/uk/web/api/urlsearchparams/index.html b/files/uk/web/api/urlsearchparams/index.html deleted file mode 100644 index 78ab36b8e8..0000000000 --- a/files/uk/web/api/urlsearchparams/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: URLSearchParams -slug: Web/API/URLSearchParams -translation_of: Web/API/URLSearchParams ---- -

{{ApiRef("URL API")}}

- -

URLSearchParams інтерфейс визначає корисні методи для роботи з довгими текстовими URL.

- -

Об'єктна реалізація URLSearchParams може використовуватись напряму в {{jsxref("Statements/for...of", "for...of")}} структурі, замість {{domxref('URLSearchParams.entries()', 'entries()')}}: for (var p of mySearchParams) що еквівалентно до for (var p of mySearchParams.entries()).

- -

Конструктор

- -
-
{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
-
Конструктор вертає URLSearchParams об'єкт.
-
- -

Properties

- -

This interface doesn't inherit any property.

- -

Методи

- -

Інтерфейс на наслідує ніяких методів

- -
-
{{domxref("URLSearchParams.append()")}}
-
Appends a specified key/value pair as a new search parameter.
-
{{domxref("URLSearchParams.delete()")}}
-
Deletes the given search parameter, and its associated value, from the list of all search parameters.
-
{{domxref("URLSearchParams.entries()")}}
-
Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.
-
{{domxref("URLSearchParams.get()")}}
-
Returns the first value associated to the given search parameter.
-
{{domxref("URLSearchParams.getAll()")}}
-
Returns all the values association with a given search parameter.
-
{{domxref("URLSearchParams.has()")}}
-
Returns a {{jsxref("Boolean")}} indicating if such a search parameter exists.
-
{{domxref("URLSearchParams.keys()")}}
-
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all keys of the key/value pairs contained in this object.
-
{{domxref("URLSearchParams.set()")}}
-
Sets the value associated to a given search parameter to the given value. If there were several values, delete the others.
-
{{domxref("URLSearchParams.toString()")}}
-
Returns a string containg a query string suitable for use in a URL.
-
{{domxref("URLSearchParams.values()")}}
-
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all values of the key/value pairs contained in this object.
-
- -

Example

- -
var paramsString = "q=URLUtils.searchParams&topic=api"
-var searchParams = new URLSearchParams(paramsString);
-
-//Iterate the search parameters.
-for (let p of searchParams) {
-  console.log(p);
-}
-
-searchParams.has("topic") === true; // true
-searchParams.get("topic") === "api"; // true
-searchParams.getAll("topic"); // ["api"]
-searchParams.get("foo") === null; // true
-searchParams.append("topic", "webdev");
-searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
-searchParams.set("topic", "More webdev");
-searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
-searchParams.delete("topic");
-searchParams.toString(); // "q=URLUtils.searchParams"
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}{{Spec2('URL')}}Initial definition.
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(49)}}{{CompatGeckoDesktop("29.0")}}{{CompatNo}}36{{CompatNo}}
entries(), keys(), values(), and support of for...of{{CompatChrome(49)}}{{CompatGeckoDesktop("44.0")}}{{CompatNo}}36{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(49)}}{{CompatGeckoMobile("29.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(49)}}
entries(), keys(), values(), and support of for...of{{CompatNo}}{{CompatChrome(49)}}{{CompatGeckoMobile("44.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(49)}}
-
- -

See also

- - - -
-
diff --git a/files/uk/web/api/web_workers_api/index.html b/files/uk/web/api/web_workers_api/index.html deleted file mode 100644 index a22a63cd93..0000000000 --- a/files/uk/web/api/web_workers_api/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: Web Workers API -slug: Web/API/Web_Workers_API -translation_of: Web/API/Web_Workers_API ---- -

{{DefaultAPISidebar("Web Workers API")}}

- -

Web Workers це механізм, який дозволяє запускати скрипові операції  у фоновому потоці, окремо від основного діючого потоку web-додатку. Перевага цього методу в тому, що трудоміські процеси можуть виконуватися в окромому потоці, дозволяючи основному (зазвичай UI) потоку працювати без блокування/сповільнення.

- -

Концепція та використання Web Workers

- -

Worker це об'єкт, який створюється з використанням конструктору (e.g. {{domxref("Worker.Worker", "Worker()")}}), який запускає вказаний JavaScript-файл — файл, який містить код, що буде запущений у робочому потоці; workers запускаються у іншому глобальному контексті, який не є поточним {{domxref("window")}}. Цей контекст представляюється об'єктом  {{domxref("DedicatedWorkerGlobalScope")}} у разі виділеного workers (стандартний workers, які використовуються одним сценарієм; загальні workers використовують {{domxref("SharedWorkerGlobalScope")}}).

- -

У потоці workers можна запускати будь-який код з невеликкими винятками. Наприклад, не можна напряму маніпулювати DOM з worker або використовувати деякі стандартні методи та властивості об'єкту {{domxref("window")}}, але можна використовувати велику кількість речей, доступних з window, включаючи WebSockets, та механізми зберігання даних, як IndexedDB та Firefox OS-only Data Store API.  Дивіться Функції та класи, доступні для workers для більшої детальності.

- -

Дані передаються між workers та основним потоком за допомогою системи сповіщення — обидві сторони пересилають свої сповіщення, використовуючи методи postMessage(), та відповідаюсь через обробник подій onmessage (повідомлення містится всепредині атрибутів даних {{event("Message")}} ). Дані копіюються, а не поширюються.

- -

Workers можуть в свою чергу породжувати нові workers, за умови, що ці workers будуть розміщуватися в межах однієї й тієї ж самої сорінки, що й батьківський worker.  На додаток, workers можуть використовувати XMLHttpRequest для мережевого В/В, за винятком того, що responseXML та channel атрибути XMLHttpRequest завжди повертають null.

- -

Окрім виділених workers, є й інши типи:

- - - -
-

Примітка: Згіздно з Web workers Spec, події помилок worker не повинні вспливати (дивіться {{bug(1188141)}}. Це було реалізовано у Firefox 42.

-
- -

Інтерфейси Web Worker

- -
-
{{domxref("AbstractWorker")}}
-
Абстрактні властивості та методи, загальні для всіх видів workers ({{domxref("Worker")}} або {{domxref("SharedWorker")}}).
-
{{domxref("Worker")}}
-
Представляє собою діючий поток worker, дозволяючи передавати сповіщення запущеному коду worker.
-
{{domxref("SharedWorker")}}
-
Представляє собою специфічний вид worker, який може бути доступний з декількох контекстів браузерів, будучи декількома вікнами, iframes або іншими workers.
-
{{domxref("WorkerGlobalScope")}}
-
Представляє собою загальний scope будь-якого worker (виконуючи ту ж роботу, що й {{domxref("Window")}} для звичайного контенту web). Різні види worker мають об'єкт scope, який наслідується з цього інерфейсу та додає більше специфічних особливостей.
-
{{domxref("DedicatedWorkerGlobalScope")}}
-
Представляє собою scope виділеного worker, наслудуючись з {{domxref("WorkerGlobalScope")}} та додаючи деякі  особливості.
-
{{domxref("SharedWorkerGlobalScope")}}
-
Представляє собою scope загального worker, наслідуючись з {{domxref("WorkerGlobalScope")}} та додаючи деякі особливості.
-
{{domxref("WorkerNavigator")}}
-
Представляє собою ідентифікатор та стан користувача (клієнта):
-
- -

Приклади

- -

Ми створили декілька простих прикладів, щоб показати основне вікористання:

- - - -

Ви можете знайти більше інформації як працюють ці демо у Використання web workers.

- -

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

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#toc-workers')}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers')}}{{Spec2('Web Workers')}}Initial definition.
- -

Сумісність з браузерами

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatGeckoDesktop(1.9.1)}}10.010.64
Shared workers4{{CompatGeckoDesktop(29)}}{{CompatNo}}10.64
Passing data using structured cloning13{{CompatGeckoDesktop(8)}}10.011.56
Passing data using  transferable objects17 {{property_prefix("webkit")}}
- 21		{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Global {{domxref("window.URL", "URL")}}10[1]
- 23		{{CompatGeckoDesktop(21)}}11156[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.44{{CompatGeckoMobile(1.9.1)}}1.0.110.011.55.1
Shared workers{{CompatNo}}4291.4{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using structured cloning{{CompatNo}}481.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using  transferable objects{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] As webkitURL.

- -

See also

- - diff --git a/files/uk/web/api/webgl_api/index.html b/files/uk/web/api/webgl_api/index.html deleted file mode 100644 index 078414deeb..0000000000 --- a/files/uk/web/api/webgl_api/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: WebGL -slug: Web/API/WebGL_API -tags: - - WebGL - - Графіка - - Детально - - Медіа -translation_of: Web/API/WebGL_API ---- -
{{WebGLSidebar}}
- -
-

WebGL (Web Graphics Library) - це JavaScript API для відображення інтерактивної 3D та 2D графіки в будь-якому сумісному веб-переглядачі без використання плагінів. WebGL робиць це вводячи API, яке точно відповідає OpenGL ES 2.0 та може бути використане в HTML5 {{HTMLElement("canvas")}} елементах.

-
- -

Підтримка WebGL присутня в Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+; проте, користувацький пристрій має також мати апаратне забезпечення, яке підтримує ці функції.

- -

Елемент {{HTMLElement("canvas")}} також використовується Canvas 2D для побудови 2D графіки на веб-сторінках.

- -

Посилання

- -

Стандартні інтерфейси

- -
- -
- -

Розширення

- -
- -
- -

Події

- - - -

Константи і типи

- - - -

Керівництва і навчальні сторінки

- - - -

Детальні керівництва

- - - -

Ресурси

- - - -

Бібліотеки

- - - -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Початкове визначення. Базується на OpenGL ES 2.0
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Будується поверх WebGL1. На основі OpenGL ES 3.0.
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}} 
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}} 
- -

Сумісність

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
ФункціяFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Базова підтримка{{CompatGeckoDesktop("2.0")}}91112[1]5.1[1]
-
- -
- - - - - - - - - - - - - - - - - - - -
ФункціяFirefox Mobile (Gecko)Chrome for AndroidIE MobileOpera MobileSafari Mobile
Базова підтримка425[1]{{CompatNo}}12[1]8.1
-
- -

[1] Реалізація цієї функції є експериментальною.

- -

Зауваження по сумісності

- -

На додаток до веб-переглядача, сам графічний процесор також має підтримувати цю функцію. Так, наприклад, стиснення текстур S3 (S3TC) доступне тільки для планшетів на основі Tegra . Більшість браузерів роблять контекст WebGL доступним через контекстне ім'я webgl, але старішим також потрібно experimental-webgl. Крім того, майбутній WebGL 2 повністю сумісний і матиме ім'я контексту webgl2.

- -

Зауваження Gecko

- -

Налагодження і тестування WebGL

- -

Починаючи з Gecko 10.0 {{geckoRelease("10.0")}}, є дві доступні опції, які дозволяють контролювати можливості WebGL з метою тестування:

- -
-
webgl.min_capability_mode
-
Властивість типу Boolean яка, коли true, вмикає режим мінімальної сумісності. Коли WebGL знаходиться в даному режимі, він налаштований підтримувати тільки мінімальний набір функцій і можливостей, необхідних специфікації WebGL. Це дозволяє вам бути впевненими, що важ WebGL код буде працювати на будь-якому пристрої або веб-переглядачі, незалежно від інших можливостей. Має значення false за замовчування.
-
webgl.disable_extensions
-
Властивість типу Boolean яка, коли true, вимикає всі розширення WebGL. Має значення false за замовчуванням.
-
- -

Дивіться також

- - diff --git a/files/uk/web/api/websocket/index.html b/files/uk/web/api/websocket/index.html deleted file mode 100644 index e2dac93e8c..0000000000 --- a/files/uk/web/api/websocket/index.html +++ /dev/null @@ -1,330 +0,0 @@ ---- -title: WebSocket -slug: Web/API/WebSocket -translation_of: Web/API/WebSocket ---- -
{{APIRef("Web Sockets API")}}{{SeeCompatTable}}
- -

Об'єкт WebSocket надає API (інтерфейс) для створення і керування  WebSocket-з'єднаннями з сервером connection to a server, а також для надсилання і отримання повідомлень з даними.

- -

Конструктор WebSocket приймає один обов'язковий і один опціональний параметр:

- -
new WebSocket(
-  in DOMString url,
-  in optional DOMString protocols
-);
-
- -
-
url
-
Це адреса URL, до якої треба підключитись. Тобто адреса, з якої буде відповідати WebSocket на сервері.
-
protocols {{optional_inline}}
-
Це один протокол або масив протоколів. Протокол - це текст. Ці протоколи потрібні, щоб вказати під-протоколи, щоб один сервер міг виконувати декілька під-протоколів WebSocket (на приклад, вам потрібен сервер, який здатний працювати з різними типами взаємодій залежно від протоколу). Якщо ви не вкажете протокол, то WebSocket буде вважати, що отримав пустий рядок.
-
- -

Конструктор може повертати помилки. На прикладі нижче помилка про "порт, до якого була спроба підключитися, був заблокований":

- -
-
SECURITY_ERR
-
The port to which the connection is being attempted is being blocked.
-
- -

Method overview

- - - - - - - - - - -
void close(in optional unsigned long code, in optional DOMString reason);
void send(in DOMString data);
- -

Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeTypeDescription
binaryType{{DOMXref("DOMString")}}A string indicating the type of binary data being transmitted by the connection. This should be either "blob" if DOM {{domxref("Blob")}} objects are being used or "arraybuffer" if {{jsxref("ArrayBuffer")}} objects are being used.
bufferedAmountunsigned longThe number of bytes of data that have been queued using calls to {{manch("send")}} but not yet transmitted to the network. This value resets to zero once all queued data has been sent. This value does not reset to zero when the connection is closed; if you keep calling {{manch("send")}}, this will continue to climb. Read only
extensions{{DOMXref("DOMString")}}The extensions selected by the server. This is currently only the empty string or a list of extensions as negotiated by the connection.
onclose{{domxref("EventListener")}}An event listener to be called when the WebSocket connection's readyState changes to CLOSED. The listener receives a CloseEvent named "close".
onerror{{domxref("EventListener")}}An event listener to be called when an error occurs. This is a simple event named "error".
onmessage{{domxref("EventListener")}}An event listener to be called when a message is received from the server. The listener receives a MessageEvent named "message".
onopen{{domxref("EventListener")}}An event listener to be called when the WebSocket connection's readyState changes to OPEN; this indicates that the connection is ready to send and receive data. The event is a simple one with the name "open".
protocol{{DOMXref("DOMString")}}A string indicating the name of the sub-protocol the server selected; this will be one of the strings specified in the protocols parameter when creating the WebSocket object.
readyStateunsigned shortThe current state of the connection; this is one of the {{anch("Ready state constants")}}. Read only.
url{{DOMXref("DOMString")}}The URL as resolved by the constructor. This is always an absolute URL. Read only.
- -

Constants

- -

Ready state constants

- -

These constants are used by the readyState attribute to describe the state of the WebSocket connection.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstantValueDescription
CONNECTING0The connection is not yet open.
OPEN1The connection is open and ready to communicate.
CLOSING2The connection is in the process of closing.
CLOSED3The connection is closed or couldn't be opened.
- -

Methods

- -

close()

- -

Closes the WebSocket connection or connection attempt, if any. If the connection is already CLOSED, this method does nothing.

- -
void close(
-  in optional unsigned short code,
-  in optional DOMString reason
-);
-
- -

Parameters

- -
-
code {{optional_inline}}
-
A numeric value indicating the status code explaining why the connection is being closed. If this parameter is not specified, a default value of 1000 (indicating a normal "transaction complete" closure) is assumed. See the list of status codes on the CloseEvent page for permitted values.
-
reason {{optional_inline}}
-
A human-readable string explaining why the connection is closing. This string must be no longer than 123 bytes of UTF-8 text (not characters).
-
- -

Exceptions thrown

- -
-
INVALID_ACCESS_ERR
-
An invalid code was specified.
-
SYNTAX_ERR
-
The reason string is too long or contains unpaired surrogates.
-
- -
-

Note: In Gecko, this method didn't support any parameters prior to Gecko 8.0 {{geckoRelease("8.0")}}.

-
- -

send()

- -

Transmits data to the server over the WebSocket connection.

- -
void send(
-  in DOMString data
-);
-
-void send(
-  in ArrayBuffer data
-);
-
-void send(
-  in Blob data
-);
-
- -

Parameters

- -
-
data
-
A text string to send to the server.
-
- -

Exceptions thrown

- -
-
INVALID_STATE_ERR
-
The connection is not currently OPEN.
-
SYNTAX_ERR
-
The data is a string that has unpaired surrogates.
-
- -
-

Note: Gecko's implementation of the send() method differs somewhat from the specification in {{Gecko("6.0")}}; Gecko returns a boolean indicating whether or not the connection is still open (and, by extension, that the data was successfully queued or transmitted); this is corrected in {{Gecko("8.0")}}.

- -

As of {{Gecko("11.0")}}, support for {{jsxref("ArrayBuffer")}} is implemented but not {{domxref("Blob")}} data types.

-
- -

Example

- -
// Create WebSocket connection.
-const socket = new WebSocket('ws://localhost:8080');
-
-// Connection opened
-socket.addEventListener('open', function (event) {
-    socket.send('Hello Server!');
-});
-
-// Listen for messages
-socket.addEventListener('message', function (event) {
-    console.log('Message from server', event.data);
-});
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}{{Spec2("Websockets")}}Initial definition
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sub-protocol support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("7.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Sub-protocol support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the constructor is prefixed; you will need to use MozWebSocket(): var mySocket = new MozWebSocket("http://www.example.com/socketserver");

- -

The extensions attribute was not supported in Gecko until Gecko 8.0.

- -

Prior to Gecko 11.0 {{geckoRelease("11.0")}}, outbound messages sent using the send() method were limited to 16 MB. They can now be up to 2 GB in size.

- -

See also

- - diff --git a/files/uk/web/api/window/confirm/index.html b/files/uk/web/api/window/confirm/index.html deleted file mode 100644 index 61da2b0042..0000000000 --- a/files/uk/web/api/window/confirm/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Window.confirm() -slug: Web/API/Window/confirm -tags: - - API - - DOM - - Window - - confirm - - Посилання - - метод -translation_of: Web/API/Window/confirm ---- -
{{ApiRef("Window")}}
- -

Метод Window.confirm() показує модальний діалог з необов’язковим текстом та двома кнопками, Так та Відміна.

- -

Синтакс

- -
result = window.confirm(message);
-
- - - -

Приклад

- -
if (window.confirm("Do you really want to leave?")) {
-  window.open("exit.html", "Thanks for Visiting!");
-}
-
- -

Результат:

- -

firefox confirm
-  

- -

Нотатки

- -

The following text is shared between this article, DOM:window.prompt and DOM:window.alertДіалоги є модальними вікнами - вони запобігають доступу користувача до іншої частини програмного інтерфейсу аж до моменту закриття діалогу. Саме тому ви не маєте занадто часто використовувати жодну функцію, яка створює діалоги (чи модальні вікна). В будь якому разі, є хороші підстави не використовувати діалоги для підтверджень.

- -

Починаючи з Chrome {{CompatChrome(46.0)}} цей етод заблокований в межах {{htmlelement("iframe")}} доти, доки атрибут sandbox айфрейму не має значення allow-modal.

- -

{{gecko_minversion_inline("23.0")}} Цей аргумент є необов’язковим і не вимагається специфікацією.

- -

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

- - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}{{Spec2('HTML WHATWG')}} 
- -

Дивіться також

- - diff --git a/files/uk/web/api/window/console/index.html b/files/uk/web/api/window/console/index.html deleted file mode 100644 index bb1cc673b9..0000000000 --- a/files/uk/web/api/window/console/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Window.console -slug: Web/API/Window/console -tags: - - API - - Property - - Read-only - - Window - - console - - Посилання -translation_of: Web/API/Window/console ---- -

{{ APIRef }}

- -

Window.console — це незмінювана (read-only) властивість, що повертає посилання на об’єкт {{domxref("Console")}}, який надає методи для логування інформацію до консолі браузера. Ці методи призначені для відлагоджування і не мають використовуватися для передачі інформації кінцевому користувачу.

- -

Синтакс

- -
var consoleObj = window.console;
-
- -

Приклад

- -

Логування до консолі

- -

Перший приклад відправляє текст до консолі браузера.

- -
console.log("An error occurred while loading the content");
-
- -

Наступний приклад відправляє текст до консолі браузера, разом з полями об’єкта, які можуть розкриватися:

- -
console.dir(someObject);
- -

Дивіться {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} для перегляду інших прикладів.

- -

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

- - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('Console API')}}{{Spec2('Console API')}}Initial definition.
- -
-

Наразі існує багато імплементацій, що відрізняються залежно від браузера, однак триває робота щодо уніфікації і міжбраузерної  консистентності.

-
diff --git a/files/uk/web/api/window/domcontentloaded_event/index.html b/files/uk/web/api/window/domcontentloaded_event/index.html deleted file mode 100644 index c6e14d17a4..0000000000 --- a/files/uk/web/api/window/domcontentloaded_event/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/API/Window/DOMContentLoaded_event -translation_of: Web/API/Window/DOMContentLoaded_event -original_slug: Web/Events/DOMContentLoaded ---- -

Подія DOMContentLoaded викликається, коли вихідний HTML документ повністю завантажився та був розібраний (parse), без очікування повного завантаження стилів, зображень, сабфреймів (subframes). Зовсім інша подія - load - має використовуватися лише для того, щоб визначити повне завантаження сторінки. Використання load там, де застосування DOMContentLoaded є більш доречним, є дуже поширеною помилкою, тому будьте уважними.

- -

{{Note("Синхронний Javascript затримує парсинг DOM.")}}

- -

{{Note("Існує безліч універсальних та автономних бібліотек, які  попонують кроссбраузерні методи для визначення готовності DOM.")}}

- -

Прискорення

- -

Якщо ви хочете, щоб DOM був розібраним (got parsed) якомога швидше після того, як користувач зробив запит сторінки, ви можете зробити ваш JavaScript асинхронним та оптимізувати завантаження стилів. Якщо цього не зробити, це сповільнить завантаження сторінки через те, що воно буде відбуватися паралельно і марнувати трафік у головного html документа.

- -

Основна інформація

- -
-
Специфікація
-
HTML5
-
Інтерфейс
-
Подія
-
Спливання
-
Так
-
Можливість скасування
-
Так (однак скасування як простої події скасувати не можна)
-
 
-
 
-
 
-
 
-
Ціль
-
Документ
-
Типова дія
-
Немає.
-
- -

Властивості

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ВластивістьТипОпис
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Приклад

- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM fully loaded and parsed");
-  });
-</script>
-
- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM fully loaded and parsed");
-  });
-
-for(var i=0; i<1000000000; i++)
-{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
-</script>
-
- -

Сумісність з браузерами

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]{{CompatGeckoDesktop("1")}}[1]9.0[2]9.03.1[1]
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
-
- -

[1] Bubbling для цієї події підтримується принаймні Gecko 1.9.2, Chrome 6, and Safari 4.

- -

[2] Internet Explorer 8 підтримує подію readystatechange , яка може використовуватися для того, щоб визначити чи готовий DOM. У більш ранніх версіях Internet Explorer цей стан може бути визначений повторними спробами виконання document.documentElement.doScroll("left");,  так як цей фрагмент коду буде генерувати помилку, поки DOM не буде готовий.

- -

Подібні події

- - diff --git a/files/uk/web/api/window/history/index.html b/files/uk/web/api/window/history/index.html deleted file mode 100644 index 208b453c09..0000000000 --- a/files/uk/web/api/window/history/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Window.history -slug: Web/API/Window/history -tags: - - API - - History API - - Property - - Reference - - Window -translation_of: Web/API/Window/history ---- -

{{ APIRef }}

- -

Window.history - це незмінювана (read-only) властивість, що повертає посилання на об'єкт {{domxref("History")}}, який надає інтерфейс для керування історією сеансу браузера (сторінки, відвіданій на вкладці або фреймі, в якому завантажена поточна сторінка ).

- -

Дивіться Manipulating the browser history для прикладів і деталей. Зокрема, у цій статті пояснюються особливості безпеки методів pushState() та replaceState(), з якими вам варто ознайомитися, перш ніж їх використовувати.

- -

Синтакс

- -
var historyObj = window.history;
-
- -

Приклад

- -
history.back();     // еквівалентно настиканню кнопки назад
-history.go(-1);     // еквівалентно history.back();
-
- -

Примітки

- -

Для сторінок верхнього рівня ви можете побачити список сторінок в історії сеансу, доступних через об'єкт History, у випадаючих списках браузера поруч із кнопками вперед і назад.

- -

З міркуваннь безпеки, об'єкт History не дає доступу непривілейованого коду до URL-адрес інших сторінок в історії сеансів, але дозволяє переміщатися по історії сеансу

- -

Неможливо очистити історію сеансу або вимкнути навігацію кнопок вперед/назад з непривілейованого коду. Найближчим доступним рішенням є метод location.replace(), який замінює поточний елемент історії сеансу наданим URL.

- -

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

- - - - - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}{{Spec2('HTML5 W3C')}} 
- -

Підтримка веб-переглядачами

- - - -

{{Compat("api.Window.history")}}

diff --git a/files/uk/web/api/window/index.html b/files/uk/web/api/window/index.html deleted file mode 100644 index 1c07ee4aa4..0000000000 --- a/files/uk/web/api/window/index.html +++ /dev/null @@ -1,460 +0,0 @@ ---- -title: Window -slug: Web/API/Window -tags: - - API - - DOM - - Interface - - JavaScript - - NeedsTranslation - - Reference - - TopicStub - - Window -translation_of: Web/API/Window ---- -

{{APIRef}}

- -

The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.

- -

This section provides a brief reference for all of the methods, properties, and events available through the DOM window object. The window object implements the Window interface, which in turn inherits from the AbstractView interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the JavaScript Reference and DOM Reference.

- -

In a tabbed browser, such as Firefox, each tab contains its own window object (and if you're writing an extension, the browser window itself is a separate window too - see Working with windows in chrome code for more information). That is, the window object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the window object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.

- -

Properties

- -

This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.

- -

Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.

- -
-
{{domxref("Window.applicationCache")}}  {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}
-
An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.
-
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
-
This property indicates whether the current window is closed or not.
-
{{domxref("Window.Components")}} {{Non-standard_inline}}
-
The entry point to many XPCOM features. Some properties, e.g. classes, are only available to sufficiently privileged code. Web code should not use this property.
-
{{domxref("Window.console")}} {{ReadOnlyInline}}
-
Returns a reference to the console object which provides access to the browser's debugging console.
-
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
-
Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.
-
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
-
Returns the XUL controller objects for the current chrome window.
-
{{domxref("Window.crypto")}} {{readOnlyInline}}
-
Returns the browser crypto object.
-
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
-
Gets/sets the status bar text for the given window.
-
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
-
Returns the ratio between physical pixels and device independent pixels in the current display.
-
{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}
-
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
-
{{domxref("Window.directories")}} {{obsolete_inline}}
-
Synonym of {{domxref("window.personalbar")}}
-
{{domxref("Window.document")}} {{ReadOnlyInline}}
-
Returns a reference to the document that the window contains.
-
{{domxref("Window.frameElement")}} {{readOnlyInline}}
-
Returns the element in which the window is embedded, or null if the window is not embedded.
-
{{domxref("Window.frames")}} {{readOnlyInline}}
-
Returns an array of the subframes in the current window.
-
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
-
This property indicates whether the window is displayed in full screen or not.
-
{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
-
Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.
- Was: Multiple storage objects that are used for storing data across multiple pages.
-
{{domxref("Window.history")}} {{ReadOnlyInline}}
-
Returns a reference to the history object.
-
{{domxref("Window.innerHeight")}}
-
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
-
{{domxref("Window.innerWidth")}}
-
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
-
{{domxref("Window.isSecureContext")}} {{readOnlyInline}}
-
Indicates whether a context is capable of using features that require secure contexts.
-
{{domxref("Window.length")}} {{readOnlyInline}}
-
Returns the number of frames in the window. See also {{domxref("window.frames")}}.
-
{{domxref("Window.location")}} {{ReadOnlyInline}}
-
Gets/sets the location, or current URL, of the window object.
-
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
-
Returns the locationbar object, whose visibility can be toggled in the window.
-
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
-
Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
-
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
-
Returns the menubar object, whose visibility can be toggled in the window.
-
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
-
Returns the message manager object for this window.
-
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}
-
The time in milliseconds since epoch at which the current animation cycle began.
-
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
-
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
-
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
-
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
-
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
-
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
-
{{domxref("Window.name")}}
-
Gets/sets the name of the window.
-
{{domxref("Window.navigator")}} {{readOnlyInline}}
-
Returns a reference to the navigator object.
-
{{domxref("Window.opener")}}
-
Returns a reference to the window that opened this current window.
-
{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}
-
Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.
-
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
-
Gets the height of the outside of the browser window.
-
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
-
Gets the width of the outside of the browser window.
-
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
-
An alias for {{domxref("window.scrollX")}}.
-
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
-
An alias for {{domxref("window.scrollY")}}
-
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
-
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
-
{{domxref("Window.parent")}} {{readOnlyInline}}
-
Returns a reference to the parent of the current window or subframe.
-
{{domxref("Window.performance")}} {{readOnlyInline}}
-
Provides a hosting area for performance related attributes.
-
{{domxref("Window.personalbar")}} {{readOnlyInline}}
-
Returns the personalbar object, whose visibility can be toggled in the window.
-
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
-
Formerly provided access to install and remove PKCS11 modules.
-
{{domxref("Window.returnValue")}}
-
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
-
{{domxref("Window.screen")}} {{readOnlyInline}}
-
Returns a reference to the screen object associated with the window.
- -
{{domxref("Window.screenX")}} {{readOnlyInline}}
-
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
-
{{domxref("Window.screenY")}} {{readOnlyInline}}
-
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
-
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
-
Returns the scrollbars object, whose visibility can be toggled in the window.
-
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
-
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
-
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
-
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
-
{{domxref("Window.scrollX")}} {{readOnlyInline}}
-
Returns the number of pixels that the document has already been scrolled horizontally.
-
{{domxref("Window.scrollY")}} {{readOnlyInline}}
-
Returns the number of pixels that the document has already been scrolled vertically.
-
{{domxref("Window.self")}} {{ReadOnlyInline}}
-
Returns an object reference to the window object itself.
-
{{domxref("Window.sessionStorage")}}
-
Returns a storage object for storing data within a single page session.
-
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
-
Returns a reference to the window object of the sidebar.
-
{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
-
Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using Web Speech API speech synthesis functionality.
-
{{domxref("Window.status")}}
-
Gets/sets the text in the statusbar at the bottom of the browser.
-
{{domxref("Window.statusbar")}} {{readOnlyInline}}
-
Returns the statusbar object, whose visibility can be toggled in the window.
-
{{domxref("Window.toolbar")}} {{readOnlyInline}}
-
Returns the toolbar object, whose visibility can be toggled in the window.
-
{{domxref("Window.top")}} {{readOnlyInline}}
-
Returns a reference to the topmost window in the window hierarchy. This property is read only.
-
{{domxref("Window.window")}} {{ReadOnlyInline}}
-
Returns a reference to the current window.
-
window[0], window[1], etc.
-
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
-
- -

Properties implemented from elsewhere

- -
-
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
-
Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
-
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
-
Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.
-
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
-
Returns a boolean indicating whether the current context is secure (true) or not (false).
-
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
-
Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)
-
- -

Methods

- -

This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.

- -
-
{{domxref("Window.alert()")}}
-
Displays an alert dialog.
- -
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Moves back one in the window history.
-
{{domxref("Window.blur()")}}
-
Sets focus away from the window.
-
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
-
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.
-
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
-
Registers the window to capture all events of the specified type.
-
{{domxref("Window.clearImmediate()")}}
-
Cancels the repeated execution set using setImmediate.
-
{{domxref("Window.close()")}}
-
Closes the current window.
-
{{domxref("Window.confirm()")}}
-
Displays a dialog with a message that the user needs to respond to.
-
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.dispatchEvent()")}}
-
Used to trigger an event.
-
{{domxref("Window.dump()")}}
-
Writes a message to the console.
-
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.find()")}}
-
Searches for a given string in a window.
-
{{domxref("Window.focus()")}}
-
Sets focus on the current window.
-
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Moves the window one document forward in the history.
-
{{domxref("Window.getAttention()")}}
-
Flashes the application icon.
-
{{domxref("Window.getAttentionWithCycleCount()")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.getComputedStyle()")}}
-
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
-
{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
-
Gets default computed style for the specified element, ignoring author stylesheets.
-
{{domxref("Window.getSelection()")}}
-
Returns the selection object representing the selected item(s).
-
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Returns the browser to the home page.
-
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
-
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
-
{{domxref("Window.maximize()")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.minimize()")}} (top-level XUL windows only)
-
Minimizes the window.
-
{{domxref("Window.moveBy()")}}
-
Moves the current window by a specified amount.
-
{{domxref("Window.moveTo()")}}
-
Moves the window to the specified coordinates.
-
{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
-
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a MozBeforePaint event to fire before that repaint occurs.
-
{{domxref("Window.open()")}}
-
Opens a new window.
-
{{domxref("Window.openDialog()")}}
-
Opens a new dialog window.
-
{{domxref("Window.postMessage()")}}
-
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
-
{{domxref("Window.print()")}}
-
Opens the Print Dialog to print the current document.
-
{{domxref("Window.prompt()")}}
-
Returns the text entered by the user in a prompt dialog.
-
{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}
-
Releases the window from trapping events of a specific type.
-
{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
-
Enables the scheduling of tasks during a browser's idle periods.
-
{{domxref("Window.resizeBy()")}}
-
Resizes the current window by a certain amount.
-
{{domxref("Window.resizeTo()")}}
-
Dynamically resizes window.
-
{{domxref("Window.restore()")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.scroll()")}}
-
Scrolls the window to a particular place in the document.
-
{{domxref("Window.scrollBy()")}}
-
Scrolls the document in the window by the given amount.
-
{{domxref("Window.scrollByLines()")}}
-
Scrolls the document by the given number of lines.
-
{{domxref("Window.scrollByPages()")}}
-
Scrolls the current document by the specified number of pages.
-
{{domxref("Window.scrollTo()")}}
-
Scrolls to a particular set of coordinates in the document.
-
{{domxref("Window.setCursor()")}}
-
Changes the cursor for the current window
-
{{domxref("Window.setImmediate()")}}
-
Executes a function after the browser has finished other heavy tasks
-
{{domxref("Window.setResizable()")}}
-
Toggles a user's ability to resize a window.
-
{{domxref("Window.showModalDialog()")}}
-
Displays a modal dialog.
-
{{domxref("Window.sizeToContent()")}}
-
Sizes the window according to its content.
-
{{domxref("Window.stop()")}}
-
This method stops window loading.
-
{{domxref("Window.updateCommands()")}}
-
Updates the state of commands of the current chrome window (UI).
-
- -

Methods implemented from elsewhere

- -
-
{{domxref("EventTarget.addEventListener()")}}
-
Register an event handler to a specific event type on the window.
-
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
-
Decodes a string of data which has been encoded using base-64 encoding.
-
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
-
Creates a base-64 encoded ASCII string from a string of binary data.
-
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
-
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
-
Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
-
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
-
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
-
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
-
Starts the process of fetching a resource from the network.
-
{{domxref("EventTarget.removeEventListener")}}
-
Removes an event listener from the window.
-
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
-
Schedules a function to execute every time a given number of milliseconds elapses.
-
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
-
Schedules a function to execute in a given amount of time.
-
- -

Event handlers

- -

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

- -

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.

- -
-

Note: Starting in {{Gecko("9.0")}}, you can now use the syntax if ("onabort" in window) to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers for details.

-
- -
-
{{domxref("GlobalEventHandlers.onabort")}}
-
Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress
-
{{domxref("WindowEventHandlers.onafterprint")}}
-
Called when the print dialog box is closed. See {{event("afterprint")}} event.
-
{{domxref("WindowEventHandlers.onbeforeprint")}}
-
Called when the print dialog box is opened. See {{event("beforeprint")}} event.
-
{{domxref("Window.onbeforeinstallprompt")}}
-
An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.
-
{{domxref("WindowEventHandlers.onbeforeunload")}}
-
An event handler property for before-unload events on the window.
-
{{domxref("GlobalEventHandlers.onblur")}}
-
Called after the window loses focus, such as due to a popup.
-
{{domxref("GlobalEventHandlers.onchange")}}
-
An event handler property for change events on the window.
-
{{domxref("GlobalEventHandlers.onclick")}}
-
Called after the ANY mouse button is pressed & released
-
{{domxref("GlobalEventHandlers.ondblclick")}}
-
Called when a double click is made with ANY mouse button.
-
{{domxref("GlobalEventHandlers.onclose")}}
-
Called after the window is closed
-
{{domxref("GlobalEventHandlers.oncontextmenu")}}
-
Called when the RIGHT mouse button is pressed
-
{{domxref("Window.ondevicelight")}}
-
An event handler property for any ambient light levels changes
-
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
-
Called if accelerometer detects a change (For mobile devices)
-
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
-
Called when the orientation is changed (For mobile devices)
-
{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only
-
An event handler property for any device orientation changes.
-
{{domxref("Window.ondeviceproximity")}}
-
An event handler property for device proximity event
-
{{domxref("GlobalEventHandlers.onerror")}}
-
Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.
-
{{domxref("GlobalEventHandlers.onfocus")}}
-
Called after the window receives or regains focus. See {{event("focus")}} events.
-
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
-
An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.
-
{{domxref("Window.onappinstalled")}}
-
Called when the page is installed as a webapp. See {{event('appinstalled')}} event.
-
{{domxref("Window.oninput")}}
-
Called when the value of an <input> element changes
-
{{domxref("GlobalEventHandlers.onkeydown")}}
-
Called when you begin pressing ANY key. See {{event("keydown")}} event.
-
{{domxref("GlobalEventHandlers.onkeypress")}}
-
Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.
-
{{domxref("GlobalEventHandlers.onkeyup")}}
-
Called when you finish releasing ANY key. See {{event("keyup")}} event.
-
{{domxref("WindowEventHandlers.onlanguagechange")}}
-
An event handler property for {{event("languagechange")}} events on the window.
-
{{domxref("GlobalEventHandlers.onload")}}
-
Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.
-
{{domxref("WindowEventHandlers.onmessage")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmousedown")}}
-
Called when ANY mouse button is pressed.
-
{{domxref("GlobalEventHandlers.onmousemove")}}
-
Called continously when the mouse is moved inside the window.
-
{{domxref("GlobalEventHandlers.onmouseout")}}
-
Called when the pointer leaves the window.
-
{{domxref("GlobalEventHandlers.onmouseover")}}
-
Called when the pointer enters the window
-
{{domxref("GlobalEventHandlers.onmouseup")}}
-
Called when ANY mouse button is released
-
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
-
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
-
{{domxref("WindowEventHandlers.onoffline")}}
-
Called when network connection is lost. See {{event("offline")}} event.
-
{{domxref("WindowEventHandlers.ononline")}}
-
Called when network connection is established. See {{event("online")}} event.
-
{{domxref("WindowEventHandlers.onpagehide")}}
-
Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.
-
{{domxref("WindowEventHandlers.onpageshow")}}
-
Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.
-
{{domxref("Window.onpaint")}}
-
An event handler property for paint events on the window.
-
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
-
Called when a back putton is pressed.
-
{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
-
An event handler for handled {{jsxref("Promise")}} rejection events.
-
{{domxref("GlobalEventHandlers.onreset")}}
-
Called when a form is reset
-
{{domxref("GlobalEventHandlers.onresize")}}
-
Called continuously as you are resizing the window.
-
{{domxref("GlobalEventHandlers.onscroll")}}
-
Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked
-
{{domxref("GlobalEventHandlers.onwheel")}}
-
Called when the mouse wheel is rotated around any axis
-
{{domxref("GlobalEventHandlers.onselect")}}
-
Called after text in an input field is selected
-
{{domxref("GlobalEventHandlers.onselectionchange")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
-
{{domxref("WindowEventHandlers.onstorage")}}
-
Called when there is a change in session storage or local storage. See {{event("storage")}} event
-
{{domxref("GlobalEventHandlers.onsubmit")}}
-
Called when a form is submitted
-
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
-
An event handler for unhandled {{jsxref("Promise")}} rejection events.
-
{{domxref("WindowEventHandlers.onunload")}}
-
Called when the user navigates away from the page.
-
{{domxref("Window.onuserproximity")}}
-
An event handler property for user proximity events.
-
{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}
-
Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).
-
{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}
-
Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).
-
{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}
-
represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("onvrdisplaypresentchange")}} event fires).
-
- -

Constructors

- -

See also the DOM Interfaces.

- -
-
{{domxref("Window.ConstantSourceNode")}}
-
Creates an instance of {{domxref("ConstantSourceNode")}}
-
{{domxref("Window.DOMParser")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.GeckoActiveXObject")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Image")}}
-
Used for creating an {{domxref("HTMLImageElement")}}.
-
{{domxref("Option")}}
-
Used for creating an {{domxref("HTMLOptionElement")}}
-
{{domxref("Window.QueryInterface")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.XMLSerializer")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Worker")}}
-
Used for creating a Web worker
-
{{domxref("Window.XPCNativeWrapper")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.XPCSafeJSObjectWrapper")}}
-
{{todo("NeedsContents")}}
-
- -

Interfaces

- -

See DOM Reference

- -

See also

- - diff --git a/files/uk/web/api/window/localstorage/index.html b/files/uk/web/api/window/localstorage/index.html deleted file mode 100644 index 84401af92f..0000000000 --- a/files/uk/web/api/window/localstorage/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Window.localStorage -slug: Web/API/Window/localStorage -tags: - - API - - Property - - Web Storage - - Window - - Довідка -translation_of: Web/API/Window/localStorage ---- -

{{APIRef()}}

- -

Властивість localStorage надає доступ до об’єкта {{domxref("Storage")}}, пов'язаного з джерелом поточного {{domxref("Document", "документа")}}. Сховище localStorage є схожим на sessionStorage, але не має обмежень тривалості зберігання даних, тоді як дані sessionStorage видаляються по закритті сторінки (насправді, лише після закриття всіх сторінок з цього джерела, якщо їх кілька відкрито в переглядачі).

- -

Варто також зазначити, що сторінки, завантажені з різних джерел (важить все: ім'я хоста, порт, та навіть протокол — http/https), з міркувань безпеки мають незалежні окремі сховища, тож до даних одне одного доступу не мають.

- -

Синтакс

- -
myStorage = window.localStorage;
- -

Значення

- -

Об’єкт типу {{domxref("Storage")}}, який можна використовувати для доступу до чинного для поточної сторінки сховища.

- -

Винятки

- -
-
SecurityError
-
Виникає в разі порушення встановлених правил або коли джерелом сторінки є неприйнятний протокол/хост/порт (наприклад, коли протоколом джерела є file: чи data:). Зокрема, користувач може заборонити збереження даних з окремих джерел в налаштуваннях переглядача.
-
- -

Приклад

- -

Розгляньмо основні дії зі сховищем: запис, читання, видалення окремого ключа та повне очищення всього сховища.

- -

Цей приклад створює (чи змінює, якщо такий ключ вже існує) запис в чинному для поточної сторінки сховищі (через об'єкт типу {{domxref("Storage")}}) за допомогою метода {{domxref("Storage.setItem()", "setItem()")}}:

- -
localStorage.setItem('Кіт', 'Барсик');
- -

Дістати значення за ключем дозволяє метод {{domxref("Storage.getItem()", "getItem()")}}:

- -
var cat = localStorage.getItem('Кіт');
- -

Для видалення раніше створеного запису за його ключем існує метод {{domxref("Storage.removeItem()", "removeItem()")}}:

- -
localStorage.removeItem('Кіт');
- -

А для очищення сховища (видалення всіх створених записів) призначено метод {{domxref("Storage.clear()", "clear()")}}:

- -
localStorage.clear();
- -
-

Заувага: повний приклад див. у статті Використання Web Storage API.

-
- -

А тепер розгляньмо дещо змістовніший приклад:

- -
function clearCart() {
-  var count = parseInt(localStorage.getItem('cart-size')) || 0;
-  for (var i = 1; i <= count; i++) {
-    localStorage.removeItem('cart-item-' + i)
-  }
-  localStorage.removeItem('cart-size');
-}
-
-
-function addCartItem(itemId) {
-  var count = parseInt(localStorage.getItem('cart-size')) || 0;
-  localStorage.setItem('cart-item-' + (count + 1), itemId);
-  localStorage.setItem('cart-size', count + 1);
-}
-
-function getCartItems() {
-  var items = [];
-  var count = parseInt(localStorage.getItem('cart-size')) || 0;
-
-  for (var i = 1; i <= count; i++) {
-    var itemId = localStorage.getItem('cart-item-' + i);
-    items.push(parseInt(itemId));
-  }
-
-  return items;
-}
-
-
-addCartItem(111);
-addCartItem(222);
-
-console.log(getCartItems());  // виводить [111, 222]
-clearCart();
-console.log(getCartItems());  // виводить []
-
- -

Варто зауважити, що сховище працює лише з рядками (як ключ, так і значення мусить бути рядком, або його буде перетворено на рядок неявним викликом {{jsxref("Object.prototype.toString()", "toString()")}}). Тому для зберігання структурованих даних доведеться спершу подбати про їх перетворення в текстовий рядок — наприклад, JSON:

- -
function setLocalStorageObjectItem(key, value) {
-  if (value === undefined) {
-    localStorage.removeItem(key);
-  } else {
-    localStorage.setItem(key, JSON.stringify(value));
-  }
-}
-
-function getLocalStorageObjectItem(key) {
-  var json = localStorage.getItem(key);
-  if (json === undefined) {
-    return undefined;
-  }
-  return JSON.parse(json);
-}
-
-setLocalStorageObjectItem('foo', {a: {x: 123}});
-console.log(getLocalStorageObjectItem('foo'));  // виводить {a: {x: 123}}
-
- -

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

- - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webstorage.html#dom-localstorage', 'localStorage')}}{{Spec2('HTML WHATWG')}} 
- -

Підтримка веб-переглядачами

- - - -

{{Compat("api.Window.localStorage")}}

- -

Див. також

- - diff --git a/files/uk/web/api/window/rejectionhandled_event/index.html b/files/uk/web/api/window/rejectionhandled_event/index.html deleted file mode 100644 index f725917a75..0000000000 --- a/files/uk/web/api/window/rejectionhandled_event/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: 'Window: подія rejectionhandled' -slug: Web/API/Window/rejectionhandled_event -tags: - - API - - Event - - HTML DOM - - JavaScript - - Promise - - Window - - Worker - - global - - onrejectionhandled - - rejectionhandled - - Проміс - - подія -translation_of: Web/API/Window/rejectionhandled_event ---- -
{{APIRef("HTML DOM")}}
- -

Подія rejectionhandled посилається у глобальну область видимості скрипта (зазвичай, {{domxref("window")}}, але також {{domxref("Worker")}}), коли відхиляється об'єкт JavaScript {{jsxref("Promise")}}, але після того, як відбулась обробка відхилення. Це можна використовувати для відлагодження та для загальної стійкості застосунка, в тандемі з подією {{domxref("Window.unhandledrejection_event", "unhandledrejection")}}, яка посилається, коли проміс був відхилений, але не існує обробника відхилення.

- - - - - - - - - - - - - - - - - - - - -
СпливаєНі
СкасовуєтьсяНі
Інтерфейс{{domxref("PromiseRejectionEvent")}}
Обробник події{{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}
- -

Приклад

- -

Ви можете використовувати подію rejectionhandled, щоб залогувати проміси, які було відхилено, у консоль, разом з причинами відхилення:

- -
window.addEventListener("rejectionhandled", event => {
-  console.log("Проміс відхилено; причина: " + event.reason);
-}, false);
-
- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}}{{Spec2('HTML WHATWG')}}Початкове визначення.
- -

Сумісність з веб-переглядачами

- - - -

{{Compat("api.Window.rejectionhandled_event")}}

- -

Див. також

- - diff --git a/files/uk/web/api/window/self/index.html b/files/uk/web/api/window/self/index.html deleted file mode 100644 index 70c58d6faf..0000000000 --- a/files/uk/web/api/window/self/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Window.self -slug: Web/API/Window/self -tags: - - API - - HTML DOM - - Window - - Властивість -translation_of: Web/API/Window/self ---- -
{{APIRef}}
- -

Властивість Window.self, доступна лише для читання, повертає window як {{domxref("WindowProxy")}}. Її можна використовувати через крапку на об'єкті window (а саме, window.self) або автономно (self). Перевага автономного запису в тому, що схожий запис існує для не window контексту, наприклад у {{domxref("Worker", "Web Workers", "", 1)}}. Використовуючи self, ви можете звертатись до глобальної області видимості таким чином, що звернення працюватиме не лише в контексті window (self дорівнюватиме window.self), але також у контексті worker (тоді self дорівнюватиме {{domxref("WorkerGlobalScope.self")}}).

- -

Приклад

- -

Наступне використання window.self можна також замінити на window.

- -
if (window.parent.frames[0] != window.self) {
-    // це вікно не є першим фреймом у списку
-}
-
- -

Більше того, при використанні у активному документі контексту перегляду window - це посилання на поточний глобальний об'єкт, і таким чином, усе перечислене є еквівалентним:

- -
var w1 = window;
-var w2 = self;
-var w3 = window.window;
-var w4 = window.self;
-// w1, w2, w3, w4 є строго рівними, та лише w2 функціонуватиме у workers
-
- -

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

- - - - - - - - - - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', '#dom-self', 'Window.self')}}{{Spec2('HTML WHATWG')}}Немає змін від останнього знімку {{SpecName("HTML5.1")}}
{{SpecName('HTML5.1', 'browsers.html#dom-self', 'Window.self')}}{{Spec2('HTML5.1')}}Немає змін від {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-self', 'Window.self')}}{{Spec2('HTML5 W3C')}}Перший знімок, що містить визначення Window.self.
- -

Сумісність з веб-переглядачами

- - - -

{{Compat("api.Window.self")}}

- -

Див. також

- - diff --git a/files/uk/web/api/window/unhandledrejection_event/index.html b/files/uk/web/api/window/unhandledrejection_event/index.html deleted file mode 100644 index 8f621c5ea9..0000000000 --- a/files/uk/web/api/window/unhandledrejection_event/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: 'Window: подія unhandledrejection' -slug: Web/API/Window/unhandledrejection_event -tags: - - API - - Event - - HTML DOM - - JavaScript - - Promise - - Window - - Worker - - unhandledrejection - - Проміс - - відхилення - - подія -translation_of: Web/API/Window/unhandledrejection_event ---- -
{{APIRef("HTML DOM")}}
- -

Подія unhandledrejection посилається у глобальну область видимості скрипта, коли об'єкт JavaScript {{jsxref("Promise")}}, що не має обробника відхилення, відхиляється; зазвичай, це {{domxref("window")}}, але також може бути {{domxref("Worker")}}. Це корисно для відлагодження та для надання резервної обробки помилок у неочікуваних ситуаціях.

- - - - - - - - - - - - - - - - - - - - -
СпливаєНі
СкасовуєтьсяТак
Інтерфейс{{domxref("PromiseRejectionEvent")}}
Обробник подій{{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}
- -

Примітки щодо використання

- -

Дозвіл події unhandledrejection спливати зрештою призведе до виводу повідомлення помилки у консолі. Ви можете запобігти цьому, викликавши {{domxref("Event.preventDefault", "preventDefault()")}} на інтерфейсі {{domxref("PromiseRejectionEvent")}}; дивіться приклад {{anch("Запобігання обробці за замовчуванням")}} нижче.

- -

Приклади

- -

Тут ми маємо кілька прикладів, які демонструють, як ви можете скористатись подією unhandledrejection. Подія містить деяку корисну інформацію:

- -
-
promise
-
Власне, {{jsxref("Promise","проміс")}}, який був відхилений, не маючи обробника, який зреагував би на відхилення.
-
reason
-
Причина, яка була б передана у обробник відхилення, якби він існував. Дивіться більше інформації у {{jsxref("Promise.catch", "catch()")}}.
-
- -

Базове логування помилки

- -

Цей приклад просто логує інформацію щодо необробленого відхилення проміса у консоль.

- -
window.addEventListener("unhandledrejection", event => {
-  console.warn(`НЕОБРОБЛЕНЕ ВІДХИЛЕННЯ ПРОМІСА: ${event.reason}`);
-});
-
- -

Ви також можете скористатись обробником подій {{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}, щоб налаштувати прослуховувач подій:

- -
window.onunhandledrejection = event => {
-  console.warn(`НЕОБРОБЛЕНЕ ВІДХИЛЕННЯ ПРОМІСА: ${event.reason}`);
-};
-
- -

Запобігання обробці за замовчуванням

- -

Багато середовищ (таких як {{Glossary("Node.js")}}) за замовчуванням виводять необроблені відхилення промісів у консоль. Ви можете запобігти цьому, додавши обробник для подій unhandledrejection, що — на додачу до будь-яких інших задач, які ви бажаєте виконати — викликає {{domxref("Event.preventDefault()", "preventDefault()")}}, щоб скасувати подію, запобігаючи її спливанню та обробці кодом логування під час виконання. Це працює, тому що unhandledrejection скасовується.

- -
window.addEventListener('unhandledrejection', function (event) {
-  // ...тут ваш код, який обробляє необроблені відхилення...
-
-  // Запобігти обробці за замовчуванням (наприклад, виводу
-  // помилки у консоль)
-
-  event.preventDefault();
-});
-
- -

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

- - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'unhandledrejection')}}{{Spec2('HTML WHATWG')}}Початкове визначення.
- -

Сумісність з веб-переглядачами

- - - -

{{Compat("api.Window.unhandledrejection_event")}}

- -

Див. також

- - - -

[1] Відповідний обробник подій визначений як властивість у домішці {{domxref("WindowEventHandlers")}}, яка доступна як у інтерфейсі {{domxref("Window")}}, так і в усіх типах інтерфейсів {{domxref("Worker")}}.

diff --git a/files/uk/web/api/windoweventhandlers/index.html b/files/uk/web/api/windoweventhandlers/index.html deleted file mode 100644 index cb37cc2a2c..0000000000 --- a/files/uk/web/api/windoweventhandlers/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: WindowEventHandlers -slug: Web/API/WindowEventHandlers -tags: - - API - - HTML-DOM - - Interface - - Mixin - - NeedsTranslation - - Reference - - TopicStub - - WindowEventHandlers -translation_of: Web/API/WindowEventHandlers ---- -
{{APIRef("HTML DOM")}}
- -

The WindowEventHandlers mixin describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement additional specific event handlers.

- -
-

Note: WindowEventHandlers is a mixin and not an interface; you can't actually create an object of type WindowEventHandlers.

-
- -

Properties

- -

The events properties, of the form onXYZ, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.

- -
-
{{domxref("WindowEventHandlers.onafterprint")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.
-
{{domxref("WindowEventHandlers.onbeforeprint")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.
-
{{domxref("WindowEventHandlers.onbeforeunload")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.
-
{{domxref("WindowEventHandlers.onhashchange")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.
-
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.
-
{{domxref("WindowEventHandlers.onmessage")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
-
{{domxref("WindowEventHandlers.onmessageerror")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("MessageError")}} event is raised.
-
{{domxref("WindowEventHandlers.onoffline")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.
-
{{domxref("WindowEventHandlers.ononline")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.
-
{{domxref("WindowEventHandlers.onpagehide")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.
-
{{domxref("WindowEventHandlers.onpageshow")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.
-
{{domxref("WindowEventHandlers.onpopstate")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.
-
{{domxref("WindowEventHandlers.onrejectionhandled")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("rejectionhandled")}} event is raised, indicating that a {{jsxref("Promise")}} was rejected and the rejection has been handled.
-
{{domxref("WindowEventHandlers.onstorage")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.
-
{{domxref("WindowEventHandlers.onunhandledrejection")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unhandledrejection")}} event is raised, indicating that a {{jsxref("Promise")}} was rejected but the rejection was not handled.
-
{{domxref("WindowEventHandlers.onunload")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.
-
- -

Methods

- -

This interface defines no method.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'WindowEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windoweventhandlers', 'WindowEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onlanguage since the {{SpecName("HTML5 W3C")}} snapshot.
{{SpecName("HTML5 W3C", "#windoweventhandlers", "WindowEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowEventHandlers (properties where on the target before it).
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html b/files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html deleted file mode 100644 index 81cabc79bd..0000000000 --- a/files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: WindowEventHandlers.onrejectionhandled -slug: Web/API/WindowEventHandlers/onrejectionhandled -tags: - - API - - HTML DOM - - JavaScript - - Promise - - WindowEventHandlers - - onrejectionhandled - - Обробник подій - - Проміс - - події -translation_of: Web/API/WindowEventHandlers/onrejectionhandled ---- -
{{APIRef}}
- -

Властивість onrejectionhandled домішки {{domxref("WindowEventHandlers")}} - це {{domxref("EventHandler")}} для обробки подій rejectionhandled. Ці події виникають, коли відхиляються об'єкти {{jsxref("Promise")}}.

- -

Синтаксис

- -
window.addEventListener("rejectionhandled", function(event) { ... });
-window.onrejectionhandled = function(event) { ...};
- -

Приклад

- -
window.onrejectionhandled = function(e) {
-  console.log(e.reason);
-}
- -

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

- - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onrejectionhandled', 'onrejectionhandled')}}{{Spec2('HTML WHATWG')}}Початкове визначення.
- -

Сумісність з веб-переглядачами

- - - -

{{Compat("api.WindowEventHandlers.onrejectionhandled")}}

diff --git a/files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html b/files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html deleted file mode 100644 index 888297c406..0000000000 --- a/files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: WindowEventHandlers.onunhandledrejection -slug: Web/API/WindowEventHandlers/onunhandledrejection -tags: - - API - - HTML DOM - - Promise - - WindowEventHandlers - - onunhandledrejection - - Властивість - - події - - проміси -translation_of: Web/API/WindowEventHandlers/onunhandledrejection ---- -
{{APIRef}}
- -

Властивість onunhandledrejection домішки {{domxref("WindowEventHandlers")}} - це {{domxref("EventHandler")}} для обробки подій unhandledrejection. Ці події виникають для необроблених відхилень об'єктів {{jsxref("Promise")}}.

- -

Синтаксис

- -
window.onunhandledrejection = function;
- -

Значення

- -

function - це {{domxref("EventHandler")}} або функція, яку треба викликати, коли вікно отримує події unhandledrejection. Обробник подій отримує вхідний параметр як {{domxref("PromiseRejectionEvent")}}.

- -

Приклади

- -

Цей приклад просто виводить у консоль значення reason (причина) необроблених відхилень.

- -
window.onunhandledrejection = function(e) {
-  console.log(e.reason);
-}
- -

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

- - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onunhandledrejection', 'onunhandledrejection')}}{{Spec2('HTML WHATWG')}}Початкове визначення.
- -

Сумісність з веб-переглядачами

- - - -

{{Compat("api.WindowEventHandlers.onunhandledrejection")}}

diff --git a/files/uk/web/api/windoworworkerglobalscope/index.html b/files/uk/web/api/windoworworkerglobalscope/index.html deleted file mode 100644 index 0c8177dbaa..0000000000 --- a/files/uk/web/api/windoworworkerglobalscope/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope -slug: Web/API/WindowOrWorkerGlobalScope -tags: - - API - - DOM - - DOM API - - NeedsTranslation - - Service Worker - - TopicStub - - Window - - WindowOrWorkerGlobalScope - - Worker - - WorkerGlobalScope -translation_of: Web/API/WindowOrWorkerGlobalScope ---- -
{{ApiRef()}}
- -

The WindowOrWorkerGlobalScope mixin describes several features common to the {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}} interfaces. Each of these interfaces can, of course, add more features in addition to the ones listed below.

- -
-

Note: WindowOrWorkerGlobalScope is a mixin and not an interface; you can't actually create an object of type WindowOrWorkerGlobalScope.

-
- -

Properties

- -

These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.

- -
-
-
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
-
Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
-
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
-
Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.
-
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
-
Returns a boolean indicating whether the current context is secure (true) or not (false).
-
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
-
Returns the origin of the global scope, serialized as a string.
-
-
- -

Methods

- -

These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.

- -
-
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
-
Decodes a string of data which has been encoded using base-64 encoding.
-
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
-
Creates a base-64 encoded ASCII string from a string of binary data.
-
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
-
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
-
Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
-
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
-
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
-
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
-
Starts the process of fetching a resource from the network.
-
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
-
Schedules a function to execute every time a given number of milliseconds elapses.
-
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
-
Schedules a function to execute in a given amount of time.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', 'WindowOrWorkerGlobalScope mixin')}}{{Spec2('HTML WHATWG')}}This is where the main mixin is defined.
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Definition of the fetch() method.
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}}Definition of the caches property.
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Definition of the indexedDB property.
{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}{{Spec2('Secure Contexts')}}Definition of the isSecureContext property.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(52)}}54{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin{{CompatGeckoDesktop(54)}}59{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid WebviewEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(52)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}54
origin{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(54)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}59
-
- -

 

- -

See also

- - diff --git a/files/uk/web/api/windoworworkerglobalscope/settimeout/index.html b/files/uk/web/api/windoworworkerglobalscope/settimeout/index.html deleted file mode 100644 index eff8576a84..0000000000 --- a/files/uk/web/api/windoworworkerglobalscope/settimeout/index.html +++ /dev/null @@ -1,429 +0,0 @@ ---- -title: WindowTimers.setTimeout() -slug: Web/API/WindowOrWorkerGlobalScope/setTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout -original_slug: Web/API/WindowTimers/setTimeout ---- -
{{APIRef("HTML DOM")}}
- -
 
- -
Метод setTimeout(), що належить об'єкту {{domxref("WindowOrWorkerGlobalScope")}}, та наслідується від window.setTimeout,  встановлює таймер, що виконує функцію або вказаний фрагмент коду один раз, щойно спливе заданий час.
- -
 
- -

Синтаксис

- -
var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);
-var timeoutID = window.setTimeout(code[, delay]);
-
- -

Параметри

- -
-
func
-
{{jsxref("function")}} котру необхідно виконати після того, як вийде заданий час.
-
code
-
Опційний синтаксис, котрий дозволяє задавати рядок замість функції, котра компілюється і виконується при спрацюванні таймера. Використання цього синтаксису не рекомендовано з тих же ж причин, котрі роблять застосування {{jsxref("eval()")}} загрозою безпеці.
-
delay {{optional_inline}}
-
 
-
Час у мілісекундах (тисячних секунди), котрий таймер має зачекати перед тим, як виконати вказану функцію або код. Якщо цей параметр пропустити, буде використано значення 0. Варто зазначити, що справжній час затримки, може бути довшим. Дивіться розділ {{anch("Reasons for delays longer than specified","Причини, з яких затримка є фактично довшою ніж задано")}}
-
param1, ..., paramN {{optional_inline}}
-
Додаткові параметри, що передаються до func або code, щойно час таймера спливе.
-
- -
-

Зверніть увагу:  Internet Explorer 9 та більш ранні версії не підтримують додаткові параметри. Застосовуйте поліфіл, щобл уможливити цей функціонал (див. розділ Callback arguments).  

-
- -

Значення, що повертається

- -


- Після виклику setTimeout(), повертається timeoutID  - це не нульове цифрове значення, що використовується для ідентифікації створеного таймера. Цей ідентифікатор можна передати як параметр до {{domxref("Window.clearTimeout()")}} щоб відмінити таймер.

- -

Корисно знати, що setTimeout() та {{domxref("WindowTimers.setInterval", "setInterval()")}} використовують спільну колекцію ID ідентифікаторів, а також що  clearTimeout() та {{domxref("WindowTimers.clearInterval", "clearInterval()")}} технічно можуть бути взаємозамінними. Тим не менше, задля ясності, варто завжди зіставляти їх, аби не допускати помилок під час розробки коду. 

- -

Приклад

- -

У наступному прикладі створено дві кнопки на веб сторінці, що прив'язані до setTimeout() та clearTimeout() процесів. Після натискання на першу кнопку встановлюється таймер, що викликає діалогове вікно alert через дві секунди та зберігає ID таймера для подальшого використання у clearTimeout(). За бажанням ви можете відмінити цей таймер, якщо натисните другу кнопку.

- -

HTML код

- -
<p>Live Example</p>
-<button onclick="delayedAlert();">Відобразити діалогове вікно alert через дві секунди.</button>
-<p></p>
-<button onclick="clearAlert();">Відмінити відображення діалогового вікна.</button>
-
- -

JavaScript код

- -
var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert("Це було дійсно повільно!");
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-
- -

Результат

- -

{{EmbedLiveSample('Example', 'Приклад')}}

- -

Дивіться також clearTimeout() example.

- -

Поліфіл

- -

Якщо вам необхідно передати один чи декілька аргументів до колбек функції, а також потрібно, щоб цей функціонал працював у браузерах, що не підтримують передачу додаткових аргументів для setTimeout() чи setInterval() (наприклад, версії Internet Explorer 9 чи нижче), ви можете застосувати цей поліфіл, який активує стандартну HTML5 функціональність. Просто додайте цей код на початку вашого скрипта: 

- -
/*\
-|*|
-|*|  Polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-(function() {
-  setTimeout(function(arg1) {
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeST__ = window.setTimeout;
-    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeST__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-
-  var interval = setInterval(function(arg1) {
-    clearInterval(interval);
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeSI__ = window.setInterval;
-    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeSI__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-}())
-
- -

Фікс для IE

- -

Якщо вам потрібен фікс, який не впливатиме на роботу жодного іншого мобільного чи десктопного браузера, окрім IE9 та нижче, ви можете скористатись умовними коментарями JavaScript:

- -
/*@cc_on
-  // conditional IE < 9 only fix
-  @if (@_jscript_version <= 9)
-  (function(f){
-     window.setTimeout=f(window.setTimeout);
-     window.setInterval=f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
-  @end
-@*/
-
- -

Або використати умовні коментарі HTML для IE9 та нижче:

- -
<!--[if lte IE 9]><script>
-(function(f){
-window.setTimeout=f(window.setTimeout);
-window.setInterval=f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
-});
-</script><![endif]-->
-
- -

Тимчасові рішення

- -

Ще одне можливе рішення - використання анонімної функції для виклику колбека, але це вартісне рішення. Приклад:

- -
var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
-
- -

Приклад, наведений вище, може бути також написаний за допомогою   arrow function:

- -
var intervalID = setTimeout(() => { myFunc("one", "two", "three"); }, 1000);
-
- -

Ще одне рішення - використання   function's bind. Приклад:

- -
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
-
- -

Проблема "this"

- -

Коли ви передаєте до setTimeout() метод або будь-яку іншу функцію, ймовірно вона буде викликана не з тим значенням this, на яке ви очікуєте. Ця проблема детально описана у JavaScript reference.

- -

Пояснення

- -

Код, що виконується всередині setTimeout(), викликається із  іншого контекста виконання (execution context), ніж у функції, яка викликала setTimeout. До функції, яку викликають всередині setTimeout застосовуються звичайні правила призначення this. І, якщо ви не встановили this під час виклику або за допомогою bind, його значенням за замовчуванням буде об'єкт  global (або window) у нестрогому режимі, або undefined у строгому режимі. Значення this буде іншим, аніж у функції, яка викликала setTimeout. Розгляньте наступний приклад:

- -
myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"
- -

Приклад вище працює тому, що myMethod викликано, як метод масиву myArray. Тому його this дорівнює myArray, а значення this[sProperty] всередині метода дорівнює myArray[sProperty]. Тим не менше, у наступному прикладі:

- -
setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
-setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds
- -

Метод myArray.myMethod передано до setTimeout, як звичайну функцію, якій не задано значення this. І коли вона викликається, її this за замовчуванням дорівнює об'єкту window. У  setTimeout неможливо передати this аргументом, як, наприклад, у методи Array (forEach, reduce, тощо), або через використання  call, як показано у прикладі нижче:

- -
setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
-
- -

Можливі рішення

- -

Типовий спосіб вирішення цієї проблеми - використання функції обгортки, яка встановлює this із необхідним значенням: 

- -
setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
- -

Стрілочна функція також є прийнятною альтернативою:

- -
setTimeout(() => {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout(() => {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
- -

Ще одне можливе рішення проблеми this - замінити нативні глобальні функції setTimeout() та setInterval() кастомними функціями, які можуть приймати об'єкт this і застосовувати його у колбек функції, використовуючи  Function.prototype.call. Наприклад: 

- -
// Enable setting 'this' in JavaScript timers
-
-var __nativeST__ = window.setTimeout,
-    __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
- -
Зверніть увагу:  Подібний підхід дозволяє передавати будь-яку кількість аргументів у колбек функцію таймерів навіть для IE. Таким чином, цей спосіб може також бути використаний як поліфіл. Перегляньте параграф Callback arguments .
- -

Випробування нового підхода:

- -
myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
-
- -
Зверніть увагу:  JavaScript 1.8.5 впровадив метод   Function.prototype.bind(), який встановлює значення this для кожного виклику вказаної функції. Це допомагає уникнути використання функції обгортки для призначення this колбека.
- -

Приклад використання bind():

- -
myArray = ["zero", "one", "two"];
-myBoundMethod = (function (sProperty) {
-    console.log(arguments.length > 0 ? this[sProperty] : this);
-}).bind(myArray);
-
-myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
-myBoundMethod(1); // prints "one"
-setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
-setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
-
- -

Примітки

- -

Таймер можна скасувати за допомогою {{domxref("Window.clearTimeout()")}}. Щоб викликати функцію повторно (наприклад, через кожні N мілісекунди), використовуйте  {{domxref("Window.setInterval()")}}.

- -

Важливо пам'ятати, що функція або фрагмент коду не можуть бути виконані, допоки не буде завершено поток функції, яка викликала setTimeout(). Наприклад. 

- -
function foo(){
-  console.log('foo has been called');
-}
-setTimeout(foo, 0);
-console.log('After setTimeout');
- -

Виведе в консоль:

- -
After setTimeout
-foo has been called
- -

Тому що, навіть не зважаючи на те, що setTimeout було викликано із нульовою затримкою, вона переміщується у чергу і її виконання відбудеться у найближчому наступному циклі, тобто не відразу. Код, що в данний момент виконується, повинен бути завершений. Тільки після цього функції, переміщені в чергу, будуть виконані. Тому порядок виконання може бути іншим, аніж очікувалось.

- -

Passing string literals

- -

Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.

- -
// Recommended
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// Not recommended
-window.setTimeout("alert('Hello World!');", 500);
-
- -

A string passed to setTimeout is evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

- -

Причини чому затримка є фактично довшою ніж вказано

- -

There are a number of reasons why a timeout may take longer to fire than anticipated. This section describes the most common reasons.

- -

Nested timeouts forced to >=4ms

- -

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5.

- -

In fact, 4 ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to {{geckoRelease("5.0")}}, the minimum timeout value for nested timeouts was 10 ms.

- -

To implement a 0 ms timeout in a modern browser, you can use {{domxref("window.postMessage()")}} as described here.

- -

Timeouts in inactive tabs clamped to >=1000ms

- -

To reduce the load (and associated battery usage) from background tabs, timeouts are often clamped to firing no more often than once per second (1000 ms) in inactive tabs.

- -

Firefox implements this behavior since version 5 (see {{bug(633421)}}, the 1000ms constant can be tweaked through the dom.min_background_timeout_value preference). Chrome implements this behavior since version 11 (crbug.com/66078).

- -

Firefox for Android uses a timeout value of 15 minutes for background tabs since {{bug(736602)}} in Firefox 14, and background tabs can also be unloaded entirely.

- -
-

Firefox 50 no longer throttles background tabs if a Web Audio API {{domxref("AudioContext")}} is actively playing sound. Firefox 51 further amends this such that background tabs are no longer throttled if an {{domxref("AudioContext")}} is present in the tab at all, even if no sound is being played. These resolve a number of issues with apps which play note-based music not being able to time or synchronize the music properly when the tab is in the background.

-
- -

Late timeouts

- -

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks

- -

Maximum delay value

- -

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed integer internally. This causes an integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}{{Spec2("HTML WHATWG")}}Initial definition (DOM Level 0)
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Supports parameters for callback[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Supports parameters for callback[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Whether it supports the optional parameters when in its first form or not.

- -

See also

- - diff --git a/files/uk/web/api/xmlhttprequest/index.html b/files/uk/web/api/xmlhttprequest/index.html deleted file mode 100644 index 362f5385cb..0000000000 --- a/files/uk/web/api/xmlhttprequest/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: XMLHttpRequest -slug: Web/API/XMLHttpRequest -tags: - - AJAX - - API - - HTTP - - Interface - - NeedsTranslation - - Reference - - TopicStub - - Web - - XHR -translation_of: Web/API/XMLHttpRequest ---- -
{{APIRef("XMLHttpRequest")}}
- -
- -

Об'єкти XMLHttpRequest використовуються для взаємодії з серверами. Ти можеш отримати дані за URL без повної перезагрузки сторінки. Це дозволяє веб-сторінці оновити частину вмісту, не перешкоджаючи роботі користувача XMLHttpRequest часто використовуюється в програмуванні з використанням технології Ajax.

- -

{{InheritanceDiagram}}

- -
Історія
- -

XMLHttpRequest був спочатку розроблений компанією Microsoft десь у 1999 році і пізніше прийнятий компаніями Mozilla, Apple та Google. З жовтня 2014 року він був стандартизований в WHATWG, разом з новим методом {{domxref("WindowOrWorkerGlobalScope.fetch()", "fetch()")}} на основі промісів.

- -

Не зважаючи на своє ім'я, XMLHttpRequest може використовуватись для отримання будь-якого типу даних, не лише XML, і підтримує інші протоколи окрім HTTP (включаючи file і ftp).

- -

Конструктор

- -
-
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
-
Конструктор ініціалізує об'єкт XMLHttpRequest. Він має бути викликаний перед використанням будь-яких з його методів.
-
- -

Властивості

- -

Успадковує властивості {{domxref("XMLHttpRequestEventTarget")}} і {{domxref("EventTarget")}}.

- -
-
{{domxref("XMLHttpRequest.onreadystatechange")}}
-
{{domxref("EventHandler")}} викликається щоразу, коли атрибут readyState змінюється.
-
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
-
Повертає unsigned short, the state запиту.
-
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
-
Повертає {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, об'єкт JavaScript, або ж {{domxref("DOMString")}}, залежить від значення {{domxref("XMLHttpRequest.responseType")}}, що містить тіло відповіді.
-
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
-
Повертає {{domxref("DOMString")}}, що містить відповідь на запит в якості тексту, або null, якщо запит завершився помилкою або не був надісланим досі.
-
{{domxref("XMLHttpRequest.responseType")}}
-
Вказує на тип відповіді.
-
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
-
Повертає the serialized URL відповіді або ж пустий рядок, якщо URL — null.
-
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
-
Повертає {{domxref("Document")}}, що містить відповідь на запит або null, якщо запит завершився помилкою, досі не був надісланий, або не може бути розпізнаний, як XML чи HTML. Not available in workers.
-
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
-
Повертає unsigned short з статусом відповіді на запит.
-
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
-
Повертає {{domxref("DOMString")}}, що містить стрічку відповіді, повернену HTTP-сервером. Навідміну від {{domxref("XMLHTTPRequest.status")}}, що включає цілісний текст відповіді (наприклад, "200 OK").
-
- -
-

Увага: починаючи від специфікації HTTP/2 (8.1.2.4 Поля пседо-заголовку відповіді), HTTP/2 не визначає шляху передачі версії чи reason phrase, що включається в стрічку статусу HTTP/1.1.

-
- -
-
{{domxref("XMLHttpRequest.timeout")}}
-
Має тип unsigned long. Являє собою час у мілісекундах, відведений на запит перед тим, як буде автоматично перерваний.
-
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
-
{{domxref("EventHandler")}}, що викликається щоразу після спливання часу, відведенного на запит. {{gecko_minversion_inline("12.0")}}
-
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
-
{{domxref("XMLHttpRequestUpload")}}, що являє собою процес завантаження.
-
{{domxref("XMLHttpRequest.withCredentials")}}
-
{{domxref("Boolean")}}, що вказує, чи слід робити запити Access-Control використовуючи такі облікові дані, як файли cookie або заголовки авторизації.
-
- -

Нестандартні властивості

- -
-
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
-
{{Interface("nsIChannel")}}. Канал, що використовується об'єктом коли виконується запит.
-
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
-
Логічна змінна. Якщо її значення — істина, запит буде надісланий без кукі та заголовків аутентифікації.
-
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
-
Логічна змінна. Якщо її значення — істина, оригінальна політика не буде застосована до запиту.
-
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
-
Логічна змінна. Вказує чи представляє об'єкт сервіс фонового запиту.
-
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
-
Є ArrayBuffer. Відповідь на запит у вигляді масиву JavaScript.
-
{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
-
Це особливість Gecko, логічна змінна, що була видалена з Firefox/Gecko 22. Будь ласка, використовуйте натомість Server-Sent Events, Web Sockets, або responseText.
-
- -

Обробники подій

- -

onreadystatechange підримується у всіх браузерах, як властивість XMLHttpRequest.

- -

З тих пір у різних браузерах було впроваджено ряд додаткових обробників подій (onload, onerror, onprogress тощо). Вони підтримуються у Firefox. Зокрема, дивіться nsIXMLHttpRequestEventTarget та Using XMLHttpRequest.

- -

Більш нові браузери, включаючи Firefox, також підтримують прослуховування подій XMLHttpRequest починаючи від стандарту API addEventListener в розширені на встановлення властивостей функцій обробника on*.

- -

Methods

- -
-
{{domxref("XMLHttpRequest.abort()")}}
-
Aborts the request if it has already been sent.
-
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
-
Returns all the response headers, separated by CRLF, as a string, or null if no response has been received.
-
{{domxref("XMLHttpRequest.getResponseHeader()")}}
-
Returns the string containing the text of the specified header, or null if either the response has not yet been received or the header doesn't exist in the response.
-
{{domxref("XMLHttpRequest.open()")}}
-
Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use openRequest() instead.
-
{{domxref("XMLHttpRequest.overrideMimeType()")}}
-
Overrides the MIME type returned by the server.
-
{{domxref("XMLHttpRequest.send()")}}
-
Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.
-
{{domxref("XMLHttpRequest.setRequestHeader()")}}
-
Sets the value of an HTTP request header. You must call setRequestHeader()after open(), but before send().
-
- -

Non-standard methods

- -
-
{{domxref("XMLHttpRequest.init()")}}
-
Initializes the object for use from C++ code.
-
- -
Warning: This method must not be called from JavaScript.
- -
-
{{domxref("XMLHttpRequest.openRequest()")}}
-
Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use open() instead. See the documentation for open().
-
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
-
A variant of the send() method that sends binary data.
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Live standard, latest version
- -

Browser compatibility

- - - -
{{Compat("api.XMLHttpRequest")}}
- -

See also

- - -- cgit v1.2.3-54-g00ecf